Add dynamic keys on useMotion directives when calling apply() and other methods (#126)

Author: alex-eliot

src/components/Motion.ts

@@ -20,12 +20,12 @@ export default defineComponent({
     },
     // Instance
     instance: {
-      type: Object as PropType<MotionInstance>,
+      type: Object as PropType<MotionInstance<string, MotionVariants<string>>>,
       required: false,
     },
     // Variants
     variants: {
-      type: Object as PropType<MotionVariants>,
+      type: Object as PropType<MotionVariants<string>>,
       required: false,
     },
     // Initial variant
@@ -74,7 +74,7 @@ export default defineComponent({
     const slots = useSlots()
 
     // Instance map from component content
-    const instances = reactive<{ [key: number]: MotionInstance<any> }>({})
+    const instances = reactive<{ [key: number]: MotionInstance<string, MotionVariants<string>> }>({})
 
     // Return empty component is `is` is absent
     if (!props.is && !slots.default) return () => h('div', {})
@@ -128,7 +128,7 @@ export default defineComponent({
 
     // Replay animations on component update Vue
     if (process?.env?.NODE_ENV === 'development' || (process as any)?.dev) {
-      const replayAnimation = (instance: MotionInstance<any>) => {
+      const replayAnimation = (instance: MotionInstance<any, any>) => {
         if (instance.variants?.initial) instance.set('initial')
         setTimeout(() => {
           if (instance.variants?.enter) instance.apply('enter')

src/directive/index.ts

@@ -1,4 +1,4 @@
-import type { Directive, DirectiveBinding, VNode } from 'vue'
+import type { Directive, DirectiveBinding, Ref, VNode } from 'vue'
 import defu from 'defu'
 import { ref, unref } from 'vue'
 import { motionState } from '../features/state'
@@ -7,7 +7,7 @@ import { useMotion } from '../useMotion'
 import { resolveVariants } from '../utils/directive'
 import { variantToStyle } from '../utils/transform'
 
-export function directive(variants?: MotionVariants): Directive<HTMLElement | SVGElement> {
+export function directive<T extends string>(variants: MotionVariants<T> = {}): Directive<HTMLElement | SVGElement> {
   const register = (el: HTMLElement | SVGElement, binding: DirectiveBinding, node: VNode<any, HTMLElement | SVGElement, Record<string, any>>) => {
     // Get instance key if possible (binding value or element key in case of v-for's)
     const key = (binding.value && typeof binding.value === 'string' ? binding.value : node.key) as string
@@ -16,13 +16,13 @@ export function directive(variants?: MotionVariants): Directive<HTMLElement | SV
     if (key && motionState[key]) motionState[key].stop()
 
     // Initialize variants with argument
-    const variantsRef = ref<MotionVariants>(variants || {})
+    const variantsRef = ref(variants) as Ref<MotionVariants<T>>
 
     // Set variants from v-motion binding
     if (typeof binding.value === 'object') variantsRef.value = binding.value
 
     // Resolve variants from node props
-    resolveVariants(node, variantsRef)
+    resolveVariants<T>(node, variantsRef)
 
     // Create motion instance
     const motionInstance = useMotion(el, variantsRef)

src/features/eventListeners.ts

@@ -3,7 +3,7 @@ import { computed, ref, unref, watch } from 'vue'
 import type { MotionInstance, MotionVariants } from '../types'
 import { supportsMouseEvents, supportsPointerEvents, supportsTouchEvents } from '../utils/events'
 
-export function registerEventListeners<T extends MotionVariants>({ target, state, variants, apply }: MotionInstance<T>) {
+export function registerEventListeners<T extends string, V extends MotionVariants<T>>({ target, state, variants, apply }: MotionInstance<T, V>) {
   const _variants = unref(variants)
 
   // State
@@ -37,6 +37,7 @@ export function registerEventListeners<T extends MotionVariants>({ target, state
     if (focused.value && _variants.focused) Object.assign(result, _variants.focused)
 
     for (const key in result) {
+      // @ts-expect-error - Fix errors later for typescript 5
       if (!mutableKeys.value.includes(key)) delete result[key]
     }
 

src/features/lifeCycleHooks.ts

@@ -1,7 +1,7 @@
 import { unref, watch } from 'vue'
 import type { MotionInstance, MotionVariants } from '../types'
 
-export function registerLifeCycleHooks<T extends MotionVariants>({ set, target, variants, variant }: MotionInstance<T>) {
+export function registerLifeCycleHooks<T extends string, V extends MotionVariants<T>>({ set, target, variants, variant }: MotionInstance<T, V>) {
   const _variants = unref(variants)
 
   watch(

src/features/state.ts

@@ -1,3 +1,3 @@
-import type { MotionInstanceBindings } from '../types'
+import type { MotionInstanceBindings, MotionVariants } from '../types'
 
-export const motionState: MotionInstanceBindings<any> = {}
+export const motionState: MotionInstanceBindings<string, MotionVariants<never>> = {}

src/features/syncVariants.ts

@@ -1,7 +1,7 @@
 import { watch } from 'vue'
 import type { MotionInstance, MotionVariants } from '../types'
 
-export function registerVariantsSync<T extends MotionVariants>({ state, apply }: MotionInstance<T>) {
+export function registerVariantsSync<T extends string, V extends MotionVariants<T>>({ state, apply }: MotionInstance<T, V>) {
   // Watch for variant changes and apply the new one
   watch(
     state,

src/features/visibilityHooks.ts

@@ -2,7 +2,7 @@ import { useIntersectionObserver } from '@vueuse/core'
 import { unref } from 'vue'
 import type { MotionInstance, MotionVariants } from '../types'
 
-export function registerVisibilityHooks<T extends MotionVariants>({ target, variants, variant }: MotionInstance<T>) {
+export function registerVisibilityHooks<T extends string, V extends MotionVariants<T>>({ target, variants, variant }: MotionInstance<T, V>) {
   const _variants = unref(variants)
 
   // Bind intersection observer on target

src/nuxt/module.ts

@@ -2,7 +2,7 @@ import { defu } from 'defu'
 import { addImportsDir, addPlugin, createResolver, defineNuxtModule } from '@nuxt/kit'
 import type { ModuleOptions as MotionModuleOpts } from '../types'
 
-export interface ModuleOptions extends MotionModuleOpts {}
+export interface ModuleOptions extends MotionModuleOpts<string> {}
 
 export default defineNuxtModule<ModuleOptions>({
   meta: {

src/plugin/index.ts

@@ -6,7 +6,7 @@ import type { MotionPluginOptions, MotionVariants } from '../types'
 import { slugify } from '../utils/slugify'
 
 export const MotionPlugin: Plugin = {
-  install(app, options: MotionPluginOptions) {
+  install(app, options: MotionPluginOptions<string>) {
     // Register default `v-motion` directive
     app.directive('motion', directive())
 
@@ -30,7 +30,7 @@ export const MotionPlugin: Plugin = {
       // Loop on options, create a custom directive for each definition
       for (const key in options.directives) {
         // Get directive variants
-        const variants = options.directives[key] as MotionVariants
+        const variants = options.directives[key] as MotionVariants<any>
 
         // Development warning, showing definitions missing `initial` key
         if (!variants.initial && __DEV__) {

src/presets/fade.ts

@@ -1,6 +1,6 @@
 import type { MotionVariants } from '../types'
 
-export const fade: MotionVariants = {
+export const fade: MotionVariants<never> = {
   initial: {
     opacity: 0,
   },
@@ -9,7 +9,7 @@ export const fade: MotionVariants = {
   },
 }
 
-export const fadeVisible: MotionVariants = {
+export const fadeVisible: MotionVariants<never> = {
   initial: {
     opacity: 0,
   },
@@ -18,7 +18,7 @@ export const fadeVisible: MotionVariants = {
   },
 }
 
-export const fadeVisibleOnce: MotionVariants = {
+export const fadeVisibleOnce: MotionVariants<never> = {
   initial: {
     opacity: 0,
   },