@torpor/view 0.0.3 → 0.0.5

package/package.json

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

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

@@ -13,6 +13,7 @@ import buildFragment from "./buildFragment";
 import buildMount from "./buildMount";
 import buildNode from "./buildNode";
 import buildRun from "./buildRun";
+import replaceForVarNames from "./replaceForVarNames";
 
 export default function buildElementNode(
 	node: ElementNode,
@@ -230,6 +231,8 @@ function buildBindGroupAttribute(
 	status: BuildStatus,
 	b: Builder,
 ) {
+	value = replaceForVarNames(value, status);
+
 	// Automatically add an event to bind the value
 	// TODO: Only tested this with radio buttons
 	let eventName = "change";
@@ -253,6 +256,8 @@ function buildBindAttribute(
 	status: BuildStatus,
 	b: Builder,
 ) {
+	value = replaceForVarNames(value, status);
+
 	// Automatically add an event to bind the value
 	// TODO: Need to check the element to find out what type of event to add
 	let eventName = "input";
@@ -298,14 +303,7 @@ function buildEventAttribute(
 	status: BuildStatus,
 	b: Builder,
 ) {
-	// 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) {
-		value = value.replaceAll(
-			new RegExp(`([\\s\\(\\[])${varName}([\\s\\.\\(\\)\\[\\];])`, "g"),
-			`$1t_item.data.${varName}$2`,
-		);
-	}
+	value = replaceForVarNames(value, status);
 
 	// Add an event listener, after the fragment has been added
 	const eventName = name.substring(2);
@@ -321,6 +319,8 @@ function buildTransitionAttribute(
 	status: BuildStatus,
 	b: Builder,
 ) {
+	value = replaceForVarNames(value, status);
+
 	status.imports.add("t_animate");
 
 	// Add an in and out transition, after the fragment has been added

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

@@ -1,22 +1,17 @@
 import Builder from "../../utils/Builder";
 import { type BuildStatus } from "./BuildStatus";
+import replaceForVarNames from "./replaceForVarNames";
 
-export default function buildRun(
+export default function buildMount(
 	functionName: string,
 	functionBody: string,
 	status: BuildStatus,
 	b: Builder,
 ) {
+	functionBody = replaceForVarNames(functionBody, status);
+
 	status.imports.add("$mount");
 	b.append(`$mount(function ${functionName}() {`);
-	// 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) {
-		functionBody = functionBody.replaceAll(
-			new RegExp(`([\\s\\(\\[])${varName}([\\s\\.\\(\\)\\[\\];])`, "g"),
-			`$1t_item.data.${varName}$2`,
-		);
-	}
 	b.append(functionBody);
 	b.append("});");
 }

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

@@ -1,5 +1,6 @@
 import Builder from "../../utils/Builder";
 import { type BuildStatus } from "./BuildStatus";
+import replaceForVarNames from "./replaceForVarNames";
 
 export default function buildRun(
 	functionName: string,
@@ -7,16 +8,10 @@ export default function buildRun(
 	status: BuildStatus,
 	b: Builder,
 ) {
+	functionBody = replaceForVarNames(functionBody, status);
+
 	status.imports.add("$run");
 	b.append(`$run(function ${functionName}() {`);
-	// 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) {
-		functionBody = functionBody.replaceAll(
-			new RegExp(`([\\s\\(\\[\\{])${varName}([\\s\\.\\(\\)\\[\\]\\};])`, "g"),
-			`$1t_item.data.${varName}$2`,
-		);
-	}
 	b.append(functionBody);
 	b.append("});");
 }

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

@@ -0,0 +1,16 @@
+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) {
+	// 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) {
+		value = value.replaceAll(
+			new RegExp(`(^|\\s|\\(|\\[|\\{)${varName}($|\\s|\\.|\\(|\\)|\\[|\\]|\\}|;)`, "g"),
+			`$1t_item.data.${varName}$2`,
+		);
+	}
+	return value;
+}

package/src/compile/parse/parseStyles.ts

@@ -70,6 +70,8 @@ function parseStyleBlock(status: ParseStatus): StyleBlock | undefined {
 				} else {
 					break;
 				}
+			} else {
+				return block;
 			}
 			consumeSpace(status);
 		}

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();
 }