Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 6fc171b

Browse filesBrowse files
antfuantfu
committed
Merge branch 'main' into feat/esm
2 parents f09739c + f7ef074 commit 6fc171b
Copy full SHA for 6fc171b

File tree

Expand file treeCollapse file tree

616 files changed

+5382
-4157
lines changed
Filter options

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.
Dismiss banner
Expand file treeCollapse file tree

616 files changed

+5382
-4157
lines changed

‎.github/workflows/ci.yml

Copy file name to clipboardExpand all lines: .github/workflows/ci.yml
+2-2Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ jobs:
4343

4444
strategy:
4545
matrix:
46-
node: [18.x, 20.x, 22.x]
46+
node: [20.x, 22.x]
4747
fail-fast: false
4848

4949
steps:
@@ -79,6 +79,6 @@ jobs:
7979
- name: browser tests
8080
run: pnpm run test:browser
8181

82-
- if: matrix.node == '18.x'
82+
- if: matrix.node == '22.x'
8383
name: Playground Smoke Test
8484
run: cd playgrounds && bash ./build.sh

‎.vscode/settings.json

Copy file name to clipboardExpand all lines: .vscode/settings.json
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
"typescript.tsdk": "node_modules/typescript/lib",
2626

2727
// Enable the flat config support
28-
"eslint.experimental.useFlatConfig": true,
28+
"eslint.useFlatConfig": true,
2929

3030
// Disable the default formatter
3131
"prettier.enable": false,

‎README.md

Copy file name to clipboardExpand all lines: README.md
+12-19Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -39,26 +39,19 @@ Collection of essential Vue Composition Utilities
3939
```ts
4040
import { useLocalStorage, useMouse, usePreferredDark } from '@vueuse/core'
4141

42-
export default {
43-
setup() {
44-
// tracks mouse position
45-
const { x, y } = useMouse()
46-
47-
// if user prefers dark theme
48-
const isDark = usePreferredDark()
49-
50-
// persist state in localStorage
51-
const store = useLocalStorage(
52-
'my-storage',
53-
{
54-
name: 'Apple',
55-
color: 'red',
56-
},
57-
)
58-
59-
return { x, y, isDark, store }
42+
const { x, y } = useMouse()
43+
44+
// if user prefers dark theme
45+
const isDark = usePreferredDark()
46+
47+
// persist state in localStorage
48+
const store = useLocalStorage(
49+
'my-storage',
50+
{
51+
name: 'Apple',
52+
color: 'red',
6053
},
61-
}
54+
)
6255
```
6356

6457
Refer to [functions list](https://vueuse.org/functions) or [documentations](https://vueuse.org/) for more details.

‎eslint.config.js

Copy file name to clipboardExpand all lines: eslint.config.js
+31Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { resolve } from 'node:path'
22
import { fileURLToPath } from 'node:url'
33
import antfu from '@antfu/eslint-config'
4+
import { createSimplePlugin } from 'eslint-factory'
5+
import { createAutoInsert } from 'eslint-plugin-unimport'
46

57
const dir = fileURLToPath(new URL('.', import.meta.url))
68
const restricted = [
@@ -122,4 +124,33 @@ export default antfu(
122124
'no-restricted-imports': 'off',
123125
},
124126
},
127+
createAutoInsert({
128+
imports: [
129+
{
130+
from: 'vue',
131+
name: 'shallowRef',
132+
},
133+
{
134+
from: 'vue',
135+
name: 'ref',
136+
as: 'deepRef',
137+
},
138+
],
139+
}),
140+
createSimplePlugin({
141+
name: 'no-ref',
142+
exclude: ['**/*.md', '**/*.md/**'],
143+
create(context) {
144+
return {
145+
CallExpression(node) {
146+
if (node.callee.type === 'Identifier' && node.callee.name === 'ref') {
147+
context.report({
148+
node,
149+
message: 'Usage of ref() is restricted. Use shallowRef() or deepRef() instead.',
150+
})
151+
}
152+
},
153+
}
154+
},
155+
}),
125156
)

‎package.json

Copy file name to clipboardExpand all lines: package.json
+6-2Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"name": "@vueuse/monorepo",
33
"type": "module",
4-
"version": "12.6.0",
4+
"version": "12.8.0",
55
"private": true,
6-
"packageManager": "pnpm@10.4.0",
6+
"packageManager": "pnpm@10.5.2",
77
"description": "Collection of essential Vue Composition Utilities",
88
"author": "Anthony Fu<https://github.com/antfu>",
99
"license": "MIT",
@@ -67,7 +67,9 @@
6767
"consola": "catalog:",
6868
"esbuild-register": "catalog:",
6969
"eslint": "catalog:",
70+
"eslint-factory": "catalog:",
7071
"eslint-plugin-format": "catalog:",
72+
"eslint-plugin-unimport": "catalog:",
7173
"export-size": "catalog:",
7274
"fake-indexeddb": "catalog:",
7375
"firebase": "catalog:",
@@ -98,6 +100,7 @@
98100
"simple-git": "catalog:",
99101
"simple-git-hooks": "catalog:",
100102
"taze": "catalog:",
103+
"tinyexec": "catalog:",
101104
"tinyglobby": "catalog:",
102105
"tsx": "catalog:",
103106
"typescript": "catalog:",
@@ -109,6 +112,7 @@
109112
"vitepress": "catalog:",
110113
"vitest": "catalog:",
111114
"vitest-browser-vue": "catalog:",
115+
"vitest-package-exports": "catalog:",
112116
"vue": "catalog:",
113117
"vue-tsc": "catalog:"
114118
},

‎packages/.test/mount.ts

Copy file name to clipboardExpand all lines: packages/.test/mount.ts
+2-2Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { InjectionKey, Ref } from 'vue'
2-
import { createApp, defineComponent, h, provide, ref } from 'vue'
2+
import { createApp, defineComponent, h, provide, shallowRef } from 'vue'
33

44
type InstanceType<V> = V extends { new (...arg: any[]): infer X } ? X : never
55
type VM<V> = InstanceType<V> & { unmount: () => void }
@@ -38,7 +38,7 @@ export function useInjectedSetup<V>(setup: () => V) {
3838
const Provider = defineComponent({
3939
components: Comp,
4040
setup() {
41-
provide(Key, ref(1))
41+
provide(Key, shallowRef(1))
4242
},
4343
render() {
4444
return h('div', [])

‎packages/.vitepress/theme/components/DemoContainer.vue

Copy file name to clipboardExpand all lines: packages/.vitepress/theme/components/DemoContainer.vue
+2-2Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
2-
import { onErrorCaptured, ref } from 'vue'
2+
import { ref as deepRef, onErrorCaptured } from 'vue'
33
4-
const error = ref<Error | null>(null)
4+
const error = deepRef<Error | null>(null)
55
66
onErrorCaptured((err) => {
77
error.value = err

‎packages/components/package.json

Copy file name to clipboardExpand all lines: packages/components/package.json
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@vueuse/components",
33
"type": "module",
4-
"version": "12.6.0",
4+
"version": "12.8.0",
55
"description": "Renderless components for VueUse",
66
"author": "Jacob Clevenger<https://github.com/wheatjs>",
77
"license": "MIT",

‎packages/core/_configurable.ts

Copy file name to clipboardExpand all lines: packages/core/_configurable.ts
+9Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,3 +39,12 @@ export const defaultWindow = /* #__PURE__ */ isClient ? window : undefined
3939
export const defaultDocument = /* #__PURE__ */ isClient ? window.document : undefined
4040
export const defaultNavigator = /* #__PURE__ */ isClient ? window.navigator : undefined
4141
export const defaultLocation = /* #__PURE__ */ isClient ? window.location : undefined
42+
43+
export interface ConfigurableDeepRefs<D extends boolean> {
44+
/**
45+
* Return deep refs instead of shallow refs.
46+
*
47+
* @default true - will be changed to `false` by default in the next major
48+
*/
49+
deepRefs?: D
50+
}

‎packages/core/_template/index.test.ts

Copy file name to clipboardExpand all lines: packages/core/_template/index.test.ts
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { describe, expect, it } from 'vitest'
2-
import { useCounter } from '.'
2+
import { useCounter } from './index'
33

44
describe('useCounter', () => {
55
it('should be defined', () => {

‎packages/core/_template/index.ts

Copy file name to clipboardExpand all lines: packages/core/_template/index.ts
+2-2Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { ref } from 'vue'
1+
import { shallowRef } from 'vue'
22

33
export function useCounter(initialValue = 0) {
4-
const count = ref(initialValue)
4+
const count = shallowRef(initialValue)
55

66
const inc = (delta = 1) => (count.value += delta)
77
const dec = (delta = 1) => (count.value -= delta)

‎packages/core/computedAsync/index.md

Copy file name to clipboardExpand all lines: packages/core/computedAsync/index.md
+7-7Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ Computed for async functions
1111

1212
```js
1313
import { computedAsync } from '@vueuse/core'
14-
import { ref } from 'vue'
14+
import { shallowRef } from 'vue'
1515

16-
const name = ref('jack')
16+
const name = shallowRef('jack')
1717

1818
const userInfo = computedAsync(
1919
async () => {
@@ -29,9 +29,9 @@ You will need to pass a ref to track if the async function is evaluating.
2929

3030
```js
3131
import { computedAsync } from '@vueuse/core'
32-
import { ref } from 'vue'
32+
import { shallowRef } from 'vue'
3333

34-
const evaluating = ref(false)
34+
const evaluating = shallowRef(false)
3535

3636
const userInfo = computedAsync(
3737
async () => { /* your logic */ },
@@ -45,7 +45,7 @@ const userInfo = computedAsync(
4545
When the computed source changed before the previous async function gets resolved, you may want to cancel the previous one. Here is an example showing how to incorporate with the fetch API.
4646

4747
```js
48-
const packageName = ref('@vueuse/core')
48+
const packageName = shallowRef('@vueuse/core')
4949

5050
const downloads = computedAsync(async (onCancel) => {
5151
const abortController = new AbortController()
@@ -67,9 +67,9 @@ By default, `computedAsync` will start resolving immediately on creation, specif
6767

6868
```js
6969
import { computedAsync } from '@vueuse/core'
70-
import { ref } from 'vue'
70+
import { shallowRef } from 'vue'
7171

72-
const evaluating = ref(false)
72+
const evaluating = shallowRef(false)
7373

7474
const userInfo = computedAsync(
7575
async () => { /* your logic */ },

‎packages/core/computedAsync/index.test.ts

Copy file name to clipboardExpand all lines: packages/core/computedAsync/index.test.ts
+11-11Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { Ref } from 'vue'
22
import { describe, expect, expectTypeOf, it, vi } from 'vitest'
3-
import { computed, nextTick, ref } from 'vue'
4-
import { asyncComputed, computedAsync } from '.'
3+
import { computed, nextTick, shallowRef } from 'vue'
4+
import { asyncComputed, computedAsync } from './index'
55

66
describe('computed', () => {
77
it('is lazy', () => {
@@ -46,7 +46,7 @@ describe('computedAsync', () => {
4646
})
4747

4848
it('call onError when error is thrown', async () => {
49-
const errorMessage = ref()
49+
const errorMessage = shallowRef()
5050
const func = vi.fn(async () => {
5151
throw new Error('An Error Message')
5252
})
@@ -84,7 +84,7 @@ describe('computedAsync', () => {
8484
})
8585

8686
it('re-computes when dependency changes', async () => {
87-
const counter = ref(1)
87+
const counter = shallowRef(1)
8888
const double = computedAsync(() => {
8989
const result = counter.value * 2
9090
return Promise.resolve(result)
@@ -106,10 +106,10 @@ describe('computedAsync', () => {
106106
})
107107

108108
it('uses last result', async () => {
109-
const evaluating = ref(false)
109+
const evaluating = shallowRef(false)
110110
const resolutions: Array<() => void> = []
111111

112-
const counter = ref(1)
112+
const counter = shallowRef(1)
113113
const double = computedAsync(() => {
114114
const result = counter.value * 2
115115
return new Promise(resolve => (resolutions.push(() => resolve(result))))
@@ -162,7 +162,7 @@ describe('computedAsync', () => {
162162

163163
it('evaluating works', async () => {
164164
vi.useFakeTimers()
165-
const evaluating = ref(false)
165+
const evaluating = shallowRef(false)
166166

167167
const data = computedAsync(
168168
() => new Promise(resolve => setTimeout(() => resolve('data'), 0)),
@@ -181,7 +181,7 @@ describe('computedAsync', () => {
181181
})
182182

183183
it('triggers', async () => {
184-
const counter = ref(1)
184+
const counter = shallowRef(1)
185185
const double = computedAsync(() => {
186186
const result = counter.value * 2
187187
return Promise.resolve(result)
@@ -211,9 +211,9 @@ describe('computedAsync', () => {
211211
it('cancel is called', async () => {
212212
vi.useFakeTimers()
213213
const onCancel = vi.fn()
214-
const evaluating = ref(false)
214+
const evaluating = shallowRef(false)
215215

216-
const data = ref('initial')
216+
const data = shallowRef('initial')
217217
const uppercase = computedAsync((cancel) => {
218218
cancel(onCancel)
219219

@@ -246,7 +246,7 @@ describe('computedAsync', () => {
246246
it('cancel is called for lazy', async () => {
247247
const onCancel = vi.fn()
248248

249-
const data = ref('initial')
249+
const data = shallowRef('initial')
250250
const uppercase = computedAsync((cancel) => {
251251
cancel(() => onCancel())
252252

‎packages/core/computedAsync/index.ts

Copy file name to clipboardExpand all lines: packages/core/computedAsync/index.ts
+3-3Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { Fn } from '@vueuse/shared'
22
import type { Ref } from 'vue'
33
import { noop } from '@vueuse/shared'
4-
import { computed, isRef, ref, shallowRef, watchEffect } from 'vue'
4+
import { computed, ref as deepRef, isRef, shallowRef, watchEffect } from 'vue'
55

66
/**
77
* Handle overlapping async evaluations.
@@ -77,8 +77,8 @@ export function computedAsync<T>(
7777
onError = noop,
7878
} = options
7979

80-
const started = ref(!lazy)
81-
const current = (shallow ? shallowRef(initialState) : ref(initialState)) as Ref<T>
80+
const started = shallowRef(!lazy)
81+
const current = (shallow ? shallowRef(initialState) : deepRef(initialState)) as Ref<T>
8282
let counter = 0
8383

8484
watchEffect(async (onInvalidate) => {

‎packages/core/computedInject/demo.vue

Copy file name to clipboardExpand all lines: packages/core/computedInject/demo.vue
+2-2Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script setup lang="ts">
2-
import { provide, ref } from 'vue'
2+
import { ref as deepRef, provide } from 'vue'
33
import Receiver, { ArrayKey } from './demoReceiver.vue'
44
5-
const array = ref([{ key: 1, value: '1' }, { key: 2, value: '2' }, { key: 3, value: '3' }])
5+
const array = deepRef([{ key: 1, value: '1' }, { key: 2, value: '2' }, { key: 3, value: '3' }])
66
77
provide(ArrayKey, array)
88
</script>

‎packages/core/computedInject/demoReceiver.vue

Copy file name to clipboardExpand all lines: packages/core/computedInject/demoReceiver.vue
+3-3Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script lang="ts">
22
import type { InjectionKey, Ref } from 'vue'
3-
import { defineComponent, ref } from 'vue'
4-
import { computedInject } from '.'
3+
import { ref as deepRef, defineComponent } from 'vue'
4+
import { computedInject } from './index'
55
66
type OptionsRef = Ref<{ key: number, value: string }[]>
77
@@ -12,7 +12,7 @@ export default defineComponent({
1212
setup() {
1313
const computedArr = computedInject(ArrayKey, (source) => {
1414
if (!source)
15-
return ref([]) as OptionsRef
15+
return deepRef([]) as OptionsRef
1616
const arr = [...source.value]
1717
arr.unshift({ key: 0, value: 'all' })
1818
return arr

‎packages/core/computedInject/index.md

Copy file name to clipboardExpand all lines: packages/core/computedInject/index.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ In Provider Component
1212

1313
```ts
1414
import type { InjectionKey, Ref } from 'vue'
15-
import { provide, ref } from 'vue'
15+
import { provide } from 'vue'
1616

1717
interface Item {
1818
key: number

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.