Merge pull request #16 from v-vibe/fix/theme-provider

fix(theme-provider): reactive theme loss issue (#15)

Author: akinoccc

core/providers/theme.ts

@@ -1,8 +1,20 @@
-import { defineComponent, h, PropType, provide } from 'vue'
+import { defineComponent, h, PropType, provide, ref, watch } from 'vue'
 
 export const ThemeProvider = defineComponent(
   (props, { slots }) => {
-    provide('$theme', props.theme)
+    const theme = ref(props.theme)
+    provide('$theme', theme)
+
+    watch(
+      () => props.theme,
+      (v) => {
+        theme.value = v
+      },
+      {
+        deep: true,
+      },
+    )
+
     return () => {
       return h('div', null, slots)
     }

core/styled.ts

@@ -7,7 +7,7 @@ import {
   onUnmounted,
   PropType,
   PublicProps,
-  reactive,
+  Ref,
   SlotsType,
   watch,
 } from 'vue'
@@ -65,21 +65,27 @@ function baseStyled(target: string | InstanceType<any>, propsDefinition: Record<
     return defineComponent(
       (props, { slots }) => {
         const myAttrs = { ...attributes }
-        const theme = reactive(inject<Record<string, string | number>>('$theme', {}))
+        const theme = inject<Ref<Record<string, string | number>>>('$theme')
         let context = {
-          theme,
+          theme: theme?.value ?? {},
           ...props,
         }
 
         myAttrs.class = generateClassName()
 
-        watch([theme, props], () => {
-          context = {
-            theme,
-            ...props,
-          }
-          injectStyle<T>(myAttrs.class, cssWithExpression, context)
-        })
+        watch(
+          [theme, props],
+          () => {
+            context = {
+              theme: theme?.value ?? {},
+              ...props,
+            }
+            injectStyle<T>(myAttrs.class, cssWithExpression, context)
+          },
+          {
+            deep: true,
+          },
+        )
 
         onMounted(() => {
           injectStyle<T>(myAttrs.class, cssWithExpression, context)

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "jsx": "preserve",
     // 目标 ECMAScript 版本
     "target": "esnext",
     // 模块解析策略