fix: reactive loss in defineWidget

packages/core/src/widget.ts

@@ -18,30 +18,30 @@ export interface Widget {
 
 export type ReturnWidget<T extends Widget> = ReturnType<typeof defineWidget<T>>
 
-export function defineWidget<T extends Widget>(props: T, methods?: Record<string, () => any>, root?: SVGElement): Reactive<T> {
+export function defineWidget<T extends Widget>(props: Reactive<T>, methods?: Record<string, () => any>, root?: SVGElement): Reactive<T> {
   let widget = inject<T>(props.wid as string)
   const widgets = inject('child-widgets') as T[]
 
   // const children = reactive([])
   // provide('child-widgets', children)
 
   widget ??= {} as T
-  Object.assign(widget, {
-    ...props,
+  Object.assign(props, {
+    ...widget,
     ...methods
   })
 
   onMounted(() => {
-    widget.element = root ?? getCurrentInstance()!.proxy!.$el.parentElement
-    widget.range = widget.element!.getBoundingClientRect()
+    props.element = root ?? getCurrentInstance()!.proxy!.$el.parentElement
+    props.range = widget.element!.getBoundingClientRect()
     const slots = useSlots()
-    widget.slots = slots.default ? slots.default().map(v => v.children).join('') : ''
+    props.slots = slots.default ? slots.default().map(v => v.children).join('') : ''
     if (widgets) {
       widgets.push(widget)
     }
   })
 
-  return reactive(widget)
+  return props
 }
 
 export function useWidget<T extends Widget>(wid: string) {

packages/import/test/test.json

@@ -1,17 +1,54 @@
 {
-  "$schema": "../schema.json",
-  "name": "test",
-  "version": "1.0.0",
-  "description": "A test package",
+  "version": "0.5.0",
+  "name": "Rotating Square",
+  "description": "A square rotating 360 degrees",
   "widgets": [
     {
-      "type": "Arc",
+      "type": "Rect",
       "props": {
-        "radius": {
+        "wid": {
+          "type": "common",
+          "value": "rotatingSquare"
+        },
+        "x": {
+          "type": "common",
+          "value": 200
+        },
+        "y": {
+          "type": "common",
+          "value": 200
+        },
+        "width": {
+          "type": "common",
+          "value": 100
+        },
+        "height": {
           "type": "common",
           "value": 100
+        },
+        "fill-color": {
+          "type": "common",
+          "value": "rgba(0, 150, 255, 0.7)"
+        },
+        "border-color": {
+          "type": "common",
+          "value": "rgba(0, 100, 200, 1)"
+        },
+        "border-width": {
+          "type": "common",
+          "value": 3
+        }
+      },
+      "animations": [
+        {
+          "type": "preset",
+          "preset": "rotate",
+          "duration": 3000,
+          "props": {
+            "rotation": 360
+          }
         }
-      }
+      ]
     }
   ]
 }

packages/import/test/test.mjs

@@ -6,3 +6,4 @@ console.log(json)
 
 const parser = createParser(json)
 console.log(parser.parseTemplate())
+console.log(parser.parseScript().setup.toString())

test/src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { defineAnimation, usePlayer, useWidget } from '@vue-motion/core'
-import { Line, Motion, Video, grow } from '@vue-motion/lib'
+import { Line, Motion, Rect, Video, grow } from '@vue-motion/lib'
 import { onMounted, ref } from 'vue'
 import type { MathFunction } from '@vue-motion/extension-math'
 import type { BubbleChart } from '@vue-motion/extension-chart'
@@ -34,6 +34,11 @@ onMounted(() => {
 
   play()
 })
+
+const color = ref('red')
+setTimeout(() => {
+  color.value = 'skyblue'
+}, 2000)
 </script>
 
 <template>
@@ -88,14 +93,15 @@ onMounted(() => {
         </ChartDataset>
       </LineChart>
     </MixedChart> -->
-    <DistantLight color="red">
+    <DistantLight :color="color">
       <Markdown>
         # Hello world
         - 111
         - 222
         - 333
       </Markdown>
     </DistantLight>
+    <Rect :width="100" :height="100" :fill-color="color"/>
     <Suspense>
       <!-- <Video href="./assets/output.mp4"/> -->
     </Suspense>