feat(sandbox): add disableLinkTransformToStyle sandbox config (#668)

zhoushaw · web-flow · commit c2bebd590c63 · 2024-06-19T16:12:51.000+08:00
* feat(sandbox): add disableLinkTransformToStyle sandbox config

* chore: fix unit test

* chore: fix unit test

* chore: fix unit test

* chore: fix e2e test

* chore: fix e2e test
diff --git a/cypress/e2e/1-the-whole-process/visit-sub-app.spec.js b/cypress/e2e/1-the-whole-process/visit-sub-app.spec.js
@@ -16,7 +16,7 @@ describe('whole process app render', () => {
         },
         sandbox: {
           snapshot: false,
-        }
+        },
       },
     });
 
@@ -148,8 +148,8 @@ describe('whole process app render', () => {
       cy.wait(4000);
       cy.contains('[data-test=title]', HomeTitle)
         .then(() => {
-          cy.get('[data-test=vite-count-btn]').dblclick();
-          cy.contains('button', 'count is: 2');
+          cy.get('[data-test=vite-count-btn]').click({ force: true });
+          cy.contains('button', 'count is: 1');
         })
         .then(() => {
           win.Garfish.router.push({ path: '/vue2/home' });
diff --git a/dev/app-main/src/constant.ts b/dev/app-main/src/constant.ts
@@ -17,6 +17,7 @@ export const localApps: AppInfo = [
     activeWhen: '/react17',
     sandbox: {
       fixStaticResourceBaseUrl: false,
+      disableLinkTransformToStyle: false,
     },
     // 子应用的入口地址，可以为 HTML 地址和 JS 地址
     // 注意：entry 地址不可以与主应用+子应用激活地址相同，否则刷新时将会直接返回子应用内容
diff --git a/dev/app-react-17/public/a.css b/dev/app-react-17/public/a.css
@@ -0,0 +1,3 @@
+.hello {
+  color: red;
+}
diff --git a/dev/app-react-17/public/b.css b/dev/app-react-17/public/b.css
@@ -0,0 +1,3 @@
+.world {
+  color: blue;
+}
diff --git a/dev/app-react-17/public/index.html b/dev/app-react-17/public/index.html
@@ -3,6 +3,14 @@
   <head>
     <meta charset="UTF-8">
     <title>app react v17</title>
+    <link rel="stylesheet" href="http://localhost:8091/a.css" />
+    <script>
+      let link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.setAttribute('rel','stylesheet');
+      link.setAttribute('href','http://localhost:8091/b.css');
+      document.head.appendChild(link);
+    </script>
   </head>
   <body>
     <img data-test="img-pre-fix-app-17"  src="/img" />
diff --git a/packages/browser-vm/__tests__/dynamic-link.spec.ts b/packages/browser-vm/__tests__/dynamic-link.spec.ts
@@ -42,7 +42,7 @@ describe('Sandbox: dynamic link', () => {
       [linkOrder3]: {
         'Content-Type': styleType,
         timeConsuming: 300,
-      }
+      },
     },
   });
 
@@ -90,7 +90,7 @@ describe('Sandbox: dynamic link', () => {
       go(`
         const dynamicLink = document.createElement('link');
         dynamicLink.href = "${withSuffix}";
-        dynamicLink.rel = 'stylesheet';
+        dynamicLink.setAttribute('rel', 'stylesheet');
         dynamicLink.onload = function () {
           expect(document.body).toMatchSnapshot();
           jestDone();
@@ -106,7 +106,7 @@ describe('Sandbox: dynamic link', () => {
       go(`
         const dynamicLink = document.createElement('link');
         dynamicLink.href = "${withoutSuffix}";
-        dynamicLink.rel = 'stylesheet';
+        dynamicLink.setAttribute('rel', 'stylesheet');
         dynamicLink.onload = function () {
           expect(document.body).toMatchSnapshot();
           jestDone();
@@ -122,7 +122,7 @@ describe('Sandbox: dynamic link', () => {
       go(`
         const dynamicLink = document.createElement('link');
         dynamicLink.href = "${withoutSuffixAndContentType}";
-        dynamicLink.rel = 'stylesheet';
+        dynamicLink.setAttribute('rel', 'stylesheet');
         dynamicLink.onload = function () {
           expect(document.body).toMatchSnapshot();
           jestDone();
diff --git a/packages/browser-vm/src/dynamicNode/processor.ts b/packages/browser-vm/src/dynamicNode/processor.ts
@@ -368,9 +368,12 @@ export class DynamicNodeProcessor {
       this.monitorChangesOfStyle();
     }
     // The link node of the request css needs to be changed to style node
-    else if (this.is('link')) {
+    else if (
+      this.is('link') &&
+      this.sandbox.options.disableLinkTransformToStyle !== true
+    ) {
       parentNode = this.findParentNodeInApp(context, 'head');
-      if (this.el.rel === 'stylesheet' && this.el.href) {
+      if (this.el.getAttribute('rel') === 'stylesheet' && this.el.href) {
         convertedNode = this.addDynamicLinkNode((styleNode) => {
           this.nativeAppend.call(parentNode, styleNode);
         });
diff --git a/packages/browser-vm/src/pluginify.ts b/packages/browser-vm/src/pluginify.ts
@@ -134,6 +134,9 @@ function createOptions(Garfish: interfaces.Garfish) {
           fixOwnerDocument: Boolean(appInfo.sandbox?.fixOwnerDocument),
           disableWith: Boolean(appInfo.sandbox?.disableWith),
           disableElementtiming: Boolean(appInfo.sandbox?.disableElementtiming),
+          disableLinkTransformToStyle: Boolean(
+            appInfo.sandbox?.disableLinkTransformToStyle,
+          ),
           strictIsolation: Boolean(appInfo.sandbox?.strictIsolation),
           excludeAssetFilter: appInfo.sandbox?.excludeAssetFilter,
           // 缓存模式，不收集副作用
diff --git a/packages/browser-vm/src/sandbox.ts b/packages/browser-vm/src/sandbox.ts
@@ -97,6 +97,7 @@ export class Sandbox {
       fixStaticResourceBaseUrl: true,
       disableWith: false,
       strictIsolation: false,
+      disableLinkTransformToStyle: false,
       disableCollect: false,
       el: () => null,
       styleScopeId: () => '',
diff --git a/packages/browser-vm/src/types.ts b/packages/browser-vm/src/types.ts
@@ -27,6 +27,7 @@ export interface SandboxOptions {
   disableWith?: boolean;
   strictIsolation?: boolean;
   disableElementtiming?: boolean;
+  disableLinkTransformToStyle?: boolean;
   disableCollect?: boolean;
   modules?: Array<Module>;
   excludeAssetFilter?: (url: string) => boolean;
diff --git a/packages/core/src/config.ts b/packages/core/src/config.ts
@@ -125,6 +125,7 @@ export const createDefaultOptions = () => {
       disableWith: false,
       strictIsolation: false,
       disableElementtiming: false,
+      disableLinkTransformToStyle: false,
       fixOwnerDocument: false,
     },
     // global hooks
diff --git a/packages/core/src/interface.ts b/packages/core/src/interface.ts
@@ -81,6 +81,7 @@ export namespace interfaces {
     disableWith?: boolean;
     strictIsolation?: boolean;
     disableElementtiming?: boolean;
+    disableLinkTransformToStyle?: boolean;
     fixOwnerDocument?: boolean;
     excludeAssetFilter?: (url: string) => boolean;
   }
diff --git a/packages/core/src/module/app.ts b/packages/core/src/module/app.ts
@@ -765,6 +765,14 @@ export class App {
       },
 
       link: (node) => {
+        if (
+          this.appInfo.sandbox &&
+          typeof this.appInfo.sandbox === 'object' &&
+          this.appInfo.sandbox.disableLinkTransformToStyle
+        ) {
+          return DOMApis.createElement(node);
+        }
+
         if (DOMApis.isCssLinkNode(node)) {
           const styleManager = this.resources.link.find((manager) =>
             manager.isSameOrigin(node),
diff --git a/packages/core/src/module/resource.ts b/packages/core/src/module/resource.ts
@@ -10,7 +10,7 @@ import type { interfaces } from '../interface';
 
 // Fetch `script`, `link` and `module meta` elements
 function fetchStaticResources(
-  appName: string,
+  appInfo: AppInfo,
   loader: Loader,
   entryManager: TemplateManager,
   sandboxConfig: false | interfaces.SandboxConfig | undefined,
@@ -50,7 +50,7 @@ function fetchStaticResources(
           // we have a preload mechanism, so we don’t need to deal with it.
           return loader
             .load<JavaScriptManager>({
-              scope: appName,
+              scope: appInfo.name,
               url: fetchUrl,
               crossOrigin,
               defaultContentType: type,
@@ -63,7 +63,7 @@ function fetchStaticResources(
                 jsManager.setDefferAttribute(toBoolean(defer));
                 return jsManager;
               } else {
-                warn(`[${appName}] Failed to load script: ${fetchUrl}`);
+                warn(`[${appInfo.name}] Failed to load script: ${fetchUrl}`);
               }
             })
             .catch(() => null);
@@ -86,20 +86,26 @@ function fetchStaticResources(
       .findAllLinkNodes()
       .map((node) => {
         if (!entryManager.DOMApis.isCssLinkNode(node)) return;
+        if (
+          appInfo.sandbox &&
+          typeof appInfo.sandbox === 'object' &&
+          appInfo.sandbox.disableLinkTransformToStyle
+        )
+          return;
         const href = entryManager.findAttributeValue(node, 'href');
         if (href) {
           const fetchUrl = entryManager.url
             ? transformUrl(entryManager.url, href)
             : href;
           return loader
-            .load<StyleManager>({ scope: appName, url: fetchUrl })
+            .load<StyleManager>({ scope: appInfo.name, url: fetchUrl })
             .then(({ resourceManager: styleManager }) => {
               if (styleManager) {
                 styleManager.setDep(node);
                 styleManager?.correctPath();
                 return styleManager;
               } else {
-                warn(`${appName} Failed to load link: ${fetchUrl}`);
+                warn(`${appInfo.name} Failed to load link: ${fetchUrl}`);
               }
             })
             .catch(() => null);
@@ -155,7 +161,7 @@ export async function processAppResources(loader: Loader, appInfo: AppInfo) {
   if (entryManager instanceof loader.TemplateManager) {
     isHtmlMode = true;
     const [js, link, modules] = await fetchStaticResources(
-      appInfo.name,
+      appInfo,
       loader,
       entryManager,
       appInfo.sandbox,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/website/src/components/config/_sandbox.mdx b/website/src/components/config/_sandbox.mdx
