fix: 运行主应用代码主动报错 (#482)

* fix: 运行主应用代码主动报错 * chore: 去除demo层级关系
Tencent · Mar 29, 2023 · 8981b7b · 8981b7b
1 parent 50c9348
commit 8981b7b
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 7 deletions.
diff --git a/examples/main-react/src/index.css b/examples/main-react/src/index.css
@@ -94,7 +94,6 @@ h3 {
   height: 100vh;
   overflow: hidden scroll;
   width: 1px;
-  z-index: 2;
 }
 
 .nav a {

diff --git a/examples/main-vue/src/App.vue b/examples/main-vue/src/App.vue
@@ -191,7 +191,6 @@ h3 {
   height: 100vh;
   overflow: hidden scroll;
   width: 1px;
-  z-index: 2;
 }
 
 #nav a {

diff --git a/packages/wujie-core/src/constant.ts b/packages/wujie-core/src/constant.ts
@@ -34,6 +34,7 @@ export const WUJIE_LOADING_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width=
 export const WUJIE_TIPS_NO_URL = "url参数为空";
 export const WUJIE_TIPS_RELOAD_DISABLED = "子应用调用reload无法生效";
 export const WUJIE_TIPS_STOP_APP = "此报错可以忽略，iframe主动中断主应用代码在子应用运行";
+export const WUJIE_TIPS_STOP_APP_DETAIL = WUJIE_TIPS_STOP_APP + "，详见：https://github.com/Tencent/wujie/issues/54";
 export const WUJIE_TIPS_NO_SUBJECT = "事件订阅数量为空";
 export const WUJIE_TIPS_NO_FETCH = "window上不存在fetch属性，需要自行polyfill";
 export const WUJIE_TIPS_NOT_SUPPORTED = "当前浏览器不支持无界，子应用将采用iframe方式渲染";

diff --git a/packages/wujie-core/src/index.ts b/packages/wujie-core/src/index.ts
@@ -4,10 +4,18 @@ import WuJie, { lifecycle } from "./sandbox";
 import { defineWujieWebComponent, addLoading } from "./shadow";
 import { processAppForHrefJump } from "./sync";
 import { getPlugins } from "./plugin";
-import { wujieSupport, mergeOptions, isFunction, requestIdleCallback, isMatchSyncQueryById, warn } from "./utils";
+import {
+  wujieSupport,
+  mergeOptions,
+  isFunction,
+  requestIdleCallback,
+  isMatchSyncQueryById,
+  warn,
+  stopMainAppRun,
+} from "./utils";
 import { getWujieById, getOptionsById, addSandboxCacheWithOptions } from "./common";
 import { EventBus } from "./event";
-import { WUJIE_TIPS_STOP_APP, WUJIE_TIPS_NOT_SUPPORTED } from "./constant";
+import { WUJIE_TIPS_NOT_SUPPORTED } from "./constant";
 
 export const bus = new EventBus(Date.now().toString());
 
@@ -152,8 +160,7 @@ export type cacheOptions = Omit<preOptions & startOptions, optionProperty> &
  * 上述条件同时成立说明主应用代码在iframe的loading阶段混入进来了，必须中断执行
  */
 if (window.__WUJIE && !window.__POWERED_BY_WUJIE__) {
-  warn(WUJIE_TIPS_STOP_APP);
-  throw new Error(WUJIE_TIPS_STOP_APP);
+  stopMainAppRun();
 }
 
 // 处理子应用链接跳转

diff --git a/packages/wujie-core/src/proxy.ts b/packages/wujie-core/src/proxy.ts
@@ -10,6 +10,7 @@ import {
   isCallable,
   checkProxyFunction,
   warn,
+  stopMainAppRun,
 } from "./utils";
 
 /**
@@ -80,6 +81,8 @@ export function proxyGenerator(
       get: function (_fakeDocument, propKey) {
         const document = window.document;
         const { shadowRoot, proxyLocation } = iframe.contentWindow.__WUJIE;
+        // iframe初始化完成后，webcomponent还未挂在上去，此时运行了主应用代码，必须中止
+        if (!shadowRoot) stopMainAppRun();
         const rawCreateElement = iframe.contentWindow.__WUJIE_RAW_DOCUMENT_CREATE_ELEMENT__;
         const rawCreateTextNode = iframe.contentWindow.__WUJIE_RAW_DOCUMENT_CREATE_TEXT_NODE__;
         // need fix

diff --git a/packages/wujie-core/src/utils.ts b/packages/wujie-core/src/utils.ts
@@ -1,4 +1,10 @@
-import { WUJIE_SCRIPT_ID, WUJIE_TIPS_NO_URL, WUJIE_APP_ID } from "./constant";
+import {
+  WUJIE_SCRIPT_ID,
+  WUJIE_TIPS_NO_URL,
+  WUJIE_APP_ID,
+  WUJIE_TIPS_STOP_APP,
+  WUJIE_TIPS_STOP_APP_DETAIL,
+} from "./constant";
 import { plugin, cacheOptions } from "./index";
 
 export function toArray<T>(array: T | T[]): T[] {
@@ -353,3 +359,8 @@ export function eventTrigger(el: HTMLElement | Window | Document, eventName: str
   }
   el.dispatchEvent(event);
 }
+
+export function stopMainAppRun() {
+  warn(WUJIE_TIPS_STOP_APP_DETAIL);
+  throw new Error(WUJIE_TIPS_STOP_APP);
+}