@micro-zoe/micro-app 1.0.0-beta.6 → 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.6';
+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);
 }
 
 /**
@@ -1394,6 +1398,7 @@ var appStates;
     appStates["CREATED"] = "created";
     appStates["LOADING"] = "loading";
     appStates["LOAD_FAILED"] = "load_failed";
+    appStates["BEFORE_MOUNT"] = "before_mount";
     appStates["MOUNTING"] = "mounting";
     appStates["MOUNTED"] = "mounted";
     appStates["UNMOUNT"] = "unmount";
@@ -3509,7 +3514,7 @@ function isEffectiveApp(appName) {
     const app = appInstanceMap.get(appName);
     /**
      * !!(app && !app.isPrefetch && !app.isHidden())
-     * TODO: 隐藏的keep-alive应用暂时不作为无效应用，原因如下
+     * NOTE: 隐藏的keep-alive应用暂时不作为无效应用，原因如下
      * 1、隐藏后才执行去除浏览器上的微应用的路由信息的操作，导致微应用的路由信息无法去除
      * 2、如果保持隐藏应用内部正常跳转，阻止同步路由信息到浏览器，这样理论上是好的，但是对于location跳转改如何处理？location跳转是基于修改浏览器地址后发送popstate事件实现的，所以应该是在隐藏后不支持通过location进行跳转
      */
@@ -3865,6 +3870,39 @@ function createRouterApi() {
         // clear element scope after navigate
         removeDomScope();
     }
+    /**
+     * navigation handler
+     * @param appName app.name
+     * @param app app instance
+     * @param to router target options
+     * @param replace use router.replace?
+     */
+    function handleNavigate(appName, app, to, replace) {
+        const microLocation = app.sandBox.proxyWindow.location;
+        const targetLocation = createURL(to.path, microLocation.href);
+        // Only get path data, even if the origin is different from microApp
+        const currentFullPath = microLocation.pathname + microLocation.search + microLocation.hash;
+        const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash;
+        if (currentFullPath !== targetFullPath || getMicroPathFromURL(appName) !== targetFullPath) {
+            const methodName = (replace && to.replace !== false) || to.replace === true ? 'replaceState' : 'pushState';
+            navigateWithRawHistory(appName, methodName, targetLocation, to.state);
+            /**
+             * TODO:
+             *  1. 关闭虚拟路由的跳转地址不同：baseRoute + 子应用地址，文档中要说明
+             *  2. 关闭虚拟路由时跳转方式不同：1、基座跳转但不发送popstate事件 2、控制子应用更新location，内部发送popstate事件。
+             *  核心思路：减小对基座的影响(子应用跳转不向基座发送popstate事件，其他操作一致)，但这是必要的吗，只是多了一个触发popstate的操作
+             *  路由优化方案有两种：
+             *    1、减少对基座的影响，主要是解决vue循环刷新的问题
+             *    2、全局发送popstate事件，解决主、子都是vue3的冲突问题
+             *  两者选一个吧，如果选2，则下面这两行代码可以去掉
+             *  NOTE1: history和search模式采用2，这样可以解决vue3的问题，custom采用1，避免vue循环刷新的问题，这样在用户出现问题时各有解决方案。但反过来说，每种方案又分别导致另外的问题，不统一，导致复杂度增高
+             *  NOTE2: 关闭虚拟路由，同时发送popstate事件还是无法解决vue3的问题(毕竟history.state理论上还是会冲突)，那么就没必要发送popstate事件了。
+             */
+            if (isRouterModeCustom(appName)) {
+                updateMicroLocationWithEvent(appName, targetFullPath);
+            }
+        }
+    }
     /**
      * create method of router.push/replace
      * NOTE:
@@ -3883,33 +3921,16 @@ function createRouterApi() {
                  *  1. prerender app or hidden keep-alive app clear and record popstate event, so we cannot control app jump through the API
                  *  2. disable memory-router
                  */
+                /**
+                 * TODO: 子应用开始渲染但是还没渲染完成
+                 *  1、调用跳转改如何处理
+                 *  2、iframe的沙箱还没初始化时执行跳转报错，如何处理。。。
+                 *  3、hidden app 是否支持跳转
+                 */
                 if (getActiveApps({ excludeHiddenApp: true, excludePreRender: true }).includes(appName)) {
                     const app = appInstanceMap.get(appName);
-                    const microLocation = app.sandBox.proxyWindow.location;
-                    const targetLocation = createURL(to.path, microLocation.href);
-                    // Only get path data, even if the origin is different from microApp
-                    const currentFullPath = microLocation.pathname + microLocation.search + microLocation.hash;
-                    const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash;
-                    if (currentFullPath !== targetFullPath || getMicroPathFromURL(appName) !== targetFullPath) {
-                        const methodName = (replace && to.replace !== false) || to.replace === true ? 'replaceState' : 'pushState';
-                        navigateWithRawHistory(appName, methodName, targetLocation, to.state);
-                        /**
-                         * TODO:
-                         *  1. 关闭虚拟路由的跳转地址不同：baseRoute + 子应用地址，文档中要说明
-                         *  2. 关闭虚拟路由时跳转方式不同：1、基座跳转但不发送popstate事件 2、控制子应用更新location，内部发送popstate事件。
-                         * 补充：
-                         *  核心思路：减小对基座的影响(就是子应用跳转不向基座发送popstate事件，其他操作一致)，但这是必要的吗，只是多了一个触发popstate的操作
-                         *  未来的思路有两种：
-                         *    1、减少对基座的影响，主要是解决vue循环刷新的问题
-                         *    2、全局发送popstate事件，解决主、子都是vue3的冲突问题
-                         *  两者选一个吧，如果选2，则下面这两行代码可以去掉
-                         *  要不这样吧，history和search模式采用2，这样可以解决vue3的问题，custom采用1，避免vue循环刷新的问题，这样在用户出现问题时各有解决方案。但反过来说，每种方案又分别导致另外的问题，不统一，导致复杂度增高
-                         *  如果关闭虚拟路由，同时发送popstate事件还是无法解决vue3的问题(毕竟history.state理论上还是会冲突)，那么就没必要发送popstate事件了。
-                         */
-                        if (isRouterModeCustom(appName)) {
-                            updateMicroLocationWithEvent(appName, targetFullPath);
-                        }
-                    }
+                    const navigateAction = () => handleNavigate(appName, app, to, replace);
+                    app.iframe ? app.sandBox.sandboxReady.then(navigateAction) : navigateAction();
                 }
                 else {
                     logWarn('navigation failed, app does not exist or is inactive');
@@ -4639,6 +4660,8 @@ class WithSandBox {
         this.adapter = new Adapter();
         // get scopeProperties and escapeProperties from plugins
         this.getSpecialProperties(appName);
+        // create location, history for child app
+        this.patchRouter(appName, url, this.microAppWindow);
         // patch window of child app
         this.windowEffect = patchWindow(appName, this.microAppWindow, this);
         // patch document of child app
@@ -4658,10 +4681,6 @@ class WithSandBox {
             return;
         this.active = true;
         /* --- memory router part --- start */
-        // create location, history for child app
-        if (isUndefined(this.microAppWindow.location)) {
-            this.setMicroAppRouter(this.microAppWindow.__MICRO_APP_NAME__, this.microAppWindow.__MICRO_APP_URL__, this.microAppWindow);
-        }
         // update microLocation, attach route info to browser url
         this.initRouteState(defaultPage);
         // unique listener of popstate event for sub app
@@ -4744,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), {
@@ -4983,7 +5004,7 @@ class WithSandBox {
         });
     }
     // set location & history for memory router
-    setMicroAppRouter(appName, url, microAppWindow) {
+    patchRouter(appName, url, microAppWindow) {
         const { microLocation, microHistory } = createMicroRouter(appName, url);
         rawDefineProperties(microAppWindow, {
             location: {
@@ -5036,7 +5057,7 @@ class WithSandBox {
 }
 WithSandBox.activeCount = 0; // number of active sandbox
 
-function patchRoute(appName, url, microAppWindow, browserHost) {
+function patchRouter(appName, url, microAppWindow, browserHost) {
     const childStaticLocation = new URL(url);
     const childHost = childStaticLocation.protocol + '//' + childStaticLocation.host;
     const childFullPath = childStaticLocation.pathname + childStaticLocation.search + childStaticLocation.hash;
@@ -5275,6 +5296,15 @@ function patchDocumentPrototype(appName, microAppWindow) {
     const rawMicroGetElementsByClassName = microRootDocument.prototype.getElementsByClassName;
     const rawMicroGetElementsByTagName = microRootDocument.prototype.getElementsByTagName;
     const rawMicroGetElementsByName = microRootDocument.prototype.getElementsByName;
+    const rawMicroElementFromPoint = microRootDocument.prototype.elementFromPoint;
+    const rawMicroCaretRangeFromPoint = microRootDocument.prototype.caretRangeFromPoint;
+    microRootDocument.prototype.caretRangeFromPoint = function caretRangeFromPoint(x, y) {
+        // 这里this指向document才可以获取到子应用的document实例，range才可以被成功生成
+        const element = rawMicroElementFromPoint.call(rawDocument, x, y);
+        const range = rawMicroCaretRangeFromPoint.call(rawDocument, x, y);
+        updateElementInfo(element, appName);
+        return range;
+    };
     microRootDocument.prototype.createElement = function createElement(tagName, options) {
         const element = rawMicroCreateElement.call(this, tagName, options);
         return updateElementInfo(element, appName);
@@ -5790,13 +5820,12 @@ class IframeSandbox {
         this.deleteIframeElement = this.createIframeElement(appName, browserHost);
         this.microAppWindow = this.iframe.contentWindow;
         this.patchIframe(this.microAppWindow, (resolve) => {
-            // TODO: 优化代码
             // create new html to iframe
             this.createIframeTemplate(this.microAppWindow);
             // get escapeProperties from plugins
             this.getSpecialProperties(appName);
             // patch location & history of child app
-            this.proxyLocation = patchRoute(appName, url, this.microAppWindow, browserHost);
+            this.proxyLocation = patchRouter(appName, url, this.microAppWindow, browserHost);
             // patch window of child app
             this.windowEffect = patchWindow$1(appName, this.microAppWindow, this);
             // patch document of child app
@@ -5807,9 +5836,9 @@ class IframeSandbox {
              * create static properties
              * NOTE:
              *  1. execute as early as possible
-             *  2. run after patchRoute & createProxyWindow
+             *  2. run after patchRouter & createProxyWindow
              */
-            this.initStaticGlobalKeys(appName, url);
+            this.initStaticGlobalKeys(appName, url, this.microAppWindow);
             resolve();
         });
     }
@@ -5914,22 +5943,23 @@ class IframeSandbox {
      * create static properties
      * NOTE:
      *  1. execute as early as possible
-     *  2. run after patchRoute & createProxyWindow
+     *  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,
@@ -6026,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 {
@@ -6123,7 +6158,7 @@ IframeSandbox.activeCount = 0; // number of active sandbox
 // micro app instances
 const appInstanceMap = new Map();
 class CreateApp {
-    constructor({ name, url, container, scopecss, useSandbox, inline, iframe, ssrUrl, isPrefetch, prefetchLevel, }) {
+    constructor({ name, url, container, scopecss, useSandbox, inline, iframe, ssrUrl, isPrefetch, prefetchLevel, routerMode, }) {
         this.state = appStates.CREATED;
         this.keepAliveState = null;
         this.loadSourceLevel = 0;
@@ -6133,7 +6168,6 @@ class CreateApp {
         // TODO: 类型优化，加上iframe沙箱
         this.sandBox = null;
         this.fiber = false;
-        this.routerMode = DEFAULT_ROUTER_MODE;
         appInstanceMap.set(name, this);
         // init actions
         this.name = name;
@@ -6142,6 +6176,11 @@ class CreateApp {
         this.scopecss = this.useSandbox && scopecss;
         this.inline = inline !== null && inline !== void 0 ? inline : false;
         this.iframe = iframe !== null && iframe !== void 0 ? iframe : false;
+        /**
+         * NOTE:
+         *  1. Navigate after micro-app created, before mount
+         */
+        this.routerMode = routerMode || DEFAULT_ROUTER_MODE;
         // not exist when prefetch 👇
         this.container = container !== null && container !== void 0 ? container : null;
         this.ssrUrl = ssrUrl !== null && ssrUrl !== void 0 ? ssrUrl : '';
@@ -6237,6 +6276,8 @@ 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;
             /**
@@ -6317,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);
                                 }
                             }
@@ -6350,7 +6396,10 @@ class CreateApp {
             if (isPromise(umdHookMountResult)) {
                 umdHookMountResult
                     .then(() => this.dispatchMountedEvent())
-                    .catch(() => this.dispatchMountedEvent());
+                    .catch((e) => {
+                    logError('An error occurred in window.mount \n', this.name, e);
+                    this.dispatchMountedEvent();
+                });
             }
             else {
                 this.dispatchMountedEvent();
@@ -6502,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',
@@ -7345,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)) {
@@ -7456,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);
@@ -7464,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;
@@ -7615,6 +7671,7 @@ function defineElement(tagName) {
                     inline: this.getDisposeResult('inline'),
                     iframe: this.getDisposeResult('iframe'),
                     ssrUrl: this.ssrUrl,
+                    routerMode: this.getMemoryRouterMode(),
                 });
             };
             /**
@@ -7647,7 +7704,12 @@ function defineElement(tagName) {
          */
         handleMount(app) {
             app.isPrefetch = false;
-            // TODO: Can defer be removed?
+            /**
+             * Fix error when navigate before app.mount by microApp.router.push(...)
+             * Issue: https://github.com/micro-zoe/micro-app/issues/908
+             */
+            app.setAppState(appStates.BEFORE_MOUNT);
+            // exec mount async, simulate the first render scene
             defer(() => this.mount(app));
         }
         /**
@@ -8186,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;
@@ -8201,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;