@torpor/view 0.0.10 → 0.0.12

package/dist/compile.d.cts

@@ -43,6 +43,7 @@ type NodeType = "root" | "control" | "component" | "element" | "text" | "special
 
 type TemplateNode = {
     type: NodeType;
+    scopeStyles?: boolean;
     varName?: string;
     handled?: boolean;
 };

package/dist/compile.d.ts

@@ -43,6 +43,7 @@ type NodeType = "root" | "control" | "component" | "element" | "text" | "special
 
 type TemplateNode = {
     type: NodeType;
+    scopeStyles?: boolean;
     varName?: string;
     handled?: boolean;
 };

package/dist/compile.js

@@ -65,6 +65,17 @@ var HYDRATION_START_COMMENT = "<![>";
 var HYDRATION_END_COMMENT = "<!]>";
 var HYDRATION_BRANCH_COMMENT = "<!^>";
 
+// src/compile/utils/trimQuotes.ts
+function trimQuotes(text) {
+  let start = 0;
+  let end = text.length;
+  while (text[start] === "'" && text[end - 1] === "'" || text[start] === '"' && text[end - 1] === '"' || text[start] === "`" && text[end - 1] === "`") {
+    start += 1;
+    end -= 1;
+  }
+  return text.substring(start, end);
+}
+
 // src/compile/build/utils/isReactive.ts
 function isReactive(text) {
   return text.includes("{") && text.includes("}");
@@ -172,6 +183,9 @@ function buildElementFragmentText(node, status, fragments, currentFragment) {
       if (a.name.startsWith("data-")) {
         return `${a.name}=""`;
       }
+    } else if (a.name === "class" && node.scopeStyles) {
+      let value = a.value ? `"${trimQuotes(a.value)} torp-${status.styleHash}"` : `"torp-${status.styleHash}"`;
+      return `${a.name}=${value}`;
     } else {
       return `${a.name}${a.value != null ? `=${a.value}` : ""}`;
     }
@@ -241,17 +255,6 @@ function trimMatched(text, startChar, endChar) {
   return text.substring(start, end);
 }
 
-// src/compile/utils/trimQuotes.ts
-function trimQuotes(text) {
-  let start = 0;
-  let end = text.length;
-  while (text[start] === "'" && text[end - 1] === "'" || text[start] === '"' && text[end - 1] === '"' || text[start] === "`" && text[end - 1] === "`") {
-    start += 1;
-    end -= 1;
-  }
-  return text.substring(start, end);
-}
-
 // src/compile/build/utils/isFullyReactive.ts
 function isFullyReactive(text) {
   return text.trim().startsWith("{") && text.trim().endsWith("}");
@@ -1147,7 +1150,7 @@ function buildHtmlBranch(node, status, b, parentName, rangeName) {
   status.imports.add("t_run_branch");
   b.append(`t_run_branch(${rangeName}, -1, () => {`);
   const templateName = nextVarName("template", status);
-  const fragmentName = nextVarName("fragment", status);
+  const fragmentName = `t_fragment_${node.fragment.number}`;
   b.append(`const ${templateName} = document.createElement("template");`);
   b.append(`${templateName}.innerHTML = ${node.statement};`);
   b.append(`let ${fragmentName} = ${templateName}.content.cloneNode(true) as DocumentFragment;`);
@@ -1508,9 +1511,15 @@ function buildElementAttributes(node, varName, status, b) {
       } else if (name.startsWith(":transition")) {
         buildTransitionAttribute(node, varName, name, value, status, b);
       } else if (name === "class") {
+        if (node.scopeStyles) {
+          value += `+ "torp-${status.styleHash}"`;
+        }
         buildRun("setClassName", `${varName}.className = ${value};`, status, b);
       } else if (name === ":class") {
         status.imports.add("t_class");
+        if (node.scopeStyles) {
+          value += `, "torp-${status.styleHash}"`;
+        }
         buildRun("setClasses", `${varName}.className = t_class(${value});`, status, b);
       } else if (name === ":style") {
         status.imports.add("t_style");
@@ -2423,6 +2432,9 @@ function buildElementAttributes2(node, status) {
         attributes.push(`${propName}="\${${valueOrDefault}}"`);
       } else if (name === ":class") {
         status.imports.add("t_class");
+        if (node.scopeStyles) {
+          value += `, "torp-${status.styleHash}"`;
+        }
         attributes.push(`class="\${t_class(${value})}"`);
       } else if (name === ":style") {
         status.imports.add("t_style");
@@ -2436,6 +2448,9 @@ function buildElementAttributes2(node, status) {
       attributes.push(
         `${name}="${trimQuotes(value).replaceAll("{", "${t_attr(").replaceAll("}", ")}")}"`
       );
+    } else if (name === "class" && node.scopeStyles) {
+      value = value ? `"${trimQuotes(value)} torp-${status.styleHash}"` : `"torp-${status.styleHash}"`;
+      attributes.push(`${name}="${trimQuotes(value).replaceAll('"', "&quot;")}"`);
     } else if (value != null) {
       attributes.push(`${name}="${trimQuotes(value).replaceAll('"', "&quot;")}"`);
     } else {
@@ -3563,40 +3578,32 @@ function scopeStyles(status) {
       for (let block of component.style.blocks) {
         collectStyleSelectors(block, selectors);
       }
-      scopeStylesOnNode(component.markup, selectors, component.style.hash);
+      scopeStylesOnNode(component.markup, selectors);
     }
   }
 }
-function scopeStylesOnNode(node, selectors, styleHash) {
+function scopeStylesOnNode(node, selectors) {
   if (isElementNode(node)) {
-    let addClass = selectors.includes(node.tagName);
-    if (!addClass) {
+    let scopeStyles2 = selectors.includes(node.tagName);
+    if (!scopeStyles2) {
       for (let a of node.attributes) {
         if (a.name === "class" || a.name === ":class") {
-          addClass = true;
+          scopeStyles2 = true;
         } else if (a.name === "id" && a.value) {
-          addClass = selectors.includes(`#${trimQuotes(a.value)}`);
+          scopeStyles2 = selectors.includes(`#${trimQuotes(a.value)}`);
         } else if (a.name === "class" && a.value) {
-          addClass = selectors.includes(`.${trimQuotes(a.value)}`);
+          scopeStyles2 = selectors.includes(`.${trimQuotes(a.value)}`);
+        }
+        if (scopeStyles2) {
+          break;
         }
-        if (addClass) break;
-      }
-    }
-    if (addClass) {
-      let classAttribute = node.attributes.find((a) => a.name === "class");
-      if (classAttribute && classAttribute.value) {
-        classAttribute.value = `"${trimQuotes(classAttribute.value)} torp-${styleHash}"`;
-      } else {
-        node.attributes.push({
-          name: "class",
-          value: `"torp-${styleHash}"`
-        });
       }
     }
+    node.scopeStyles = scopeStyles2;
   }
   if (isParentNode(node)) {
     for (let child of node.children) {
-      scopeStylesOnNode(child, selectors, styleHash);
+      scopeStylesOnNode(child, selectors);
     }
   }
 }