chore: update deps

package.json

@@ -1,15 +1,16 @@
 {
   "name": "@vueuse/monorepo",
+  "type": "module",
   "version": "10.3.0",
   "private": true,
-  "packageManager": "[email protected].10",
+  "packageManager": "[email protected].12",
   "description": "Collection of essential Vue Composition Utilities",
   "author": "Anthony Fu<https://github.com/antfu>",
   "license": "MIT",
   "scripts": {
-    "build": "nr update && esno scripts/build.ts",
+    "build": "nr update && esno scripts/build-run.ts",
     "build:redirects": "esno scripts/redirects.ts",
-    "build:rollup": "NODE_OPTIONS=\"--max-old-space-size=6144\" rollup -c",
+    "build:rollup": "NODE_OPTIONS=\"--max-old-space-size=6144\" rollup --config=rollup.config.ts --configPlugin=rollup-plugin-esbuild",
     "build:types": "tsc --emitDeclarationOnly && nr types:fix",
     "clean": "rimraf --glob dist types \"packages/*/dist\"",
     "dev": "nr update && nr docs",
@@ -32,24 +33,24 @@
     "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"
+    "watch": "esno scripts/build-run.ts --watch"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.39.8",
-    "@antfu/ni": "^0.21.5",
-    "@iconify/json": "^2.2.84",
+    "@antfu/eslint-config": "^0.41.0",
+    "@antfu/ni": "^0.21.6",
+    "@iconify/json": "^2.2.106",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-replace": "^5.0.2",
     "@type-challenges/utils": "^0.1.1",
     "@types/fs-extra": "^11.0.1",
     "@types/js-yaml": "^4.0.5",
     "@types/md5": "^2.3.2",
-    "@types/node": "^20.4.4",
-    "@types/prettier": "^2.7.3",
+    "@types/node": "^20.5.6",
+    "@types/prettier": "^3.0.0",
     "@types/remove-markdown": "^0.3.1",
     "@types/semver": "^7.5.0",
     "@vitest/coverage-c8": "^0.33.0",
-    "@vitest/ui": "^0.33.0",
+    "@vitest/ui": "^0.34.3",
     "@vue/compiler-sfc": "^3.3.4",
     "@vue/test-utils": "^2.4.1",
     "@vueuse/core": "workspace:*",
@@ -58,12 +59,12 @@
     "@vueuse/rxjs": "workspace:*",
     "@vueuse/shared": "workspace:*",
     "axios": "^1.4.0",
-    "bumpp": "^9.1.1",
+    "bumpp": "^9.2.0",
     "consola": "^3.2.3",
     "esbuild-register": "^3.4.2",
-    "eslint": "8.45.0",
+    "eslint": "8.47.0",
     "esno": "^0.17.0",
-    "export-size": "^0.5.2",
+    "export-size": "^0.6.0",
     "fake-indexeddb": "^4.0.2",
     "fast-glob": "^3.3.1",
     "firebase": "^9.23.0",
@@ -73,37 +74,37 @@
     "gray-matter": "^4.0.3",
     "js-yaml": "^4.1.0",
     "jsdom": "^22.1.0",
-    "lint-staged": "^13.2.3",
+    "lint-staged": "^14.0.1",
     "markdown-table": "^3.0.3",
     "md5": "^2.3.0",
     "msw": "1.0.1",
-    "node-fetch": "^3.3.1",
-    "node-fetch-native": "^1.2.0",
+    "node-fetch": "^3.3.2",
+    "node-fetch-native": "^1.4.0",
     "ohmyfetch": "^0.4.21",
-    "pnpm": "^8.6.10",
-    "postcss": "^8.4.27",
+    "pnpm": "^8.6.12",
+    "postcss": "^8.4.28",
     "postcss-nested": "^6.0.1",
-    "prettier": "^2.8.8",
+    "prettier": "^3.0.2",
     "prism-theme-vars": "^0.2.4",
     "remove-markdown": "^0.5.0",
     "rimraf": "^5.0.1",
-    "rollup": "^3.26.3",
-    "rollup-plugin-dts": "^5.3.0",
+    "rollup": "^3.28.1",
+    "rollup-plugin-dts": "^6.0.0",
     "rollup-plugin-esbuild": "^5.0.0",
     "rollup-plugin-pure": "^0.1.1",
-    "sharp": "0.32.4",
+    "sharp": "0.32.5",
     "simple-git": "^3.19.1",
     "simple-git-hooks": "^2.9.0",
     "taze": "^0.11.2",
-    "typescript": "5.1.6",
-    "unocss": "^0.53.6",
+    "typescript": "5.2.2",
+    "unocss": "^0.55.3",
     "unplugin-icons": "^0.16.5",
     "unplugin-vue-components": "^0.25.1",
-    "vite": "^4.4.7",
-    "vite-plugin-inspect": "^0.7.33",
+    "vite": "^4.4.9",
+    "vite-plugin-inspect": "^0.7.38",
     "vite-plugin-pwa": "^0.16.4",
-    "vitepress": "1.0.0-beta.6",
-    "vitest": "^0.33.0",
+    "vitepress": "1.0.0-rc.4",
+    "vitest": "^0.34.3",
     "vue": "^3.3.4",
     "vue2": "npm:vue@^2.7.14"
   },
@@ -112,9 +113,9 @@
       "electron"
     ],
     "overrides": {
-      "vue-demi": "0.14.5",
       "magic-string": "^0.30.0",
-      "sourcemap-codec": "npm:@jridgewell/sourcemap-codec@^1.4.15"
+      "sourcemap-codec": "npm:@jridgewell/sourcemap-codec@^1.4.15",
+      "vue-demi": "0.14.5"
     }
   },
   "simple-git-hooks": {

packages/.test/mockServer.ts

@@ -40,7 +40,7 @@ function commonTransformers(req: RestRequest, _: any, ctx: RestContext) {
  * @example https://example.com?status=301&text=thanks&delay=1000
  *          will respond in 1000ms with statusCode 300 and the response body "thanks" as a string
  */
-export const server = setupServer(
+const server = setupServer(
   rest.post(baseUrl, (req, res, ctx) => {
     // Support all the normal examples (delay, status, text, and json)
     const t = commonTransformers(req, res, ctx)

packages/.vitepress/theme/styles/demo.css

@@ -109,7 +109,7 @@
   }
 
   textarea[readonly] {
-    background: var(--vp-c-bg-light);
+    background: var(--vp-c-bg-soft);
   }
 
   input[type='text'], input[type='search'], input[type='number'] {
@@ -141,14 +141,14 @@
   }
 
   .code-block {
-    background-color: var(--vp-c-bg-mute) !important;
+    background-color: var(--vp-c-bg-soft) !important;
     padding: 4px 8px;
     margin: 12px 0;
     border-radius: 4px;
   }
 
   code {
-    background-color: var(--vp-c-bg-mute) !important;
+    background-color: var(--vp-c-bg-soft) !important;
   }
 
   .resizer {

packages/.vitepress/theme/styles/vars.css

@@ -5,6 +5,12 @@
 :root {
   --vp-c-accent: #35495e;
   --vp-c-brand: #44bd87;
+  --vp-c-brand-light: #55da9e;
+  --vp-c-brand-dark: #2e8f5c;
+  --vp-c-brand-active: #3ecf7a;
+  --vp-c-brand-lighter: #69e8af;
+
+
   --vp-c-text-code: #5d6f5d;
 
   --vp-code-block-bg: rgba(125,125,125,0.04);
@@ -15,10 +21,10 @@
   /* fix contrast on gray cards: used by --vp-c-text-2 */
   --vp-c-text-light-2: rgba(56 56 56 / 70%);
   --vp-c-text-dark-2: rgba(56 56 56 / 70%);
-  
+
   --vp-custom-block-info-bg: transparent;
   --vp-custom-block-tip-bg: transparent;
-  
+
   --vp-custom-block-warning-bg: #d9a40605;
   --vp-custom-block-warning-text: #d9a406;
   --vp-custom-block-warning-border: #d9a40630;

packages/components/package.json

@@ -21,8 +21,8 @@
   "sideEffects": false,
   "exports": {
     ".": {
-      "require": "./index.cjs",
-      "import": "./index.mjs"
+      "import": "./index.mjs",
+      "require": "./index.cjs"
     },
     "./*": "./*"
   },

packages/core/_resolve-element.ts

@@ -0,0 +1,16 @@
+/**
+ * Resolves an element from a given element, window, or document.
+ *
+ * @internal
+ */
+export function resolveElement(
+  el: HTMLElement | SVGElement | Window | Document | null | undefined,
+): HTMLElement | SVGElement | null | undefined {
+  if (typeof Window !== 'undefined' && el instanceof Window)
+    return el.document.documentElement
+
+  if (typeof Document !== 'undefined' && el instanceof Document)
+    return el.documentElement
+
+  return el as HTMLElement | SVGElement | null | undefined
+}

packages/core/package.json

@@ -22,13 +22,13 @@
   "sideEffects": false,
   "exports": {
     ".": {
-      "require": "./index.cjs",
-      "import": "./index.mjs"
+      "import": "./index.mjs",
+      "require": "./index.cjs"
     },
     "./*": "./*",
     "./metadata": {
-      "require": "./metadata.cjs",
-      "import": "./metadata.mjs"
+      "import": "./metadata.mjs",
+      "require": "./metadata.cjs"
     }
   },
   "main": "./index.cjs",

packages/core/useDraggable/demo.vue

@@ -23,7 +23,7 @@ const { x, y, style } = useDraggable(el, {
     <div
       ref="el"
       p="x-4 y-2"
-      border="~ gray-400/30 rounded"
+      border="~ gray-800/30 rounded"
       shadow="~ hover:lg"
       class="fixed bg-$vp-c-bg select-none cursor-move z-24"
       style="touch-action:none;"

packages/core/useInfiniteScroll/index.ts

@@ -5,6 +5,7 @@ import { computed, nextTick, reactive, ref, watch } from 'vue-demi'
 import { useElementVisibility } from '../useElementVisibility'
 import type { UseScrollOptions } from '../useScroll'
 import { useScroll } from '../useScroll'
+import { resolveElement } from '../_resolve-element'
 
 export interface UseInfiniteScrollOptions extends UseScrollOptions {
   /**
@@ -57,17 +58,12 @@ export function useInfiniteScroll(
 
   const promise = ref<any>()
   const isLoading = computed(() => !!promise.value)
+
   // Document and Window cannot be observed by IntersectionObserver
   const observedElement = computed<HTMLElement | SVGElement | null | undefined>(() => {
-    const el = toValue(element)
-    if (el instanceof Window)
-      return window.document.documentElement
-
-    if (el instanceof Document)
-      return document.documentElement
-
-    return el
+    return resolveElement(toValue(element))
   })
+
   const isElementVisible = useElementVisibility(observedElement)
 
   function checkAndLoad() {

packages/core/useMouse/index.ts

@@ -44,7 +44,7 @@ export interface UseMouseOptions extends ConfigurableWindow, ConfigurableEventFi
   initialValue?: Position
 }
 
-const BuiltinExtractors: Record<UseMouseCoordType, UseMouseEventExtractor> = {
+const UseMouseBuiltinExtractors: Record<UseMouseCoordType, UseMouseEventExtractor> = {
   page: event => [event.pageX, event.pageY],
   client: event => [event.clientX, event.clientY],
   screen: event => [event.screenX, event.screenY],
@@ -78,7 +78,7 @@ export function useMouse(options: UseMouseOptions = {}) {
 
   const extractor = typeof type === 'function'
     ? type
-    : BuiltinExtractors[type]
+    : UseMouseBuiltinExtractors[type]
 
   const mouseHandler = (event: MouseEvent) => {
     const result = extractor(event)

packages/core/useScreenOrientation/index.ts

@@ -4,6 +4,20 @@ import { useSupported } from '../useSupported'
 import type { ConfigurableWindow } from '../_configurable'
 import { defaultWindow } from '../_configurable'
 
+// TypeScript dropped the inline types for these types in 5.2
+// We vendor them here to avoid the dependency
+
+export type OrientationType = 'portrait-primary' | 'portrait-secondary' | 'landscape-primary' | 'landscape-secondary'
+export type OrientationLockType = 'any' | 'natural' | 'landscape' | 'portrait' | 'portrait-primary' | 'portrait-secondary' | 'landscape-primary' | 'landscape-secondary'
+
+export interface ScreenOrientation extends EventTarget {
+  lock(orientation: OrientationLockType): Promise<void>
+  unlock(): void
+  readonly type: OrientationType
+  readonly angle: number
+  addEventListener(type: 'change', listener: (this: this, ev: Event) => any, useCapture?: boolean): void
+}
+
 /**
  * Reactive screen orientation
  *
@@ -16,7 +30,7 @@ export function useScreenOrientation(options: ConfigurableWindow = {}) {
 
   const isSupported = useSupported(() => window && 'screen' in window && 'orientation' in window.screen)
 
-  const screenOrientation = isSupported.value ? window!.screen.orientation : {} as ScreenOrientation
+  const screenOrientation = (isSupported.value ? window!.screen.orientation : {}) as ScreenOrientation
 
   const orientation = ref<OrientationType | undefined>(screenOrientation.type)
   const angle = ref(screenOrientation.angle || 0)
@@ -31,7 +45,6 @@ export function useScreenOrientation(options: ConfigurableWindow = {}) {
   const lockOrientation = (type: OrientationLockType) => {
     if (!isSupported.value)
       return Promise.reject(new Error('Not supported'))
-
     return screenOrientation.lock(type)
   }