feat: adjust dynamic node handling for vm-sandbox

web-infra-dev · Mar 7, 2022 · 7567789 · 7567789
1 parent d85cdd4
commit 7567789
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 43 deletions.
diff --git a/packages/browser-vm/src/dynamicNode/index.ts b/packages/browser-vm/src/dynamicNode/index.ts
@@ -1,9 +1,9 @@
 import { warn } from '@garfish/utils';
 import { StyleManager } from '@garfish/loader';
 import { __domWrapper__ } from '../symbolTypes';
-import { sandboxMap, isStyledComponentsLike } from '../utils';
 import { injectHandlerParams } from './processParams';
 import { DynamicNodeProcessor, rawElementMethods } from './processor';
+import { isInIframe, sandboxMap, isStyledComponentsLike } from '../utils';
 
 const mountElementMethods = [
   'append',
@@ -24,13 +24,11 @@ function injector(current: Function, methodName: string) {
 
     if (this?.tagName?.toLowerCase() === 'style') {
       const { baseUrl, namespace } = sandbox?.options || {};
-      if (baseUrl) {
-        const manager = new StyleManager(el.textContent);
-        manager.setScope(namespace);
-        manager.correctPath(baseUrl);
-        this.textContent = manager.styleCode;
-        return originProcess();
-      }
+      const manager = new StyleManager(el.textContent);
+      manager.setScope(namespace);
+      manager.correctPath(baseUrl);
+      el.textContent = manager.transformCode(manager.styleCode);
+      return originProcess();
     }
 
     if (sandbox) {

diff --git a/packages/browser-vm/src/dynamicNode/processor.ts b/packages/browser-vm/src/dynamicNode/processor.ts
@@ -245,12 +245,10 @@ export class DynamicNodeProcessor {
     // The style node needs to be placed in the sandbox root container
     else if (this.is('style')) {
       parentNode = this.findParentNodeInApp(context, 'head');
-      if (baseUrl) {
-        const manager = new StyleManager(this.el.textContent);
-        manager.setScope(namespace);
-        manager.correctPath(baseUrl);
-        this.el.textContent = manager.styleCode;
-      }
+      const manager = new StyleManager(this.el.textContent);
+      manager.setScope(namespace);
+      manager.correctPath(baseUrl);
+      this.el.textContent = manager.transformCode(manager.styleCode);
       convertedNode = this.el;
       this.sandbox.dynamicStyleSheetElementSet.add(this.el);
     }

diff --git a/packages/browser-vm/src/proxyInterceptor/document.ts b/packages/browser-vm/src/proxyInterceptor/document.ts
@@ -36,17 +36,26 @@ export function createGetter(sandbox: Sandbox) {
       ? Reflect.get(target, p, receiver)
       : Reflect.get(document, p);
 
+    const setSandboxRef = (el) => {
+      if (isObject(el)) {
+        sandboxMap.setElementTag(el, sandbox);
+        if (__DEV__) {
+          el.__SANDBOX__ = true;
+        }
+      }
+      return el;
+    };
+
     if (rootNode) {
       if (p === 'createElement') {
         return function (tagName, options) {
           const el = value.call(document, tagName, options);
-          if (isObject(el)) {
-            sandboxMap.setElementTag(el, sandbox);
-            if (__DEV__) {
-              el.__SANDBOX__ = true;
-            }
-          }
-          return el;
+          return setSandboxRef(el);
+        };
+      } else if (p === 'createTextNode') {
+        return function (data) {
+          const el = value.call(document, data);
+          return setSandboxRef(el);
         };
       } else if (p === 'head') {
         return findTarget(rootNode, ['head', `div[${__MockHead__}]`]) || value;

diff --git a/packages/css-scope/src/index.ts b/packages/css-scope/src/index.ts
@@ -7,36 +7,33 @@ export interface Options {
   excludes?: Array<string> | ((name: string) => boolean);
 }
 
-const pluginName = 'css-scope';
-
 export function GarfishCssScope(options: Options = {}) {
-  return function (Garfish: interfaces.Garfish): interfaces.Plugin {
-    const disable = (appName: string) => {
-      const { excludes } = options;
-      if (Array.isArray(excludes)) return excludes.includes(appName);
-      if (typeof excludes === 'function') return excludes(appName);
-      return true;
-    };
+  const disable = (appName: string) => {
+    const { excludes } = options;
+    if (Array.isArray(excludes)) return excludes.includes(appName);
+    if (typeof excludes === 'function') return excludes(appName);
+    return false;
+  };
+
+  const protoCache = new Set();
 
+  return function (Garfish: interfaces.Garfish): interfaces.Plugin {
     return {
-      name: pluginName,
+      name: 'css-scope',
       version: __VERSION__,
 
       beforeBootstrap() {
-        const loader = Garfish.loader;
-        loader.hooks.usePlugin({
-          name: pluginName,
+        const proto = Garfish.loader.StyleManager.prototype;
+        if (!protoCache.has(proto)) {
+          protoCache.add(proto);
 
-          loaded(data) {
-            const { scope, fileType } = data.value;
-            console.log(scope, fileType);
-            if (fileType === 'css' && !disable(scope)) {
-              const manager = data.value.resourceManager as StyleManager;
-              console.log(manager);
+          proto.transformCode = function (code: string) {
+            if (!code || !this.scope || disable(this.scope)) {
+              return code;
             }
-            return data;
-          },
-        });
+            return '';
+          };
+        }
       },
     };
   };