@torpor/view 0.0.11 → 0.0.13

package/dist/ssr.cjs

@@ -60,9 +60,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) {

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) {}\n","import { type Cleanup } from \"../types/Cleanup\";\n\nexport default function $serverRun(_: () => Cleanup | 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): string {\n\tlet classes: string[] = [];\n\tgatherNames(\"\", value, classes);\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,GAAyB;AAAC;;;ACAhD,SAAR,WAA4B,GAAyB;AAAC;;;ACF9C,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,OAAwB;AAC1D,MAAI,UAAoB,CAAC;AACzB,cAAY,IAAI,OAAO,OAAO;AAC9B,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;;;ACpBe,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/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":[]}

package/dist/ssr.d.cts

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

package/dist/ssr.d.ts

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

package/dist/ssr.js

@@ -2,7 +2,7 @@ import {
   formatText,
   getClasses,
   getStyles
-} from "./chunk-GO2L324Q.js";
+} from "./chunk-T6JGCJ5T.js";
 
 // src/render/$serverMount.ts
 function $serverMount(_) {

package/dist/ssr.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/render/$serverMount.ts","../src/render/$serverRun.ts","../src/render/$serverUnwrap.ts","../src/render/$serverWatch.ts","../src/render/formatAttributeText.ts"],"sourcesContent":["import { type Cleanup } from \"../types/Cleanup\";\n\nexport default function $serverMount(_: () => Cleanup | void) {}\n","import { type Cleanup } from \"../types/Cleanup\";\n\nexport default function $serverRun(_: () => Cleanup | 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"],"mappings":";;;;;;;AAEe,SAAR,aAA8B,GAAyB;AAAC;;;ACAhD,SAAR,WAA4B,GAAyB;AAAC;;;ACF9C,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;","names":[]}
+{"version":3,"sources":["../src/render/$serverMount.ts","../src/render/$serverRun.ts","../src/render/$serverUnwrap.ts","../src/render/$serverWatch.ts","../src/render/formatAttributeText.ts"],"sourcesContent":["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"],"mappings":";;;;;;;AAEe,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;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@torpor/view",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "Torpor's view library, for writing and mounting components",
   "type": "module",
   "main": "dist/index.cjs",
@@ -35,20 +35,20 @@
     "@testing-library/user-event": "^14.6.1",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^22.14.1",
+    "@types/node": "^22.15.17",
     "fast-glob": "^3.3.3",
     "jsdom": "^26.1.0",
     "sucrase": "^3.35.0",
     "tinybench": "^4.0.1",
     "tsup": "^8.4.0",
-    "tsx": "^4.19.3",
+    "tsx": "^4.19.4",
     "typescript": "^5.8.3",
-    "vitest": "^3.1.1"
+    "vitest": "^3.1.3"
   },
   "scripts": {
-    "build": "tsup && tsx ./scripts/copyToRepl.ts",
+    "build": "tsc --noEmit && tsup && tsx ./scripts/copyToRepl.ts",
     "build:watch": "tsup --watch",
-    "check": "tsc -p tsconfig.json --noEmit",
+    "check": "tsc --noEmit",
     "test": "vitest",
     "test:build": "tsx ./scripts/buildTestOutput.ts",
     "bench": "tsx ./bench/bench.ts",

package/scripts/buildTestOutput.ts

@@ -1,9 +1,6 @@
 import fg from "fast-glob";
-import { existsSync, promises as fs } from "node:fs";
 import path from "node:path";
-import { buildType } from "../src/compile";
-import build from "../src/compile/build";
-import parse from "../src/compile/parse";
+import { buildFiles } from "../test/buildOutputFiles";
 
 async function run() {
 	console.log("Building test output files");
@@ -11,124 +8,8 @@ async function run() {
 		absolute: true,
 		cwd: path.resolve("./test"),
 	});
-	await Promise.all(files.sort().map((f) => buildOutputFiles(f)));
+	await Promise.all(files.sort().map((f) => buildFiles(f)));
 	console.log("Done\n");
 }
 
-async function buildOutputFiles(file: string) {
-	//console.log(`Building files for ${file.substring(path.resolve("./test").length)}`);
-
-	const source = await fs.readFile(file, "utf8");
-	const parsed = parse(source);
-	if (parsed.ok && parsed.template) {
-		let serverCode = formatCode(build(parsed.template, { server: true }).code, "server");
-		let clientCode = formatCode(build(parsed.template).code, "client");
-
-		let typesCode = buildType(parsed.template);
-		await fs.writeFile(file.replace(".torp", ".d.ts"), typesCode);
-
-		let outputFile = file.replace("/components/", "/components/output/");
-		if (!existsSync(path.dirname(outputFile))) {
-			await fs.mkdir(path.dirname(outputFile));
-		}
-		await fs.writeFile(outputFile.replace(".torp", "-server.ts"), serverCode);
-		await fs.writeFile(outputFile.replace(".torp", "-client.ts"), clientCode);
-	} else {
-		// Just log the message and continue with output/testing
-		console.log("Parse failed for " + file);
-	}
-}
-
 run();
-
-function formatCode(code: string, suffix: string): string {
-	// Replace imports from the built @torpor/view to the source code, so that
-	// a) we don't have to build @torpor/view before testing, and
-	// b) we have access to the same global context object in test and component code
-	for (let imp in importsMap) {
-		code = code.replace(imp, importsMap[imp]);
-	}
-
-	// Replace component imports with JS imports
-	code = code.replaceAll(/import (.+?) from ['"](.+?).torp['"]/g, `import $1 from "$2-${suffix}"`);
-
-	return code;
-}
-
-// HACK: We could probably be smarter about this
-const importsMap: Record<string, string> = {
-	'import { $watch } from "@torpor/view";': 'import $watch from "../../../../src/render/$watch";',
-	'import { $unwrap } from "@torpor/view";':
-		'import $unwrap from "../../../../src/render/$unwrap";',
-	'import { $run } from "@torpor/view";': 'import $run from "../../../../src/render/$run";',
-	'import { $mount } from "@torpor/view";': 'import $mount from "../../../../src/render/$mount";',
-	'import { t_flush } from "@torpor/view";':
-		'import t_flush from "../../../../src/render/flushMountEffects";',
-	'import { t_range } from "@torpor/view";':
-		'import t_range from "../../../../src/render/newRange";',
-	'import { t_push_range } from "@torpor/view";':
-		'import t_push_range from "../../../../src/render/pushRange";',
-	'import { t_pop_range } from "@torpor/view";':
-		'import t_pop_range from "../../../../src/render/popRange";',
-	'import { t_run_control } from "@torpor/view";':
-		'import t_run_control from "../../../../src/render/runControl";',
-	'import { t_run_branch } from "@torpor/view";':
-		'import t_run_branch from "../../../../src/render/runControlBranch";',
-	'import { t_list_item } from "@torpor/view";':
-		'import t_list_item from "../../../../src/render/newListItem";',
-	'import { t_run_list } from "@torpor/view";':
-		'import t_run_list from "../../../../src/render/runList";',
-	'import { t_add_fragment } from "@torpor/view";':
-		'import t_add_fragment from "../../../../src/render/addFragment";',
-	'import { t_apply_props } from "@torpor/view";':
-		'import t_apply_props from "../../../../src/render/applyProps";',
-	'import { t_attribute } from "@torpor/view";':
-		'import t_attribute from "../../../../src/render/setAttribute";',
-	'import { t_class } from "@torpor/view";':
-		'import t_class from "../../../../src/render/getClasses";',
-	'import { t_style } from "@torpor/view";':
-		'import t_style from "../../../../src/render/getStyles";',
-	'import { t_dynamic } from "@torpor/view";':
-		'import t_dynamic from "../../../../src/render/setDynamicElement";',
-	'import { t_fmt } from "@torpor/view";': 'import t_fmt from "../../../../src/render/formatText";',
-	'import { t_fragment } from "@torpor/view";':
-		'import t_fragment from "../../../../src/render/getFragment";',
-	'import { t_event } from "@torpor/view";':
-		'import t_event from "../../../../src/render/addEvent";',
-	'import { t_animate } from "@torpor/view";':
-		'import t_animate from "../../../../src/render/addAnimation";',
-	'import { t_root } from "@torpor/view";': 'import t_root from "../../../../src/render/nodeRoot";',
-	'import { t_anchor } from "@torpor/view";':
-		'import t_anchor from "../../../../src/render/nodeAnchor";',
-	'import { t_child } from "@torpor/view";':
-		'import t_child from "../../../../src/render/nodeChild";',
-	'import { t_next } from "@torpor/view";': 'import t_next from "../../../../src/render/nodeNext";',
-	'import { t_frg } from "@torpor/view";':
-		'import t_frg from "../../../../src/render/createFragment";',
-	'import { t_elm } from "@torpor/view";':
-		'import t_elm from "../../../../src/render/createElement";',
-	'import { t_txt } from "@torpor/view";': 'import t_txt from "../../../../src/render/createText";',
-	'import { t_cmt } from "@torpor/view";':
-		'import t_cmt from "../../../../src/render/createComment";',
-	'import { type ListItem } from "@torpor/view";':
-		'import { type ListItem } from "../../../../src/types/ListItem";',
-	'import { type SlotRender } from "@torpor/view";':
-		'import { type SlotRender } from "../../../../src/types/SlotRender";',
-	'import { $watch } from "@torpor/view/ssr";':
-		'import $watch from "../../../../src/render/$watch";',
-	'import { $unwrap } from "@torpor/view/ssr";':
-		'import $unwrap from "../../../../src/render/$unwrap";',
-	'import { $run } from "@torpor/view/ssr";': 'import $run from "../../../../src/render/$run";',
-	'import { $mount } from "@torpor/view/ssr";':
-		'import $mount from "../../../../src/render/$mount";',
-	'import { t_fmt } from "@torpor/view/ssr";':
-		'import t_fmt from "../../../../src/render/formatText";',
-	'import { t_attr } from "@torpor/view/ssr";':
-		'import t_attr from "../../../../src/render/formatAttributeText";',
-	'import { t_class } from "@torpor/view/ssr";':
-		'import t_class from "../../../../src/render/getClasses";',
-	'import { t_style } from "@torpor/view/ssr";':
-		'import t_style from "../../../../src/render/getStyles";',
-	'import { type ServerSlotRender } from "@torpor/view/ssr";':
-		'import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";',
-};

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

@@ -10,7 +10,7 @@ export default function buildAddFragment(
 	b: Builder,
 	parentName: string,
 	anchorName: string,
-) {
+): void {
 	if (node.fragment) {
 		const fragment = node.fragment;
 		const fragmentName = `t_fragment_${fragment.number}`;

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

@@ -8,7 +8,7 @@ import buildAddFragment from "./buildAddFragment";
 import buildFragment from "./buildFragment";
 import buildNode from "./buildNode";
 
-export default function buildAwaitNode(node: ControlNode, status: BuildStatus, b: Builder) {
+export default function buildAwaitNode(node: ControlNode, status: BuildStatus, b: Builder): void {
 	const awaitParentName = node.parentName!;
 	const awaitAnchorName = node.varName!;
 	const awaitRangeName = nextVarName("await_range", status);

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

@@ -17,7 +17,7 @@ export default function buildComponentNode(
 	status: BuildStatus,
 	b: Builder,
 	root = false,
-) {
+): void {
 	b.append("");
 	b.append("/* @component */");
 

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

@@ -9,7 +9,7 @@ import buildReplaceNode from "./buildReplaceNode";
 import buildScriptNode from "./buildScriptNode";
 import buildSwitchNode from "./buildSwitchNode";
 
-export default function buildControlNode(node: ControlNode, status: BuildStatus, b: Builder) {
+export default function buildControlNode(node: ControlNode, status: BuildStatus, b: Builder): void {
 	switch (node.operation) {
 		case "@if group": {
 			buildIfNode(node, status, b);

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

@@ -21,7 +21,7 @@ export default function buildElementNode(
 	b: Builder,
 	parentName: string,
 	root = false,
-) {
+): void {
 	if (status.inHead) {
 		if (node.tagName === "title") {
 			buildTitleNode(node, status, b);
@@ -202,9 +202,15 @@ function buildElementAttributes(
 			} 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");

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

@@ -13,7 +13,7 @@ const forLoopRegex = /for\s*\((.+?);.*?;.*?\)/;
 const forLoopVarsRegex = /(?:let\s+|var\s+){0,1}([^\s,;+=]+)(?:\s*=\s*[^,;]+){0,1}/g;
 const forOfRegex = /for\s*\(\s*(?:let\s*|var\s*){0,1}(.+?)\s+(?:of|in).*?\)/;
 
-export default function buildForNode(node: ControlNode, status: BuildStatus, b: Builder) {
+export default function buildForNode(node: ControlNode, status: BuildStatus, b: Builder): void {
 	const forParentName = node.parentName!;
 	const forAnchorName = node.varName!;
 

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

@@ -31,7 +31,7 @@ export default function buildFragment(
 	b: Builder,
 	parentName: string,
 	anchorName: string,
-) {
+): void {
 	if (node.fragment) {
 		const fragment = node.fragment;
 		const fragmentName = `t_fragment_${fragment.number}`;

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

@@ -6,6 +6,7 @@ import { type RootNode } from "../../types/nodes/RootNode";
 import { type TemplateNode } from "../../types/nodes/TemplateNode";
 import { type TextNode } from "../../types/nodes/TextNode";
 import Builder from "../../utils/Builder";
+import trimQuotes from "../../utils/trimQuotes";
 import isReactive from "../utils/isReactive";
 import { type BuildStatus } from "./BuildStatus";
 
@@ -16,7 +17,7 @@ export default function buildFragmentText(
 	node: RootNode | ControlNode,
 	status: BuildStatus,
 	b: Builder,
-) {
+): void {
 	const fragments: Fragment[] = [];
 	buildNodeFragmentText(node, status, fragments);
 
@@ -155,6 +156,11 @@ function buildElementFragmentText(
 				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}` : ""}`;
 			}

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

@@ -3,7 +3,7 @@ import Builder from "../../utils/Builder";
 import { type BuildStatus } from "./BuildStatus";
 import buildNode from "./buildNode";
 
-export default function buildHeadNode(node: ElementNode, status: BuildStatus, b: Builder) {
+export default function buildHeadNode(node: ElementNode, status: BuildStatus, b: Builder): void {
 	b.append("");
 	b.append("/* @head */");
 

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

@@ -4,7 +4,7 @@ import nextVarName from "../utils/nextVarName";
 import { type BuildStatus } from "./BuildStatus";
 import buildAddFragment from "./buildAddFragment";
 
-export default function buildHtmlNode(node: ControlNode, status: BuildStatus, b: Builder) {
+export default function buildHtmlNode(node: ControlNode, status: BuildStatus, b: Builder): void {
 	const htmlAnchorName = node.varName!;
 	const htmlParentName = node.parentName || htmlAnchorName + ".parentNode";
 	const htmlRangeName = nextVarName("html_range", status);

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

@@ -9,7 +9,7 @@ import buildNode from "./buildNode";
 
 // TODO: Are there too many branches for ifs etc?
 
-export default function buildIfNode(node: ControlNode, status: BuildStatus, b: Builder) {
+export default function buildIfNode(node: ControlNode, status: BuildStatus, b: Builder): void {
 	const ifAnchorName = node.varName!;
 	const ifParentName = node.parentName || ifAnchorName + ".parentNode";
 	const ifRangeName = nextVarName("if_range", status);

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

@@ -7,7 +7,7 @@ export default function buildMount(
 	functionBody: string,
 	status: BuildStatus,
 	b: Builder,
-) {
+): void {
 	functionBody = replaceForVarNames(functionBody, status);
 
 	status.imports.add("$mount");

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

@@ -19,7 +19,7 @@ export default function buildNode(
 	parentName: string,
 	anchorName: string,
 	root = false,
-) {
+): void {
 	// Nodes with anchors will have been handled when their containing fragment
 	// was built so we want to skip them here
 	if (node.handled) {

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

@@ -6,7 +6,7 @@ import buildAddFragment from "./buildAddFragment";
 import buildFragment from "./buildFragment";
 import buildNode from "./buildNode";
 
-export default function buildReplaceNode(node: ControlNode, status: BuildStatus, b: Builder) {
+export default function buildReplaceNode(node: ControlNode, status: BuildStatus, b: Builder): void {
 	const replaceAnchorName = node.varName!;
 	const replaceParentName = node.parentName || replaceAnchorName + ".parentNode";
 	const replaceRangeName = nextVarName("replace_range", status);

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

@@ -11,7 +11,7 @@ export default function buildRootNode(
 	b: Builder,
 	parentName: string,
 	anchorName: string,
-) {
+): void {
 	buildFragment(node, status, b, parentName, anchorName);
 
 	status.fragmentStack.push({

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

@@ -7,7 +7,7 @@ export default function buildRun(
 	functionBody: string,
 	status: BuildStatus,
 	b: Builder,
-) {
+): void {
 	functionBody = replaceForVarNames(functionBody, status);
 
 	status.imports.add("$run");

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

@@ -1,7 +1,7 @@
 import { type ControlNode } from "../../types/nodes/ControlNode";
 import Builder from "../../utils/Builder";
 
-export default function buildScriptNode(node: ControlNode, b: Builder) {
+export default function buildScriptNode(node: ControlNode, b: Builder): void {
 	b.append(`/* ${node.operation} */`);
 	b.append(`${maybeAppend(node.statement, ";")}`);
 }

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

@@ -11,7 +11,7 @@ import buildFragment from "./buildFragment";
 import buildNode from "./buildNode";
 import buildRun from "./buildRun";
 
-export default function buildSlotNode(node: ElementNode, status: BuildStatus, b: Builder) {
+export default function buildSlotNode(node: ElementNode, status: BuildStatus, b: Builder): void {
 	// If there's a slot, build that, otherwise build the default nodes
 	let slotName = node.attributes.find((a) => a.name === "name")?.value;
 	slotName = slotName ? trimQuotes(slotName) : "_";

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

@@ -7,7 +7,7 @@ import buildAddFragment from "./buildAddFragment";
 import buildFragment from "./buildFragment";
 import buildNode from "./buildNode";
 
-export default function buildSwitchNode(node: ControlNode, status: BuildStatus, b: Builder) {
+export default function buildSwitchNode(node: ControlNode, status: BuildStatus, b: Builder): void {
 	const switchParentName = node.parentName!;
 	const switchAnchorName = node.varName!;
 	const switchRangeName = nextVarName("switch_range", status);

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

@@ -3,7 +3,7 @@ import Builder from "../../utils/Builder";
 import { type BuildStatus } from "./BuildStatus";
 import buildRun from "./buildRun";
 
-export default function buildTextNode(node: TextNode, status: BuildStatus, b: Builder) {
+export default function buildTextNode(node: TextNode, status: BuildStatus, b: Builder): void {
 	let content = node.content || "";
 
 	if (!status.preserveWhitespace) {

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

@@ -3,7 +3,7 @@ import type { BuildStatus } from "./BuildStatus";
 /**
  * Variables used within a for loop need to be retrieved from the loop data.
  */
-export default function replaceForVarNames(value: string, status: BuildStatus) {
+export default function replaceForVarNames(value: string, status: BuildStatus): string {
 	// HACK: If a value from a for loop is used in the function body,
 	// get it from the loop data to trigger an update when it is changed
 	for (let varName of status.forVarNames) {

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

@@ -13,7 +13,7 @@ export default function buildServerAwaitNode(
 	node: ControlNode,
 	status: BuildServerStatus,
 	b: Builder,
-) {
+): void {
 	// Surround the entire control statement with bracketed comments, so that we
 	// can skip to the end to set the anchor node when hydrating
 	status.output += HYDRATION_START_COMMENT;

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

@@ -14,7 +14,7 @@ export default function buildServerComponentNode(
 	node: ElementNode,
 	status: BuildServerStatus,
 	b: Builder,
-) {
+): void {
 	if (status.output) {
 		b.append(`$output += \`${status.output}\`;`);
 		status.output = "";

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

@@ -13,7 +13,7 @@ export default function buildServerControlNode(
 	node: ControlNode,
 	status: BuildServerStatus,
 	b: Builder,
-) {
+): void {
 	switch (node.operation) {
 		case "@if group": {
 			buildServerIfNode(node, status, b);

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

@@ -11,7 +11,7 @@ export default function buildServerElementNode(
 	node: ElementNode,
 	status: BuildServerStatus,
 	b: Builder,
-) {
+): void {
 	let attributes = buildElementAttributes(node, status);
 	if (attributes.length) {
 		attributes = " " + attributes;
@@ -94,6 +94,9 @@ function buildElementAttributes(node: ElementNode, status: BuildServerStatus) {
 				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");
@@ -110,6 +113,11 @@ function buildElementAttributes(node: ElementNode, status: BuildServerStatus) {
 			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('"', """)}"`);
 		} else if (value != null) {
 			// Just set the attribute
 			// TODO: Probably check if it's a boolean attribute e.g. disabled

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

@@ -14,7 +14,7 @@ export default function buildServerForNode(
 	node: ControlNode,
 	status: BuildServerStatus,
 	b: Builder,
-) {
+): void {
 	// Surround the entire control statement with bracketed comments, so that we
 	// can skip to the end to set the anchor node when hydrating
 	status.output += HYDRATION_START_COMMENT;

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

@@ -7,7 +7,7 @@ import { type ControlNode } from "../../types/nodes/ControlNode";
 import isControlNode from "../../types/nodes/isControlNode";
 import { type BuildServerStatus } from "./BuildServerStatus";
 
-export default function buildServerHtmlNode(node: ControlNode, status: BuildServerStatus) {
+export default function buildServerHtmlNode(node: ControlNode, status: BuildServerStatus): void {
 	// Surround the entire control statement with bracketed comments, so that we
 	// can skip to the end to set the anchor node when hydrating
 	status.output += HYDRATION_START_COMMENT;

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

@@ -13,7 +13,7 @@ export default function buildServerIfNode(
 	node: ControlNode,
 	status: BuildServerStatus,
 	b: Builder,
-) {
+): void {
 	// Surround the entire control statement with bracketed comments, so that we
 	// can skip to the end to set the anchor node when hydrating
 	status.output += HYDRATION_START_COMMENT;

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

@@ -12,7 +12,11 @@ import buildServerRootNode from "./buildServerRootNode";
 import buildServerSpecialNode from "./buildServerSpecialNode";
 import buildServerTextNode from "./buildServerTextNode";
 
-export default function buildServerNode(node: TemplateNode, status: BuildServerStatus, b: Builder) {
+export default function buildServerNode(
+	node: TemplateNode,
+	status: BuildServerStatus,
+	b: Builder,
+): void {
 	switch (node.type) {
 		case "root": {
 			buildServerRootNode(node as RootNode, status, b);

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

@@ -13,7 +13,7 @@ export default function buildServerReplaceNode(
 	node: ControlNode,
 	status: BuildServerStatus,
 	b: Builder,
-) {
+): void {
 	// Surround the entire control statement with bracketed comments, so that we
 	// can skip to the end to set the anchor node when hydrating
 	status.output += HYDRATION_START_COMMENT;

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

@@ -3,6 +3,10 @@ import Builder from "../../utils/Builder";
 import { type BuildServerStatus } from "./BuildServerStatus";
 import buildServerNode from "./buildServerNode";
 
-export default function buildServerRootNode(node: RootNode, status: BuildServerStatus, b: Builder) {
+export default function buildServerRootNode(
+	node: RootNode,
+	status: BuildServerStatus,
+	b: Builder,
+): void {
 	buildServerNode(node.children[0], status, b);
 }