This content originally appeared on DEV Community and was authored by Roman Harmyder
I would like to share with you my little joy. My suggestion for expanding the function useRefHistory by adding the delay effect to history snapshots was accepted by maintainers of VueUse. I wrote a pull request, that was merged. New features are already available in the latest version of VueUse (> v6.3.3). But first things first.
Adventure story
In my last article, I wrote about useRefHistory, and how to implement it in your application. While using this function, I noticed that the result of its work is a little impractical and not convenient for the user of the application. The function takes a snapshot of the data every time it notices the slightest change, even if it's just one letter. If you are writing a long text or a to-do list, make a mistake, and want to revert the changes, it is very inconvenient to press Undo for each letter. It is more convenient to configure this function so that it saves changes with a time delay.
I started looking for a solution. It seems that it lies on the surface - you just need to add setTimeOut to the watch, which monitors data changes, but it turned out that this was not enough. watch also need to skip changes that the undo and redo methods do to data, otherwise, this creates complete chaos!!!
Looking for a solution led me to the source code of the VueUse library itself. It turned out that the basis for that was already laid by the authors.
I opened a issue in the VueUse repository with a suggestion to add a new feature. The guys antfu and patak-js turned out to be very nice people and real professionals. They supported my idea and entrusted me to write a pull request. We came up with a solution and they suggested to me how to implement it in the best way without breaking the style of the library.
After the code review and some edits, the pull request was accepted and now new functions are available to you. I will tell you how to use them.
useDebouncedRefHistory
The main change I made in the useRefHistory functions is that now you can pass the eventFilter property in the options object to change the behavior of the function. Filters are internal auxiliary structures of the library that you don't really need to learn. Unless you decide to write the code for VueUse yourself. Therefore, let's go straight to the practical.
useDebouncedRefHistory records the history of data changes with a specified delay. The delay is set in milliseconds and is passed to the options object. It can be wrapped in a ref object, then the delay will become reactive.
<script lang="ts">
import { defineComponent, ref } from "vue"
import { useDebouncedRefHistory } from "@vueuse/core"
export default defineComponent({
setup() {
const note = ref({
title: "",
todos: []
})
const { undo, redo, canUndo, canRedo, clear } = useDebouncedRefHistory(
note,
{ deep: true, clone: true, debounce: 1000 }
)
return {
note,
undo,
redo,
canUndo,
canRedo,
clear
}
}
})
</script>
useThrottledRefHistory
This function is similar to the previous one, only with a throttle effect. This means that the history will be saved at the moment of data change, and the next time after the delay time passed. If the user doesn't stop making changes, they will be recorded every 1000 milliseconds. For example:
<!-- setup in script - some syntactic sugar that will make your life easier-->
<script setup>
import { ref } from "vue"
import { useThrottledRefHistory } from "@vueuse/core"
const delay = ref(1000)
const count = ref(0)
const { history, undo, redo, canUndo, canRedo } = useThrottledRefHistory(
count,
{ throttle: delay }
)
</script>
Conclusion
As you can see, the changes are not so big in the codebase and logic, but they significantly improve the user experience. Use it wisely.
I am very glad to contribute code that will be used all around the world. I find it very important to contribute code to open source because we all use someone else's work. In addition, I confirm that it is a good feeling to know that your code will be used by thousands of developers.
This content originally appeared on DEV Community and was authored by Roman Harmyder
Roman Harmyder | Sciencx (2021-09-15T15:58:42+00:00) New functions extending the functionality of useRefHistory in VueUse library. Retrieved from https://www.scien.cx/2021/09/15/new-functions-extending-the-functionality-of-userefhistory-in-vueuse-library/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.