feat(vue-components): 不再兼容vue2

pnpm-lock.yaml

@@ -965,11 +965,11 @@ importers:
   runtime/react-runtime-help:
     dependencies:
       '@tmagic/core':
-        specifier: '>=1.6.0-beta.0'
+        specifier: '>=1.7.0'
-        version: 1.6.1(typescript@5.9.3)
+        version: 1.7.0(typescript@5.9.3)
       '@tmagic/stage':
-        specifier: '>=1.6.0-beta.0'
+        specifier: '>=1.7.0'
-        version: 1.6.1(@tmagic/core@1.6.1(typescript@5.9.3))(typescript@5.9.3)
+        version: 1.7.0(@tmagic/core@1.7.0(typescript@5.9.3))(typescript@5.9.3)
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
@@ -1072,23 +1072,17 @@ importers:
   runtime/vue-runtime-help:
     dependencies:
       '@tmagic/core':
-        specifier: '>=1.6.0-beta.0'
+        specifier: '>=1.7.0'
-        version: 1.6.1(typescript@5.9.3)
+        version: 1.7.0(typescript@5.9.3)
       '@tmagic/stage':
-        specifier: '>=1.6.0-beta.0'
+        specifier: '>=1.7.0'
-        version: 1.6.1(@tmagic/core@1.6.1(typescript@5.9.3))(typescript@5.9.3)
+        version: 1.7.0(@tmagic/core@1.7.0(typescript@5.9.3))(typescript@5.9.3)
-      '@vue/composition-api':
-        specifier: '>=1.7.2'
-        version: 1.7.2(vue@3.5.24(typescript@5.9.3))
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
       vue:
-        specifier: '>=2.6.0 || >=3.5.0'
+        specifier: '>=3.5.0'
         version: 3.5.24(typescript@5.9.3)
-      vue-demi:
-        specifier: ^0.14.10
-        version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
     devDependencies:
       '@vue/test-utils':
         specifier: ^2.4.6
@@ -1105,18 +1099,12 @@ importers:
       '@tmagic/vue-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/vue-runtime-help
-      '@vue/composition-api':
-        specifier: '>=1.7.2'
-        version: 1.7.2(vue@3.5.24(typescript@5.9.3))
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
       vue:
-        specifier: '>=2.6.0 || >=3.5.0'
+        specifier: '>=3.5.0'
         version: 3.5.24(typescript@5.9.3)
-      vue-demi:
-        specifier: ^0.14.10
-        version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
 
   vue-components/container:
     dependencies:
@@ -1129,18 +1117,12 @@ importers:
       '@tmagic/vue-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/vue-runtime-help
-      '@vue/composition-api':
-        specifier: '>=1.7.2'
-        version: 1.7.2(vue@3.5.24(typescript@5.9.3))
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
       vue:
-        specifier: '>=2.6.0 || >=3.5.0'
+        specifier: '>=3.5.0'
         version: 3.5.24(typescript@5.9.3)
-      vue-demi:
-        specifier: ^0.14.10
-        version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
 
   vue-components/img:
     dependencies:
@@ -1153,18 +1135,12 @@ importers:
       '@tmagic/vue-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/vue-runtime-help
-      '@vue/composition-api':
-        specifier: '>=1.7.2'
-        version: 1.7.2(vue@3.5.24(typescript@5.9.3))
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
       vue:
-        specifier: '>=2.6.0 || >=3.5.0'
+        specifier: '>=3.5.0'
         version: 3.5.24(typescript@5.9.3)
-      vue-demi:
-        specifier: ^0.14.10
-        version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
 
   vue-components/iterator-container:
     dependencies:
@@ -1177,18 +1153,12 @@ importers:
       '@tmagic/vue-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/vue-runtime-help
-      '@vue/composition-api':
-        specifier: '>=1.7.2'
-        version: 1.7.2(vue@3.5.24(typescript@5.9.3))
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
       vue:
-        specifier: '>=2.6.0 || >=3.5.0'
+        specifier: '>=3.5.0'
         version: 3.5.24(typescript@5.9.3)
-      vue-demi:
-        specifier: ^0.14.10
-        version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
 
   vue-components/overlay:
     dependencies:
@@ -1204,9 +1174,9 @@ importers:
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
-      vue-demi:
+      vue:
-        specifier: ^0.14.10
+        specifier: '>=3.5.0'
-        version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
+        version: 3.5.24(typescript@5.9.3)
 
   vue-components/page:
     dependencies:
@@ -1222,9 +1192,9 @@ importers:
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
-      vue-demi:
+      vue:
-        specifier: ^0.14.10
+        specifier: '>=3.5.0'
-        version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
+        version: 3.5.24(typescript@5.9.3)
 
   vue-components/page-fragment:
     dependencies:
@@ -1240,9 +1210,9 @@ importers:
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
-      vue-demi:
+      vue:
-        specifier: ^0.14.10
+        specifier: '>=3.5.0'
-        version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
+        version: 3.5.24(typescript@5.9.3)
 
   vue-components/page-fragment-container:
     dependencies:
@@ -1258,9 +1228,9 @@ importers:
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
-      vue-demi:
+      vue:
-        specifier: ^0.14.10
+        specifier: '>=3.5.0'
-        version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
+        version: 3.5.24(typescript@5.9.3)
 
   vue-components/qrcode:
     dependencies:
@@ -1273,9 +1243,6 @@ importers:
       '@tmagic/vue-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/vue-runtime-help
-      '@vue/composition-api':
-        specifier: '>=1.7.2'
-        version: 1.7.2(vue@3.5.24(typescript@5.9.3))
       qrcode:
         specifier: ^1.5.0
         version: 1.5.4
@@ -1283,11 +1250,8 @@ importers:
         specifier: 'catalog:'
         version: 5.9.3
       vue:
-        specifier: '>=2.6.0 || >=3.5.0'
+        specifier: '>=3.5.0'
         version: 3.5.24(typescript@5.9.3)
-      vue-demi:
-        specifier: ^0.14.10
-        version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
     devDependencies:
       '@types/qrcode':
         specifier: ^1.4.2
@@ -1304,18 +1268,12 @@ importers:
       '@tmagic/vue-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/vue-runtime-help
-      '@vue/composition-api':
-        specifier: '>=1.7.2'
-        version: 1.7.2(vue@3.5.24(typescript@5.9.3))
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
       vue:
-        specifier: '>=2.6.0 || >=3.5.0'
+        specifier: '>=3.5.0'
         version: 3.5.24(typescript@5.9.3)
-      vue-demi:
-        specifier: ^0.14.10
-        version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
 
 packages:
 
@@ -8277,7 +8235,7 @@ snapshots:
   '@tmagic/core@1.6.1(typescript@5.9.3)':
     dependencies:
       '@tmagic/data-source': 1.6.1(@tmagic/core@1.6.1(typescript@5.9.3))(typescript@5.9.3)
-      '@tmagic/dep': 1.6.1(@tmagic/schema@1.6.1(typescript@5.9.3))(@tmagic/utils@1.6.1(@tmagic/schema@1.6.1(typescript@5.9.3))(typescript@5.9.3))(typescript@5.9.3)
+      '@tmagic/dep': 1.6.1(@tmagic/schema@1.6.1(typescript@5.9.3))(@tmagic/utils@1.6.1(@tmagic/schema@1.7.0(typescript@5.9.3))(typescript@5.9.3))(typescript@5.9.3)
       '@tmagic/schema': 1.6.1(typescript@5.9.3)
       '@tmagic/utils': 1.6.1(@tmagic/schema@1.6.1(typescript@5.9.3))(typescript@5.9.3)
       events: 3.3.0
@@ -8314,10 +8272,10 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.3
 
-  '@tmagic/dep@1.6.1(@tmagic/schema@1.6.1(typescript@5.9.3))(@tmagic/utils@1.6.1(@tmagic/schema@1.6.1(typescript@5.9.3))(typescript@5.9.3))(typescript@5.9.3)':
+  '@tmagic/dep@1.6.1(@tmagic/schema@1.6.1(typescript@5.9.3))(@tmagic/utils@1.6.1(@tmagic/schema@1.7.0(typescript@5.9.3))(typescript@5.9.3))(typescript@5.9.3)':
     dependencies:
       '@tmagic/schema': 1.6.1(typescript@5.9.3)
-      '@tmagic/utils': 1.6.1(@tmagic/schema@1.6.1(typescript@5.9.3))(typescript@5.9.3)
+      '@tmagic/utils': 1.6.1(@tmagic/schema@1.7.0(typescript@5.9.3))(typescript@5.9.3)
     optionalDependencies:
       typescript: 5.9.3
 
@@ -8918,6 +8876,7 @@ snapshots:
   '@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3))':
     dependencies:
       vue: 3.5.24(typescript@5.9.3)
+    optional: true
 
   '@vue/devtools-api@6.6.4': {}
 

runtime/vue/vite.config.ts

@@ -55,10 +55,6 @@ export default defineConfig({
 
   publicDir: 'public',
 
-  optimizeDeps: {
-    exclude: ['vue-demi'],
-  },
-
   server: {
     host: '0.0.0.0',
     port: 8078,

vue-components/button/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.0",
+  "version": "1.0.0",
   "name": "@tmagic/vue-button",
   "type": "module",
   "main": "src/index.ts",
@@ -14,21 +14,15 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form-schema": "workspace:^",
+    "@tmagic/form-schema": "workspace:^"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "@vue/composition-api": ">=1.7.2",
     "typescript": "catalog:",
-    "vue": ">=2.6.0 || >=3.5.0"
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
-    "@vue/composition-api": {
-      "optional": true
-    },
-
     "typescript": {
       "optional": true
     }

vue-components/button/src/index.vue

@@ -6,11 +6,9 @@
   </button>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, type PropType } from 'vue-demi';
-
 import { COMMON_EVENT_PREFIX, type Id, type MComponent } from '@tmagic/core';
-import { useApp } from '@tmagic/vue-runtime-help';
+import { type ComponentProps, useApp } from '@tmagic/vue-runtime-help';
 
 interface ButtonSchema extends Omit<MComponent, 'id'> {
   id?: Id;
@@ -18,36 +16,16 @@ interface ButtonSchema extends Omit<MComponent, 'id'> {
   text: string;
 }
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-button',
-
-  props: {
-    config: {
-      type: Object as PropType<ButtonSchema>,
-      required: true,
-    },
-    iteratorIndex: Array as PropType<number[]>,
-    iteratorContainerId: Array as PropType<Id[]>,
-    containerIndex: Number,
-    pageFragmentContainerId: [String, Number] as PropType<Id>,
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  setup(props) {
-    const { app, node } = useApp(props);
-
-    const clickHandler = () => {
-      if (app && node) {
-        app.emit(`${COMMON_EVENT_PREFIX}click`, node);
-      }
-    };
-
-    return {
-      clickHandler,
-    };
-  },
 });
+
+const props = defineProps<ComponentProps<ButtonSchema>>();
+
+const { app, node } = useApp(props);
+const clickHandler = () => {
+  if (app && node) {
+    app.emit(`${COMMON_EVENT_PREFIX}click`, node);
+  }
+};
 </script>

vue-components/container/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.1",
+  "version": "2.0.0",
   "name": "@tmagic/vue-container",
   "type": "module",
   "main": "src/index.ts",
@@ -14,22 +14,17 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form-schema": "workspace:^",
+    "@tmagic/form-schema": "workspace:^"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "@vue/composition-api": ">=1.7.2",
     "typescript": "catalog:",
-    "vue": ">=2.6.0 || >=3.5.0"
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
     "typescript": {
       "optional": true
-    },
-    "@vue/composition-api": {
-      "optional": true
     }
   }
 }

vue-components/container/src/Component.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, inject, type PropType, provide } from 'vue-demi';
+import { defineComponent, h, inject, type PropType, provide } from 'vue';
 
 import type TMagicApp from '@tmagic/core';
 import { Id, IS_DSL_NODE_KEY, MComponent, NODE_CONDS_RESULT_KEY } from '@tmagic/core';

vue-components/container/src/Container.vue

@@ -14,12 +14,12 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, inject, type PropType } from 'vue-demi';
+import { inject } from 'vue';
 
 import type TMagicApp from '@tmagic/core';
 import { COMMON_EVENT_PREFIX, type Id, type MContainer } from '@tmagic/core';
-import { registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
+import { type ComponentProps, registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
 
 import ItemComponent from './Component';
 
@@ -28,46 +28,19 @@ interface ContainerSchema extends Omit<MContainer, 'id'> {
   type?: 'container';
 }
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-container',
-
-  props: {
-    config: {
-      type: Object as PropType<ContainerSchema>,
-      required: true,
-    },
-    iteratorIndex: {
-      type: Array as PropType<number[]>,
-      default: () => [],
-    },
-    iteratorContainerId: {
-      type: Array as PropType<Id[]>,
-      default: () => [],
-    },
-    containerIndex: Number,
-    pageFragmentContainerId: [String, Number] as PropType<Id>,
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  components: { ItemComponent },
-
-  setup(props) {
-    const app = inject<TMagicApp>('app');
-    const node = useNode(props, app);
-    registerNodeHooks(node);
-
-    const clickHandler = () => {
-      if (app && node) {
-        app.emit(`${COMMON_EVENT_PREFIX}click`, node);
-      }
-    };
-
-    return {
-      clickHandler,
-    };
-  },
 });
+
+const props = defineProps<ComponentProps<ContainerSchema>>();
+
+const app = inject<TMagicApp>('app');
+const node = useNode(props, app);
+registerNodeHooks(node);
+
+const clickHandler = () => {
+  if (app && node) {
+    app.emit(`${COMMON_EVENT_PREFIX}click`, node);
+  }
+};
 </script>

vue-components/img/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.0",
+  "version": "1.0.0",
   "name": "@tmagic/vue-img",
   "type": "module",
   "main": "src/index.ts",
@@ -14,20 +14,15 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form-schema": "workspace:^",
+    "@tmagic/form-schema": "workspace:^"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "@vue/composition-api": ">=1.7.2",
     "typescript": "catalog:",
-    "vue": ">=2.6.0 || >=3.5.0"
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
-    "@vue/composition-api": {
-      "optional": true
-    },
     "typescript": {
       "optional": true
     }

vue-components/img/src/index.vue

@@ -2,11 +2,9 @@
   <img :src="config.src" @click="clickHandler" />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, type PropType } from 'vue-demi';
-
 import type { Id, MComponent } from '@tmagic/core';
-import { registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
+import { type ComponentProps, registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
 
 interface ImgSchema extends Omit<MComponent, 'id'> {
   id?: Id;
@@ -15,35 +13,16 @@ interface ImgSchema extends Omit<MComponent, 'id'> {
   url?: string;
 }
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-img',
-
-  props: {
-    config: {
-      type: Object as PropType<ImgSchema>,
-      required: true,
-    },
-    iteratorIndex: Array as PropType<number[]>,
-    iteratorContainerId: Array as PropType<Id[]>,
-    containerIndex: Number,
-    pageFragmentContainerId: [String, Number] as PropType<Id>,
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  setup(props) {
-    const clickHandler = () => {
-      if (props.config.url) window.location.href = props.config.url;
-    };
-
-    const node = useNode(props);
-    registerNodeHooks(node);
-
-    return {
-      clickHandler,
-    };
-  },
 });
+
+const props = defineProps<ComponentProps<ImgSchema>>();
+
+const clickHandler = () => {
+  if (props.config.url) window.location.href = props.config.url;
+};
+
+const node = useNode(props);
+registerNodeHooks(node);
 </script>

vue-components/iterator-container/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.1",
+  "version": "1.0.0",
   "name": "@tmagic/vue-iterator-container",
   "type": "module",
   "main": "src/index.ts",
@@ -14,20 +14,15 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form-schema": "workspace:^",
+    "@tmagic/form-schema": "workspace:^"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "@vue/composition-api": ">=1.7.2",
     "typescript": "catalog:",
-    "vue": ">=2.6.0 || >=3.5.0"
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
-    "@vue/composition-api": {
-      "optional": true
-    },
     "typescript": {
       "optional": true
     }

vue-components/iterator-container/src/IteratorContainer.vue

@@ -13,8 +13,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, type PropType, watch } from 'vue-demi';
+import { computed, watch } from 'vue';
 
 import {
   COMMON_EVENT_PREFIX,
@@ -23,7 +23,7 @@ import {
   type MIteratorContainer,
   type MNode,
 } from '@tmagic/core';
-import { registerNodeHooks, useApp } from '@tmagic/vue-runtime-help';
+import { type ComponentProps, registerNodeHooks, useApp } from '@tmagic/vue-runtime-help';
 
 import IteratorItem from './IteratorItem.vue';
 
@@ -40,101 +40,79 @@ interface IteratorItemSchema {
   };
 }
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-iterator-container',
+});
 
-  components: { IteratorItem },
+const props = defineProps<ComponentProps<IteratorContainerSchema>>();
 
-  props: {
+const { app, node } = useApp(props);
-    config: {
+registerNodeHooks(node);
-      type: Object as PropType<IteratorContainerSchema>,
-      required: true,
-    },
-    iteratorIndex: Array as PropType<number[]>,
-    iteratorContainerId: Array as PropType<Id[]>,
-    containerIndex: Number,
-    pageFragmentContainerId: [String, Number] as PropType<Id>,
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
 
-  setup(props) {
+const configs = computed<IteratorItemSchema[]>(() => {
-    const { app, node } = useApp(props);
+  let { iteratorData = [] } = props.config;
-    registerNodeHooks(node);
+  const { itemConfig, dsField, items } = props.config;
 
-    const configs = computed<IteratorItemSchema[]>(() => {
+  if (!Array.isArray(iteratorData)) {
-      let { iteratorData = [] } = props.config;
+    iteratorData = [];
-      const { itemConfig, dsField, items } = props.config;
+  }
 
-      if (!Array.isArray(iteratorData)) {
+  if (app?.platform === 'editor' && !iteratorData.length) {
-        iteratorData = [];
+    iteratorData.push({});
-      }
+  }
 
-      if (app?.platform === 'editor' && !iteratorData.length) {
+  return iteratorData.map((itemData: any) => {
-        iteratorData.push({});
+    const condResult =
-      }
+      app?.platform !== 'editor'
+        ? (app?.dataSourceManager?.compliedIteratorItemConds(itemData, itemConfig, dsField) ?? true)
+        : true;
 
-      return iteratorData.map((itemData: any) => {
+    const newItems = app?.dataSourceManager?.compliedIteratorItems(itemData, items, dsField) ?? items;
-        const condResult =
-          app?.platform !== 'editor'
-            ? (app?.dataSourceManager?.compliedIteratorItemConds(itemData, itemConfig, dsField) ?? true)
-            : true;
-
-        const newItems = app?.dataSourceManager?.compliedIteratorItems(itemData, items, dsField) ?? items;
-
-        return {
-          items: newItems,
-          condResult,
-          style: {
-            position: 'relative',
-            left: 0,
-            top: 0,
-            ...itemConfig.style,
-          },
-        };
-      });
-    });
-
-    watch(
-      configs,
-      (configs) => {
-        if (!props.config.id) {
-          return;
-        }
-
-        const iteratorContainerNode = app?.getNode<TMagicIteratorContainer>(props.config.id, {
-          iteratorContainerId: props.iteratorContainerId,
-          iteratorIndex: props.iteratorIndex,
-          pageFragmentContainerId: props.pageFragmentContainerId,
-        });
-
-        if (!iteratorContainerNode) {
-          return;
-        }
-
-        iteratorContainerNode.resetNodes();
-
-        configs.forEach((config, index) => {
-          iteratorContainerNode.setNodes(config.items, index);
-        });
-      },
-      {
-        immediate: true,
-      },
-    );
-
-    const clickHandler = () => {
-      if (app && node) {
-        app.emit(`${COMMON_EVENT_PREFIX}click`, node);
-      }
-    };
 
     return {
-      configs,
+      items: newItems,
-      clickHandler,
+      condResult,
+      style: {
+        position: 'relative',
+        left: 0,
+        top: 0,
+        ...itemConfig.style,
+      },
     };
-  },
+  });
 });
+
+watch(
+  configs,
+  (configs) => {
+    if (!props.config.id) {
+      return;
+    }
+
+    const iteratorContainerNode = app?.getNode<TMagicIteratorContainer>(props.config.id, {
+      iteratorContainerId: props.iteratorContainerId,
+      iteratorIndex: props.iteratorIndex,
+      pageFragmentContainerId: props.pageFragmentContainerId,
+    });
+
+    if (!iteratorContainerNode) {
+      return;
+    }
+
+    iteratorContainerNode.resetNodes();
+
+    configs.forEach((config, index) => {
+      iteratorContainerNode.setNodes(config.items, index);
+    });
+  },
+  {
+    immediate: true,
+  },
+);
+
+const clickHandler = () => {
+  if (app && node) {
+    app.emit(`${COMMON_EVENT_PREFIX}click`, node);
+  }
+};
 </script>

vue-components/iterator-container/src/IteratorItem.vue

@@ -10,8 +10,8 @@
   ></component>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, inject, type PropType } from 'vue-demi';
+import { inject } from 'vue';
 
 import type TMagicApp from '@tmagic/core';
 import { type Id } from '@tmagic/core';
@@ -19,37 +19,25 @@ import { useComponent, useComponentStatus } from '@tmagic/vue-runtime-help';
 
 import { IteratorItemSchema } from './type';
 
-export default defineComponent({
+interface IteratorItemProps {
+  config: IteratorItemSchema;
+  iteratorIndex?: number[];
+  iteratorContainerId?: Id[];
+  containerIndex?: number;
+  pageFragmentContainerId?: Id;
+  index?: number;
+  model?: Record<string, any>;
+}
+
+defineOptions({
   name: 'tmagic-iterator-container-item',
-
-  props: {
-    config: {
-      type: Object as PropType<IteratorItemSchema>,
-      required: true,
-    },
-    iteratorIndex: Array as PropType<number[]>,
-    iteratorContainerId: Array as PropType<Id[]>,
-    containerIndex: Number,
-    pageFragmentContainerId: [String, Number] as PropType<Id>,
-    index: Number,
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  setup(props) {
-    const app = inject<TMagicApp>('app');
-
-    const containerComponent = useComponent({ componentType: 'container', app });
-
-    const { style, className } = useComponentStatus(props);
-
-    return {
-      style,
-      className,
-      containerComponent,
-    };
-  },
 });
+
+const props = defineProps<IteratorItemProps>();
+
+const app = inject<TMagicApp>('app');
+
+const containerComponent = useComponent({ componentType: 'container', app });
+
+const { style, className } = useComponentStatus(props);
 </script>

vue-components/overlay/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.0",
+  "version": "1.0.0",
   "name": "@tmagic/vue-overlay",
   "type": "module",
   "main": "src/index.ts",
@@ -14,14 +14,13 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form-schema": "workspace:^",
+    "@tmagic/form-schema": "workspace:^"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "vue-demi": ">=0.14.7",
+    "typescript": "catalog:",
-    "typescript": "catalog:"
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
     "typescript": {

vue-components/overlay/src/index.vue

@@ -4,84 +4,72 @@
   </component>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, inject, onBeforeUnmount, type PropType, ref } from 'vue-demi';
+import { inject, onBeforeUnmount, ref } from 'vue';
 
 import type TMagicApp from '@tmagic/core';
 import { type Id, IS_DSL_NODE_KEY, type MContainer, type MNode, type MPage } from '@tmagic/core';
-import { registerNodeHooks, useComponent, useNode } from '@tmagic/vue-runtime-help';
+import { type ComponentProps, registerNodeHooks, useComponent, useNode } from '@tmagic/vue-runtime-help';
 
 interface OverlaySchema extends Omit<MContainer, 'id'> {
   id?: Id;
   type?: 'overlay';
 }
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-overlay',
+});
 
-  props: {
+const props = defineProps<ComponentProps<OverlaySchema>>();
-    config: {
+
-      type: Object as PropType<OverlaySchema>,
+const visible = ref(false);
-      required: true,
+
-    },
+const app = inject<TMagicApp>('app');
-    iteratorIndex: Array as PropType<number[]>,
+const containerComponent = useComponent({ componentType: 'container', app });
-    iteratorContainerId: Array as PropType<Id[]>,
+
-    containerIndex: Number,
+const openOverlay = () => {
-    pageFragmentContainerId: [String, Number] as PropType<Id>,
+  visible.value = true;
-    model: {
+  app?.emit('overlay:open', node);
-      type: Object,
+};
-      default: () => ({}),
+
-    },
+const closeOverlay = () => {
+  visible.value = false;
+  app?.emit('overlay:close', node);
+};
+
+const editorSelectHandler = (
+  _info: {
+    node: MNode;
+    page: MPage;
+    parent: MContainer;
   },
+  path: MNode[],
+) => {
+  if (path.find((node: MNode) => node.id === props.config.id)) {
+    openOverlay();
+  } else {
+    closeOverlay();
+  }
+};
 
-  setup(props) {
+app?.page?.on('editor:select', editorSelectHandler);
-    const visible = ref(false);
 
-    const app = inject<TMagicApp>('app');
+app?.on('page-change', () => {
-    const containerComponent = useComponent({ componentType: 'container', app });
+  app?.page?.on('editor:select', editorSelectHandler);
+});
 
-    const openOverlay = () => {
+onBeforeUnmount(() => {
-      visible.value = true;
+  app?.page?.off('editor:select', editorSelectHandler);
-      app?.emit('overlay:open', node);
+});
-    };
 
-    const closeOverlay = () => {
+const node = useNode(props, app);
-      visible.value = false;
+registerNodeHooks(node, {
-      app?.emit('overlay:close', node);
+  openOverlay,
-    };
+  closeOverlay,
+});
 
-    const editorSelectHandler = (
+defineExpose({
-      info: {
+  openOverlay,
-        node: MNode;
+  closeOverlay,
-        page: MPage;
-        parent: MContainer;
-      },
-      path: MNode[],
-    ) => {
-      if (path.find((node: MNode) => node.id === props.config.id)) {
-        openOverlay();
-      } else {
-        closeOverlay();
-      }
-    };
-
-    app?.page?.on('editor:select', editorSelectHandler);
-
-    onBeforeUnmount(() => {
-      app?.page?.off('editor:select', editorSelectHandler);
-    });
-
-    const node = useNode(props, app);
-    registerNodeHooks(node, {
-      openOverlay,
-      closeOverlay,
-    });
-
-    return {
-      containerComponent,
-      visible,
-      IS_DSL_NODE_KEY,
-    };
-  },
 });
 </script>

vue-components/page-fragment-container/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.2",
+  "version": "1.0.0",
   "name": "@tmagic/vue-page-fragment-container",
   "type": "module",
   "main": "src/index.ts",
@@ -14,13 +14,13 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form-schema": "workspace:^",
+    "@tmagic/form-schema": "workspace:^"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "typescript": "catalog:"
+    "typescript": "catalog:",
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
     "typescript": {

vue-components/page-fragment-container/src/PageFragmentContainer.vue

@@ -11,55 +11,35 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, type PropType, provide } from 'vue-demi';
+import { computed, provide } from 'vue';
 
-import { type Id, type MComponent, NodeType, PAGE_FRAGMENT_CONTAINER_ID_KEY } from '@tmagic/core';
+import { type MComponent, NodeType, PAGE_FRAGMENT_CONTAINER_ID_KEY } from '@tmagic/core';
-import { registerNodeHooks, useApp, useComponent, useDsl } from '@tmagic/vue-runtime-help';
+import { type ComponentProps, registerNodeHooks, useApp, useComponent, useDsl } from '@tmagic/vue-runtime-help';
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-page-fragment-container',
+});
 
-  props: {
+const props = defineProps<ComponentProps<MComponent>>();
-    config: {
-      type: Object as PropType<MComponent>,
-      required: true,
-    },
-    iteratorIndex: Array as PropType<number[]>,
-    iteratorContainerId: Array as PropType<Id[]>,
-    containerIndex: Number,
-    pageFragmentContainerId: [String, Number] as PropType<Id>,
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
 
-  setup(props) {
+provide(PAGE_FRAGMENT_CONTAINER_ID_KEY, props.config.id);
-    provide(PAGE_FRAGMENT_CONTAINER_ID_KEY, props.config.id);
 
-    const { app, node } = useApp(props);
+const { app, node } = useApp(props);
-    registerNodeHooks(node);
+registerNodeHooks(node);
 
-    const containerComponent = useComponent({ componentType: 'container', app });
+const containerComponent = useComponent({ componentType: 'container', app });
 
-    if (!props.config.id) {
+if (!props.config.id) {
-      throw new Error('page-fragment-container must have id');
+  throw new Error('page-fragment-container must have id');
-    }
+}
 
-    const { pageConfig: fragment } = useDsl(app, props.config.id);
+const { pageConfig: fragment } = useDsl(app, props.config.id);
 
-    const containerConfig = computed(() => {
+const containerConfig = computed(() => {
-      if (!fragment.value) return { items: [], id: '', type: NodeType.CONTAINER };
+  if (!fragment.value) return { items: [], id: '', type: NodeType.CONTAINER };
 
-      return fragment.value;
+  return fragment.value;
-    });
-
-    return {
-      containerComponent,
-      containerConfig,
-    };
-  },
 });
 </script>
 

vue-components/page-fragment/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.0",
+  "version": "1.0.0",
   "name": "@tmagic/vue-page-fragment",
   "type": "module",
   "main": "src/index.ts",
@@ -14,13 +14,13 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form-schema": "workspace:^",
+    "@tmagic/form-schema": "workspace:^"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "typescript": "catalog:"
+    "typescript": "catalog:",
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
     "typescript": {

vue-components/page-fragment/src/PageFragment.vue

@@ -8,40 +8,29 @@
   ></component>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, inject, type PropType } from 'vue-demi';
+import { inject } from 'vue';
 
 import type TMagicApp from '@tmagic/core';
 import { IS_DSL_NODE_KEY, type MPageFragment } from '@tmagic/core';
-import { registerNodeHooks, useComponent, useComponentStatus, useNode } from '@tmagic/vue-runtime-help';
+import {
+  type ComponentProps,
+  registerNodeHooks,
+  useComponent,
+  useComponentStatus,
+  useNode,
+} from '@tmagic/vue-runtime-help';
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-page-fragment',
-
-  props: {
-    config: {
-      type: Object as PropType<MPageFragment>,
-      required: true,
-    },
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  setup(props) {
-    const app = inject<TMagicApp>('app');
-    const node = useNode(props, app);
-    registerNodeHooks(node);
-
-    const containerComponent = useComponent({ componentType: 'container', app });
-    const { style, className } = useComponentStatus(props);
-    return {
-      style,
-      className,
-      containerComponent,
-      IS_DSL_NODE_KEY,
-    };
-  },
 });
+
+const props = defineProps<ComponentProps<MPageFragment>>();
+
+const app = inject<TMagicApp>('app');
+const node = useNode(props, app);
+registerNodeHooks(node);
+
+const containerComponent = useComponent({ componentType: 'container', app });
+const { style, className } = useComponentStatus(props);
 </script>

vue-components/page/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.1",
+  "version": "1.0.0",
   "name": "@tmagic/vue-page",
   "type": "module",
   "main": "src/index.ts",
@@ -14,13 +14,13 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form-schema": "workspace:^",
+    "@tmagic/form-schema": "workspace:^"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "typescript": "catalog:"
+    "typescript": "catalog:",
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
     "typescript": {

vue-components/page/src/formConfig.ts

@@ -78,6 +78,9 @@ export default defineFormConfig([
     name: 'css',
     type: 'vs-code',
     language: 'css',
-    height: '500px',
+    autosize: {
+      minRows: 3,
+      maxRows: 20,
+    },
   },
 ]);

vue-components/page/src/index.vue

@@ -8,8 +8,8 @@
   ></component>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, inject, nextTick, type PropType, watch } from 'vue-demi';
+import { inject, nextTick, watch } from 'vue';
 
 import type TMagicApp from '@tmagic/core';
 import { asyncLoadCss, asyncLoadJs, IS_DSL_NODE_KEY, type MPage } from '@tmagic/core';
@@ -37,64 +37,54 @@ const createJs = (config: MPage) => {
   }
 };
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-page',
-
-  props: {
-    config: {
-      type: Object as PropType<MPage>,
-      required: true,
-    },
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  setup(props) {
-    const app = inject<TMagicApp>('app');
-
-    if (app?.jsEngine === 'browser') {
-      createCss(props.config);
-      createJs(props.config);
-    }
-
-    const containerComponent = useComponent({ componentType: 'container', app });
-
-    const { style, className } = useComponentStatus(props);
-
-    const refresh = () => {
-      window.location.reload();
-    };
-
-    watch(
-      () => props.config,
-      async (config, preConfig) => {
-        const node = useNode({ config: { ...config, [IS_DSL_NODE_KEY]: true } }, app);
-
-        if (config.id !== preConfig?.id) {
-          node?.setInstance({ config: props.config, refresh });
-          node?.emit('created');
-        }
-        await nextTick();
-
-        if (config.id !== preConfig?.id) {
-          node?.emit('mounted');
-          const preNode = useNode({ config: { ...preConfig, [IS_DSL_NODE_KEY]: true } }, app);
-          preNode?.emit('destroy');
-        }
-      },
-      {
-        immediate: true,
-      },
-    );
-
-    return {
-      style,
-      className,
-      containerComponent,
-      IS_DSL_NODE_KEY,
-    };
-  },
 });
+
+const props = withDefaults(
+  defineProps<{
+    config: MPage;
+    model?: Record<string, any>;
+  }>(),
+  {
+    model: () => ({}),
+  },
+);
+
+const app = inject<TMagicApp>('app');
+
+if (app?.jsEngine === 'browser') {
+  createCss(props.config);
+  createJs(props.config);
+}
+
+const containerComponent = useComponent({ componentType: 'container', app });
+
+const { style, className } = useComponentStatus(props);
+
+const refresh = () => {
+  window.location.reload();
+};
+
+watch(
+  () => props.config,
+  async (config, preConfig) => {
+    const node = useNode({ config: { ...config, [IS_DSL_NODE_KEY]: true } }, app);
+
+    if (config.id !== preConfig?.id) {
+      node?.setInstance({ config: props.config, refresh });
+      node?.emit('created');
+    }
+    await nextTick();
+
+    if (config.id !== preConfig?.id) {
+      node?.emit('mounted');
+      const preNode = useNode({ config: { ...preConfig, [IS_DSL_NODE_KEY]: true } }, app);
+      preNode?.emit('destroy');
+    }
+  },
+  {
+    immediate: true,
+  },
+);
 </script>

vue-components/qrcode/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.0",
+  "version": "1.0.0",
   "name": "@tmagic/vue-qrcode",
   "type": "module",
   "main": "src/index.ts",
@@ -15,22 +15,17 @@
   },
   "dependencies": {
     "@tmagic/form-schema": "workspace:^",
-    "qrcode": "^1.5.0",
+    "qrcode": "^1.5.0"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "@vue/composition-api": ">=1.7.2",
     "typescript": "catalog:",
-    "vue": ">=2.6.0 || >=3.5.0"
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
     "typescript": {
       "optional": true
-    },
-    "@vue/composition-api": {
-      "optional": true
     }
   },
   "devDependencies": {

vue-components/qrcode/src/index.vue

@@ -2,13 +2,13 @@
   <img :src="imgUrl" @click="clickHandler" />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, inject, type PropType, ref, watch } from 'vue-demi';
+import { inject, ref, watch } from 'vue';
 import QRCode from 'qrcode';
 
 import type TMagicApp from '@tmagic/core';
 import { COMMON_EVENT_PREFIX, type Id, type MComponent } from '@tmagic/core';
-import { registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
+import { type ComponentProps, registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
 
 interface QrCodeSchema extends Omit<MComponent, 'id'> {
   id?: Id;
@@ -16,54 +16,34 @@ interface QrCodeSchema extends Omit<MComponent, 'id'> {
   url: string;
 }
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-qrcode',
-
-  props: {
-    config: {
-      type: Object as PropType<QrCodeSchema>,
-      required: true,
-    },
-    iteratorIndex: Array as PropType<number[]>,
-    iteratorContainerId: Array as PropType<Id[]>,
-    containerIndex: Number,
-    pageFragmentContainerId: [String, Number] as PropType<Id>,
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  setup(props) {
-    const imgUrl = ref();
-
-    watch(
-      () => props.config.url,
-      (url = '') => {
-        QRCode.toDataURL(url, (e: any, url: string) => {
-          if (e) console.error(e);
-          imgUrl.value = url;
-        });
-      },
-      {
-        immediate: true,
-      },
-    );
-
-    const app = inject<TMagicApp>('app');
-    const node = useNode(props);
-    registerNodeHooks(node);
-
-    const clickHandler = () => {
-      if (app && node) {
-        app.emit(`${COMMON_EVENT_PREFIX}click`, node);
-      }
-    };
-
-    return {
-      imgUrl,
-      clickHandler,
-    };
-  },
 });
+
+const props = defineProps<ComponentProps<QrCodeSchema>>();
+
+const imgUrl = ref();
+
+watch(
+  () => props.config.url,
+  (url = '') => {
+    QRCode.toDataURL(url, (e: any, url: string) => {
+      if (e) console.error(e);
+      imgUrl.value = url;
+    });
+  },
+  {
+    immediate: true,
+  },
+);
+
+const app = inject<TMagicApp>('app');
+const node = useNode(props);
+registerNodeHooks(node);
+
+const clickHandler = () => {
+  if (app && node) {
+    app.emit(`${COMMON_EVENT_PREFIX}click`, node);
+  }
+};
 </script>

vue-components/text/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.1",
+  "version": "1.0.0",
   "name": "@tmagic/vue-text",
   "type": "module",
   "main": "src/index.ts",
@@ -14,22 +14,17 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form-schema": "workspace:^",
+    "@tmagic/form-schema": "workspace:^"
-    "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/vue-runtime-help": "workspace:^",
-    "@vue/composition-api": ">=1.7.2",
     "typescript": "catalog:",
-    "vue": ">=2.6.0 || >=3.5.0"
+    "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
     "typescript": {
       "optional": true
-    },
-    "@vue/composition-api": {
-      "optional": true
     }
   }
 }

vue-components/text/src/index.vue

@@ -2,12 +2,12 @@
   <p @click="clickHandler" v-html="config.text"></p>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, inject, type PropType } from 'vue-demi';
+import { inject } from 'vue';
 
 import type TMagicApp from '@tmagic/core';
 import { COMMON_EVENT_PREFIX, type Id, type MComponent } from '@tmagic/core';
-import { registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
+import { type ComponentProps, registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
 
 interface TextSchema extends Omit<MComponent, 'id'> {
   id?: Id;
@@ -15,38 +15,19 @@ interface TextSchema extends Omit<MComponent, 'id'> {
   text: string;
 }
 
-export default defineComponent({
+defineOptions({
   name: 'tmagic-text',
-
-  props: {
-    config: {
-      type: Object as PropType<TextSchema>,
-      required: true,
-    },
-    iteratorIndex: Array as PropType<number[]>,
-    iteratorContainerId: Array as PropType<Id[]>,
-    containerIndex: Number,
-    pageFragmentContainerId: [String, Number] as PropType<Id>,
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  setup(props) {
-    const app = inject<TMagicApp>('app');
-    const node = useNode(props);
-    registerNodeHooks(node);
-
-    const clickHandler = () => {
-      if (app && node) {
-        app.emit(`${COMMON_EVENT_PREFIX}click`, node);
-      }
-    };
-
-    return {
-      clickHandler,
-    };
-  },
 });
+
+const props = defineProps<ComponentProps<TextSchema>>();
+
+const app = inject<TMagicApp>('app');
+const node = useNode(props);
+registerNodeHooks(node);
+
+const clickHandler = () => {
+  if (app && node) {
+    app.emit(`${COMMON_EVENT_PREFIX}click`, node);
+  }
+};
 </script>