From 8d1ba220c1685f993d8bdffaaa9f053e1b02df0b Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Wed, 31 Jan 2024 17:09:04 +0800
Subject: [PATCH] =?UTF-8?q?fix(tmagic-form-runtime):=20=E5=AE=8C=E5=96=84f?=
 =?UTF-8?q?orm-runtime?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 runtime/tmagic-form/package.json         |  2 +-
 runtime/tmagic-form/src/App.vue          | 17 ++++++----
 runtime/tmagic-form/src/index.ts         | 43 ++++++++++++++----------
 runtime/tmagic-form/src/types.ts         |  9 +++++
 runtime/tmagic-form/src/useFormConfig.ts | 14 +++++---
 5 files changed, 56 insertions(+), 29 deletions(-)
 create mode 100644 runtime/tmagic-form/src/types.ts

diff --git a/runtime/tmagic-form/package.json b/runtime/tmagic-form/package.json
index c19957940..763a0b3d7 100644
--- a/runtime/tmagic-form/package.json
+++ b/runtime/tmagic-form/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0",
+  "version": "1.0.2",
   "name": "@tmagic/tmagic-form-runtime",
   "type": "module",
   "sideEffects": [
diff --git a/runtime/tmagic-form/src/App.vue b/runtime/tmagic-form/src/App.vue
index eb4ac281c..ca030b90a 100644
--- a/runtime/tmagic-form/src/App.vue
+++ b/runtime/tmagic-form/src/App.vue
@@ -1,20 +1,25 @@
 <template>
-  <MForm ref="mForm" :id="config?.id" :data-magic-id="config?.id" :config="formConfig" :init-values="values"></MForm>
+  <MForm
+    ref="mForm"
+    :key="config?.id"
+    :id="config?.id"
+    :data-magic-id="config?.id"
+    :config="formConfig"
+    :init-values="values"
+  ></MForm>
 </template>
 
 <script setup lang="ts">
 import { watch } from 'vue';
 
 import { MForm } from '@tmagic/form';
-import type StageCore from '@tmagic/stage';
 
+import { AppProps } from './types';
 import { useFormConfig } from './useFormConfig';
 
-const props = defineProps<{
-  stage: StageCore;
-}>();
+const props = defineProps<AppProps>();
 
-const { mForm, formConfig, config, values } = useFormConfig(props.stage.renderer.contentWindow);
+const { mForm, formConfig, config, values } = useFormConfig(props);
 
 watch(formConfig, async () => {
   setTimeout(() => {
diff --git a/runtime/tmagic-form/src/index.ts b/runtime/tmagic-form/src/index.ts
index ae702bd66..72465dc6d 100644
--- a/runtime/tmagic-form/src/index.ts
+++ b/runtime/tmagic-form/src/index.ts
@@ -1,4 +1,4 @@
-import { createApp, onBeforeUnmount } from 'vue';
+import { createApp, onBeforeUnmount, Plugin } from 'vue';
 import cssStyle from 'element-plus/dist/index.css?raw';
 
 import { editorService, Layout, propsService, uiService } from '@tmagic/editor';
@@ -16,34 +16,41 @@ export const propsConfigs = formConfigs;
 
 export const canSelect = (el: HTMLElement) => Boolean(el.dataset.magicId);
 
-export const useRuntime = () => {
+export const useRuntime = ({
+  plugins = [],
+  fillConfig = (config) => config,
+}: {
+  plugins?: Plugin[];
+  fillConfig?: (config: FormConfig) => FormConfig;
+}) => {
   const render = (stage: StageCore) => {
     injectStyle(stage.renderer.getDocument()!, cssStyle);
     injectStyle(
       stage.renderer.getDocument()!,
-      `
-  html,
-    body,
-    #app {
-      width: 100%;
-      height: 100%;
-      margin: 0;
-    }
-    ::-webkit-scrollbar {
-      width: 0;
-    }
-  `,
+      `html,
+        body,
+        #app {
+          width: 100%;
+          height: 100%;
+          margin: 0;
+        }
+        ::-webkit-scrollbar {
+          width: 0;
+        }
+      `,
     );
 
     const el: HTMLDivElement = globalThis.document.createElement('div');
     el.id = 'app';
     el.style.overflow = 'auto';
 
-    createApp(App, {
+    const vueApp = createApp(App, {
       stage,
-    })
-      .use(MagicForm)
-      .mount(el);
+      fillConfig,
+    });
+    vueApp.use(MagicForm);
+    plugins.forEach((plugin) => vueApp.use(plugin));
+    vueApp.mount(el);
 
     setTimeout(() => {
       uiService.set('showRule', false);
diff --git a/runtime/tmagic-form/src/types.ts b/runtime/tmagic-form/src/types.ts
new file mode 100644
index 000000000..9f5316f49
--- /dev/null
+++ b/runtime/tmagic-form/src/types.ts
@@ -0,0 +1,9 @@
+import type { Ref } from 'vue';
+
+import { type FormConfig, MForm } from '@tmagic/form';
+import type StageCore from '@tmagic/stage';
+
+export interface AppProps {
+  stage: StageCore;
+  fillConfig: (config: FormConfig, mForm: Ref<InstanceType<typeof MForm>>) => FormConfig;
+}
diff --git a/runtime/tmagic-form/src/useFormConfig.ts b/runtime/tmagic-form/src/useFormConfig.ts
index 60660832f..d966b8731 100644
--- a/runtime/tmagic-form/src/useFormConfig.ts
+++ b/runtime/tmagic-form/src/useFormConfig.ts
@@ -3,10 +3,13 @@ import { computed, nextTick, onBeforeUnmount, reactive, ref } from 'vue';
 import Core from '@tmagic/core';
 import { type FormConfig, initValue, MForm } from '@tmagic/form';
 import type { Id, MApp, MNode } from '@tmagic/schema';
-import type { RemoveData, RuntimeWindow, UpdateData } from '@tmagic/stage';
+import type { RemoveData, UpdateData } from '@tmagic/stage';
 import { getNodePath, replaceChildNode } from '@tmagic/utils';
 
-export const useFormConfig = (contentWindow: RuntimeWindow | null) => {
+import { AppProps } from './types';
+
+export const useFormConfig = (props: AppProps) => {
+  const { contentWindow } = props.stage.renderer;
   const mForm = ref<InstanceType<typeof MForm>>();
 
   const root = ref<MApp>();
@@ -17,14 +20,17 @@ export const useFormConfig = (contentWindow: RuntimeWindow | null) => {
   const config = computed(
     () => root.value?.items?.find((item: MNode) => item.id === curPageId.value) || root.value?.items?.[0],
   );
-
-  const formConfig = computed(() => (config.value?.items || []) as FormConfig);
+  // @ts-ignore
+  const formConfig = computed(() => props.fillConfig((config.value?.items || []) as FormConfig, mForm));
 
   const app = new Core({
     ua: contentWindow?.navigator.userAgent,
     platform: 'editor',
   });
 
+  // @ts-ignore
+  app.mForm = mForm;
+
   const resetValues = () => {
     initValue(mForm.value?.formState, {
       initValues: {},