Merge pull request #181 from motiondivision/fix/motion-config

fix: rename reduceMotion to reducedMotion and update related types

Author: rick-hup

packages/motion/src/components/__tests__/motion-config.test.tsx

@@ -0,0 +1,24 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { motionValue } from 'framer-motion/dom'
+import { defineComponent, nextTick } from 'vue'
+import MotionConfig from '@/components/motion-config/MotionConfig.vue'
+import { Motion } from '@/components/motion'
+
+describe('reducedMotion', () => {
+  it('reducedMotion always', async () => {
+    const scale = motionValue(1)
+    const wrapper = mount(defineComponent({
+      setup() {
+        return () => (
+          <MotionConfig reducedMotion="always">
+            <Motion animate={{ scale: 0.5 }} style={{ scale }} />
+          </MotionConfig>
+        )
+      },
+    }))
+    await nextTick()
+    await new Promise(resolve => setTimeout(resolve, 20))
+    expect(scale.get()).toBe(0.5)
+  })
+})

packages/motion/src/components/motion-config/MotionConfig.vue

@@ -2,20 +2,28 @@
 import { computed } from 'vue'
 import type { MotionConfigProps } from './types'
 import { defaultConfig, provideMotionConfig, useMotionConfig } from './context'
+import { isDef } from '@vueuse/core'
+import { warning } from 'hey-listen'
 
 defineOptions({
   name: 'MotionConfig',
   inheritAttrs: false,
 })
 
-const props = withDefaults(defineProps<MotionConfigProps>(), {
-  reduceMotion: defaultConfig.reduceMotion,
+const props = withDefaults(defineProps<MotionConfigProps & { reducedMotion?: 'user' | 'never' | 'always' }>(), {
+  reducedMotion: ({ reduceMotion }) => {
+    if (isDef(reduceMotion)) {
+      warning(false, '`reduceMotion` is deprecated. Use `reducedMotion` instead.')
+      return reduceMotion
+    }
+    return defaultConfig.reducedMotion
+  },
 })
 
 const parentConfig = useMotionConfig()
 const config = computed(() => ({
   transition: props.transition ?? parentConfig.value.transition,
-  reduceMotion: props.reduceMotion ?? parentConfig.value.reduceMotion,
+  reducedMotion: props.reducedMotion ?? parentConfig.value.reducedMotion,
   nonce: props.nonce ?? parentConfig.value.nonce,
   inViewOptions: props.inViewOptions ?? parentConfig.value.inViewOptions,
 }))

packages/motion/src/components/motion-config/context.ts

@@ -6,7 +6,7 @@ import { type ComputedRef, computed } from 'vue'
  * Default motion configuration
  */
 export const defaultConfig: MotionConfigState = {
-  reduceMotion: 'never',
+  reducedMotion: 'never',
   transition: undefined,
   nonce: undefined,
 }

packages/motion/src/components/motion-config/types.ts

@@ -6,8 +6,12 @@ import type { Options } from '@/types'
 export interface MotionConfigState {
   /** Default transition settings for animations */
   transition?: Options['transition']
-  /** Controls motion reduction based on user preference or explicit setting */
+  /**
+   * @deprecated Use `reducedMotion` instead
+   */
   reduceMotion?: 'user' | 'never' | 'always'
+  /** Controls motion reduction based on user preference or explicit setting */
+  reducedMotion?: 'user' | 'never' | 'always'
   /** Custom nonce for CSP compliance with inline styles */
   nonce?: string
   /** Options for the inView prop */

packages/motion/src/components/motion/types.ts

@@ -1,8 +1,7 @@
-import type { Feature } from '@/features'
 import type { AsTag, ComponentProps, Options, SVGAttributesWithMotionValues, SetMotionValueType } from '@/types'
 import type { IntrinsicElementAttributes } from 'vue'
 
-export interface MotionProps<T extends AsTag = 'div', K = unknown> extends Options<K> {
+export interface MotionProps<T extends AsTag = 'div', K = unknown> extends Omit<Options<K>, 'motionConfig' | 'layoutGroup'> {
   as?: T
   asChild?: boolean
   hover?: Options['hover']
@@ -15,7 +14,7 @@ export interface MotionProps<T extends AsTag = 'div', K = unknown> extends Optio
   whileInView?: Options['whileInView']
   whileFocus?: Options['whileFocus']
   forwardMotionProps?: boolean
-  features?: Feature[]
+  // features?: Feature[]
   ignoreStrict?: boolean
 }
 type __VLS_PrettifyLocal<T> = {

packages/motion/src/components/motion/use-motion-state.ts

@@ -33,6 +33,7 @@ export function useMotionState(props: MotionProps) {
    */
   if (
     process.env.NODE_ENV !== 'production'
+    // @ts-expect-error
     && props.features?.length
     && lazyMotionContext.strict
   ) {

packages/motion/src/components/motion/utils.ts

@@ -111,7 +111,7 @@ export function createMotionComponent(
     },
     name: name ? `motion.${name}` : 'Motion',
     setup(props, { slots }) {
-      const { getProps, getAttrs, state } = useMotionState(props as MotionProps)
+      const { getProps, getAttrs, state } = useMotionState(props as any)
       /**
        * Vue reapplies all styles every render, include style properties and calculated initially styles get reapplied every render.
        * To prevent this, reapply the current motion state styles in vnode updated lifecycle
@@ -159,7 +159,7 @@ export function createMotionComponent(
 }
 
 type MotionNameSpace = {
-  [K in keyof IntrinsicElementAttributes]: DefineComponent<Omit<MotionProps<K, unknown>, 'as' | 'asChild'> & MotionHTMLAttributes<K>, 'create'>
+  [K in keyof IntrinsicElementAttributes]: DefineComponent<Omit<MotionProps<K, unknown>, 'as' | 'asChild' | 'motionConfig' | 'layoutGroup'> & MotionHTMLAttributes<K>, 'create'>
 } & MotionCompProps
 
 export function createMotionComponentWithFeatures(

packages/motion/src/features/animation/animation.ts

@@ -12,6 +12,7 @@ import { isDef } from '@vueuse/core'
 import type { VisualElement } from 'framer-motion'
 import { animate, noop } from 'framer-motion/dom'
 import { createVisualElement } from '@/state/create-visual-element'
+import { prefersReducedMotion } from 'framer-motion/dist/es/utils/reduced-motion/state.mjs'
 
 const STATE_TYPES = ['initial', 'animate', 'whileInView', 'whileHover', 'whilePress', 'whileDrag', 'whileFocus', 'exit'] as const
 export type StateType = typeof STATE_TYPES[number]
@@ -40,8 +41,9 @@ export class AnimationFeature extends Feature {
           ...this.state.baseTarget,
         },
       },
-      reducedMotionConfig: this.state.options.motionConfig.reduceMotion,
+      reducedMotionConfig: this.state.options.motionConfig.reducedMotion,
     })
+
     this.state.animateUpdates = this.animateUpdates
     if (this.state.isMounted())
       this.state.startAnimation()
@@ -62,6 +64,10 @@ export class AnimationFeature extends Feature {
     isFallback,
     isExit,
   } = {}) => {
+    // check if the user has reduced motion
+    const { reducedMotion } = this.state.options.motionConfig
+    this.state.visualElement.shouldReduceMotion = reducedMotion === 'always' || (reducedMotion === 'user' && !!prefersReducedMotion.current)
+
     const prevTarget = this.state.target
     this.state.target = { ...this.state.baseTarget }
     let animationOptions: $Transition = {}

packages/motion/src/framer-motion.d.ts

@@ -67,3 +67,8 @@ declare module 'framer-motion/dist/es/render/utils/setters.mjs' {
 
   export const setTarget: (visualElement: VisualElement, definition: any) => void
 }
+
+declare module 'framer-motion/dist/es/utils/reduced-motion/state.mjs' {
+  export const prefersReducedMotion: { current: boolean }
+  export const hasReducedMotionListener: { current: boolean }
+}

packages/motion/src/state/motion-state.ts

@@ -119,7 +119,6 @@ export class MotionState {
     this.visualElement?.update({
       ...this.options as any,
       whileTap: this.options.whilePress,
-      reducedMotionConfig: this.options.motionConfig.reduceMotion,
     }, {
       isPresent: !doneCallbacks.has(this.element),
     } as any)