@torpor/view 0.0.10 → 0.0.12

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @torpor/view
 
+## 0.0.12
+
+### Patch Changes
+
+- ff5f459: Fix: scope more styles
+
+## 0.0.11
+
+### Patch Changes
+
+- 78e78b9: Fix: use the existing fragment name
+
 ## 0.0.10
 
 ### Patch Changes

package/dist/{ServerSlotRender-AWF3bD5B.d.cts → ServerSlotRender-t1sOutne.d.cts}

@@ -6,7 +6,7 @@ type Cleanup = () => void;
 
 declare function formatText(value: any): string;
 
-declare function getClasses(value: unknown): string;
+declare function getClasses(value: unknown, styleHash?: string): string;
 
 declare function getStyles(value: Record<string, any>): string;
 

package/dist/{ServerSlotRender-AWF3bD5B.d.ts → ServerSlotRender-t1sOutne.d.ts}

@@ -6,7 +6,7 @@ type Cleanup = () => void;
 
 declare function formatText(value: any): string;
 
-declare function getClasses(value: unknown): string;
+declare function getClasses(value: unknown, styleHash?: string): string;
 
 declare function getStyles(value: Record<string, any>): string;
 

package/dist/{chunk-GO2L324Q.js → chunk-T6JGCJ5T.js}

@@ -4,9 +4,12 @@ function formatText(value) {
 }
 
 // src/render/getClasses.ts
-function getClasses(value) {
+function getClasses(value, styleHash) {
   let classes = [];
   gatherNames("", value, classes);
+  if (styleHash) {
+    classes.push(styleHash);
+  }
   return classes.join(" ");
 }
 function gatherNames(name, value, classes) {
@@ -39,4 +42,4 @@ export {
   getClasses,
   getStyles
 };
-//# sourceMappingURL=chunk-GO2L324Q.js.map
+//# sourceMappingURL=chunk-T6JGCJ5T.js.map

package/dist/chunk-T6JGCJ5T.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/render/formatText.ts","../src/render/getClasses.ts","../src/render/getStyles.ts"],"sourcesContent":["export default function formatText(value: any): string {\n\treturn value ?? \"\";\n}\n","export default function getClasses(value: unknown, styleHash?: string): string {\n\tlet classes: string[] = [];\n\tgatherNames(\"\", value, classes);\n\tif (styleHash) {\n\t\tclasses.push(styleHash);\n\t}\n\treturn classes.join(\" \");\n}\n\nfunction gatherNames(name: unknown, value: unknown, classes: string[]) {\n\tif (value) {\n\t\tif (Array.isArray(value)) {\n\t\t\tfor (let v of value) {\n\t\t\t\tgatherNames(v, v, classes);\n\t\t\t}\n\t\t} else if (typeof value === \"object\") {\n\t\t\tfor (let [n, v] of Object.entries(value)) {\n\t\t\t\tgatherNames(n, v, classes);\n\t\t\t}\n\t\t} else {\n\t\t\tclasses.push(name as string);\n\t\t}\n\t}\n}\n","export default function getStyles(value: Record<string, any>): string {\n\tlet styles: string[] = [];\n\tfor (let [n, v] of Object.entries(value)) {\n\t\tstyles.push(`${n}: ${v}`);\n\t}\n\treturn styles.join(\"; \");\n}\n"],"mappings":";AAAe,SAAR,WAA4B,OAAoB;AACtD,SAAO,SAAS;AACjB;;;ACFe,SAAR,WAA4B,OAAgB,WAA4B;AAC9E,MAAI,UAAoB,CAAC;AACzB,cAAY,IAAI,OAAO,OAAO;AAC9B,MAAI,WAAW;AACd,YAAQ,KAAK,SAAS;AAAA,EACvB;AACA,SAAO,QAAQ,KAAK,GAAG;AACxB;AAEA,SAAS,YAAY,MAAe,OAAgB,SAAmB;AACtE,MAAI,OAAO;AACV,QAAI,MAAM,QAAQ,KAAK,GAAG;AACzB,eAAS,KAAK,OAAO;AACpB,oBAAY,GAAG,GAAG,OAAO;AAAA,MAC1B;AAAA,IACD,WAAW,OAAO,UAAU,UAAU;AACrC,eAAS,CAAC,GAAG,CAAC,KAAK,OAAO,QAAQ,KAAK,GAAG;AACzC,oBAAY,GAAG,GAAG,OAAO;AAAA,MAC1B;AAAA,IACD,OAAO;AACN,cAAQ,KAAK,IAAc;AAAA,IAC5B;AAAA,EACD;AACD;;;ACvBe,SAAR,UAA2B,OAAoC;AACrE,MAAI,SAAmB,CAAC;AACxB,WAAS,CAAC,GAAG,CAAC,KAAK,OAAO,QAAQ,KAAK,GAAG;AACzC,WAAO,KAAK,GAAG,CAAC,KAAK,CAAC,EAAE;AAAA,EACzB;AACA,SAAO,OAAO,KAAK,IAAI;AACxB;","names":[]}

package/dist/compile.cjs

@@ -91,6 +91,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("}");
@@ -198,6 +209,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}` : ""}`;
     }
@@ -267,17 +281,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("}");
@@ -1173,7 +1176,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;`);
@@ -1534,9 +1537,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");
@@ -2449,6 +2458,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");
@@ -2462,6 +2474,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 {
@@ -3589,40 +3604,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);
     }
   }
 }