@micro-zoe/micro-app 1.0.0-alpha.8 → 1.0.0-alpha.9

package/lib/index.d.ts

@@ -84,16 +84,21 @@ declare module '@micro-zoe/micro-app/prefetch' {
         *  {
         *    name: string,
         *    url: string,
-        *    disableScopecss?: boolean,
-        *    disableSandbox?: boolean,
-        *    disableMemoryRouter?: boolean,
+        *    esmodule: boolean,
+        *    inline: boolean,
+        *    'disable-scopecss': boolean,
+        *    'disable-sandbox': boolean,
+        *    level: number,
+        *    'default-page': string,
+        *    'disable-patch-request': boolean,
         *  },
         *  ...
         * ])
         * Note:
-        *  1: preFetch is asynchronous and is performed only when the browser is idle
-        *  2: disableScopecss, disableSandbox, disableMemoryRouter must be same with micro-app element, if conflict, the one who executes first shall prevail
-        * @param apps micro apps
+        *  1: preFetch is async and is performed only when the browser is idle
+        *  2: options of prefetch preferably match the config of the micro-app element, although this is not required
+        * @param apps micro app options
+        * @param delay delay time
         */
     export default function preFetch(apps: prefetchParamList, delay?: number): void;
     /**

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '1.0.0-alpha.8';
+const version = '1.0.0-alpha.9';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -344,7 +344,8 @@ function isInvalidQuerySelectorKey(key) {
 function isUniqueElement(key) {
     return (/^body$/i.test(key) ||
         /^head$/i.test(key) ||
-        /^html$/i.test(key));
+        /^html$/i.test(key) ||
+        /^title$/i.test(key));
 }
 /**
  * get micro-app element
@@ -578,7 +579,7 @@ const PREFETCH_LEVEL = [1, 2, 3];
  * NOTE:
  * 1. Do not add fetch, XMLHttpRequest, EventSource
  */
-const globalKeyToBeCached = 'window,self,globalThis,Array,Object,String,Boolean,Math,Number,Symbol,Date,Function,Proxy,WeakMap,WeakSet,Set,Map,Reflect,Element,Node,Document,RegExp,Error,TypeError,JSON,isNaN,parseFloat,parseInt,performance,console,decodeURI,encodeURI,decodeURIComponent,encodeURIComponent,navigator,undefined,location,history';
+const globalKeyToBeCached = 'window,self,globalThis,document,Document,Array,Object,String,Boolean,Math,Number,Symbol,Date,Function,Proxy,WeakMap,WeakSet,Set,Map,Reflect,Element,Node,RegExp,Error,TypeError,JSON,isNaN,parseFloat,parseInt,performance,console,decodeURI,encodeURI,decodeURIComponent,encodeURIComponent,navigator,undefined,location,history';
 
 /**
  * fetch source of html, js, css
@@ -2576,12 +2577,20 @@ function flatChildren(parent, app, microAppHead, fiberStyleTasks) {
         else if (dom instanceof HTMLScriptElement) {
             extractScriptElement(dom, parent, app);
         }
-        else if (dom instanceof HTMLMetaElement || dom instanceof HTMLTitleElement) {
-            parent.removeChild(dom);
-        }
         else if (dom instanceof HTMLImageElement && dom.hasAttribute('src')) {
             dom.setAttribute('src', CompletionPath(dom.getAttribute('src'), app.url));
         }
+        /**
+         * Don't remove meta and title, they have some special scenes
+         * e.g.
+         * document.querySelector('meta[name="viewport"]') // for flexible
+         * document.querySelector('meta[name="baseurl"]').baseurl // for api request
+         *
+         * Title point to main app title, child app title used to be compatible with some special scenes
+         */
+        // else if (dom instanceof HTMLMetaElement || dom instanceof HTMLTitleElement) {
+        //   parent.removeChild(dom)
+        // }
     }
 }
 /**
@@ -4335,8 +4344,6 @@ function createMicroFetch(url, target) {
          * When fetch rewrite by baseApp, domScope still active when exec rawWindow.fetch
          * If baseApp operate dom in fetch, it will cause error
          * The same for XMLHttpRequest, EventSource
-         * e.g.
-         * baseApp: <script crossorigin src="https://sgm-static.jd.com/sgm-2.8.0.js" name="SGMH5" sid="6f88a6e4ba4b4ae5acef2ec22c075085" appKey="jdb-adminb2b-pc"></script>
          */
         removeDomScope();
         return rawFetch.call(globalEnv.rawWindow, input, init, ...rests);
@@ -4471,8 +4478,9 @@ class SandBox {
                 this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = this.microAppWindow.__MICRO_APP_BASE_URL__ = baseroute;
             }
             /**
-             * 1. prevent the key deleted during sandBox.stop after rewrite
-             * 2. umd mode will not delete any keys during sandBox.stop
+             * 1. Prevent the key deleted during sandBox.stop after rewrite
+             * 2. Umd mode will not delete any keys during sandBox.stop
+             * 3. It must not be umd mode when call sandbox.start at the first time
              */
             if (!umdMode) {
                 this.initGlobalKeysWhenStart(this.microAppWindow, this.microAppWindow.__MICRO_APP_NAME__, this.microAppWindow.__MICRO_APP_URL__, disablePatchRequest);
@@ -4725,7 +4733,6 @@ class SandBox {
                 configurable: false,
                 enumerable: true,
                 get() {
-                    throttleDeferForSetAppName(appName);
                     // return globalEnv.rawDocument
                     return proxyDocument;
                 },
@@ -4734,7 +4741,6 @@ class SandBox {
                 configurable: false,
                 enumerable: false,
                 get() {
-                    throttleDeferForSetAppName(appName);
                     // return globalEnv.rawRootDocument
                     return MicroDocument;
                 },
@@ -4780,6 +4786,7 @@ class SandBox {
         this.setHijackProperty(microAppWindow, appName);
         if (!disablePatchRequest)
             this.patchRequestApi(microAppWindow, appName, url);
+        this.setScopeProperties(microAppWindow);
     }
     // set hijack Properties to microAppWindow
     setHijackProperty(microAppWindow, appName) {
@@ -4847,6 +4854,18 @@ class SandBox {
             },
         });
     }
+    /**
+     * Init scope keys to microAppWindow, prevent fall to rawWindow from with(microAppWindow)
+     * like: if (!xxx) {}
+     * NOTE:
+     * 1. Symbol.unscopables cannot affect undefined keys
+     * 2. Doesn't use for window.xxx because it fall to proxyWindow
+     */
+    setScopeProperties(microAppWindow) {
+        this.scopeProperties.forEach((key) => {
+            Reflect.set(microAppWindow, key, microAppWindow[key]);
+        });
+    }
     // set location & history for memory router
     setMicroAppRouter(microAppWindow, appName, url) {
         const { microLocation, microHistory } = createMicroRouter(appName, url);
@@ -4907,11 +4926,11 @@ class SandBox {
                 return isFunction(rawValue) ? bindFunctionToRawObject(rawDocument, rawValue, 'DOCUMENT') : rawValue;
             },
             set: (target, key, value) => {
-                // Fix TypeError: Illegal invocation when set document.title
-                Reflect.set(target, key, value);
                 /**
-                 * If the set method returns false, and the assignment happened in strict-mode code, a TypeError will be thrown.
+                 * 1. Fix TypeError: Illegal invocation when set document.title
+                 * 2. If the set method returns false, and the assignment happened in strict-mode code, a TypeError will be thrown.
                  */
+                Reflect.set(target, key, value);
                 return true;
             }
         });
@@ -5403,8 +5422,10 @@ class CreateApp {
         });
         // dispatch afterHidden event to base app
         dispatchLifecyclesEvent(oldContainer, this.name, lifeCycles.AFTERHIDDEN);
-        // called after lifeCyclesEvent
-        (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.removeRouteInfoForKeepAliveApp();
+        if (this.useMemoryRouter) {
+            // called after lifeCyclesEvent
+            (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.removeRouteInfoForKeepAliveApp();
+        }
         this.recordAndReleaseEffect();
         callback && callback();
     }
@@ -5421,8 +5442,10 @@ class CreateApp {
         cloneContainer(this.container, container, false);
         this.container = container;
         this.keepAliveState = keepAliveStates.KEEP_ALIVE_SHOW;
-        // called before lifeCyclesEvent
-        (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.setRouteInfoForKeepAliveApp();
+        if (this.useMemoryRouter) {
+            // called before lifeCyclesEvent
+            (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.setRouteInfoForKeepAliveApp();
+        }
         // dispatch afterShow event to micro-app
         dispatchCustomEventToMicroApp('appstate-change', this.name, {
             appState: 'aftershow',
@@ -5561,10 +5584,16 @@ function defineElement(tagName) {
              * In some special scenes, such as vue's keep-alive, the micro-app will be inserted and deleted twice in an instant
              * So we execute the mount method async and record connectState to prevent repeated rendering
              */
+            const effectiveApp = this.appName && this.appUrl;
             defer(() => {
                 if (this.connectStateMap.get(cacheCount)) {
                     dispatchLifecyclesEvent(this, this.appName, lifeCycles.CREATED);
-                    this.handleConnected();
+                    /**
+                     * If insert micro-app element without name or url, and set them in next action like angular,
+                     * handleConnected will be executed twice, causing the app render repeatedly,
+                     * so we only execute handleConnected() if url and name exist when connectedCallback
+                     */
+                    effectiveApp && this.handleConnected();
                 }
             });
         }
@@ -5943,23 +5972,32 @@ function defineElement(tagName) {
  *  {
  *    name: string,
  *    url: string,
- *    disableScopecss?: boolean,
- *    disableSandbox?: boolean,
- *    disableMemoryRouter?: boolean,
+ *    esmodule: boolean,
+ *    inline: boolean,
+ *    'disable-scopecss': boolean,
+ *    'disable-sandbox': boolean,
+ *    level: number,
+ *    'default-page': string,
+ *    'disable-patch-request': boolean,
  *  },
  *  ...
  * ])
  * Note:
- *  1: preFetch is asynchronous and is performed only when the browser is idle
- *  2: disableScopecss, disableSandbox, disableMemoryRouter must be same with micro-app element, if conflict, the one who executes first shall prevail
- * @param apps micro apps
+ *  1: preFetch is async and is performed only when the browser is idle
+ *  2: options of prefetch preferably match the config of the micro-app element, although this is not required
+ * @param apps micro app options
+ * @param delay delay time
  */
 function preFetch(apps, delay) {
     if (!isBrowser) {
         return logError('preFetch is only supported in browser environment');
     }
     requestIdleCallback(() => {
-        const delayTime = delay !== null && delay !== void 0 ? delay : microApp.options.prefetchDelay;
+        const delayTime = isNumber(delay) ? delay : microApp.options.prefetchDelay;
+        /**
+         * TODO: remove setTimeout
+         * Is there a better way?
+         */
         setTimeout(() => {
             // releasePrefetchEffect()
             preFetchInSerial(apps);