@torpor/view 0.1.11 → 0.2.0

package/dist/compile.js

@@ -930,16 +930,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);
@@ -949,9 +954,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);
@@ -1538,13 +1540,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);
@@ -1552,10 +1554,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(`
@@ -1593,17 +1595,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);
@@ -2118,7 +2116,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;
@@ -2130,16 +2128,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);
@@ -2149,9 +2152,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;`);
@@ -2173,15 +2173,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(`}`);
       }
     }
@@ -2198,7 +2198,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;
 }
@@ -2207,7 +2210,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) {
@@ -2223,7 +2226,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 = "";
   }
 }
@@ -2232,7 +2235,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) {
@@ -2250,7 +2253,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("}");
@@ -2272,7 +2275,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) {
@@ -2290,7 +2293,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("}");
@@ -2300,7 +2303,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) {
@@ -2317,7 +2320,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 = "";
   }
 }
@@ -2337,7 +2340,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} {`);
@@ -2357,7 +2360,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;");
@@ -2417,7 +2420,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);
@@ -2426,7 +2429,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("");
@@ -2534,14 +2537,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 {
@@ -2580,7 +2584,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;
@@ -2610,9 +2614,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 {`);
@@ -2620,7 +2622,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 = "";
     }
   }
@@ -2825,17 +2827,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;