@zstackui/qiankun 2.6.3-beta-5

package/lib/sandbox/patchers/css.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @author Saviio
+ * @since 2020-4-19
+ */
+export declare class ScopedCSS {
+    private static ModifiedTag;
+    private sheet;
+    private swapNode;
+    constructor();
+    process(styleNode: HTMLStyleElement, prefix?: string): void;
+    private rewrite;
+    private ruleStyle;
+    private ruleMedia;
+    private ruleSupport;
+}
+export declare const QiankunCSSRewriteAttr = "data-qiankun";
+export declare const process: (appWrapper: HTMLElement, stylesheetElement: HTMLStyleElement | HTMLLinkElement, appName: string) => void;

package/lib/sandbox/patchers/css.js

@@ -0,0 +1,193 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.process = exports.ScopedCSS = exports.QiankunCSSRewriteAttr = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+/**
+ * @author Saviio
+ * @since 2020-4-19
+ */
+// https://developer.mozilla.org/en-US/docs/Web/API/CSSRule
+var RuleType;
+(function (RuleType) {
+  // type: rule will be rewrote
+  RuleType[RuleType["STYLE"] = 1] = "STYLE";
+  RuleType[RuleType["MEDIA"] = 4] = "MEDIA";
+  RuleType[RuleType["SUPPORTS"] = 12] = "SUPPORTS";
+  // type: value will be kept
+  RuleType[RuleType["IMPORT"] = 3] = "IMPORT";
+  RuleType[RuleType["FONT_FACE"] = 5] = "FONT_FACE";
+  RuleType[RuleType["PAGE"] = 6] = "PAGE";
+  RuleType[RuleType["KEYFRAMES"] = 7] = "KEYFRAMES";
+  RuleType[RuleType["KEYFRAME"] = 8] = "KEYFRAME";
+})(RuleType || (RuleType = {}));
+var arrayify = function arrayify(list) {
+  return [].slice.call(list, 0);
+};
+var rawDocumentBodyAppend = HTMLBodyElement.prototype.appendChild;
+var ScopedCSS = exports.ScopedCSS = /*#__PURE__*/function () {
+  function ScopedCSS() {
+    (0, _classCallCheck2.default)(this, ScopedCSS);
+    var styleNode = document.createElement('style');
+    rawDocumentBodyAppend.call(document.body, styleNode);
+    this.swapNode = styleNode;
+    this.sheet = styleNode.sheet;
+    this.sheet.disabled = true;
+  }
+  return (0, _createClass2.default)(ScopedCSS, [{
+    key: "process",
+    value: function process(styleNode) {
+      var _this = this;
+      var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+      var _a;
+      if (styleNode.textContent !== '') {
+        var textNode = document.createTextNode(styleNode.textContent || '');
+        this.swapNode.appendChild(textNode);
+        var sheet = this.swapNode.sheet; // type is missing
+        var rules = arrayify((_a = sheet === null || sheet === void 0 ? void 0 : sheet.cssRules) !== null && _a !== void 0 ? _a : []);
+        var css = this.rewrite(rules, prefix);
+        // eslint-disable-next-line no-param-reassign
+        styleNode.textContent = css;
+        // cleanup
+        this.swapNode.removeChild(textNode);
+        return;
+      }
+      var mutator = new MutationObserver(function (mutations) {
+        var _a;
+        for (var i = 0; i < mutations.length; i += 1) {
+          var mutation = mutations[i];
+          if (ScopedCSS.ModifiedTag in styleNode) {
+            return;
+          }
+          if (mutation.type === 'childList') {
+            var _sheet = styleNode.sheet;
+            var _rules = arrayify((_a = _sheet === null || _sheet === void 0 ? void 0 : _sheet.cssRules) !== null && _a !== void 0 ? _a : []);
+            var _css = _this.rewrite(_rules, prefix);
+            // eslint-disable-next-line no-param-reassign
+            styleNode.textContent = _css;
+            // eslint-disable-next-line no-param-reassign
+            styleNode[ScopedCSS.ModifiedTag] = true;
+          }
+        }
+      });
+      // since observer will be deleted when node be removed
+      // we dont need create a cleanup function manually
+      // see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/disconnect
+      mutator.observe(styleNode, {
+        childList: true
+      });
+    }
+  }, {
+    key: "rewrite",
+    value: function rewrite(rules) {
+      var _this2 = this;
+      var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+      var css = '';
+      rules.forEach(function (rule) {
+        switch (rule.type) {
+          case RuleType.STYLE:
+            css += _this2.ruleStyle(rule, prefix);
+            break;
+          case RuleType.MEDIA:
+            css += _this2.ruleMedia(rule, prefix);
+            break;
+          case RuleType.SUPPORTS:
+            css += _this2.ruleSupport(rule, prefix);
+            break;
+          default:
+            css += "".concat(rule.cssText);
+            break;
+        }
+      });
+      return css;
+    }
+    // handle case:
+    // .app-main {}
+    // html, body {}
+    // eslint-disable-next-line class-methods-use-this
+  }, {
+    key: "ruleStyle",
+    value: function ruleStyle(rule, prefix) {
+      var rootSelectorRE = /((?:[^\w\-.#]|^)(body|html|:root))/gm;
+      var rootCombinationRE = /(html[^\w{[]+)/gm;
+      var selector = rule.selectorText.trim();
+      var cssText = rule.cssText;
+      // handle html { ... }
+      // handle body { ... }
+      // handle :root { ... }
+      if (selector === 'html' || selector === 'body' || selector === ':root') {
+        return cssText.replace(rootSelectorRE, prefix);
+      }
+      // handle html body { ... }
+      // handle html > body { ... }
+      if (rootCombinationRE.test(rule.selectorText)) {
+        var siblingSelectorRE = /(html[^\w{]+)(\+|~)/gm;
+        // since html + body is a non-standard rule for html
+        // transformer will ignore it
+        if (!siblingSelectorRE.test(rule.selectorText)) {
+          cssText = cssText.replace(rootCombinationRE, '');
+        }
+      }
+      // handle grouping selector, a,span,p,div { ... }
+      cssText = cssText.replace(/^[\s\S]+{/, function (selectors) {
+        return selectors.replace(/(^|,\n?)([^,]+)/g, function (item, p, s) {
+          // handle div,body,span { ... }
+          if (rootSelectorRE.test(item)) {
+            return item.replace(rootSelectorRE, function (m) {
+              // do not discard valid previous character, such as body,html or *:not(:root)
+              var whitePrevChars = [',', '('];
+              if (m && whitePrevChars.includes(m[0])) {
+                return "".concat(m[0]).concat(prefix);
+              }
+              // replace root selector with prefix
+              return prefix;
+            });
+          }
+          return "".concat(p).concat(prefix, " ").concat(s.replace(/^ */, ''));
+        });
+      });
+      return cssText;
+    }
+    // handle case:
+    // @media screen and (max-width: 300px) {}
+  }, {
+    key: "ruleMedia",
+    value: function ruleMedia(rule, prefix) {
+      var css = this.rewrite(arrayify(rule.cssRules), prefix);
+      return "@media ".concat(rule.conditionText, " {").concat(css, "}");
+    }
+    // handle case:
+    // @supports (display: grid) {}
+  }, {
+    key: "ruleSupport",
+    value: function ruleSupport(rule, prefix) {
+      var css = this.rewrite(arrayify(rule.cssRules), prefix);
+      return "@supports ".concat(rule.conditionText, " {").concat(css, "}");
+    }
+  }]);
+}();
+ScopedCSS.ModifiedTag = 'Symbol(style-modified-qiankun)';
+var processor;
+var QiankunCSSRewriteAttr = exports.QiankunCSSRewriteAttr = 'data-qiankun';
+var process = exports.process = function process(appWrapper, stylesheetElement, appName) {
+  // lazy singleton pattern
+  if (!processor) {
+    processor = new ScopedCSS();
+  }
+  if (stylesheetElement.tagName === 'LINK') {
+    console.warn('Feature: sandbox.experimentalStyleIsolation is not support for link element yet.');
+  }
+  var mountDOM = appWrapper;
+  if (!mountDOM) {
+    return;
+  }
+  var tag = (mountDOM.tagName || '').toLowerCase();
+  if (tag && stylesheetElement.tagName === 'STYLE') {
+    var prefix = "".concat(tag, "[").concat(QiankunCSSRewriteAttr, "=\"").concat(appName, "\"]");
+    processor.process(stylesheetElement, prefix);
+  }
+};

package/lib/sandbox/patchers/dynamicAppend/common.d.ts

@@ -0,0 +1,22 @@
+export declare const rawHeadAppendChild: <T extends Node>(node: T) => T;
+export declare function isHijackingTag(tagName?: string): boolean;
+/**
+ * Check if a style element is a styled-component liked.
+ * A styled-components liked element is which not have textContext but keep the rules in its styleSheet.cssRules.
+ * Such as the style element generated by styled-components and emotion.
+ * @param element
+ */
+export declare function isStyledComponentsLike(element: HTMLStyleElement): number | false | undefined;
+export declare function recordStyledComponentsCSSRules(styleElements: HTMLStyleElement[]): void;
+export declare function getStyledElementCSSRules(styledElement: HTMLStyleElement): CSSRuleList | undefined;
+export type ContainerConfig = {
+    appName: string;
+    proxy: WindowProxy;
+    strictGlobal: boolean;
+    dynamicStyleSheetElements: HTMLStyleElement[];
+    appWrapperGetter: CallableFunction;
+    scopedCSS: boolean;
+    excludeAssetFilter?: CallableFunction;
+};
+export declare function patchHTMLDynamicAppendPrototypeFunctions(isInvokedByMicroApp: (element: HTMLElement) => boolean, containerConfigGetter: (element: HTMLElement) => ContainerConfig): () => void;
+export declare function rebuildCSSRules(styleSheetElements: HTMLStyleElement[], reAppendElement: (stylesheetElement: HTMLStyleElement) => boolean): void;

package/lib/sandbox/patchers/dynamicAppend/common.js

@@ -0,0 +1,322 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getStyledElementCSSRules = getStyledElementCSSRules;
+exports.isHijackingTag = isHijackingTag;
+exports.isStyledComponentsLike = isStyledComponentsLike;
+exports.patchHTMLDynamicAppendPrototypeFunctions = patchHTMLDynamicAppendPrototypeFunctions;
+exports.rawHeadAppendChild = void 0;
+exports.rebuildCSSRules = rebuildCSSRules;
+exports.recordStyledComponentsCSSRules = recordStyledComponentsCSSRules;
+var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
+var _importHtmlEntry = require("import-html-entry");
+var _apis = require("../../../apis");
+var css = _interopRequireWildcard(require("../css"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/**
+ * @author Kuitos
+ * @since 2019-10-21
+ */
+
+var rawHeadAppendChild = exports.rawHeadAppendChild = HTMLHeadElement.prototype.appendChild;
+var rawHeadRemoveChild = HTMLHeadElement.prototype.removeChild;
+var rawBodyAppendChild = HTMLBodyElement.prototype.appendChild;
+var rawBodyRemoveChild = HTMLBodyElement.prototype.removeChild;
+var rawHeadInsertBefore = HTMLHeadElement.prototype.insertBefore;
+var rawRemoveChild = HTMLElement.prototype.removeChild;
+var SCRIPT_TAG_NAME = 'SCRIPT';
+var LINK_TAG_NAME = 'LINK';
+var STYLE_TAG_NAME = 'STYLE';
+function isHijackingTag(tagName) {
+  return (tagName === null || tagName === void 0 ? void 0 : tagName.toUpperCase()) === LINK_TAG_NAME || (tagName === null || tagName === void 0 ? void 0 : tagName.toUpperCase()) === STYLE_TAG_NAME || (tagName === null || tagName === void 0 ? void 0 : tagName.toUpperCase()) === SCRIPT_TAG_NAME;
+}
+/**
+ * Check if a style element is a styled-component liked.
+ * A styled-components liked element is which not have textContext but keep the rules in its styleSheet.cssRules.
+ * Such as the style element generated by styled-components and emotion.
+ * @param element
+ */
+function isStyledComponentsLike(element) {
+  var _a, _b;
+  return !element.textContent && (((_a = element.sheet) === null || _a === void 0 ? void 0 : _a.cssRules.length) || ((_b = getStyledElementCSSRules(element)) === null || _b === void 0 ? void 0 : _b.length));
+}
+function patchCustomEvent(e, elementGetter) {
+  Object.defineProperties(e, {
+    srcElement: {
+      get: elementGetter
+    },
+    target: {
+      get: elementGetter
+    }
+  });
+  return e;
+}
+function manualInvokeElementOnLoad(element) {
+  // we need to invoke the onload event manually to notify the event listener that the script was completed
+  // here are the two typical ways of dynamic script loading
+  // 1. element.onload callback way, which webpack and loadjs used, see https://github.com/muicss/loadjs/blob/master/src/loadjs.js#L138
+  // 2. addEventListener way, which toast-loader used, see https://github.com/pyrsmk/toast/blob/master/src/Toast.ts#L64
+  var loadEvent = new CustomEvent('load');
+  var patchedEvent = patchCustomEvent(loadEvent, function () {
+    return element;
+  });
+  if ((0, _isFunction2.default)(element.onload)) {
+    element.onload(patchedEvent);
+  } else {
+    element.dispatchEvent(patchedEvent);
+  }
+}
+function manualInvokeElementOnError(element) {
+  var errorEvent = new CustomEvent('error');
+  var patchedEvent = patchCustomEvent(errorEvent, function () {
+    return element;
+  });
+  if ((0, _isFunction2.default)(element.onerror)) {
+    element.onerror(patchedEvent);
+  } else {
+    element.dispatchEvent(patchedEvent);
+  }
+}
+function convertLinkAsStyle(element, postProcess) {
+  var fetchFn = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : fetch;
+  var styleElement = document.createElement('style');
+  var href = element.href;
+  // add source link element href
+  styleElement.dataset.qiankunHref = href;
+  fetchFn(href).then(function (res) {
+    return res.text();
+  }).then(function (styleContext) {
+    styleElement.appendChild(document.createTextNode(styleContext));
+    postProcess(styleElement);
+    manualInvokeElementOnLoad(element);
+  }).catch(function () {
+    return manualInvokeElementOnError(element);
+  });
+  return styleElement;
+}
+var styledComponentCSSRulesMap = new WeakMap();
+var dynamicScriptAttachedCommentMap = new WeakMap();
+var dynamicLinkAttachedInlineStyleMap = new WeakMap();
+function recordStyledComponentsCSSRules(styleElements) {
+  styleElements.forEach(function (styleElement) {
+    /*
+     With a styled-components generated style element, we need to record its cssRules for restore next re-mounting time.
+     We're doing this because the sheet of style element is going to be cleaned automatically by browser after the style element dom removed from document.
+     see https://www.w3.org/TR/cssom-1/#associated-css-style-sheet
+     */
+    if (styleElement instanceof HTMLStyleElement && isStyledComponentsLike(styleElement)) {
+      if (styleElement.sheet) {
+        // record the original css rules of the style element for restore
+        styledComponentCSSRulesMap.set(styleElement, styleElement.sheet.cssRules);
+      }
+    }
+  });
+}
+function getStyledElementCSSRules(styledElement) {
+  return styledComponentCSSRulesMap.get(styledElement);
+}
+function getOverwrittenAppendChildOrInsertBefore(opts) {
+  return function appendChildOrInsertBefore(newChild) {
+    var refChild = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    var _a, _b;
+    var element = newChild;
+    var rawDOMAppendOrInsertBefore = opts.rawDOMAppendOrInsertBefore,
+      isInvokedByMicroApp = opts.isInvokedByMicroApp,
+      containerConfigGetter = opts.containerConfigGetter;
+    if (!isHijackingTag(element.tagName) || !isInvokedByMicroApp(element)) {
+      return rawDOMAppendOrInsertBefore.call(this, element, refChild);
+    }
+    if (element.tagName) {
+      var containerConfig = containerConfigGetter(element);
+      var appName = containerConfig.appName,
+        appWrapperGetter = containerConfig.appWrapperGetter,
+        proxy = containerConfig.proxy,
+        strictGlobal = containerConfig.strictGlobal,
+        dynamicStyleSheetElements = containerConfig.dynamicStyleSheetElements,
+        scopedCSS = containerConfig.scopedCSS,
+        excludeAssetFilter = containerConfig.excludeAssetFilter;
+      switch (element.tagName) {
+        case LINK_TAG_NAME:
+        case STYLE_TAG_NAME:
+          {
+            var stylesheetElement = newChild;
+            var _stylesheetElement = stylesheetElement,
+              href = _stylesheetElement.href;
+            if (excludeAssetFilter && href && excludeAssetFilter(href)) {
+              return rawDOMAppendOrInsertBefore.call(this, element, refChild);
+            }
+            var mountDOM = appWrapperGetter();
+            if (scopedCSS) {
+              // exclude link elements like <link rel="icon" href="favicon.ico">
+              var linkElementUsingStylesheet = ((_a = element.tagName) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === LINK_TAG_NAME && element.rel === 'stylesheet' && element.href;
+              if (linkElementUsingStylesheet) {
+                var _fetch = typeof _apis.frameworkConfiguration.fetch === 'function' ? _apis.frameworkConfiguration.fetch : (_b = _apis.frameworkConfiguration.fetch) === null || _b === void 0 ? void 0 : _b.fn;
+                stylesheetElement = convertLinkAsStyle(element, function (styleElement) {
+                  return css.process(mountDOM, styleElement, appName);
+                }, _fetch);
+                dynamicLinkAttachedInlineStyleMap.set(element, stylesheetElement);
+              } else {
+                css.process(mountDOM, stylesheetElement, appName);
+              }
+            }
+            // eslint-disable-next-line no-shadow
+            dynamicStyleSheetElements.push(stylesheetElement);
+            var referenceNode = mountDOM.contains(refChild) ? refChild : null;
+            return rawDOMAppendOrInsertBefore.call(mountDOM, stylesheetElement, referenceNode);
+          }
+        case SCRIPT_TAG_NAME:
+          {
+            var _element = element,
+              src = _element.src,
+              text = _element.text;
+            // some script like jsonp maybe not support cors which should't use execScripts
+            if (excludeAssetFilter && src && excludeAssetFilter(src)) {
+              return rawDOMAppendOrInsertBefore.call(this, element, refChild);
+            }
+            var _mountDOM = appWrapperGetter();
+            var _fetch2 = _apis.frameworkConfiguration.fetch;
+            var _referenceNode = _mountDOM.contains(refChild) ? refChild : null;
+            if (src) {
+              (0, _importHtmlEntry.execScripts)(null, [src], proxy, {
+                fetch: _fetch2,
+                strictGlobal: strictGlobal,
+                beforeExec: function beforeExec() {
+                  var isCurrentScriptConfigurable = function isCurrentScriptConfigurable() {
+                    var descriptor = Object.getOwnPropertyDescriptor(document, 'currentScript');
+                    return !descriptor || descriptor.configurable;
+                  };
+                  if (isCurrentScriptConfigurable()) {
+                    Object.defineProperty(document, 'currentScript', {
+                      get: function get() {
+                        return element;
+                      },
+                      configurable: true
+                    });
+                  }
+                },
+                success: function success() {
+                  manualInvokeElementOnLoad(element);
+                  element = null;
+                },
+                error: function error() {
+                  manualInvokeElementOnError(element);
+                  element = null;
+                }
+              });
+              var dynamicScriptCommentElement = document.createComment("dynamic script ".concat(src, " replaced by qiankun"));
+              dynamicScriptAttachedCommentMap.set(element, dynamicScriptCommentElement);
+              return rawDOMAppendOrInsertBefore.call(_mountDOM, dynamicScriptCommentElement, _referenceNode);
+            }
+            // inline script never trigger the onload and onerror event
+            (0, _importHtmlEntry.execScripts)(null, ["<script>".concat(text, "</script>")], proxy, {
+              strictGlobal: strictGlobal
+            });
+            var dynamicInlineScriptCommentElement = document.createComment('dynamic inline script replaced by qiankun');
+            dynamicScriptAttachedCommentMap.set(element, dynamicInlineScriptCommentElement);
+            return rawDOMAppendOrInsertBefore.call(_mountDOM, dynamicInlineScriptCommentElement, _referenceNode);
+          }
+        default:
+          break;
+      }
+    }
+    return rawDOMAppendOrInsertBefore.call(this, element, refChild);
+  };
+}
+function getNewRemoveChild(headOrBodyRemoveChild, appWrapperGetterGetter) {
+  return function removeChild(child) {
+    var tagName = child.tagName;
+    if (!isHijackingTag(tagName)) return headOrBodyRemoveChild.call(this, child);
+    try {
+      var attachedElement;
+      switch (tagName) {
+        case LINK_TAG_NAME:
+          {
+            attachedElement = dynamicLinkAttachedInlineStyleMap.get(child) || child;
+            break;
+          }
+        case SCRIPT_TAG_NAME:
+          {
+            attachedElement = dynamicScriptAttachedCommentMap.get(child) || child;
+            break;
+          }
+        default:
+          {
+            attachedElement = child;
+          }
+      }
+      // container may had been removed while app unmounting if the removeChild action was async
+      var appWrapperGetter = appWrapperGetterGetter(child);
+      var container = appWrapperGetter();
+      if (container.contains(attachedElement)) {
+        return rawRemoveChild.call(container, attachedElement);
+      }
+    } catch (e) {
+      console.warn(e);
+    }
+    return headOrBodyRemoveChild.call(this, child);
+  };
+}
+function patchHTMLDynamicAppendPrototypeFunctions(isInvokedByMicroApp, containerConfigGetter) {
+  // Just overwrite it while it have not been overwrite
+  if (HTMLHeadElement.prototype.appendChild === rawHeadAppendChild && HTMLBodyElement.prototype.appendChild === rawBodyAppendChild && HTMLHeadElement.prototype.insertBefore === rawHeadInsertBefore) {
+    HTMLHeadElement.prototype.appendChild = getOverwrittenAppendChildOrInsertBefore({
+      rawDOMAppendOrInsertBefore: rawHeadAppendChild,
+      containerConfigGetter: containerConfigGetter,
+      isInvokedByMicroApp: isInvokedByMicroApp
+    });
+    HTMLBodyElement.prototype.appendChild = getOverwrittenAppendChildOrInsertBefore({
+      rawDOMAppendOrInsertBefore: rawBodyAppendChild,
+      containerConfigGetter: containerConfigGetter,
+      isInvokedByMicroApp: isInvokedByMicroApp
+    });
+    HTMLHeadElement.prototype.insertBefore = getOverwrittenAppendChildOrInsertBefore({
+      rawDOMAppendOrInsertBefore: rawHeadInsertBefore,
+      containerConfigGetter: containerConfigGetter,
+      isInvokedByMicroApp: isInvokedByMicroApp
+    });
+  }
+  // Just overwrite it while it have not been overwrite
+  if (HTMLHeadElement.prototype.removeChild === rawHeadRemoveChild && HTMLBodyElement.prototype.removeChild === rawBodyRemoveChild) {
+    HTMLHeadElement.prototype.removeChild = getNewRemoveChild(rawHeadRemoveChild, function (element) {
+      return containerConfigGetter(element).appWrapperGetter;
+    });
+    HTMLBodyElement.prototype.removeChild = getNewRemoveChild(rawBodyRemoveChild, function (element) {
+      return containerConfigGetter(element).appWrapperGetter;
+    });
+  }
+  return function unpatch() {
+    HTMLHeadElement.prototype.appendChild = rawHeadAppendChild;
+    HTMLHeadElement.prototype.removeChild = rawHeadRemoveChild;
+    HTMLBodyElement.prototype.appendChild = rawBodyAppendChild;
+    HTMLBodyElement.prototype.removeChild = rawBodyRemoveChild;
+    HTMLHeadElement.prototype.insertBefore = rawHeadInsertBefore;
+  };
+}
+function rebuildCSSRules(styleSheetElements, reAppendElement) {
+  styleSheetElements.forEach(function (stylesheetElement) {
+    // re-append the dynamic stylesheet to sub-app container
+    var appendSuccess = reAppendElement(stylesheetElement);
+    if (appendSuccess) {
+      /*
+      get the stored css rules from styled-components generated element, and the re-insert rules for them.
+      note that we must do this after style element had been added to document, which stylesheet would be associated to the document automatically.
+      check the spec https://www.w3.org/TR/cssom-1/#associated-css-style-sheet
+       */
+      if (stylesheetElement instanceof HTMLStyleElement && isStyledComponentsLike(stylesheetElement)) {
+        var cssRules = getStyledElementCSSRules(stylesheetElement);
+        if (cssRules) {
+          // eslint-disable-next-line no-plusplus
+          for (var i = 0; i < cssRules.length; i++) {
+            var cssRule = cssRules[i];
+            var cssStyleSheetElement = stylesheetElement.sheet;
+            cssStyleSheetElement.insertRule(cssRule.cssText, cssStyleSheetElement.cssRules.length);
+          }
+        }
+      }
+    }
+  });
+}

package/lib/sandbox/patchers/dynamicAppend/forLooseSandbox.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @author Kuitos
+ * @since 2020-10-13
+ */
+import type { Freer } from '../../../interfaces';
+/**
+ * Just hijack dynamic head append, that could avoid accidentally hijacking the insertion of elements except in head.
+ * Such a case: ReactDOM.createPortal(<style>.test{color:blue}</style>, container),
+ * this could made we append the style element into app wrapper but it will cause an error while the react portal unmounting, as ReactDOM could not find the style in body children list.
+ * @param appName
+ * @param appWrapperGetter
+ * @param proxy
+ * @param mounting
+ * @param scopedCSS
+ * @param excludeAssetFilter
+ */
+export declare function patchLooseSandbox(appName: string, appWrapperGetter: () => HTMLElement | ShadowRoot, proxy: Window, mounting?: boolean, scopedCSS?: boolean, excludeAssetFilter?: CallableFunction): Freer;

package/lib/sandbox/patchers/dynamicAppend/forLooseSandbox.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.patchLooseSandbox = patchLooseSandbox;
+var _singleSpa = require("single-spa");
+var _common = require("./common");
+/**
+ * @author Kuitos
+ * @since 2020-10-13
+ */
+
+var bootstrappingPatchCount = 0;
+var mountingPatchCount = 0;
+/**
+ * Just hijack dynamic head append, that could avoid accidentally hijacking the insertion of elements except in head.
+ * Such a case: ReactDOM.createPortal(<style>.test{color:blue}</style>, container),
+ * this could made we append the style element into app wrapper but it will cause an error while the react portal unmounting, as ReactDOM could not find the style in body children list.
+ * @param appName
+ * @param appWrapperGetter
+ * @param proxy
+ * @param mounting
+ * @param scopedCSS
+ * @param excludeAssetFilter
+ */
+function patchLooseSandbox(appName, appWrapperGetter, proxy) {
+  var mounting = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+  var scopedCSS = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  var excludeAssetFilter = arguments.length > 5 ? arguments[5] : undefined;
+  var dynamicStyleSheetElements = [];
+  var unpatchDynamicAppendPrototypeFunctions = (0, _common.patchHTMLDynamicAppendPrototypeFunctions)(
+  /*
+    check if the currently specified application is active
+    While we switch page from qiankun app to a normal react routing page, the normal one may load stylesheet dynamically while page rendering,
+    but the url change listener must to wait until the current call stack is flushed.
+    This scenario may cause we record the stylesheet from react routing page dynamic injection,
+    and remove them after the url change triggered and qiankun app is unmouting
+    see https://github.com/ReactTraining/history/blob/master/modules/createHashHistory.js#L222-L230
+   */
+  function () {
+    return (0, _singleSpa.checkActivityFunctions)(window.location).some(function (name) {
+      return name === appName;
+    });
+  }, function () {
+    return {
+      appName: appName,
+      appWrapperGetter: appWrapperGetter,
+      proxy: proxy,
+      strictGlobal: false,
+      scopedCSS: scopedCSS,
+      dynamicStyleSheetElements: dynamicStyleSheetElements,
+      excludeAssetFilter: excludeAssetFilter
+    };
+  });
+  if (!mounting) bootstrappingPatchCount++;
+  if (mounting) mountingPatchCount++;
+  return function free() {
+    // bootstrap patch just called once but its freer will be called multiple times
+    if (!mounting && bootstrappingPatchCount !== 0) bootstrappingPatchCount--;
+    if (mounting) mountingPatchCount--;
+    var allMicroAppUnmounted = mountingPatchCount === 0 && bootstrappingPatchCount === 0;
+    // release the overwrite prototype after all the micro apps unmounted
+    if (allMicroAppUnmounted) unpatchDynamicAppendPrototypeFunctions();
+    (0, _common.recordStyledComponentsCSSRules)(dynamicStyleSheetElements);
+    // As now the sub app content all wrapped with a special id container,
+    // the dynamic style sheet would be removed automatically while unmoutting
+    return function rebuild() {
+      (0, _common.rebuildCSSRules)(dynamicStyleSheetElements, function (stylesheetElement) {
+        var appWrapper = appWrapperGetter();
+        if (!appWrapper.contains(stylesheetElement)) {
+          // Using document.head.appendChild ensures that appendChild invocation can also directly use the HTMLHeadElement.prototype.appendChild method which is overwritten at mounting phase
+          document.head.appendChild.call(appWrapper, stylesheetElement);
+          return true;
+        }
+        return false;
+      });
+      // As the patcher will be invoked every mounting phase, we could release the cache for gc after rebuilding
+      if (mounting) {
+        dynamicStyleSheetElements = [];
+      }
+    };
+  };
+}

package/lib/sandbox/patchers/dynamicAppend/forStrictSandbox.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @author Kuitos
+ * @since 2020-10-13
+ */
+import type { Freer } from '../../../interfaces';
+import type { ContainerConfig } from './common';
+declare global {
+    interface Window {
+        __proxyAttachContainerConfigMap__: WeakMap<WindowProxy, ContainerConfig>;
+    }
+}
+export declare function patchStrictSandbox(appName: string, appWrapperGetter: () => HTMLElement | ShadowRoot, proxy: Window, mounting?: boolean, scopedCSS?: boolean, excludeAssetFilter?: CallableFunction): Freer;