@torpor/view 0.4.15 → 0.4.17

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

@@ -1,166 +0,0 @@
-import type ControlNode from "../../types/nodes/ControlNode";
-import Builder from "../../utils/Builder";
-import isControlNode from "../../utils/isControlNode";
-import trimMatched from "../../utils/trimMatched";
-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";
-
-export default function buildAwaitNode(node: ControlNode, status: BuildStatus, b: Builder): void {
-	const anchorName = node.varName ?? "null";
-	const parentName = node.parentName!;
-	const regionName = nextVarName("await_region", status);
-	const indexName = nextVarName("await_index", status);
-	const tokenName = nextVarName("await_token", status);
-
-	// Filter non-control branches (spaces)
-	const branches = node.children.filter((n) => isControlNode(n)) as ControlNode[];
-
-	// Make sure all branches exist
-	let awaitBranch = branches.find((n) => n.operation === "@await")!;
-	if (!awaitBranch) {
-		// TODO: Error handling
-	}
-	let thenBranch = branches.find((n) => n.operation === "@then");
-	if (!thenBranch) {
-		thenBranch = {
-			type: "control",
-			operation: "@then",
-			statement: "then",
-			children: [],
-			span: { start: 0, end: 0 },
-		};
-	}
-	let catchBranch = branches.find((n) => n.operation === "@catch");
-	if (!catchBranch) {
-		catchBranch = {
-			type: "control",
-			operation: "@catch",
-			statement: "catch",
-			children: [],
-			span: { start: 0, end: 0 },
-		};
-	}
-
-	const awaiterName = trimMatched(awaitBranch.statement.substring("await".length).trim(), "(", ")");
-	const thenVar = trimMatched(thenBranch.statement.substring("then".length).trim(), "(", ")");
-	const catchVar = trimMatched(catchBranch.statement.substring("catch".length).trim(), "(", ")");
-
-	// Use an incrementing token to make sure only the last request gets handled
-	// TODO: This might have unforeseen consequences
-
-	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("/* @await */");
-
-	addPushDevBoundary("control", `@${branches[0].statement}`, status, b);
-
-	b.append(`
-		const ${regionName} = t_region(${status.options.dev === true ? `"await"` : ""});
-		let ${tokenName} = 0;
-		let ${indexName} = -1;
-		t_run_control(${regionName}, ${anchorName}, (t_before) => {`);
-
-	let index = 0;
-
-	// Build the waiting branch before anything happens
-	buildAwaitBranch(awaitBranch, status, b, parentName, regionName, indexName, index++);
-
-	b.append(`
-		${tokenName}++;
-		((t_token) => {`);
-
-	// TODO: replaceForVarNames is going to throw mapping out
-	awaitBranch.span.start += "await".length + 2;
-	addMappedText("", replaceForVarNames(awaiterName, status), "", awaitBranch.span, status, b);
-
-	// TODO: replaceForVarNames is going to throw mapping out
-	thenBranch.span.start -= 1;
-	addMappedText(
-		".then((",
-		replaceForVarNames(thenVar, status),
-		") => {",
-		thenBranch.span,
-		status,
-		b,
-	);
-
-	b.append(`if (t_token === ${tokenName}) {`);
-	buildAwaitBranch(thenBranch, status, b, parentName, regionName, indexName, index++);
-	b.append(`}
-		})`);
-
-	// TODO: replaceForVarNames is going to throw mapping out
-	catchBranch.span.start -= 1;
-	addMappedText(
-		".catch((",
-		replaceForVarNames(catchVar, status),
-		") => {",
-		catchBranch.span,
-		status,
-		b,
-	);
-
-	b.append(`if (t_token === ${tokenName}) {`);
-	buildAwaitBranch(catchBranch, status, b, parentName, regionName, indexName, index++);
-	b.append(`}
-				});
-			})(${tokenName});
-		}${status.options.dev === true ? `, "runAwait"` : ""});`);
-
-	addPopDevBoundary(status, b);
-
-	b.append("");
-}
-
-function buildAwaitBranch(
-	node: ControlNode,
-	status: BuildStatus,
-	b: Builder,
-	parentName: string,
-	regionName: string,
-	indexName: string,
-	index: number,
-) {
-	b.append(`if (!t_run_branch(${regionName}, ${indexName}, ${index})) return;`);
-
-	if (node.children.length > 0) {
-		// NOTE: for await branches, we need to push the control region again,
-		// because it will have been popped by the time the `then` or `catch`
-		// branches are hit
-		b.append(`
-			const t_new_region = t_region(${status.options.dev === true ? `"await_branch"` : ""});
-			const t_old_control_region = t_push_region(${regionName});
-			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("t_pop_region(t_old_control_region);");
-	}
-
-	b.append(`${indexName} = ${index};`);
-}

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

@@ -1,202 +0,0 @@
-import type Template from "../../../types/Template";
-import type TemplateComponent from "../../../types/TemplateComponent";
-import type BuildOptions from "../../types/BuildOptions";
-import type SourceMapping from "../../types/SourceMapping";
-import Builder from "../../utils/Builder";
-import type BuildStatus from "./BuildStatus";
-import addMappedText from "./addMappedText";
-import addPopDevBoundary from "./addPopDevBoundary";
-import addPushDevBoundary from "./addPushDevBoundary";
-import buildFragmentText from "./buildFragmentText";
-import buildNode from "./buildNode";
-
-const importsMap: Record<string, string> = {
-	$watch: 'import { $watch } from "${folder}";',
-	$cache: 'import { $cache } from "${folder}";',
-	$run: 'import { $run } from "${folder}";',
-	$mount: 'import { $mount } from "${folder}";',
-	$unwrap: 'import { $unwrap } from "${folder}";',
-	$peek: 'import { $peek } from "${folder}";',
-	$batch: 'import { $batch } from "${folder}";',
-	t_region: 'import { t_region } from "${folder}";',
-	t_push_region: 'import { t_push_region } from "${folder}";',
-	t_pop_region: 'import { t_pop_region } from "${folder}";',
-	t_run_control: 'import { t_run_control } from "${folder}";',
-	t_run_branch: 'import { t_run_branch } from "${folder}";',
-	t_list_item: 'import { t_list_item } from "${folder}";',
-	t_run_list: 'import { t_run_list } from "${folder}";',
-	t_add_fragment: 'import { t_add_fragment } from "${folder}";',
-	t_apply_props: 'import { t_apply_props } from "${folder}";',
-	t_class: 'import { t_class } from "${folder}";',
-	t_style: 'import { t_style } from "${folder}";',
-	t_attribute: 'import { t_attribute } from "${folder}";',
-	t_dynamic: 'import { t_dynamic } from "${folder}";',
-	t_fmt: 'import { t_fmt } from "${folder}";',
-	t_fragment: 'import { t_fragment } from "${folder}";',
-	t_event: 'import { t_event } from "${folder}";',
-	t_animate: 'import { t_animate } from "${folder}";',
-	t_root: 'import { t_root } from "${folder}";',
-	t_anchor: 'import { t_anchor } from "${folder}";',
-	t_child: 'import { t_child } from "${folder}";',
-	t_next: 'import { t_next } from "${folder}";',
-	t_skip: 'import { t_skip } from "${folder}";',
-	t_frg: 'import { t_frg } from "${folder}";',
-	t_elm: 'import { t_elm } from "${folder}";',
-	t_txt: 'import { t_txt } from "${folder}";',
-	t_cmt: 'import { t_cmt } from "${folder}";',
-	t_print: 'import { t_print } from "${folder}";',
-	ListItem: 'import { type ListItem } from "${folder}";',
-	SlotRender: 'import { type SlotRender } from "${folder}";',
-	// HACK: this one's a bit different
-	devContext: 'import { devContext } from "${folder}/dev";',
-	t_push_dev_bound: 'import { t_push_dev_bound } from "${folder}/dev";',
-	t_pop_dev_bound: 'import { t_pop_dev_bound } from "${folder}/dev";',
-};
-
-export default function buildCode(
-	template: Template,
-	map: SourceMapping[],
-	options?: BuildOptions,
-): string {
-	let b = new Builder(options?.mapped);
-
-	// Gather imports as we go so they can be placed at the top
-	let imports = new Set<string>();
-	imports.add("SlotRender");
-
-	// Build the component
-	buildTemplate(template, map, imports, b, options);
-
-	let startSize = b.toString().length;
-
-	// Add the gathered imports in alphabetical order
-	if (imports.size) {
-		b.prepend("");
-		for (let imp of Array.from(imports).sort().reverse()) {
-			let importStatement = importsMap[imp] ?? imp;
-			let folder = options?.renderFolder ?? "@torpor/view";
-			importStatement = importStatement.replace("${folder}", folder);
-			b.prepend(importStatement);
-		}
-	}
-
-	if (options?.mapped) {
-		let endSize = b.toString().length;
-		let diff = endSize - startSize + 1;
-		for (let m of map) {
-			m.compiled.start += diff;
-			m.compiled.end += diff;
-		}
-	}
-
-	return b.toString();
-}
-
-function buildTemplate(
-	template: Template,
-	map: SourceMapping[],
-	imports: Set<string>,
-	b: Builder,
-	options?: BuildOptions,
-) {
-	// TODO: Do this while looping chunks
-	let script = template.script.map((s) => s.script).join("\n");
-
-	// Add default imports
-	if (/\$watch\b/.test(script)) imports.add("$watch");
-	if (/\$cache\b/.test(script)) imports.add("$cache");
-	if (/\$run\b/.test(script)) imports.add("$run");
-	if (/\$mount\b/.test(script)) imports.add("$mount");
-	if (/\$unwrap\b/.test(script)) imports.add("$unwrap");
-	if (/\$peek\b/.test(script)) imports.add("$peek");
-	if (/\$batch\b/.test(script)) imports.add("$batch");
-
-	let currentIndex = 0;
-	let current = template.components[0];
-	let status: BuildStatus = makeStatus(imports, map, current, options);
-	let first = true;
-
-	for (let chunk of template.script) {
-		if (chunk.script === "/* @params */") {
-			// Reset the status for each new function body
-			if (!first) {
-				status = makeStatus(imports, map, current, options);
-			}
-			first = false;
-
-			// TODO: Support other params, like the user setting $context
-			b.append(`
-					${current.markup ? "$parent" : "_$parent"}: ParentNode,
-					${current.markup ? "$anchor" : "_$anchor"}: Node | null,`);
-			if (current.params !== undefined) {
-				addMappedText("", current.params, ",", chunk.span, status, b);
-			} else {
-				b.append(
-					`${current.props?.length ? "$props: Record<PropertyKey, any>" : "// @ts-ignore\n$props?: Record<PropertyKey, any>"},`,
-				);
-			}
-			b.append(`
-					${current.contextProps?.length ? "$context" : "// @ts-ignore\n$context"}?: Record<PropertyKey, any>,
-					${current.slotProps?.length ? "$slots" : "// @ts-ignore\n$slots"}?: Record<string, SlotRender>`);
-		} else if (chunk.script === ") /* @return_type */ {") {
-			b.append("): void {");
-		} else if (chunk.script === "/* @start */") {
-			// Add the component to devContext for display in DevTools
-			addPushDevBoundary("component", current.name || "Anon Component", status, b);
-
-			// Redefine $context so that any newly added properties will only be passed to children
-			if (current.contextProps?.length) {
-				b.append(`$context = Object.assign({}, $context);`);
-			}
-		} else if (chunk.script === "/* @render */") {
-			if (current.markup) {
-				// Add the interface
-				b.append("");
-				b.append("/* User interface */");
-				buildFragmentText(current.markup, status, b);
-				b.append("");
-				buildNode(current.markup, status, b, "$parent", "$anchor", true);
-			}
-		} else if (chunk.script === "/* @head */") {
-			if (current.head) {
-				// Add the head tags
-				b.append("");
-				b.append("/* Head */");
-				status.inHead = true;
-				buildNode(current.head, status, b, "$parent", "$anchor", true);
-				status.inHead = false;
-			}
-		} else if (chunk.script === "/* @style */") {
-			// No styles in the client
-		} else if (chunk.script === "/* @end */") {
-			addPopDevBoundary(status, b);
-			currentIndex += 1;
-			current = template.components[currentIndex];
-		} else {
-			addMappedText("", chunk.script, "", chunk.span, status, b);
-		}
-	}
-}
-
-function makeStatus(
-	imports: Set<string>,
-	map: SourceMapping[],
-	current?: TemplateComponent,
-	options?: BuildOptions,
-): BuildStatus {
-	return {
-		imports,
-		props: current?.props ?? [],
-		contextProps: current?.contextProps ?? [],
-		slotProps: current?.slotProps ?? [],
-		styleHash: current?.style?.hash ?? "",
-		map,
-		varNames: {},
-		fragmentStack: [],
-		forVarNames: [],
-		ns: false,
-		preserveWhitespace: false,
-		inHead: false,
-		options: options ?? {},
-	};
-}

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

@@ -1,266 +0,0 @@
-import type SourceSpan from "../../types/SourceSpan";
-import type ElementNode from "../../types/nodes/ElementNode";
-import Builder from "../../utils/Builder";
-import isSpecialNode from "../../utils/isSpecialNode";
-import trimQuotes from "../../utils/trimQuotes";
-import nextVarName from "../utils/nextVarName";
-import type BuildStatus from "./BuildStatus";
-import addMappedText from "./addMappedText";
-import addMappedTextWithOffsets from "./addMappedTextWithOffsets";
-import buildAddFragment from "./buildAddFragment";
-import buildFragment from "./buildFragment";
-import buildNode from "./buildNode";
-import buildRun from "./buildRun";
-import getAttributeOffsets from "./getAttributeOffsets";
-import replaceForVarNames from "./replaceForVarNames";
-
-export default function buildComponentNode(
-	node: ElementNode,
-	status: BuildStatus,
-	b: Builder,
-	root = false,
-): void {
-	b.append("");
-	b.append("/* @component */");
-
-	// TODO: map params to props
-
-	// Props
-	const componentHasProps = node.attributes.length || root;
-	const propsName = componentHasProps ? nextVarName("props", status) : "undefined";
-	if (componentHasProps) {
-		// NOTE: The $props object is wrapped in a proxy so that components can
-		// be updated if they refer to a $props.property in e.g. an element's
-		// attribute
-		// TODO: default props etc
-		status.imports.add("$watch");
-
-		// Gather props, runs and binding runs, and set them all at once
-		let props: {
-			name: string;
-			// Text to be ignored in the mapping e.g. `t_class(`
-			preText: string;
-			value: string;
-			// Text to be ignored in the mapping e.g. `)`
-			postText: string;
-			spans: SourceSpan[];
-			offsets: number[];
-			lengths: number[];
-		}[] = [];
-		let runs: string[] = [];
-		let bindingRuns: string[] = [];
-
-		for (let { name, value, reactive, fullyReactive, span } of node.attributes) {
-			if (name === "self" && node.tagName === "@component") {
-				// Ignore this special attribute
-			} else if (value != null && fullyReactive) {
-				if (name.startsWith("&")) {
-					// It's a bound property
-					// Add two $runs -- one to update the props, and one to update the value
-					// The component author will need to make sure $props.x is updated
-					// TODO: Maybe allow adding a Bindable<T> type to the $props interface??
-					// e.g. Component($props: { text: Bindable<string> })
-					name = name.substring(1);
-					props.push({
-						name,
-						preText: "",
-						value,
-						postText: "",
-						spans: [span],
-						offsets: [],
-						lengths: [],
-					});
-					runs.push(`${propsName}["${name}"] = ${value};`);
-					bindingRuns.push(`${value} = ${propsName}["${name}"];`);
-				} else if (name === "class") {
-					status.imports.add("t_class");
-					const params = [value];
-					if (node.scopeStyles) {
-						params.push(`"torp-${status.styleHash}"`);
-					}
-					value = params.join(", ");
-					props.push({
-						name,
-						preText: "t_class(",
-						value,
-						postText: ")",
-						spans: [span],
-						offsets: [],
-						lengths: [],
-					});
-					runs.push(`${propsName}["${name}"] = t_class(${value});`);
-				} else if (name === "style") {
-					status.imports.add("t_style");
-					props.push({
-						name,
-						preText: "t_style(",
-						value,
-						postText: ")",
-						spans: [span],
-						offsets: [],
-						lengths: [],
-					});
-					runs.push(`${propsName}["${name}"] = t_style(${value});`);
-				} else {
-					props.push({
-						name,
-						preText: "",
-						value,
-						postText: "",
-						spans: [span],
-						offsets: [],
-						lengths: [],
-					});
-					runs.push(`${propsName}["${name}"] = ${value};`);
-				}
-			} else if (value != null && reactive) {
-				const { newValue, spans, offsets, lengths } = getAttributeOffsets(value, span);
-				value = newValue;
-				if (name === "class") {
-					status.imports.add("t_class");
-					const params = [value];
-					if (node.scopeStyles) {
-						params.push(`"torp-${status.styleHash}"`);
-					}
-					value = params.join(", ");
-					props.push({ name, preText: "t_class(", value, postText: ")", spans, offsets, lengths });
-					runs.push(`${propsName}["${name}"] = t_class(${value});`);
-				} else if (name === "style") {
-					status.imports.add("t_style");
-					props.push({ name, preText: "t_style(", value, postText: ")", spans, offsets, lengths });
-					runs.push(`${propsName}["${name}"] = t_style(${value});`);
-				} else {
-					props.push({ name, preText: "", value, postText: "", spans, offsets, lengths });
-					runs.push(`${propsName}["${name}"] = ${value};`);
-				}
-			} else if (value != null) {
-				if (name === "class" && node.scopeStyles) {
-					value = `"${trimQuotes(value)} torp-${status.styleHash}"`;
-				}
-				props.push({
-					name,
-					preText: "",
-					value,
-					postText: "",
-					spans: [span],
-					offsets: [],
-					lengths: [],
-				});
-			} else {
-				props.push({
-					name,
-					preText: "",
-					value: "true",
-					postText: "",
-					spans: [span],
-					offsets: [],
-					lengths: [],
-				});
-			}
-		}
-
-		// Set the props, runs and binding runs that we gathered
-		b.append(`const ${propsName} = $watch({`);
-		for (let p of props) {
-			let value = replaceForVarNames(p.value, status);
-			if (p.spans.length === 1) {
-				addMappedText(`${p.name}: ` + p.preText, value, p.postText + ",", p.spans[0], status, b);
-			} else {
-				addMappedTextWithOffsets(
-					`${p.name}: ` + p.preText,
-					value,
-					p.postText + ",",
-					p.spans,
-					p.offsets,
-					p.lengths,
-					status,
-					b,
-				);
-			}
-		}
-		b.append("});");
-		// TODO: Map these things:
-		if (runs.length) {
-			buildRun("setProps", replaceForVarNames(runs.join("\n"), status), status, b);
-		}
-		if (bindingRuns.length) {
-			buildRun("setBindings", replaceForVarNames(bindingRuns.join("\n"), status), status, b);
-		}
-
-		// PERF: Does this have much of an impact??
-		if (root) {
-			status.imports.add("$run");
-			b.append(`
-			if ($props) {
-				const propNames = [${status.props.map((p) => `'${p}'`).join(", ")}];
-				for (let name of Object.keys($props)) {
-					if (!name.startsWith("$") && !propNames.includes(name)) {
-						$run(() => ${propsName}[name] = $props[name]);
-					}
-				}
-			}`);
-		}
-	}
-
-	// Slots
-	const componentHasSlots = node.children.length;
-	const slotsName = componentHasSlots ? nextVarName("slots", status) : "undefined";
-	if (componentHasSlots) {
-		b.append(`const ${slotsName}: Record<string, SlotRender> = {};`);
-		for (let slot of node.children) {
-			if (isSpecialNode(slot) && slot.tagName === "fill") {
-				const nameAttribute = slot.attributes.find((a) => a.name === "name");
-				const slotName = nameAttribute?.value ? trimQuotes(nameAttribute.value) : "_";
-				const slotParams = [
-					"$sparent: ParentNode",
-					"$sanchor: Node | null",
-					slot.hasSlotProps
-						? "$sprops: Record<PropertyKey, any>"
-						: "// @ts-ignore\n$sprops?: Record<PropertyKey, any>",
-					"// @ts-ignore\n$context?: Record<PropertyKey, any>",
-				];
-				b.append(
-					`${slot.hasSlotProps ? "// @ts-ignore\n" : ""}${slotsName}["${slotName}"] = (\n${slotParams.join(",\n")}\n) => {`,
-				);
-
-				buildFragment(slot, status, b, "$sparent", "$sanchor");
-
-				status.fragmentStack.push({
-					fragment: slot.fragment,
-					path: "",
-				});
-				for (let child of slot.children) {
-					buildNode(child, status, b, "$sparent", "$sanchor");
-				}
-				status.fragmentStack.pop();
-
-				buildAddFragment(slot, status, b, "$sparent", "$sanchor");
-
-				b.append(`}`);
-			}
-		}
-	}
-
-	// Render the component
-	const compParentName = node.parentName;
-	const compAnchorName = node.varName;
-	let renderParams = `${compParentName}, ${compAnchorName}, ${propsName}, $context`;
-	if (slotsName !== "undefined") {
-		renderParams += `, ${slotsName}`;
-	}
-
-	let componentName = node.tagName;
-	if (componentName === "@component") {
-		let selfAttribute = node.attributes.find((a) => a.name === "self");
-		if (selfAttribute && selfAttribute.value && selfAttribute.fullyReactive) {
-			componentName = selfAttribute.value;
-		}
-	}
-
-	// TODO: Map the params properly, either by checking for things ourselves,
-	// or better checking for $props being undefined in components
-	//addMappedText("", componentName, `(${renderParams});`, node.span, status, b);
-	addMappedText("", `${componentName}(${renderParams})`, ";", node.span, status, b);
-
-	b.append("");
-}