@torpor/view 0.4.8 → 0.4.9

package/test/watch-object/components/temp/WatchUndefinedPropertyChange-server-7af97c0938c3c851f60e86ef27188e0bcd432354.ts

@@ -0,0 +1,18 @@
+import type ServerSlotRender from "../../../../src/types/ServerSlotRender";
+import t_fmt from "../../../../src/render/formatText";
+
+export default function Watched(
+	$props: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, ServerSlotRender>
+): { body: string, head: string } {
+	let t_body = "";
+	let t_head = "";
+
+	/* User interface */
+	t_body += ` <p> ${t_fmt($props.text)} </p> `;
+
+	return { body: t_body, head: t_head };
+}

package/test/watch-object/components/temp/WatchUndefinedPropertyChange-types-05e791b7c4023f8ae6e8dd548fe3f16ea8c16d10.ts

@@ -0,0 +1,10 @@
+import type SlotRender from "../../../../src/types/SlotRender";
+
+declare function Watched(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: Record<PropertyKey, any>,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+export default Watched;

package/test/watch-object/watch-undefined-property-change.test.ts

@@ -0,0 +1,51 @@
+import "@testing-library/jest-dom/vitest";
+import { assert, expect, test } from "vitest";
+import $watch from "../../src/watch/$watch";
+import hydrateComponent from "../hydrateComponent";
+import importComponent from "../importComponent";
+import mountComponent from "../mountComponent";
+
+interface Props {
+	text?: string;
+}
+
+const source = `
+export default function Watched() {
+	@render {
+		<p>
+			{$props.text}
+		</p>
+	}
+}
+`;
+
+test("watch undefined property change -- mounted", async () => {
+	let $state = $watch({});
+
+	const container = document.createElement("div");
+	const component = await importComponent(import.meta.filename, source, "client");
+	mountComponent(container, component, $state);
+
+	check(container, $state);
+});
+
+test("watch undefined property change -- hydrated", async () => {
+	let $state = $watch({});
+
+	const container = document.createElement("div");
+	const clientComponent = await importComponent(import.meta.filename, source, "client");
+	const serverComponent = await importComponent(import.meta.filename, source, "server");
+	hydrateComponent(container, clientComponent, serverComponent, $state);
+
+	check(container, $state);
+});
+
+function check(container: HTMLElement, state: Props) {
+	assert(container.textContent);
+
+	expect(container.textContent.replace(/\s+/g, " ").trim()).toBe("");
+
+	state.text = "hello";
+
+	expect(container.textContent.replace(/\s+/g, " ").trim()).toBe("hello");
+}