Skip to content

Commit 2aa3ca0

Browse files
chore: update links (#2)
1 parent 4e20bdc commit 2aa3ca0

File tree

4 files changed

+11
-11
lines changed

4 files changed

+11
-11
lines changed

vite/ecosystem.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -344,7 +344,7 @@ npm="vitepress"
344344
stackblitz=""
345345
>
346346
347-
[VitePress](https://vitepress.vuejs.org/) is a fresh take on [VuePress](https://v2.vuepress.vuejs.org/), taking the opportunity to see rethink what a Vue-powered static site generator can look like using Vue 3 and Vite. Evan You developed VitePress in tandem with Vite, a great use case to test and inform Vite design. VitePress has seen a lot of adoption for documentation: [Vite](https://vitejs.dev), [Vue Blog](https://blog.vuejs.org), [VueUse](https://vueuse.js.org), [Pinia](https://pinia.esm.dev), [vite-ruby](https://vite-ruby.netlify.app), [vite-plugin-pwa](https://vite-plugin-pwa.netlify.app), [Slidev](https://sli.dev), [windi](https://windicss.org), [laravel-vite](https://laravel-vite.innocenzi.dev) are just some examples. VuePress also implemented support for Vite with [@vuepress/bundler-vite](https://v2.vuepress.vuejs.org/reference/bundler/vite.html#vite).
347+
[VitePress](https://vitepress.dev/) is a fresh take on [VuePress](https://v2.vuepress.vuejs.org/), taking the opportunity to see rethink what a Vue-powered static site generator can look like using Vue 3 and Vite. Evan You developed VitePress in tandem with Vite, a great use case to test and inform Vite design. VitePress has seen a lot of adoption for documentation: [Vite](https://vite.dev), [Vue Blog](https://blog.vuejs.org), [VueUse](https://vueuse.org/), [Pinia](https://pinia.esm.dev), [vite-ruby](https://vite-ruby.netlify.app), [vite-plugin-pwa](https://vite-pwa-org.netlify.app/), [Slidev](https://sli.dev), [windi](https://windicss.org), [laravel-vite](https://laravel-vite.innocenzi.dev) are just some examples. VuePress also implemented support for Vite with [@vuepress/bundler-vite](https://v2.vuepress.vuejs.org/reference/bundler/vite.html#vite).
348348

349349
</Project>
350350

vue/history-and-persistence.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ Let's implement state persistence with history support in [Vue 3](https://v3.vue
3636

3737
One possible option to control what is committed to our app history is doing the commits manually. At the end of every operation, we need to add a `commit()` call that will trigger a new snapshot. Another option is to watch for state changes and automatically push a commit. For this second strategy, we need a way to ignore changes that are done while doing an operation across user events like dragging. This is the scheme we will explore in this article.
3838

39-
We can implement automatic tracking of a ref history using [VueUse's `useRefHistory`](https://vueuse.js.org/?path=/story/utilities--userefhistory). By default, `useRefHistory` uses `flush: 'pre'` so it will aggregate all the modifications that are done in the same "tick" and create for them a single snapshot. We reviewed why this is important in a previous post about [Ignorable Watch](./ignorable-watch.md). The default auto-commit behavior can be paused to enter previewing mode and resumed after the operation is finished. If the operation is canceled we can reset the state back to the last snapshot before this operation was started. If the operation was completed successfully, we commit the state to create a new snapshot.
39+
We can implement automatic tracking of a ref history using [VueUse's `useRefHistory`](https://vueuse.org/core/useRefHistory/). By default, `useRefHistory` uses `flush: 'pre'` so it will aggregate all the modifications that are done in the same "tick" and create for them a single snapshot. We reviewed why this is important in a previous post about [Ignorable Watch](./ignorable-watch.md). The default auto-commit behavior can be paused to enter previewing mode and resumed after the operation is finished. If the operation is canceled we can reset the state back to the last snapshot before this operation was started. If the operation was completed successfully, we commit the state to create a new snapshot.
4040

4141
```js{23,31,32,37,38}
4242
const state = ref({ ... })
@@ -94,7 +94,7 @@ You can check [Layoutit Grid](https://github.com/Leniolabs/layoutit-grid) for a
9494

9595
## Commit
9696

97-
To implement persistence, we can reach for [VueUse's `useLocalStorage`](https://vueuse.js.org/?path=/story/state--uselocalstorage). We can create a new composable that combines `useRefHistory` and `useLocalStorage`, implementing both features for our app state.
97+
To implement persistence, we can reach for [VueUse's `useLocalStorage`](https://vueuse.org/core/useLocalStorage/). We can create a new composable that combines `useRefHistory` and `useLocalStorage`, implementing both features for our app state.
9898

9999
```js{28-30,35-37}
100100
import { ref, watch, onMounted } from "vue";

vue/ignorable-watch.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ head:
2828

2929
# Ignorable watch
3030

31-
[VueUse's `useRefHistory`](https://vueuse.js.org/?path=/story/utilities--userefhistory) lets you watch a ref and keep track of its history, providing undo and redo functionality. It uses `flush 'pre'` by default to watching the source ref. Its semantics are aligned with the standard `watch`, creating history points that bundle all the changes done to the source value during the same "tick". The use of `flush 'sync'` is discouraged in the [Vue docs](https://v3.vuejs.org/guide/reactivity-computed-watchers.html#effect-flush-timing). Being able to buffers invalidated effects is important for performance, but also to avoid breaking invariants when generating spurious history points in updates that require several operations. One big caveat for example is that when deeply sync watching an array, a single splice call generates up to three triggers.
31+
[VueUse's `useRefHistory`](https://vueuse.org/core/useRefHistory/) lets you watch a ref and keep track of its history, providing undo and redo functionality. It uses `flush 'pre'` by default to watching the source ref. Its semantics are aligned with the standard `watch`, creating history points that bundle all the changes done to the source value during the same "tick". The use of `flush 'sync'` is discouraged in the [Vue docs](https://v3.vuejs.org/guide/reactivity-computed-watchers.html#effect-flush-timing). Being able to buffers invalidated effects is important for performance, but also to avoid breaking invariants when generating spurious history points in updates that require several operations. One big caveat for example is that when deeply sync watching an array, a single splice call generates up to three triggers.
3232

3333
Let's look at a simplified `useUndo` composable that only allows undoing of ref changes to understand how we were able to do it and how `ignorableWatch` was distilled so we can use the same technique when building other composables. The main difficulty to implement ref history is how to update the source when undoing without triggering the internal watch and re-adding this state to the history. If we only need to support sync flushing, it can be implemented in a straight forward way using a guard.
3434

@@ -114,9 +114,9 @@ function ignorableWatch(source,cb,options) {
114114
```
115115
The syncCount is incremented in sync with every change to the source ref value using a watch with `flush 'sync'`. This lets us know how many times the ref has been modified in this "tick". When calling `ignoreUpdates`, all sync changes to the source in the updater function will be counted and added to the `ignoreCount`. When the second watch flushes at the end of the tick, we know if there were more changes done to the source than the ones that were ignored so we can filter out the triggered effect if all the changes in the "tick" were marked to be ignored.
116116

117-
[VueUse's `ignorableWatch`](https://vueuse.js.org/?path=/story/watch--ignorablewatch) follows this idea supporting all flush modes. It is [implemented](https://github.com/antfu/vueuse/blob/master/packages/shared/ignorableWatch/index.ts) using the double watch scheme for flush `'pre'` and `'post'`, a sync watch allows us to count changes and ignore the triggered effect if all operations were flagged to be ignored in the current "tick". For `'sync'`, a single watch with a guard is used to implement `ignoreUpdates` and `ignorePrevAsyncUpdates` is a no-op provided so users can write generic code that does not depend on the `flush` mode.
117+
[VueUse's `ignorableWatch`](https://vueuse.org/shared/watchignorable/) follows this idea supporting all flush modes. It is [implemented](https://github.com/vueuse/vueuse/blob/main/packages/shared/watchIgnorable/index.ts) using the double watch scheme for flush `'pre'` and `'post'`, a sync watch allows us to count changes and ignore the triggered effect if all operations were flagged to be ignored in the current "tick". For `'sync'`, a single watch with a guard is used to implement `ignoreUpdates` and `ignorePrevAsyncUpdates` is a no-op provided so users can write generic code that does not depend on the `flush` mode.
118118

119-
There is a related utility in VueUse called [pausableWatch](https://vueuse.js.org/?path=/story/watch--pausablewatch) that exposes two methods `pause()` and `resume()` allowing to ignore the watch while it is paused. `ignorableWatch` is different from it because in `pausableWatch` effects are ignored if the watch is paused at flush time.
119+
There is a related utility in VueUse called [pausableWatch](https://vueuse.org/shared/watchPausable/) that exposes two methods `pause()` and `resume()` allowing to ignore the watch while it is paused. `ignorableWatch` is different from it because in `pausableWatch` effects are ignored if the watch is paused at flush time.
120120

121121
```js{2,5,8-10,12-13}
122122
const source = ref(0)
@@ -180,7 +180,7 @@ function useUndo(source, options) {
180180
}
181181
```
182182

183-
You can check the [implementation of `useRefHistory`](https://github.com/antfu/vueuse/blob/master/packages/core/useRefHistory/index.ts) to see how `ignorableWatch` is used in the lib. In it, other useful features to deal with ref history are provided.
183+
You can check the [implementation of `useRefHistory`](https://github.com/vueuse/vueuse/blob/main/packages/core/useRefHistory/index.ts) to see how `ignorableWatch` is used in the lib. In it, other useful features to deal with ref history are provided.
184184

185185
I learned about the importance of `flush 'pre'` while developing undo support for [Layoutit Grid](https://github.com/Leniolabs/layoutit-grid). I was later able to upstream some of this experience to [VueUse](https://github.com/antfu/vueuse), and `ignorableWatch` was spawned organically as part of this process. This is a good example of how working in Apps using [Vue Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html) facilitates the discovery and sharing of reusable pieces.
186186

vue/mark-raw-optimization.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,9 @@ The reactivity system provides tools to opt out of reactivity in these cases. [W
4646

4747
## Manual History
4848

49-
For context, you can read the previous two posts in this series. In [Ignorable Watch](./ignorable-watch.md) and [History and Persistence](./history-and-persistence] we dived into how [VueUse's `useRefHistory`](https://vueuse.js.org/?path=/story/utilities--userefhistory) is implemented and how it can be combined with other composables.
49+
For context, you can read the previous two posts in this series. In [Ignorable Watch](./ignorable-watch.md) and [History and Persistence](./history-and-persistence] we dived into how [VueUse's `useRefHistory`](https://vueuse.org/core/useRefHistory/) is implemented and how it can be combined with other composables.
5050

51-
A new reusable piece, [useManualRefHistory](https://vueuse.js.org/?path=/story/utilities--usemanualrefhistory) has also been spawned. `useManualRefHistory` offers the same API as the auto-tracking `useRefHistory`, but only generates snapshots when `commit()` is called. It lets users add undo support to their apps that integrates with their operation abstractions.
51+
A new reusable piece, [useManualRefHistory](https://vueuse.org/core/useManualRefHistory/) has also been spawned. `useManualRefHistory` offers the same API as the auto-tracking `useRefHistory`, but only generates snapshots when `commit()` is called. It lets users add undo support to their apps that integrates with their operation abstractions.
5252

5353
```js{8,13}
5454
import { ref } from 'vue'
@@ -66,9 +66,9 @@ state.value.bar.push({ id: 3 })
6666
commit()
6767
```
6868

69-
`useManualRefHistory` can be used together with `useLocalStorage` in the same way that is described in [History and Persistence](./history-and-persistence]. `useRefHistory` is now [coded](https://github.com/antfu/vueuse/blob/master/packages/core/useRefHistory/index.ts) in terms of `useManualRefHistory`, together with VueUse's `ignorableWath` and `pausableFilter` utilities. The logic only deals with auto-tracking at this point.
69+
`useManualRefHistory` can be used together with `useLocalStorage` in the same way that is described in [History and Persistence](./history-and-persistence]. `useRefHistory` is now [coded](https://github.com/vueuse/vueuse/blob/main/packages/core/useRefHistory/index.ts) in terms of `useManualRefHistory`, together with VueUse's `ignorableWatch` and `pausableFilter` utilities. The logic only deals with auto-tracking at this point.
7070

71-
This is a new composable, instead of a `manual` option in `useRefHistory` so users do not have to pay for features they do not use. The manual version is [half the size](https://vueuse.js.org/?path=/story/docs--export-size) of the auto-tracked composable.
71+
This is a new composable, instead of a `manual` option in `useRefHistory` so users do not have to pay for features they do not use. The manual version is [half the size](https://vueuse.org/core/useManualRefHistory/) of the auto-tracked composable.
7272

7373
## Raw History
7474

0 commit comments

Comments
 (0)