@micro-zoe/micro-app 1.0.0-alpha.0 → 1.0.0-alpha.1

package/lib/index.d.ts

@@ -127,7 +127,7 @@ declare module '@micro-zoe/micro-app/libs/utils' {
     /**
         * create URL as MicroLocation
         */
-    export const createURL: (p: string | URL, b?: string | undefined) => MicroLocation;
+    export const createURL: (path: string | URL, base?: string | undefined) => MicroLocation;
     /**
         * Add address protocol
         * @param url address

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '1.0.0-alpha.0';
+const version = '1.0.0-alpha.1';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -107,7 +107,7 @@ const createURL = (function () {
  * @param url address
  */
 function addProtocol(url) {
-    return url.startsWith('//') ? `${location.protocol}${url}` : url;
+    return url.startsWith('//') ? `${globalThis.location.protocol}${url}` : url;
 }
 /**
  * format URL address
@@ -199,24 +199,15 @@ function promiseStream(promiseList, successCb, errorCb, finallyCb) {
     promiseList.forEach((p, i) => {
         if (isPromise(p)) {
             p.then((res) => {
-                successCb({
-                    data: res,
-                    index: i,
-                });
+                successCb({ data: res, index: i });
                 isFinished();
             }).catch((err) => {
-                errorCb({
-                    error: err,
-                    index: i,
-                });
+                errorCb({ error: err, index: i });
                 isFinished();
             });
         }
         else {
-            successCb({
-                data: p,
-                index: i,
-            });
+            successCb({ data: p, index: i });
             isFinished();
         }
     });
@@ -457,7 +448,15 @@ var keepAliveStates;
     keepAliveStates["KEEP_ALIVE_SHOW"] = "keep_alive_show";
     keepAliveStates["KEEP_ALIVE_HIDDEN"] = "keep_alive_hidden";
 })(keepAliveStates || (keepAliveStates = {}));
-const globalKeyToBeCached = 'window,self,globalThis,Array,Object,String,Boolean,Math,Number,Symbol,Date,Promise,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,EventSource,fetch,XMLHttpRequest';
+/**
+ * global key must be static key, they can not rewrite
+ * e.g.
+ * window.Promise = newValue
+ * new Promise ==> still get old value, not newValue, because they are cached by top function
+ * 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';
 
 /**
  * fetch source of html, js, css
@@ -1015,6 +1014,64 @@ function formatDynamicLink(url, info, app, originLink, replaceStyle) {
     });
 }
 
+class Adapter {
+    constructor() {
+        // keys that can only assigned to rawWindow
+        this.escapeSetterKeyList = [
+            'location',
+        ];
+        // keys that can escape to rawWindow
+        this.staticEscapeProperties = [
+            'System',
+            '__cjsWrapper',
+        ];
+        // keys that scoped in child app
+        this.staticScopeProperties = [
+            'webpackJsonp',
+            'webpackHotUpdate',
+            'Vue',
+        ];
+        this.injectReactHRMProperty();
+    }
+    // TODO: __DEV__ process.env.NODE_ENV !== 'production'
+    // adapter for react
+    injectReactHRMProperty() {
+        if (process.env.NODE_ENV !== 'production') {
+            // react child in non-react env
+            this.staticEscapeProperties.push('__REACT_ERROR_OVERLAY_GLOBAL_HOOK__');
+            // in react parent
+            if (globalEnv.rawWindow.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__) {
+                this.staticScopeProperties = this.staticScopeProperties.concat([
+                    '__REACT_ERROR_OVERLAY_GLOBAL_HOOK__',
+                    '__reactRefreshInjected',
+                ]);
+            }
+        }
+    }
+}
+// Fix conflict of babel-polyfill@6.x
+function fixBabelPolyfill6() {
+    if (globalEnv.rawWindow._babelPolyfill)
+        globalEnv.rawWindow._babelPolyfill = false;
+}
+/**
+ * Fix error of hot reload when parent&child created by create-react-app in development environment
+ * Issue: https://github.com/micro-zoe/micro-app/issues/382
+ */
+function fixReactHMRConflict(app) {
+    var _a;
+    if (process.env.NODE_ENV !== 'production') {
+        const rawReactErrorHook = globalEnv.rawWindow.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__;
+        const childReactErrorHook = (_a = app.sandBox) === null || _a === void 0 ? void 0 : _a.proxyWindow.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__;
+        if (rawReactErrorHook && childReactErrorHook) {
+            globalEnv.rawWindow.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__ = childReactErrorHook;
+            defer(() => {
+                globalEnv.rawWindow.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__ = rawReactErrorHook;
+            });
+        }
+    }
+}
+
 // Record element and map element
 const dynamicElementInMicroAppMap = new WeakMap();
 /**
@@ -1108,6 +1165,12 @@ function invokePrototypeMethod(app, rawMethod, parent, targetChild, passiveChild
             }
             return targetChild;
         }
+        // TODO: __DEV__
+        if (process.env.NODE_ENV !== 'production' &&
+            targetChild instanceof HTMLIFrameElement &&
+            rawMethod === globalEnv.rawAppendChild) {
+            fixReactHMRConflict(app);
+        }
         return invokeRawMethod(rawMethod, hijackElement, targetChild, passiveChild);
     }
     return invokeRawMethod(rawMethod, parent, targetChild, passiveChild);
@@ -2381,8 +2444,7 @@ function releaseEffectDocumentEvent() {
  * Rewrite side-effect events
  * @param microAppWindow micro window
  */
-function effect(microAppWindow) {
-    const appName = microAppWindow.__MICRO_APP_NAME__;
+function effect(appName, microAppWindow) {
     const eventListenerMap = new Map();
     const intervalIdMap = new Map();
     const timeoutIdMap = new Map();
@@ -3309,24 +3371,108 @@ function removeStateAndPathFromBrowser(appName) {
     updateBrowserURL(removeMicroPathFromURL(appName), removeMicroState(appName, globalEnv.rawWindow.history.state));
 }
 
-// Variables that can escape to rawWindow
-const staticEscapeProperties = [
-    '__REACT_ERROR_OVERLAY_GLOBAL_HOOK__',
-    'System',
-    '__cjsWrapper',
-];
-// Variables that can only assigned to rawWindow
-const escapeSetterKeyList = [
-    'location',
-];
+/**
+ * https://developer.mozilla.org/en-US/docs/Web/API/fetch
+ * Promise<Response> fetch(input[, init])
+ * input: string/Request
+ * init?: object
+ * @param url app url
+ * @param target proxy target
+ */
+function createMicroFetch(url, target) {
+    if (!isUndefined(target) && !isFunction(target))
+        return target;
+    const rawFetch = target || globalEnv.rawWindow.fetch;
+    return function microFetch(input, init, ...rests) {
+        if (isString(input) || isURL(input)) {
+            input = createURL(input, url).toString();
+        }
+        return rawFetch.call(globalEnv.rawWindow, input, init, ...rests);
+    };
+}
+/**
+ * https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
+ * https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
+ * @param url app url
+ * @param target proxy target
+ */
+function createMicroXMLHttpRequest(url, target) {
+    if (!isUndefined(target) && !isFunction(target))
+        return target;
+    const rawXMLHttpRequest = target || globalEnv.rawWindow.XMLHttpRequest;
+    return class MicroXMLHttpRequest extends rawXMLHttpRequest {
+        open(method, reqUrl, ...rests) {
+            if ((isString(reqUrl) && !/^f(ile|tp):\/\//.test(reqUrl)) || isURL(reqUrl)) {
+                reqUrl = createURL(reqUrl, url).toString();
+            }
+            super.open(method, reqUrl, ...rests);
+        }
+    };
+}
+function useMicroEventSource() {
+    let eventSourceMap;
+    /**
+     * https://developer.mozilla.org/en-US/docs/Web/API/EventSource
+     * pc = new EventSource(url[, configuration])
+     * url: string/Request
+     * configuration?: object
+     * @param url app url
+     * @param target proxy target
+     */
+    function createMicroEventSource(appName, url, target) {
+        if (!isUndefined(target) && !isFunction(target))
+            return target;
+        const rawEventSource = target || globalEnv.rawWindow.EventSource;
+        return class MicroEventSource extends rawEventSource {
+            constructor(eventSourceUrl, eventSourceInitDict, ...rests) {
+                if (isString(eventSourceUrl) || isURL(eventSourceUrl)) {
+                    eventSourceUrl = createURL(eventSourceUrl, url).toString();
+                }
+                super(eventSourceUrl, eventSourceInitDict, ...rests);
+                if (eventSourceMap) {
+                    const eventSourceList = eventSourceMap.get(appName);
+                    if (eventSourceList) {
+                        eventSourceList.add(this);
+                    }
+                    else {
+                        eventSourceMap.set(appName, new Set([this]));
+                    }
+                }
+                else {
+                    eventSourceMap = new Map([[appName, new Set([this])]]);
+                }
+            }
+            close() {
+                var _a;
+                super.close();
+                (_a = eventSourceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.delete(this);
+            }
+        };
+    }
+    function clearMicroEventSource(appName) {
+        const eventSourceList = eventSourceMap === null || eventSourceMap === void 0 ? void 0 : eventSourceMap.get(appName);
+        if (eventSourceList === null || eventSourceList === void 0 ? void 0 : eventSourceList.size) {
+            eventSourceList.forEach(item => {
+                item.close();
+            });
+            eventSourceList.clear();
+        }
+    }
+    return {
+        createMicroEventSource,
+        clearMicroEventSource,
+    };
+}
+
+const { createMicroEventSource, clearMicroEventSource } = useMicroEventSource();
 const globalPropertyList = ['window', 'self', 'globalThis'];
 class SandBox {
     constructor(appName, url, useMemoryRouter = true) {
         /**
          * Scoped global Properties(Properties that can only get and set in microAppWindow, will not escape to rawWindow)
-         * https://github.com/micro-zoe/micro-app/issues/234
+         * Fix https://github.com/micro-zoe/micro-app/issues/234
          */
-        this.scopeProperties = ['webpackJsonp', 'Vue'];
+        this.scopeProperties = [];
         // Properties that can be escape to rawWindow
         this.escapeProperties = [];
         // Properties newly added to microAppWindow
@@ -3336,14 +3482,15 @@ class SandBox {
         // sandbox state
         this.active = false;
         this.microAppWindow = {}; // Proxy target
+        this.adapter = new Adapter();
         // get scopeProperties and escapeProperties from plugins
         this.getSpecialProperties(appName);
         // create proxyWindow with Proxy(microAppWindow)
         this.proxyWindow = this.createProxyWindow(appName);
-        // inject global properties
-        this.initMicroAppWindow(this.microAppWindow, appName, url, useMemoryRouter);
         // Rewrite global event listener & timeout
-        assign(this, effect(this.microAppWindow));
+        assign(this, effect(appName, this.microAppWindow));
+        // inject global properties
+        this.initStaticGlobalKeys(this.microAppWindow, appName, url, useMemoryRouter);
     }
     start(baseRoute, useMemoryRouter = true, defaultPage = '') {
         if (!this.active) {
@@ -3356,20 +3503,34 @@ class SandBox {
             else {
                 this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = this.microAppWindow.__MICRO_APP_BASE_URL__ = baseRoute;
             }
+            // prevent the key deleted during sandBox.stop after rewrite
+            this.initGlobalKeysWhenStart(this.microAppWindow, this.proxyWindow.__MICRO_APP_NAME__, this.proxyWindow.__MICRO_APP_URL__);
             if (++SandBox.activeCount === 1) {
                 effectDocumentEvent();
                 patchElementPrototypeMethods();
                 listenUmountOfNestedApp();
             }
-            // BUG FIX: bable-polyfill@6.x
-            globalEnv.rawWindow._babelPolyfill && (globalEnv.rawWindow._babelPolyfill = false);
+            fixBabelPolyfill6();
         }
     }
-    stop(keepRouteState = false) {
+    stop(keepRouteState, clearEventSource) {
         if (this.active) {
             this.releaseEffect();
             this.microAppWindow.microApp.clearDataListener();
             this.microAppWindow.microApp.clearGlobalDataListener();
+            if (this.removeHistoryListener) {
+                this.clearRouteState(keepRouteState);
+                // release listener of popstate
+                this.removeHistoryListener();
+            }
+            if (clearEventSource) {
+                clearMicroEventSource(this.proxyWindow.__MICRO_APP_NAME__);
+            }
+            /**
+             * NOTE:
+             *  1. injectedKeys and escapeKeys must be placed at the back
+             *  2. if key in initial microAppWindow, and then rewrite, this key will be delete from microAppWindow when stop, and lost when restart
+             */
             this.injectedKeys.forEach((key) => {
                 Reflect.deleteProperty(this.microAppWindow, key);
             });
@@ -3378,11 +3539,6 @@ class SandBox {
                 Reflect.deleteProperty(globalEnv.rawWindow, key);
             });
             this.escapeKeys.clear();
-            if (this.removeHistoryListener) {
-                this.clearRouteState(keepRouteState);
-                // release listener of popstate
-                this.removeHistoryListener();
-            }
             if (--SandBox.activeCount === 0) {
                 releaseEffectDocumentEvent();
                 releasePatches();
@@ -3409,15 +3565,16 @@ class SandBox {
         rebuildDataCenterSnapshot(this.microAppWindow.microApp);
     }
     /**
-     * get scopeProperties and escapeProperties from plugins
+     * get scopeProperties and escapeProperties from plugins & adapter
      * @param appName app name
      */
     getSpecialProperties(appName) {
         var _a;
-        if (!isPlainObject(microApp.plugins))
-            return;
-        this.commonActionForSpecialProperties(microApp.plugins.global);
-        this.commonActionForSpecialProperties((_a = microApp.plugins.modules) === null || _a === void 0 ? void 0 : _a[appName]);
+        this.scopeProperties = this.scopeProperties.concat(this.adapter.staticScopeProperties);
+        if (isPlainObject(microApp.plugins)) {
+            this.commonActionForSpecialProperties(microApp.plugins.global);
+            this.commonActionForSpecialProperties((_a = microApp.plugins.modules) === null || _a === void 0 ? void 0 : _a[appName]);
+        }
     }
     // common action for global plugins and module plugins
     commonActionForSpecialProperties(plugins) {
@@ -3451,7 +3608,7 @@ class SandBox {
             },
             set: (target, key, value) => {
                 if (this.active) {
-                    if (escapeSetterKeyList.includes(key)) {
+                    if (this.adapter.escapeSetterKeyList.includes(key)) {
                         Reflect.set(rawWindow, key, value);
                     }
                     else if (
@@ -3475,7 +3632,8 @@ class SandBox {
                         this.injectedKeys.add(key);
                     }
                     if ((this.escapeProperties.includes(key) ||
-                        (staticEscapeProperties.includes(key) && !Reflect.has(rawWindow, key))) &&
+                        (this.adapter.staticEscapeProperties.includes(key) &&
+                            !Reflect.has(rawWindow, key))) &&
                         !this.scopeProperties.includes(key)) {
                         Reflect.set(rawWindow, key, value);
                         this.escapeKeys.add(key);
@@ -3531,26 +3689,35 @@ class SandBox {
      * @param microAppWindow micro window
      * @param appName app name
      * @param url app url
+     * @param useMemoryRouter whether use memory router
      */
-    initMicroAppWindow(microAppWindow, appName, url, useMemoryRouter) {
+    initStaticGlobalKeys(microAppWindow, appName, url, useMemoryRouter) {
         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_WINDOW__ = microAppWindow;
+        microAppWindow.rawWindow = globalEnv.rawWindow;
+        microAppWindow.rawDocument = globalEnv.rawDocument;
         microAppWindow.microApp = assign(new EventCenterForMicroApp(appName), {
             removeDomScope,
             pureCreateElement,
             router,
         });
-        microAppWindow.rawWindow = globalEnv.rawWindow;
-        microAppWindow.rawDocument = globalEnv.rawDocument;
-        microAppWindow.hasOwnProperty = (key) => rawHasOwnProperty.call(microAppWindow, key) || rawHasOwnProperty.call(globalEnv.rawWindow, key);
         this.setMappingPropertiesWithRawDescriptor(microAppWindow);
-        this.setHijackProperties(microAppWindow, appName);
-        // this.patchHijackRequest(microAppWindow, appName, url)
         if (useMemoryRouter)
-            this.setRouterApi(microAppWindow, appName, url);
+            this.setMicroAppRouter(microAppWindow, appName, url);
+    }
+    /**
+     * init global properties of microAppWindow when exec sandBox.start
+     * @param microAppWindow micro window
+     * @param appName app name
+     * @param url app url
+     */
+    initGlobalKeysWhenStart(microAppWindow, appName, url) {
+        microAppWindow.hasOwnProperty = (key) => rawHasOwnProperty.call(microAppWindow, key) || rawHasOwnProperty.call(globalEnv.rawWindow, key);
+        this.setHijackProperties(microAppWindow, appName);
+        this.patchHijackRequest(microAppWindow, appName, url);
     }
     // properties associated with the native window
     setMappingPropertiesWithRawDescriptor(microAppWindow) {
@@ -3584,7 +3751,7 @@ class SandBox {
         let modifiedEval, modifiedImage;
         rawDefineProperties(microAppWindow, {
             document: {
-                configurable: false,
+                configurable: true,
                 enumerable: true,
                 get() {
                     throttleDeferForSetAppName(appName);
@@ -3615,65 +3782,46 @@ class SandBox {
             },
         });
     }
-    // private patchHijackRequest (microAppWindow: microAppWindowType, appName: string, url: string) {
-    //   let modifiedImage: unknown
-    //   function EventSource (...rests: any[]) {
-    //     console.log(appName + ' EventSource', rests)
-    //     if (typeof rests[0] === 'string') {
-    //       rests[0] = (new URL(rests[0], url)).toString()
-    //     }
-    //     return new globalEnv.rawWindow.EventSource(...rests)
-    //   }
-    //   function patchFetch (...rests: any[]) {
-    //     console.log(appName + ' fetch', rests)
-    //     if (typeof rests[0] === 'string') {
-    //       rests[0] = (new URL(rests[0], url)).toString()
-    //     }
-    //     return globalEnv.rawWindow.fetch(...rests)
-    //   }
-    //   const rawXMLHttpRequest = globalEnv.rawWindow.XMLHttpRequest
-    //   class XMLHttpRequest extends rawXMLHttpRequest {
-    //     open (method: string, reqUrl: string) {
-    //       console.log(appName + ' XMLHttpRequest', method, reqUrl)
-    //       reqUrl = (new URL(reqUrl, url)).toString()
-    //       super.open(method, reqUrl)
-    //     }
-    //   }
-    //   rawDefineProperties(microAppWindow, {
-    //     EventSource: {
-    //       configurable: true,
-    //       enumerable: true,
-    //       get () {
-    //         return EventSource
-    //       },
-    //       set: (value) => {
-    //         modifiedImage = value
-    //       },
-    //     },
-    //     fetch: {
-    //       configurable: true,
-    //       enumerable: true,
-    //       get () {
-    //         return patchFetch
-    //       },
-    //       set: (value) => {
-    //         modifiedImage = value
-    //       },
-    //     },
-    //     XMLHttpRequest: {
-    //       configurable: true,
-    //       enumerable: true,
-    //       get () {
-    //         return XMLHttpRequest
-    //       },
-    //       set: (value) => {
-    //         modifiedImage = value
-    //       },
-    //     },
-    //   })
-    // }
+    // rewrite fetch, XMLHttpRequest, EventSource
+    patchHijackRequest(microAppWindow, appName, url) {
+        let microFetch = createMicroFetch(url);
+        let microXMLHttpRequest = createMicroXMLHttpRequest(url);
+        let microEventSource = createMicroEventSource(appName, url);
+        rawDefineProperties(microAppWindow, {
+            fetch: {
+                configurable: true,
+                enumerable: true,
+                get() {
+                    return microFetch;
+                },
+                set(value) {
+                    microFetch = createMicroFetch(url, value);
+                },
+            },
+            XMLHttpRequest: {
+                configurable: true,
+                enumerable: true,
+                get() {
+                    return microXMLHttpRequest;
+                },
+                set(value) {
+                    microXMLHttpRequest = createMicroXMLHttpRequest(url, value);
+                },
+            },
+            EventSource: {
+                configurable: true,
+                enumerable: true,
+                get() {
+                    return microEventSource;
+                },
+                set(value) {
+                    microEventSource = createMicroEventSource(appName, url, value);
+                },
+            },
+        });
+    }
     // set location & history for memory router
-    setRouterApi(microAppWindow, appName, url) {
+    setMicroAppRouter(microAppWindow, appName, url) {
         const { microLocation, microHistory } = createMicroRouter(appName, url);
         rawDefineProperties(microAppWindow, {
             location: {
@@ -3990,8 +4138,13 @@ class CreateApp {
         else if (this.umdMode && this.container.childElementCount) {
             cloneContainer(this.container, this.source.html, false);
         }
-        // this.container maybe contains micro-app element, stop sandbox should exec after cloneContainer
-        (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.stop(this.keepRouteState && !destroy);
+        /**
+         * this.container maybe contains micro-app element, stop sandbox should exec after cloneContainer
+         * NOTE:
+         * 1. if destroy is true, clear route state
+         * 2. umd mode and keep-alive will not clear EventSource
+         */
+        (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.stop(this.keepRouteState && !destroy, !this.umdMode || destroy);
         if (!getActiveApps().length) {
             releasePatchSetAttribute();
         }