From 9ab6524470ae6740d74d56471903831b2833c226 Mon Sep 17 00:00:00 2001
From: motea927 <motea927@yahoo.com.tw>
Date: Tue, 13 Jun 2023 22:55:18 +0800
Subject: [PATCH] feat: update reactivity value for component usage

---
 packages/core/components.ts | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/core/components.ts b/packages/core/components.ts
index 06e7d39..c17deca 100644
--- a/packages/core/components.ts
+++ b/packages/core/components.ts
@@ -1,4 +1,5 @@
 import { defineComponent, h } from 'vue'
+import type { PropType } from 'vue'
 import type { BindingObj } from './shared'
 import { getDefaultString, sanitizeHtml, getBindingValue } from './shared'
 import { isValidate } from './validate'
@@ -12,21 +13,27 @@ type Props = BindingObj & {
   as?: object | string
 }
 
-export const UseSafeHtml = defineComponent<Props>({
+export const UseSafeHtml = defineComponent({
   name: 'UseSafeHtml',
-  props: [
-    'htmlString',
-    'defaultString',
-    'sanitizeConfig',
-    'as'
-  ] as unknown as undefined,
-
+  props: {
+    htmlString: {
+      type: [String, Function] as PropType<Props['htmlString']>,
+      required: true
+    },
+    defaultString: String as PropType<Props['defaultString']>,
+    sanitizeConfig: Object as PropType<Props['sanitizeConfig']>,
+    as: String as PropType<Props['as']>
+  },
+  computed: {
+    bindingValue(): string {
+      return getBindingValue(this.htmlString)
+    }
+  },
   render() {
     const componentDefaultString = getDefaultString(this.defaultString)
     const hasDefaultString = componentDefaultString !== undefined
-    const bindingValue = getBindingValue(this.htmlString)
 
-    if (hasDefaultString && !isValidate(bindingValue)) {
+    if (hasDefaultString && !isValidate(this.bindingValue)) {
       const sanitizeDefaultResult = sanitizeHtml(
         componentDefaultString,
         this.sanitizeConfig
@@ -37,7 +44,7 @@ export const UseSafeHtml = defineComponent<Props>({
       })
     }
 
-    const sanitizeResult = sanitizeHtml(bindingValue, this.sanitizeConfig)
+    const sanitizeResult = sanitizeHtml(this.bindingValue, this.sanitizeConfig)
 
     return h(this.as || 'div', {
       innerHTML: sanitizeResult