feat: add code

Author: imtaotao

packages/browser-vm/src/dynamicNode/index.ts

@@ -19,14 +19,14 @@ function injector(current: Function, methodName: string) {
     const el = methodName === 'insertAdjacentElement'
       ? arguments[1]
       : arguments[0];
-    const sandbox = el && sandboxMap.get(el);
+    const sandbox = sandboxMap.get(el);
     const originProcess = () => current.apply(this, arguments);
 
-    if (this?.tagName?.toLowerCase() === 'style') {
+    if (el && this?.tagName?.toLowerCase() === 'style') {
       const { baseUrl, namespace } = sandbox?.options || {};
       const manager = new StyleManager(el.textContent);
-      manager.setScope(namespace);
       manager.correctPath(baseUrl);
+      manager.setAppName(namespace);
       el.textContent = manager.transformCode(manager.styleCode);
       return originProcess();
     }

packages/browser-vm/src/dynamicNode/processor.ts

@@ -246,8 +246,8 @@ export class DynamicNodeProcessor {
     else if (this.is('style')) {
       parentNode = this.findParentNodeInApp(context, 'head');
       const manager = new StyleManager(this.el.textContent);
-      manager.setScope(namespace);
       manager.correctPath(baseUrl);
+      manager.setAppName(namespace);
       this.el.textContent = manager.transformCode(manager.styleCode);
       convertedNode = this.el;
       this.sandbox.dynamicStyleSheetElementSet.add(this.el);

packages/core/src/module/app.ts

@@ -552,7 +552,7 @@ export class App {
         const text = node.children[0] as Text;
         if (text) {
           const styleManager = new StyleManager(text.content, baseUrl);
-          styleManager.setScope(this.name);
+          styleManager.setAppName(this.name);
           return entryManager.ignoreChildNodesCreation(
             styleManager.renderAsStyleElement(),
           );

packages/css-scope/src/index.ts

@@ -8,15 +8,16 @@ export interface Options {
 }
 
 export function GarfishCssScope(options: Options = {}) {
+  const protoCache = new Set<StyleManager>();
+  const codeCache = new Map<string, string>();
+
   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: 'css-scope',
@@ -28,10 +29,17 @@ export function GarfishCssScope(options: Options = {}) {
           protoCache.add(proto);
 
           proto.transformCode = function (code: string) {
-            if (!code || !this.scope || disable(this.scope)) {
+            if (!code || !this.appName || disable(this.appName)) {
               return code;
+            } else {
+              const astNode = parse(code, { source: this.url });
+              const newCode = stringify(
+                astNode,
+                `div[id^=garfish_app_for_${this.appName}_]`,
+              );
+              codeCache.set(code, newCode);
+              return newCode;
             }
-            return '';
           };
         }
       },

packages/css-scope/src/stringify.ts

@@ -66,7 +66,7 @@ class Compiler {
             : s === 'head'
               ? '[__GarfishMockHead__]'
               : s;
-      return `#${this.prefix} ${s}`;
+      return `${this.prefix} ${s}`;
     });
   }
 

packages/loader/src/index.ts

@@ -173,7 +173,7 @@ export class Loader {
 
         // Set css scope
         if (fileType === FileTypes.css) {
-          (resourceManager as StyleManager).setScope(scope);
+          (resourceManager as StyleManager).setAppName(scope);
         }
 
         // The results will be cached this time.

packages/loader/src/managers/style.ts

@@ -6,12 +6,12 @@ const MATCH_CSS_URL = /url\(['"]?([^\)]+?)['"]?\)/g;
 export class StyleManager {
   public styleCode: string;
   public url: string | null;
-  public scope: string | null;
+  public appName: string | null;
 
   private depsStack = new Set();
 
   constructor(styleCode: string, url?: string) {
-    this.scope = null;
+    this.appName = null;
     this.url = url || null;
     this.styleCode = styleCode;
   }
@@ -37,8 +37,8 @@ export class StyleManager {
     this.depsStack.add(node);
   }
 
-  setScope(scope: string) {
-    this.scope = scope;
+  setAppName(appName: string) {
+    this.appName = appName;
   }
 
   isSameOrigin(node: Node) {