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

fix #198
Tencent · Jul 29, 2022 · 9858327 · 9858327
1 parent 0a1cf06
commit 9858327
Show file tree

Hide file tree

Showing 5 changed files with 166 additions and 159 deletions.
diff --git a/packages/stage/src/StageRender.ts b/packages/stage/src/StageRender.ts
@@ -72,20 +72,22 @@ export default class StageRender extends EventEmitter {
  * @param el 将页面挂载到该Dom节点上
  */
  public async mount(el: HTMLDivElement) {
- if (this.iframe) {
- if (!isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
- // 不同域，使用srcdoc发起异步请求，需要目标地址支持跨域
- let html = await fetch(this.runtimeUrl).then((res) => res.text());
- // 使用base, 解决相对路径或绝对路径的问题
- const base = `${location.protocol}//${getHost(this.runtimeUrl)}`;
- html = html.replace('<head>', `<head>\n<base href="${base}">`);
- this.iframe.srcdoc = html;
- }
-
- el.appendChild<HTMLIFrameElement>(this.iframe);
- } else {
+ if (!this.iframe) {
  throw Error('mount 失败');
  }
+
+ if (!isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
+ // 不同域，使用srcdoc发起异步请求，需要目标地址支持跨域
+ let html = await fetch(this.runtimeUrl).then((res) => res.text());
+ // 使用base, 解决相对路径或绝对路径的问题
+ const base = `${location.protocol}//${getHost(this.runtimeUrl)}`;
+ html = html.replace('<head>', `<head>\n<base href="${base}">`);
+ this.iframe.srcdoc = html;
+ }
+
+ el.appendChild<HTMLIFrameElement>(this.iframe);
+
+ 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);
- };
+ }
 }
diff --git a/packages/ui-react/src/useApp.ts b/packages/ui-react/src/useApp.ts
@@ -43,6 +43,7 @@ export default ({ config, methods }: UseAppOptions) => {
 
  useEffect(() => {
  const emitData = {
+ config,
  ...methods,
  };
 

diff --git a/runtime/react/src/playground/App.css b/runtime/react/src/playground/App.css
@@ -10,7 +10,7 @@ body,
  overflow: auto;
 }
 
-#app::-webkit-scrollbar {
+::-webkit-scrollbar {
  width: 0;
 }
 

diff --git a/runtime/vue2/src/playground/App.vue b/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,71 +39,69 @@ export default defineComponent({
  page && window.magic.onPageElUpdate(page);
  });
 
- onMounted(() => {
- window.magic?.onRuntimeReady({
- getApp() {
- return app;
- },
-
- updateRootConfig(config: MApp) {
- console.log('update config', config);
- root.value = config;
- app?.setConfig(config, curPageId.value);
- },
-
- updatePageId(id: Id) {
- console.log('update page id', id);
- curPageId.value = id;
- app?.setPage(id);
- },
-
- getSnapElements() {
- return Array.from(document.querySelectorAll<HTMLElement>('[class*=magic-ui][id]'));
- },
-
- select(id: Id) {
- console.log('select config', id);
- selectedId.value = id;
- const el = document.getElementById(`${id}`);
- if (el) return el;
- // 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
- return nextTick().then(() => document.getElementById(`${id}`) as HTMLElement);
- },
-
- add({ config }: UpdateData) {
- console.log('add config', config);
- if (!root.value) throw new Error('error');
- if (!selectedId.value) throw new Error('error');
- const path = getNodePath(selectedId.value, [root.value]);
- const node = path.pop();
- const parent = node?.items ? node : path.pop();
- if (!parent) throw new Error('未找到父节点');
- parent.items?.push(config);
- },
-
- update({ config }: UpdateData) {
- console.log('update config', config);
- if (!root.value) throw new Error('error');
- const path = getNodePath(config.id, [root.value]);
- const node = path.pop();
- const parent = path.pop();
- if (!node) throw new Error('未找到目标节点');
- if (!parent) throw new Error('未找到父节点');
- const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
- parent.items.splice(index, 1, reactive(config));
- },
-
- remove({ id }: RemoveData) {
- if (!root.value) throw new Error('error');
- const path = getNodePath(id, [root.value]);
- const node = path.pop();
- if (!node) throw new Error('未找到目标元素');
- const parent = path.pop();
- if (!parent) throw new Error('未找到父元素');
- const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
- parent.items.splice(index, 1);
- },
- });
+ window.magic?.onRuntimeReady({
+ getApp() {
+ return app;
+ },
+
+ updateRootConfig(config: MApp) {
+ console.log('update config', config);
+ root.value = config;
+ app?.setConfig(config, curPageId.value);
+ },
+
+ updatePageId(id: Id) {
+ console.log('update page id', id);
+ curPageId.value = id;
+ app?.setPage(id);
+ },
+
+ getSnapElements() {
+ return Array.from(document.querySelectorAll<HTMLElement>('[class*=magic-ui][id]'));
+ },
+
+ select(id: Id) {
+ console.log('select config', id);
+ selectedId.value = id;
+ const el = document.getElementById(`${id}`);
+ if (el) return el;
+ // 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
+ return nextTick().then(() => document.getElementById(`${id}`) as HTMLElement);
+ },
+
+ add({ config }: UpdateData) {
+ console.log('add config', config);
+ if (!root.value) throw new Error('error');
+ if (!selectedId.value) throw new Error('error');
+ const path = getNodePath(selectedId.value, [root.value]);
+ const node = path.pop();
+ const parent = node?.items ? node : path.pop();
+ if (!parent) throw new Error('未找到父节点');
+ parent.items?.push(config);
+ },
+
+ update({ config }: UpdateData) {
+ console.log('update config', config);
+ if (!root.value) throw new Error('error');
+ const path = getNodePath(config.id, [root.value]);
+ const node = path.pop();
+ const parent = path.pop();
+ if (!node) throw new Error('未找到目标节点');
+ if (!parent) throw new Error('未找到父节点');
+ const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
+ parent.items.splice(index, 1, reactive(config));
+ },
+
+ remove({ id }: RemoveData) {
+ if (!root.value) throw new Error('error');
+ const path = getNodePath(id, [root.value]);
+ const node = path.pop();
+ if (!node) throw new Error('未找到目标元素');
+ const parent = path.pop();
+ if (!parent) throw new Error('未找到父元素');
+ const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
+ parent.items.splice(index, 1);
+ },
  });
 
  return {
@@ -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 {