@torpor/view 0.0.4 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@torpor/view",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Torpor's view library, for writing and mounting components",
   "type": "module",
   "main": "dist/index.cjs",

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

@@ -8,7 +8,7 @@ export default function replaceForVarNames(value: string, status: BuildStatus) {
 	// get it from the loop data to trigger an update when it is changed
 	for (let varName of status.forVarNames) {
 		value = value.replaceAll(
-			new RegExp(`([\\s\\(\\[\\{])${varName}([\\s\\.\\(\\)\\[\\]\\};])`, "g"),
+			new RegExp(`(^|\\s|\\(|\\[|\\{)${varName}($|\\s|\\.|\\(|\\)|\\[|\\]|\\}|;)`, "g"),
 			`$1t_item.data.${varName}$2`,
 		);
 	}

package/src/render/nodeChild.ts

@@ -4,8 +4,13 @@ import context from "./context";
  * Gets the first child of a node
  */
 export default function nodeChild(parent: Node): Node {
-	const child = parent.firstChild;
+	let child = parent.firstChild;
 	if (context.hydrationNode) {
+		// The child may be null when hydrating the sole text child of an
+		// element with no text
+		if (!child) {
+			child = parent.appendChild(parent.ownerDocument!.createTextNode(""));
+		}
 		context.hydrationNode = child;
 	}
 	// NOTE: We know this is not null as it is being called from generated code

package/test/for/components/ForEscape.torp

@@ -7,6 +7,7 @@ export default function ForEscape() {
 				<div data-testid="input1-{i}" name={i} />
 				<div data-testid="input2-{i}" name="{i}" />
 				<div data-testid="input3-{i}" name={things[i]} />
+				<input :value={i} name="{i}" />
 			}
 		</section>
 	}

package/test/for/components/output/ForEscape-client.ts

@@ -5,6 +5,7 @@ import t_add_fragment from "../../../../src/render/addFragment";
 import t_anchor from "../../../../src/render/nodeAnchor";
 import t_attribute from "../../../../src/render/setAttribute";
 import t_child from "../../../../src/render/nodeChild";
+import t_event from "../../../../src/render/addEvent";
 import t_fmt from "../../../../src/render/formatText";
 import t_fragment from "../../../../src/render/getFragment";
 import t_list_item from "../../../../src/render/newListItem";
@@ -54,15 +55,16 @@ export default function ForEscape(
 		},
 		function createListItem(t_item, t_before) {
 			let t_old_range_1 = t_push_range(t_item, true);
-			const t_fragment_1 = t_fragment($parent.ownerDocument!, t_fragments, 1, ` <p>#</p> <div data-testid=""></div> <div data-testid=""></div> <div data-testid=""></div> `);
+			const t_fragment_1 = t_fragment($parent.ownerDocument!, t_fragments, 1, ` <p>#</p> <div data-testid=""></div> <div data-testid=""></div> <div data-testid=""></div> <input></input> `);
 			// @ts-ignore
 			const t_root_1 = t_root(t_fragment_1);
 			const t_text_1 = t_child(t_next(t_root_1));
 			const t_div_1 = t_next(t_next(t_next(t_root_1))) as HTMLDivElement;
 			const t_div_2 = t_next(t_next(t_div_1)) as HTMLDivElement;
 			const t_div_3 = t_next(t_next(t_div_2)) as HTMLDivElement;
+			const t_input_1 = t_next(t_next(t_div_3)) as HTMLInputElement;
 			// @ts-ignore
-			const t_text_2 = t_next(t_div_3);
+			const t_text_2 = t_next(t_input_1);
 			$run(function setTextContent() {
 				t_text_1.textContent = t_fmt(t_item.data.i);
 			});
@@ -84,6 +86,13 @@ export default function ForEscape(
 			$run(function setAttribute() {
 				t_attribute(t_div_3, "name", things[t_item.data.i]);
 			});
+			$run(function setBinding() {
+				t_input_1.value = t_item.data.i || "";
+			});
+			t_event(t_input_1, "input", (e) => t_item.data.i = e.target.value);
+			$run(function setAttribute() {
+				t_attribute(t_input_1, "name", `${t_item.data.i}`);
+			});
 			t_add_fragment(t_fragment_1, t_section_1, t_before);
 			t_next(t_text_2);
 			t_pop_range(t_old_range_1);

package/test/for/components/output/ForEscape-server.ts

@@ -16,7 +16,7 @@ export default function ForEscape(
 	let $output = "";
 	$output += `<section> <![>`;
 	for (let i = 0; i < 5; i++) {
-		$output += `<!^> <p>${t_fmt(i)}</p> <div data-testid="input1-${t_attr(i)}" ${i ? `name="${t_attr(i)}"` : ''}></div> <div data-testid="input2-${t_attr(i)}" name="${t_attr(i)}"></div> <div data-testid="input3-${t_attr(i)}" ${things[i] ? `name="${t_attr(things[i])}"` : ''}></div> `;
+		$output += `<!^> <p>${t_fmt(i)}</p> <div data-testid="input1-${t_attr(i)}" ${i ? `name="${t_attr(i)}"` : ''}></div> <div data-testid="input2-${t_attr(i)}" name="${t_attr(i)}"></div> <div data-testid="input3-${t_attr(i)}" ${things[i] ? `name="${t_attr(things[i])}"` : ''}></div> <input value="${t_attr(i) || ""}" name="${t_attr(i)}"> `;
 	}
 	$output += `<!]><!> </section>`;
 

package/test/for/components/temp/{ForEscape-client-2c881b16a6382edf074e1f151a209d60ca9b2b66.ts → ForEscape-client-80d3078cf15001f2ab37b0ec63cfce7267a8a166.ts}

@@ -5,6 +5,7 @@ import t_add_fragment from "../../../../src/render/addFragment";
 import t_anchor from "../../../../src/render/nodeAnchor";
 import t_attribute from "../../../../src/render/setAttribute";
 import t_child from "../../../../src/render/nodeChild";
+import t_event from "../../../../src/render/addEvent";
 import t_fmt from "../../../../src/render/formatText";
 import t_fragment from "../../../../src/render/getFragment";
 import t_list_item from "../../../../src/render/newListItem";
@@ -54,15 +55,16 @@ export default function ForEscape(
 		},
 		function createListItem(t_item, t_before) {
 			let t_old_range_1 = t_push_range(t_item, true);
-			const t_fragment_1 = t_fragment($parent.ownerDocument!, t_fragments, 1, ` <p>#</p> <div data-testid=""></div> <div data-testid=""></div> <div data-testid=""></div> `);
+			const t_fragment_1 = t_fragment($parent.ownerDocument!, t_fragments, 1, ` <p>#</p> <div data-testid=""></div> <div data-testid=""></div> <div data-testid=""></div> <input></input> `);
 			// @ts-ignore
 			const t_root_1 = t_root(t_fragment_1);
 			const t_text_1 = t_child(t_next(t_root_1));
 			const t_div_1 = t_next(t_next(t_next(t_root_1))) as HTMLDivElement;
 			const t_div_2 = t_next(t_next(t_div_1)) as HTMLDivElement;
 			const t_div_3 = t_next(t_next(t_div_2)) as HTMLDivElement;
+			const t_input_1 = t_next(t_next(t_div_3)) as HTMLInputElement;
 			// @ts-ignore
-			const t_text_2 = t_next(t_div_3);
+			const t_text_2 = t_next(t_input_1);
 			$run(function setTextContent() {
 				t_text_1.textContent = t_fmt(t_item.data.i);
 			});
@@ -84,6 +86,13 @@ export default function ForEscape(
 			$run(function setAttribute() {
 				t_attribute(t_div_3, "name", things[t_item.data.i]);
 			});
+			$run(function setBinding() {
+				t_input_1.value = t_item.data.i || "";
+			});
+			t_event(t_input_1, "input", (e) => t_item.data.i = e.target.value);
+			$run(function setAttribute() {
+				t_attribute(t_input_1, "name", `${t_item.data.i}`);
+			});
 			t_add_fragment(t_fragment_1, t_section_1, t_before);
 			t_next(t_text_2);
 			t_pop_range(t_old_range_1);

package/test/for/components/temp/{ForEscape-server-94a1bceabed006e15326a7f635724d88c3daa8fe.ts → ForEscape-server-375744ca1e10e5c8ed7dd6420beef72107e55568.ts}

@@ -16,7 +16,7 @@ export default function ForEscape(
 	let $output = "";
 	$output += `<section> <![>`;
 	for (let i = 0; i < 5; i++) {
-		$output += `<!^> <p>${t_fmt(i)}</p> <div data-testid="input1-${t_attr(i)}" ${i ? `name="${t_attr(i)}"` : ''}></div> <div data-testid="input2-${t_attr(i)}" name="${t_attr(i)}"></div> <div data-testid="input3-${t_attr(i)}" ${things[i] ? `name="${t_attr(things[i])}"` : ''}></div> `;
+		$output += `<!^> <p>${t_fmt(i)}</p> <div data-testid="input1-${t_attr(i)}" ${i ? `name="${t_attr(i)}"` : ''}></div> <div data-testid="input2-${t_attr(i)}" name="${t_attr(i)}"></div> <div data-testid="input3-${t_attr(i)}" ${things[i] ? `name="${t_attr(things[i])}"` : ''}></div> <input value="${t_attr(i) || ""}" name="${t_attr(i)}"> `;
 	}
 	$output += `<!]><!> </section>`;
 

package/test/for/for-escape.test.ts

@@ -1,5 +1,6 @@
-import { queryByTestId } from "@testing-library/dom";
+import { queryByTestId, queryByText } from "@testing-library/dom";
 import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
 import { beforeAll, expect, test } from "vitest";
 import buildOutputFiles from "../buildOutputFiles";
 import hydrateComponent from "../hydrateComponent";
@@ -17,7 +18,7 @@ test("for escape -- mounted", async () => {
 	const component = await importComponent(componentPath, "client");
 	mountComponent(container, component);
 
-	check(container);
+	await check(container);
 });
 
 test("for escape -- hydrated", async () => {
@@ -26,10 +27,10 @@ test("for escape -- hydrated", async () => {
 	const serverComponent = await importComponent(componentPath, "server");
 	hydrateComponent(container, clientComponent, serverComponent);
 
-	check(container);
+	await check(container);
 });
 
-function check(container: HTMLElement) {
+async function check(container: HTMLElement) {
 	expect(queryByTestId(container, "input1-2")).not.toBeNull();
 	expect(queryByTestId(container, "input1-2")).toHaveAttribute("name", "2");
 
@@ -38,4 +39,12 @@ function check(container: HTMLElement) {
 
 	expect(queryByTestId(container, "input3-2")).not.toBeNull();
 	expect(queryByTestId(container, "input3-2")).toHaveAttribute("name", "c");
+
+	const user = userEvent.setup();
+	const input = container.getElementsByTagName("input")[0];
+
+	await user.clear(input);
+	await user.type(input, "Hello");
+
+	expect(queryByText(container, "Hello")).not.toBeNull();
 }

package/test/text/components/Text.d.ts

@@ -0,0 +1,21 @@
+import { type SlotRender } from "@torpor/view";
+
+/**
+ * Mounts or hydrates the component into the supplied parent node.
+ * @param $parent -- The parent node.
+ * @param $anchor -- The node to mount the component before.
+ * @param $props -- The values that have been passed into the component as properties.
+ * @param $context -- Values that have been passed into the component from its ancestors.
+ * @param $slots -- Functions for rendering children into slot nodes within the component.
+ */
+declare function Text(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: {
+		value: string;
+		empty: string;
+	},
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+export default Text;

package/test/text/components/Text.torp

@@ -0,0 +1,17 @@
+/**
+ * A component with some text in it.
+ */
+ export default function Text($props: {
+	value: string;
+	empty: string;
+}) {
+	@render {
+		<div>
+			<p>
+				{$props.value}
+			</p>
+			@// Make sure the #text element to be set is not null if the value is empty
+			<p>{$props.empty}</p>
+		</div>
+	}
+}

package/test/text/components/output/Text-client.ts

@@ -0,0 +1,44 @@
+import $run from "../../../../src/render/$run";
+import { type SlotRender } from "../../../../src/types/SlotRender";
+import t_add_fragment from "../../../../src/render/addFragment";
+import t_child from "../../../../src/render/nodeChild";
+import t_fmt from "../../../../src/render/formatText";
+import t_fragment from "../../../../src/render/getFragment";
+import t_next from "../../../../src/render/nodeNext";
+import t_root from "../../../../src/render/nodeRoot";
+
+/**
+ * A component with some text in it.
+ */
+export default function Text(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: {
+		value: string;
+		empty: string;
+	},
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, SlotRender>
+) {
+	$props ??= {};
+
+	/* User interface */
+	const t_fragments: DocumentFragment[] = [];
+
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> <p>#</p> <p>#</p> </div>`);
+	// @ts-ignore
+	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
+	const t_text_1 = t_child(t_next(t_child(t_div_1)));
+	const t_text_2 = t_child(t_next(t_next(t_next(t_child(t_div_1)))));
+	$run(function setTextContent() {
+		t_text_1.textContent = ` ${t_fmt($props.value)} `;
+	});
+	$run(function setTextContent() {
+		t_text_2.textContent = t_fmt($props.empty);
+	});
+	t_add_fragment(t_fragment_0, $parent, $anchor);
+	t_next(t_div_1);
+
+}

package/test/text/components/output/Text-server.ts

@@ -0,0 +1,23 @@
+import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
+import t_fmt from "../../../../src/render/formatText";
+
+/**
+ * A component with some text in it.
+ */
+export default function Text(
+	$props: {
+		value: string;
+		empty: string;
+	},
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, ServerSlotRender>
+) {
+
+	/* User interface */
+	let $output = "";
+	$output += `<div> <p> ${t_fmt($props.value)} </p> <p>${t_fmt($props.empty)}</p> </div>`;
+
+	return $output;
+}

package/test/text/components/temp/Text-client-9840092be1b4552ddce6e5efc2f1b395637a0a3d.ts

@@ -0,0 +1,44 @@
+import $run from "../../../../src/render/$run";
+import { type SlotRender } from "../../../../src/types/SlotRender";
+import t_add_fragment from "../../../../src/render/addFragment";
+import t_child from "../../../../src/render/nodeChild";
+import t_fmt from "../../../../src/render/formatText";
+import t_fragment from "../../../../src/render/getFragment";
+import t_next from "../../../../src/render/nodeNext";
+import t_root from "../../../../src/render/nodeRoot";
+
+/**
+ * A component with some text in it.
+ */
+export default function Text(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: {
+		value: string;
+		empty: string;
+	},
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, SlotRender>
+) {
+	$props ??= {};
+
+	/* User interface */
+	const t_fragments: DocumentFragment[] = [];
+
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> <p>#</p> <p>#</p> </div>`);
+	// @ts-ignore
+	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
+	const t_text_1 = t_child(t_next(t_child(t_div_1)));
+	const t_text_2 = t_child(t_next(t_next(t_next(t_child(t_div_1)))));
+	$run(function setTextContent() {
+		t_text_1.textContent = ` ${t_fmt($props.value)} `;
+	});
+	$run(function setTextContent() {
+		t_text_2.textContent = t_fmt($props.empty);
+	});
+	t_add_fragment(t_fragment_0, $parent, $anchor);
+	t_next(t_div_1);
+
+}

package/test/text/components/temp/Text-server-6774aa9d4ccce941224ba0a8fb1d3e42eb31807e.ts

@@ -0,0 +1,23 @@
+import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
+import t_fmt from "../../../../src/render/formatText";
+
+/**
+ * A component with some text in it.
+ */
+export default function Text(
+	$props: {
+		value: string;
+		empty: string;
+	},
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, ServerSlotRender>
+) {
+
+	/* User interface */
+	let $output = "";
+	$output += `<div> <p> ${t_fmt($props.value)} </p> <p>${t_fmt($props.empty)}</p> </div>`;
+
+	return $output;
+}

package/test/text/text.test.ts

@@ -0,0 +1,51 @@
+import { queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import { beforeAll, expect, test } from "vitest";
+import $watch from "../../src/render/$watch";
+import buildOutputFiles from "../buildOutputFiles";
+import hydrateComponent from "../hydrateComponent";
+import importComponent from "../importComponent";
+import mountComponent from "../mountComponent";
+
+const componentPath = "./test/text/components/Text";
+
+beforeAll(() => {
+	buildOutputFiles(componentPath);
+});
+
+interface State {
+	value: string;
+	empty: string;
+}
+
+test("text -- mounted", async () => {
+	const $state = $watch({ value: "hi", empty: "" });
+
+	const container = document.createElement("div");
+	const component = await importComponent(componentPath, "client");
+	mountComponent(container, component, $state);
+
+	check(container, $state);
+});
+
+test("switch values -- hydrated", async () => {
+	const $state = $watch({ value: "hi", empty: "" });
+
+	const container = document.createElement("div");
+	const clientComponent = await importComponent(componentPath, "client");
+	const serverComponent = await importComponent(componentPath, "server");
+	hydrateComponent(container, clientComponent, serverComponent, $state);
+
+	check(container, $state);
+});
+
+function check(container: HTMLElement, state: State) {
+	expect(queryByText(container, "hi")).not.toBeNull();
+
+	state.value = "hello";
+	state.empty = "world";
+
+	expect(queryByText(container, "hi")).toBeNull();
+	expect(queryByText(container, "hello")).not.toBeNull();
+	expect(queryByText(container, "world")).not.toBeNull();
+}