From fb6201f16512c826a37354cbb03d1ccc2458947e Mon Sep 17 00:00:00 2001 From: vaakian X <30516060+vaakian@users.noreply.github.com> Date: Sat, 10 Sep 2022 16:33:43 +0800 Subject: [PATCH 01/89] docs: fix function name matching (#2187) --- packages/.vitepress/plugins/markdownTransform.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/.vitepress/plugins/markdownTransform.ts b/packages/.vitepress/plugins/markdownTransform.ts index b83b828c235..a445b48a02c 100644 --- a/packages/.vitepress/plugins/markdownTransform.ts +++ b/packages/.vitepress/plugins/markdownTransform.ts @@ -32,7 +32,9 @@ export function MarkdownTransform(): Plugin { // convert links to relative code = code.replace(/https?:\/\/vueuse\.org\//g, '/') - const [pkg, name, i] = id.split('/').slice(-3) + const [pkg, _name, i] = id.split('/').slice(-3) + + const name = functionNames.find(n => n.toLowerCase() === _name.toLowerCase()) || _name if (functionNames.includes(name) && i === 'index.md') { const frontmatterEnds = code.indexOf('---\n\n') + 4 From 6008f965d1acb496c8f470e71ff9eac063959652 Mon Sep 17 00:00:00 2001 From: vaakian X <30516060+vaakian@users.noreply.github.com> Date: Sun, 11 Sep 2022 18:29:48 +0800 Subject: [PATCH 02/89] chore: fix typo (#2190) --- packages/core/useColorMode/index.ts | 2 +- packages/core/useDark/index.ts | 2 +- packages/core/useDevicesList/index.md | 2 +- packages/core/useDevicesList/index.ts | 2 +- packages/core/useNavigatorLanguage/index.ts | 2 +- packages/core/useSpeechRecognition/index.ts | 2 +- packages/core/useTimeAgo/index.ts | 2 +- packages/integrations/useAxios/index.ts | 4 ++-- packages/nuxt/index.ts | 2 +- packages/shared/extendRef/index.ts | 4 ++-- packages/shared/refWithControl/index.ts | 2 +- packages/shared/toRefs/index.md | 2 +- packages/shared/useArrayFind/index.test.ts | 2 +- packages/shared/utils/types.ts | 2 +- packages/shared/watchAtMost/index.ts | 2 +- packages/shared/watchDebounced/index.ts | 2 +- packages/shared/watchOnce/index.ts | 2 +- packages/shared/watchPausable/index.ts | 2 +- packages/shared/watchWithFilter/index.ts | 2 +- 19 files changed, 21 insertions(+), 21 deletions(-) diff --git a/packages/core/useColorMode/index.ts b/packages/core/useColorMode/index.ts index 81f137cfc46..b1d4e1a28c1 100644 --- a/packages/core/useColorMode/index.ts +++ b/packages/core/useColorMode/index.ts @@ -39,7 +39,7 @@ export interface UseColorModeOptions extend /** * A custom handler for handle the updates. - * When specified, the default behavior will be overridded. + * When specified, the default behavior will be overridden. * * @default undefined */ diff --git a/packages/core/useDark/index.ts b/packages/core/useDark/index.ts index 48973ea1e03..02c6cc787f3 100644 --- a/packages/core/useDark/index.ts +++ b/packages/core/useDark/index.ts @@ -21,7 +21,7 @@ export interface UseDarkOptions extends Omit(navigator?.language) - // Listen to when to user changes langauge: + // Listen to when to user changes language: useEventListener(window, 'languagechange', () => { if (navigator) language.value = navigator.language diff --git a/packages/core/useSpeechRecognition/index.ts b/packages/core/useSpeechRecognition/index.ts index a195d7f059a..9626f701706 100644 --- a/packages/core/useSpeechRecognition/index.ts +++ b/packages/core/useSpeechRecognition/index.ts @@ -24,7 +24,7 @@ export interface UseSpeechRecognitionOptions extends ConfigurableWindow { */ interimResults?: boolean /** - * Langauge for SpeechRecognition + * Language for SpeechRecognition * * @default 'en-US' */ diff --git a/packages/core/useTimeAgo/index.ts b/packages/core/useTimeAgo/index.ts index a240899a776..aab7ba0cfe8 100644 --- a/packages/core/useTimeAgo/index.ts +++ b/packages/core/useTimeAgo/index.ts @@ -47,7 +47,7 @@ export interface UseTimeAgoOptions { fullDateFormatter?: (date: Date) => string /** - * Messages for formating the string + * Messages for formatting the string */ messages?: UseTimeAgoMessages } diff --git a/packages/integrations/useAxios/index.ts b/packages/integrations/useAxios/index.ts index 0115b8a63ce..057b47108f4 100644 --- a/packages/integrations/useAxios/index.ts +++ b/packages/integrations/useAxios/index.ts @@ -118,8 +118,8 @@ export function useAxios(...args: any[]): OverallUseAxiosReturn & Pr if (args.length > 0 + argsPlaceholder) { /** - * Unable to use `instanceof` here becuase of (https://github.com/axios/axios/issues/737) - * so instead we are checking if there is a `requset` on the object to see if it is an + * Unable to use `instanceof` here because of (https://github.com/axios/axios/issues/737) + * so instead we are checking if there is a `request` on the object to see if it is an * axios instance */ if (isAxiosInstance(args[0 + argsPlaceholder])) diff --git a/packages/nuxt/index.ts b/packages/nuxt/index.ts index de1e8dc6471..7c40a411652 100644 --- a/packages/nuxt/index.ts +++ b/packages/nuxt/index.ts @@ -48,7 +48,7 @@ export interface VueUseNuxtOptions { * * ```ts * // nuxt.config.js - * export deafult { + * export default { * buildModules: [ * '@vueuse/nuxt' * ] diff --git a/packages/shared/extendRef/index.ts b/packages/shared/extendRef/index.ts index 793dc116e64..ec4863da544 100644 --- a/packages/shared/extendRef/index.ts +++ b/packages/shared/extendRef/index.ts @@ -19,11 +19,11 @@ export interface ExtendRefOptions { } /** - * Overlad 1: Unwrap set to false + * Overload 1: Unwrap set to false */ export function extendRef, Extend extends object, Options extends ExtendRefOptions>(ref: R, extend: Extend, options?: Options): ShallowUnwrapRef & R /** - * Overlad 2: Unwrap unset or set to true + * Overload 2: Unwrap unset or set to true */ export function extendRef, Extend extends object, Options extends ExtendRefOptions>(ref: R, extend: Extend, options?: Options): Extend & R diff --git a/packages/shared/refWithControl/index.ts b/packages/shared/refWithControl/index.ts index c3fde4f5a60..939b2221438 100644 --- a/packages/shared/refWithControl/index.ts +++ b/packages/shared/refWithControl/index.ts @@ -13,7 +13,7 @@ export interface ControlledRefOptions { /** * Callback function after the ref changed * - * This happends synchronously, with less overhead compare to `watch` + * This happens synchronously, with less overhead compare to `watch` */ onChanged?: (value: T, oldValue: T) => void } diff --git a/packages/shared/toRefs/index.md b/packages/shared/toRefs/index.md index 0643ec2a158..dbcace8cbc0 100644 --- a/packages/shared/toRefs/index.md +++ b/packages/shared/toRefs/index.md @@ -30,7 +30,7 @@ const [ a, b ] = toRefs(arr) ## Use-cases -### Destructing a props object +### Destructuring a props object ```html ``` +### Horizontal list + +```typescript +import { useVirtualList } from '@vueuse/core' + +const allItems = Array.from(Array(99999).keys()) + +const { list, containerProps, wrapperProps } = useVirtualList( + allItems, + { + itemWidth: 200, + }, +) +``` + +```html + +``` + ## Component Usage ```html diff --git a/packages/core/useVirtualList/index.ts b/packages/core/useVirtualList/index.ts index 095e850f3b7..963bbc6b6ee 100644 --- a/packages/core/useVirtualList/index.ts +++ b/packages/core/useVirtualList/index.ts @@ -1,15 +1,31 @@ -import type { ComputedRef, Ref } from 'vue-demi' -import { computed, ref, shallowRef, watch } from 'vue-demi' import type { MaybeRef } from '@vueuse/shared' +import type { ComputedRef, Ref, ShallowRef, StyleValue } from 'vue-demi' +import { computed, ref, shallowRef, watch } from 'vue-demi' import { useElementSize } from '../useElementSize' -export interface UseVirtualListOptions { +type UseVirtualListItemSize = number | ((index: number) => number) + +export interface UseHorizontalVirtualListOptions extends UseVirtualListOptionsBase { + + /** + * item width, accept a pixel value or a function that returns the height + * + * @default 0 + */ + itemWidth: UseVirtualListItemSize + +} + +export interface UseVerticalVirtualListOptions extends UseVirtualListOptionsBase { /** * item height, accept a pixel value or a function that returns the height * * @default 0 */ - itemHeight: number | ((index: number) => number) + itemHeight: UseVirtualListItemSize +} + +export interface UseVirtualListOptionsBase { /** * the extra buffer items outside of the view area * @@ -18,6 +34,8 @@ export interface UseVirtualListOptions { overscan?: number } +export type UseVirtualListOptions = UseHorizontalVirtualListOptions | UseVerticalVirtualListOptions + export interface UseVirtualListItem { data: T index: number @@ -26,39 +44,91 @@ export interface UseVirtualListItem { export interface UseVirtualListReturn { list: Ref[]> scrollTo: (index: number) => void + containerProps: { ref: Ref onScroll: () => void - style: Partial + style: StyleValue } wrapperProps: ComputedRef<{ style: { width: string height: string marginTop: string + } | { + width: string + height: string + marginLeft: string + display: string } }> } export function useVirtualList (list: MaybeRef, options: UseVirtualListOptions): UseVirtualListReturn { - const containerRef: Ref = ref() + const { containerStyle, wrapperProps, scrollTo, calculateRange, currentList, containerRef } = 'itemHeight' in options + ? useVerticalVirtualList(options, list) + : useHorizontalVirtualList(options, list) + + return { + list: currentList, + scrollTo, + containerProps: { + ref: containerRef, + onScroll: () => { + calculateRange() + }, + style: containerStyle, + }, + wrapperProps, + } +} + +type UseVirtualListContainerRef = Ref + +interface UseVirtualElementSizes { + width: Ref + height: Ref +} + +type UseVirtualListArray = UseVirtualListItem[] +type UseVirtualListRefArray = Ref> + +type UseVirtualListSource = Ref | ShallowRef + +interface UseVirtualListState { start: number; end: number } + +type RefState = Ref + +interface UseVirtualListResources { + state: RefState + source: UseVirtualListSource + currentList: UseVirtualListRefArray + size: UseVirtualElementSizes + containerRef: UseVirtualListContainerRef +} + +function useVirtualListResourses(list: MaybeRef): UseVirtualListResources { + const containerRef = ref(null) const size = useElementSize(containerRef) const currentList: Ref[]> = ref([]) const source = shallowRef(list) - const state: Ref = ref({ start: 0, end: 10 }) - const { itemHeight, overscan = 5 } = options + const state: Ref<{ start: number; end: number }> = ref({ start: 0, end: 10 }) + + return { state, source, currentList, size, containerRef } +} - const getViewCapacity = (containerHeight: number) => { - if (typeof itemHeight === 'number') - return Math.ceil(containerHeight / itemHeight) +function createGetViewCapacity(state: UseVirtualListResources['state'], source: UseVirtualListResources['source'], itemSize: UseVirtualListItemSize) { + return (containerHeight: number) => { + if (typeof itemSize === 'number') + return Math.ceil(containerHeight / itemSize) const { start = 0 } = state.value let sum = 0 let capacity = 0 for (let i = start; i < source.value.length; i++) { - const height = (itemHeight as (index: number) => number)(i) + const height = itemSize(i) sum += height if (sum >= containerHeight) { capacity = i @@ -67,29 +137,36 @@ export function useVirtualList (list: MaybeRef, options: UseVirtua } return capacity - start } +} - const getOffset = (scrollTop: number) => { - if (typeof itemHeight === 'number') - return Math.floor(scrollTop / itemHeight) + 1 +function createGetOffset(source: UseVirtualListResources['source'], itemSize: UseVirtualListItemSize) { + return (scrollDirection: number) => { + if (typeof itemSize === 'number') + return Math.floor(scrollDirection / itemSize) + 1 let sum = 0 let offset = 0 + for (let i = 0; i < source.value.length; i++) { - const height = (itemHeight as (index: number) => number)(i) - sum += height - if (sum >= scrollTop) { + const size = itemSize(i) + sum += size + if (sum >= scrollDirection) { offset = i break } } return offset + 1 } +} - const calculateRange = () => { +function createCalculateRange(type: 'horizontal' | 'vertical', overscan: number, getOffset: ReturnType, + getViewCapacity: ReturnType, + { containerRef, state, currentList, source }: UseVirtualListResources) { + return () => { const element = containerRef.value if (element) { - const offset = getOffset(element.scrollTop) - const viewCapacity = getViewCapacity(element.clientHeight) + const offset = getOffset(type === 'vertical' ? element.scrollTop : element.scrollLeft) + const viewCapacity = getViewCapacity(type === 'vertical' ? element.clientHeight : element.clientWidth) const from = offset - overscan const to = offset + viewCapacity + overscan @@ -107,36 +184,121 @@ export function useVirtualList (list: MaybeRef, options: UseVirtua })) } } +} + +function createGetDistance(itemSize: UseVirtualListItemSize, source: UseVirtualListResources['source']) { + return (index: number) => { + if (typeof itemSize === 'number') { + const size = index * itemSize + return size + } + + const size = source.value + .slice(0, index) + .reduce((sum, _, i) => sum + itemSize(i), 0) + + return size + } +} +function useWatchForSizes(size: UseVirtualElementSizes, list: MaybeRef, calculateRange: () => void) { watch([size.width, size.height, list], () => { calculateRange() }) +} + +function createComputedTotalSize(itemSize: UseVirtualListItemSize, source: UseVirtualListResources['source']) { + return computed(() => { + if (typeof itemSize === 'number') + return source.value.length * itemSize - const totalHeight = computed(() => { - if (typeof itemHeight === 'number') - return source.value.length * itemHeight - return source.value.reduce((sum, _, index) => sum + itemHeight(index), 0) + return source.value.reduce((sum, _, index) => sum + itemSize(index), 0) }) +} - const getDistanceTop = (index: number) => { - if (typeof itemHeight === 'number') { - const height = index * itemHeight - return height - } - const height = source.value - .slice(0, index) - .reduce((sum, _, i) => sum + itemHeight(i), 0) - return height - } +const scrollToDictionaryForElementScrollKey = { + horizontal: 'scrollLeft', + vertical: 'scrollTop', +} as const - const scrollTo = (index: number) => { +function createScrollTo(type: 'horizontal' | 'vertical', calculateRange: () => void, getDistance: ReturnType, containerRef: UseVirtualListResources['containerRef']) { + return (index: number) => { if (containerRef.value) { - containerRef.value.scrollTop = getDistanceTop(index) + containerRef.value[scrollToDictionaryForElementScrollKey[type]] = getDistance(index) calculateRange() } } +} + +function useHorizontalVirtualList(options: UseHorizontalVirtualListOptions, list: MaybeRef) { + const resources = useVirtualListResourses(list) + const { state, source, currentList, size, containerRef } = resources + const containerStyle: StyleValue = { overflowX: 'auto' } + + const { itemWidth, overscan = 5 } = options + + const getViewCapacity = createGetViewCapacity(state, source, itemWidth) + + const getOffset = createGetOffset(source, itemWidth) + + const calculateRange = createCalculateRange('horizontal', overscan, getOffset, getViewCapacity, resources) + + const getDistanceLeft = createGetDistance(itemWidth, source) + + const offsetLeft = computed(() => getDistanceLeft(state.value.start)) + + const totalWidth = createComputedTotalSize(itemWidth, source) + + useWatchForSizes(size, list, calculateRange) + + const scrollTo = createScrollTo('horizontal', calculateRange, getDistanceLeft, containerRef) + + const wrapperProps = computed(() => { + return { + style: { + height: '100%', + width: `${totalWidth.value - offsetLeft.value}px`, + marginLeft: `${offsetLeft.value}px`, + display: 'flex', + }, + } + }) + + return { + scrollTo, + calculateRange, + wrapperProps, + containerStyle, + currentList, + containerRef, + } +} + +function useVerticalVirtualList(options: UseVerticalVirtualListOptions, list: MaybeRef) { + const resources = useVirtualListResourses(list) + + const { state, source, currentList, size, containerRef } = resources + + const containerStyle: StyleValue = { overflowY: 'auto' } + + const { itemHeight, overscan = 5 } = options + + const getViewCapacity = createGetViewCapacity(state, source, itemHeight) + + const getOffset = createGetOffset(source, itemHeight) + + const calculateRange = createCalculateRange('vertical', overscan, getOffset, getViewCapacity, resources) + + const getDistanceTop = createGetDistance(itemHeight, source) const offsetTop = computed(() => getDistanceTop(state.value.start)) + + const totalHeight = createComputedTotalSize(itemHeight, source) + + useWatchForSizes(size, list, calculateRange) + + const scrollTo = createScrollTo('vertical', calculateRange, getDistanceTop, containerRef) + const wrapperProps = computed(() => { return { style: { @@ -147,18 +309,12 @@ export function useVirtualList (list: MaybeRef, options: UseVirtua } }) - const containerStyle: Partial = { overflowY: 'auto' } - return { - list: currentList, + calculateRange, scrollTo, - containerProps: { - ref: containerRef, - onScroll: () => { - calculateRange() - }, - style: containerStyle, - }, + containerStyle, wrapperProps, + currentList, + containerRef, } } From fb39a6877a49e834592f22e063edb1b4ac148cd3 Mon Sep 17 00:00:00 2001 From: sun0day Date: Tue, 25 Oct 2022 17:19:57 +0800 Subject: [PATCH 77/89] fix(watchThrottled): wait incorrect remaining time (#2267) --- packages/shared/utils/filters.ts | 2 +- packages/shared/utils/index.test.ts | 17 +++++++++++++++++ packages/shared/watchDebounced/index.test.ts | 2 +- packages/shared/watchThrottled/index.test.ts | 6 +++--- 4 files changed, 22 insertions(+), 5 deletions(-) diff --git a/packages/shared/utils/filters.ts b/packages/shared/utils/filters.ts index 9ee57339a7d..4b065f47205 100644 --- a/packages/shared/utils/filters.ts +++ b/packages/shared/utils/filters.ts @@ -134,7 +134,7 @@ export function throttleFilter(ms: MaybeComputedRef, trailing = true, le isLeading = true clear() invoke() - }, duration) + }, duration - elapsed) } if (!leading && !timer) diff --git a/packages/shared/utils/index.test.ts b/packages/shared/utils/index.test.ts index 1303809d9ef..42e4cd138cb 100644 --- a/packages/shared/utils/index.test.ts +++ b/packages/shared/utils/index.test.ts @@ -120,6 +120,23 @@ describe('filters', () => { expect(debouncedFilterSpy).toHaveBeenCalledTimes(2) }) + it('should throttle evenly', () => { + const debouncedFilterSpy = vitest.fn() + + const filter = createFilterWrapper(throttleFilter(1000), debouncedFilterSpy) + + setTimeout(() => filter(1), 500) + setTimeout(() => filter(2), 1000) + setTimeout(() => filter(3), 2000) + + vitest.runAllTimers() + + expect(debouncedFilterSpy).toHaveBeenCalledTimes(3) + expect(debouncedFilterSpy).toHaveBeenCalledWith(1) + expect(debouncedFilterSpy).toHaveBeenCalledWith(2) + expect(debouncedFilterSpy).toHaveBeenCalledWith(3) + }) + it('should throttle with ref', () => { const debouncedFilterSpy = vitest.fn() const throttle = ref(0) diff --git a/packages/shared/watchDebounced/index.test.ts b/packages/shared/watchDebounced/index.test.ts index 5e4bdd5baa2..aa176c02324 100644 --- a/packages/shared/watchDebounced/index.test.ts +++ b/packages/shared/watchDebounced/index.test.ts @@ -39,7 +39,7 @@ describe('watchDebounced', () => { expect(cb).toHaveBeenCalledTimes(1) num.value = 5 - await promiseTimeout(70) + await promiseTimeout(75) expect(cb).toHaveBeenCalledTimes(2) expect(cb).toHaveBeenCalledWith(4, 2, expect.anything()) }) diff --git a/packages/shared/watchThrottled/index.test.ts b/packages/shared/watchThrottled/index.test.ts index 3626fa1bbcd..ab375dd76fb 100644 --- a/packages/shared/watchThrottled/index.test.ts +++ b/packages/shared/watchThrottled/index.test.ts @@ -23,12 +23,12 @@ describe('watchThrottled', () => { num.value = 3 await promiseTimeout(50) - expect(cb).toHaveBeenCalledTimes(1) - expect(cb).toHaveBeenCalledWith(1, 0, expect.anything()) + expect(cb).toHaveBeenCalledTimes(2) + expect(cb).toHaveBeenCalledWith(3, 2, expect.anything()) num.value = 4 await promiseTimeout(100) - expect(cb).toHaveBeenCalledTimes(2) + expect(cb).toHaveBeenCalledTimes(3) expect(cb).toHaveBeenCalledWith(4, 3, expect.anything()) }) }) From 24747b636c61d23fa9c14474ba1a5ce78956dae1 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Tue, 25 Oct 2022 20:08:14 +0800 Subject: [PATCH 78/89] chore: release v9.4.0 --- package.json | 2 +- packages/components/package.json | 2 +- packages/core/package.json | 2 +- packages/electron/package.json | 2 +- packages/firebase/package.json | 2 +- packages/integrations/package.json | 2 +- packages/math/package.json | 2 +- packages/metadata/package.json | 2 +- packages/nuxt/package.json | 2 +- packages/router/package.json | 2 +- packages/rxjs/package.json | 2 +- packages/shared/package.json | 2 +- 12 files changed, 12 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 811d95bd223..55d2f46aa5f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@vueuse/monorepo", - "version": "9.3.1", + "version": "9.4.0", "private": true, "packageManager": "pnpm@7.6.0", "description": "Collection of essential Vue Composition Utilities", diff --git a/packages/components/package.json b/packages/components/package.json index 020a6aab2b0..25f63574c74 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@vueuse/components", - "version": "9.3.1", + "version": "9.4.0", "description": "Renderless components for VueUse", "author": "Jacob Clevenger", "license": "MIT", diff --git a/packages/core/package.json b/packages/core/package.json index f5015c03245..7916772cc93 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@vueuse/core", - "version": "9.3.1", + "version": "9.4.0", "description": "Collection of essential Vue Composition Utilities", "author": "Anthony Fu ", "license": "MIT", diff --git a/packages/electron/package.json b/packages/electron/package.json index 801601e4515..9e21e607565 100644 --- a/packages/electron/package.json +++ b/packages/electron/package.json @@ -1,6 +1,6 @@ { "name": "@vueuse/electron", - "version": "9.3.1", + "version": "9.4.0", "description": "Electron renderer process modules for VueUse", "author": "Archer Gu", "license": "MIT", diff --git a/packages/firebase/package.json b/packages/firebase/package.json index 3824351a593..3a85625e8a8 100644 --- a/packages/firebase/package.json +++ b/packages/firebase/package.json @@ -1,6 +1,6 @@ { "name": "@vueuse/firebase", - "version": "9.3.1", + "version": "9.4.0", "description": "Enables realtime bindings for Firebase", "author": "Anthony Fu ", "license": "MIT", diff --git a/packages/integrations/package.json b/packages/integrations/package.json index a616c03e17a..203c688df30 100644 --- a/packages/integrations/package.json +++ b/packages/integrations/package.json @@ -1,6 +1,6 @@ { "name": "@vueuse/integrations", - "version": "9.3.1", + "version": "9.4.0", "description": "Integration wrappers for utility libraries", "author": "Anthony Fu ", "license": "MIT", diff --git a/packages/math/package.json b/packages/math/package.json index 98e0834c915..a0d87bf20eb 100644 --- a/packages/math/package.json +++ b/packages/math/package.json @@ -1,6 +1,6 @@ { "name": "@vueuse/math", - "version": "9.3.1", + "version": "9.4.0", "description": "Math functions for VueUse", "author": "Anthony Fu ", "license": "MIT", diff --git a/packages/metadata/package.json b/packages/metadata/package.json index be01a4901d9..7b41bad8089 100644 --- a/packages/metadata/package.json +++ b/packages/metadata/package.json @@ -1,6 +1,6 @@ { "name": "@vueuse/metadata", - "version": "9.3.1", + "version": "9.4.0", "description": "Metadata for VueUse functions", "author": "Anthony Fu ", "license": "MIT", diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json index 59cb1012e22..82c59f51005 100644 --- a/packages/nuxt/package.json +++ b/packages/nuxt/package.json @@ -1,6 +1,6 @@ { "name": "@vueuse/nuxt", - "version": "9.3.1", + "version": "9.4.0", "description": "VueUse Nuxt Module", "author": "Anthony Fu ", "license": "MIT", diff --git a/packages/router/package.json b/packages/router/package.json index 848fd562f80..8cb85c677be 100644 --- a/packages/router/package.json +++ b/packages/router/package.json @@ -1,6 +1,6 @@ { "name": "@vueuse/router", - "version": "9.3.1", + "version": "9.4.0", "description": "Utilities for vue-router", "author": "Anthony Fu ", "license": "MIT", diff --git a/packages/rxjs/package.json b/packages/rxjs/package.json index c63c2ca8ba4..4ea24710395 100644 --- a/packages/rxjs/package.json +++ b/packages/rxjs/package.json @@ -1,6 +1,6 @@ { "name": "@vueuse/rxjs", - "version": "9.3.1", + "version": "9.4.0", "description": "Enables RxJS reactive functions in Vue", "author": "Anthony Fu ", "license": "MIT", diff --git a/packages/shared/package.json b/packages/shared/package.json index 5c23d367da6..ea7cdbdfc0e 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -1,6 +1,6 @@ { "name": "@vueuse/shared", - "version": "9.3.1", + "version": "9.4.0", "author": "Anthony Fu ", "license": "MIT", "funding": "https://github.com/sponsors/antfu", From a849634fc78682fa95a1c145c69cabdde312ec68 Mon Sep 17 00:00:00 2001 From: KaKa Date: Thu, 27 Oct 2022 22:47:37 +0800 Subject: [PATCH 79/89] feat(useFetch): allow configure lifecycle handler behavior (#2333) * feat(useFetch): allow configurate lifecycle handler behavior * fix: types mismatch * style: linting * fix: node@14 syntax error * fix: typo * chore: typo --- packages/core/useFetch/index.md | 40 +++++++ packages/core/useFetch/index.test.ts | 155 ++++++++++++++++++++++++++- packages/core/useFetch/index.ts | 48 ++++++--- 3 files changed, 227 insertions(+), 16 deletions(-) diff --git a/packages/core/useFetch/index.md b/packages/core/useFetch/index.md index b227849ad06..714a8a662c0 100644 --- a/packages/core/useFetch/index.md +++ b/packages/core/useFetch/index.md @@ -166,6 +166,46 @@ const useMyFetch = createFetch({ const { isFetching, error, data } = useMyFetch('users') ``` +If you want to control the behavior of `beforeFetch`, `afterFetch`, `onFetchError` between the pre-configured instance and newly spawned instance. You can provide a `combination` option to toggle between `overwrite` or `chaining`. + +```ts +const useMyFetch = createFetch({ + baseUrl: 'https://my-api.com', + combination: 'overwrite', + options: { + // beforeFetch in pre-configured instance will only run when the newly spawned instance do not pass beforeFetch + async beforeFetch({ options }) { + const myToken = await getMyToken() + options.headers.Authorization = `Bearer ${myToken}` + + return { options } + }, + }, +}) + +// use useMyFetch beforeFetch +const { isFetching, error, data } = useMyFetch('users') + +// use custom beforeFetch +const { isFetching, error, data } = useMyFetch('users', { + async beforeFetch({ url, options, cancel }) { + const myToken = await getMyToken() + + if (!myToken) + cancel() + + options.headers = { + ...options.headers, + Authorization: `Bearer ${myToken}`, + } + + return { + options, + } + }, +}) +``` + ### Events The `onFetchResponse` and `onFetchError` will fire on fetch request responses and errors respectively. diff --git a/packages/core/useFetch/index.test.ts b/packages/core/useFetch/index.test.ts index 0ce62112940..920b8b6f5fb 100644 --- a/packages/core/useFetch/index.test.ts +++ b/packages/core/useFetch/index.test.ts @@ -1,8 +1,8 @@ -import { ref } from 'vue-demi' import { until } from '@vueuse/shared' +import { ref } from 'vue-demi' import { retry } from '../../.test' -import '../../.test/mockServer' import { createFetch, useFetch } from '.' +import '../../.test/mockServer' const jsonMessage = { hello: 'world' } const jsonUrl = `https://example.com?json=${encodeURI(JSON.stringify(jsonMessage))}` @@ -286,6 +286,157 @@ describe('useFetch', () => { }) }) + test('should overwrite beforeFetch function when using a factory instance', async () => { + const useMyFetch = createFetch({ + baseUrl: 'https://example.com', + combination: 'overwrite', + options: { + beforeFetch({ options }) { + options.headers = { ...options.headers, Global: 'foo' } + return { options } + }, + }, + }) + useMyFetch('test', { + beforeFetch({ options }) { + options.headers = { ...options.headers, Local: 'foo' } + return { options } + }, + }) + + await retry(() => { + expect(fetchSpyHeaders()).toMatchObject({ Local: 'foo' }) + }) + }) + + test('should overwrite afterFetch function when using a factory instance', async () => { + const useMyFetch = createFetch({ + baseUrl: 'https://example.com', + combination: 'overwrite', + options: { + afterFetch(ctx) { + ctx.data.global = 'Global' + return ctx + }, + }, + }) + const { data } = useMyFetch('test?json', { + afterFetch(ctx) { + ctx.data.local = 'Local' + return ctx + }, + }).json() + + await retry(() => { + expect(data.value).toEqual(expect.objectContaining({ local: 'Local' })) + expect(data.value).toEqual(expect.not.objectContaining({ global: 'Global' })) + }) + }) + + test('should overwrite onFetchError function when using a factory instance', async () => { + const useMyFetch = createFetch({ + baseUrl: 'https://example.com', + combination: 'overwrite', + options: { + onFetchError(ctx) { + ctx.data.global = 'Global' + return ctx + }, + }, + }) + const { data } = useMyFetch('test?status=400&json', { + onFetchError(ctx) { + ctx.data.local = 'Local' + return ctx + }, + }).json() + + await retry(() => { + expect(data.value).toEqual(expect.objectContaining({ local: 'Local' })) + expect(data.value).toEqual(expect.not.objectContaining({ global: 'Global' })) + }) + }) + + test('should overwrite beforeFetch function when using a factory instance and the options object in useMyFetch', async () => { + const useMyFetch = createFetch({ + baseUrl: 'https://example.com', + combination: 'overwrite', + options: { + beforeFetch({ options }) { + options.headers = { ...options.headers, Global: 'foo' } + return { options } + }, + }, + }) + useMyFetch( + 'test', + { method: 'GET' }, + { + beforeFetch({ options }) { + options.headers = { ...options.headers, Local: 'foo' } + return { options } + }, + }) + + await retry(() => { + expect(fetchSpyHeaders()).toMatchObject({ Local: 'foo' }) + }) + }) + + test('should overwrite afterFetch function when using a factory instance and the options object in useMyFetch', async () => { + const useMyFetch = createFetch({ + baseUrl: 'https://example.com', + combination: 'overwrite', + options: { + afterFetch(ctx) { + ctx.data.global = 'Global' + return ctx + }, + }, + }) + const { data } = useMyFetch( + 'test?json', + { method: 'GET' }, + { + afterFetch(ctx) { + ctx.data.local = 'Local' + return ctx + }, + }).json() + + await retry(() => { + expect(data.value).toEqual(expect.objectContaining({ local: 'Local' })) + expect(data.value).toEqual(expect.not.objectContaining({ global: 'Global' })) + }) + }) + + test('should overwrite onFetchError function when using a factory instance and the options object in useMyFetch', async () => { + const useMyFetch = createFetch({ + baseUrl: 'https://example.com', + combination: 'overwrite', + options: { + onFetchError(ctx) { + ctx.data.global = 'Global' + return ctx + }, + }, + }) + const { data } = useMyFetch( + 'test?status=400&json', + { method: 'GET' }, + { + onFetchError(ctx) { + ctx.data.local = 'Local' + return ctx + }, + }).json() + + await retry(() => { + expect(data.value).toEqual(expect.objectContaining({ local: 'Local' })) + expect(data.value).toEqual(expect.not.objectContaining({ global: 'Global' })) + }) + }) + test('should run the beforeFetch function and add headers to the request', async () => { useFetch('https://example.com', { headers: { 'Accept-Language': 'en-US' } }, { beforeFetch({ options }) { diff --git a/packages/core/useFetch/index.ts b/packages/core/useFetch/index.ts index 3d1f701630e..5cabeef2fbb 100644 --- a/packages/core/useFetch/index.ts +++ b/packages/core/useFetch/index.ts @@ -1,6 +1,6 @@ -import type { ComputedRef, Ref } from 'vue-demi' import type { EventHookOn, Fn, MaybeComputedRef, Stoppable } from '@vueuse/shared' import { containsProp, createEventHook, resolveRef, resolveUnref, until, useTimeoutFn } from '@vueuse/shared' +import type { ComputedRef, Ref } from 'vue-demi' import { computed, isRef, ref, shallowRef, watch } from 'vue-demi' import { defaultWindow } from '../_configurable' @@ -90,6 +90,7 @@ export interface UseFetchReturn { type DataType = 'text' | 'json' | 'blob' | 'arrayBuffer' | 'formData' type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS' +type Combination = 'overwrite' | 'chain' const payloadMapping: Record = { json: 'application/json', @@ -187,6 +188,12 @@ export interface CreateFetchOptions { */ baseUrl?: MaybeComputedRef + /** + * Determine the inherit behavior for beforeFetch, afterFetch, onFetchError + * @default 'chain' + */ + combination?: Combination + /** * Default Options for the useFetch function */ @@ -214,17 +221,30 @@ function headersToObject(headers: HeadersInit | undefined) { return headers } -function chainCallbacks(...callbacks: (((ctx: T) => void | Partial | Promise>) | undefined)[]) { - return async (ctx: T) => { - await callbacks.reduce((prevCallback, callback) => prevCallback.then(async () => { - if (callback) - ctx = { ...ctx, ...(await callback(ctx)) } - }), Promise.resolve()) - return ctx +function combineCallbacks(combination: Combination, ...callbacks: (((ctx: T) => void | Partial | Promise>) | undefined)[]) { + if (combination === 'overwrite') { + // use last callback + return async (ctx: T) => { + const callback = callbacks[callbacks.length - 1] + if (callback !== undefined) + await callback(ctx) + return ctx + } + } + else { + // chaining and combine result + return async (ctx: T) => { + await callbacks.reduce((prevCallback, callback) => prevCallback.then(async () => { + if (callback) + ctx = { ...ctx, ...(await callback(ctx)) } + }), Promise.resolve()) + return ctx + } } } export function createFetch(config: CreateFetchOptions = {}) { + const _combination = config.combination || 'chain' as Combination const _options = config.options || {} const _fetchOptions = config.fetchOptions || {} @@ -243,9 +263,9 @@ export function createFetch(config: CreateFetchOptions = {}) { options = { ...options, ...args[0], - beforeFetch: chainCallbacks(_options.beforeFetch, args[0].beforeFetch), - afterFetch: chainCallbacks(_options.afterFetch, args[0].afterFetch), - onFetchError: chainCallbacks(_options.onFetchError, args[0].onFetchError), + beforeFetch: combineCallbacks(_combination, _options.beforeFetch, args[0].beforeFetch), + afterFetch: combineCallbacks(_combination, _options.afterFetch, args[0].afterFetch), + onFetchError: combineCallbacks(_combination, _options.onFetchError, args[0].onFetchError), } } else { @@ -264,9 +284,9 @@ export function createFetch(config: CreateFetchOptions = {}) { options = { ...options, ...args[1], - beforeFetch: chainCallbacks(_options.beforeFetch, args[1].beforeFetch), - afterFetch: chainCallbacks(_options.afterFetch, args[1].afterFetch), - onFetchError: chainCallbacks(_options.onFetchError, args[1].onFetchError), + beforeFetch: combineCallbacks(_combination, _options.beforeFetch, args[1].beforeFetch), + afterFetch: combineCallbacks(_combination, _options.afterFetch, args[1].afterFetch), + onFetchError: combineCallbacks(_combination, _options.onFetchError, args[1].onFetchError), } } From da0a5ef8f31199c9cefb16c70dfa09676720dc0b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E6=9D=B0?= <1098626505@qq.com> Date: Sat, 29 Oct 2022 22:34:23 +0800 Subject: [PATCH 80/89] chore: some typo (#2377) --- packages/.vitepress/theme/components/FunctionInfo.vue | 1 - packages/shared/createEventHook/index.md | 2 +- packages/shared/resolveUnref/index.ts | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/.vitepress/theme/components/FunctionInfo.vue b/packages/.vitepress/theme/components/FunctionInfo.vue index 1c3663eeda9..413515bf788 100644 --- a/packages/.vitepress/theme/components/FunctionInfo.vue +++ b/packages/.vitepress/theme/components/FunctionInfo.vue @@ -6,7 +6,6 @@ import exportSizes from '../../../export-size.json' const props = defineProps<{ fn: string }>() const info = computed(() => functions.find(i => i.name === props.fn)) -const format = (ts: number) => ago(-1, 'day') const lastUpdated = useTimeAgo(new Date(info.value?.lastUpdated || 0)) const link = computed(() => `/functions\#category=${encodeURIComponent(info.value.category)}`) diff --git a/packages/shared/createEventHook/index.md b/packages/shared/createEventHook/index.md index 1a4a83cb839..6d34f69eaa6 100644 --- a/packages/shared/createEventHook/index.md +++ b/packages/shared/createEventHook/index.md @@ -40,7 +40,7 @@ onResult((result) => { }) onError((error) => { - console.errr(error) + console.error(error) }) ``` diff --git a/packages/shared/resolveUnref/index.ts b/packages/shared/resolveUnref/index.ts index 2009965d554..182a57aa03c 100644 --- a/packages/shared/resolveUnref/index.ts +++ b/packages/shared/resolveUnref/index.ts @@ -2,7 +2,7 @@ import { unref } from 'vue-demi' import type { MaybeComputedRef } from '../utils' /** - * Normalize value/ref/getter to `ref` or `computed`. + * Get the value of value/ref/getter. */ export function resolveUnref(r: MaybeComputedRef): T { return typeof r === 'function' From 1ec89d6ad30d6cdf7f4258802e8629755a46c169 Mon Sep 17 00:00:00 2001 From: btea <2356281422@qq.com> Date: Tue, 1 Nov 2022 14:17:56 +0800 Subject: [PATCH 81/89] chore(useDraggable): update zIndex (#2388) --- packages/core/useDraggable/demo.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/core/useDraggable/demo.vue b/packages/core/useDraggable/demo.vue index 777f0307bf0..73723f1a2c9 100644 --- a/packages/core/useDraggable/demo.vue +++ b/packages/core/useDraggable/demo.vue @@ -25,7 +25,7 @@ const { x, y, style } = useDraggable(el, { p="x-4 y-2" border="~ gray-400/30 rounded" shadow="~ hover:lg" - class="fixed bg-$vp-c-bg select-none cursor-move z-10" + class="fixed bg-$vp-c-bg select-none cursor-move z-24" style="touch-action:none;" :style="style" > @@ -40,7 +40,7 @@ const { x, y, style } = useDraggable(el, { p="x-4 y-2" border="~ gray-400/30 rounded" shadow="~ hover:lg" - class="fixed bg-$vp-c-bg select-none cursor-move z-10" + class="fixed bg-$vp-c-bg select-none cursor-move z-24" :initial-value="{ x: innerWidth / 3.9, y: 150 }" :prevent-default="true" storage-key="vueuse-draggable-pos" @@ -60,7 +60,7 @@ const { x, y, style } = useDraggable(el, { p="x-4 y-2" border="~ gray-400/30 rounded" shadow="~ hover:lg" - class="fixed bg-$vp-c-bg select-none z-10" + class="fixed bg-$vp-c-bg select-none z-24" :initial-value="{ x: innerWidth / 3.6, y: 240 }" :prevent-default="true" :handle="handle" From c5e91fbba264e9850cc4c3df2bfb96d907eedcf5 Mon Sep 17 00:00:00 2001 From: Chase Hu <104331994+huchase@users.noreply.github.com> Date: Wed, 2 Nov 2022 20:23:33 +0800 Subject: [PATCH 82/89] chore: simplify tsconfig.json (#2393) --- tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index 1bc7135aad8..a1217193851 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -42,7 +42,7 @@ ], "exclude": [ "node_modules", - "**/**/*.md", + "**/*.md", "**/dist", "packages/.test", "packages/_docs" From 3ddc754336ec0813d1cd6d9afd9472cc43763f66 Mon Sep 17 00:00:00 2001 From: DarknessChaser <765456149@qq.com> Date: Fri, 4 Nov 2022 13:07:12 +0800 Subject: [PATCH 83/89] chore: fix typo (#2395) --- packages/core/useWebWorker/index.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/core/useWebWorker/index.md b/packages/core/useWebWorker/index.md index b3e9611a792..a06f4daf8cf 100644 --- a/packages/core/useWebWorker/index.md +++ b/packages/core/useWebWorker/index.md @@ -15,11 +15,10 @@ import { useWebWorker } from '@vueuse/core' const { data, post, terminate, worker } = useWebWorker('/path/to/worker.js') ``` -| State | Type | Description | -| ----- | ---------- | ---------------------------------------------------------------------------------------------------- | -| data | `Ref` | Reference to the latest data received via the worker, can be watched to respond to incoming messages | -| worker | `ShallowRef` | Reference to the instance of the WebWorker | - +| State | Type | Description | +| ------ | --------------------------------- | ---------------------------------------------------------------------------------------------------- | +| data | `Ref` | Reference to the latest data received via the worker, can be watched to respond to incoming messages | +| worker | `ShallowRef` | Reference to the instance of the WebWorker | | Method | Signature | Description | | --------- | --------------------- | -------------------------------- | From c913b8f97be96aa0bc5baf185e5960a0c84c2495 Mon Sep 17 00:00:00 2001 From: Fiad Date: Fri, 4 Nov 2022 12:09:11 +0100 Subject: [PATCH 84/89] feat(onClickOutside): support options in component (#2391) * fix(onClickOutside): missing options for component It adds support for the options property when using onClickOutside via component * docs: add example Co-authored-by: sibbng --- packages/core/onClickOutside/component.ts | 11 ++++++++--- packages/core/onClickOutside/index.md | 2 +- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/core/onClickOutside/component.ts b/packages/core/onClickOutside/component.ts index b976d48583a..712c311d41e 100644 --- a/packages/core/onClickOutside/component.ts +++ b/packages/core/onClickOutside/component.ts @@ -1,16 +1,21 @@ import { defineComponent, h, ref } from 'vue-demi' import { onClickOutside } from '@vueuse/core' import type { RenderableComponent } from '../types' +import type { OnClickOutsideOptions } from '.' -export const OnClickOutside = defineComponent({ +export interface OnClickOutsideProps extends RenderableComponent { + options?: OnClickOutsideOptions +} + +export const OnClickOutside = defineComponent({ name: 'OnClickOutside', - props: ['as'] as unknown as undefined, + props: ['as', 'options'] as unknown as undefined, emits: ['trigger'], setup(props, { slots, emit }) { const target = ref() onClickOutside(target, (e) => { emit('trigger', e) - }) + }, props.options) return () => { if (slots.default) diff --git a/packages/core/onClickOutside/index.md b/packages/core/onClickOutside/index.md index 428bf0389f9..bbef152d26d 100644 --- a/packages/core/onClickOutside/index.md +++ b/packages/core/onClickOutside/index.md @@ -39,7 +39,7 @@ export default { ## Component Usage ```html - +
Click Outside of Me
From f78c49a4944bf744903af223295ff90b498936b9 Mon Sep 17 00:00:00 2001 From: sibbng Date: Mon, 7 Nov 2022 15:10:39 +0300 Subject: [PATCH 85/89] fix(onClickOutside): access correct `document` (#2404) --- packages/core/onClickOutside/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/onClickOutside/index.ts b/packages/core/onClickOutside/index.ts index 81bd6e512d7..2e329a0e6a1 100644 --- a/packages/core/onClickOutside/index.ts +++ b/packages/core/onClickOutside/index.ts @@ -81,8 +81,8 @@ export function onClickOutside( detectIframe && useEventListener(window, 'blur', (event) => { const el = unrefElement(target) if ( - document.activeElement?.tagName === 'IFRAME' - && !el?.contains(document.activeElement) + window.document.activeElement?.tagName === 'IFRAME' + && !el?.contains(window.document.activeElement) ) handler(event as any) }), From 86013c46dc4cf753931672b59ad8c5af617430e5 Mon Sep 17 00:00:00 2001 From: Dan Rose Date: Tue, 8 Nov 2022 08:01:39 -0600 Subject: [PATCH 86/89] feat(useWebsocket): url to be ref/computed (#2367) --- packages/core/useWebSocket/index.md | 2 ++ packages/core/useWebSocket/index.ts | 17 +++++++++-------- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/packages/core/useWebSocket/index.md b/packages/core/useWebSocket/index.md index 4fa9c1b9c11..fa6e16fc70b 100644 --- a/packages/core/useWebSocket/index.md +++ b/packages/core/useWebSocket/index.md @@ -22,6 +22,8 @@ Auto-connect (enabled by default). This will call `open()` automatically for you and you don't need to call it by yourself. +If url is provided as a ref, this also controls whether a connection is re-established when its value is changed (or whether you need to call open() again for the change to take effect). + ### Auto-close Auto-close-connection (enabled by default). diff --git a/packages/core/useWebSocket/index.ts b/packages/core/useWebSocket/index.ts index 48e68da7d12..a79459db79a 100644 --- a/packages/core/useWebSocket/index.ts +++ b/packages/core/useWebSocket/index.ts @@ -1,7 +1,7 @@ import type { Ref } from 'vue-demi' -import { ref } from 'vue-demi' -import type { Fn } from '@vueuse/shared' -import { tryOnScopeDispose, useIntervalFn } from '@vueuse/shared' +import { ref, watch } from 'vue-demi' +import type { Fn, MaybeComputedRef } from '@vueuse/shared' +import { resolveRef, tryOnScopeDispose, useIntervalFn } from '@vueuse/shared' import { useEventListener } from '../useEventListener' export type WebSocketStatus = 'OPEN' | 'CONNECTING' | 'CLOSED' @@ -143,7 +143,7 @@ function resolveNestedOptions(options: T | true): T { * @param url */ export function useWebSocket( - url: string, + url: MaybeComputedRef, options: UseWebSocketOptions = {}, ): UseWebSocketReturn { const { @@ -159,6 +159,7 @@ export function useWebSocket( const data: Ref = ref(null) const status = ref('CLOSED') const wsRef = ref() + const urlRef = resolveRef(url) let heartbeatPause: Fn | undefined let heartbeatResume: Fn | undefined @@ -206,7 +207,7 @@ export function useWebSocket( if (explicitlyClosed) return - const ws = new WebSocket(url, protocols) + const ws = new WebSocket(urlRef.value, protocols) wsRef.value = ws status.value = 'CONNECTING' @@ -281,9 +282,6 @@ export function useWebSocket( heartbeatResume = resume } - if (immediate) - _init() - if (autoClose) { useEventListener(window, 'beforeunload', () => close()) tryOnScopeDispose(close) @@ -296,6 +294,9 @@ export function useWebSocket( _init() } + if (immediate) + watch(urlRef, open, { immediate: true }) + return { data, status, From 267f4cce5800462776ca9b6e9ace3ac2fffc0202 Mon Sep 17 00:00:00 2001 From: Icey Wu <66096254+IceyWu@users.noreply.github.com> Date: Tue, 8 Nov 2022 22:02:07 +0800 Subject: [PATCH 87/89] docs(computedAsync): adjust punctuation (#2407) --- packages/core/computedAsync/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/computedAsync/index.md b/packages/core/computedAsync/index.md index c0a12db49d4..f03491c5e1e 100644 --- a/packages/core/computedAsync/index.md +++ b/packages/core/computedAsync/index.md @@ -25,7 +25,7 @@ const userInfo = computedAsync( ### Evaluation State -You will need to pass a ref to track if the async function is evaluating, +You will need to pass a ref to track if the async function is evaluating. ```js import { ref } from 'vue' From 39b5e2c7bad6ada81477e1d8d9aab733f1965229 Mon Sep 17 00:00:00 2001 From: YRMING Date: Tue, 8 Nov 2022 22:02:43 +0800 Subject: [PATCH 88/89] chore: remove unused import (#2401) --- packages/.vitepress/theme/components/Contributors.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/.vitepress/theme/components/Contributors.vue b/packages/.vitepress/theme/components/Contributors.vue index 6c69ea2537c..63daae5b777 100644 --- a/packages/.vitepress/theme/components/Contributors.vue +++ b/packages/.vitepress/theme/components/Contributors.vue @@ -3,7 +3,6 @@ import _contributors from '/virtual-contributors' import { computed } from 'vue' import type { ContributorInfo } from '../@vueuse/metadata' -import { renderCommitMessage } from '../utils' const props = defineProps<{ fn: string }>() From cbe69fa6bf64631ac5a806379c86a0fb2c2c0b4c Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Wed, 9 Nov 2022 07:37:38 +0800 Subject: [PATCH 89/89] chore: update docs style --- packages/.vitepress/plugins/markdownTransform.ts | 2 +- packages/.vitepress/theme/components/TeamMember.vue | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/.vitepress/plugins/markdownTransform.ts b/packages/.vitepress/plugins/markdownTransform.ts index 2ec1c704b27..c2d85437b0e 100644 --- a/packages/.vitepress/plugins/markdownTransform.ts +++ b/packages/.vitepress/plugins/markdownTransform.ts @@ -78,7 +78,7 @@ export async function getFunctionMarkdown(pkg: string, name: string) { ## Type Declarations
-Show Type Declarations +Show Type Declarations ${code} diff --git a/packages/.vitepress/theme/components/TeamMember.vue b/packages/.vitepress/theme/components/TeamMember.vue index 2fb97146a61..012a5f2d0a2 100644 --- a/packages/.vitepress/theme/components/TeamMember.vue +++ b/packages/.vitepress/theme/components/TeamMember.vue @@ -45,9 +45,9 @@ defineProps<{ :aria-label="`Sponsor ${data.name}`" /> -
+