fix: when getOverwrittenAppendChildOrInsertBefore, will trigger page …

…flashing Occasionally
umijs · lou1swu · Jun 14, 2023 · Jun 14, 2023 · 3ac619e9ee3e734efa1417d3a18f100216da11ec
commit 3ac619e9ee3e734efa1417d3a18f100216da11ec
diff --git a/src/loader.ts b/src/loader.ts
@@ -25,6 +25,7 @@ import {
   getContainer,
   getDefaultTplWrapper,
   getWrapperId,
+  isEnableProxyStyle,
   isEnableScopedCSS,
   performanceGetEntriesByName,
   performanceMark,
@@ -285,6 +286,7 @@ export async function loadApp<T extends ObjectType>(
   }
 
   const scopedCSS = isEnableScopedCSS(sandbox);
+  const proxyCSS = isEnableProxyStyle(sandbox);
   let initialAppWrapperElement: HTMLElement | null = createElement(
     appContent,
     strictStyleIsolation,
@@ -322,6 +324,7 @@ export async function loadApp<T extends ObjectType>(
       // FIXME should use a strict sandbox logic while remount, see https://github.com/umijs/qiankun/issues/518
       initialAppWrapperGetter,
       scopedCSS,
+      proxyCSS,
       useLooseSandbox,
       excludeAssetFilter,
       global,

diff --git a/src/sandbox/index.ts b/src/sandbox/index.ts
@@ -35,6 +35,7 @@ export function createSandboxContainer(
   appName: string,
   elementGetter: () => HTMLElement | ShadowRoot,
   scopedCSS: boolean,
+  proxyCSS: boolean,
   useLooseSandbox?: boolean,
   excludeAssetFilter?: (url: string) => boolean,
   globalContext?: typeof window,
@@ -55,6 +56,7 @@ export function createSandboxContainer(
     elementGetter,
     sandbox,
     scopedCSS,
+    proxyCSS,
     excludeAssetFilter,
     speedySandBox,
   );
@@ -87,7 +89,15 @@ export function createSandboxContainer(
 
       /* ------------------------------------------ 2. 开启全局变量补丁 ------------------------------------------*/
       // render 沙箱启动时开始劫持各类全局监听，尽量不要在应用初始化阶段有 事件监听/定时器 等副作用
-      mountingFreers = patchAtMounting(appName, elementGetter, sandbox, scopedCSS, excludeAssetFilter, speedySandBox);
+      mountingFreers = patchAtMounting(
+        appName,
+        elementGetter,
+        sandbox,
+        scopedCSS,
+        proxyCSS,
+        excludeAssetFilter,
+        speedySandBox,
+      );
 
       /* ------------------------------------------ 3. 重置一些初始化时的副作用 ------------------------------------------*/
       // 存在 rebuilder 则表明有些副作用需要重建

diff --git a/src/sandbox/patchers/dynamicAppend/__tests__/forStrictSandbox.test.ts b/src/sandbox/patchers/dynamicAppend/__tests__/forStrictSandbox.test.ts
@@ -45,7 +45,7 @@ describe('forStrictSandbox test', () => {
       active: noop,
       inactive: noop,
     };
-    patchStrictSandbox(appName, () => wrapper, sandbox, true, false, undefined, true);
+    patchStrictSandbox(appName, () => wrapper, sandbox, true, false, true, undefined, true);
 
     expect(patchedDocument).toBeDefined();
     expect(() => patchedDocument?.createTreeWalker(patchedDocument)).not.toThrow();

diff --git a/src/sandbox/patchers/dynamicAppend/common.ts b/src/sandbox/patchers/dynamicAppend/common.ts
@@ -188,6 +188,7 @@ export type ContainerConfig = {
   dynamicStyleSheetElements: Array<HTMLStyleElement | HTMLLinkElement>;
   appWrapperGetter: CallableFunction;
   scopedCSS: boolean;
+  proxyCSS: boolean;
   excludeAssetFilter?: CallableFunction;
 };
 
@@ -218,6 +219,7 @@ function getOverwrittenAppendChildOrInsertBefore(opts: {
         speedySandbox,
         dynamicStyleSheetElements,
         scopedCSS,
+        proxyCSS,
         excludeAssetFilter,
       } = containerConfig;
 
@@ -258,6 +260,20 @@ function getOverwrittenAppendChildOrInsertBefore(opts: {
             } else {
               css.process(appWrapper, stylesheetElement, appName);
             }
+          } else if (proxyCSS) {
+            // exclude link elements like <link rel="icon" href="favicon.ico">
+            const linkElementUsingStylesheet =
+              element.tagName?.toUpperCase() === LINK_TAG_NAME &&
+              (element as HTMLLinkElement).rel === 'stylesheet' &&
+              (element as HTMLLinkElement).href;
+            if (linkElementUsingStylesheet) {
+              const fetch =
+                typeof frameworkConfiguration.fetch === 'function'
+                  ? frameworkConfiguration.fetch
+                  : frameworkConfiguration.fetch?.fn;
+              stylesheetElement = convertLinkAsStyle(element, () => {}, fetch);
+              dynamicLinkAttachedInlineStyleMap.set(element, stylesheetElement);
+            }
           }
 
           const mountDOM = target === 'head' ? getAppWrapperHeadElement(appWrapper) : appWrapper;

diff --git a/src/sandbox/patchers/dynamicAppend/forLooseSandbox.ts b/src/sandbox/patchers/dynamicAppend/forLooseSandbox.ts
@@ -30,6 +30,7 @@ export function patchLooseSandbox(
   sandbox: SandBox,
   mounting = true,
   scopedCSS = false,
+  proxyCSS = true,
   excludeAssetFilter?: CallableFunction,
 ): Freer {
   const { proxy } = sandbox;
@@ -53,6 +54,7 @@ export function patchLooseSandbox(
       strictGlobal: false,
       speedySandbox: false,
       scopedCSS,
+      proxyCSS,
       dynamicStyleSheetElements,
       excludeAssetFilter,
     }),

diff --git a/src/sandbox/patchers/dynamicAppend/forStrictSandbox.ts b/src/sandbox/patchers/dynamicAppend/forStrictSandbox.ts
@@ -227,6 +227,7 @@ export function patchStrictSandbox(
   sandbox: SandBox,
   mounting = true,
   scopedCSS = false,
+  proxyCSS = true,
   excludeAssetFilter?: CallableFunction,
   speedySandbox = false,
 ): Freer {
@@ -242,6 +243,7 @@ export function patchStrictSandbox(
       speedySandbox,
       excludeAssetFilter,
       scopedCSS,
+      proxyCSS,
     };
     proxyAttachContainerConfigMap.set(proxy, containerConfig);
   }

diff --git a/src/sandbox/patchers/index.ts b/src/sandbox/patchers/index.ts
@@ -16,6 +16,7 @@ export function patchAtMounting(
   elementGetter: () => HTMLElement | ShadowRoot,
   sandbox: SandBox,
   scopedCSS: boolean,
+  proxyCSS: boolean,
   excludeAssetFilter?: CallableFunction,
   speedySandBox?: boolean,
 ): Freer[] {
@@ -28,15 +29,25 @@ export function patchAtMounting(
   const patchersInSandbox = {
     [SandBoxType.LegacyProxy]: [
       ...basePatchers,
-      () => patchLooseSandbox(appName, elementGetter, sandbox, true, scopedCSS, excludeAssetFilter),
+      () => patchLooseSandbox(appName, elementGetter, sandbox, true, scopedCSS, proxyCSS, excludeAssetFilter),
     ],
     [SandBoxType.Proxy]: [
       ...basePatchers,
-      () => patchStrictSandbox(appName, elementGetter, sandbox, true, scopedCSS, excludeAssetFilter, speedySandBox),
+      () =>
+        patchStrictSandbox(
+          appName,
+          elementGetter,
+          sandbox,
+          true,
+          scopedCSS,
+          proxyCSS,
+          excludeAssetFilter,
+          speedySandBox,
+        ),
     ],
     [SandBoxType.Snapshot]: [
       ...basePatchers,
-      () => patchLooseSandbox(appName, elementGetter, sandbox, true, scopedCSS, excludeAssetFilter),
+      () => patchLooseSandbox(appName, elementGetter, sandbox, true, scopedCSS, proxyCSS, excludeAssetFilter),
     ],
   };
 
@@ -48,18 +59,29 @@ export function patchAtBootstrapping(
   elementGetter: () => HTMLElement | ShadowRoot,
   sandbox: SandBox,
   scopedCSS: boolean,
+  proxyCSS: boolean,
   excludeAssetFilter?: CallableFunction,
   speedySandBox?: boolean,
 ): Freer[] {
   const patchersInSandbox = {
     [SandBoxType.LegacyProxy]: [
-      () => patchLooseSandbox(appName, elementGetter, sandbox, false, scopedCSS, excludeAssetFilter),
+      () => patchLooseSandbox(appName, elementGetter, sandbox, false, scopedCSS, proxyCSS, excludeAssetFilter),
     ],
     [SandBoxType.Proxy]: [
-      () => patchStrictSandbox(appName, elementGetter, sandbox, false, scopedCSS, excludeAssetFilter, speedySandBox),
+      () =>
+        patchStrictSandbox(
+          appName,
+          elementGetter,
+          sandbox,
+          false,
+          scopedCSS,
+          proxyCSS,
+          excludeAssetFilter,
+          speedySandBox,
+        ),
     ],
     [SandBoxType.Snapshot]: [
-      () => patchLooseSandbox(appName, elementGetter, sandbox, false, scopedCSS, excludeAssetFilter),
+      () => patchLooseSandbox(appName, elementGetter, sandbox, false, scopedCSS, proxyCSS, excludeAssetFilter),
     ],
   };
 

diff --git a/src/utils.ts b/src/utils.ts
@@ -262,6 +262,18 @@ export function isEnableScopedCSS(sandbox: FrameworkConfiguration['sandbox']) {
   return !!sandbox.experimentalStyleIsolation;
 }
 
+export function isEnableProxyStyle(sandbox: FrameworkConfiguration['sandbox']) {
+  if (typeof sandbox !== 'object') {
+    return false;
+  }
+
+  if (sandbox.strictStyleIsolation) {
+    return false;
+  }
+
+  return true;
+}
+
 /**
  * copy from https://developer.mozilla.org/zh-CN/docs/Using_XPath
  * @param el

diff --git a/src/version.ts b/src/version.ts
@@ -1 +1 @@
-export { version } from '../package.json';
+export const version = '2.10.9';