@torpor/view 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@torpor/view",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Torpor's view library, for writing and mounting components",
   "type": "module",
   "main": "dist/index.cjs",
@@ -35,15 +35,15 @@
     "@testing-library/user-event": "^14.6.1",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^22.15.29",
+    "@types/node": "^24.0.3",
     "fast-glob": "^3.3.3",
     "jsdom": "^26.1.0",
     "sucrase": "^3.35.0",
     "tinybench": "^4.0.1",
     "tsup": "^8.5.0",
-    "tsx": "^4.19.4",
+    "tsx": "^4.20.3",
     "typescript": "^5.8.3",
-    "vitest": "^3.2.1"
+    "vitest": "^3.2.3"
   },
   "scripts": {
     "build": "tsc --noEmit && tsup && tsx ./scripts/copyToRepl.ts",

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

@@ -52,6 +52,17 @@ 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)) {
+				status.imports.add("t_class");
+				value = value.substring(1, value.length - 1);
+				if (node.scopeStyles) {
+					value += `, "torp-${status.styleHash}"`;
+				}
+				buildRun("setClasses", `${propsName}["class"] = t_class(${value});`, status, b);
+			} else if (name === ":style" && value != null && isFullyReactive(value)) {
+				status.imports.add("t_style");
+				value = value.substring(1, value.length - 1);
+				buildRun("setStyles", `${propsName}["style"] = t_style(${value});`, status, b);
 			} else if (value != null) {
 				let fullyReactive = isFullyReactive(value);
 				let partlyReactive = isReactive(value);

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

@@ -6,6 +6,7 @@ import { type BuildStatus } from "./BuildStatus";
 import buildAddFragment from "./buildAddFragment";
 import buildFragment from "./buildFragment";
 import buildNode from "./buildNode";
+import replaceForVarNames from "./replaceForVarNames";
 
 // TODO: Are there too many branches for ifs etc?
 
@@ -55,7 +56,7 @@ function buildIfBranch(
 ) {
 	status.imports.add("t_run_branch");
 
-	b.append(`${node.statement} {`);
+	b.append(`${replaceForVarNames(node.statement, status)} {`);
 	b.append(`t_run_branch(${rangeName}, ${index}, () => {`);
 
 	buildFragment(node, status, b, parentName, "t_before");

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

@@ -5,6 +5,7 @@ import { type BuildStatus } from "./BuildStatus";
 import buildAddFragment from "./buildAddFragment";
 import buildFragment from "./buildFragment";
 import buildNode from "./buildNode";
+import replaceForVarNames from "./replaceForVarNames";
 
 export default function buildReplaceNode(node: ControlNode, status: BuildStatus, b: Builder): void {
 	const replaceAnchorName = node.varName!;
@@ -38,7 +39,7 @@ function buildReplaceBranch(
 ) {
 	status.imports.add("t_run_branch");
 
-	b.append(`${node.statement};`);
+	b.append(`${replaceForVarNames(node.statement, status)};`);
 	b.append(`t_run_branch(${rangeName}, -1, () => {`);
 
 	buildFragment(node, status, b, parentName, "t_before");

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

@@ -6,6 +6,7 @@ import { type BuildStatus } from "./BuildStatus";
 import buildAddFragment from "./buildAddFragment";
 import buildFragment from "./buildFragment";
 import buildNode from "./buildNode";
+import replaceForVarNames from "./replaceForVarNames";
 
 export default function buildSwitchNode(node: ControlNode, status: BuildStatus, b: Builder): void {
 	const switchParentName = node.parentName!;
@@ -55,7 +56,7 @@ function buildSwitchBranch(
 ) {
 	status.imports.add("t_run_branch");
 
-	b.append(`${node.statement} {`);
+	b.append(`${replaceForVarNames(node.statement, status)} {`);
 	b.append(`t_run_branch(${rangeName}, ${index}, () => {`);
 
 	buildFragment(node, status, b, parentName, "t_before");

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

@@ -34,6 +34,17 @@ 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)) {
+				status.imports.add("t_class");
+				value = value.substring(1, value.length - 1);
+				if (node.scopeStyles) {
+					value += `, "torp-${status.styleHash}"`;
+				}
+				b.append(`${propsName}["class"] = t_class(${value});`);
+			} else if (name === ":style" && value != null && isFullyReactive(value)) {
+				status.imports.add("t_style");
+				value = value.substring(1, value.length - 1);
+				b.append(`${propsName}["style"] = t_style(${value});`);
 			} else if (value != null) {
 				let fullyReactive = isFullyReactive(value);
 				let partlyReactive = isReactive(value);

package/src/watch/transferEffects.ts

@@ -28,7 +28,7 @@ function moveChildEffects(
 			newData.propData.set(key, props);
 
 			let oldPropValue = oldValue[key];
-			let oldPropData = oldPropValue[proxyDataSymbol];
+			let oldPropData = oldPropValue != null ? oldPropValue[proxyDataSymbol] : undefined;
 
 			// If the old value was a proxy, make the new value one too
 			// TODO: Make sure we aren't accidentally creating proxies for

package/test/class/class.test.ts

@@ -94,4 +94,10 @@ function check(container: HTMLElement, state: State) {
 	expect(queryByText(container, "From state")).toHaveClass("hello red green torp-1ljxz83", {
 		exact: true,
 	});
+
+	// Components
+	expect(queryByText(container, "Child class")).not.toBeNull();
+	expect(queryByText(container, "Child class")).toHaveClass("child-class", {
+		exact: true,
+	});
 }

package/test/class/components/Class.torp

@@ -28,7 +28,9 @@ export default function Class() {
 			<div :class={[ "foo", 0, { bar: true }, "", [1 && "baz", ["qux"]] ]}>
 				Class nested
 			</div>
-		</div>		
+
+			<Child :class={{ "child-class": true }} />
+		</div>
 	}
 
 	@style {
@@ -37,3 +39,11 @@ export default function Class() {
 		}
 	}
 }
+
+function Child() {
+	@render {
+		<div class={$props.class}>
+			Child class
+		</div>
+	}
+}

package/test/class/components/output/Class-client.ts

@@ -2,6 +2,7 @@ import $run from "../../../../src/render/$run";
 import $watch from "../../../../src/render/$watch";
 import { type SlotRender } from "../../../../src/types/SlotRender";
 import t_add_fragment from "../../../../src/render/addFragment";
+import t_anchor from "../../../../src/render/nodeAnchor";
 import t_child from "../../../../src/render/nodeChild";
 import t_class from "../../../../src/render/getClasses";
 import t_fragment from "../../../../src/render/getFragment";
@@ -22,7 +23,7 @@ export default function Class(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div class="torp-1ljxz83"> <div id="divid" class="torp-1ljxz83"> From id </div> <div class="divclass torp-1ljxz83"> From string </div> <a class="torp-1ljxz83"> From state </a> <div class="torp-1ljxz83"> From state with scope </div> <div class="torp-1ljxz83"> Class object </div> <div class="torp-1ljxz83"> Class array </div> <div class="torp-1ljxz83"> Class nested </div> </div>`);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div class="torp-1ljxz83"> <div id="divid" class="torp-1ljxz83"> From id </div> <div class="divclass torp-1ljxz83"> From string </div> <a class="torp-1ljxz83"> From state </a> <div class="torp-1ljxz83"> From state with scope </div> <div class="torp-1ljxz83"> Class object </div> <div class="torp-1ljxz83"> Class array </div> <div class="torp-1ljxz83"> Class nested </div> <!> </div>`);
 	// @ts-ignore
 	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
 	const t_a_1 = t_next(t_child(t_div_1), 5) as HTMLElement;
@@ -30,6 +31,14 @@ export default function Class(
 	const t_div_3 = t_next(t_div_2, 2) as HTMLDivElement;
 	const t_div_4 = t_next(t_div_3, 2) as HTMLDivElement;
 	const t_div_5 = t_next(t_div_4, 2) as HTMLDivElement;
+	const t_comp_anchor_1 = t_anchor(t_next(t_div_5, 2)) as HTMLElement;
+
+	/* @component */
+	const t_props_1: any = $watch({});
+	$run(function setClasses() {
+		t_props_1["class"] = t_class({ "child-class": true });
+	});
+	Child(t_div_1, t_comp_anchor_1, t_props_1, $context);
 	$run(function setClasses() {
 		t_a_1.className = t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83");
 	});
@@ -49,3 +58,28 @@ export default function Class(
 	t_next(t_div_1);
 
 }
+
+function Child(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, SlotRender>
+) {
+	$props ??= $watch({});
+
+	/* User interface */
+	const t_fragments: DocumentFragment[] = [];
+
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> Child class </div>`);
+	// @ts-ignore
+	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
+	$run(function setClassName() {
+		t_div_1.className = $props.class;
+	});
+	t_add_fragment(t_fragment_0, $parent, $anchor);
+	t_next(t_div_1);
+
+}

package/test/class/components/output/Class-server.ts

@@ -1,4 +1,5 @@
 import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
+import t_attr from "../../../../src/render/formatAttributeText";
 import t_class from "../../../../src/render/getClasses";
 
 export default function Class(
@@ -12,7 +13,28 @@ export default function Class(
 
 	/* User interface */
 	let $output = "";
-	$output += `<div class="torp-1ljxz83"> <div id="divid" class="torp-1ljxz83"> From id </div> <div class="divclass torp-1ljxz83"> From string </div> <a class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83")}"> From state </a> <div class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83")}"> From state with scope </div> <div class="${t_class({ foo: true, bar: false, baz: 5, qux: null }, "torp-1ljxz83")}"> Class object </div> <div class="${t_class([ "foo", false, true && "baz", undefined ], "torp-1ljxz83")}"> Class array </div> <div class="${t_class([ "foo", 0, { bar: true }, "", [1 && "baz", ["qux"]] ], "torp-1ljxz83")}"> Class nested </div> </div>`;
+	$output += `<div class="torp-1ljxz83"> <div id="divid" class="torp-1ljxz83"> From id </div> <div class="divclass torp-1ljxz83"> From string </div> <a class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83")}"> From state </a> <div class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83")}"> From state with scope </div> <div class="${t_class({ foo: true, bar: false, baz: 5, qux: null }, "torp-1ljxz83")}"> Class object </div> <div class="${t_class([ "foo", false, true && "baz", undefined ], "torp-1ljxz83")}"> Class array </div> <div class="${t_class([ "foo", 0, { bar: true }, "", [1 && "baz", ["qux"]] ], "torp-1ljxz83")}"> Class nested </div> `;
+	const t_props_1: any = {};
+	t_props_1["class"] = t_class({ "child-class": true });
+
+	$output += Child(t_props_1, $context)
+	$output += ` </div>`;
+
+	return $output;
+}
+
+function Child(
+	$props: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, ServerSlotRender>
+) {
+	$props ??= {};
+
+	/* User interface */
+	let $output = "";
+	$output += `<div ${$props.class ? `class="${t_attr($props.class)}"` : ''}> Child class </div>`;
 
 	return $output;
 }

package/test/class/components/temp/{Class-client-dc885e1e391f38973bd9ea25b7475b07f7c23960.ts → Class-client-12f09850a5f8c27de6cf94c23a2b17aadbf66f01.ts}

@@ -2,6 +2,7 @@ import $run from "../../../../src/render/$run";
 import $watch from "../../../../src/render/$watch";
 import { type SlotRender } from "../../../../src/types/SlotRender";
 import t_add_fragment from "../../../../src/render/addFragment";
+import t_anchor from "../../../../src/render/nodeAnchor";
 import t_child from "../../../../src/render/nodeChild";
 import t_class from "../../../../src/render/getClasses";
 import t_fragment from "../../../../src/render/getFragment";
@@ -22,7 +23,7 @@ export default function Class(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div class="torp-1ljxz83"> <div id="divid" class="torp-1ljxz83"> From id </div> <div class="divclass torp-1ljxz83"> From string </div> <a class="torp-1ljxz83"> From state </a> <div class="torp-1ljxz83"> From state with scope </div> <div class="torp-1ljxz83"> Class object </div> <div class="torp-1ljxz83"> Class array </div> <div class="torp-1ljxz83"> Class nested </div> </div>`);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div class="torp-1ljxz83"> <div id="divid" class="torp-1ljxz83"> From id </div> <div class="divclass torp-1ljxz83"> From string </div> <a class="torp-1ljxz83"> From state </a> <div class="torp-1ljxz83"> From state with scope </div> <div class="torp-1ljxz83"> Class object </div> <div class="torp-1ljxz83"> Class array </div> <div class="torp-1ljxz83"> Class nested </div> <!> </div>`);
 	// @ts-ignore
 	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
 	const t_a_1 = t_next(t_child(t_div_1), 5) as HTMLElement;
@@ -30,6 +31,14 @@ export default function Class(
 	const t_div_3 = t_next(t_div_2, 2) as HTMLDivElement;
 	const t_div_4 = t_next(t_div_3, 2) as HTMLDivElement;
 	const t_div_5 = t_next(t_div_4, 2) as HTMLDivElement;
+	const t_comp_anchor_1 = t_anchor(t_next(t_div_5, 2)) as HTMLElement;
+
+	/* @component */
+	const t_props_1: any = $watch({});
+	$run(function setClasses() {
+		t_props_1["class"] = t_class({ "child-class": true });
+	});
+	Child(t_div_1, t_comp_anchor_1, t_props_1, $context);
 	$run(function setClasses() {
 		t_a_1.className = t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83");
 	});
@@ -49,3 +58,28 @@ export default function Class(
 	t_next(t_div_1);
 
 }
+
+function Child(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, SlotRender>
+) {
+	$props ??= $watch({});
+
+	/* User interface */
+	const t_fragments: DocumentFragment[] = [];
+
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> Child class </div>`);
+	// @ts-ignore
+	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
+	$run(function setClassName() {
+		t_div_1.className = $props.class;
+	});
+	t_add_fragment(t_fragment_0, $parent, $anchor);
+	t_next(t_div_1);
+
+}

package/test/class/components/temp/{Class-server-d1a2463ba432e10c6f68bd59d1d31949c5a2044f.ts → Class-server-853a463d2ad1a1e3da4da5ad59ad1c75461d2431.ts}

@@ -1,4 +1,5 @@
 import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
+import t_attr from "../../../../src/render/formatAttributeText";
 import t_class from "../../../../src/render/getClasses";
 
 export default function Class(
@@ -12,7 +13,28 @@ export default function Class(
 
 	/* User interface */
 	let $output = "";
-	$output += `<div class="torp-1ljxz83"> <div id="divid" class="torp-1ljxz83"> From id </div> <div class="divclass torp-1ljxz83"> From string </div> <a class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83")}"> From state </a> <div class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83")}"> From state with scope </div> <div class="${t_class({ foo: true, bar: false, baz: 5, qux: null }, "torp-1ljxz83")}"> Class object </div> <div class="${t_class([ "foo", false, true && "baz", undefined ], "torp-1ljxz83")}"> Class array </div> <div class="${t_class([ "foo", 0, { bar: true }, "", [1 && "baz", ["qux"]] ], "torp-1ljxz83")}"> Class nested </div> </div>`;
+	$output += `<div class="torp-1ljxz83"> <div id="divid" class="torp-1ljxz83"> From id </div> <div class="divclass torp-1ljxz83"> From string </div> <a class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83")}"> From state </a> <div class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83")}"> From state with scope </div> <div class="${t_class({ foo: true, bar: false, baz: 5, qux: null }, "torp-1ljxz83")}"> Class object </div> <div class="${t_class([ "foo", false, true && "baz", undefined ], "torp-1ljxz83")}"> Class array </div> <div class="${t_class([ "foo", 0, { bar: true }, "", [1 && "baz", ["qux"]] ], "torp-1ljxz83")}"> Class nested </div> `;
+	const t_props_1: any = {};
+	t_props_1["class"] = t_class({ "child-class": true });
+
+	$output += Child(t_props_1, $context)
+	$output += ` </div>`;
+
+	return $output;
+}
+
+function Child(
+	$props: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, ServerSlotRender>
+) {
+	$props ??= {};
+
+	/* User interface */
+	let $output = "";
+	$output += `<div ${$props.class ? `class="${t_attr($props.class)}"` : ''}> Child class </div>`;
 
 	return $output;
 }