@torpor/view 0.0.9 → 0.0.10

package/package.json

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

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

@@ -13,6 +13,7 @@ export type BuildStatus = {
 		path: string;
 	}[];
 	forVarNames: string[];
+	ns: boolean;
 	preserveWhitespace: boolean;
 	inHead?: boolean;
 	options?: BuildOptions;

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

@@ -120,6 +120,7 @@ function buildTemplate(template: Template, imports: Set<string>, b: Builder) {
 					varNames: {},
 					fragmentStack: [],
 					forVarNames: [],
+					ns: false,
 					preserveWhitespace: false,
 				};
 

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

@@ -74,7 +74,7 @@ export default function buildFragment(
 			status.imports.add("t_fragment");
 			const fragmentText = fragment.text.replaceAll("`", "\\`").replaceAll(/\s+/g, " ");
 			b.append(
-				`const ${fragmentName} = t_fragment($parent.ownerDocument!, t_fragments, ${fragment.number}, \`${fragmentText}\`);`,
+				`const ${fragmentName} = t_fragment($parent.ownerDocument!, t_fragments, ${fragment.number}, \`${fragmentText}\`${fragment.ns ? ", true" : ""});`,
 			);
 			let fragmentPath = { parent: null, type: "fragment", children: [] };
 			let varPaths = new Map<string, string>();

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

@@ -45,7 +45,11 @@ function buildNodeFragmentText(
 			break;
 		}
 		case "element": {
+			// NOTE: We don't support nested SVG for now
+			let ns = (node as ElementNode).tagName === "svg";
+			if (ns) status.ns = true;
 			buildElementFragmentText(node as ElementNode, status, fragments, currentFragment!);
+			if (ns) status.ns = false;
 			break;
 		}
 		case "text": {
@@ -63,7 +67,7 @@ function buildNodeFragmentText(
 }
 
 function buildRootFragmentText(node: RootNode, status: BuildStatus, fragments: Fragment[]) {
-	node.fragment = { number: fragments.length, text: "", events: [], animations: [] };
+	node.fragment = { number: fragments.length, text: "", ns: status.ns, events: [], animations: [] };
 	fragments.push(node.fragment);
 	for (let child of node.children) {
 		buildNodeFragmentText(child, status, fragments, node.fragment);
@@ -94,7 +98,13 @@ function buildControlFragmentText(
 		}
 		default: {
 			// Add a new fragment if it's a control branch and it has children
-			node.fragment = { number: fragments.length, text: "", events: [], animations: [] };
+			node.fragment = {
+				number: fragments.length,
+				text: "",
+				ns: status.ns,
+				events: [],
+				animations: [],
+			};
 			fragments.push(node.fragment);
 			for (let child of node.children) {
 				buildNodeFragmentText(child, status, fragments, node.fragment);
@@ -114,7 +124,13 @@ function buildComponentFragmentText(
 
 	// Add fragments for slots if there are children
 	if (node.children.length) {
-		node.fragment = { number: fragments.length, text: "", events: [], animations: [] };
+		node.fragment = {
+			number: fragments.length,
+			text: "",
+			ns: status.ns,
+			events: [],
+			animations: [],
+		};
 		fragments.push(node.fragment);
 		for (let child of node.children) {
 			// TODO: Make sure it's not a :fill node
@@ -172,7 +188,13 @@ function buildSpecialFragmentText(
 		}
 		case ":fill": {
 			// Add a new fragment for filled slot content
-			node.fragment = { number: fragments.length, text: "", events: [], animations: [] };
+			node.fragment = {
+				number: fragments.length,
+				text: "",
+				ns: status.ns,
+				events: [],
+				animations: [],
+			};
 			fragments.push(node.fragment);
 			for (let child of node.children) {
 				buildNodeFragmentText(child, status, fragments, node.fragment);

package/src/compile/types/nodes/Fragment.ts

@@ -1,6 +1,7 @@
 export type Fragment = {
 	number: number;
 	text: string;
+	ns: boolean;
 	events: {
 		varName: string;
 		eventName: string;

package/src/render/getFragment.ts

@@ -3,12 +3,22 @@ export default function getFragment(
 	array: DocumentFragment[],
 	index: number,
 	html: string,
+	ns?: boolean,
 ): DocumentFragment {
 	// Create the fragment in the array if it hasn't yet been used
 	if (array[index] === undefined) {
-		const template = document.createElement("template");
-		template.innerHTML = html;
-		array[index] = template.content;
+		// TODO: Should pass a string for the ns, when we support other element types
+		if (ns) {
+			const template = document.createElementNS("http://www.w3.org/2000/svg", "template");
+			template.innerHTML = html;
+			const fragment = new DocumentFragment();
+			fragment.append(...template.childNodes);
+			array[index] = fragment;
+		} else {
+			const template = document.createElement("template");
+			template.innerHTML = html;
+			array[index] = template.content;
+		}
 	}
 
 	// Get the fragment from the array

package/test/console/components/temp/{Console-client-2f206752ce59e59fba9bb91263b4102fd515951e.ts → Console-client-254d7d4799471401334d698b1631ab1cb5b70558.ts}

@@ -18,7 +18,7 @@ export default function Console(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> </div>`);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> </div>`, false);
 	// @ts-ignore
 	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
 	/* @console */

package/test/svg/components/Shape.d.ts

@@ -0,0 +1,18 @@
+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 Shape(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: { name: string },
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+export default Shape;

package/test/svg/components/Shape.torp

@@ -0,0 +1,12 @@
+
+export default function Shape($props: { name: string }) {
+	@render {
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="img">
+			@if ($props.name === "rect") {
+				<rect width="100" height="100" fill="red"></rect>
+			} else {
+				<circle r="45" cx="50" cy="50" fill="red"></circle>
+			}
+		</svg>
+	}
+}

package/test/svg/components/output/Shape-client.ts

@@ -0,0 +1,61 @@
+import { type SlotRender } from "../../../../src/types/SlotRender";
+import t_add_fragment from "../../../../src/render/addFragment";
+import t_anchor from "../../../../src/render/nodeAnchor";
+import t_child from "../../../../src/render/nodeChild";
+import t_fragment from "../../../../src/render/getFragment";
+import t_next from "../../../../src/render/nodeNext";
+import t_range from "../../../../src/render/newRange";
+import t_root from "../../../../src/render/nodeRoot";
+import t_run_branch from "../../../../src/render/runControlBranch";
+import t_run_control from "../../../../src/render/runControl";
+
+export default function Shape(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: { name: 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, `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="img"> <!> </svg>`);
+	// @ts-ignore
+	const t_svg_1 = t_root(t_fragment_0) as HTMLElement;
+	const t_if_anchor_1 = t_anchor(t_next(t_child(t_svg_1))) as HTMLElement;
+
+	/* @if */
+	const t_if_range_1 = t_range();
+	t_run_control(t_if_range_1, t_if_anchor_1, (t_before) => {
+		if ($props.name === "rect") {
+			t_run_branch(t_if_range_1, 0, () => {
+				const t_fragment_1 = t_fragment($parent.ownerDocument!, t_fragments, 1, ` <rect width="100" height="100" fill="red"></rect> `, true);
+				// @ts-ignore
+				const t_root_1 = t_root(t_fragment_1);
+				// @ts-ignore
+				const t_text_1 = t_next(t_next(t_root_1));
+				t_add_fragment(t_fragment_1, t_svg_1, t_before);
+				t_next(t_text_1);
+			});
+		}
+		else {
+			t_run_branch(t_if_range_1, 1, () => {
+				const t_fragment_2 = t_fragment($parent.ownerDocument!, t_fragments, 2, ` <circle r="45" cx="50" cy="50" fill="red"></circle> `, true);
+				// @ts-ignore
+				const t_root_2 = t_root(t_fragment_2);
+				// @ts-ignore
+				const t_text_2 = t_next(t_next(t_root_2));
+				t_add_fragment(t_fragment_2, t_svg_1, t_before);
+				t_next(t_text_2);
+			});
+		}
+	});
+
+	t_add_fragment(t_fragment_0, $parent, $anchor);
+	t_next(t_svg_1);
+
+}

package/test/svg/components/output/Shape-server.ts

@@ -0,0 +1,23 @@
+import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
+
+export default function Shape(
+	$props: { name: string },
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, ServerSlotRender>
+) {
+
+	/* User interface */
+	let $output = "";
+	$output += `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="img"> <![>`;
+	if ($props.name === "rect") {
+		$output += ` <rect width="100" height="100" fill="red"></rect> `;
+	}
+	else {
+		$output += ` <circle r="45" cx="50" cy="50" fill="red"></circle> `;
+	}
+	$output += `<!]><!> </svg>`;
+
+	return $output;
+}

package/test/svg/components/temp/Shape-client-ea698ed1b7d0c3615adff35fa4956f22840f5fda.ts

@@ -0,0 +1,61 @@
+import { type SlotRender } from "../../../../src/types/SlotRender";
+import t_add_fragment from "../../../../src/render/addFragment";
+import t_anchor from "../../../../src/render/nodeAnchor";
+import t_child from "../../../../src/render/nodeChild";
+import t_fragment from "../../../../src/render/getFragment";
+import t_next from "../../../../src/render/nodeNext";
+import t_range from "../../../../src/render/newRange";
+import t_root from "../../../../src/render/nodeRoot";
+import t_run_branch from "../../../../src/render/runControlBranch";
+import t_run_control from "../../../../src/render/runControl";
+
+export default function Shape(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: { name: 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, `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="img"> <!> </svg>`);
+	// @ts-ignore
+	const t_svg_1 = t_root(t_fragment_0) as HTMLElement;
+	const t_if_anchor_1 = t_anchor(t_next(t_child(t_svg_1))) as HTMLElement;
+
+	/* @if */
+	const t_if_range_1 = t_range();
+	t_run_control(t_if_range_1, t_if_anchor_1, (t_before) => {
+		if ($props.name === "rect") {
+			t_run_branch(t_if_range_1, 0, () => {
+				const t_fragment_1 = t_fragment($parent.ownerDocument!, t_fragments, 1, ` <rect width="100" height="100" fill="red"></rect> `, true);
+				// @ts-ignore
+				const t_root_1 = t_root(t_fragment_1);
+				// @ts-ignore
+				const t_text_1 = t_next(t_next(t_root_1));
+				t_add_fragment(t_fragment_1, t_svg_1, t_before);
+				t_next(t_text_1);
+			});
+		}
+		else {
+			t_run_branch(t_if_range_1, 1, () => {
+				const t_fragment_2 = t_fragment($parent.ownerDocument!, t_fragments, 2, ` <circle r="45" cx="50" cy="50" fill="red"></circle> `, true);
+				// @ts-ignore
+				const t_root_2 = t_root(t_fragment_2);
+				// @ts-ignore
+				const t_text_2 = t_next(t_next(t_root_2));
+				t_add_fragment(t_fragment_2, t_svg_1, t_before);
+				t_next(t_text_2);
+			});
+		}
+	});
+
+	t_add_fragment(t_fragment_0, $parent, $anchor);
+	t_next(t_svg_1);
+
+}

package/test/svg/components/temp/Shape-server-eb32049cfb7c058b2c4079c5f86ef00651ff6d69.ts

@@ -0,0 +1,23 @@
+import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
+
+export default function Shape(
+	$props: { name: string },
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, ServerSlotRender>
+) {
+
+	/* User interface */
+	let $output = "";
+	$output += `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="img"> <![>`;
+	if ($props.name === "rect") {
+		$output += ` <rect width="100" height="100" fill="red"></rect> `;
+	}
+	else {
+		$output += ` <circle r="45" cx="50" cy="50" fill="red"></circle> `;
+	}
+	$output += `<!]><!> </svg>`;
+
+	return $output;
+}

package/test/svg/svg.test.ts

@@ -0,0 +1,50 @@
+import { queryByRole } 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/svg/components/Shape";
+
+beforeAll(() => {
+	buildOutputFiles(componentPath);
+});
+
+interface State {
+	name: string;
+}
+
+test("svg -- mounted", async () => {
+	const $state = $watch({ name: "rect" });
+
+	const container = document.createElement("div");
+	const component = await importComponent(componentPath, "client");
+	mountComponent(container, component, $state);
+
+	check(container, $state);
+});
+
+test("svg -- hydrated", async () => {
+	const $state = $watch({ name: "rect" });
+
+	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) {
+	const img = queryByRole(container, "img");
+	expect(img).not.toBeNull();
+
+	expect(img).toContainHTML('<rect width="100" height="100" fill="red"></rect>');
+
+	state.name = "circle";
+
+	expect(img).toContainHTML('<circle r="45" cx="50" cy="50" fill="red"></circle>');
+}