chore: add chokidar dependency and update build configuration

package.json

@@ -24,6 +24,7 @@
     "@vue-macros/volar": "^0.18.8",
     "@vue/test-utils": "^2.4.3",
     "bumpp": "^9.2.1",
+    "chokidar": "^3.5.3",
     "eslint": "^8.56.0",
     "jsdom": "^23.0.1",
     "lint-staged": "^15.2.0",

packages/nuxt/package.json

@@ -21,9 +21,9 @@
   ],
   "exports": {
     ".": {
-      "types": "./dist/types.d.ts",
-      "import": "./dist/module.mjs",
-      "require": "./dist/module.cjs"
+      "types": "./dist/types.ts",
+      "import": "./dist/module.ts",
+      "require": "./dist/module.ts"
     },
     "./utils": "./dist/utils.mjs"
   },

packages/vue/build.config.ts

@@ -6,7 +6,7 @@ export default defineBuildConfig({
     { builder: 'mkdist', input: './src', pattern: ['**/*.vue'], loaders: ['vue'] },
     { builder: 'mkdist', input: './src', pattern: ['**/*.ts'], format: 'esm', loaders: ['js'] },
   ],
-  clean: true,
+  clean: false,
   declaration: true,
   externals: ['vue'],
 })

packages/vue/package.json

@@ -34,7 +34,8 @@
   },
   "scripts": {
     "build": "unbuild",
-    "dev": "unbuild --stub",
+    "dev": "esno watch.ts",
+    "dev:stub": "unbuild --stub",
     "playground": "pnpm --filter playground-vue dev",
     "clean": "rimraf ./dist && rimraf ./node_modules",
     "release": "pnpm build && pnpm bumpp --commit='version(vue): release %s' --no-tag && pnpm publish"

packages/vue/playground/src/App.vue

@@ -1,18 +1,53 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import { Motion } from '@oku-ui/motion'
+
+const rotate = ref(10)
 </script>
 
 <template>
   <Motion
-    :animate="{ rotate: 1000, backgroundColor: 'var(--yellow)' }"
-    :transition="{
+    :animate="{
+      rotate: `${rotate}deg`,
+      backgroundColor: 'var(--yellow)',
+    }" :transition="{
       duration: 1,
       rotate: { duration: 2 },
     }"
   />
+
+  <div
+    :style="{
+      marginTop: '50px',
+    }"
+  >
+    <button @click="rotate += 20">
+      Rotate
+    </button>
+  </div>
+
+  <Motion
+    :initial="{ opacity: 0, x: -50 }" :in-view="{
+      opacity: 1,
+      x: 0,
+      transition: {
+        delay: 0.5,
+        easing: [0.17, 0.55, 0.55, 1],
+        duration: 0.9,
+      },
+    }"
+  >
+    <p>
+      Lorem Ipsum
+    </p>
+  </Motion>
 </template>
 
 <style>
+body {
+  padding: 100px;
+}
+
 :root {
   --yellow: #000
 }

packages/vue/watch.ts

@@ -0,0 +1,9 @@
+import { execSync } from 'node:child_process'
+import chokidar from 'chokidar'
+
+execSync('pnpm build', { stdio: 'inherit' })
+
+chokidar.watch('src/**/*').on('change', () => {
+  console.warn('file changed')
+  execSync('pnpm build', { stdio: 'inherit' })
+})