feat: update Vue package configuration and files

package.json

@@ -29,6 +29,7 @@
     "lint-staged": "^15.2.0",
     "simple-git-hooks": "^2.9.0",
     "typescript": "^5.3.3",
+    "unbuild": "^2.0.0",
     "unplugin-vue-macros": "^2.7.7",
     "vite": "^5.0.10",
     "vite-plugin-dts": "^3.7.0",

packages/vue/build.config.ts

@@ -0,0 +1,5 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  declaration: true,
+})

packages/vue/package.json

@@ -21,10 +21,10 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.es.js"
+      "import": "./dist/index.mjs"
     }
   },
-  "main": "./dist/index.es.js",
+  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
     "dist"
@@ -33,22 +33,18 @@
     "node": ">=18"
   },
   "scripts": {
-    "build": "vite build --mode production",
-    "build:watch": "vite build --watch",
-    "dev": "vite",
-    "play": "pnpm --filter playground dev",
-    "prepublishOnly": "pnpm run build",
-    "release": "pnpm build && bumpp --commit --push --tag && pnpm publish",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "test": "vitest",
-    "test:watch": "vitest --watch",
-    "coverage": "vitest run --coverage",
-    "postinstall": "npx simple-git-hooks"
+    "build": "unbuild",
+    "dev": "unbuild --stub",
+    "playground": "pnpm --filter playground-vue dev",
+    "release": "pnpm build && pnpm bumpp --commit='version(alert-dialog): release %s' --no-tag && pnpm publish",
+    "clean": "rimraf ./dist && rimraf ./node_modules"
   },
   "peerDependencies": {
     "vue": ">=3.3.0"
   },
+  "dependencies": {
+    "@motionone/dom": "^10.16.4"
+  },
   "devDependencies": {
     "@antfu/eslint-config": "2.6.1",
     "@types/node": "^20.10.6",

packages/vue/playground/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "playground",
+  "name": "playground-vue",
   "type": "module",
   "version": "0.0.0",
   "private": true,

packages/vue/playground/src/App.vue

@@ -1,10 +1,25 @@
 <script setup lang="ts">
-// TODO: change to your package name
-import { Button } from '@oku-ui/motion'
+import { Motion } from '@oku-ui/motion'
 </script>
 
 <template>
-  <div>
-    <Button>Test button</Button>
-  </div>
+  <Motion
+    :animate="{ rotate: 1000, backgroundColor: 'var(--yellow)' }"
+    :transition="{
+      duration: 1,
+      rotate: { duration: 2 },
+    }"
+  />
 </template>
+
+<style>
+:root {
+  --yellow: #000
+}
+
+div {
+  width: 100px;
+  height: 100px;
+  border-radius: 10px;
+}
+</style>

packages/vue/src/component/motion.ts

@@ -0,0 +1,129 @@
+import type {
+  CSSProperties,
+  PropType,
+} from 'vue'
+import {
+  defineComponent,
+  h,
+  inject,
+  onMounted,
+  onUpdated,
+  provide,
+  ref,
+} from 'vue'
+import type {
+  AnimationOptionsWithOverrides,
+  InViewOptions,
+  VariantDefinition,
+} from '@motionone/dom'
+import {
+  createMotionState,
+  createStyles,
+  style,
+} from '@motionone/dom'
+import type { PresenceState } from '../context'
+import { contextId, presenceId } from '../context'
+
+function objectType<T>() {
+  return {
+    type: Object as PropType<T>,
+  }
+}
+
+export const Motion = defineComponent({
+  name: 'Motion',
+  inheritAttrs: true,
+  props: {
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    initial: {
+      type: [Object, Boolean] as PropType<VariantDefinition | boolean>,
+    },
+    animate: objectType<VariantDefinition>(),
+    inView: objectType<VariantDefinition>(),
+    hover: objectType<VariantDefinition>(),
+    press: objectType<VariantDefinition>(),
+    exit: objectType<VariantDefinition>(),
+    inViewOptions: objectType<InViewOptions>(),
+    transition: objectType<AnimationOptionsWithOverrides>(),
+    style: objectType<CSSProperties>(),
+  },
+  setup(props) {
+    const root = ref<Element | null>(null)
+    const parentState = inject(contextId, undefined)
+    const presenceState = inject(presenceId, undefined) as
+      | PresenceState
+      | undefined
+
+    const state = createMotionState(
+      {
+        ...props,
+        initial:
+          presenceState?.initial === false
+            ? presenceState.initial
+            : props.initial === true
+              ? undefined
+              : props.initial,
+      },
+      parentState,
+    )
+
+    provide(contextId, state)
+
+    onMounted(() => {
+      const unmount = state.mount(root.value!)
+      state.update({
+        ...props,
+        initial: props.initial === true ? undefined : props.initial,
+      })
+
+      return unmount
+    })
+
+    let manuallyAppliedMotionStyles = false
+    onUpdated(() => {
+      /**
+       * Vue reapplies all styles every render, rather than diffing and
+       * only reapplying the ones that change. This means that initially
+       * calculated motion styles also get reapplied every render, leading
+       * to incorrect animation origins.
+       *
+       * To prevent this, once an element is mounted we hand over these
+       * styles to Motion. This will currently still lead to a jump if interrupting
+       * transforms in browsers where the number polyfill is used.
+       */
+      if (!manuallyAppliedMotionStyles && root.value) {
+        manuallyAppliedMotionStyles = true
+
+        const styles = createStyles(state.getTarget())
+        for (const key in styles)
+          style.set(root.value, key, styles[key])
+      }
+
+      state.update({
+        ...props,
+        initial: props.initial === true ? undefined : props.initial,
+      })
+    })
+
+    return {
+      state,
+      root,
+      initialStyles: createStyles(state.getTarget()),
+    }
+  },
+  render() {
+    return h(
+      this.tag,
+      {
+        ref: 'root',
+        style: this.state.isMounted()
+          ? this.style
+          : { ...this.style, ...this.initialStyles },
+      },
+      this.$slots.default?.(),
+    )
+  },
+})