@torpor/view 0.1.10 → 0.2.0

package/dist/ssr.cjs

@@ -25,9 +25,9 @@ __export(ssr_exports, {
   $unwrap: () => $serverUnwrap,
   $watch: () => $serverWatch,
   t_attr: () => formatAttributeText,
-  t_class: () => getClasses,
+  t_class: () => buildClasses,
   t_fmt: () => formatText,
-  t_style: () => getStyles
+  t_style: () => buildStyles
 });
 module.exports = __toCommonJS(ssr_exports);
 
@@ -49,24 +49,21 @@ function $serverWatch(object) {
   return object;
 }
 
-// src/render/formatAttributeText.ts
-function formatAttributeText(value) {
-  return (value ?? "").toString().replaceAll('"', """);
-}
-
-// src/render/formatText.ts
-function formatText(value) {
-  return value ?? "";
-}
-
-// src/render/getClasses.ts
-function getClasses(value, styleHash) {
-  let classes = [];
-  gatherNames("", value, classes);
-  if (styleHash) {
-    classes.push(styleHash);
+// 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(" ");
   }
-  return classes.join(" ");
 }
 function gatherNames(name, value, classes) {
   if (value) {
@@ -84,13 +81,35 @@ function gatherNames(name, value, classes) {
   }
 }
 
-// src/render/getStyles.ts
-function getStyles(value) {
-  let styles = [];
-  for (let [n, v] of Object.entries(value)) {
-    styles.push(`${n}: ${v}`);
+// 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("; ");
   }
-  return styles.join("; ");
+}
+
+// src/render/formatAttributeText.ts
+function formatAttributeText(value) {
+  return (value ?? "").toString().replaceAll('"', """);
+}
+
+// src/render/formatText.ts
+function formatText(value) {
+  return value ?? "";
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/ssr.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ssr.ts","../src/render/$serverMount.ts","../src/render/$serverRun.ts","../src/render/$serverUnwrap.ts","../src/render/$serverWatch.ts","../src/render/formatAttributeText.ts","../src/render/formatText.ts","../src/render/getClasses.ts","../src/render/getStyles.ts"],"sourcesContent":["import $mount from \"./render/$serverMount\";\nimport $run from \"./render/$serverRun\";\nimport $unwrap from \"./render/$serverUnwrap\";\nimport $watch from \"./render/$serverWatch\";\nimport t_attr from \"./render/formatAttributeText\";\nimport t_fmt from \"./render/formatText\";\nimport t_class from \"./render/getClasses\";\nimport t_style from \"./render/getStyles\";\nimport { type ServerSlotRender } from \"./types/ServerSlotRender\";\n\nexport { $watch, $unwrap, $run, $mount, t_fmt, t_attr, t_class, t_style };\n\nexport type { ServerSlotRender };\n","import { type Cleanup } from \"../types/Cleanup\";\n\nexport default function $serverMount(_: () => Cleanup | void): void {}\n","import { type Cleanup } from \"../types/Cleanup\";\n\nexport default function $serverRun(_: () => Cleanup | void): void {}\n","export default function $serverUnwrap<T extends Record<PropertyKey, any>>(object: T): T {\n\treturn object;\n}\n","export default function $serverWatch<T extends Record<PropertyKey, any>>(object: T): T {\n\treturn object;\n}\n","export default function formatAttributeText(value: any): string {\n\treturn (value ?? \"\").toString().replaceAll('\"', \"&quot;\");\n}\n","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":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEe,SAAR,aAA8B,GAA+B;AAAC;;;ACAtD,SAAR,WAA4B,GAA+B;AAAC;;;ACFpD,SAAR,cAAmE,QAAc;AACvF,SAAO;AACR;;;ACFe,SAAR,aAAkE,QAAc;AACtF,SAAO;AACR;;;ACFe,SAAR,oBAAqC,OAAoB;AAC/D,UAAQ,SAAS,IAAI,SAAS,EAAE,WAAW,KAAK,QAAQ;AACzD;;;ACFe,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":[]}
+{"version":3,"sources":["../src/ssr.ts","../src/render/$serverMount.ts","../src/render/$serverRun.ts","../src/render/$serverUnwrap.ts","../src/render/$serverWatch.ts","../src/render/buildClasses.ts","../src/render/buildStyles.ts","../src/render/formatAttributeText.ts","../src/render/formatText.ts"],"sourcesContent":["import $mount from \"./render/$serverMount\";\nimport $run from \"./render/$serverRun\";\nimport $unwrap from \"./render/$serverUnwrap\";\nimport $watch from \"./render/$serverWatch\";\nimport t_class from \"./render/buildClasses\";\nimport t_style from \"./render/buildStyles\";\nimport t_attr from \"./render/formatAttributeText\";\nimport t_fmt from \"./render/formatText\";\nimport { type ServerSlotRender } from \"./types/ServerSlotRender\";\n\nexport { $watch, $unwrap, $run, $mount, t_fmt, t_attr, t_class, t_style };\n\nexport type { ServerSlotRender };\n","import { type Cleanup } from \"../types/Cleanup\";\n\nexport default function $serverMount(_: () => Cleanup | void): void {}\n","import { type Cleanup } from \"../types/Cleanup\";\n\nexport default function $serverRun(_: () => Cleanup | void): void {}\n","export default function $serverUnwrap<T extends Record<PropertyKey, any>>(object: T): T {\n\treturn object;\n}\n","export default function $serverWatch<T extends Record<PropertyKey, any>>(object: T): T {\n\treturn object;\n}\n","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 formatAttributeText(value: any): string {\n\treturn (value ?? \"\").toString().replaceAll('\"', \"&quot;\");\n}\n","export default function formatText(value: any): string {\n\treturn value ?? \"\";\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEe,SAAR,aAA8B,GAA+B;AAAC;;;ACAtD,SAAR,WAA4B,GAA+B;AAAC;;;ACFpD,SAAR,cAAmE,QAAc;AACvF,SAAO;AACR;;;ACFe,SAAR,aAAkE,QAAc;AACtF,SAAO;AACR;;;ACFe,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,oBAAqC,OAAoB;AAC/D,UAAQ,SAAS,IAAI,SAAS,EAAE,WAAW,KAAK,QAAQ;AACzD;;;ACFe,SAAR,WAA4B,OAAoB;AACtD,SAAO,SAAS;AACjB;","names":[]}

package/dist/ssr.d.cts

@@ -1,5 +1,5 @@
-import { C as Cleanup } from './ServerSlotRender-t1sOutne.cjs';
-export { S as ServerSlotRender, g as t_class, f as t_fmt, a as t_style } from './ServerSlotRender-t1sOutne.cjs';
+import { C as Cleanup } from './ServerSlotRender-BMGG0yq3.cjs';
+export { S as ServerSlotRender, b as t_class, f as t_fmt, a as t_style } from './ServerSlotRender-BMGG0yq3.cjs';
 
 declare function $serverMount(_: () => Cleanup | void): void;
 

package/dist/ssr.d.ts

@@ -1,5 +1,5 @@
-import { C as Cleanup } from './ServerSlotRender-t1sOutne.js';
-export { S as ServerSlotRender, g as t_class, f as t_fmt, a as t_style } from './ServerSlotRender-t1sOutne.js';
+import { C as Cleanup } from './ServerSlotRender-BMGG0yq3.js';
+export { S as ServerSlotRender, b as t_class, f as t_fmt, a as t_style } from './ServerSlotRender-BMGG0yq3.js';
 
 declare function $serverMount(_: () => Cleanup | void): void;
 

package/dist/ssr.js

@@ -1,8 +1,8 @@
 import {
-  formatText,
-  getClasses,
-  getStyles
-} from "./chunk-T6JGCJ5T.js";
+  buildClasses,
+  buildStyles,
+  formatText
+} from "./chunk-XNO4YEJ3.js";
 
 // src/render/$serverMount.ts
 function $serverMount(_) {
@@ -32,8 +32,8 @@ export {
   $serverUnwrap as $unwrap,
   $serverWatch as $watch,
   formatAttributeText as t_attr,
-  getClasses as t_class,
+  buildClasses as t_class,
   formatText as t_fmt,
-  getStyles as t_style
+  buildStyles as t_style
 };
 //# sourceMappingURL=ssr.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@torpor/view",
-  "version": "0.1.10",
+  "version": "0.2.0",
   "description": "Torpor's view library, for writing and mounting components",
   "type": "module",
   "main": "dist/index.cjs",
@@ -30,19 +30,19 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.6.4",
     "@testing-library/user-event": "^14.6.1",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^24.0.4",
+    "@types/node": "^24.2.1",
     "fast-glob": "^3.3.3",
     "jsdom": "^26.1.0",
     "sucrase": "^3.35.0",
     "tinybench": "^4.0.1",
     "tsup": "^8.5.0",
     "tsx": "^4.20.3",
-    "typescript": "^5.8.3",
+    "typescript": "^5.9.2",
     "vitest": "^3.2.4"
   },
   "scripts": {

package/src/compile/build/client/buildComponentNode.ts

@@ -52,16 +52,23 @@ export default function buildComponentNode(
 				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) {
+				// NOTE: :class is obsolete, but let's keep it for a version or two
 				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) {
+				// NOTE: :style is obsolete, but let's keep it for a version or two
 				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);
@@ -71,11 +78,6 @@ export default function buildComponentNode(
 				} else if (partlyReactive) {
 					value = `\`${trimQuotes(value).replaceAll("{", "${")}\``;
 				}
-				if (name === "class") {
-					// TODO: How to handle dynamic classes etc
-					// Probably just compile down to a string?
-					value = `"${trimQuotes(value)} torp-${status.styleHash}"`;
-				}
 				const setProp = `${propsName}["${name}"] = ${value};`;
 				if (fullyReactive || partlyReactive) {
 					buildRun("setProp", setProp, status, b);

package/src/compile/build/client/buildElementNode.ts

@@ -134,8 +134,8 @@ function buildHeadNode(node: ElementNode, status: BuildStatus, b: Builder) {
 	// TODO: dedupe e.g. <meta name="x"> or on special key
 	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("}")) {
 			// It's a shortcut attribute
@@ -143,7 +143,7 @@ function buildHeadNode(node: ElementNode, status: BuildStatus, b: Builder) {
 			// in either case we set the value of the width property
 			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)) {
 			// It's a reactive attribute
 			if (isFullyReactive(value)) {
@@ -153,10 +153,10 @@ function buildHeadNode(node: ElementNode, status: BuildStatus, b: Builder) {
 			}
 
 			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(`
@@ -217,17 +217,14 @@ function buildElementAttributes(
 				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") {
+				// NOTE: :class is obsolete, but let's keep it for a version or two
 				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);

package/src/compile/build/server/buildServerAwaitNode.ts

@@ -19,7 +19,7 @@ export default function buildServerAwaitNode(
 	status.output += HYDRATION_START_COMMENT;
 
 	if (status.output) {
-		b.append(`$output += \`${status.output}\`;`);
+		b.append(`t_body += \`${status.output}\`;`);
 		status.output = "";
 	}
 
@@ -43,7 +43,7 @@ function buildServerAwaitBranch(node: ControlNode, status: BuildServerStatus, b:
 	}
 
 	if (status.output) {
-		b.append(`$output += \`${status.output}\`;`);
+		b.append(`t_body += \`${status.output}\`;`);
 		status.output = "";
 	}
 }

package/src/compile/build/server/buildServerCode.ts

@@ -1,6 +1,7 @@
 import { type BuildOptions } from "../../../types/BuildOptions";
 import { type Template } from "../../../types/Template";
 import Builder from "../../utils/Builder";
+import buildStyles from "../client/buildStyles";
 import { type BuildServerStatus } from "./BuildServerStatus";
 import buildServerNode from "./buildServerNode";
 
@@ -100,13 +101,21 @@ function buildServerTemplate(
 				// Add the interface
 				b.append("");
 				b.append("/* User interface */");
-				b.append(`let $output = "";`);
+				b.append(`let t_body = "";`);
+				if (current.style) {
+					// Replace multiple spaces with a single space
+					const styles = buildStyles(current.style, current.style.hash)
+						.replaceAll('"', '\\"')
+						.replaceAll(/\s+/g, " ");
+					b.append(`let t_head = "<style id='${current.style.hash}'>${styles}</style>";\n`);
+				} else {
+					b.append(`let t_head = "";`);
+				}
 
-				// Add the interface
 				buildServerNode(current.markup, status, b);
 
 				if (status.output) {
-					b.append(`$output += \`${status.output}\`;`);
+					b.append(`t_body += \`${status.output}\`;`);
 					status.output = "";
 				}
 			}
@@ -114,7 +123,7 @@ function buildServerTemplate(
 			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];

package/src/compile/build/server/buildServerComponentNode.ts

@@ -24,7 +24,7 @@ export default function buildServerComponentNode(
 	status.output += HYDRATION_START_COMMENT;
 
 	if (status.output) {
-		b.append(`$output += \`${status.output}\`;`);
+		b.append(`t_body += \`${status.output}\`;`);
 		status.output = "";
 	}
 
@@ -42,16 +42,23 @@ export default function buildServerComponentNode(
 				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) {
+				// NOTE: :class is obsolete, but let's keep it for a version or two
 				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) {
+				// NOTE: :style is obsolete, but let's keep it for a version or two
 				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);
@@ -61,11 +68,6 @@ export default function buildServerComponentNode(
 				} else if (partlyReactive) {
 					value = `\`${trimQuotes(value).replaceAll("{", "${")}\``;
 				}
-				if (name === "class") {
-					// TODO: How to handle dynamic classes etc
-					// Probably just compile down to a string?
-					b.append(`"${trimQuotes(value)} torp-${status.styleHash}"`);
-				}
 				b.append(`${propsName}["${name}"] = ${value};`);
 			} else {
 				b.append(`${propsName}["${name}"] = true;`);
@@ -101,18 +103,18 @@ export default function buildServerComponentNode(
 					"// @ts-ignore\n$context?: Record<PropertyKey, any>",
 				];
 				b.append(`${slotsName}["${slotName}"] = (\n${slotParams.join(",\n")}\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(`}`);
 			}
 		}
@@ -132,7 +134,10 @@ export default function buildServerComponentNode(
 		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;`);
 
 	// End the control statement
 	status.output += HYDRATION_END_COMMENT;

package/src/compile/build/server/buildServerControlNode.ts

@@ -71,7 +71,7 @@ export default function buildServerControlNode(
 		}
 		case "@const": {
 			if (status.output) {
-				b.append(`$output += \`${status.output}\`;`);
+				b.append(`t_body += \`${status.output}\`;`);
 				status.output = "";
 			}
 			buildServerScriptNode(node, b);
@@ -80,7 +80,7 @@ export default function buildServerControlNode(
 		case "@function":
 		case "@async function": {
 			if (status.output) {
-				b.append(`$output += \`${status.output}\`;`);
+				b.append(`t_body += \`${status.output}\`;`);
 				status.output = "";
 			}
 			b.append("");

package/src/compile/build/server/buildServerElementNode.ts

@@ -96,14 +96,17 @@ function buildElementAttributes(node: ElementNode, status: BuildServerStatus) {
 				let valueOrDefault = `${value} || ${defaultValue}`;
 				const propName = name.substring(1);
 				attributes.push(`${propName}="\${${valueOrDefault}}"`);
-			} else if (name === ":class") {
+			} else if (name === "class" || name === ":class") {
+				// NOTE: :class is obsolete, but let's keep it for a version or two
 				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") {
+				// NOTE: :style is obsolete, but let's keep it for a version or two
 				status.imports.add("t_style");
 				attributes.push(`style="\${t_style(${value})}"`);
 			} else {

package/src/compile/build/server/buildServerForNode.ts

@@ -20,7 +20,7 @@ export default function buildServerForNode(
 	status.output += HYDRATION_START_COMMENT;
 
 	if (status.output) {
-		b.append(`$output += \`${status.output}\`;`);
+		b.append(`t_body += \`${status.output}\`;`);
 		status.output = "";
 	}
 
@@ -49,7 +49,7 @@ function buildServerForBranch(node: ControlNode, status: BuildServerStatus, b: B
 	}
 
 	if (status.output) {
-		b.append(`$output += \`${status.output}\`;`);
+		b.append(`t_body += \`${status.output}\`;`);
 		status.output = "";
 	}
 

package/src/compile/build/server/buildServerIfNode.ts

@@ -20,7 +20,7 @@ export default function buildServerIfNode(
 	status.output += HYDRATION_START_COMMENT;
 
 	if (status.output) {
-		b.append(`$output += \`${status.output}\`;`);
+		b.append(`t_body += \`${status.output}\`;`);
 		status.output = "";
 	}
 
@@ -49,7 +49,7 @@ function buildServerIfBranch(node: ControlNode, status: BuildServerStatus, b: Bu
 	}
 
 	if (status.output) {
-		b.append(`$output += \`${status.output}\`;`);
+		b.append(`t_body += \`${status.output}\`;`);
 		status.output = "";
 	}
 

package/src/compile/build/server/buildServerReplaceNode.ts

@@ -19,7 +19,7 @@ export default function buildServerReplaceNode(
 	status.output += HYDRATION_START_COMMENT;
 
 	if (status.output) {
-		b.append(`$output += \`${status.output}\`;`);
+		b.append(`t_body += \`${status.output}\`;`);
 		status.output = "";
 	}
 
@@ -45,7 +45,7 @@ function buildServerReplaceBranch(node: ControlNode, status: BuildServerStatus,
 	}
 
 	if (status.output) {
-		b.append(`$output += \`${status.output}\`;`);
+		b.append(`t_body += \`${status.output}\`;`);
 		status.output = "";
 	}
 }

package/src/compile/build/server/buildServerSlotNode.ts

@@ -23,7 +23,7 @@ export default function buildServerSlotNode(
 	status.output += HYDRATION_START_COMMENT;
 
 	if (status.output) {
-		b.append(`$output += \`${status.output}\`;`);
+		b.append(`t_body += \`${status.output}\`;`);
 		status.output = "";
 	}
 
@@ -62,9 +62,13 @@ export default function buildServerSlotNode(
 	}
 
 	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 slotResult = nextVarName("comp", status);
+	////b.append(
+	////	`const ${slotResult} = $slots["${slotName}"](${slotHasProps ? propsName : "undefined"}, $context);`,
+	////);
+	////b.append(`t_body += ${slotResult}.body;`);
+	////b.append(`t_head += ${slotResult}.head;`);
 
 	// TODO: Not if there's only a single space node -- maybe check in parse
 	const fill = node.children.find((c) => isSpecialNode(c) && c.tagName === ":fill");
@@ -76,7 +80,7 @@ export default function buildServerSlotNode(
 		}
 
 		if (status.output) {
-			b.append(`$output += \`${status.output}\`;`);
+			b.append(`t_body += \`${status.output}\`;`);
 			status.output = "";
 		}
 	}

package/src/compile/build/server/buildServerSwitchNode.ts

@@ -20,7 +20,7 @@ export default function buildServerSwitchNode(
 	status.output += HYDRATION_START_COMMENT;
 
 	if (status.output) {
-		b.append(`$output += \`${status.output}\`;`);
+		b.append(`t_body += \`${status.output}\`;`);
 		status.output = "";
 	}
 
@@ -51,7 +51,7 @@ function buildServerSwitchBranch(node: ControlNode, status: BuildServerStatus, b
 	}
 
 	if (status.output) {
-		b.append(`$output += \`${status.output}\`;`);
+		b.append(`t_body += \`${status.output}\`;`);
 		status.output = "";
 	}
 

package/src/compile/parse/scopeStyles.ts

@@ -24,6 +24,7 @@ function scopeStylesOnNode(node: TemplateNode, selectors: string[]) {
 		if (!scopeStyles) {
 			for (let a of node.attributes) {
 				if (a.name === "class" || a.name === ":class") {
+					// NOTE: :class is obsolete, but let's keep it for a version or two
 					scopeStyles = true;
 				} else if (a.name === "id" && a.value) {
 					scopeStyles = selectors.includes(`#${trimQuotes(a.value)}`);

package/src/debug/printNode.ts

@@ -1,6 +1,6 @@
-export default function printNode(node: Node | null | undefined): string {
+export default function printNode(node: Node | null | undefined, colored = true): string {
 	if (!node) {
-		return `\x1b[41m[null]\x1b[0m`;
+		return colored ? "\x1b[41m[null]\x1b[0m" : "[null]";
 	}
 
 	let parent = node;
@@ -12,25 +12,25 @@ export default function printNode(node: Node | null | undefined): string {
 	}
 
 	let status = { p: "" };
-	printChildNode(parent!, node!, status);
+	printChildNode(parent!, node!, status, colored);
 
 	return status.p;
 }
 
-function printChildNode(node: Node, target: Node, status: { p: string }) {
+function printChildNode(node: Node, target: Node, status: { p: string }, colored: boolean) {
 	if (node.nodeType === 1) {
 		// Element
 		let el = node as Element;
 		let p = `<${el.tagName.toLowerCase()}>`;
 		if (node === target) {
-			p = `\x1b[44m${p}\x1b[0m`;
+			p = colored ? `\x1b[44m${p}\x1b[0m` : `~~{${p}}~~`;
 		}
 		status.p += p;
 	} else if (node.nodeType === 3) {
 		// Text
 		let p = "…";
 		if (node === target) {
-			p = `\x1b[44m${p}\x1b[0m`;
+			p = colored ? `\x1b[44m${p}\x1b[0m` : `~~{${p}}~~`;
 		}
 		status.p += p;
 	} else if (node.nodeType === 8) {
@@ -38,7 +38,7 @@ function printChildNode(node: Node, target: Node, status: { p: string }) {
 		let com = node as Comment;
 		let p = `<!${com.data}>`;
 		if (node === target) {
-			p = `\x1b[44m${p}\x1b[0m`;
+			p = colored ? `\x1b[44m${p}\x1b[0m` : `~~{${p}}~~`;
 		}
 		status.p += p;
 	} else if (node.nodeType === 9) {
@@ -49,7 +49,7 @@ function printChildNode(node: Node, target: Node, status: { p: string }) {
 	}
 
 	for (let child of node.childNodes) {
-		printChildNode(child, target, status);
+		printChildNode(child, target, status, colored);
 	}
 
 	if (node.nodeType === 1) {