@torpor/view 0.1.10 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @torpor/view
 
+## 0.2.0
+
+### Minor Changes
+
+- b716d5c: Feat: inline styles during SSR
+
+### Patch Changes
+
+- c38f914: Fix: moving a range that was in a fragment
+- 995d950: Fix: merge :class and class (making :class obsolete)
+- 014bda0: Fix: skip hydration start when getting the root
+
+## 0.1.11
+
+### Patch Changes
+
+- 741a289: !Refactor: rename runLayoutSlot to fillLayoutSlot
+
 ## 0.1.10
 
 ### Patch Changes

package/README.md

@@ -210,7 +210,7 @@ export default function Component($props: { name: string }) {
 
 function TaskItem() {
     @render {
-        <li :class={{ done: $props.task.done }}>
+        <li class={{ done: $props.task.done }}>
             <input type="checkbox" &checked={$props.task.done} />
             {$props.task.text}
         </li>

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

@@ -4,12 +4,12 @@
  */
 type Cleanup = () => void;
 
-declare function formatText(value: any): string;
+declare function buildClasses(value: unknown, styleHash?: string): string;
 
-declare function getClasses(value: unknown, styleHash?: string): string;
+declare function buildStyles(value: unknown): string;
 
-declare function getStyles(value: Record<string, any>): string;
+declare function formatText(value: any): string;
 
 type ServerSlotRender = ($props?: Record<PropertyKey, any>, $context?: Record<PropertyKey, any>) => void;
 
-export { type Cleanup as C, type ServerSlotRender as S, getStyles as a, formatText as f, getClasses as g };
+export { type Cleanup as C, type ServerSlotRender as S, buildStyles as a, buildClasses as b, formatText as f };

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

@@ -4,12 +4,12 @@
  */
 type Cleanup = () => void;
 
-declare function formatText(value: any): string;
+declare function buildClasses(value: unknown, styleHash?: string): string;
 
-declare function getClasses(value: unknown, styleHash?: string): string;
+declare function buildStyles(value: unknown): string;
 
-declare function getStyles(value: Record<string, any>): string;
+declare function formatText(value: any): string;
 
 type ServerSlotRender = ($props?: Record<PropertyKey, any>, $context?: Record<PropertyKey, any>) => void;
 
-export { type Cleanup as C, type ServerSlotRender as S, getStyles as a, formatText as f, getClasses as g };
+export { type Cleanup as C, type ServerSlotRender as S, buildStyles as a, buildClasses as b, formatText as f };

package/dist/chunk-XNO4YEJ3.js

@@ -0,0 +1,64 @@
+// src/render/buildClasses.ts
+function buildClasses(value, styleHash) {
+  if (typeof value === "string") {
+    if (styleHash) {
+      value += " " + styleHash;
+    }
+    return value;
+  } else {
+    let classes = [];
+    gatherNames("", value, classes);
+    if (styleHash) {
+      classes.push(styleHash);
+    }
+    return classes.join(" ");
+  }
+}
+function gatherNames(name, value, classes) {
+  if (value) {
+    if (Array.isArray(value)) {
+      for (let v of value) {
+        gatherNames(v, v, classes);
+      }
+    } else if (typeof value === "object") {
+      for (let [n, v] of Object.entries(value)) {
+        gatherNames(n, v, classes);
+      }
+    } else {
+      classes.push(name);
+    }
+  }
+}
+
+// src/render/buildStyles.ts
+function buildStyles(value) {
+  if (typeof value === "string") {
+    return value;
+  } else {
+    let styles = [];
+    if (value) {
+      if (Array.isArray(value)) {
+        for (let v of value) {
+          styles.push(v);
+        }
+      } else if (typeof value === "object") {
+        for (let [n, v] of Object.entries(value)) {
+          styles.push(`${n}: ${v}`);
+        }
+      }
+    }
+    return styles.join("; ");
+  }
+}
+
+// src/render/formatText.ts
+function formatText(value) {
+  return value ?? "";
+}
+
+export {
+  buildClasses,
+  buildStyles,
+  formatText
+};
+//# sourceMappingURL=chunk-XNO4YEJ3.js.map

package/dist/chunk-XNO4YEJ3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/render/buildClasses.ts","../src/render/buildStyles.ts","../src/render/formatText.ts"],"sourcesContent":["export default function buildClasses(value: unknown, styleHash?: string): string {\n\tif (typeof value === \"string\") {\n\t\tif (styleHash) {\n\t\t\tvalue += \" \" + styleHash;\n\t\t}\n\t\treturn value;\n\t} else {\n\t\tlet classes: string[] = [];\n\t\tgatherNames(\"\", value, classes);\n\t\tif (styleHash) {\n\t\t\tclasses.push(styleHash);\n\t\t}\n\t\treturn classes.join(\" \");\n\t}\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 buildStyles(value: unknown): string {\n\tif (typeof value === \"string\") {\n\t\treturn value;\n\t} else {\n\t\tlet styles: string[] = [];\n\t\tif (value) {\n\t\t\tif (Array.isArray(value)) {\n\t\t\t\tfor (let v of value) {\n\t\t\t\t\tstyles.push(v);\n\t\t\t\t}\n\t\t\t} else if (typeof value === \"object\") {\n\t\t\t\tfor (let [n, v] of Object.entries(value)) {\n\t\t\t\t\tstyles.push(`${n}: ${v}`);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn styles.join(\"; \");\n\t}\n}\n","export default function formatText(value: any): string {\n\treturn value ?? \"\";\n}\n"],"mappings":";AAAe,SAAR,aAA8B,OAAgB,WAA4B;AAChF,MAAI,OAAO,UAAU,UAAU;AAC9B,QAAI,WAAW;AACd,eAAS,MAAM;AAAA,IAChB;AACA,WAAO;AAAA,EACR,OAAO;AACN,QAAI,UAAoB,CAAC;AACzB,gBAAY,IAAI,OAAO,OAAO;AAC9B,QAAI,WAAW;AACd,cAAQ,KAAK,SAAS;AAAA,IACvB;AACA,WAAO,QAAQ,KAAK,GAAG;AAAA,EACxB;AACD;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;;;AC9Be,SAAR,YAA6B,OAAwB;AAC3D,MAAI,OAAO,UAAU,UAAU;AAC9B,WAAO;AAAA,EACR,OAAO;AACN,QAAI,SAAmB,CAAC;AACxB,QAAI,OAAO;AACV,UAAI,MAAM,QAAQ,KAAK,GAAG;AACzB,iBAAS,KAAK,OAAO;AACpB,iBAAO,KAAK,CAAC;AAAA,QACd;AAAA,MACD,WAAW,OAAO,UAAU,UAAU;AACrC,iBAAS,CAAC,GAAG,CAAC,KAAK,OAAO,QAAQ,KAAK,GAAG;AACzC,iBAAO,KAAK,GAAG,CAAC,KAAK,CAAC,EAAE;AAAA,QACzB;AAAA,MACD;AAAA,IACD;AACA,WAAO,OAAO,KAAK,IAAI;AAAA,EACxB;AACD;;;AClBe,SAAR,WAA4B,OAAoB;AACtD,SAAO,SAAS;AACjB;","names":[]}

package/dist/compile.cjs

@@ -956,16 +956,21 @@ function buildComponentNode(node, status, b, root = false) {
         value = value.substring(1, value.length - 1);
         buildRun("setProp", `${propsName}["${name}"] = ${value};`, status, b);
         buildRun("setBinding", `${value} = ${propsName}["${name}"];`, status, b);
-      } else if (name === ":class" && value != null && isFullyReactive(value)) {
+      } else if ((name === "class" || name === ":class") && value != null) {
         status.imports.add("t_class");
-        value = value.substring(1, value.length - 1);
+        if (isFullyReactive(value)) {
+          value = value.substring(1, value.length - 1);
+        }
+        const params = [value];
         if (node.scopeStyles) {
-          value += `, "torp-${status.styleHash}"`;
+          params.push(`"torp-${status.styleHash}"`);
         }
-        buildRun("setClasses", `${propsName}["class"] = t_class(${value});`, status, b);
-      } else if (name === ":style" && value != null && isFullyReactive(value)) {
+        buildRun("setClasses", `${propsName}["class"] = t_class(${params.join(", ")});`, status, b);
+      } else if ((name === "style" || name === ":style") && value != null) {
         status.imports.add("t_style");
-        value = value.substring(1, value.length - 1);
+        if (isFullyReactive(value)) {
+          value = value.substring(1, value.length - 1);
+        }
         buildRun("setStyles", `${propsName}["style"] = t_style(${value});`, status, b);
       } else if (value != null) {
         let fullyReactive = isFullyReactive(value);
@@ -975,9 +980,6 @@ function buildComponentNode(node, status, b, root = false) {
         } else if (partlyReactive) {
           value = `\`${trimQuotes(value).replaceAll("{", "${")}\``;
         }
-        if (name === "class") {
-          value = `"${trimQuotes(value)} torp-${status.styleHash}"`;
-        }
         const setProp = `${propsName}["${name}"] = ${value};`;
         if (fullyReactive || partlyReactive) {
           buildRun("setProp", setProp, status, b);
@@ -1564,13 +1566,13 @@ function buildHeadNode(node, status, b) {
   status.imports.add("$run");
   b.append(`
 		$run(function runHead() {
-			const t_head_el = document.createElement("${node.tagName}");
-			document.getElementsByTagName("head")[0].appendChild(t_head_el);`);
+			const t_headel = document.createElement("${node.tagName}");
+			document.getElementsByTagName("head")[0].appendChild(t_headel);`);
   for (let { name, value } of node.attributes) {
     if (name.startsWith("{") && name.endsWith("}")) {
       name = name.substring(1, name.length - 1);
       const propName = name.split(".").at(-1);
-      buildRun("setAttribute", `t_head_el.setAttribute("${propName}", ${name});`, status, b);
+      buildRun("setAttribute", `t_headel.setAttribute("${propName}", ${name});`, status, b);
     } else if (value != null && isReactive(value)) {
       if (isFullyReactive(value)) {
         value = value.substring(1, value.length - 1);
@@ -1578,10 +1580,10 @@ function buildHeadNode(node, status, b) {
         value = `\`${trimQuotes(value).replaceAll("{", "${")}\``;
       }
       status.imports.add("t_attribute");
-      buildRun("setAttribute", `t_attribute(t_head_el, "${name}", ${value});`, status, b);
+      buildRun("setAttribute", `t_attribute(t_headel, "${name}", ${value});`, status, b);
     } else if (value != null) {
       status.imports.add("t_attribute");
-      b.append(`t_attribute(t_head_el, "${name}", ${value});`);
+      b.append(`t_attribute(t_headel, "${name}", ${value});`);
     }
   }
   b.append(`
@@ -1619,17 +1621,13 @@ function buildElementAttributes(node, varName, status, b) {
         buildEventAttribute(varName, name, value, 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") {
+      } else if (name === "class" || name === ":class") {
         status.imports.add("t_class");
+        const params = [value];
         if (node.scopeStyles) {
-          value += `, "torp-${status.styleHash}"`;
+          params.push(`"torp-${status.styleHash}"`);
         }
-        buildRun("setClasses", `${varName}.className = t_class(${value});`, status, b);
+        buildRun("setClasses", `${varName}.className = t_class(${params.join(", ")});`, status, b);
       } else if (name === ":style") {
         status.imports.add("t_style");
         buildRun("setStyles", `${varName}.setAttribute("style", t_style(${value}));`, status, b);
@@ -2144,7 +2142,7 @@ function buildStyleAttribute(attribute, b) {
 function buildServerComponentNode(node, status, b) {
   status.output += HYDRATION_START_COMMENT;
   if (status.output) {
-    b.append(`$output += \`${status.output}\`;`);
+    b.append(`t_body += \`${status.output}\`;`);
     status.output = "";
   }
   const componentHasProps = node.attributes.length;
@@ -2156,16 +2154,21 @@ function buildServerComponentNode(node, status, b) {
         name = name.substring(1, name.length - 1);
         const propName = name.split(".").at(-1);
         b.append(`${propsName}["${propName}"] = ${name};`);
-      } else if (name === ":class" && value != null && isFullyReactive(value)) {
+      } else if ((name === "class" || name === ":class") && value != null) {
         status.imports.add("t_class");
-        value = value.substring(1, value.length - 1);
+        if (isFullyReactive(value)) {
+          value = value.substring(1, value.length - 1);
+        }
+        const params = [value];
         if (node.scopeStyles) {
-          value += `, "torp-${status.styleHash}"`;
+          params.push(`"torp-${status.styleHash}"`);
         }
-        b.append(`${propsName}["class"] = t_class(${value});`);
-      } else if (name === ":style" && value != null && isFullyReactive(value)) {
+        b.append(`${propsName}["class"] = t_class(${params.join(", ")});`);
+      } else if ((name === "style" || name === ":style") && value != null) {
         status.imports.add("t_style");
-        value = value.substring(1, value.length - 1);
+        if (isFullyReactive(value)) {
+          value = value.substring(1, value.length - 1);
+        }
         b.append(`${propsName}["style"] = t_style(${value});`);
       } else if (value != null) {
         let fullyReactive = isFullyReactive(value);
@@ -2175,9 +2178,6 @@ function buildServerComponentNode(node, status, b) {
         } else if (partlyReactive) {
           value = `\`${trimQuotes(value).replaceAll("{", "${")}\``;
         }
-        if (name === "class") {
-          b.append(`"${trimQuotes(value)} torp-${status.styleHash}"`);
-        }
         b.append(`${propsName}["${name}"] = ${value};`);
       } else {
         b.append(`${propsName}["${name}"] = true;`);
@@ -2199,15 +2199,15 @@ function buildServerComponentNode(node, status, b) {
         b.append(`${slotsName}["${slotName}"] = (
 ${slotParams.join(",\n")}
 ) => {`);
-        b.append(`let $output = "";`);
+        b.append(`let t_body = "";`);
         for (let child of slot.children) {
           buildServerNode(child, status, b);
         }
         if (status.output) {
-          b.append(`$output += \`${status.output}\`;`);
+          b.append(`t_body += \`${status.output}\`;`);
           status.output = "";
         }
-        b.append("return $output;");
+        b.append("return t_body;");
         b.append(`}`);
       }
     }
@@ -2224,7 +2224,10 @@ ${slotParams.join(",\n")}
     renderParams += `, ${slotsName}`;
   }
   b.append("");
-  b.append(`$output += ${componentName}(${renderParams})`);
+  const componentResult = nextVarName("comp", status);
+  b.append(`const ${componentResult} = ${componentName}(${renderParams});`);
+  b.append(`t_body += ${componentResult}.body;`);
+  b.append(`t_head += ${componentResult}.head;`);
   status.output += HYDRATION_END_COMMENT;
   status.output += ANCHOR_COMMENT;
 }
@@ -2233,7 +2236,7 @@ ${slotParams.join(",\n")}
 function buildServerAwaitNode(node, status, b) {
   status.output += HYDRATION_START_COMMENT;
   if (status.output) {
-    b.append(`$output += \`${status.output}\`;`);
+    b.append(`t_body += \`${status.output}\`;`);
     status.output = "";
   }
   for (let branch of node.children) {
@@ -2249,7 +2252,7 @@ function buildServerAwaitBranch(node, status, b) {
     buildServerNode(child, status, b);
   }
   if (status.output) {
-    b.append(`$output += \`${status.output}\`;`);
+    b.append(`t_body += \`${status.output}\`;`);
     status.output = "";
   }
 }
@@ -2258,7 +2261,7 @@ function buildServerAwaitBranch(node, status, b) {
 function buildServerForNode(node, status, b) {
   status.output += HYDRATION_START_COMMENT;
   if (status.output) {
-    b.append(`$output += \`${status.output}\`;`);
+    b.append(`t_body += \`${status.output}\`;`);
     status.output = "";
   }
   for (let branch of node.children) {
@@ -2276,7 +2279,7 @@ function buildServerForBranch(node, status, b) {
     buildServerNode(child, status, b);
   }
   if (status.output) {
-    b.append(`$output += \`${status.output}\`;`);
+    b.append(`t_body += \`${status.output}\`;`);
     status.output = "";
   }
   b.append("}");
@@ -2298,7 +2301,7 @@ function buildServerHtmlNode(node, status) {
 function buildServerIfNode(node, status, b) {
   status.output += HYDRATION_START_COMMENT;
   if (status.output) {
-    b.append(`$output += \`${status.output}\`;`);
+    b.append(`t_body += \`${status.output}\`;`);
     status.output = "";
   }
   for (let branch of node.children) {
@@ -2316,7 +2319,7 @@ function buildServerIfBranch(node, status, b) {
     buildServerNode(child, status, b);
   }
   if (status.output) {
-    b.append(`$output += \`${status.output}\`;`);
+    b.append(`t_body += \`${status.output}\`;`);
     status.output = "";
   }
   b.append("}");
@@ -2326,7 +2329,7 @@ function buildServerIfBranch(node, status, b) {
 function buildServerReplaceNode(node, status, b) {
   status.output += HYDRATION_START_COMMENT;
   if (status.output) {
-    b.append(`$output += \`${status.output}\`;`);
+    b.append(`t_body += \`${status.output}\`;`);
     status.output = "";
   }
   for (let branch of node.children) {
@@ -2343,7 +2346,7 @@ function buildServerReplaceBranch(node, status, b) {
     buildServerNode(child, status, b);
   }
   if (status.output) {
-    b.append(`$output += \`${status.output}\`;`);
+    b.append(`t_body += \`${status.output}\`;`);
     status.output = "";
   }
 }
@@ -2363,7 +2366,7 @@ function maybeAppend2(text, end) {
 function buildServerSwitchNode(node, status, b) {
   status.output += HYDRATION_START_COMMENT;
   if (status.output) {
-    b.append(`$output += \`${status.output}\`;`);
+    b.append(`t_body += \`${status.output}\`;`);
     status.output = "";
   }
   b.append(`${node.statement} {`);
@@ -2383,7 +2386,7 @@ function buildServerSwitchBranch(node, status, b) {
     buildServerNode(child, status, b);
   }
   if (status.output) {
-    b.append(`$output += \`${status.output}\`;`);
+    b.append(`t_body += \`${status.output}\`;`);
     status.output = "";
   }
   b.append("break;");
@@ -2443,7 +2446,7 @@ function buildServerControlNode(node, status, b) {
     }
     case "@const": {
       if (status.output) {
-        b.append(`$output += \`${status.output}\`;`);
+        b.append(`t_body += \`${status.output}\`;`);
         status.output = "";
       }
       buildServerScriptNode(node, b);
@@ -2452,7 +2455,7 @@ function buildServerControlNode(node, status, b) {
     case "@function":
     case "@async function": {
       if (status.output) {
-        b.append(`$output += \`${status.output}\`;`);
+        b.append(`t_body += \`${status.output}\`;`);
         status.output = "";
       }
       b.append("");
@@ -2560,14 +2563,15 @@ function buildElementAttributes2(node, status) {
         let valueOrDefault = `${value} || ${defaultValue}`;
         const propName = name.substring(1);
         attributes.push(`${propName}="\${${valueOrDefault}}"`);
-      } else if (name === ":class") {
+      } else if (name === "class" || name === ":class") {
         status.imports.add("t_class");
+        let params = [value];
         if (node.scopeStyles) {
-          value += `, "torp-${status.styleHash}"`;
+          params.push(`"torp-${status.styleHash}"`);
           needsClass = false;
         }
-        attributes.push(`class="\${t_class(${value})}"`);
-      } else if (name === ":style") {
+        attributes.push(`class="\${t_class(${params.join(", ")})}"`);
+      } else if (name === "style" || name === ":style") {
         status.imports.add("t_style");
         attributes.push(`style="\${t_style(${value})}"`);
       } else {
@@ -2606,7 +2610,7 @@ function buildServerRootNode(node, status, b) {
 function buildServerSlotNode(node, status, b) {
   status.output += HYDRATION_START_COMMENT;
   if (status.output) {
-    b.append(`$output += \`${status.output}\`;`);
+    b.append(`t_body += \`${status.output}\`;`);
     status.output = "";
   }
   let slotName = node.attributes.find((a) => a.name === "name")?.value;
@@ -2636,9 +2640,7 @@ function buildServerSlotNode(node, status, b) {
     }
   }
   b.append(`if ($slots && $slots["${slotName}"]) {`);
-  b.append(
-    `$output += $slots["${slotName}"](${slotHasProps ? propsName : "undefined"}, $context);`
-  );
+  b.append(`t_body += $slots["${slotName}"](${slotHasProps ? propsName : "undefined"}, $context);`);
   const fill = node.children.find((c) => isSpecialNode(c) && c.tagName === ":fill");
   if (fill && isSpecialNode(fill) && fill.children.length) {
     b.append(`} else {`);
@@ -2646,7 +2648,7 @@ function buildServerSlotNode(node, status, b) {
       buildServerNode(child, status, b);
     }
     if (status.output) {
-      b.append(`$output += \`${status.output}\`;`);
+      b.append(`t_body += \`${status.output}\`;`);
       status.output = "";
     }
   }
@@ -2851,17 +2853,24 @@ function buildServerTemplate(template, imports, b, options) {
         };
         b.append("");
         b.append("/* User interface */");
-        b.append(`let $output = "";`);
+        b.append(`let t_body = "";`);
+        if (current.style) {
+          const styles = buildStyles(current.style, current.style.hash).replaceAll('"', '\\"').replaceAll(/\s+/g, " ");
+          b.append(`let t_head = "<style id='${current.style.hash}'>${styles}</style>";
+`);
+        } else {
+          b.append(`let t_head = "";`);
+        }
         buildServerNode(current.markup, status, b);
         if (status.output) {
-          b.append(`$output += \`${status.output}\`;`);
+          b.append(`t_body += \`${status.output}\`;`);
           status.output = "";
         }
       }
       marker = i + "/* @render */".length;
     } else if (script.substring(i, i + "/* @end */".length) === "/* @end */") {
       b.append(script.substring(marker, i));
-      b.append("return $output;");
+      b.append(`return { body: t_body, head: t_head };`);
       currentIndex += 1;
       current = template.components[currentIndex];
       marker = i + "/* @end */".length;