@torpor/view 0.0.4 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@torpor/view",
-  "version": "0.0.4",
+  "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/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/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();
 }