@torpor/view 0.4.13 → 0.4.14

package/package.json

@@ -1,27 +1,27 @@
 {
   "name": "@torpor/view",
-  "version": "0.4.13",
+  "version": "0.4.14",
   "description": "Torpor's view library, for writing and mounting components",
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
     },
     "./compile": {
-      "types": "./dist/compile.d.ts",
-      "import": "./dist/compile.js",
+      "types": "./dist/compile.d.mts",
+      "import": "./dist/compile.mjs",
       "require": "./dist/compile.cjs"
     },
     "./ssr": {
-      "types": "./dist/ssr.d.ts",
-      "import": "./dist/ssr.js",
+      "types": "./dist/ssr.d.mts",
+      "import": "./dist/ssr.mjs",
       "require": "./dist/ssr.cjs"
     },
     "./dev": {
-      "types": "./dist/dev.d.ts",
-      "import": "./dist/dev.js",
+      "types": "./dist/dev.d.mts",
+      "import": "./dist/dev.mjs",
       "require": "./dist/dev.cjs"
     }
   },
@@ -35,24 +35,24 @@
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/user-event": "^14.6.1",
-    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.0",
     "@types/jsdom": "^27.0.0",
-    "@types/node": "^24.10.0",
-    "@typescript/native-preview": "7.0.0-dev.20251103.1",
+    "@types/node": "^24.10.1",
+    "@typescript/native-preview": "7.0.0-dev.20251112.1",
     "fast-glob": "^3.3.3",
-    "jsdom": "^27.1.0",
-    "oxlint-tsgolint": "^0.4.0",
+    "jsdom": "^27.2.0",
+    "oxlint-tsgolint": "^0.6.0",
     "sucrase": "^3.35.0",
     "tinybench": "^5.1.0",
-    "tsdown": "^0.15.12",
+    "tsdown": "^0.16.4",
     "tsx": "^4.20.6",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.6"
+    "vitest": "^4.0.8"
   },
   "scripts": {
+    "check": "tsgo --noEmit && pnpm dlx oxlint --type-aware",
     "build": "tsgo --noEmit && tsdown && tsx ./scripts/copyToRepl.ts",
     "build:watch": "tsdown --watch",
-    "check": "tsgo --noEmit && pnpm dlx oxlint --type-aware",
     "test": "vitest",
     "test:build": "tsx ./scripts/buildTestOutput.ts",
     "bench": "tsx ./bench/bench.ts",

package/scripts/copyToRepl.ts

@@ -1,7 +1,7 @@
 import { promises as fs, readFileSync } from "node:fs";
 
 async function run() {
-	const indexFile = "./dist/index.js";
+	const indexFile = "./dist/index.mjs";
 	let source = await fs.readFile(indexFile, "utf8");
 	source = source
 		.replace(/^export \{(.+)\};/gms, (_, capture) => {
@@ -19,13 +19,13 @@ async function run() {
 			);
 		})
 		// HACK: Why are these imported?
-		.replaceAll(/^import \{.+} from ".\/(.+?).js";/gms, (_, capture) => {
-			const importedFile = `./dist/${capture}.js`;
+		.replaceAll(/^import \{.+} from ".\/(.+?).mjs";/gm, (_, capture) => {
+			const importedFile = `./dist/${capture}.mjs`;
 			let importedSource = readFileSync(importedFile, "utf8");
-			return importedSource.replace(/^export \{(.+)\};/gms, "");
+			return importedSource.replace(/^export \{(.+)\};/gm, "");
 		})
-		.replaceAll(/^import ".\/(.+?).js";/gms, "")
-		.replaceAll(/^\/\/.+?$/gms, "")
+		.replaceAll(/^import ".\/(.+?).mjs";/gm, "")
+		.replaceAll(/^\/\/.+?$/gm, "")
 		.replaceAll(/^\/\*.+?^\*\//gms, "")
 		.replaceAll(/\n+/g, "\n");
 

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

@@ -0,0 +1,31 @@
+import type SourceSpan from "../../types/SourceSpan";
+import Builder from "../../utils/Builder";
+import type BuildStatus from "./BuildStatus";
+
+export default function addMappedTextWithOffsets(
+	preText: string,
+	text: string,
+	postText: string,
+	spans: SourceSpan[],
+	offsets: number[],
+	lengths: number[],
+	status: BuildStatus,
+	b: Builder,
+): void {
+	if (status.options.mapped === true) {
+		let mappedStart = b.toString().length + preText.length;
+		let functionBody = preText + text + postText;
+		b.append(functionBody);
+		for (let i = 0; i < spans.length; i++) {
+			let start = mappedStart + offsets[i];
+			let end = start + lengths[i];
+			status.map.push({
+				script: functionBody,
+				source: spans[i],
+				compiled: { start, end },
+			});
+		}
+	} else {
+		b.append(preText + text + postText);
+	}
+}

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

@@ -3,6 +3,7 @@ import type ElementNode from "../../types/nodes/ElementNode";
 import type RootNode from "../../types/nodes/RootNode";
 import Builder from "../../utils/Builder";
 import type BuildStatus from "./BuildStatus";
+import addMappedTextWithOffsets from "./addMappedTextWithOffsets";
 
 export default function buildAddFragment(
 	node: RootNode | ControlNode | ElementNode,
@@ -16,21 +17,20 @@ export default function buildAddFragment(
 		const fragmentName = `t_fragment_${fragment.number}`;
 		status.imports.add("t_add_fragment");
 		if (fragment.effects.length > 0) {
-			// TODO: nicer mapping
 			status.imports.add("$run");
 			b.append("$run(() => {");
 			if (status.options.mapped === true) {
 				for (let effect of fragment.effects) {
-					for (let i = 0; i < effect.spans.length; i++) {
-						let start = b.toString().length + effect.offsets[i];
-						b.append(effect.functionBody);
-						let end = start + effect.lengths[i];
-						status.map.push({
-							script: effect.functionBody,
-							source: effect.spans[i],
-							compiled: { start, end },
-						});
-					}
+					addMappedTextWithOffsets(
+						"",
+						effect.functionBody,
+						"",
+						effect.spans,
+						effect.offsets,
+						effect.lengths,
+						status,
+						b,
+					);
 				}
 			} else {
 				b.append(fragment.effects.map((e) => e.functionBody).join("\n"));

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

@@ -6,10 +6,12 @@ import trimQuotes from "../../utils/trimQuotes";
 import nextVarName from "../utils/nextVarName";
 import type BuildStatus from "./BuildStatus";
 import addMappedText from "./addMappedText";
+import addMappedTextWithOffsets from "./addMappedTextWithOffsets";
 import buildAddFragment from "./buildAddFragment";
 import buildFragment from "./buildFragment";
 import buildNode from "./buildNode";
 import buildRun from "./buildRun";
+import getAttributeOffsets from "./getAttributeOffsets";
 import replaceForVarNames from "./replaceForVarNames";
 
 export default function buildComponentNode(
@@ -34,44 +36,123 @@ export default function buildComponentNode(
 		status.imports.add("$watch");
 
 		// Gather props, runs and binding runs, and set them all at once
-		let props: { name: string; value: string; span: SourceSpan }[] = [];
+		let props: {
+			name: string;
+			// Text to be ignored in the mapping e.g. `t_class(`
+			preText: string;
+			value: string;
+			// Text to be ignored in the mapping e.g. `)`
+			postText: string;
+			spans: SourceSpan[];
+			offsets: number[];
+			lengths: number[];
+		}[] = [];
 		let runs: string[] = [];
 		let bindingRuns: string[] = [];
 
 		for (let { name, value, reactive, fullyReactive, span } of node.attributes) {
 			if (name === "self" && node.tagName === "@component") {
 				// Ignore this special attribute
-			} else if (name.startsWith("&") && value != null && fullyReactive) {
-				// It's a bound property
-				// Add two $runs -- one to update the props, and one to update the value
-				// The component author will need to make sure $props.x is updated
-				// TODO: Maybe allow adding a Bindable<T> type to the $props interface??
-				// e.g. Component($props: { text: Bindable<string> })
-				name = name.substring(1);
-				props.push({ name, value, span });
-				runs.push(`${propsName}["${name}"] = ${value};`);
-				bindingRuns.push(`${value} = ${propsName}["${name}"];`);
-			} else if (name === "class" && value != null) {
-				status.imports.add("t_class");
-				const params = [value];
-				if (node.scopeStyles) {
-					params.push(`"torp-${status.styleHash}"`);
+			} else if (value != null && fullyReactive) {
+				if (name.startsWith("&")) {
+					// It's a bound property
+					// Add two $runs -- one to update the props, and one to update the value
+					// The component author will need to make sure $props.x is updated
+					// TODO: Maybe allow adding a Bindable<T> type to the $props interface??
+					// e.g. Component($props: { text: Bindable<string> })
+					name = name.substring(1);
+					props.push({
+						name,
+						preText: "",
+						value,
+						postText: "",
+						spans: [span],
+						offsets: [],
+						lengths: [],
+					});
+					runs.push(`${propsName}["${name}"] = ${value};`);
+					bindingRuns.push(`${value} = ${propsName}["${name}"];`);
+				} else if (name === "class") {
+					status.imports.add("t_class");
+					const params = [value];
+					if (node.scopeStyles) {
+						params.push(`"torp-${status.styleHash}"`);
+					}
+					value = params.join(", ");
+					props.push({
+						name,
+						preText: "t_class(",
+						value,
+						postText: ")",
+						spans: [span],
+						offsets: [],
+						lengths: [],
+					});
+					runs.push(`${propsName}["${name}"] = t_class(${value});`);
+				} else if (name === "style") {
+					status.imports.add("t_style");
+					props.push({
+						name,
+						preText: "t_style(",
+						value,
+						postText: ")",
+						spans: [span],
+						offsets: [],
+						lengths: [],
+					});
+					runs.push(`${propsName}["${name}"] = t_style(${value});`);
+				} else {
+					props.push({
+						name,
+						preText: "",
+						value,
+						postText: "",
+						spans: [span],
+						offsets: [],
+						lengths: [],
+					});
+					runs.push(`${propsName}["${name}"] = ${value};`);
 				}
-				value = `t_class(${params.join(", ")})`;
-				props.push({ name, value, span });
-				runs.push(`${propsName}["${name}"] = ${value};`);
-			} else if (name === "style" && value != null) {
-				status.imports.add("t_style");
-				value = `t_style(${value})`;
-				props.push({ name, value, span });
-				runs.push(`${propsName}["${name}"] = ${value};`);
-			} else if (value != null) {
-				props.push({ name, value, span });
-				if (reactive) {
+			} else if (value != null && reactive) {
+				const { newValue, spans, offsets, lengths } = getAttributeOffsets(value, span);
+				value = newValue;
+				if (name === "class") {
+					status.imports.add("t_class");
+					const params = [value];
+					if (node.scopeStyles) {
+						params.push(`"torp-${status.styleHash}"`);
+					}
+					value = params.join(", ");
+					props.push({ name, preText: "t_class(", value, postText: ")", spans, offsets, lengths });
+					runs.push(`${propsName}["${name}"] = t_class(${value});`);
+				} else if (name === "style") {
+					status.imports.add("t_style");
+					props.push({ name, preText: "t_style(", value, postText: ")", spans, offsets, lengths });
+					runs.push(`${propsName}["${name}"] = t_style(${value});`);
+				} else {
+					props.push({ name, preText: "", value, postText: "", spans, offsets, lengths });
 					runs.push(`${propsName}["${name}"] = ${value};`);
 				}
+			} else if (value != null) {
+				props.push({
+					name,
+					preText: "",
+					value,
+					postText: "",
+					spans: [span],
+					offsets: [],
+					lengths: [],
+				});
 			} else {
-				props.push({ name, value: "true", span });
+				props.push({
+					name,
+					preText: "",
+					value: "true",
+					postText: "",
+					spans: [span],
+					offsets: [],
+					lengths: [],
+				});
 			}
 		}
 
@@ -79,7 +160,20 @@ export default function buildComponentNode(
 		b.append(`const ${propsName} = $watch({`);
 		for (let p of props) {
 			let value = replaceForVarNames(p.value, status);
-			addMappedText(`${p.name}: `, value, ",", p.span, status, b);
+			if (p.spans.length === 1) {
+				addMappedText(`${p.name}: ` + p.preText, value, p.postText + ",", p.spans[0], status, b);
+			} else {
+				addMappedTextWithOffsets(
+					`${p.name}: ` + p.preText,
+					value,
+					p.postText + ",",
+					p.spans,
+					p.offsets,
+					p.lengths,
+					status,
+					b,
+				);
+			}
 		}
 		b.append("});");
 		// TODO: Map these things:

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

@@ -12,8 +12,10 @@ import buildFragment from "./buildFragment";
 import buildMount from "./buildMount";
 import buildNode from "./buildNode";
 import buildRun from "./buildRun";
+import getAttributeOffsets from "./getAttributeOffsets";
 import replaceForVarNames from "./replaceForVarNames";
 import stashRun from "./stashRun";
+import stashRunWithOffsets from "./stashRunWithOffsets";
 
 export default function buildElementNode(
 	node: ElementNode,
@@ -178,12 +180,12 @@ function buildElementAttributes(
 		}
 	}
 
-	for (let { name, value, reactive, span: range } of node.attributes) {
+	for (let { name, value, reactive, fullyReactive, span } of node.attributes) {
 		if (name === "self" && node.tagName === "@element") {
 			// Ignore this special attribute
 		} else if (name === "&ref") {
 			// Ignore this one, it should have been done already, above
-		} else if (value != null && reactive) {
+		} else if (value != null && fullyReactive) {
 			if (name === "&group") {
 				buildBindGroupAttribute(node, varName, value, status, b);
 			} else if (name === "&value" || name === "&checked") {
@@ -194,7 +196,7 @@ function buildElementAttributes(
 				// returning a cleanup function
 				buildMount("elMount", `return (${trimEnd(value.trim(), ";")})(${varName});`, status, b);
 			} else if (name.startsWith("on")) {
-				buildEventAttribute(varName, name, value, range, status, b);
+				buildEventAttribute(varName, name, value, span, status, b);
 			} else if (name.startsWith("transition")) {
 				buildTransitionAttribute(node, varName, name, value, status, b);
 			} else if (name === "class") {
@@ -210,29 +212,84 @@ function buildElementAttributes(
 					`${status.ns ? "// @ts-ignore\n" : ""}${varName}.${propName} = t_class(`,
 					params.join(", "),
 					");",
-					range,
+					span,
 					status,
 				);
 			} else if (name === "style") {
 				status.imports.add("t_style");
-				stashRun(
+				stashRun(fragment, `${varName}.setAttribute("style", t_style(`, value, "));", span, status);
+			} else if (name.includes("-")) {
+				// Handle data-, aria- etc
+				status.imports.add("t_attribute");
+				stashRun(fragment, `t_attribute(${varName}, "${name}", `, value, ");", span, status);
+				// NOTE: dataset seems to be a tiny bit slower?
+				//const propName = name.substring(name.indexOf("-"));
+				//buildRun("setDataAttribute", `${varName}.dataset.${propName} = ${value};`, status, b);
+			} else {
+				status.imports.add("t_attribute");
+				stashRun(fragment, `t_attribute(${varName}, "${name}", `, value, ");", span, status);
+			}
+		} else if (value != null && reactive) {
+			const { newValue, spans, offsets, lengths } = getAttributeOffsets(value, span);
+			value = newValue;
+			if (name === "class") {
+				status.imports.add("t_class");
+				const params = [value];
+				if (node.scopeStyles) {
+					params.push(`"torp-${status.styleHash}"`);
+				}
+				// SVGs have a different className
+				const propName = status.ns ? "className.baseVal" : "className";
+				stashRunWithOffsets(
+					fragment,
+					`${status.ns ? "// @ts-ignore\n" : ""}${varName}.${propName} = t_class(`,
+					params.join(", "),
+					");",
+					spans,
+					offsets,
+					lengths,
+					status,
+				);
+			} else if (name === "style") {
+				status.imports.add("t_style");
+				stashRunWithOffsets(
 					fragment,
 					`${varName}.setAttribute("style", t_style(`,
 					value,
 					"));",
-					range,
+					spans,
+					offsets,
+					lengths,
 					status,
 				);
 			} else if (name.includes("-")) {
 				// Handle data-, aria- etc
 				status.imports.add("t_attribute");
-				stashRun(fragment, `t_attribute(${varName}, "${name}", `, value, ");", range, status);
+				stashRunWithOffsets(
+					fragment,
+					`t_attribute(${varName}, "${name}", `,
+					value,
+					");",
+					spans,
+					offsets,
+					lengths,
+					status,
+				);
 				// NOTE: dataset seems to be a tiny bit slower?
 				//const propName = name.substring(name.indexOf("-"));
 				//buildRun("setDataAttribute", `${varName}.dataset.${propName} = ${value};`, status, b);
 			} else {
 				status.imports.add("t_attribute");
-				stashRun(fragment, `t_attribute(${varName}, "${name}", `, value, ");", range, status);
+				stashRunWithOffsets(
+					fragment,
+					`t_attribute(${varName}, "${name}", `,
+					value,
+					");",
+					spans,
+					offsets,
+					lengths,
+					status,
+				);
 			}
 		}
 	}

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

@@ -48,7 +48,7 @@ export default function buildIfNode(node: ControlNode, status: BuildStatus, b: B
 	b.append(`
 		const ${regionName} = t_region(${status.options.dev === true ? `"if"` : ""});
 		let ${indexName} = -1;
-		t_run_control(${regionName}, ${anchorName}, (t_before) => {`);
+		t_run_control(${regionName}, ${anchorName}, (${status.inHead ? "" : "t_before"}) => {`);
 
 	let index = 0;
 	for (let branch of branches) {

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

@@ -46,7 +46,7 @@ export default function buildSwitchNode(node: ControlNode, status: BuildStatus,
 	b.append(`
 		const ${regionName} = t_region(${status.options.dev === true ? `"switch"` : ""});
 		let ${indexName} = -1;
-		t_run_control(${regionName}, ${anchorName}, (t_before) => {`);
+		t_run_control(${regionName}, ${anchorName}, (${status.inHead ? "" : "t_before"}) => {`);
 
 	// TODO: replaceForVarNames is going to throw mapping out
 	addMappedText("", `${replaceForVarNames(node.statement, status)}`, " {", node.span, status, b);

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

@@ -16,8 +16,8 @@ export default function buildTextNode(node: TextNode, status: BuildStatus): void
 		content = content.replaceAll(/\s+/g, " ");
 	}
 
-	// TODO: Move all of this logic into parse, for text nodes and attribute values
-	// Or, we could do it based on the node's ranges...
+	// TODO: Should we be parsing out the spans here? Like we do with
+	// attributes? And should we merge this with the attributes logic?
 	let textContent = "";
 	let reactiveCount = 0;
 	let reactiveStart = 0;
@@ -90,10 +90,17 @@ export default function buildTextNode(node: TextNode, status: BuildStatus): void
 		}
 
 		status.imports.add("t_fmt");
-		let functionBody = `${node.varName}.textContent = `;
-		offsetChange += functionBody.length;
 		offsets.map((_, i) => (offsets[i] += offsetChange));
-		functionBody += `${textContent};`;
-		stashRunWithOffsets(fragment, functionBody, node.spans, offsets, lengths, status);
+
+		stashRunWithOffsets(
+			fragment,
+			`${node.varName}.textContent = `,
+			textContent,
+			";",
+			node.spans,
+			offsets,
+			lengths,
+			status,
+		);
 	}
 }

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

@@ -0,0 +1,90 @@
+import type SourceSpan from "../../types/SourceSpan";
+import endOfString from "../../utils/endOfString";
+import endOfTemplateString from "../../utils/endOfTemplateString";
+import trimQuotes from "../../utils/trimQuotes";
+
+export default function getAttributeOffsets(
+	value: string,
+	span: SourceSpan,
+): {
+	newValue: string;
+	spans: SourceSpan[];
+	offsets: number[];
+	lengths: number[];
+} {
+	// Build offsets for interpolated values e.g. attribute="value {x}
+	// and {y}" should have offsets for where the x and y are
+	// interpolated into the output
+	value = trimQuotes(value);
+	let spans: SourceSpan[] = [];
+	let offsets: number[] = [];
+	let lengths: number[] = [];
+
+	let textContent = "";
+	let reactiveStart = 0;
+	let level = 0;
+	for (let i = 0; i < value.length; i++) {
+		const char = value[i];
+		const nextChar = value[i + 1];
+		if (char === "{") {
+			level++;
+			//maxLevel = Math.max(level, maxLevel);
+			if (level === 1) {
+				//reactiveCount += 1;
+				textContent += "${";
+				reactiveStart = textContent.length;
+				// 2 is for the start quote plus the new `$`
+				spans.push({ start: span.start + i + 2, end: -1 });
+				offsets.push(reactiveStart + 1);
+				continue;
+			}
+		} else if (char === "}") {
+			level--;
+			if (level === 0) {
+				// 2 is for the start quote plus the new `$`
+				spans.at(-1)!.end = span.start + i + 2;
+				lengths.push(textContent.length - reactiveStart);
+				textContent += "}";
+				continue;
+			}
+		} else if (char === "`" && level === 0) {
+			// Escape backticks outside of braces, as they will be within a backtick string
+			textContent += "\\";
+		} else if (level > 0) {
+			if (char === "/" && nextChar === "/") {
+				// Skip one-line comments
+				let start = i;
+				i = value.indexOf("\n", i);
+				textContent += value.substring(start, i + 1);
+				continue;
+			} else if (char === "/" && nextChar === "*") {
+				// Skip block comments
+				let start = i;
+				i = value.indexOf("*/", i) + 1;
+				textContent += value.substring(start, i + 1);
+				continue;
+			} else if (char === '"' || char === "'") {
+				// Skip string contents
+				let start = i;
+				i = endOfString(char, value, i);
+				textContent += value.substring(start, i + 1);
+				continue;
+			} else if (char === "`") {
+				// Skip interpolated string contents
+				let start = i;
+				i = endOfTemplateString(value, i);
+				textContent += value.substring(start, i + 1);
+				continue;
+			}
+		}
+		textContent += value[i];
+	}
+	value = `\`${textContent}\``;
+
+	return {
+		newValue: value,
+		spans,
+		offsets,
+		lengths,
+	};
+}

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

@@ -5,13 +5,18 @@ import replaceForVarNames from "./replaceForVarNames";
 
 export default function stashRunWithOffsets(
 	fragment: Fragment,
-	functionBody: string,
+	functionStart: string,
+	value: string,
+	functionEnd: string,
 	spans: SourceSpan[],
 	offsets: number[],
 	lengths: number[],
 	status: BuildStatus,
 ): void {
+	let functionBody = functionStart + value + functionEnd;
+
 	for (let i = 0; i < offsets.length; i++) {
+		offsets[i] += functionStart.length;
 		const oldLength = functionBody.length;
 		functionBody =
 			functionBody.substring(0, offsets[i]) +
@@ -23,6 +28,7 @@ export default function stashRunWithOffsets(
 			offsets[j] += changedLength;
 		}
 	}
+
 	fragment.effects.push({
 		functionBody,
 		spans: spans,

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

@@ -105,7 +105,7 @@ function buildElementAttributes(node: ElementNode, status: BuildServerStatus) {
 			// TODO: Match braces, don't replace braces inside code
 			status.imports.add("t_attr");
 			attributes.push(
-				`${name}="${trimQuotes(value).replaceAll("${", "${t_attr(").replaceAll("}", ")}")}"`,
+				`${name}="${trimQuotes(value).replaceAll("{", "${t_attr(").replaceAll("}", ")}")}"`,
 			);
 		} else if (name === "class" && node.scopeStyles) {
 			value = value