fix(stage,runtime,ui-react): tmagicRuntimeReady时机修改

fix #198

packages/stage/src/StageRender.ts

@@ -72,7 +72,10 @@ export default class StageRender extends EventEmitter {
    * @param el 将页面挂载到该Dom节点上
    */
   public async mount(el: HTMLDivElement) {
-    if (this.iframe) {
+    if (!this.iframe) {
+      throw Error('mount 失败');
+    }
+
     if (!isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
       // 不同域，使用srcdoc发起异步请求，需要目标地址支持跨域
       let html = await fetch(this.runtimeUrl).then((res) => res.text());
@@ -83,9 +86,8 @@ export default class StageRender extends EventEmitter {
     }
 
     el.appendChild<HTMLIFrameElement>(this.iframe);
-    } else {
+
-      throw Error('mount 失败');
+    this.postTmagicRuntimeReady();
-    }
   }
 
   public getRuntime = (): Promise<Runtime> => {
@@ -111,26 +113,34 @@ export default class StageRender extends EventEmitter {
   }
 
   private loadHandler = async () => {
-    this.contentWindow = this.iframe?.contentWindow as RuntimeWindow;
+    if (!this.contentWindow?.magic) {
+      this.postTmagicRuntimeReady();
+    }
 
-    this.contentWindow.magic = this.getMagicApi();
+    if (!this.contentWindow) return;
 
     if (this.render) {
       const el = await this.render(this.core);
       if (el) {
-        this.iframe?.contentDocument?.body?.appendChild(el);
+        this.contentWindow.document?.body?.appendChild(el);
       }
     }
 
     this.emit('onload');
 
+    injectStyle(this.contentWindow.document, style);
+  };
+
+  private postTmagicRuntimeReady() {
+    this.contentWindow = this.iframe?.contentWindow as RuntimeWindow;
+
+    this.contentWindow.magic = this.getMagicApi();
+
     this.contentWindow.postMessage(
       {
         tmagicRuntimeReady: true,
       },
       '*',
     );
-
+  }
-    injectStyle(this.contentWindow.document, style);
-  };
 }

packages/ui-react/src/useApp.ts

@@ -43,6 +43,7 @@ export default ({ config, methods }: UseAppOptions) => {
 
   useEffect(() => {
     const emitData = {
+      config,
       ...methods,
     };
 

runtime/react/src/playground/App.css

@@ -10,7 +10,7 @@ body,
   overflow: auto;
 }
 
-#app::-webkit-scrollbar {
+::-webkit-scrollbar {
   width: 0;
 }
 

runtime/vue2/src/playground/App.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, nextTick, onMounted, provide, reactive, ref, watch } from 'vue';
+import { computed, defineComponent, nextTick, provide, reactive, ref, watch } from 'vue';
 
 import Core from '@tmagic/core';
 import type { Id, MApp, MNode } from '@tmagic/schema';
@@ -39,7 +39,6 @@ export default defineComponent({
       page && window.magic.onPageElUpdate(page);
     });
 
-    onMounted(() => {
     window.magic?.onRuntimeReady({
       getApp() {
         return app;
@@ -104,7 +103,6 @@ export default defineComponent({
         parent.items.splice(index, 1);
       },
     });
-    });
 
     return {
       pageConfig,
@@ -114,6 +112,10 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+::-webkit-scrollbar {
+  width: 0;
+}
+
 html,
 body,
 #app {
@@ -124,10 +126,6 @@ body,
 #app {
   position: relative;
   overflow: auto;
-
-  &::-webkit-scrollbar {
-    width: 0;
-  }
 }
 
 .magic-ui-container {

runtime/vue3/src/playground/App.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, nextTick, onMounted, provide, reactive, ref, watch } from 'vue';
+import { computed, defineComponent, nextTick, provide, reactive, ref, watch } from 'vue';
 
 import Core from '@tmagic/core';
 import type { Id, MApp, MNode } from '@tmagic/schema';
@@ -39,7 +39,6 @@ export default defineComponent({
       page && window.magic.onPageElUpdate(page);
     });
 
-    onMounted(() => {
     window.magic?.onRuntimeReady({
       getApp() {
         return app;
@@ -104,7 +103,6 @@ export default defineComponent({
         parent.items.splice(index, 1);
       },
     });
-    });
 
     return {
       pageConfig,
@@ -114,6 +112,10 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+::-webkit-scrollbar {
+  width: 0;
+}
+
 html,
 body,
 #app {
@@ -124,10 +126,6 @@ body,
 #app {
   position: relative;
   overflow: auto;
-
-  &::-webkit-scrollbar {
-    width: 0;
-  }
 }
 
 .magic-ui-container {