@micro-zoe/micro-app 1.0.0-rc.6 → 1.0.0-rc.8

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '1.0.0-rc.6';
+const version = '1.0.0-rc.8';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -4065,32 +4065,34 @@ function createMicroHistory(appName, microLocation) {
             (_c = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : (_b = _a.sandBox).updateIframeBase) === null || _c === void 0 ? void 0 : _c.call(_b);
         };
     }
-    const pushState = getMicroHistoryMethod('pushState');
-    const replaceState = getMicroHistoryMethod('replaceState');
+    const originalHistory = {
+        pushState: getMicroHistoryMethod('pushState'),
+        replaceState: getMicroHistoryMethod('replaceState'),
+    };
     if (isIframeSandbox(appName)) {
-        return {
-            pushState,
-            replaceState,
+        return assign({
             go(delta) {
                 return rawHistory.go(delta);
             }
-        };
+        }, originalHistory);
     }
     return new Proxy(rawHistory, {
         get(target, key) {
-            if (key === 'state') {
-                return getMicroState(appName);
-            }
-            else if (key === 'pushState') {
-                return pushState;
+            if (key === 'pushState' || key === 'replaceState') {
+                return originalHistory[key];
             }
-            else if (key === 'replaceState') {
-                return replaceState;
+            else if (key === 'state') {
+                return getMicroState(appName);
             }
             return bindFunctionToRawTarget(Reflect.get(target, key), target, 'HISTORY');
         },
         set(target, key, value) {
-            Reflect.set(target, key, value);
+            if (key === 'pushState' || key === 'replaceState') {
+                originalHistory[key] = value;
+            }
+            else {
+                Reflect.set(target, key, value);
+            }
             /**
              * If the set() method returns false, and the assignment happened in strict-mode code, a TypeError will be thrown.
              * e.g. history.state = {}
@@ -4186,7 +4188,6 @@ function reWriteHistoryMethod(method) {
             excludeHiddenApp: true,
             excludePreRender: true,
         }).forEach(appName => {
-            // TODO: 大部分情况下，history.pushState 都是先执行，micro-app后卸载，所以会产生一种情况：跳转到新地址后，search模式会在url上添加参数，卸载后再将参数删除，所以会导致浏览器地址闪烁，是否需要去掉这个功能
             if ((isRouterModeSearch(appName) || isRouterModeState(appName)) && !getMicroPathFromURL(appName)) {
                 const app = appInstanceMap.get(appName);
                 attachRouteToBrowserURL(appName, setMicroPathToURL(appName, app.sandBox.proxyWindow.location), setMicroState(appName, getMicroState(appName), app.sandBox.proxyWindow.location));
@@ -4752,12 +4753,12 @@ function updateMicroLocation(appName, targetFullPath, microLocation, type) {
         microLocation.self.href = targetHref;
     }
     /**
-     * native模式从state中取值，而浏览器地址的修改无法控制，很可能出现浏览器地址和__MICRO_APP_STATE__不一致的情况
-     * 尤其是在初始化和前进后退时，由于vue-router4会主动修改url地址，倒是上述情况经常出现
-     * 为了结局这个问题，在子应用初始化和响应popstate事件后，判断__MICRO_APP_STATE__和浏览器地址是否一致，如果不一致，则将浏览器地址更新为__MICRO_APP_STATE__的地址
-     * 说明：
-     *  1、如果__MICRO_APP_STATE__和url不一样，那么更新url的操作是对的，否则会产生url和渲染页面不一致的问题，开发者会更加困惑
-     *  2、当native模式有多个子应用同时存在，其中一个修改url地址，另外一个并不会改变__MICRO_APP_STATE__，刷新就产生问题，不一致，第二是根据谁更新url？
+     * The native mode also base of history.state, and the modification of the browser url cannot be controlled. It is very likely that the browser url and __MICRO_APP_STATE__ are different.
+     * Especially during init of child or forward and backward of browser, because vue-router@4 will actively modify the browser URL, the above situation often occurs
+     * To solve this problem, after child app is initialized and responds to the popstateEvent, it is determined whether __MICRO_APP_STATE__ and the browser url are different. If they are different, the browser url will updated to the address of __MICRO_APP_STATE__
+     * NOTE:
+     *  1. If __MICRO_APP_STATE__ is different from the URL, then the operation of updating the URL is correct, otherwise there will be a problem of inconsistency between the URL and the rendered page
+     *  2. When there are multiple child app in native mode, if one of them changes the URL address, the other one will not change __MICRO_APP_STATE__, and refresh browser will cause problems
      */
     const rawLocation = globalEnv.rawWindow.location;
     if (isRouterModeCustom(appName) &&
@@ -5848,14 +5849,26 @@ function patchDocumentPrototype(appName, microAppWindow) {
     }
     // query element👇
     function querySelector(selectors) {
-        var _a, _b, _c;
+        var _a;
         const _this = getBindTarget(this);
         if (!selectors ||
             isUniqueElement(selectors) ||
             rawDocument !== _this) {
             return rawMicroQuerySelector.call(_this, selectors);
         }
-        return (_c = (_b = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.querySelector(selectors)) !== null && _b !== void 0 ? _b : rawMicroQuerySelector.call(microDocument, selectors)) !== null && _c !== void 0 ? _c : null;
+        /**
+         * The child app cannot query the base element inside iframe
+         * Same for querySelectorAll
+         *
+         * Scenes:
+         *  1. vue-router@4.x --> createWebHistory(base?: string)
+         *    const baseEl = document.querySelector('base')
+         *    base = (baseEl && baseEl.getAttribute('href')) || '/'
+         *
+         * Issue: https://github.com/micro-zoe/micro-app/issues/1335
+         */
+        const result = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.querySelector(selectors);
+        return result || selectors === 'base' ? result : rawMicroQuerySelector.call(microDocument, selectors);
     }
     function querySelectorAll(selectors) {
         var _a, _b;
@@ -5866,7 +5879,7 @@ function patchDocumentPrototype(appName, microAppWindow) {
             return rawMicroQuerySelectorAll.call(_this, selectors);
         }
         const result = (_b = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selectors)) !== null && _b !== void 0 ? _b : [];
-        return result.length ? result : rawMicroQuerySelectorAll.call(microDocument, selectors);
+        return result.length || selectors === 'base' ? result : rawMicroQuerySelectorAll.call(microDocument, selectors);
     }
     microRootDocument.prototype.querySelector = querySelector;
     microRootDocument.prototype.querySelectorAll = querySelectorAll;
@@ -5899,8 +5912,9 @@ function patchDocumentPrototype(appName, microAppWindow) {
         if (isUniqueElement(key) ||
             isInvalidQuerySelectorKey(key)) {
             return rawMicroGetElementsByTagName.call(_this, key);
+            // just script, not base
         }
-        else if (/^script|base$/i.test(key)) {
+        else if (/^script$/i.test(key)) {
             return rawMicroGetElementsByTagName.call(microDocument, key);
         }
         try {
@@ -6366,7 +6380,7 @@ class IframeSandbox {
         this.escapeProperties = [];
         // Properties escape to rawWindow, cleared when unmount
         this.escapeKeys = new Set();
-        // 初始化和每次跳转时都要更新base的href
+        // Update the base.href when initial and each redirect
         this.updateIframeBase = () => {
             var _a;
             // origin must be child app origin
@@ -8270,8 +8284,7 @@ function defineElement(tagName) {
             if (this.legalAttribute(attr, newVal) &&
                 this[attr === ObservedAttrName.NAME ? 'appName' : 'appUrl'] !== newVal) {
                 if (attr === ObservedAttrName.URL && (!this.appUrl ||
-                    !this.connectStateMap.get(this.connectedCount) // TODO: 这里的逻辑可否再优化一下
-                )) {
+                    !this.connectStateMap.get(this.connectedCount))) {
                     newVal = formatAppURL(newVal, this.appName);
                     if (!newVal) {
                         return logError(`Invalid attribute url ${newVal}`, this.appName);
@@ -8280,13 +8293,11 @@ function defineElement(tagName) {
                     this.handleInitialNameAndUrl();
                 }
                 else if (attr === ObservedAttrName.NAME && (!this.appName ||
-                    !this.connectStateMap.get(this.connectedCount) // TODO: 这里的逻辑可否再优化一下
-                )) {
+                    !this.connectStateMap.get(this.connectedCount))) {
                     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;