@torpor/view 0.0.7 → 0.0.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @torpor/view
 
+## 0.0.8
+
+### Patch Changes
+
+- a8ead36: Fix: always pass $context down
+
 ## 0.0.7
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@torpor/view",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "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.13.4",
+    "@types/node": "^22.14.0",
     "fast-glob": "^3.3.3",
     "jsdom": "^26.0.0",
     "sucrase": "^3.35.0",
-    "tinybench": "^3.1.1",
-    "tsup": "^8.3.6",
-    "tsx": "^4.19.2",
-    "typescript": "^5.7.3",
-    "vitest": "^3.0.5"
+    "tinybench": "^4.0.1",
+    "tsup": "^8.4.0",
+    "tsx": "^4.19.3",
+    "typescript": "^5.8.3",
+    "vitest": "^3.1.1"
   },
   "scripts": {
     "build": "tsup && tsx ./scripts/copyToRepl.ts",

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

@@ -53,12 +53,7 @@ export default function buildSlotNode(node: ElementNode, status: BuildStatus, b:
 	const slotAnchorName = node.varName!;
 
 	b.append(`if ($slots && $slots["${slotName}"]) {`);
-	let params = [
-		slotParentName,
-		slotAnchorName,
-		slotHasProps ? propsName : "undefined",
-		status.contextProps.length ? "$context" : "undefined",
-	];
+	let params = [slotParentName, slotAnchorName, slotHasProps ? propsName : "undefined", "$context"];
 	b.append(`$slots["${slotName}"](${params.join(", ")})`);
 
 	// TODO: Maybe not if there's only a single space node?

package/test/bind/bind.test.ts

@@ -33,15 +33,25 @@ async function check(container: HTMLElement) {
 	const user = userEvent.setup();
 
 	const input = container.getElementsByTagName("input")[0];
+	const select = container.getElementsByTagName("select")[0];
 	const para = container.getElementsByTagName("p")[0];
+	const para2 = container.getElementsByTagName("p")[1];
 
 	expect(input).toHaveValue("Alice");
 	expect(para).toHaveTextContent("Hello, Alice");
 
+	expect(select).toHaveValue("1");
+	//expect(select.childNodes[1]).toHaveAttribute("selected", true);
+	expect(para2).toHaveTextContent("You have selected, 1");
+
 	// Update the input value
 	await user.clear(input);
 	await user.type(input, "Bob");
+	await user.selectOptions(select, "2");
 
 	expect(input).toHaveValue("Bob");
 	expect(para).toHaveTextContent("Hello, Bob");
+
+	expect(select).toHaveValue("2");
+	expect(para2).toHaveTextContent("You have selected, 2");
 }

package/test/bind/components/BindText.torp

@@ -1,10 +1,16 @@
 export default function BindText() {
-	let $state = $watch({ name: "Alice" });
+	let $state = $watch({ name: "Alice", selected: 1 });
 
 	@render {
 		<div>
-				<input :value={$state.name} />
-				<p>Hello, {$state.name}</p>
+			<input :value={$state.name} />
+			<select :value={$state.selected}>
+				<option value=0>First</option>
+				<option value=1>Second</option>
+				<option value=2>Third</option>
+			</select>
+			<p>Hello, {$state.name}</p>
+			<p>You have selected, {$state.selected}</p>
 		</div>
 	}
 }

package/test/bind/components/output/BindText-client.ts

@@ -20,23 +20,32 @@ export default function BindText(
 	$slots?: Record<string, SlotRender>
 ) {
 
-	let $state = $watch({ name: "Alice" });
+	let $state = $watch({ name: "Alice", selected: 1 });
 
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> <input></input> <p>#</p> </div>`);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> <input></input> <select> <option value=0>First</option> <option value=1>Second</option> <option value=2>Third</option> </select> <p>#</p> <p>#</p> </div>`);
 	// @ts-ignore
 	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
 	const t_input_1 = t_next(t_child(t_div_1)) as HTMLInputElement;
-	const t_text_1 = t_child(t_next(t_next(t_input_1)));
+	const t_select_1 = t_next(t_next(t_input_1)) as HTMLElement;
+	const t_text_1 = t_child(t_next(t_next(t_select_1)));
+	const t_text_2 = t_child(t_next(t_next(t_next(t_next(t_select_1)))));
 	$run(function setBinding() {
 		t_input_1.value = $state.name || "";
 	});
 	t_event(t_input_1, "input", (e) => $state.name = e.target.value);
+	$run(function setBinding() {
+		t_select_1.value = $state.selected || "";
+	});
+	t_event(t_select_1, "change", (e) => $state.selected = e.target.value);
 	$run(function setTextContent() {
 		t_text_1.textContent = `Hello, ${t_fmt($state.name)}`;
 	});
+	$run(function setTextContent() {
+		t_text_2.textContent = `You have selected, ${t_fmt($state.selected)}`;
+	});
 	t_add_fragment(t_fragment_0, $parent, $anchor);
 	t_next(t_div_1);
 

package/test/bind/components/output/BindText-server.ts

@@ -11,11 +11,11 @@ export default function BindText(
 	// @ts-ignore
 	$slots?: Record<string, ServerSlotRender>
 ) {
-	let $state = $watch({ name: "Alice" });
+	let $state = $watch({ name: "Alice", selected: 1 });
 
 	/* User interface */
 	let $output = "";
-	$output += `<div> <input value="${t_attr($state.name) || ""}"> <p>Hello, ${t_fmt($state.name)}</p> </div>`;
+	$output += `<div> <input value="${t_attr($state.name) || ""}"> <select value="${t_attr($state.selected) || ""}"> <option value="0">First</option> <option value="1">Second</option> <option value="2">Third</option> </select> <p>Hello, ${t_fmt($state.name)}</p> <p>You have selected, ${t_fmt($state.selected)}</p> </div>`;
 
 	return $output;
 }

package/test/bind/components/temp/{BindText-client-d8b5da0867d612966fa091da7aa20baa77190d64.ts → BindText-client-9e2f542e13bcbf9a44eab2c5a79d67ddb128f928.ts}

@@ -20,23 +20,32 @@ export default function BindText(
 	$slots?: Record<string, SlotRender>
 ) {
 
-	let $state = $watch({ name: "Alice" });
+	let $state = $watch({ name: "Alice", selected: 1 });
 
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> <input></input> <p>#</p> </div>`);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> <input></input> <select> <option value=0>First</option> <option value=1>Second</option> <option value=2>Third</option> </select> <p>#</p> <p>#</p> </div>`);
 	// @ts-ignore
 	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
 	const t_input_1 = t_next(t_child(t_div_1)) as HTMLInputElement;
-	const t_text_1 = t_child(t_next(t_next(t_input_1)));
+	const t_select_1 = t_next(t_next(t_input_1)) as HTMLElement;
+	const t_text_1 = t_child(t_next(t_next(t_select_1)));
+	const t_text_2 = t_child(t_next(t_next(t_next(t_next(t_select_1)))));
 	$run(function setBinding() {
 		t_input_1.value = $state.name || "";
 	});
 	t_event(t_input_1, "input", (e) => $state.name = e.target.value);
+	$run(function setBinding() {
+		t_select_1.value = $state.selected || "";
+	});
+	t_event(t_select_1, "change", (e) => $state.selected = e.target.value);
 	$run(function setTextContent() {
 		t_text_1.textContent = `Hello, ${t_fmt($state.name)}`;
 	});
+	$run(function setTextContent() {
+		t_text_2.textContent = `You have selected, ${t_fmt($state.selected)}`;
+	});
 	t_add_fragment(t_fragment_0, $parent, $anchor);
 	t_next(t_div_1);
 

package/test/bind/components/temp/{BindText-server-20ad98151d8e9dd7d347968051c4602d6b35124c.ts → BindText-server-4b94cdf60d9c9a2088306c4407e2ae30785169b0.ts}

@@ -11,11 +11,11 @@ export default function BindText(
 	// @ts-ignore
 	$slots?: Record<string, ServerSlotRender>
 ) {
-	let $state = $watch({ name: "Alice" });
+	let $state = $watch({ name: "Alice", selected: 1 });
 
 	/* User interface */
 	let $output = "";
-	$output += `<div> <input value="${t_attr($state.name) || ""}"> <p>Hello, ${t_fmt($state.name)}</p> </div>`;
+	$output += `<div> <input value="${t_attr($state.name) || ""}"> <select value="${t_attr($state.selected) || ""}"> <option value="0">First</option> <option value="1">Second</option> <option value="2">Third</option> </select> <p>Hello, ${t_fmt($state.name)}</p> <p>You have selected, ${t_fmt($state.selected)}</p> </div>`;
 
 	return $output;
 }

package/test/party/components/output/FunnyButton-client.ts

@@ -24,7 +24,7 @@ export default function FunnyButton(
 	const t_button_1 = t_root(t_fragment_0) as HTMLElement;
 	const t_slot_anchor_1 = t_anchor(t_next(t_child(t_button_1))) as HTMLElement;
 	if ($slots && $slots["_"]) {
-		$slots["_"](t_button_1, t_slot_anchor_1, undefined, undefined)
+		$slots["_"](t_button_1, t_slot_anchor_1, undefined, $context)
 	} else {
 		const t_fragment_1 = t_fragment($parent.ownerDocument!, t_fragments, 1, ` <span>No content found</span> `);
 		// @ts-ignore

package/test/slots/components/output/Article-client.ts

@@ -25,15 +25,15 @@ export default function Article(
 	const t_slot_parent_1 = t_next(t_child(t_section_1)) as HTMLElement;
 	const t_slot_anchor_1 = t_anchor(t_next(t_child(t_slot_parent_1))) as HTMLElement;
 	if ($slots && $slots["header"]) {
-		$slots["header"](t_slot_parent_1, t_slot_anchor_1, undefined, undefined)
+		$slots["header"](t_slot_parent_1, t_slot_anchor_1, undefined, $context)
 	}
 	const t_slot_anchor_2 = t_anchor(t_next(t_next(t_slot_parent_1))) as HTMLElement;
 	if ($slots && $slots["_"]) {
-		$slots["_"](t_section_1, t_slot_anchor_2, undefined, undefined)
+		$slots["_"](t_section_1, t_slot_anchor_2, undefined, $context)
 	}
 	const t_slot_anchor_3 = t_anchor(t_next(t_next(t_slot_anchor_2))) as HTMLElement;
 	if ($slots && $slots["footer"]) {
-		$slots["footer"](t_section_1, t_slot_anchor_3, undefined, undefined)
+		$slots["footer"](t_section_1, t_slot_anchor_3, undefined, $context)
 	}
 	t_add_fragment(t_fragment_0, $parent, $anchor);
 	t_next(t_section_1);

package/test/slots/components/output/Header-client.ts

@@ -24,7 +24,7 @@ export default function Header(
 	const t_h2_1 = t_root(t_fragment_0) as HTMLElement;
 	const t_slot_anchor_1 = t_anchor(t_next(t_child(t_h2_1))) as HTMLElement;
 	if ($slots && $slots["_"]) {
-		$slots["_"](t_h2_1, t_slot_anchor_1, undefined, undefined)
+		$slots["_"](t_h2_1, t_slot_anchor_1, undefined, $context)
 	} else {
 		const t_fragment_1 = t_fragment($parent.ownerDocument!, t_fragments, 1, ` Default header... `);
 		// @ts-ignore

package/test/slots/components/output/List-client.ts

@@ -60,7 +60,7 @@ export default function List(
 				t_sprops_1["item"] = t_item.data.item;
 			});
 			if ($slots && $slots["_"]) {
-				$slots["_"](t_slot_parent_1, t_slot_anchor_1, t_sprops_1, undefined)
+				$slots["_"](t_slot_parent_1, t_slot_anchor_1, t_sprops_1, $context)
 			}
 			// @ts-ignore
 			const t_text_1 = t_next(t_slot_parent_1);

package/test/special-component/components/output/BigTitle-client.ts

@@ -24,7 +24,7 @@ export default function BigTitle(
 	const t_h2_1 = t_root(t_fragment_0) as HTMLElement;
 	const t_slot_anchor_1 = t_anchor(t_next(t_child(t_h2_1))) as HTMLElement;
 	if ($slots && $slots["_"]) {
-		$slots["_"](t_h2_1, t_slot_anchor_1, undefined, undefined)
+		$slots["_"](t_h2_1, t_slot_anchor_1, undefined, $context)
 	}
 	t_add_fragment(t_fragment_0, $parent, $anchor);
 	t_next(t_h2_1);

package/test/special-component/components/output/SmallTitle-client.ts

@@ -24,7 +24,7 @@ export default function SmallTitle(
 	const t_h6_1 = t_root(t_fragment_0) as HTMLElement;
 	const t_slot_anchor_1 = t_anchor(t_next(t_child(t_h6_1))) as HTMLElement;
 	if ($slots && $slots["_"]) {
-		$slots["_"](t_h6_1, t_slot_anchor_1, undefined, undefined)
+		$slots["_"](t_h6_1, t_slot_anchor_1, undefined, $context)
 	}
 	t_add_fragment(t_fragment_0, $parent, $anchor);
 	t_next(t_h6_1);