@micro-zoe/micro-app 1.0.0-beta.7 → 1.0.0-rc.0

package/lib/index.d.ts

@@ -62,6 +62,7 @@ declare module '@micro-zoe/micro-app/micro_app' {
     export function renderApp(options: RenderAppOptions): Promise<boolean>;
     export class MicroApp extends EventCenterForBaseApp implements MicroAppBaseType {
             tagName: string;
+            hasInit: boolean;
             options: OptionsType;
             router: Router;
             preFetch: typeof preFetch;

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '1.0.0-beta.7';
+const version = '1.0.0-rc.0';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -357,20 +357,23 @@ function pureCreateElement(tagName, options) {
  * @param deep deep clone or transfer dom
  */
 function cloneContainer(target, origin, deep) {
-    target.innerHTML = '';
-    if (deep) {
-        // TODO: ShadowRoot兼容，ShadowRoot不能直接使用cloneNode
-        const clonedNode = origin.cloneNode(true);
-        const fragment = document.createDocumentFragment();
-        Array.from(clonedNode.childNodes).forEach((node) => {
-            fragment.appendChild(node);
-        });
-        target.appendChild(fragment);
-    }
-    else {
-        Array.from(origin.childNodes).forEach((node) => {
-            target.appendChild(node);
-        });
+    // 在基座接受到afterhidden方法后立即执行unmount，彻底destroy应用时，因为unmount时同步执行，所以this.container为null后才执行cloneContainer
+    if (origin) {
+        target.innerHTML = '';
+        if (deep) {
+            // TODO: ShadowRoot兼容，ShadowRoot不能直接使用cloneNode
+            const clonedNode = origin.cloneNode(true);
+            const fragment = document.createDocumentFragment();
+            Array.from(clonedNode.childNodes).forEach((node) => {
+                fragment.appendChild(node);
+            });
+            target.appendChild(fragment);
+        }
+        else {
+            Array.from(origin.childNodes).forEach((node) => {
+                target.appendChild(node);
+            });
+        }
     }
     return target;
 }
@@ -606,10 +609,11 @@ function dispatchLifecyclesEvent(element, appName, lifecycleName, error) {
  * @param detail event detail
  */
 function dispatchCustomEventToMicroApp(app, eventName, detail = {}) {
+    var _a;
     const event = new CustomEvent(eventName, {
         detail,
     });
-    app.sandBox.microAppWindow.dispatchEvent(event);
+    (_a = app.sandBox) === null || _a === void 0 ? void 0 : _a.microAppWindow.dispatchEvent(event);
 }
 
 /**
@@ -4759,6 +4763,8 @@ class WithSandBox {
         microAppWindow.__MICRO_APP_WINDOW__ = microAppWindow;
         microAppWindow.__MICRO_APP_PRE_RENDER__ = false;
         microAppWindow.__MICRO_APP_UMD_MODE__ = false;
+        microAppWindow.__MICRO_APP_SANDBOX__ = this;
+        microAppWindow.__MICRO_APP_SANDBOX_TYPE__ = 'with';
         microAppWindow.rawWindow = globalEnv.rawWindow;
         microAppWindow.rawDocument = globalEnv.rawDocument;
         microAppWindow.microApp = assign(new EventCenterForMicroApp(appName), {
@@ -5832,7 +5838,7 @@ class IframeSandbox {
              *  1. execute as early as possible
              *  2. run after patchRouter & createProxyWindow
              */
-            this.initStaticGlobalKeys(appName, url);
+            this.initStaticGlobalKeys(appName, url, this.microAppWindow);
             resolve();
         });
     }
@@ -5939,20 +5945,21 @@ class IframeSandbox {
      *  1. execute as early as possible
      *  2. run after patchRouter & createProxyWindow
      */
-    initStaticGlobalKeys(appName, url) {
-        this.microAppWindow.__MICRO_APP_ENVIRONMENT__ = true;
-        this.microAppWindow.__MICRO_APP_NAME__ = appName;
-        this.microAppWindow.__MICRO_APP_URL__ = url;
-        this.microAppWindow.__MICRO_APP_PUBLIC_PATH__ = getEffectivePath(url);
-        this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = '';
-        this.microAppWindow.__MICRO_APP_WINDOW__ = this.microAppWindow;
-        this.microAppWindow.__MICRO_APP_PRE_RENDER__ = false;
-        this.microAppWindow.__MICRO_APP_UMD_MODE__ = false;
-        this.microAppWindow.__MICRO_APP_SANDBOX__ = this;
-        this.microAppWindow.__MICRO_APP_PROXY_WINDOW__ = this.proxyWindow;
-        this.microAppWindow.rawWindow = globalEnv.rawWindow;
-        this.microAppWindow.rawDocument = globalEnv.rawDocument;
-        this.microAppWindow.microApp = assign(new EventCenterForMicroApp(appName), {
+    initStaticGlobalKeys(appName, url, microAppWindow) {
+        microAppWindow.__MICRO_APP_ENVIRONMENT__ = true;
+        microAppWindow.__MICRO_APP_NAME__ = appName;
+        microAppWindow.__MICRO_APP_URL__ = url;
+        microAppWindow.__MICRO_APP_PUBLIC_PATH__ = getEffectivePath(url);
+        microAppWindow.__MICRO_APP_BASE_ROUTE__ = '';
+        microAppWindow.__MICRO_APP_WINDOW__ = microAppWindow;
+        microAppWindow.__MICRO_APP_PRE_RENDER__ = false;
+        microAppWindow.__MICRO_APP_UMD_MODE__ = false;
+        microAppWindow.__MICRO_APP_PROXY_WINDOW__ = this.proxyWindow;
+        microAppWindow.__MICRO_APP_SANDBOX__ = this;
+        microAppWindow.__MICRO_APP_SANDBOX_TYPE__ = 'iframe';
+        microAppWindow.rawWindow = globalEnv.rawWindow;
+        microAppWindow.rawDocument = globalEnv.rawDocument;
+        microAppWindow.microApp = assign(new EventCenterForMicroApp(appName), {
             removeDomScope,
             pureCreateElement,
             location: this.proxyLocation,
@@ -6049,7 +6056,12 @@ class IframeSandbox {
             (function iframeLocationReady() {
                 setTimeout(() => {
                     try {
-                        if (microAppWindow.document === oldMicroDocument) {
+                        /**
+                         * NOTE:
+                         *  1. In browser, iframe document will be recreated after iframe initial
+                         *  2. In jest, iframe document is always the same
+                         */
+                        if (microAppWindow.document === oldMicroDocument && !false) {
                             iframeLocationReady();
                         }
                         else {
@@ -6264,6 +6276,7 @@ class CreateApp {
             return this.setAppState(appStates.LOADING);
         }
         this.createSandbox();
+        // place outside of nextAction, as nextAction may execute async
         this.setAppState(appStates.BEFORE_MOUNT);
         const nextAction = () => {
             var _a, _b, _c, _d, _e, _f, _g;
@@ -6345,6 +6358,11 @@ class CreateApp {
                                     this.handleMounted(this.umdHookMount(microApp.getData(this.name, true)));
                                 }
                                 catch (e) {
+                                    /**
+                                     * TODO:
+                                     *  1. 是否应该直接抛出错误
+                                     *  2. 是否应该触发error生命周期
+                                     */
                                     logError('An error occurred in window.mount \n', this.name, e);
                                 }
                             }
@@ -6533,8 +6551,12 @@ class CreateApp {
         var _a, _b;
         this.setKeepAliveState(keepAliveStates.KEEP_ALIVE_HIDDEN);
         /**
-         * event should dispatch before clone node
-         * dispatch afterHidden event to micro-app
+         * afterhidden事件需要提前发送，原因如下：
+         *  1. 此时发送this.container还指向micro-app元素，而不是临时div元素
+         *  2. 沙箱执行recordAndReleaseEffect后会将appstate-change方法也清空，之后再发送子应用也接受不到了
+         *  3. 对于this.loadSourceLevel !== 2的情况，unmount是同步执行的，所以也会出现2的问题
+         * TODO: 有可能导致的问题
+         *  1. 在基座接受到afterhidden方法后立即执行unmount，彻底destroy应用时，因为unmount时同步执行，所以this.container为null后才执行cloneContainer
          */
         dispatchCustomEventToMicroApp(this, 'appstate-change', {
             appState: 'afterhidden',
@@ -7376,8 +7398,6 @@ function defineElement(tagName) {
              */
             this.handleAttributeUpdate = () => {
                 this.isWaiting = false;
-                if (!this.connectStateMap.get(this.connectedCount))
-                    return;
                 const formatAttrName = formatAppName(this.getAttribute('name'));
                 const formatAttrUrl = formatAppURL(this.getAttribute('url'), this.appName);
                 if (this.legalAttribute('name', formatAttrName) && this.legalAttribute('url', formatAttrUrl)) {
@@ -7487,7 +7507,9 @@ function defineElement(tagName) {
         attributeChangedCallback(attr, _oldVal, newVal) {
             if (this.legalAttribute(attr, newVal) &&
                 this[attr === ObservedAttrName.NAME ? 'appName' : 'appUrl'] !== newVal) {
-                if (attr === ObservedAttrName.URL && !this.appUrl) {
+                if (attr === ObservedAttrName.URL && (!this.appUrl ||
+                    !this.connectStateMap.get(this.connectedCount) // TODO: 这里的逻辑可否再优化一下
+                )) {
                     newVal = formatAppURL(newVal, this.appName);
                     if (!newVal) {
                         return logError(`Invalid attribute url ${newVal}`, this.appName);
@@ -7495,11 +7517,14 @@ function defineElement(tagName) {
                     this.appUrl = newVal;
                     this.handleInitialNameAndUrl();
                 }
-                else if (attr === ObservedAttrName.NAME && !this.appName) {
+                else if (attr === ObservedAttrName.NAME && (!this.appName ||
+                    !this.connectStateMap.get(this.connectedCount) // TODO: 这里的逻辑可否再优化一下
+                )) {
                     const formatNewName = formatAppName(newVal);
                     if (!formatNewName) {
                         return logError(`Invalid attribute name ${newVal}`, this.appName);
                     }
+                    // TODO: 当micro-app还未插入文档中就修改name，逻辑可否再优化一下
                     if (this.cacheData) {
                         microApp.setData(formatNewName, this.cacheData);
                         this.cacheData = null;
@@ -8223,6 +8248,7 @@ class MicroApp extends EventCenterForBaseApp {
     constructor() {
         super(...arguments);
         this.tagName = 'micro-app';
+        this.hasInit = false;
         this.options = {};
         this.router = router;
         this.preFetch = preFetch;
@@ -8238,6 +8264,15 @@ class MicroApp extends EventCenterForBaseApp {
         if (!isBrowser || !window.customElements) {
             return logError('micro-app is not supported in this environment');
         }
+        /**
+         * TODO: 优化代码和逻辑
+         *  1、同一个基座中initGlobalEnv不能被多次执行，否则会导致死循环
+         *  2、判断逻辑是否放在initGlobalEnv中合适？--- 不合适
+         */
+        if (this.hasInit) {
+            return logError('microApp.start executed repeatedly');
+        }
+        this.hasInit = true;
         if (options === null || options === void 0 ? void 0 : options.tagName) {
             if (/^micro-app(-\S+)?/.test(options.tagName)) {
                 this.tagName = options.tagName;