feat!: drop CJS and use VueUse v13 (#254)

* fix drop unused ts-expect-error

* feat add type hint in index

* feat update vueuse useMediaQuery usage

* feat useMotionControls.ts ; add typehint

* feat useMotionVariants.ts ; add type hint

* feat drop prettier

* feat drop cjs in build.config & package.json

* feat global

* fix: linting errors

* chore(deps): update `vueuse` dependencies

* ci: fix corepack

* chore: remove unused script

* build: configure unbuild declaration node16

* fix: package exports and types

* fix: update typescript and unbuild and fix build

* fix: linting errors

* fix: disable ssg prettify to prevent prettier failure

* fix: add back main entry

* test: wait for duration of variant transition

* chore: update pnpm and node versions

* chore: add contributors to package

---------

Co-authored-by: Bobbie Goede <[email protected]>

Author: Tahul

.github/workflows/ci.yml

@@ -10,24 +10,22 @@ on:
 
 jobs:
   test:
-    runs-on: ${{ matrix.os }}
-
     strategy:
       matrix:
         os: [ubuntu-latest] # macos-latest, windows-latest
-        node: [18]
+        node: [20]
+
+    runs-on: ${{ matrix.os }}
 
     steps:
       - name: Checkout
-        uses: actions/checkout@master
+        uses: actions/checkout@v4
         with:
           persist-credentials: false
           fetch-depth: 0
 
-      - name: Install PNPM
-        uses: pnpm/[email protected]
-        with:
-          version: 8.7.0
+      - name: Enable corepack
+        run: npm i -fg corepack && corepack enable
 
       - name: Use Node.js ${{ matrix.node }}
         uses: actions/setup-node@v2
@@ -57,15 +55,16 @@ jobs:
   nightly-release:
     needs:
       - test
-    runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node: [18]
+        node: [20]
         os: [ubuntu-latest]
+
+    runs-on: ${{ matrix.os }}
+
     steps:
       - uses: actions/checkout@v4
-
-      - run: corepack enable
+      - run: npm i -fg corepack && corepack enable
 
       - uses: actions/setup-node@v4
         with:

.github/workflows/nightly-release.yml

@@ -15,19 +15,25 @@ on:
 jobs:
   release:
     if: ${{ !github.event.pull_request.draft && contains(github.event.pull_request.labels.*.name, 'cr-tracked') }}
-    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node: [20]
+        os: [ubuntu-latest]
+
+    runs-on: ${{ matrix.os }}
 
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
 
       - name: Enable corepack
-        run: corepack enable
+        run: npm i -fg corepack && corepack enable
 
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 18.18
+          node-version: ${{ matrix.node }}
           cache: pnpm
 
       - name: Install dependencies

.github/workflows/release.yaml

@@ -10,20 +10,26 @@ on:
 
 jobs:
   release:
-    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: [20]
+        os: [ubuntu-latest]
+
+    runs-on: ${{ matrix.os }}
+
     steps:
       - name: Checkout codes
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
       - name: Enable corepack
-        run: corepack enable
+        run: npm i -fg corepack && corepack enable
 
       - name: Setup node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: ${{ matrix.os }}
           cache: pnpm
 
       - name: Install dependencies

.github/workflows/targets.yml

@@ -15,25 +15,22 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest] # macos-latest, windows-latest
-        node: [18]
+        node: [20]
 
     steps:
       - name: Checkout
-        uses: actions/checkout@master
+        uses: actions/checkout@v4
         with:
           persist-credentials: false
           fetch-depth: 0
 
-      - name: Install PNPM
-        uses: pnpm/[email protected]
-        with:
-          version: 8.7.0
+      - name: Enable corepack
+        run: npm i -fg corepack && corepack enable
 
-      - name: Use Node.js ${{ matrix.node }}
-        uses: actions/setup-node@v2
+      - name: Setup node
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
-          registry-url: https://registry.npmjs.org/
           cache: pnpm
 
       - name: Install dependencies

.prettierrc

@@ -1,10 +1,7 @@
 import { defineBuildConfig } from 'unbuild'
 
 export default defineBuildConfig({
-  rollup: {
-    emitCJS: true,
-  },
-  declaration: true,
+  declaration: 'node16',
   // warnings triggered by nuxt exports not being built - happens in separate script
   failOnWarn: false,
   entries: [
@@ -16,13 +13,6 @@ export default defineBuildConfig({
       format: 'esm',
       ext: 'mjs',
     },
-    {
-      input: 'src/index.ts',
-      outDir: 'dist',
-      name: 'index',
-      format: 'cjs',
-      ext: 'cjs',
-    },
   ],
   externals: [
     '@nuxt/kit',

build.config.ts

@@ -2,9 +2,17 @@
   "name": "@vueuse/motion",
   "type": "module",
   "version": "2.2.6",
-  "packageManager": "pnpm@8.15.5+sha512.b051a32c7e695833b84926d3b29b8cca57254b589f0649d899c6e9d0edb670b91ec7e2a43459bae73759bb5ce619c3266f116bf931ce22d1ef1759a7e45aa96f",
+  "packageManager": "pnpm@10.6.2",
   "description": "🤹 Vue Composables putting your components in motion",
   "author": "Yaël GUILLOUX <[email protected]>",
+  "contributors": [
+    {
+      "name": "Yaël Guilloux (@Tahul)"
+    },
+    {
+      "name": "Bobbie Goede (@BobbieGoede)"
+    }
+  ],
   "license": "MIT",
   "homepage": "https://github.com/vueuse/motion#readme",
   "repository": "https://github.com/vueuse/motion",
@@ -21,23 +29,16 @@
   ],
   "sideEffects": false,
   "exports": {
-    ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
-    },
-    "./nuxt": {
-      "import": "./dist/nuxt/module.mjs",
-      "require": "./dist/nuxt/module.cjs"
-    }
+    ".": "./dist/index.mjs",
+    "./nuxt": "./dist/nuxt/module.mjs"
   },
-  "main": "./dist/index.cjs",
+  "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/index.d.mts",
   "typesVersions": {
     "*": {
-      "*": [
-        "./dist/*",
-        "./*"
+      "nuxt": [
+        "./dist/nuxt/module.d.mts"
       ]
     }
   },
@@ -79,8 +80,8 @@
     "vue": ">=3.0.0"
   },
   "dependencies": {
-    "@vueuse/core": "^10.10.0",
-    "@vueuse/shared": "^10.10.0",
+    "@vueuse/core": "^13.0.0",
+    "@vueuse/shared": "^13.0.0",
     "csstype": "^3.1.3",
     "framesync": "^6.1.2",
     "popmotion": "^11.0.5",
@@ -106,9 +107,8 @@
     "lint-staged": "^15.2.5",
     "nuxt": "^3.13.0",
     "pkg-pr-new": "^0.0.20",
-    "prettier": "^3.2.5",
-    "typescript": "^5.4.5",
-    "unbuild": "^2.0.0",
+    "typescript": "^5.8.2",
+    "unbuild": "^3.5.0",
     "vite": "5.2.12",
     "vitest": "^1.6.0",
     "vue": "^3.4.38",

package.json

@@ -10,7 +10,6 @@ export default defineConfig({
   ],
   ssgOptions: {
     script: 'async',
-    formatting: 'prettify',
   },
   resolve: {
     alias: [