@torpor/view 0.4.14 → 0.4.16

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

@@ -1,239 +0,0 @@
-import { ANCHOR_COMMENT } from "../../types/comments";
-import type ControlNode from "../../types/nodes/ControlNode";
-import type ElementNode from "../../types/nodes/ElementNode";
-import type Fragment from "../../types/nodes/Fragment";
-import type RootNode from "../../types/nodes/RootNode";
-import type TemplateNode from "../../types/nodes/TemplateNode";
-import type TextNode from "../../types/nodes/TextNode";
-import Builder from "../../utils/Builder";
-import isReactive from "../../utils/isReactive";
-import trimQuotes from "../../utils/trimQuotes";
-import type BuildStatus from "./BuildStatus";
-
-/**
- * Builds the HTML template text for all of the fragments in a component
- */
-export default function buildFragmentText(
-	node: RootNode | ControlNode,
-	status: BuildStatus,
-	b: Builder,
-): void {
-	const fragments: Fragment[] = [];
-	buildNodeFragmentText(node, status, fragments);
-
-	if (fragments.length) {
-		b.append(`const t_fragments: DocumentFragment[] = [];`);
-	}
-}
-
-function buildNodeFragmentText(
-	node: TemplateNode,
-	status: BuildStatus,
-	fragments: Fragment[],
-	currentFragment?: Fragment,
-) {
-	switch (node.type) {
-		case "root": {
-			buildRootFragmentText(node as RootNode, status, fragments);
-			break;
-		}
-		case "control": {
-			buildControlFragmentText(node as ControlNode, status, fragments, currentFragment!);
-			break;
-		}
-		case "component": {
-			buildComponentFragmentText(node as ElementNode, status, fragments, currentFragment!);
-			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": {
-			const content = (node as TextNode).content;
-			if (currentFragment) {
-				currentFragment.text += isReactive(content) ? "#" : content;
-			}
-			break;
-		}
-		case "special": {
-			buildSpecialFragmentText(node as ElementNode, status, fragments, currentFragment!);
-			break;
-		}
-	}
-}
-
-function buildRootFragmentText(node: RootNode, status: BuildStatus, fragments: Fragment[]) {
-	node.fragment = {
-		number: fragments.length,
-		text: "",
-		ns: status.ns,
-		effects: [],
-		events: [],
-		animations: [],
-	};
-	fragments.push(node.fragment);
-	for (let child of node.children) {
-		buildNodeFragmentText(child, status, fragments, node.fragment);
-	}
-}
-
-function buildControlFragmentText(
-	node: ControlNode,
-	status: BuildStatus,
-	fragments: Fragment[],
-	currentFragment: Fragment,
-) {
-	switch (node.operation) {
-		case "@if group":
-		case "@switch group":
-		case "@for group":
-		case "@await group":
-		case "@replace group":
-		case "@html group": {
-			// Add a placeholder if it's a branching control node
-			//if (!node.singleRooted) {
-			currentFragment.text += ANCHOR_COMMENT;
-			//}
-			for (let child of node.children) {
-				buildNodeFragmentText(child, status, fragments, currentFragment);
-			}
-			break;
-		}
-		default: {
-			// Add a new fragment if it's a control branch and it has children
-			node.fragment = {
-				number: fragments.length,
-				text: "",
-				ns: status.ns,
-				effects: [],
-				events: [],
-				animations: [],
-			};
-			fragments.push(node.fragment);
-			for (let child of node.children) {
-				buildNodeFragmentText(child, status, fragments, node.fragment);
-			}
-			break;
-		}
-	}
-}
-
-function buildComponentFragmentText(
-	node: ElementNode,
-	status: BuildStatus,
-	fragments: Fragment[],
-	currentFragment: Fragment,
-) {
-	currentFragment.text += ANCHOR_COMMENT;
-
-	// Add fragments for slots if there are children
-	if (node.children.length) {
-		node.fragment = {
-			number: fragments.length,
-			text: "",
-			ns: status.ns,
-			effects: [],
-			events: [],
-			animations: [],
-		};
-		fragments.push(node.fragment);
-		for (let child of node.children) {
-			// TODO: Make sure it's not a fill node
-			buildNodeFragmentText(child, status, fragments, node.fragment);
-		}
-	}
-}
-
-function buildElementFragmentText(
-	node: ElementNode,
-	status: BuildStatus,
-	fragments: Fragment[],
-	currentFragment: Fragment,
-) {
-	let needsClass = node.scopeStyles;
-	currentFragment.text += `<${node.tagName}`;
-	let attributesText = node.attributes
-		.filter((a) => !a.name.startsWith("on"))
-		.map((a) => {
-			if (a.value && a.reactive) {
-				// Adding a placeholder for reactive attributes seems to speed things
-				// up, especially in the case of data attributes. Otherwise don't set it
-				if (a.name.startsWith("data-")) {
-					return `${a.name}=""`;
-				}
-			} else if (a.name === "class" && node.scopeStyles) {
-				needsClass = false;
-				let value = a.value
-					? `"${trimQuotes(a.value)} torp-${status.styleHash}"`
-					: `"torp-${status.styleHash}"`;
-				return `${a.name}=${value}`;
-			} else {
-				return `${a.name}${a.value != null ? `=${a.value}` : ""}`;
-			}
-		})
-		.filter(Boolean)
-		.join(" ");
-	if (attributesText) {
-		currentFragment.text += " " + attributesText;
-	}
-	if (needsClass) {
-		currentFragment.text += ` class="torp-${status.styleHash}"`;
-	}
-	currentFragment.text += ">";
-	for (let child of node.children) {
-		buildNodeFragmentText(child, status, fragments, currentFragment);
-	}
-	currentFragment.text += `</${node.tagName}>`;
-}
-
-function buildSpecialFragmentText(
-	node: ElementNode,
-	status: BuildStatus,
-	fragments: Fragment[],
-	currentFragment: Fragment,
-) {
-	switch (node.tagName) {
-		case "slot": {
-			// Add an anchor for the slot
-			currentFragment.text += ANCHOR_COMMENT;
-			for (let child of node.children) {
-				buildNodeFragmentText(child, status, fragments, node.fragment);
-			}
-			break;
-		}
-		case "fill": {
-			// Add a new fragment for filled slot content
-			node.fragment = {
-				number: fragments.length,
-				text: "",
-				ns: status.ns,
-				effects: [],
-				events: [],
-				animations: [],
-			};
-			fragments.push(node.fragment);
-			for (let child of node.children) {
-				buildNodeFragmentText(child, status, fragments, node.fragment);
-			}
-			break;
-		}
-		case "@element": {
-			// HACK: Just treat it as a component node as that does what we need for now
-			buildComponentFragmentText(node, status, fragments, currentFragment);
-			break;
-		}
-		case "@component": {
-			buildComponentFragmentText(node, status, fragments, currentFragment);
-			break;
-		}
-		default: {
-			// eslint-disable-next-line restrict-template-expressions
-			throw new Error(`Invalid special node: ${node.tagName}`);
-		}
-	}
-}

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

@@ -1,73 +0,0 @@
-import type ControlNode from "../../types/nodes/ControlNode";
-import Builder from "../../utils/Builder";
-import nextVarName from "../utils/nextVarName";
-import type BuildStatus from "./BuildStatus";
-import addMappedText from "./addMappedText";
-import buildAddFragment from "./buildAddFragment";
-import replaceForVarNames from "./replaceForVarNames";
-
-// TODO: type checking
-
-export default function buildHtmlNode(node: ControlNode, status: BuildStatus, b: Builder): void {
-	const htmlAnchorName = node.varName!;
-	const htmlParentName = node.parentName || htmlAnchorName + ".parentNode";
-	const htmlRegionName = nextVarName("html_region", status);
-
-	// HACK: I'm not actually sure we need this here (or in @replace, where I copied it from)
-	node = node.children[0] as ControlNode;
-
-	status.imports.add("t_region");
-	status.imports.add("t_run_control");
-	status.imports.add("t_run_branch");
-	status.imports.add("t_push_region");
-	status.imports.add("t_pop_region");
-
-	b.append("");
-	b.append(`
-	/* @html */
-	const ${htmlRegionName} = t_region(${status.options.dev === true ? `"html"` : ""});
-	t_run_control(${htmlRegionName}, ${htmlAnchorName}, (t_before) => {`);
-
-	buildHtmlBranch(node, status, b, htmlParentName, htmlRegionName);
-
-	b.append(`}${status.options.dev === true ? ', "html"' : ""});`);
-	b.append("");
-}
-
-function buildHtmlBranch(
-	node: ControlNode,
-	status: BuildStatus,
-	b: Builder,
-	parentName: string,
-	regionName: string,
-) {
-	status.imports.add("t_run_branch");
-
-	b.append(`${replaceForVarNames(node.statement, status)};`);
-	b.append(`if (!t_run_branch(${regionName}, 0, -1)) return;`);
-
-	b.append(`
-		const t_new_region = t_region(${status.options.dev === true ? `"html_branch"` : ""});
-		const t_old_region = t_push_region(t_new_region, true);
-	`);
-
-	const templateName = nextVarName("template", status);
-	const fragmentName = `t_fragment_${node.fragment!.number}`;
-	b.append(`let ${templateName} = document.createElement("template");`);
-	// TODO: replaceForVarNames is going to throw mapping out
-	node.span.start += "html(".length;
-	node.span.end -= 2;
-	addMappedText(
-		"",
-		`${templateName}.innerHTML = ${replaceForVarNames(node.statement, status)};`,
-		"",
-		node.span,
-		status,
-		b,
-	);
-	b.append(`let ${fragmentName} = ${templateName}.content.cloneNode(true) as DocumentFragment;`);
-
-	buildAddFragment(node, status, b, parentName, "t_before");
-
-	b.append("t_pop_region(t_old_region);");
-}

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

@@ -1,102 +0,0 @@
-import type ControlNode from "../../types/nodes/ControlNode";
-import Builder from "../../utils/Builder";
-import isControlNode from "../../utils/isControlNode";
-import nextVarName from "../utils/nextVarName";
-import type BuildStatus from "./BuildStatus";
-import addMappedText from "./addMappedText";
-import addPopDevBoundary from "./addPopDevBoundary";
-import addPushDevBoundary from "./addPushDevBoundary";
-import buildAddFragment from "./buildAddFragment";
-import buildFragment from "./buildFragment";
-import buildNode from "./buildNode";
-import replaceForVarNames from "./replaceForVarNames";
-
-// TODO: Are there too many branches for ifs etc?
-
-export default function buildIfNode(node: ControlNode, status: BuildStatus, b: Builder): void {
-	const anchorName = node.varName ?? "null";
-	const parentName = node.parentName || anchorName + ".parentNode";
-	const regionName = nextVarName("if_region", status);
-	const indexName = nextVarName("if_index", status);
-
-	// Filter non-control branches (spaces)
-	const branches = node.children.filter((n) => isControlNode(n)) as ControlNode[];
-
-	// Add an else branch if there isn't one, so that the content will be cleared if no branches match
-	if (branches.findIndex((n) => n.operation === "@else") === -1) {
-		const elseBranch: ControlNode = {
-			type: "control",
-			operation: "@else",
-			statement: "else",
-			children: [],
-			span: { start: 0, end: 0 },
-		};
-		branches.push(elseBranch);
-	}
-
-	status.imports.add("t_region");
-	status.imports.add("t_run_control");
-	status.imports.add("t_run_branch");
-	status.imports.add("t_push_region");
-	status.imports.add("t_pop_region");
-
-	b.append("");
-	b.append("/* @if */");
-
-	addPushDevBoundary("control", `@${branches[0].statement}`, status, b);
-
-	b.append(`
-		const ${regionName} = t_region(${status.options.dev === true ? `"if"` : ""});
-		let ${indexName} = -1;
-		t_run_control(${regionName}, ${anchorName}, (${status.inHead ? "" : "t_before"}) => {`);
-
-	let index = 0;
-	for (let branch of branches) {
-		buildIfBranch(branch, status, b, parentName, regionName, indexName, index++);
-	}
-
-	b.append(`}${status.options.dev === true ? `, "runIf"` : ""});`);
-
-	addPopDevBoundary(status, b);
-
-	b.append("");
-}
-
-function buildIfBranch(
-	node: ControlNode,
-	status: BuildStatus,
-	b: Builder,
-	parentName: string,
-	regionName: string,
-	indexName: string,
-	index: number,
-) {
-	// TODO: replaceForVarNames is going to throw mapping out
-	addMappedText("", `${replaceForVarNames(node.statement, status)}`, " {", node.span, status, b);
-	b.append(`if (!t_run_branch(${regionName}, ${indexName}, ${index})) return;`);
-
-	if (node.children.length > 0) {
-		b.append(`
-			const t_new_region = t_region(${status.options.dev === true ? `"if_branch"` : ""});
-			const t_old_region = t_push_region(t_new_region, true);
-		`);
-
-		buildFragment(node, status, b, parentName, "t_before");
-
-		status.fragmentStack.push({
-			fragment: node.fragment,
-			path: "",
-		});
-		for (let child of node.children) {
-			buildNode(child, status, b, parentName, "t_before");
-		}
-		status.fragmentStack.pop();
-
-		buildAddFragment(node, status, b, parentName, "t_before");
-
-		b.append("t_pop_region(t_old_region);");
-	}
-
-	b.append(`${indexName} = ${index};`);
-	b.append("}");
-}

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

@@ -1,19 +0,0 @@
-import Builder from "../../utils/Builder";
-import type BuildStatus from "./BuildStatus";
-import replaceForVarNames from "./replaceForVarNames";
-
-export default function buildMount(
-	// TODO: like in buildRun
-	_functionName: string,
-	functionBody: string,
-	status: BuildStatus,
-	b: Builder,
-): void {
-	functionBody = replaceForVarNames(functionBody, status);
-
-	status.imports.add("$mount");
-	// Ignore errors if the user hasn't returned a cleanup function
-	b.append("// @ts-ignore\n$mount(() => {");
-	b.append(functionBody);
-	b.append("});");
-}

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

@@ -1,60 +0,0 @@
-import type ControlNode from "../../types/nodes/ControlNode";
-import type ElementNode from "../../types/nodes/ElementNode";
-import type RootNode from "../../types/nodes/RootNode";
-import type TemplateNode from "../../types/nodes/TemplateNode";
-import type TextNode from "../../types/nodes/TextNode";
-import Builder from "../../utils/Builder";
-import type BuildStatus from "./BuildStatus";
-import buildComponentNode from "./buildComponentNode";
-import buildControlNode from "./buildControlNode";
-import buildElementNode from "./buildElementNode";
-import buildRootNode from "./buildRootNode";
-import buildSpecialNode from "./buildSpecialNode";
-import buildTextNode from "./buildTextNode";
-
-export default function buildNode(
-	node: TemplateNode,
-	status: BuildStatus,
-	b: Builder,
-	parentName: string,
-	anchorName: string,
-	root = false,
-): void {
-	// Nodes with anchors will have been handled when their containing fragment
-	// was built so we want to skip them here
-	if (node.handled) {
-		node.handled = false;
-		return;
-	}
-
-	switch (node.type) {
-		case "root": {
-			buildRootNode(node as RootNode, status, b, parentName, anchorName);
-			break;
-		}
-		case "control": {
-			buildControlNode(node as ControlNode, status, b);
-			break;
-		}
-		case "component": {
-			buildComponentNode(node as ElementNode, status, b, root);
-			break;
-		}
-		case "element": {
-			buildElementNode(node as ElementNode, status, b, parentName, root);
-			break;
-		}
-		case "text": {
-			buildTextNode(node as TextNode, status);
-			break;
-		}
-		case "special": {
-			buildSpecialNode(node as ElementNode, status, b, parentName, root);
-			break;
-		}
-		default: {
-			// eslint-disable-next-line restrict-template-expressions
-			throw new Error(`Invalid node type: ${node.type}`);
-		}
-	}
-}

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

@@ -1,69 +0,0 @@
-import type ControlNode from "../../types/nodes/ControlNode";
-import Builder from "../../utils/Builder";
-import nextVarName from "../utils/nextVarName";
-import type BuildStatus from "./BuildStatus";
-import buildAddFragment from "./buildAddFragment";
-import buildFragment from "./buildFragment";
-import buildNode from "./buildNode";
-import replaceForVarNames from "./replaceForVarNames";
-
-// TODO: type checking
-
-export default function buildReplaceNode(node: ControlNode, status: BuildStatus, b: Builder): void {
-	const replaceAnchorName = node.varName!;
-	const replaceParentName = node.parentName || replaceAnchorName + ".parentNode";
-	const replaceRegionName = nextVarName("replace_region", status);
-
-	// HACK:
-	node = node.children[0] as ControlNode;
-
-	status.imports.add("t_region");
-	status.imports.add("t_run_control");
-	status.imports.add("t_run_branch");
-	status.imports.add("t_push_region");
-	status.imports.add("t_pop_region");
-
-	b.append("");
-	b.append(`
-	/* @replace */
-	const ${replaceRegionName} = t_region(${status.options.dev === true ? `"replace"` : ""});
-	t_run_control(${replaceRegionName}, ${replaceAnchorName}, (t_before) => {`);
-
-	buildReplaceBranch(node, status, b, replaceParentName, replaceRegionName);
-
-	b.append(`}${status.options.dev === true ? ', "replace"' : ""});`);
-	b.append("");
-}
-
-function buildReplaceBranch(
-	node: ControlNode,
-	status: BuildStatus,
-	b: Builder,
-	parentName: string,
-	regionName: string,
-) {
-	status.imports.add("t_run_branch");
-
-	b.append(`${replaceForVarNames(node.statement, status)};`);
-	b.append(`if (!t_run_branch(${regionName}, 0, -1)) return;`);
-
-	b.append(`
-		const t_new_region = t_region(${status.options.dev === true ? `"replace_branch"` : ""});
-		const t_old_region = t_push_region(t_new_region, true);
-	`);
-
-	buildFragment(node, status, b, parentName, "t_before");
-
-	status.fragmentStack.push({
-		fragment: node.fragment,
-		path: "",
-	});
-	for (let child of node.children) {
-		buildNode(child, status, b, parentName, "t_before");
-	}
-	status.fragmentStack.pop();
-
-	buildAddFragment(node, status, b, parentName, "t_before");
-
-	b.append("t_pop_region(t_old_region);");
-}

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

@@ -1,29 +0,0 @@
-import type RootNode from "../../types/nodes/RootNode";
-import Builder from "../../utils/Builder";
-import type BuildStatus from "./BuildStatus";
-import buildAddFragment from "./buildAddFragment";
-import buildFragment from "./buildFragment";
-import buildNode from "./buildNode";
-
-export default function buildRootNode(
-	node: RootNode,
-	status: BuildStatus,
-	b: Builder,
-	parentName: string,
-	anchorName: string,
-): void {
-	buildFragment(node, status, b, parentName, anchorName);
-
-	status.fragmentStack.push({
-		fragment: node.fragment,
-		path: "0:ch/",
-	});
-
-	for (let child of node.children) {
-		buildNode(child, status, b, parentName, anchorName, true);
-	}
-
-	status.fragmentStack.pop();
-
-	buildAddFragment(node, status, b, parentName, anchorName);
-}

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

@@ -1,23 +0,0 @@
-import Builder from "../../utils/Builder";
-import type BuildStatus from "./BuildStatus";
-import addPopDevBoundary from "./addPopDevBoundary";
-import addPushDevBoundary from "./addPushDevBoundary";
-import replaceForVarNames from "./replaceForVarNames";
-
-export default function buildRun(
-	functionName: string,
-	functionBody: string,
-	status: BuildStatus,
-	b: Builder,
-): void {
-	functionBody = replaceForVarNames(functionBody, status);
-
-	addPushDevBoundary("run", functionName, status, b);
-
-	status.imports.add("$run");
-	b.append("$run(() => {");
-	b.append(functionBody);
-	b.append(`}${status.options.dev === true ? `, "${functionName}"` : ""});`);
-
-	addPopDevBoundary(status, b);
-}

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

@@ -1,16 +0,0 @@
-import type ControlNode from "../../types/nodes/ControlNode";
-import Builder from "../../utils/Builder";
-import type BuildStatus from "./BuildStatus";
-import addMappedText from "./addMappedText";
-
-export default function buildScriptNode(node: ControlNode, status: BuildStatus, b: Builder): void {
-	b.append(`/* ${node.operation} */`);
-	addMappedText("", `${maybeAppend(node.statement, ";")}`, "", node.span, status, b);
-}
-
-function maybeAppend(text: string, end: string) {
-	if (!text.endsWith(end)) {
-		text += end;
-	}
-	return text;
-}