@micro-zoe/micro-app 1.0.0-rc.1 → 1.0.0-rc.2

package/lib/index.d.ts

@@ -309,7 +309,21 @@ declare module '@micro-zoe/micro-app/libs/utils' {
         * @param args arguments
         */
     export function execMicroAppGlobalHook(fn: Func | null, appName: string, hookName: string, ...args: unknown[]): void;
+    /**
+        * remove all childNode from target node
+        * @param $dom target node
+        */
     export function clearDOM($dom: HTMLElement | ShadowRoot | Document): void;
+    type BaseHTMLElementType = HTMLElement & {
+            new (): HTMLElement;
+            prototype: HTMLElement;
+    };
+    /**
+        * get HTMLElement from base app
+        * @returns HTMLElement
+        */
+    export function getBaseHTMLElement(): BaseHTMLElementType;
+    export {};
 }
 
 declare module '@micro-zoe/micro-app/interact' {

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '1.0.0-rc.1';
+const version = '1.0.0-rc.2';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -344,7 +344,7 @@ function removeDomScope() {
  * Create pure elements
  */
 function pureCreateElement(tagName, options) {
-    const element = document.createElement(tagName, options);
+    const element = (window.rawDocument || document).createElement(tagName, options);
     if (element.__MICRO_APP_NAME__)
         delete element.__MICRO_APP_NAME__;
     element.__PURE_ELEMENT__ = true;
@@ -550,11 +550,23 @@ function execMicroAppGlobalHook(fn, appName, hookName, ...args) {
         logError(`An error occurred in app ${appName} window.${hookName} \n`, null, e);
     }
 }
+/**
+ * remove all childNode from target node
+ * @param $dom target node
+ */
 function clearDOM($dom) {
     while ($dom === null || $dom === void 0 ? void 0 : $dom.firstChild) {
         $dom.removeChild($dom.firstChild);
     }
 }
+/**
+ * get HTMLElement from base app
+ * @returns HTMLElement
+ */
+function getBaseHTMLElement() {
+    var _a;
+    return (((_a = window.rawWindow) === null || _a === void 0 ? void 0 : _a.HTMLElement) || window.HTMLElement);
+}
 
 function formatEventInfo(event, element) {
     Object.defineProperties(event, {
@@ -1524,8 +1536,7 @@ function isInlineMode(app, scriptInfo) {
     return (app.inline ||
         scriptInfo.appSpace[app.name].inline ||
         isTypeModule(app, scriptInfo) ||
-        isSpecialScript(app, scriptInfo) ||
-        app.iframe);
+        isSpecialScript(app, scriptInfo));
 }
 // TODO: iframe重新插入window前后不一致，通过iframe Function创建的函数无法复用
 function getEffectWindow(app) {
@@ -2687,148 +2698,6 @@ function bindFunctionToRawTarget(value, rawTarget, key = 'WINDOW') {
     return value;
 }
 
-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.injectReactHMRProperty();
-    }
-    // adapter for react
-    injectReactHMRProperty() {
-        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;
-            });
-        }
-    }
-}
-/**
- * reDefine parentNode of html
- * Scenes:
- *  1. element-ui@2/lib/utils/popper.js
- *    var parent = element.parentNode;
- *    // root is child app window
- *    if (parent === root.document) ...
- */
-function throttleDeferForParentNode(microDocument) {
-    const html = globalEnv.rawDocument.firstElementChild;
-    if ((html === null || html === void 0 ? void 0 : html.parentNode) === globalEnv.rawDocument) {
-        setParentNode(html, microDocument);
-        defer(() => {
-            setParentNode(html, globalEnv.rawDocument);
-        });
-    }
-}
-/**
- * Modify the point of parentNode
- * @param target target Node
- * @param value parentNode
- */
-function setParentNode(target, value) {
-    const descriptor = Object.getOwnPropertyDescriptor(target, 'parentNode');
-    if (!descriptor || descriptor.configurable) {
-        rawDefineProperty(target, 'parentNode', {
-            value,
-            configurable: true,
-        });
-    }
-}
-/**
- * update dom tree of target dom
- * @param container target dom
- * @param appName app name
- */
-function patchElementTree(container, appName) {
-    const children = Array.from(container.children);
-    children.length && children.forEach((child) => {
-        patchElementTree(child, appName);
-    });
-    for (const child of children) {
-        updateElementInfo(child, appName);
-    }
-}
-/**
- * rewrite baseURI, ownerDocument, __MICRO_APP_NAME__ of target node
- * @param node target node
- * @param appName app name
- * @returns target node
- */
-function updateElementInfo(node, appName) {
-    var _a, _b;
-    const proxyWindow = (_b = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.sandBox) === null || _b === void 0 ? void 0 : _b.proxyWindow;
-    if (isNode(node) &&
-        !node.__MICRO_APP_NAME__ &&
-        !node.__PURE_ELEMENT__ &&
-        proxyWindow) {
-        /**
-         * TODO:
-         *  1. 测试baseURI和ownerDocument在with沙箱中是否正确
-         *    经过验证with沙箱不能重写ownerDocument，否则react点击事件会触发两次
-         *  2. with沙箱所有node设置__MICRO_APP_NAME__都使用updateElementInfo
-         *  3. 性能: defineProperty的性能肯定不如直接设置
-        */
-        rawDefineProperties(node, {
-            baseURI: {
-                configurable: true,
-                get: () => proxyWindow.location.href,
-            },
-            __MICRO_APP_NAME__: {
-                configurable: true,
-                writable: true,
-                value: appName,
-            },
-        });
-        if (isIframeSandbox(appName)) {
-            rawDefineProperty(node, 'ownerDocument', {
-                configurable: true,
-                get: () => proxyWindow.document,
-            });
-        }
-    }
-    return node;
-}
-
 /**
  * create proxyDocument and MicroDocument, rewrite document of child app
  * @param appName app name
@@ -2955,11 +2824,36 @@ function createProxyDocument(appName, sandbox) {
             eventListenerMap.clear();
         }
     };
+    const genProxyDocumentProps = () => {
+        var _a;
+        // microApp framework built-in Proxy
+        const builtInProxyProps = new Map([
+            ['onclick', (value) => {
+                    if (isFunction(onClickHandler)) {
+                        rawRemoveEventListener.call(rawDocument, 'click', onClickHandler, false);
+                    }
+                    // TODO: listener 是否需要绑定proxyDocument，否则函数中的this指向原生window
+                    if (isFunction(value)) {
+                        rawAddEventListener.call(rawDocument, 'click', value, false);
+                    }
+                    onClickHandler = value;
+                }]
+        ]);
+        // external custom proxy
+        const customProxyDocumentProps = ((_a = microApp.options) === null || _a === void 0 ? void 0 : _a.customProxyDocumentProps) || new Map();
+        // External has higher priority than built-in
+        const mergedProxyDocumentProps = new Map([
+            ...builtInProxyProps,
+            ...customProxyDocumentProps,
+        ]);
+        return mergedProxyDocumentProps;
+    };
+    const mergedProxyDocumentProps = genProxyDocumentProps();
     const proxyDocument = new Proxy(rawDocument, {
         get: (target, key) => {
             var _a;
             throttleDeferForSetAppName(appName);
-            throttleDeferForParentNode(proxyDocument);
+            // TODO: 转换成数据形式，类似iframe的方式
             if (key === 'createElement')
                 return createElement;
             if (key === Symbol.toStringTag)
@@ -2974,18 +2868,14 @@ function createProxyDocument(appName, sandbox) {
                 return removeEventListener;
             if (key === 'microAppElement')
                 return (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.container;
+            if (key === '__MICRO_APP_NAME__')
+                return appName;
             return bindFunctionToRawTarget(Reflect.get(target, key), rawDocument, 'DOCUMENT');
         },
         set: (target, key, value) => {
-            if (key === 'onclick') {
-                if (isFunction(onClickHandler)) {
-                    rawRemoveEventListener.call(rawDocument, 'click', onClickHandler, false);
-                }
-                // TODO: listener 是否需要绑定proxyDocument，否则函数中的this指向原生window
-                if (isFunction(value)) {
-                    rawAddEventListener.call(rawDocument, 'click', value, false);
-                }
-                onClickHandler = value;
+            if (mergedProxyDocumentProps.has(key)) {
+                const proxyCallback = mergedProxyDocumentProps.get(key);
+                proxyCallback(value);
             }
             else if (key !== 'microAppElement') {
                 /**
@@ -3784,7 +3674,11 @@ function navigateWithNativeEvent(appName, methodName, result, onlyForBrowser, st
         const oldHref = result.isAttach2Hash && oldFullPath !== result.fullPath ? rawLocation.href : null;
         // navigate with native history method
         nativeHistoryNavigate(appName, methodName, result.fullPath, state, title);
-        // TODO: 如果所有模式统一发送popstate事件，则!isRouterModeCustom(appName)要去掉
+        /**
+         * TODO:
+         *  1. 如果所有模式统一发送popstate事件，则!isRouterModeCustom(appName)要去掉
+         *  2. 如果发送事件，则会导致vue router-view :key='router.path'绑定，无限卸载应用，死循环
+         */
         if (oldFullPath !== result.fullPath && !isRouterModeCustom(appName)) {
             dispatchNativeEvent(appName, onlyForBrowser, oldHref);
         }
@@ -4540,6 +4434,117 @@ function removePathFromBrowser(appName) {
     attachRouteToBrowserURL(appName, removeMicroPathFromURL(appName), removeMicroState(appName, globalEnv.rawWindow.history.state));
 }
 
+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.injectReactHMRProperty();
+    }
+    // adapter for react
+    injectReactHMRProperty() {
+        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;
+            });
+        }
+    }
+}
+/**
+ * update dom tree of target dom
+ * @param container target dom
+ * @param appName app name
+ */
+function patchElementTree(container, appName) {
+    const children = Array.from(container.children);
+    children.length && children.forEach((child) => {
+        patchElementTree(child, appName);
+    });
+    for (const child of children) {
+        updateElementInfo(child, appName);
+    }
+}
+/**
+ * rewrite baseURI, ownerDocument, __MICRO_APP_NAME__ of target node
+ * @param node target node
+ * @param appName app name
+ * @returns target node
+ */
+function updateElementInfo(node, appName) {
+    var _a, _b;
+    const proxyWindow = (_b = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.sandBox) === null || _b === void 0 ? void 0 : _b.proxyWindow;
+    if (isNode(node) &&
+        !node.__MICRO_APP_NAME__ &&
+        !node.__PURE_ELEMENT__ &&
+        proxyWindow) {
+        /**
+         * TODO:
+         *  1. 测试baseURI和ownerDocument在with沙箱中是否正确
+         *    经过验证with沙箱不能重写ownerDocument，否则react点击事件会触发两次
+         *  2. with沙箱所有node设置__MICRO_APP_NAME__都使用updateElementInfo
+         *  3. 性能: defineProperty的性能肯定不如直接设置
+        */
+        rawDefineProperties(node, {
+            baseURI: {
+                configurable: true,
+                get: () => proxyWindow.location.href,
+            },
+            __MICRO_APP_NAME__: {
+                configurable: true,
+                writable: true,
+                value: appName,
+            },
+        });
+        if (isIframeSandbox(appName)) {
+            rawDefineProperty(node, 'ownerDocument', {
+                configurable: true,
+                get: () => proxyWindow.document,
+            });
+        }
+    }
+    return node;
+}
+
 /**
  * https://developer.mozilla.org/en-US/docs/Web/API/fetch
  * Promise<Response> fetch(input[, init])
@@ -4934,7 +4939,7 @@ class WithSandBox {
                 enumerable: false,
                 get() {
                     throttleDeferForSetAppName(appName);
-                    return modifiedEval || eval;
+                    return modifiedEval || globalEnv.rawWindow.eval;
                 },
                 set: (value) => {
                     modifiedEval = value;
@@ -5368,17 +5373,18 @@ function patchDocumentPrototype(appName, microAppWindow) {
         }
     };
     microRootDocument.prototype.getElementsByTagName = function getElementsByTagName(key) {
-        var _a;
         const _this = getDefaultRawTarget(this);
         if (isUniqueElement(key) ||
-            isInvalidQuerySelectorKey(key) ||
-            (!((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.inline) && /^script$/i.test(key))) {
+            isInvalidQuerySelectorKey(key)) {
             return rawMicroGetElementsByTagName.call(_this, key);
         }
+        else if (/^script|base$/i.test(key)) {
+            return rawMicroGetElementsByTagName.call(microDocument, key);
+        }
         try {
             return querySelectorAll.call(this, key);
         }
-        catch (_b) {
+        catch (_a) {
             return rawMicroGetElementsByTagName.call(_this, key);
         }
     };
@@ -5421,6 +5427,7 @@ function patchDocumentProperty(appName, microAppWindow, sandbox) {
             ['links', () => microRootDocument.prototype.querySelectorAll.call(microDocument, 'a')],
             // unique keys of micro-app
             ['microAppElement', () => { var _a; return (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.container; }],
+            ['__MICRO_APP_NAME__', () => appName],
         ];
         descList.forEach((desc) => {
             result[desc[0]] = getCommonDescriptor(desc[0], desc[1]);
@@ -5732,8 +5739,12 @@ function patchIframeNode(appName, microAppWindow, sandbox) {
         enumerable: true,
         get() {
             var _a, _b, _c;
-            // set html.parentNode to microDocument
-            throttleDeferForParentNode(microDocument);
+            /**
+             * set current appName for hijack parentNode of html
+             * NOTE:
+             *  1. Is there a problem with setting the current appName in iframe mode
+             */
+            throttleDeferForSetAppName(appName);
             const result = rawParentNodeLDesc.get.call(this);
             /**
              * If parentNode is <micro-app-body>, return rawDocument.body
@@ -6174,8 +6185,9 @@ class CreateApp {
         this.url = url;
         this.useSandbox = useSandbox;
         this.scopecss = this.useSandbox && scopecss;
-        this.inline = inline !== null && inline !== void 0 ? inline : false;
+        // exec before getInlineModeState
         this.iframe = iframe !== null && iframe !== void 0 ? iframe : false;
+        this.inline = this.getInlineModeState(inline);
         /**
          * NOTE:
          *  1. Navigate after micro-app created, before mount
@@ -6318,7 +6330,7 @@ class CreateApp {
             }
             else {
                 this.container = container;
-                this.inline = inline;
+                this.inline = this.getInlineModeState(inline);
                 this.fiber = fiber;
                 this.routerMode = routerMode;
                 const dispatchBeforeMount = () => dispatchLifecyclesEvent(this.container, this.name, lifeCycles.BEFOREMOUNT);
@@ -6682,6 +6694,15 @@ class CreateApp {
     querySelectorAll(selectors) {
         return this.container ? globalEnv.rawElementQuerySelectorAll.call(this.container, selectors) : [];
     }
+    /**
+     * NOTE:
+     * 1. If the iframe sandbox no longer enforces the use of inline mode in the future, the way getElementsByTagName retrieves the script from the iframe by default needs to be changed, because in non inline mode, the script in the iframe may be empty
+     * @param inline inline mode config
+     */
+    getInlineModeState(inline) {
+        var _a;
+        return (_a = (this.iframe || inline)) !== null && _a !== void 0 ? _a : false;
+    }
 }
 // iframe route mode
 function isIframeSandbox(appName) {
@@ -6917,6 +6938,7 @@ function commonElementHandler(parent, newChild, passiveChild, rawMethod) {
 function patchElementAndDocument() {
     patchDocument$2();
     const rawRootElement = globalEnv.rawRootElement;
+    const rawRootNode = globalEnv.rawRootNode;
     // prototype methods of add element👇
     rawRootElement.prototype.appendChild = function appendChild(newChild) {
         return commonElementHandler(this, newChild, null, globalEnv.rawAppendChild);
@@ -7073,32 +7095,42 @@ function patchElementAndDocument() {
             });
         }
     });
-    /**
-     * NOTE:Abandon this way at 2023.2.28 before v1.0.0-beta.0, it will cause vue2 throw error when render again
-     */
-    // rawDefineProperty(Node.prototype, 'parentNode', {
-    //   configurable: true,
-    //   enumerable: true,
-    //   get () {
-    //     const result = globalEnv.rawParentNodeDesc.get.call(this)
-    //     /**
-    //      * If parentNode is <micro-app-body>, return rawDocument.body
-    //      * Scenes:
-    //      *  1. element-ui@2/lib/utils/vue-popper.js
-    //      *    if (this.popperElm.parentNode === document.body) ...
-    //      * WARNING:
-    //      *  Will it cause other problems ?
-    //      *  e.g. target.parentNode.remove(target)
-    //      * BUG:
-    //      *  1. vue2 umdMode, throw error when render again (<div id='app'></div> will be deleted when render again )
-    //      */
-    //     if (isMicroAppBody(result) && appInstanceMap.get(this.__MICRO_APP_NAME__)?.container) {
-    //       return document.body
-    //     }
-    //     return result
-    //   },
-    //   set: undefined,
-    // })
+    rawDefineProperty(rawRootNode.prototype, 'parentNode', {
+        configurable: true,
+        enumerable: true,
+        get() {
+            var _a, _b, _c;
+            /**
+             * hijack parentNode of html
+             * Scenes:
+             *  1. element-ui@2/lib/utils/popper.js
+             *    // root is child app window, so root.document is proxyDocument or microDocument
+             *    if (element.parentNode === root.document) ...
+             */
+            const currentAppName = getCurrentAppName();
+            if (currentAppName && this === globalEnv.rawDocument.firstElementChild) {
+                const microDocument = (_c = (_b = (_a = appInstanceMap.get(currentAppName)) === null || _a === void 0 ? void 0 : _a.sandBox) === null || _b === void 0 ? void 0 : _b.proxyWindow) === null || _c === void 0 ? void 0 : _c.document;
+                if (microDocument)
+                    return microDocument;
+            }
+            const result = globalEnv.rawParentNodeDesc.get.call(this);
+            /**
+             * If parentNode is <micro-app-body>, return rawDocument.body
+             * Scenes:
+             *  1. element-ui@2/lib/utils/vue-popper.js
+             *    if (this.popperElm.parentNode === document.body) ...
+             * WARNING:
+             *  Will it cause other problems ?
+             *  e.g. target.parentNode.remove(target)
+             * BUG:
+             *  1. vue2 umdMode, throw error when render again (<div id='app'></div> will be deleted when render again ) -- Abandon this way at 2023.2.28 before v1.0.0-beta.0, it will cause vue2 throw error when render again
+             */
+            // if (isMicroAppBody(result) && appInstanceMap.get(this.__MICRO_APP_NAME__)?.container) {
+            //   return document.body
+            // }
+            return result;
+        },
+    });
 }
 /**
  * Mark the newly created element in the micro application
@@ -7237,6 +7269,7 @@ function releasePatchElementAndDocument() {
     removeDomScope();
     releasePatchDocument();
     const rawRootElement = globalEnv.rawRootElement;
+    const rawRootNode = globalEnv.rawRootNode;
     rawRootElement.prototype.appendChild = globalEnv.rawAppendChild;
     rawRootElement.prototype.insertBefore = globalEnv.rawInsertBefore;
     rawRootElement.prototype.replaceChild = globalEnv.rawReplaceChild;
@@ -7248,6 +7281,7 @@ function releasePatchElementAndDocument() {
     rawRootElement.prototype.querySelectorAll = globalEnv.rawElementQuerySelectorAll;
     rawRootElement.prototype.setAttribute = globalEnv.rawSetAttribute;
     rawDefineProperty(rawRootElement.prototype, 'innerHTML', globalEnv.rawInnerHTMLDesc);
+    rawDefineProperty(rawRootNode.prototype, 'parentNode', globalEnv.rawParentNodeDesc);
 }
 // Set the style of micro-app-head and micro-app-body
 let hasRejectMicroAppStyle = false;
@@ -7380,9 +7414,9 @@ function initGlobalEnv() {
 /**
  * define element
  * @param tagName element name
- */
+*/
 function defineElement(tagName) {
-    class MicroAppElement extends HTMLElement {
+    class MicroAppElement extends getBaseHTMLElement() {
         constructor() {
             super(...arguments);
             this.isWaiting = false;