@micro-zoe/micro-app 1.0.0-beta.6 → 1.0.0-beta.7

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '1.0.0-beta.6';
+const version = '1.0.0-beta.7';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -1394,6 +1394,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 +3510,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 +3866,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 +3917,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 +4656,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 +4677,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
@@ -4983,7 +4998,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 +5051,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 +5290,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 +5814,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,7 +5830,7 @@ 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);
             resolve();
@@ -5914,7 +5937,7 @@ 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;
@@ -6123,7 +6146,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 +6156,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 +6164,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 +6264,7 @@ class CreateApp {
             return this.setAppState(appStates.LOADING);
         }
         this.createSandbox();
+        this.setAppState(appStates.BEFORE_MOUNT);
         const nextAction = () => {
             var _a, _b, _c, _d, _e, _f, _g;
             /**
@@ -6350,7 +6378,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();
@@ -7615,6 +7646,7 @@ function defineElement(tagName) {
                     inline: this.getDisposeResult('inline'),
                     iframe: this.getDisposeResult('iframe'),
                     ssrUrl: this.ssrUrl,
+                    routerMode: this.getMemoryRouterMode(),
                 });
             };
             /**
@@ -7647,7 +7679,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));
         }
         /**