@torpor/view 0.4.15 → 0.4.17

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

@@ -1,86 +0,0 @@
-import type ControlNode from "../../types/nodes/ControlNode";
-import Builder from "../../utils/Builder";
-import type BuildStatus from "./BuildStatus";
-import buildAwaitNode from "./buildAwaitNode";
-import buildForNode from "./buildForNode";
-import buildHtmlNode from "./buildHtmlNode";
-import buildIfNode from "./buildIfNode";
-import buildReplaceNode from "./buildReplaceNode";
-import buildScriptNode from "./buildScriptNode";
-import buildSwitchNode from "./buildSwitchNode";
-
-export default function buildControlNode(node: ControlNode, status: BuildStatus, b: Builder): void {
-	switch (node.operation) {
-		case "@if group": {
-			buildIfNode(node, status, b);
-			break;
-		}
-		case "@if":
-		case "@else if":
-		case "@else": {
-			// These get handled with @if group, above
-			break;
-		}
-		case "@switch group": {
-			buildSwitchNode(node, status, b);
-			break;
-		}
-		case "@case":
-		case "@default": {
-			// These get handled with @switch, above
-			break;
-		}
-		case "@for group": {
-			buildForNode(node, status, b);
-			break;
-		}
-		case "@for":
-		case "@key": {
-			// These get handled with @for, above
-			break;
-		}
-		case "@await group": {
-			buildAwaitNode(node, status, b);
-			break;
-		}
-		case "@await":
-		case "@then":
-		case "@catch": {
-			// These get handled with @await group, above
-			break;
-		}
-		case "@replace group": {
-			buildReplaceNode(node, status, b);
-			break;
-		}
-		case "@replace": {
-			// This gets handled with @replace group, above
-			break;
-		}
-		case "@html group": {
-			buildHtmlNode(node, status, b);
-			break;
-		}
-		case "@html": {
-			// This gets handled with @html group, above
-			break;
-		}
-		case "@const":
-		case "@console":
-		case "@debugger": {
-			buildScriptNode(node, status, b);
-			break;
-		}
-		case "@function":
-		case "@async function": {
-			b.append("");
-			buildScriptNode(node, status, b);
-			b.append("");
-			break;
-		}
-		default: {
-			// eslint-disable-next-line restrict-template-expressions
-			throw new Error(`Invalid operation: ${node.operation}`);
-		}
-	}
-}

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

@@ -1,431 +0,0 @@
-import type SourceSpan from "../../types/SourceSpan";
-import type ElementNode from "../../types/nodes/ElementNode";
-import type TextNode from "../../types/nodes/TextNode";
-import Builder from "../../utils/Builder";
-import trimEnd from "../../utils/trimEnd";
-import trimQuotes from "../../utils/trimQuotes";
-import nextVarName from "../utils/nextVarName";
-import type BuildStatus from "./BuildStatus";
-import addMappedText from "./addMappedText";
-import buildAddFragment from "./buildAddFragment";
-import buildFragment from "./buildFragment";
-import buildMount from "./buildMount";
-import buildNode from "./buildNode";
-import buildRun from "./buildRun";
-import getAttributeOffsets from "./getAttributeOffsets";
-import replaceForVarNames from "./replaceForVarNames";
-import stashRun from "./stashRun";
-import stashRunWithOffsets from "./stashRunWithOffsets";
-
-export default function buildElementNode(
-	node: ElementNode,
-	status: BuildStatus,
-	b: Builder,
-	parentName: string,
-	root = false,
-): void {
-	if (status.inHead) {
-		if (node.tagName === "title") {
-			buildTitleNode(node, status, b);
-		} else {
-			buildHeadNode(node, status, b);
-		}
-		return;
-	}
-
-	const svgElement = node.tagName === "svg";
-	const oldns = status.ns;
-	if (svgElement) {
-		status.ns = true;
-	}
-
-	const varName = node.varName;
-	if (varName) {
-		if (node.tagName === "@element") {
-			buildDynamicElementNode(node, status, b);
-		}
-
-		// PERF: Does this have much of an impact??
-		if (root) {
-			//status.imports.add("t_apply_props");
-			//// TODO: I think we know what the props are at this stage, so we could be more direct?
-			//b.append("");
-			//b.append(
-			//	`t_apply_props(${varName}, $props, [${status.props.map((p) => `'${p}'`).join(", ")}]);`,
-			//);
-		}
-
-		buildElementAttributes(node, varName, status, b);
-	}
-
-	const oldPreserveWhitespace = status.preserveWhitespace;
-	status.preserveWhitespace = node.tagName === "code" || node.tagName === "pre";
-	for (let child of node.children) {
-		buildNode(child, status, b, parentName, "null");
-	}
-	status.preserveWhitespace = oldPreserveWhitespace;
-
-	if (svgElement) {
-		status.ns = oldns;
-	}
-}
-
-function buildDynamicElementNode(node: ElementNode, status: BuildStatus, b: Builder) {
-	let selfAttribute = node.attributes.find((a) => a.name === "self");
-	if (selfAttribute && selfAttribute.value && selfAttribute.fullyReactive) {
-		status.imports.add("$run");
-		status.imports.add("t_dynamic");
-		let selfValue = selfAttribute.value;
-
-		b.append("$run(() => {");
-		b.append(`${node.varName} = t_dynamic(${node.varName}, ${selfValue});`);
-
-		let parentName = node.varName;
-
-		buildFragment(node, status, b, parentName!, "null");
-
-		status.fragmentStack.push({
-			fragment: node.fragment,
-			path: "",
-		});
-		for (let child of node.children) {
-			buildNode(child, status, b, parentName!, "null");
-		}
-		status.fragmentStack.pop();
-
-		buildAddFragment(node, status, b, parentName!, "null");
-
-		b.append(`}${status.options.dev === true ? `, "setDynamic"` : ""});`);
-	}
-}
-
-function buildTitleNode(node: ElementNode, status: BuildStatus, b: Builder) {
-	let content = (node.children[0] as TextNode).content || "";
-
-	// Replace all spaces with a single space, both to save space and to remove
-	// newlines from generated JS strings
-	content = content.replace(/\s+/g, " ");
-
-	// TODO: Should be fancier about this in parse -- e.g. ignore braces in
-	// quotes, unclosed, etc
-	let reactiveStarted = false;
-	let reactiveCount = 0;
-	for (let i = 0; i < content.length; i++) {
-		if (content[i] === "{") {
-			reactiveStarted = true;
-		} else if (content[i] === "}") {
-			if (reactiveStarted) {
-				reactiveCount += 1;
-				reactiveStarted = false;
-			}
-		}
-	}
-
-	if (reactiveCount) {
-		status.imports.add("t_fmt");
-		if (reactiveCount === 1 && content.startsWith("{") && content.endsWith("}")) {
-			content = `t_fmt(${content.substring(1, content.length - 1)})`;
-		} else {
-			content = `\`${content.replaceAll("{", "${t_fmt(").replaceAll("}", ")}")}\``;
-		}
-	} else {
-		content = `"${content}"`;
-	}
-
-	status.imports.add("$run");
-	b.append("$run(() => {");
-	b.append(`
-			const t_old_title = document.title;
-			document.title = ${content};
-			return () => document.title = t_old_title;
-		}${status.options.dev === true ? `, "runTitle"` : ""});`);
-}
-
-function buildHeadNode(node: ElementNode, status: BuildStatus, b: Builder) {
-	status.imports.add("$run");
-	// TODO: dedupe e.g. <meta name="x"> or on special key
-	b.append("$run(() => {");
-	b.append(`
-			const t_head_el = document.createElement("${node.tagName}");
-			document.getElementsByTagName("head")[0].appendChild(t_head_el);`);
-	for (let { name, value, span } of node.attributes) {
-		if (value != null) {
-			status.imports.add("t_attribute");
-			value = replaceForVarNames(value, status);
-			addMappedText(`t_attribute(t_head_el, "${name}", `, value, ");", span, status, b);
-		}
-	}
-	b.append(`}${status.options.dev === true ? `, "runHead"` : ""});`);
-}
-
-function buildElementAttributes(
-	node: ElementNode,
-	varName: string,
-	status: BuildStatus,
-	b: Builder,
-) {
-	let fragment = status.fragmentStack.at(-1)?.fragment;
-	if (!fragment) throw new Error("No fragment on stack");
-
-	// TODO: Add an error if any reactive attributes are used non-reactively
-
-	// Do &ref first, just in case any other attributes depend on it being set
-	// e.g. if you have a `style` attribute that depends on the element's size
-	const refAttribute = node.attributes.find((a) => a.name === "&ref");
-	if (refAttribute) {
-		let { value, fullyReactive } = refAttribute;
-		if (value != null && fullyReactive) {
-			// Bind the DOM element to a user-defined variable
-			b.append(`${value} = ${varName};`);
-		}
-	}
-
-	for (let { name, value, reactive, fullyReactive, span } of node.attributes) {
-		if (name === "self" && node.tagName === "@element") {
-			// Ignore this special attribute
-		} else if (name === "&ref") {
-			// Ignore this one, it should have been done already, above
-		} else if (value != null && fullyReactive) {
-			if (name === "&group") {
-				buildBindGroupAttribute(node, varName, value, status, b);
-			} else if (name === "&value" || name === "&checked") {
-				buildBindAttribute(node, varName, name, value, status, b);
-			} else if (name === "onmount") {
-				// The onmount event is faked by us by creating a $mount. This
-				// also means that you can have unmount functionality by
-				// returning a cleanup function
-				buildMount("elMount", `return (${trimEnd(value.trim(), ";")})(${varName});`, status, b);
-			} else if (name.startsWith("on")) {
-				buildEventAttribute(varName, name, value, span, status, b);
-			} else if (name.startsWith("transition")) {
-				buildTransitionAttribute(node, varName, name, value, status, b);
-			} else if (name === "class") {
-				status.imports.add("t_class");
-				const params = [value];
-				if (node.scopeStyles) {
-					params.push(`"torp-${status.styleHash}"`);
-				}
-				// SVGs have a different className
-				const propName = status.ns ? "className.baseVal" : "className";
-				stashRun(
-					fragment,
-					`${status.ns ? "// @ts-ignore\n" : ""}${varName}.${propName} = t_class(`,
-					params.join(", "),
-					");",
-					span,
-					status,
-				);
-			} else if (name === "style") {
-				status.imports.add("t_style");
-				stashRun(fragment, `${varName}.setAttribute("style", t_style(`, value, "));", span, status);
-			} else if (name.includes("-")) {
-				// Handle data-, aria- etc
-				status.imports.add("t_attribute");
-				stashRun(fragment, `t_attribute(${varName}, "${name}", `, value, ");", span, status);
-				// NOTE: dataset seems to be a tiny bit slower?
-				//const propName = name.substring(name.indexOf("-"));
-				//buildRun("setDataAttribute", `${varName}.dataset.${propName} = ${value};`, status, b);
-			} else {
-				status.imports.add("t_attribute");
-				stashRun(fragment, `t_attribute(${varName}, "${name}", `, value, ");", span, status);
-			}
-		} 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}"`);
-				}
-				// SVGs have a different className
-				const propName = status.ns ? "className.baseVal" : "className";
-				stashRunWithOffsets(
-					fragment,
-					`${status.ns ? "// @ts-ignore\n" : ""}${varName}.${propName} = t_class(`,
-					params.join(", "),
-					");",
-					spans,
-					offsets,
-					lengths,
-					status,
-				);
-			} else if (name === "style") {
-				status.imports.add("t_style");
-				stashRunWithOffsets(
-					fragment,
-					`${varName}.setAttribute("style", t_style(`,
-					value,
-					"));",
-					spans,
-					offsets,
-					lengths,
-					status,
-				);
-			} else if (name.includes("-")) {
-				// Handle data-, aria- etc
-				status.imports.add("t_attribute");
-				stashRunWithOffsets(
-					fragment,
-					`t_attribute(${varName}, "${name}", `,
-					value,
-					");",
-					spans,
-					offsets,
-					lengths,
-					status,
-				);
-				// NOTE: dataset seems to be a tiny bit slower?
-				//const propName = name.substring(name.indexOf("-"));
-				//buildRun("setDataAttribute", `${varName}.dataset.${propName} = ${value};`, status, b);
-			} else {
-				status.imports.add("t_attribute");
-				stashRunWithOffsets(
-					fragment,
-					`t_attribute(${varName}, "${name}", `,
-					value,
-					");",
-					spans,
-					offsets,
-					lengths,
-					status,
-				);
-			}
-		}
-	}
-}
-
-function buildBindGroupAttribute(
-	node: ElementNode,
-	varName: string,
-	value: string,
-	status: BuildStatus,
-	b: Builder,
-) {
-	value = replaceForVarNames(value, status);
-
-	// Automatically add an event to bind the value
-	// TODO: Only tested this with radio buttons
-	let eventName = "change";
-	let inputValue = node.attributes.find((a) => a.name === "value")?.value;
-	let set = `${value} == ${inputValue}`;
-	let propName = "checked";
-	const setAttribute = `${varName}.${propName} = ${set}`;
-	buildRun("setBinding", `${setAttribute};`, status, b);
-	// TODO: Add a parseInput method that handles NaN etc
-	status.imports.add("t_event");
-	b.append(`t_event(${varName}, "${eventName}", (e) => {
-			if (e.target.${propName}) ${value} = ${inputValue};
-		});`);
-}
-
-function buildBindAttribute(
-	node: ElementNode,
-	varName: string,
-	name: string,
-	value: string,
-	status: BuildStatus,
-	b: Builder,
-) {
-	value = replaceForVarNames(value, status);
-
-	// Automatically add an event to bind the value
-	// TODO: Need to check the element to find out what type of event to add
-	let eventName = "input";
-	let defaultValue = '""';
-	let inputValue = "e.target.value";
-	if (node.tagName === "input") {
-		let typeAttribute = node.attributes.find((a) => a.name === "type");
-		if (typeAttribute && typeAttribute.value) {
-			switch (trimQuotes(typeAttribute.value)) {
-				case "number": {
-					defaultValue = "0";
-					inputValue = "Number(e.target.value)";
-					break;
-				}
-				case "checkbox": {
-					defaultValue = "false";
-					inputValue = "e.target.checked";
-					break;
-				}
-				case "radio": {
-					eventName = "change";
-					inputValue = "e.target.value";
-					break;
-				}
-			}
-		}
-	} else if (node.tagName === "select") {
-		eventName = "change";
-	}
-	let set = `${value} || ${defaultValue}`;
-	const propName = name.substring(1);
-	const setAttribute = `${varName}.${propName} = ${set}`;
-	buildRun("setBinding", `${setAttribute};`, status, b);
-	// TODO: Add a parseInput method that handles NaN etc
-	status.imports.add("t_event");
-	b.append(`t_event(${varName}, "${eventName}", (e) => ${value} = ${inputValue});`);
-}
-
-function buildEventAttribute(
-	varName: string,
-	name: string,
-	value: string,
-	span: SourceSpan,
-	status: BuildStatus,
-	b: Builder,
-) {
-	value = replaceForVarNames(value, status);
-
-	// Add an event listener, after the fragment has been added
-	const eventName = name.substring(2);
-	status.imports.add("t_event");
-	addMappedText(`t_event(${varName}, "${eventName}", `, value, `);`, span, status, b);
-}
-
-function buildTransitionAttribute(
-	node: ElementNode,
-	varName: string,
-	name: string,
-	value: string,
-	status: BuildStatus,
-	b: Builder,
-) {
-	value = replaceForVarNames(value, status);
-
-	status.imports.add("t_animate");
-
-	// Add an in and out transition, after the fragment has been added
-	// TODO: Separate these -- you should be able to have multiple,
-	// unrelated entry and exit transitions?
-	let entryVarName = nextVarName("trans_in", status);
-	let exitVarName = nextVarName("trans_out", status);
-
-	if (name === "transition") {
-		b.append(`const ${entryVarName} = (${value})(${varName});`);
-		b.append(`const ${exitVarName} = ${entryVarName};`);
-		b.append(`t_animate(${varName}, ${entryVarName}, ${exitVarName});`);
-	} else if (name === "transition-in") {
-		let outAttribute = node.attributes.find((a) => a.name === "transition-out");
-		if (outAttribute && outAttribute.value && outAttribute.fullyReactive) {
-			let outValue = outAttribute.value;
-			b.append(`const ${entryVarName} = (${value})(${varName});`);
-			b.append(`const ${exitVarName} = (${outValue})(${varName});`);
-			b.append(`t_animate(${varName}, ${entryVarName}, ${exitVarName});`);
-		} else {
-			b.append(`const ${entryVarName} = (${value})(${varName});`);
-			b.append(`t_animate(${varName}, ${entryVarName});`);
-		}
-	} else if (name === "transition-out") {
-		let inAttribute = node.attributes.find((a) => a.name === "transition-in");
-		if (inAttribute) {
-			// This has already been handled with transition-in, above
-			return;
-		} else {
-			b.append(`const ${exitVarName} = (${value})(${varName});`);
-			b.append(`t_animate(${varName}, null, ${entryVarName});`);
-		}
-	} else {
-		// TODO: Add an error
-	}
-}

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

@@ -1,180 +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";
-
-const forLoopRegex = /for\s*\((.+?);.*?;.*?\)/;
-const forLoopVarsRegex = /(?:let\s+|var\s+){0,1}([^\s,;+=]+)(?:\s*=\s*[^,;]+){0,1}/g;
-const forOfRegex = /for\s*\(\s*(?:let\s*|var\s*){0,1}(.+?)\s+(?:of|in).*?\)/;
-
-export default function buildForNode(node: ControlNode, status: BuildStatus, b: Builder): void {
-	const parentName = node.parentName!;
-	const anchorName = node.varName ?? "null";
-
-	// HACK:
-	node = node.children[0] as ControlNode;
-
-	// HACK: Need to wrangle the declaration(s) out of the for loop and put them in data
-	// TODO: Handle destructuring, quotes, comments etc
-	const forVarNames: string[] = [];
-	const forLoopMatch = node.statement.match(forLoopRegex);
-	if (forLoopMatch) {
-		const forVarMatches = forLoopMatch[1].matchAll(forLoopVarsRegex);
-		for (let match of forVarMatches) {
-			forVarNames.push(match[1]);
-		}
-	} else {
-		const forOfMatch = node.statement.match(forOfRegex);
-		if (forOfMatch) {
-			const match = forOfMatch[1];
-			if (
-				(match.startsWith("{") && match.endsWith("}")) ||
-				(match.startsWith("[") && match.endsWith("]"))
-			) {
-				forVarNames.push(
-					...trimMatched(trimMatched(match, "{", "}"), "[", "]")
-						.split(",")
-						.map((m) => m.trim()),
-				);
-			} else {
-				forVarNames.push(match);
-			}
-		}
-	}
-
-	const regionName = nextVarName("for_region", status);
-	const listItemsName = nextVarName("new_items", status);
-	const previousItemName = nextVarName("previous_item", status);
-	const nextItemName = nextVarName("next_item", status);
-	const newItemName = nextVarName("new_item", status);
-	const itemName = nextVarName("item", status);
-	const beforeName = nextVarName("before", status);
-
-	// Get the key node if it's been set
-	let keyStatement = "";
-	const key = node.children.find(
-		(n) => n.type === "control" && (n as ControlNode).operation === "@key",
-	) as ControlNode;
-	if (key !== undefined) {
-		let matches = key.statement.match(/^(\s*@*key\s*=\s*)(.+?)\s*;*\s*$/);
-		if (matches) {
-			key.span.start += matches[1].length;
-			keyStatement = matches[2];
-		}
-	}
-
-	status.imports.add("t_region");
-	status.imports.add("t_run_list");
-	status.imports.add("t_list_item");
-	status.imports.add("ListItem");
-
-	b.append("");
-	b.append("/* @for */");
-	addPushDevBoundary("control", `@${node.statement}`, status, b);
-	b.append(`
-		let ${regionName} = t_region(${status.options.dev === true ? `"for"` : ""});
-		t_run_list(
-		${regionName},
-		${parentName},
-		${anchorName},
-		${status.options.dev === true ? "function createNewItems() {" : "() => {"}
-			let ${listItemsName}: ListItem[] = [];
-			let ${previousItemName} = ${regionName};
-			let ${nextItemName} = ${regionName}.nextRegion;`);
-
-	// TODO: replaceForVarNames is going to throw mapping out
-	addMappedText("", `${replaceForVarNames(node.statement, status)}`, " {", node.span, status, b);
-
-	b.append(`let ${newItemName} = t_list_item(`);
-	// TODO: Should map these
-	b.append(`{ ${forVarNames.join(", ")} },`);
-	if (key !== undefined) {
-		addMappedText("", `${keyStatement || "undefined"}`, ",", key.span, status, b);
-	}
-	if (status.options.dev === true) {
-		b.append(`"for item"`);
-	}
-	b.append(");");
-	b.append(`
-			${newItemName}.previousRegion = ${previousItemName};
-			${previousItemName}.nextRegion = ${newItemName};
-			${previousItemName} = ${newItemName};
-			${listItemsName}.push(${newItemName});
-		}
-		${regionName}.nextRegion = ${nextItemName};
-		return ${listItemsName};
-	},
-	${status.options.dev === true ? `function createListItem(${itemName}, ${beforeName}) {` : `(${itemName}, ${beforeName}) => {`}`);
-
-	let oldForVarNames = status.forVarNames;
-	status.forVarNames = [
-		...status.forVarNames,
-		...forVarNames.map((v) => [v, `${itemName}.data.${v}`]),
-	];
-	buildForItem(node, status, b, parentName, beforeName, itemName);
-	status.forVarNames = oldForVarNames;
-
-	b.append(`},
-	${status.options.dev === true ? "function updateListItem(t_old_item, t_new_item) {" : "(t_old_item, t_new_item) => {"}`);
-	for (let varName of forVarNames) {
-		b.append(`t_old_item.data.${varName} = t_new_item.data.${varName};`);
-	}
-	b.append(`}
-		);`);
-
-	addPopDevBoundary(status, b);
-
-	b.append("");
-}
-
-function buildForItem(
-	node: ControlNode,
-	status: BuildStatus,
-	b: Builder,
-	parentName: string,
-	beforeName: string,
-	itemName: string,
-) {
-	const oldRegionName = nextVarName("old_region", status);
-
-	status.imports.add("t_push_region");
-	b.append(`let ${oldRegionName} = t_push_region(${itemName});`);
-
-	buildFragment(node, status, b, parentName, beforeName);
-
-	status.fragmentStack.push({
-		fragment: node.fragment!,
-		path: "",
-	});
-	for (let child of node.children) {
-		if (isControlNode(child) && child.operation === "@key") {
-			continue;
-		}
-		buildNode(child, status, b, parentName, beforeName);
-	}
-	status.fragmentStack.pop();
-
-	buildAddFragment(node, status, b, parentName, beforeName);
-
-	// If we wanted to return the fragment instead:
-	//b.append(`t_item.startNode = t_fragment_1.firstChild;`);
-	//b.append(`t_item.endNode = t_fragment_1.lastChild;`);
-	//for (let ev of node.fragment!.events) {
-	//  b.append(`${ev.varName}.addEventListener("${ev.eventName}", ${ev.handler});`);
-	//}
-
-	status.imports.add("t_pop_region");
-	b.append(`t_pop_region(${oldRegionName});`);
-
-	// If we wanted to return the fragment instead:
-	//b.append(`return t_fragment_${node.fragment!.number};`);
-}