From 2e347bd50d5ac13057de70b5a14a6fe5ba3ee1bf Mon Sep 17 00:00:00 2001 From: Robin Date: Mon, 28 Jul 2025 15:32:08 +0200 Subject: [PATCH 01/16] docs: fix integration aliases (#4921) --- packages/.vitepress/vite.config.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/.vitepress/vite.config.ts b/packages/.vitepress/vite.config.ts index bb2b9b3ac80..8666c71f75a 100644 --- a/packages/.vitepress/vite.config.ts +++ b/packages/.vitepress/vite.config.ts @@ -60,8 +60,7 @@ export default defineConfig({ '@vueuse/shared': resolve(__dirname, '../shared/index.ts'), '@vueuse/core': resolve(__dirname, '../core/index.ts'), '@vueuse/math': resolve(__dirname, '../math/index.ts'), - '@vueuse/integrations/useFocusTrap': resolve(__dirname, '../integrations/useFocusTrap/index.ts'), - '@vueuse/integrations': resolve(__dirname, '../integrations/index.ts'), + '@vueuse/integrations': resolve(__dirname, '../integrations'), '@vueuse/components': resolve(__dirname, '../components/index.ts'), '@vueuse/metadata': resolve(__dirname, '../metadata/index.ts'), }, From a73eedd0e8a1899641b6479b53835f51a8656a65 Mon Sep 17 00:00:00 2001 From: SerKo <44749100+serkodev@users.noreply.github.com> Date: Wed, 30 Jul 2025 20:27:01 +0800 Subject: [PATCH 02/16] fix(ci): avoid duplicate `nr update` execution in `docs:build` (#4925) --- package.json | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 6c7fc636776..674f489e35f 100644 --- a/package.json +++ b/package.json @@ -9,13 +9,14 @@ "license": "MIT", "scripts": { "up": "nlx taze && nr size", - "build": "nr update && pnpm -r run build", + "build": "nr update && nr build:packages", + "build:packages": "pnpm -r run build", "build:redirects": "tsx scripts/redirects.ts", "build:types": "vue-tsc --emitDeclarationOnly", "clean": "tsx scripts/clean.ts", "dev": "nr update && nr docs", "docs": "vitepress dev packages --open", - "docs:build": "nr update:full && nr build && vitepress build packages && nr build:redirects", + "docs:build": "nr update:full && nr build:packages && vitepress build packages && nr build:redirects", "docs:serve": "vitepress serve packages", "lint": "eslint --cache .", "lint:fix": "nr lint --fix", From 1b3d4e6a08bd7dc55c26c5c605e791aa56cced51 Mon Sep 17 00:00:00 2001 From: Yu Lia <1938793150@qq.com> Date: Wed, 30 Jul 2025 20:27:19 +0800 Subject: [PATCH 03/16] feat(useDevicePixelRatio): improve types (#4927) --- packages/core/useDevicePixelRatio/index.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/core/useDevicePixelRatio/index.ts b/packages/core/useDevicePixelRatio/index.ts index 84bf22efbea..1d422ad42d9 100644 --- a/packages/core/useDevicePixelRatio/index.ts +++ b/packages/core/useDevicePixelRatio/index.ts @@ -1,3 +1,4 @@ +import type { WatchStopHandle } from 'vue' import type { ConfigurableWindow } from '../_configurable' import { noop, watchImmediate } from '@vueuse/shared' import { readonly, shallowRef } from 'vue' @@ -18,7 +19,7 @@ export function useDevicePixelRatio(options: ConfigurableWindow = {}) { const pixelRatio = shallowRef(1) const query = useMediaQuery(() => `(resolution: ${pixelRatio.value}dppx)`, options) - let stop = noop + let stop: WatchStopHandle = noop if (window) { stop = watchImmediate(query, () => pixelRatio.value = window!.devicePixelRatio) From bcba58314057dc6200d23f803ece5b1e5e71c267 Mon Sep 17 00:00:00 2001 From: SerKo <44749100+serkodev@users.noreply.github.com> Date: Thu, 31 Jul 2025 15:49:38 +0800 Subject: [PATCH 04/16] docs: apply twoslash (#4560) Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> --- netlify.toml | 2 +- package.json | 5 +- packages/.vitepress/config.ts | 12 +- .../.vitepress/plugins/markdownTransform.ts | 104 +- packages/.vitepress/twoslash.ts | 55 + packages/.vitepress/vite.config.ts | 5 +- packages/core/computedAsync/index.md | 12 +- packages/core/computedInject/index.md | 5 +- packages/core/createReusableTemplate/index.md | 6 +- packages/core/createTemplatePromise/index.md | 8 +- packages/core/onClickOutside/index.md | 4 +- packages/core/onKeyStroke/index.md | 20 +- packages/core/onLongPress/index.md | 4 +- packages/core/onStartTyping/index.md | 27 +- packages/core/unrefElement/index.md | 2 +- packages/core/useAnimate/index.md | 6 +- packages/core/useBattery/index.md | 2 +- packages/core/useBluetooth/index.md | 12 +- packages/core/useBreakpoints/index.md | 11 +- packages/core/useBroadcastChannel/index.md | 2 +- packages/core/useBrowserLocation/index.md | 2 +- packages/core/useClipboard/index.md | 4 - packages/core/useClipboardItems/index.md | 6 +- packages/core/useColorMode/index.md | 10 +- packages/core/useConfirmDialog/index.md | 4 +- packages/core/useCountdown/index.md | 6 +- packages/core/useCssVar/index.md | 4 +- packages/core/useDark/index.md | 8 +- packages/core/useDeviceMotion/index.md | 2 +- packages/core/useDeviceOrientation/index.md | 2 +- packages/core/useDevicePixelRatio/index.md | 10 +- packages/core/useDevicesList/index.md | 6 +- packages/core/useDisplayMedia/index.md | 17 +- packages/core/useDraggable/index.md | 2 + packages/core/useElementVisibility/index.md | 2 + packages/core/useEventListener/index.md | 15 +- packages/core/useEventSource/index.md | 47 +- packages/core/useFavicon/index.md | 6 +- packages/core/useFetch/index.md | 26 +- packages/core/useFileDialog/index.md | 6 +- packages/core/useFileSystemAccess/index.md | 15 +- packages/core/useFocus/index.md | 15 +- packages/core/useFocusWithin/index.md | 6 +- packages/core/useFps/index.md | 2 +- packages/core/useFullscreen/index.md | 17 +- packages/core/useGamepad/index.md | 11 +- packages/core/useGeolocation/index.md | 2 +- packages/core/useIdle/index.md | 4 +- packages/core/useImage/index.md | 2 +- packages/core/useKeyModifier/index.md | 2 + packages/core/useMagicKeys/index.md | 4 +- packages/core/useManualRefHistory/index.md | 6 +- packages/core/useMediaQuery/index.md | 13 +- packages/core/useMemoize/index.md | 9 + packages/core/useMounted/index.md | 2 +- packages/core/useMousePressed/index.md | 8 +- packages/core/useNavigatorLanguage/index.md | 15 +- packages/core/useNetwork/index.md | 6 +- packages/core/useNow/index.md | 6 +- packages/core/useObjectUrl/index.md | 2 +- packages/core/useOnline/index.md | 2 +- packages/core/usePageLeave/index.md | 2 +- packages/core/useParallax/index.md | 2 +- packages/core/usePermission/index.md | 2 +- packages/core/usePointer/index.md | 2 +- packages/core/usePointerLock/index.md | 10 +- packages/core/usePointerSwipe/index.md | 2 +- .../core/usePreferredColorScheme/index.md | 2 +- packages/core/usePreferredContrast/index.md | 2 +- packages/core/usePreferredDark/index.md | 2 +- packages/core/usePreferredLanguages/index.md | 2 +- .../core/usePreferredReducedMotion/index.md | 2 +- .../usePreferredReducedTransparency/index.md | 2 +- packages/core/useRafFn/index.md | 2 +- packages/core/useRefHistory/index.md | 18 +- packages/core/useSSRWidth/index.md | 6 +- packages/core/useScreenOrientation/index.md | 4 + packages/core/useScroll/index.md | 4 +- packages/core/useShare/index.md | 4 +- packages/core/useSpeechRecognition/index.md | 2 + packages/core/useSpeechSynthesis/index.md | 3 +- packages/core/useStepper/index.md | 4 +- packages/core/useStorage/index.md | 9 +- packages/core/useStyleTag/index.md | 10 +- packages/core/useSwipe/index.md | 3 +- packages/core/useTextareaAutosize/index.md | 4 + packages/core/useTimeAgo/index.md | 4 +- packages/core/useTimestamp/index.md | 6 +- packages/core/useTitle/index.md | 18 +- packages/core/useTransition/index.md | 20 +- packages/core/useUrlSearchParams/index.md | 6 +- packages/core/useUserMedia/index.md | 20 +- packages/core/useVModel/index.md | 30 +- packages/core/useVModels/index.md | 17 +- packages/core/useVirtualList/index.md | 6 +- packages/core/useWakeLock/index.md | 2 +- packages/core/useWebNotification/index.md | 6 + packages/core/useWebSocket/index.md | 22 +- packages/core/useWebWorker/index.md | 2 +- packages/core/useWebWorkerFn/index.md | 2 +- packages/electron/useIpcRenderer/index.md | 2 +- .../electron/useIpcRendererInvoke/index.md | 2 +- packages/electron/useIpcRendererOn/index.md | 2 +- packages/electron/useZoomFactor/index.md | 8 +- packages/electron/useZoomLevel/index.md | 8 +- packages/firebase/useFirestore/index.md | 26 +- packages/firebase/useRTDB/index.md | 16 +- packages/integrations/useCookies/index.md | 28 +- packages/integrations/useFocusTrap/index.md | 1 + packages/integrations/useJwt/index.md | 12 +- packages/integrations/useNProgress/index.md | 6 +- packages/integrations/useSortable/index.md | 4 +- packages/rxjs/from/index.md | 4 +- packages/rxjs/toObserver/index.md | 4 +- packages/rxjs/useExtractedObservable/index.md | 10 +- packages/rxjs/useObservable/index.md | 6 +- packages/rxjs/useSubject/index.md | 6 +- packages/rxjs/useSubscription/index.md | 4 +- .../rxjs/watchExtractedObservable/index.md | 8 +- packages/shared/computedEager/index.md | 2 +- packages/shared/computedWithControl/index.md | 6 +- packages/shared/createGlobalState/index.md | 19 +- packages/shared/createInjectionState/index.md | 18 +- packages/shared/extendRef/index.md | 2 + packages/shared/makeDestructurable/index.md | 12 +- packages/shared/reactiveOmit/index.md | 18 +- packages/shared/reactivePick/index.md | 18 +- packages/shared/refDebounced/index.md | 6 +- packages/shared/refThrottled/index.md | 6 +- packages/shared/refWithControl/index.md | 14 + packages/shared/tryOnBeforeMount/index.md | 2 +- packages/shared/tryOnBeforeUnmount/index.md | 2 +- packages/shared/tryOnMounted/index.md | 2 +- packages/shared/tryOnScopeDispose/index.md | 2 +- packages/shared/tryOnUnmounted/index.md | 2 +- packages/shared/until/index.md | 8 +- packages/shared/useArrayDifference/index.md | 8 +- packages/shared/useArrayEvery/index.md | 4 +- packages/shared/useArrayFilter/index.md | 4 +- packages/shared/useArrayFind/index.md | 4 +- packages/shared/useArrayFindIndex/index.md | 4 +- packages/shared/useArrayFindLast/index.md | 4 +- packages/shared/useArrayIncludes/index.md | 2 +- packages/shared/useArrayJoin/index.md | 6 +- packages/shared/useArrayMap/index.md | 4 +- packages/shared/useArrayReduce/index.md | 6 +- packages/shared/useArraySome/index.md | 4 +- packages/shared/useArrayUnique/index.md | 6 +- packages/shared/useCounter/index.md | 4 +- packages/shared/useDebounceFn/index.md | 8 +- packages/shared/useInterval/index.md | 8 +- packages/shared/useIntervalFn/index.md | 2 +- packages/shared/useThrottleFn/index.md | 2 +- packages/shared/useTimeout/index.md | 12 +- packages/shared/useTimeoutFn/index.md | 2 +- packages/shared/useToggle/index.md | 4 +- packages/shared/whenever/index.md | 8 + pnpm-lock.yaml | 1988 +++++++---------- pnpm-workspace.yaml | 1 + 159 files changed, 1666 insertions(+), 1629 deletions(-) create mode 100644 packages/.vitepress/twoslash.ts diff --git a/netlify.toml b/netlify.toml index e5a9e8809be..57a45386dbf 100755 --- a/netlify.toml +++ b/netlify.toml @@ -3,7 +3,7 @@ publish = "packages/.vitepress/dist" command = "pnpm run install-fonts && pnpm run docs:build" [build.environment] -NODE_OPTIONS = "--max_old_space_size=4096" +NODE_OPTIONS = "--max-old-space-size=5120" NODE_VERSION = "22" [[redirects]] diff --git a/package.json b/package.json index 674f489e35f..142551102d6 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "clean": "tsx scripts/clean.ts", "dev": "nr update && nr docs", "docs": "vitepress dev packages --open", - "docs:build": "nr update:full && nr build:packages && vitepress build packages && nr build:redirects", + "docs:build": "nr update:full && nr build:packages && NODE_OPTIONS=\"--max-old-space-size=5120\" ROLLDOWN_OPTIONS_VALIDATION=loose vitepress build packages && nr build:redirects", "docs:serve": "vitepress serve packages", "lint": "eslint --cache .", "lint:fix": "nr lint --fix", @@ -91,6 +91,7 @@ "postcss-nested": "catalog:dev", "prettier": "catalog:dev", "remove-markdown": "catalog:docs", + "rolldown-vite": "catalog:dev", "rollup": "catalog:dev", "rollup-plugin-dts": "catalog:dev", "rollup-plugin-esbuild": "catalog:dev", @@ -107,6 +108,7 @@ "unplugin-vue-components": "catalog:docs", "vite": "catalog:dev", "vite-plugin-inspect": "catalog:dev", + "vite-plugin-pwa": "catalog:docs", "vitepress": "catalog:docs", "vitest": "catalog:test", "vitest-browser-vue": "catalog:test", @@ -127,6 +129,7 @@ "rollup": "catalog:dev", "vite": "catalog:dev", "vite-plugin-pwa": "catalog:docs", + "vitepress>vite": "npm:rolldown-vite@latest", "vue": "catalog:dev" }, "simple-git-hooks": { diff --git a/packages/.vitepress/config.ts b/packages/.vitepress/config.ts index 0e36d40a46d..05163137de1 100644 --- a/packages/.vitepress/config.ts +++ b/packages/.vitepress/config.ts @@ -1,11 +1,13 @@ import { resolve } from 'node:path' import { transformerTwoslash } from '@shikijs/vitepress-twoslash' +import { createFileSystemTypesCache } from '@shikijs/vitepress-twoslash/cache-fs' import { withPwa } from '@vite-pwa/vitepress' import { defineConfig } from 'vitepress' import { currentVersion, versions } from '../../meta/versions' import { addonCategoryNames, categoryNames, coreCategoryNames, metadata } from '../metadata/metadata' import { PWAVirtual } from './plugins/pwa-virtual' import { transformHead } from './transformHead' +import { FILE_IMPORTS } from './twoslash' import viteConfig from './vite.config' const Guide = [ @@ -72,7 +74,15 @@ export default withPwa(defineConfig({ dark: 'vitesse-dark', }, codeTransformers: [ - transformerTwoslash(), + transformerTwoslash({ + twoslashOptions: { + handbookOptions: { + noErrors: true, + }, + }, + includesMap: new Map([['imports', `// ---cut-start---\n${FILE_IMPORTS}\n// ---cut-end---`]]), + typesCache: createFileSystemTypesCache(), + }), ], languages: ['js', 'ts'], }, diff --git a/packages/.vitepress/plugins/markdownTransform.ts b/packages/.vitepress/plugins/markdownTransform.ts index ea23182e617..563c921cfe4 100644 --- a/packages/.vitepress/plugins/markdownTransform.ts +++ b/packages/.vitepress/plugins/markdownTransform.ts @@ -2,6 +2,7 @@ import type { Plugin } from 'vite' import { existsSync } from 'node:fs' import { join, resolve } from 'node:path' import { format } from 'prettier' +import { createTwoslasher } from 'twoslash' import ts from 'typescript' import { packages } from '../../../meta/packages' import { version as currentVersion } from '../../../package.json' @@ -15,6 +16,11 @@ export function MarkdownTransform(): Plugin { if (!hasTypes) console.warn('No types dist found, run `npm run build:types` first.') + const twoslasher = createTwoslasher({ + handbookOptions: { noErrors: true }, + customTags: ['include'], + }) + return { name: 'vueuse-md-transform', enforce: 'pre', @@ -44,16 +50,46 @@ export function MarkdownTransform(): Plugin { const firstHeader = code.search(/\n#{2,6}\s.+/) const sliceIndex = firstHeader < 0 ? frontmatterEnds < 0 ? 0 : frontmatterEnds + 4 : firstHeader + // Add vue code blocks to twoslash by default + code = await replaceAsync(code, /\n```vue( [^\n]+)?\n(.+?)\n```\n/gs, async (_, meta = '', snippet = '') => { + meta = replaceToDefaultTwoslashMeta(meta) + + if (isMetaTwoslash(meta)) { + snippet = injectCodeToTsVue(snippet, '// @include: imports') + } + + return ` +\`\`\`vue ${meta.trim()} +${snippet} +\`\`\` +` + }) + // Insert JS/TS code blocks - code = await replaceAsync(code, /\n```ts( [^\n]+)?\n(.+?)\n```\n/gs, async (_, meta = '', snippet = '') => { - const formattedTS = (await format(snippet.replace(/\n+/g, '\n'), { semi: false, singleQuote: true, parser: 'typescript' })).trim() + code = await replaceAsync(code, /\n```(?:ts|typescript)( [^\n]+)?\n(.+?)\n```\n/gs, async (_, meta = '', snippet = '') => { + meta = replaceToDefaultTwoslashMeta(meta) + + let snippetForCompare = snippet + if (isMetaTwoslash(meta)) { + // remove twoslash notations + snippetForCompare = twoslasher(snippet, 'ts').code + + // add vue auto imports + snippet = `// @include: imports\n${snippet}` + } + const formattedTS = (await format(snippetForCompare.replace(/\n+/g, '\n'), { semi: false, singleQuote: true, parser: 'typescript' })).trim() const js = ts.transpileModule(formattedTS, { compilerOptions: { target: 99 }, }) const formattedJS = (await format(js.outputText, { semi: false, singleQuote: true, parser: 'typescript' })) .trim() - if (formattedJS === formattedTS) - return _ + if (formattedJS === formattedTS) { + return ` +\`\`\`ts ${meta} +${snippet} +\`\`\` +` + } return `
@@ -107,7 +143,10 @@ export async function getFunctionMarkdown(pkg: string, name: string) { let typingSection = '' if (types) { - const code = `\`\`\`typescript\n${types.trim()}\n\`\`\`` + const code = `\`\`\`ts twoslash +// @include: imports +${types.trim()} +\`\`\`` typingSection = types.length > 1000 ? ` ## Type Declarations @@ -224,3 +263,58 @@ function replaceAsync(str: string, match: RegExp, replacer: (substring: string, }) return Promise.all(promises).then(replacements => str.replace(match, () => replacements.shift()!)) } + +const reLineHighlightMeta = /^\{[\d\-,]*\}$/ + +/** + * Replaces the given meta string with a default "twoslash" if it is empty or modifies it based on certain conditions. + * + * @param meta - The meta string to be processed. + * @returns The processed meta string. + * + * If the meta string is empty or only contains whitespace, it returns "twoslash". + * If the meta string contains "no-twoslash" (case insensitive), it removes "no-twoslash" and returns the remaining string. + * If the remaining string is empty after removing "no-twoslash", it returns an empty string. + * If the meta string matches the `reLineHighlightMeta` regex, it appends "twoslash" to the meta string. + * Otherwise, it returns the trimmed meta string. + */ +function replaceToDefaultTwoslashMeta(meta: string) { + const trimmed = meta.trim() + if (!trimmed) { + return 'twoslash' + } + const hasNoTwoslash = /no-twoslash/i.test(trimmed) + if (hasNoTwoslash) { + const leftover = trimmed.replace(/no-twoslash/i, '').trim() + if (!leftover) { + return '' + } + return leftover + } + if (reLineHighlightMeta.test(trimmed)) { + return `${trimmed} twoslash` + } + return trimmed +} + +function isMetaTwoslash(meta: string) { + return meta.includes('twoslash') && !meta.includes('no-twoslash') +} + +const scriptTagRegex = /]+\blang=["']ts["'][^>]*>/i + +function injectCodeToTsVue(vueContent: string, code: string): string { + const match = vueContent.match(scriptTagRegex) + if (!match) { + return vueContent + } + + const scriptTagStart = match.index! + const scriptTagLength = match[0].length + const insertPosition = scriptTagStart + scriptTagLength + const updatedContent + = `${vueContent.slice(0, insertPosition) + }\n${code}${vueContent.slice(insertPosition)}` + + return updatedContent +} diff --git a/packages/.vitepress/twoslash.ts b/packages/.vitepress/twoslash.ts new file mode 100644 index 00000000000..7f549e4625e --- /dev/null +++ b/packages/.vitepress/twoslash.ts @@ -0,0 +1,55 @@ +// eslint-disable-next-line no-restricted-imports +import * as vue from 'vue' + +function getModuleExports(module: any, exclude?: string[]) { + const exports = Object.keys(module) + return exports.filter(name => !exclude?.includes(name)) +} + +export function generateGlobalDeclsFromModule(moduleName: string, exports: string[] = [], exportTypes: string[] = []) { + const output: string[] = [] + + if (exports.length > 0) { + output.push(`declare global { +${exports + .map(name => `const ${name}: typeof import('${moduleName}').${name};`) + .join('\n')} +}`) + } + + if (exportTypes.length > 0) { + output.push(`declare global { + export type { ${exportTypes.join(', ')} } from 'vue'; + import '${moduleName}'; +}`) + } + + output.push('export {};') + + return output.join('\n\n') +} + +export function generateFileImports(moduleName: string, exports: string[] = [], exportTypes: string[] = []) { + const output: string[] = [] + + if (exports.length > 0) { + output.push(`import { ${exports.join(', ')} } from '${moduleName}';`) + } + + if (exportTypes.length > 0) { + output.push(`import type { ${exportTypes.join(', ')} } from '${moduleName}';`) + } + + return output.join('\n') +} + +const vueExports = getModuleExports(vue) + +// TODO: auto generate types +const vueTypes = ['Component', 'ComponentPublicInstance', 'ComputedRef', 'DirectiveBinding', 'ExtractDefaultPropTypes', 'ExtractPropTypes', 'ExtractPublicPropTypes', 'InjectionKey', 'PropType', 'Ref', 'MaybeRef', 'MaybeRefOrGetter', 'VNode', 'WritableComputedRef'] + +export const EXTRA_FILES = { + 'global-vue.ts': generateGlobalDeclsFromModule('vue', vueExports, vueTypes), +} + +export const FILE_IMPORTS = generateFileImports('vue', vueExports, vueTypes) diff --git a/packages/.vitepress/vite.config.ts b/packages/.vitepress/vite.config.ts index 8666c71f75a..71ae01ad99b 100644 --- a/packages/.vitepress/vite.config.ts +++ b/packages/.vitepress/vite.config.ts @@ -2,11 +2,11 @@ import { createRequire } from 'node:module' import { resolve } from 'node:path' import process from 'node:process' import { fileURLToPath } from 'node:url' +import { defineConfig } from 'rolldown-vite' import UnoCSS from 'unocss/vite' import IconsResolver from 'unplugin-icons/resolver' import Icons from 'unplugin-icons/vite' import Components from 'unplugin-vue-components/vite' -import { defineConfig } from 'vite' import Inspect from 'vite-plugin-inspect' import { getChangeLog, getFunctionContributors } from '../../scripts/changelog' import { ChangeLog } from './plugins/changelog' @@ -96,7 +96,10 @@ export default defineConfig({ return 'vue' }, }, + /* TODO: unsupported options for Rolldown */ + // maxParallelFileOps: 5, }, + sourcemap: false, }, css: { postcss: { diff --git a/packages/core/computedAsync/index.md b/packages/core/computedAsync/index.md index 5f08717a699..8d486d37207 100644 --- a/packages/core/computedAsync/index.md +++ b/packages/core/computedAsync/index.md @@ -9,7 +9,7 @@ Computed for async functions ## Usage -```js +```ts import { computedAsync } from '@vueuse/core' import { shallowRef } from 'vue' @@ -19,7 +19,7 @@ const userInfo = computedAsync( async () => { return await mockLookUp(name.value) }, - null, // initial state + null, /* initial state */ ) ``` @@ -27,7 +27,7 @@ const userInfo = computedAsync( You will need to pass a ref to track if the async function is evaluating. -```js +```ts import { computedAsync } from '@vueuse/core' import { shallowRef } from 'vue' @@ -44,7 +44,9 @@ const userInfo = computedAsync( 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. -```js +```ts +import { computedAsync } from '@vueuse/core' +// ---cut--- const packageName = shallowRef('@vueuse/core') const downloads = computedAsync(async (onCancel) => { @@ -65,7 +67,7 @@ const downloads = computedAsync(async (onCancel) => { By default, `computedAsync` will start resolving immediately on creation, specify `lazy: true` to make it start resolving on the first accessing. -```js +```ts import { computedAsync } from '@vueuse/core' import { shallowRef } from 'vue' diff --git a/packages/core/computedInject/index.md b/packages/core/computedInject/index.md index 6526ae134c6..5a50d77662f 100644 --- a/packages/core/computedInject/index.md +++ b/packages/core/computedInject/index.md @@ -10,7 +10,7 @@ Combine computed and inject In Provider Component -```ts +```ts twoslash include main import type { InjectionKey, Ref } from 'vue' import { provide } from 'vue' @@ -29,6 +29,9 @@ provide(ArrayKey, array) In Receiver Component ```ts +// @filename: provider.ts +// @include: main +// ---cut--- import { computedInject } from '@vueuse/core' import { ArrayKey } from './provider' diff --git a/packages/core/createReusableTemplate/index.md b/packages/core/createReusableTemplate/index.md index b6fb47c5fab..1f786076e9a 100644 --- a/packages/core/createReusableTemplate/index.md +++ b/packages/core/createReusableTemplate/index.md @@ -31,7 +31,7 @@ So this function is made to provide a way for defining and reusing templates ins In the previous example, we could refactor it to: ```vue - - return { - input, - } - }, -} + ``` diff --git a/packages/core/unrefElement/index.md b/packages/core/unrefElement/index.md index 24f93e28e9e..690aaf2a44e 100644 --- a/packages/core/unrefElement/index.md +++ b/packages/core/unrefElement/index.md @@ -9,7 +9,7 @@ Retrieves the underlying DOM element from a Vue ref or component instance ## Usage ```vue - -```vue