Skip to content

Commit d6dcf8f

Browse files
TahulBobbieGoede
Tahul
and
BobbieGoede
authoredMar 10, 2025··
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]>
·
v3.0.3v3.0.0
1 parent 3c86bf8 commit d6dcf8f

18 files changed

+11572
-12842
lines changed
 

‎.github/workflows/ci.yml

+11-12
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,22 @@ on:
1010

1111
jobs:
1212
test:
13-
runs-on: ${{ matrix.os }}
14-
1513
strategy:
1614
matrix:
1715
os: [ubuntu-latest] # macos-latest, windows-latest
18-
node: [18]
16+
node: [20]
17+
18+
runs-on: ${{ matrix.os }}
1919

2020
steps:
2121
- name: Checkout
22-
uses: actions/checkout@master
22+
uses: actions/checkout@v4
2323
with:
2424
persist-credentials: false
2525
fetch-depth: 0
2626

27-
- name: Install PNPM
28-
uses: pnpm/action-setup@v2.0.1
29-
with:
30-
version: 8.7.0
27+
- name: Enable corepack
28+
run: npm i -fg corepack && corepack enable
3129

3230
- name: Use Node.js ${{ matrix.node }}
3331
uses: actions/setup-node@v2
@@ -57,15 +55,16 @@ jobs:
5755
nightly-release:
5856
needs:
5957
- test
60-
runs-on: ${{ matrix.os }}
6158
strategy:
6259
matrix:
63-
node: [18]
60+
node: [20]
6461
os: [ubuntu-latest]
62+
63+
runs-on: ${{ matrix.os }}
64+
6565
steps:
6666
- uses: actions/checkout@v4
67-
68-
- run: corepack enable
67+
- run: npm i -fg corepack && corepack enable
6968

7069
- uses: actions/setup-node@v4
7170
with:

‎.github/workflows/nightly-release.yml

+9-3
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,25 @@ on:
1515
jobs:
1616
release:
1717
if: ${{ !github.event.pull_request.draft && contains(github.event.pull_request.labels.*.name, 'cr-tracked') }}
18-
runs-on: ubuntu-latest
18+
19+
strategy:
20+
matrix:
21+
node: [20]
22+
os: [ubuntu-latest]
23+
24+
runs-on: ${{ matrix.os }}
1925

2026
steps:
2127
- name: Checkout code
2228
uses: actions/checkout@v4
2329

2430
- name: Enable corepack
25-
run: corepack enable
31+
run: npm i -fg corepack && corepack enable
2632

2733
- name: Setup node
2834
uses: actions/setup-node@v4
2935
with:
30-
node-version: 18.18
36+
node-version: ${{ matrix.node }}
3137
cache: pnpm
3238

3339
- name: Install dependencies

‎.github/workflows/release.yaml

+9-3
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,26 @@ on:
1010

1111
jobs:
1212
release:
13-
runs-on: ubuntu-latest
13+
strategy:
14+
matrix:
15+
node: [20]
16+
os: [ubuntu-latest]
17+
18+
runs-on: ${{ matrix.os }}
19+
1420
steps:
1521
- name: Checkout codes
1622
uses: actions/checkout@v4
1723
with:
1824
fetch-depth: 0
1925

2026
- name: Enable corepack
21-
run: corepack enable
27+
run: npm i -fg corepack && corepack enable
2228

2329
- name: Setup node.js
2430
uses: actions/setup-node@v4
2531
with:
26-
node-version: 18
32+
node-version: ${{ matrix.os }}
2733
cache: pnpm
2834

2935
- name: Install dependencies

‎.github/workflows/targets.yml

+6-9
Original file line numberDiff line numberDiff line change
@@ -15,25 +15,22 @@ jobs:
1515
strategy:
1616
matrix:
1717
os: [ubuntu-latest] # macos-latest, windows-latest
18-
node: [18]
18+
node: [20]
1919

2020
steps:
2121
- name: Checkout
22-
uses: actions/checkout@master
22+
uses: actions/checkout@v4
2323
with:
2424
persist-credentials: false
2525
fetch-depth: 0
2626

27-
- name: Install PNPM
28-
uses: pnpm/action-setup@v2.0.1
29-
with:
30-
version: 8.7.0
27+
- name: Enable corepack
28+
run: npm i -fg corepack && corepack enable
3129

32-
- name: Use Node.js ${{ matrix.node }}
33-
uses: actions/setup-node@v2
30+
- name: Setup node
31+
uses: actions/setup-node@v4
3432
with:
3533
node-version: ${{ matrix.node }}
36-
registry-url: https://registry.npmjs.org/
3734
cache: pnpm
3835

3936
- name: Install dependencies

‎.prettierrc

-6
This file was deleted.

‎build.config.ts

+1-11
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
import { defineBuildConfig } from 'unbuild'
22

33
export default defineBuildConfig({
4-
rollup: {
5-
emitCJS: true,
6-
},
7-
declaration: true,
4+
declaration: 'node16',
85
// warnings triggered by nuxt exports not being built - happens in separate script
96
failOnWarn: false,
107
entries: [
@@ -16,13 +13,6 @@ export default defineBuildConfig({
1613
format: 'esm',
1714
ext: 'mjs',
1815
},
19-
{
20-
input: 'src/index.ts',
21-
outDir: 'dist',
22-
name: 'index',
23-
format: 'cjs',
24-
ext: 'cjs',
25-
},
2616
],
2717
externals: [
2818
'@nuxt/kit',

‎package.json

+19-19
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,17 @@
22
"name": "@vueuse/motion",
33
"type": "module",
44
"version": "2.2.6",
5-
"packageManager": "pnpm@8.15.5+sha512.b051a32c7e695833b84926d3b29b8cca57254b589f0649d899c6e9d0edb670b91ec7e2a43459bae73759bb5ce619c3266f116bf931ce22d1ef1759a7e45aa96f",
5+
"packageManager": "pnpm@10.6.2",
66
"description": "🤹 Vue Composables putting your components in motion",
77
"author": "Yaël GUILLOUX <yael.guilloux@gmail.com>",
8+
"contributors": [
9+
{
10+
"name": "Yaël Guilloux (@Tahul)"
11+
},
12+
{
13+
"name": "Bobbie Goede (@BobbieGoede)"
14+
}
15+
],
816
"license": "MIT",
917
"homepage": "https://github.com/vueuse/motion#readme",
1018
"repository": "https://github.com/vueuse/motion",
@@ -21,23 +29,16 @@
2129
],
2230
"sideEffects": false,
2331
"exports": {
24-
".": {
25-
"import": "./dist/index.mjs",
26-
"require": "./dist/index.cjs"
27-
},
28-
"./nuxt": {
29-
"import": "./dist/nuxt/module.mjs",
30-
"require": "./dist/nuxt/module.cjs"
31-
}
32+
".": "./dist/index.mjs",
33+
"./nuxt": "./dist/nuxt/module.mjs"
3234
},
33-
"main": "./dist/index.cjs",
35+
"main": "./dist/index.mjs",
3436
"module": "./dist/index.mjs",
35-
"types": "./dist/index.d.ts",
37+
"types": "./dist/index.d.mts",
3638
"typesVersions": {
3739
"*": {
38-
"*": [
39-
"./dist/*",
40-
"./*"
40+
"nuxt": [
41+
"./dist/nuxt/module.d.mts"
4142
]
4243
}
4344
},
@@ -79,8 +80,8 @@
7980
"vue": ">=3.0.0"
8081
},
8182
"dependencies": {
82-
"@vueuse/core": "^10.10.0",
83-
"@vueuse/shared": "^10.10.0",
83+
"@vueuse/core": "^13.0.0",
84+
"@vueuse/shared": "^13.0.0",
8485
"csstype": "^3.1.3",
8586
"framesync": "^6.1.2",
8687
"popmotion": "^11.0.5",
@@ -106,9 +107,8 @@
106107
"lint-staged": "^15.2.5",
107108
"nuxt": "^3.13.0",
108109
"pkg-pr-new": "^0.0.20",
109-
"prettier": "^3.2.5",
110-
"typescript": "^5.4.5",
111-
"unbuild": "^2.0.0",
110+
"typescript": "^5.8.2",
111+
"unbuild": "^3.5.0",
112112
"vite": "5.2.12",
113113
"vitest": "^1.6.0",
114114
"vue": "^3.4.38",

‎playgrounds/vite-ssg/vite.config.ts

-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ export default defineConfig({
1010
],
1111
ssgOptions: {
1212
script: 'async',
13-
formatting: 'prettify',
1413
},
1514
resolve: {
1615
alias: [

‎pnpm-lock.yaml

+11,465-12,682
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎scripts/fix-nuxt-build.mjs

-8
This file was deleted.

‎src/directive/index.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,11 @@ export function directive<T extends string>(
3737
const motionOptions = { eventListeners: true, lifeCycleHooks: true, syncVariants: true, visibilityHooks: false }
3838

3939
// Create motion instance
40-
const motionInstance = useMotion(el, variantsRef, motionOptions)
40+
const motionInstance = useMotion(
41+
el,
42+
variantsRef as MotionVariants<T>,
43+
motionOptions,
44+
)
4145

4246
// Pass the motion instance via the local element
4347
// @ts-expect-error - we know that the element is a HTMLElement
@@ -54,6 +58,7 @@ export function directive<T extends string>(
5458
_node: VNode<any, (HTMLElement | SVGElement) & { motionInstance?: MotionInstance<string, MotionVariants<T>> }, Record<string, any>>,
5559
) => {
5660
// Visibility hooks
61+
// eslint-disable-next-line ts/no-unused-expressions
5762
el.motionInstance && registerVisibilityHooks(el.motionInstance)
5863
}
5964

‎src/useMotionControls.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export function useMotionControls<T extends string, V extends MotionVariants<T>>
1414
{ motionValues, push, stop }: MotionTransitions = useMotionTransitions(),
1515
): MotionControls<T, V> {
1616
// Variants as ref
17-
const _variants = unref(variants)
17+
const _variants = unref(variants) as V
1818

1919
// Is the current instance animated ref
2020
const isAnimating = ref(false)

‎src/useMotionVariants.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import type { MotionVariants, Variant } from './types'
88
*/
99
export function useMotionVariants<T extends string, V extends MotionVariants<T>>(variants: MaybeRef<V> = {} as MaybeRef<V>) {
1010
// Unref variants
11-
const _variants = unref(variants)
11+
const _variants = unref(variants) as V
1212

1313
// Current variant string
1414
const variant = ref() as Ref<keyof V>

‎src/useReducedMotion.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import type { Ref } from 'vue'
1+
import { type Ref, computed } from 'vue'
22
import { useMediaQuery } from '@vueuse/core'
33

44
/**
55
* Reactive prefers-reduced-motion.
66
*/
77
export function useReducedMotion(options: { window?: Window } = {}): Ref<boolean> {
8-
return useMediaQuery('(prefers-reduced-motion: reduce)', options)
8+
const reducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)', options)
9+
10+
return computed(() => reducedMotion.value)
911
}

‎src/utils/directive.ts

-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@ export function resolveVariants<T extends string>(node: VNode<any, HTMLElement |
4949
continue
5050
}
5151

52-
// @ts-expect-error - Fix errors later for typescript 5
5352
if (isObject(target[key])) {
5453
const prop = target[key]
5554
if (key === 'visible-once')

‎src/utils/transition.ts

+15-15
Original file line numberDiff line numberDiff line change
@@ -221,21 +221,21 @@ export function getAnimation(key: string, value: MotionValue, target: ResolvedVa
221221
return valueTransition.type === 'inertia' || valueTransition.type === 'decay'
222222
? inertia({ ...options, ...valueTransition })
223223
: animate({
224-
...getPopmotionAnimationOptions(valueTransition, options, key),
225-
onUpdate: (v: any) => {
226-
options.onUpdate(v)
227-
228-
if (valueTransition.onUpdate)
229-
valueTransition.onUpdate(v)
230-
},
231-
onComplete: () => {
232-
if (onComplete)
233-
onComplete()
234-
235-
if (complete)
236-
complete()
237-
},
238-
})
224+
...getPopmotionAnimationOptions(valueTransition, options, key),
225+
onUpdate: (v: any) => {
226+
options.onUpdate(v)
227+
228+
if (valueTransition.onUpdate)
229+
valueTransition.onUpdate(v)
230+
},
231+
onComplete: () => {
232+
if (onComplete)
233+
onComplete()
234+
235+
if (complete)
236+
complete()
237+
},
238+
})
239239
}
240240

241241
/**

‎tests/components.spec.ts

+3
Original file line numberDiff line numberDiff line change
@@ -190,6 +190,9 @@ describe('`<Motion>` component', async () => {
190190
const el = wrapper.element as HTMLDivElement
191191
await nextTick()
192192

193+
// Wait for enter duration
194+
await new Promise(res => setTimeout(res, 10))
195+
193196
// Renders enter
194197
expect(el.style.transform).toEqual('scale(2) translateZ(0px)')
195198

‎tsconfig.json

+22-67
Original file line numberDiff line numberDiff line change
@@ -3,73 +3,33 @@
33
"compilerOptions": {
44
"target": "ESNext",
55
"jsx": "preserve",
6+
"moduleDetection": "force",
67
"baseUrl": ".",
7-
"module": "ESNext",
8-
"moduleResolution": "Node",
8+
"module": "preserve",
9+
"moduleResolution": "bundler",
910
"paths": {
10-
"@vueuse/motion": [
11-
"./src/index"
12-
],
13-
"@vueuse/motion/nuxt": [
14-
"./src/nuxt/module"
15-
],
16-
"#app": [
17-
"./node_modules/nuxt/dist/app"
18-
],
19-
"#app/*": [
20-
"./node_modules/nuxt/dist/app/*"
21-
],
22-
"vue-demi": [
23-
"./node_modules/nuxt/dist/app/compat/vue-demi"
24-
],
25-
"#color-mode-options": [
26-
"./docs/.nuxt/color-mode-options"
27-
],
28-
"#nuxt-component-meta": [
29-
"./docs/.nuxt/component-meta.mjs"
30-
],
31-
"#nuxt-component-meta/types": [
32-
"./docs/.nuxt/component-meta.d.ts"
33-
],
34-
"#vue-router": [
35-
"./docs/.nuxt/vue-router"
36-
],
37-
"#imports": [
38-
"./docs/.nuxt/imports"
39-
],
40-
"#build": [
41-
"./docs/.nuxt"
42-
],
43-
"#build/*": [
44-
"./docs/.nuxt/*"
45-
],
11+
"@vueuse/motion": ["./src/index"],
12+
"@vueuse/motion/nuxt": ["./src/nuxt/module"],
13+
"#app": ["./node_modules/nuxt/dist/app"],
14+
"#app/*": ["./node_modules/nuxt/dist/app/*"],
15+
"#color-mode-options": ["./docs/.nuxt/color-mode-options"],
16+
"#nuxt-component-meta": ["./docs/.nuxt/component-meta.mjs"],
17+
"#nuxt-component-meta/types": ["./docs/.nuxt/component-meta.d.ts"],
18+
"#vue-router": ["./docs/.nuxt/vue-router"],
19+
"#imports": ["./docs/.nuxt/imports"],
20+
"#build": ["./docs/.nuxt"],
21+
"#build/*": ["./docs/.nuxt/*"],
4622
"@nuxt-themes/tokens/config": [
4723
"./node_modules/@nuxt-themes/tokens/dist/tokens.config.ts"
4824
],
49-
"#pinceau/utils": [
50-
"./docs/.nuxt/pinceau/utils.ts"
51-
],
52-
"#pinceau/theme": [
53-
"./docs/.nuxt/pinceau/index.ts"
54-
],
55-
"#pinceau/schema": [
56-
"./docs/.nuxt/pinceau/schema.ts"
57-
],
58-
"#pinceau/definitions": [
59-
"./docs/.nuxt/pinceau/definitions.ts"
60-
],
61-
"#components": [
62-
".nuxt/components"
63-
]
25+
"#pinceau/utils": ["./docs/.nuxt/pinceau/utils.ts"],
26+
"#pinceau/theme": ["./docs/.nuxt/pinceau/index.ts"],
27+
"#pinceau/schema": ["./docs/.nuxt/pinceau/schema.ts"],
28+
"#pinceau/definitions": ["./docs/.nuxt/pinceau/definitions.ts"],
29+
"#components": [".nuxt/components"]
6430
},
6531
"resolveJsonModule": true,
66-
"types": [
67-
"node",
68-
"csstype",
69-
"vitest",
70-
"vitest/globals",
71-
"vite/client"
72-
],
32+
"types": ["node", "csstype", "vitest", "vitest/globals", "vite/client"],
7333
"allowJs": true,
7434
"strict": true,
7535
"noEmit": true,
@@ -85,13 +45,8 @@
8545
"docs/**/*",
8646
"playgrounds/**/*"
8747
],
88-
"exclude": [
89-
"../dist",
90-
"../.output"
91-
],
48+
"exclude": ["../dist", "../.output"],
9249
"vueCompilerOptions": {
93-
"plugins": [
94-
"pinceau/volar"
95-
]
50+
"plugins": ["pinceau/volar"]
9651
}
9752
}

0 commit comments

Comments
 (0)
Please sign in to comment.