@torpor/view 0.0.5 → 0.0.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @torpor/view
 
+## 0.0.6
+
+### Patch Changes
+
+- 808da4c: Fix: hydrating a node with empty text
+
 ## 0.0.5
 
 ### Patch Changes

package/package.json

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

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