From 4d1cd5a234eb944fb23e6dbec4973c9a77e0a93c Mon Sep 17 00:00:00 2001
From: Acbox liu <850625057@qq.com>
Date: Wed, 23 Oct 2024 22:20:44 +0800
Subject: [PATCH] fix: reactive loss in `defineWidget`

---
 packages/core/src/widget.ts    | 14 +++++-----
 packages/import/test/test.json | 51 +++++++++++++++++++++++++++++-----
 packages/import/test/test.mjs  |  1 +
 test/src/App.vue               | 10 +++++--
 4 files changed, 60 insertions(+), 16 deletions(-)

diff --git a/packages/core/src/widget.ts b/packages/core/src/widget.ts
index 9c0f141..1204d85 100644
--- a/packages/core/src/widget.ts
+++ b/packages/core/src/widget.ts
@@ -18,7 +18,7 @@ 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[]
 
@@ -26,22 +26,22 @@ export function defineWidget<T extends Widget>(props: T, methods?: Record<string
   // 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) {
diff --git a/packages/import/test/test.json b/packages/import/test/test.json
index adb5d26..3ea126a 100644
--- a/packages/import/test/test.json
+++ b/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
+          }
         }
-      }
+      ]
     }
   ]
 }
\ No newline at end of file
diff --git a/packages/import/test/test.mjs b/packages/import/test/test.mjs
index 0144dbf..3b634b8 100644
--- a/packages/import/test/test.mjs
+++ b/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())
diff --git a/test/src/App.vue b/test/src/App.vue
index 5f4dbf7..a61f85a 100644
--- a/test/src/App.vue
+++ b/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,7 +93,7 @@ onMounted(() => {
         </ChartDataset>
       </LineChart>
     </MixedChart> -->
-    <DistantLight color="red">
+    <DistantLight :color="color">
       <Markdown>
         # Hello world
         - 111
@@ -96,6 +101,7 @@ onMounted(() => {
         - 333
       </Markdown>
     </DistantLight>
+    <Rect :width="100" :height="100" :fill-color="color"/>
     <Suspense>
       <!-- <Video href="./assets/output.mp4"/> -->
     </Suspense>