@micro-zoe/micro-app 1.0.0-beta.4 → 1.0.0-beta.5

package/lib/index.d.ts

@@ -109,7 +109,7 @@ declare module '@micro-zoe/micro-app/prefetch' {
 }
 
 declare module '@micro-zoe/micro-app/libs/utils' {
-    import type { Func, LocationQueryObject, MicroLocation, AttrsType, fiberTasks } from '@micro-app/types';
+    import type { Func, LocationQueryObject, MicroLocation, AttrsType, fiberTasks, MicroAppElementTagNameMap } from '@micro-app/types';
     export const version = "__MICRO_APP_VERSION__";
     export const isBrowser: boolean;
     export const globalThis: any;
@@ -236,7 +236,7 @@ declare module '@micro-zoe/micro-app/libs/utils' {
     /**
         * Create pure elements
         */
-    export function pureCreateElement<K extends keyof HTMLElementTagNameMap>(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K];
+    export function pureCreateElement<K extends keyof MicroAppElementTagNameMap>(tagName: K, options?: ElementCreationOptions): MicroAppElementTagNameMap[K];
     /**
         * clone origin elements to target
         * @param origin Cloned element

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '1.0.0-beta.4';
+const version = '1.0.0-beta.5';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -1668,21 +1668,33 @@ function runDynamicInlineScript(address, app, scriptInfo) {
  */
 function runCode2InlineScript(address, code, module, scriptElement, attrs, callback) {
     if (module) {
-        // module script is async, transform it to a blob for subsequent operations
+        globalEnv.rawSetAttribute.call(scriptElement, 'type', 'module');
         if (isInlineScript(address)) {
-            const blob = new Blob([code], { type: 'text/javascript' });
-            scriptElement.src = URL.createObjectURL(blob);
+            /**
+             * inline module script cannot convert to blob mode
+             * Issue: https://github.com/micro-zoe/micro-app/issues/805
+             */
+            scriptElement.textContent = code;
         }
         else {
             scriptElement.src = address;
         }
-        globalEnv.rawSetAttribute.call(scriptElement, 'type', 'module');
         if (callback) {
-            callback.moduleCount && callback.moduleCount--;
+            const onloadHandler = () => {
+                callback.moduleCount && callback.moduleCount--;
+                callback(callback.moduleCount === 0);
+            };
             /**
-             * module script will execute onload method only after it insert to document/iframe
+             * NOTE:
+             *  1. module script will execute onload method only after it insert to document/iframe
+             *  2. we can't know when the inline module script onload, and we use defer to simulate, this maybe cause some problems
              */
-            scriptElement.onload = callback.bind(scriptElement, callback.moduleCount === 0);
+            if (isInlineScript(address)) {
+                defer(onloadHandler);
+            }
+            else {
+                scriptElement.onload = onloadHandler;
+            }
         }
     }
     else {
@@ -2354,6 +2366,10 @@ function patchDocument() {
     //   const element = globalEnv.rawCreateTextNode.call(getBindTarget(this), data)
     //   return markElement(element)
     // }
+    rawRootDocument.prototype.createComment = function createComment(data) {
+        const element = globalEnv.rawCreateComment.call(getBindTarget(this), data);
+        return markElement(element);
+    };
     // query element👇
     function querySelector(selectors) {
         var _a, _b;
@@ -2478,8 +2494,6 @@ function rejectMicroAppStyle() {
 }
 
 const globalEnv = {
-    // mark current application as base application
-    __MICRO_APP_BASE_APPLICATION__: true,
     // active sandbox count
     activeSandbox: 0,
 };
@@ -2514,6 +2528,7 @@ function initGlobalEnv() {
         const rawCreateElementNS = rawRootDocument.prototype.createElementNS;
         const rawCreateDocumentFragment = rawRootDocument.prototype.createDocumentFragment;
         const rawCreateTextNode = rawRootDocument.prototype.createTextNode;
+        const rawCreateComment = rawRootDocument.prototype.createComment;
         const rawQuerySelector = rawRootDocument.prototype.querySelector;
         const rawQuerySelectorAll = rawRootDocument.prototype.querySelectorAll;
         const rawGetElementById = rawRootDocument.prototype.getElementById;
@@ -2541,6 +2556,8 @@ function initGlobalEnv() {
         const rawReplaceState = rawWindow.history.replaceState;
         const rawAddEventListener = rawRootEventTarget.prototype.addEventListener;
         const rawRemoveEventListener = rawRootEventTarget.prototype.removeEventListener;
+        // mark current application as base application
+        window.__MICRO_APP_BASE_APPLICATION__ = true;
         assign(globalEnv, {
             supportModuleScript: isSupportModuleScript(),
             // common global vars
@@ -2567,6 +2584,7 @@ function initGlobalEnv() {
             rawCreateElementNS,
             rawCreateDocumentFragment,
             rawCreateTextNode,
+            rawCreateComment,
             rawQuerySelector,
             rawQuerySelectorAll,
             rawGetElementById,
@@ -5741,6 +5759,7 @@ function patchDocumentPrototype(appName, microAppWindow) {
     const microDocument = microAppWindow.document;
     const rawMicroCreateElement = microRootDocument.prototype.createElement;
     const rawMicroCreateTextNode = microRootDocument.prototype.createTextNode;
+    const rawMicroCreateComment = microRootDocument.prototype.createComment;
     const rawMicroQuerySelector = microRootDocument.prototype.querySelector;
     const rawMicroQuerySelectorAll = microRootDocument.prototype.querySelectorAll;
     const rawMicroGetElementById = microRootDocument.prototype.getElementById;
@@ -5755,6 +5774,10 @@ function patchDocumentPrototype(appName, microAppWindow) {
         const element = rawMicroCreateTextNode.call(this, data);
         return updateElementInfo(element, appName);
     };
+    microRootDocument.prototype.createComment = function createComment(data) {
+        const element = rawMicroCreateComment.call(this, data);
+        return updateElementInfo(element, appName);
+    };
     function getDefaultRawTarget(target) {
         return microDocument !== target ? target : rawDocument;
     }
@@ -6539,6 +6562,7 @@ class IframeSandbox {
     }
     createProxyWindow(microAppWindow) {
         const rawWindow = globalEnv.rawWindow;
+        const customProperties = [];
         return new Proxy(microAppWindow, {
             get: (target, key) => {
                 if (key === 'location') {
@@ -6547,6 +6571,9 @@ class IframeSandbox {
                 if (globalPropertyList.includes(key.toString())) {
                     return this.proxyWindow;
                 }
+                if (customProperties.includes(key)) {
+                    return Reflect.get(target, key);
+                }
                 return bindFunctionToRawTarget(Reflect.get(target, key), target);
             },
             set: (target, key, value) => {
@@ -6558,6 +6585,9 @@ class IframeSandbox {
                 if (key === 'location') {
                     return Reflect.set(rawWindow, key, value);
                 }
+                if (!Reflect.has(target, key)) {
+                    customProperties.push(key);
+                }
                 Reflect.set(target, key, value);
                 if (this.escapeProperties.includes(key)) {
                     !Reflect.has(rawWindow, key) && this.escapeKeys.add(key);
@@ -6735,12 +6765,6 @@ class CreateApp {
             this.source.html = html;
             if (!this.isPrefetch && !this.isUnmounted()) {
                 getRootContainer(this.container).mount(this);
-                // Abandonment plan
-                // if (this.isHidden()) {
-                //   getRootContainer(this.container!).unmount()
-                // } else if (!this.isUnmounted()) {
-                //   getRootContainer(this.container!).mount(this)
-                // }
             }
             else if (this.isPrerender) {
                 /**
@@ -6808,8 +6832,7 @@ class CreateApp {
             // mount before prerender exec mount (loading source), set isPrerender to false
             this.isPrerender = false;
             // reset app state to LOADING
-            this.setAppState(appStates.LOADING);
-            return;
+            return this.setAppState(appStates.LOADING);
         }
         this.createSandbox();
         const nextAction = () => {
@@ -6856,7 +6879,6 @@ class CreateApp {
                 this.fiber = fiber;
                 // use in sandbox/effect
                 this.useMemoryRouter = useMemoryRouter;
-                // this.hiddenRouter = hiddenRouter ?? this.hiddenRouter
                 const dispatchBeforeMount = () => dispatchLifecyclesEvent(this.container, this.name, lifeCycles.BEFOREMOUNT);
                 if (this.isPrerender) {
                     ((_d = this.preRenderEvents) !== null && _d !== void 0 ? _d : (this.preRenderEvents = [])).push(dispatchBeforeMount);
@@ -7093,7 +7115,16 @@ class CreateApp {
             // called after lifeCyclesEvent
             (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.removeRouteInfoForKeepAliveApp();
         }
-        (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.recordAndReleaseEffect({ keepAlive: true });
+        /**
+         * Hidden app before the resources are loaded, then unmount the app
+         */
+        if (this.loadSourceLevel !== 2) {
+            getRootContainer(this.container).unmount();
+        }
+        else {
+            this.container = cloneContainer(pureCreateElement('div'), this.container, false);
+            (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.recordAndReleaseEffect({ keepAlive: true });
+        }
         callback === null || callback === void 0 ? void 0 : callback();
     }
     // show app when connectedCallback called with keep-alive