chore: sync upstream

.github/workflows/autofix.yml

@@ -0,0 +1,35 @@
+name: autofix.ci
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+permissions:
+  contents: read
+
+jobs:
+  autofix:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Use Node.js lts/*
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - name: Setup
+        run: npm i -g @antfu/ni
+
+      - name: Install
+        run: nci
+
+      - name: Lint
+        run: nr lint --fix
+
+      - uses: autofix-ci/action@dd55f44df8f7cdb7a6bf74c78677eb8acd40cd0a

eslint.config.js

@@ -53,6 +53,7 @@ export default antfu(
       'import/no-named-as-default-member': 'off',
       'node/prefer-global/process': 'off',
       'ts/unified-signatures': 'off',
+      'ts/no-unsafe-function-type': 'off',
       'ts/no-dynamic-delete': 'off',
     },
   },

meta/ecosystem-functions.ts

@@ -27,13 +27,13 @@ export const motion: VueUseFunction[] = [
     ...motionDefaults,
     name: 'useMotion',
     description: '使您的组件拥有动效。',
-    external: 'https://motion.vueuse.org/api/use-motion.html',
+    external: 'https://motion.vueuse.org/api/use-motion',
   },
   {
     ...motionDefaults,
     name: 'useSpring',
     description: 'spring 动画。',
-    external: 'https://motion.vueuse.org/api/use-spring.html',
+    external: 'https://motion.vueuse.org/api/use-spring',
   },
   {
     ...motionDefaults,
@@ -45,19 +45,19 @@ export const motion: VueUseFunction[] = [
     ...motionDefaults,
     name: 'useMotionVariants',
     description: '用于处理 Variants 状态和选择。',
-    external: 'https://motion.vueuse.org/api/use-motion-variants.html',
+    external: 'https://motion.vueuse.org/api/use-motion-variants',
   },
   {
     ...motionDefaults,
     name: 'useElementStyle',
     description: '用于将响应式对象同步到目标元素 CSS 样式。',
-    external: 'https://motion.vueuse.org/api/use-element-style.html',
+    external: 'https://motion.vueuse.org/api/use-element-style',
   },
   {
     ...motionDefaults,
     name: 'useElementTransform',
     description: '用于将反应式对象同步到目标元素 CSS 转换。',
-    external: 'https://motion.vueuse.org/api/use-element-transform.html',
+    external: 'https://motion.vueuse.org/api/use-element-transform',
   },
 ]
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vueuse/monorepo",
   "type": "module",
-  "version": "11.0.0-beta.1",
+  "version": "11.0.0-beta.2",
   "private": true,
   "packageManager": "[email protected]",
   "description": "Collection of essential Vue Composition Utilities",
@@ -37,23 +37,23 @@
     "prepare": "simple-git-hooks"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.21.1",
-    "@antfu/ni": "^0.21.12",
-    "@iconify/json": "^2.2.218",
+    "@antfu/eslint-config": "^2.22.4",
+    "@antfu/ni": "^0.22.0",
+    "@iconify/json": "^2.2.228",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-replace": "^5.0.7",
-    "@shikijs/vitepress-twoslash": "^1.6.4",
+    "@shikijs/vitepress-twoslash": "^1.10.3",
     "@type-challenges/utils": "^0.1.1",
     "@types/fs-extra": "^11.0.4",
     "@types/js-yaml": "^4.0.9",
     "@types/md5": "^2.3.5",
-    "@types/node": "^20.14.2",
+    "@types/node": "^20.14.11",
     "@types/remove-markdown": "^0.3.4",
     "@types/semver": "^7.5.8",
     "@vite-pwa/vitepress": "^0.5.0",
-    "@vitest/coverage-v8": "^1.6.0",
-    "@vitest/ui": "^1.6.0",
-    "@vue/compiler-sfc": "^3.4.27",
+    "@vitest/coverage-v8": "^2.0.3",
+    "@vitest/ui": "^2.0.3",
+    "@vue/compiler-sfc": "^3.4.32",
     "@vue/test-utils": "^2.4.6",
     "@vueuse/core": "workspace:*",
     "@vueuse/integrations": "workspace:*",
@@ -65,13 +65,13 @@
     "bumpp": "^9.4.1",
     "consola": "^3.2.3",
     "esbuild-register": "^3.5.0",
-    "eslint": "^9.4.0",
-    "eslint-plugin-format": "^0.1.1",
+    "eslint": "^9.7.0",
+    "eslint-plugin-format": "^0.1.2",
     "esno": "^4.7.0",
     "export-size": "^0.7.0",
     "fake-indexeddb": "^6.0.0",
     "fast-glob": "^3.3.2",
-    "firebase": "^10.12.2",
+    "firebase": "^10.12.3",
     "fs-extra": "^11.2.0",
     "fuse.js": "^7.0.0",
     "google-font-installer": "^1.2.0",
@@ -87,27 +87,27 @@
     "ofetch": "^1.3.4",
     "postcss": "^8.4.38",
     "postcss-nested": "^6.0.1",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
     "prism-theme-vars": "^0.2.5",
     "remove-markdown": "^0.5.0",
-    "rimraf": "^5.0.7",
-    "rollup": "^4.18.0",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.18.1",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-esbuild": "^6.1.1",
     "rollup-plugin-pure": "^0.2.1",
     "sharp": "0.32.6",
     "simple-git": "^3.25.0",
     "simple-git-hooks": "^2.11.1",
-    "taze": "^0.13.8",
-    "typescript": "^5.4.5",
-    "unocss": "^0.61.0",
+    "taze": "^0.16.1",
+    "typescript": "^5.5.3",
+    "unocss": "^0.61.5",
     "unplugin-icons": "^0.19.0",
-    "unplugin-vue-components": "^0.27.0",
-    "vite": "^5.2.13",
+    "unplugin-vue-components": "^0.27.3",
+    "vite": "^5.3.4",
     "vite-plugin-inspect": "^0.8.4",
-    "vitepress": "^1.2.3",
-    "vitest": "^1.6.0",
-    "vue": "^3.4.27",
+    "vitepress": "^1.3.1",
+    "vitest": "^2.0.3",
+    "vue": "^3.4.32",
     "vue2": "npm:vue@^2.7.14"
   },
   "pnpm": {
@@ -116,9 +116,14 @@
     ]
   },
   "resolutions": {
+    "@typescript-eslint/utils": "^8.0.0-alpha.44",
+    "@vueuse/core": "workspace:*",
+    "@vueuse/integrations": "workspace:*",
+    "eslint": "^9.7.0",
     "magic-string": "^0.30.10",
-    "rollup": "^4.18.0",
-    "vite": "^5.2.13",
+    "rollup": "^4.18.1",
+    "vite": "^5.3.4",
+    "vite-plugin-pwa": "^0.19.0",
     "vue-demi": "^0.14.8"
   },
   "simple-git-hooks": {

packages/.test/retry.ts

@@ -11,14 +11,17 @@ export function retry(assertion: Function, { interval = 1, timeout = 100 } = {})
           resolve(assertion())
         }
         catch (err) {
-          Date.now() - startTime > timeout ? reject(err) : tryAgain()
+          if (Date.now() - startTime > timeout)
+            reject(err)
+          else
+            tryAgain()
         }
       }, interval)
       try {
         // If useFakeTimers hasn't been called, this will throw
         vi.advanceTimersByTime(interval)
       }
-      catch (e) { /* Expected to throw */ }
+      catch { /* Expected to throw */ }
     }
 
     tryAgain()

packages/.vitepress/theme/components/HomeTeam.vue

@@ -8,7 +8,7 @@ import { coreTeamMembers } from '../../../contributors'
       Meet The Team
     </h2>
   </div>
-  <div grid="~ sm:cols-2 md:cols-3 lg:cols-4 gap-x-3 gap-y-20 items-center" p-10>
+  <div grid="~ sm:cols-2 md:cols-3 lg:cols-4 gap-x-3 gap-y-20 items-start" p-10>
     <TeamMember
       v-for="c of coreTeamMembers"
       :key="c.github"

packages/components/index.ts

@@ -44,6 +44,7 @@ export * from '../core/usePreferredContrast/component'
 export * from '../core/usePreferredDark/component'
 export * from '../core/usePreferredLanguages/component'
 export * from '../core/usePreferredReducedMotion/component'
+export * from '../core/useResizeObserver/directive'
 export * from '../core/useScreenSafeArea/component'
 export * from '../core/useScroll/directive'
 export * from '../core/useScrollLock/directive'

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/components",
-  "version": "11.0.0-beta.1",
+  "version": "11.0.0-beta.2",
   "description": "Renderless components for VueUse",
   "author": "Jacob Clevenger<https://github.com/wheatjs>",
   "license": "MIT",

packages/core/createTemplatePromise/index.ts

@@ -47,7 +47,7 @@ export interface TemplatePromiseOptions {
   transition?: TransitionGroupProps
 }
 
-export type TemplatePromise<Return, Args extends any[] = []> = DefineComponent<{}> & {
+export type TemplatePromise<Return, Args extends any[] = []> = DefineComponent<object> & {
   new(): {
     $slots: {
       default: (_: TemplatePromiseProps<Return, Args>) => any
@@ -119,8 +119,7 @@ export function createTemplatePromise<Return, Args extends any[] = []>(
     return renderList
   })
 
-  // eslint-disable-next-line ts/prefer-ts-expect-error
-  // @ts-ignore There's a breaking type change in Vue 3.3 <https://github.com/vuejs/core/pull/7963>
+  // @ts-expect-error There's a breaking type change in Vue 3.3 <https://github.com/vuejs/core/pull/7963>
   component.start = start
 
   return component as any

packages/core/onClickOutside/directive.ts

@@ -4,8 +4,8 @@ import { onClickOutside } from '.'
 import type { OnClickOutsideHandler, OnClickOutsideOptions } from '.'
 
 export const vOnClickOutside: ObjectDirective<
-HTMLElement,
-OnClickOutsideHandler | [(evt: any) => void, OnClickOutsideOptions]
+  HTMLElement,
+  OnClickOutsideHandler | [(evt: any) => void, OnClickOutsideOptions]
 > = {
   [directiveHooks.mounted](el, binding) {
     const capture = !binding.modifiers.bubble

packages/core/onKeyStroke/directive.ts

@@ -8,8 +8,8 @@ type BindingValueFunction = (event: KeyboardEvent) => void
 type BindingValueArray = [BindingValueFunction, OnKeyStrokeOptions]
 
 export const vOnKeyStroke: ObjectDirective<
-HTMLElement,
-BindingValueFunction | BindingValueArray
+  HTMLElement,
+  BindingValueFunction | BindingValueArray
 > = {
   [directiveHooks.mounted](el, binding) {
     const keys = binding.arg?.split(',') ?? true

packages/core/onLongPress/directive.ts

@@ -12,8 +12,8 @@ type BindingValueArray = [
 ]
 
 export const vOnLongPress: ObjectDirective<
-HTMLElement,
-BindingValueFunction | BindingValueArray
+  HTMLElement,
+  BindingValueFunction | BindingValueArray
 > = {
   [directiveHooks.mounted](el, binding) {
     if (typeof binding.value === 'function')

packages/core/onLongPress/index.test.ts

@@ -161,7 +161,7 @@ describe('onLongPress', () => {
     element.value.dispatchEvent(pointerUpEvent)
     expect(onMouseUpCallback).toHaveBeenCalledTimes(1)
     expect(onMouseUpCallback).toBeCalledWith(expect.any(Number), 0, false)
-    expect(onMouseUpCallback.mock.calls[0][0]).toBeGreaterThanOrEqual(250)
+    expect(onMouseUpCallback.mock.calls[0][0]).toBeGreaterThanOrEqual(250 - 2)
 
     // wait for 500ms after pointer up
     await promiseTimeout(500)
@@ -180,7 +180,7 @@ describe('onLongPress', () => {
     element.value.dispatchEvent(pointerUpEvent)
     expect(onMouseUpCallback).toHaveBeenCalledTimes(2)
     expect(onMouseUpCallback).toBeCalledWith(expect.any(Number), 0, true)
-    expect(onMouseUpCallback.mock.calls[1][0]).toBeGreaterThanOrEqual(500)
+    expect(onMouseUpCallback.mock.calls[1][0]).toBeGreaterThanOrEqual(500 - 2)
   }
 
   function suites(isRef: boolean) {

packages/core/onStartTyping/index.ts

@@ -60,9 +60,9 @@ export function onStartTyping(callback: (event: KeyboardEvent) => void, options:
   const { document = defaultDocument } = options
 
   const keydown = (event: KeyboardEvent) => {
-    !isFocusedElementEditable()
-    && isTypedCharValid(event)
-    && callback(event)
+    if (!isFocusedElementEditable() && isTypedCharValid(event)) {
+      callback(event)
+    }
   }
 
   if (document)

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/core",
-  "version": "11.0.0-beta.1",
+  "version": "11.0.0-beta.2",
   "description": "Collection of essential Vue Composition Utilities",
   "author": "Anthony Fu <https://github.com/antfu>",
   "license": "MIT",

packages/core/types.ts

@@ -13,7 +13,7 @@ export interface RenderableComponent {
    *
    * @default 'div'
    */
-  as?: Object | string
+  as?: object | string
 }
 
 export type PointerType = 'mouse' | 'touch' | 'pen'

packages/core/useAnimate/index.ts

@@ -1,5 +1,5 @@
 import type { ComputedRef, Ref, ShallowRef, WritableComputedRef } from 'vue-demi'
-import { computed, nextTick, shallowReactive, shallowRef, watch } from 'vue-demi'
+import { computed, shallowReactive, shallowRef, watch } from 'vue-demi'
 import type { MaybeRef, Mutable } from '@vueuse/shared'
 import { isObject, objectOmit, toValue, tryOnMounted, tryOnScopeDispose } from '@vueuse/shared'
 import type { MaybeComputedElementRef } from '../unrefElement'
@@ -191,7 +191,8 @@ export function useAnimate(
   }
 
   const reverse = () => {
-    !animate.value && update()
+    if (!animate.value)
+      update()
     try {
       animate.value?.reverse()
       syncResume()
@@ -223,11 +224,13 @@ export function useAnimate(
   }
 
   watch(() => unrefElement(target), (el) => {
-    el && update()
+    if (el)
+      update()
   })
 
   watch(() => keyframes, (value) => {
-    !animate.value && update()
+    if (animate.value)
+      update()
 
     if (!unrefElement(target) && animate.value) {
       animate.value.effect = new KeyframeEffect(
@@ -238,9 +241,7 @@ export function useAnimate(
     }
   }, { deep: true })
 
-  tryOnMounted(() => {
-    nextTick(() => update(true))
-  })
+  tryOnMounted(() => update(true), false)
 
   tryOnScopeDispose(cancel)
 

packages/core/useAsyncQueue/index.ts

@@ -109,7 +109,8 @@ export function useAsyncQueue<T extends any[], S = MapQueueTask<T>>(
 
         const done = curr(prevRes).then((currentRes: any) => {
           updateResult(promiseState.fulfilled, currentRes)
-          activeIndex.value === tasks.length - 1 && onFinished()
+          if (activeIndex.value === tasks.length - 1)
+            onFinished()
           return currentRes
         })