feat(sandbox): add disableLinkTransformToStyle sandbox config

web-infra-dev · May 6, 2024 · 746de99 · 746de99
1 parent a09cde7
commit 746de99
Show file tree

Hide file tree

Showing 13 changed files with 5,046 additions and 1,118 deletions.
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: true,
     },
     // 子应用的入口地址，可以为 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.ref = 'stylesheet';
+      link.setAttribute('ref','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/src/dynamicNode/processor.ts b/packages/browser-vm/src/dynamicNode/processor.ts
@@ -356,9 +356,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
+    ) {
       parentNode = this.findParentNodeInApp(context, 'head');
-      if (this.el.rel === 'stylesheet' && this.el.href) {
+      if (this.el.getAttribute('ref') === '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
@@ -133,6 +133,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),
           // 缓存模式，不收集副作用
           disableCollect:

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>;
   addSourceList?: (

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;
   }
 

diff --git a/packages/core/src/module/app.ts b/packages/core/src/module/app.ts
@@ -752,6 +752,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
@@ -9,7 +9,7 @@ import { AppInfo } from './app';
 
 // Fetch `script`, `link` and `module meta` elements
 function fetchStaticResources(
-  appName: string,
+  appInfo: AppInfo,
   loader: Loader,
   entryManager: TemplateManager,
 ) {
@@ -22,10 +22,7 @@ function fetchStaticResources(
       .map((node) => {
         const src = entryManager.findAttributeValue(node, 'src');
         const type = entryManager.findAttributeValue(node, 'type');
-        let crossOrigin = entryManager.findAttributeValue(
-          node,
-          'crossorigin',
-        );
+        let crossOrigin = entryManager.findAttributeValue(node, 'crossorigin');
         if (crossOrigin === '') {
           crossOrigin = 'anonymous';
         }
@@ -42,7 +39,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,
@@ -55,7 +52,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);
@@ -78,20 +75,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);
@@ -147,7 +150,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,
     );