Merge branch 'main' into pr/vaakian/2180

.eslintrc.js

@@ -57,7 +57,7 @@ module.exports = {
       },
     },
     {
-      files: ['**/*.md', '**/*.md/*.*', 'demo.vue', 'scripts/*.ts', '*.test.ts'],
+      files: ['**/*.md', '**/*.md/*.*', 'demo.vue', 'demo.client.vue', 'scripts/*.ts', '*.test.ts'],
       rules: {
         'no-alert': 'off',
         'no-console': 'off',

.github/stale.yml

@@ -0,0 +1,14 @@
+daysUntilStale: 60
+daysUntilClose: 7
+exemptLabels:
+  - pinned
+  - security
+  - no-stale
+  - no stale
+  - pr welcome
+staleLabel: stale
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+closeComment: false

.gitignore

@@ -15,3 +15,5 @@ packages/public/badge-*
 packages/*/index.mjs
 playgrounds/*/pnpm-lock.yaml
 types
+coverage
+.eslintcache

.npmrc

@@ -1,2 +1,3 @@
 shamefully-hoist=true
 strict-peer-dependencies=false
+side-effects-cache=false

CONTRIBUTING.md

@@ -63,7 +63,7 @@ packages
 
 ### Function Folder
 
-A function folder typicality contains these 4 files:
+A function folder typically contains these 4 files:
 
 > You can find the template under `packages/core/_template/`
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/monorepo",
-  "version": "9.2.0",
+  "version": "9.4.0",
   "private": true,
   "packageManager": "pnpm@7.6.0",
   "description": "Collection of essential Vue Composition Utilities",
@@ -16,7 +16,7 @@
     "docs": "vue-demi-switch 3 && vitepress dev packages --open",
     "docs:build": "nr update:full && vitepress build packages && nr build:redirects && esno scripts/post-docs.ts",
     "docs:serve": "vitepress serve packages",
-    "lint": "eslint .",
+    "lint": "eslint --cache .",
     "lint:fix": "nr lint --fix",
     "publish:ci": "esno scripts/publish.ts",
     "install-fonts": "gfi install Inter && gfi install Fira Code",
@@ -27,94 +27,98 @@
     "test:2": "vue-demi-switch 2.7 vue2 && vitest run --silent",
     "test:3": "vue-demi-switch 3 && vitest run",
     "test:all": "nr test:3 && nr test:2 && vue-demi-switch 3",
+    "test:cov": "vitest run --coverage",
     "typecheck": "tsc --noEmit",
     "types:fix": "esno scripts/fix-types.ts",
     "update": "nr -C packages/metadata update && esno scripts/update.ts",
     "update:full": "nr update && nr build:types",
     "watch": "esno scripts/build.ts --watch"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.26.3",
-    "@antfu/ni": "^0.18.0",
-    "@iconify/json": "^2.1.103",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-replace": "^4.0.0",
+    "@antfu/eslint-config": "^0.27.0",
+    "@antfu/ni": "^0.18.2",
+    "@iconify/json": "^2.1.122",
+    "@rollup/plugin-json": "^5.0.0",
+    "@rollup/plugin-replace": "^5.0.0",
     "@type-challenges/utils": "^0.1.1",
     "@types/fs-extra": "^9.0.13",
     "@types/js-yaml": "^4.0.5",
     "@types/md5": "^2.3.2",
-    "@types/node": "^18.7.15",
-    "@types/prettier": "^2.7.0",
+    "@types/node": "^18.11.0",
+    "@types/prettier": "^2.7.1",
     "@types/semver": "^7.3.12",
-    "@types/sharp": "^0.30.5",
-    "@vitest/ui": "^0.23.1",
-    "@vue/compiler-sfc": "^3.2.38",
-    "@vue/test-utils": "^2.0.2",
+    "@types/sharp": "^0.31.0",
+    "@vitest/coverage-c8": "^0.24.3",
+    "@vitest/ui": "^0.24.3",
+    "@vue/compiler-sfc": "^3.2.41",
+    "@vue/test-utils": "^2.1.0",
     "@vueuse/core": "workspace:*",
     "@vueuse/integrations": "workspace:*",
     "@vueuse/math": "workspace:*",
+    "@vueuse/rxjs": "workspace:*",
     "@vueuse/shared": "workspace:*",
-    "axios": "^0.27.2",
+    "axios": "^1.1.3",
     "bumpp": "^8.2.1",
     "consola": "^2.15.3",
     "cross-env": "^7.0.3",
     "esbuild-register": "^3.3.3",
-    "eslint": "^8.23.0",
+    "eslint": "^8.25.0",
     "esno": "^0.16.3",
     "export-size": "^0.5.2",
-    "fast-glob": "^3.2.11",
-    "firebase": "^9.9.4",
+    "fast-glob": "^3.2.12",
+    "firebase": "^9.12.1",
     "fs-extra": "^10.1.0",
     "fuse.js": "^6.6.2",
     "google-font-installer": "^1.2.0",
     "gray-matter": "^4.0.3",
     "js-yaml": "^4.1.0",
-    "jsdom": "^20.0.0",
+    "jsdom": "^20.0.1",
     "lint-staged": "^13.0.3",
     "markdown-table": "^3.0.2",
     "md5": "^2.3.0",
-    "msw": "^0.47.0",
+    "msw": "^0.47.4",
     "node-fetch": "^3.2.10",
-    "ohmyfetch": "^0.4.18",
-    "pnpm": "^7.11.0",
-    "postcss": "^8.4.16",
-    "postcss-nested": "^5.0.6",
+    "ohmyfetch": "^0.4.19",
+    "pnpm": "^7.13.5",
+    "postcss": "^8.4.18",
+    "postcss-nested": "^6.0.0",
     "prettier": "^2.7.1",
     "prism-theme-vars": "^0.2.4",
     "remove-markdown": "^0.5.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.79.0",
-    "rollup-plugin-dts": "^4.2.2",
+    "rollup": "^3.2.2",
+    "rollup-plugin-dts": "^5.0.0",
     "rollup-plugin-esbuild": "^4.10.1",
-    "sharp": "^0.31.0",
-    "simple-git": "^3.14.0",
+    "sharp": "^0.31.1",
+    "simple-git": "^3.14.1",
     "simple-git-hooks": "^2.8.0",
-    "typescript": "4.8.2",
-    "unocss": "^0.45.15",
-    "unplugin-icons": "^0.14.9",
-    "unplugin-vue-components": "^0.22.4",
-    "vite": "^3.1.0",
-    "vite-plugin-inspect": "^0.6.1",
-    "vite-plugin-pwa": "^0.12.6",
-    "vitepress": "^1.0.0-alpha.13",
-    "vitest": "^0.23.1",
-    "vue": "^3.2.38",
+    "typescript": "4.8.4",
+    "unocss": "^0.45.29",
+    "unplugin-icons": "^0.14.12",
+    "unplugin-vue-components": "^0.22.8",
+    "vite": "^3.1.8",
+    "vite-plugin-inspect": "^0.7.5",
+    "vite-plugin-pwa": "^0.13.1",
+    "vitepress": "^1.0.0-alpha.21",
+    "vitest": "^0.24.3",
+    "vue": "^3.2.41",
     "vue2": "npm:vue@^2.7.10"
   },
   "pnpm": {
     "neverBuiltDependencies": [
       "electron"
     ],
     "overrides": {
-      "vue-demi": "0.13.2"
+      "vue-demi": "0.13.11",
+      "vite": "^3.1.6"
     }
   },
   "simple-git-hooks": {
     "pre-commit": "npx lint-staged"
   },
   "lint-staged": {
     "*.{js,ts,tsx,vue,md}": [
-      "eslint --fix"
+      "eslint --cache --fix"
     ]
   }
 }

packages/.vitepress/config.ts

@@ -1,6 +1,6 @@
 import { defineConfig } from 'vitepress'
+import { addonCategoryNames, categoryNames, coreCategoryNames, metadata } from '../metadata/metadata'
 import { currentVersion, versions } from '../../meta/versions'
-import { addonCategoryNames, categoryNames, coreCategoryNames, metadata } from '../../packages/metadata/metadata'
 
 const Guide = [
   { text: 'Get Started', link: '/guide/' },
@@ -31,6 +31,7 @@ const Links = [
   { text: 'Ecosystem', link: '/ecosystem' },
   { text: 'Export Size', link: '/export-size' },
   { text: 'Recent Updated', link: '/functions.html#sort=updated' },
+  { text: 'Premium Video Course', link: 'https://vueschool.io/courses/vueuse-for-everyone?friend=vueuse' },
 ]
 
 const DefaultSideBar = [

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
@@ -63,7 +65,8 @@ const GITHUB_BLOB_URL = 'https://github.com/vueuse/vueuse/blob/main/packages'
 export async function getFunctionMarkdown(pkg: string, name: string) {
   const URL = `${GITHUB_BLOB_URL}/${pkg}/${name}`
 
-  const hasDemo = fs.existsSync(join(DIR_SRC, pkg, name, 'demo.vue'))
+  const dirname = join(DIR_SRC, pkg, name)
+  const demoPath = ['demo.vue', 'demo.client.vue'].find(i => fs.existsSync(join(dirname, i)))
   const types = await getTypeDefinition(pkg, name)
 
   let typingSection = ''
@@ -75,7 +78,7 @@ export async function getFunctionMarkdown(pkg: string, name: string) {
 ## Type Declarations
 
 <details>
-<summary op50 italic>Show Type Declarations</summary>
+<summary op50 italic cursor-pointer select-none>Show Type Declarations</summary>
 
 ${code}
 
@@ -86,7 +89,7 @@ ${code}
 
   const links = ([
     ['Source', `${URL}/index.ts`],
-    hasDemo ? ['Demo', `${URL}/demo.vue`] : undefined,
+    demoPath ? ['Demo', `${URL}/${demoPath}`] : undefined,
     ['Docs', `${URL}/index.md`],
   ])
     .filter(i => i)
@@ -103,16 +106,38 @@ ${code}
 
 <Changelog fn="${name}" />
 `
-  const demoSection = hasDemo
-    ? `
+
+  const demoSection = demoPath
+    ? demoPath.endsWith('.client.vue')
+      ? `
+<script setup>
+import { defineAsyncComponent } from 'vue'
+const Demo = defineAsyncComponent(() => import('./${demoPath}'))
+</script>
+
+## Demo
+
+<DemoContainer>
+<p class="demo-source-link"><a href="${URL}/${demoPath}" target="_blank">source</a></p>
+<ClientOnly>
+  <Suspense>
+    <Demo/>
+    <template #fallback>
+      Loading demo...
+    </template>
+  </Suspense>
+</ClientOnly>
+</DemoContainer>
+`
+      : `
 <script setup>
-import Demo from \'./demo.vue\'
+import Demo from \'./${demoPath}\'
 </script>
 
 ## Demo
 
 <DemoContainer>
-<p class="demo-source-link"><a href="${URL}/demo.vue" target="_blank">source</a></p>
+<p class="demo-source-link"><a href="${URL}/${demoPath}" target="_blank">source</a></p>
 <Demo/>
 </DemoContainer>
 `

packages/.vitepress/plugins/utils.ts

@@ -6,6 +6,7 @@ export const stringify = reactify(
     skipInvalid: true,
     forceQuotes: true,
     condenseFlow: true,
+    noCompatMode: true,
     quotingType: '\'',
   }),
 )

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 }>()
 

packages/.vitepress/theme/components/CourseLink.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const props = defineProps<{
+  href: string
+}>()
+</script>
+
+<template>
+  <a :href="href" target="_blank" bg-green:10 px4 py3 rounded block mt2 flex items-center gap2>
+    <div i-carbon:play-filled flex-none text-lg />
+    <slot />
+  </a>
+</template>

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)}`)
 

packages/.vitepress/theme/components/FunctionsList.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed, ref, toRef } from 'vue'
+import type { Ref } from 'vue'
+import { computed, toRef } from 'vue'
 import Fuse from 'fuse.js'
 import { useEventListener, useUrlSearchParams } from '@vueuse/core'
 import { categoryNames, functions } from '../../../../packages/metadata/metadata'
@@ -9,16 +10,17 @@ const addonCategories = categoryNames.filter(i => i.startsWith('@'))
 const sortMethods = ['category', 'name', 'updated']
 
 useEventListener('click', (e) => {
+  // @ts-expect-error cast
   if (e.target.tagName === 'A')
     window.dispatchEvent(new Event('hashchange'))
 })
 
 const query = useUrlSearchParams('hash-params', { removeFalsyValues: true })
-const search = toRef(query, 'search')
-const category = toRef(query, 'category')
-const hasComponent = toRef(query, 'component')
-const hasDirective = toRef(query, 'directive')
-const sortMethod = toRef(query, 'sort') as Ref<'category' | 'name' | 'updated'>
+const search = toRef(query, 'search') as Ref<string | null>
+const category = toRef(query, 'category') as Ref<string | null>
+const hasComponent = toRef(query, 'component') as any as Ref<boolean>
+const hasDirective = toRef(query, 'directive') as any as Ref<boolean>
+const sortMethod = toRef(query, 'sort') as Ref<'category' | 'name' | 'updated' | null>
 
 const showCategory = computed(() => !search.value && (!sortMethod.value || sortMethod.value === 'category'))
 
@@ -46,7 +48,7 @@ const result = computed(() => {
     else if (sortMethod.value === 'name')
       fns.sort((a, b) => a.name.localeCompare(b.name))
     else
-      fns.sort((a, b) => categoryNames.indexOf(a.category) - categoryNames.indexOf(b.category))
+      fns.sort((a, b) => categoryNames.indexOf(a.category || '') - categoryNames.indexOf(b.category || ''))
     return fns
   }
 })
@@ -56,7 +58,7 @@ const hasFilters = computed(() => Boolean(search.value || category.value || hasC
 function resetFilters() {
   sortMethod.value = null
   category.value = null
-  hasComponent.value = null
+  hasComponent.value = false
   search.value = null
 }
 
@@ -65,7 +67,7 @@ function toggleCategory(cate: string) {
 }
 
 function toggleSort(method: string) {
-  sortMethod.value = method
+  sortMethod.value = method as any
 }
 </script>