@torpor/view 0.2.0 → 0.3.1

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

@@ -1,14 +1,14 @@
 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 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 isReactive from "../utils/isReactive";
-import { type BuildStatus } from "./BuildStatus";
+import type BuildStatus from "./BuildStatus";
 
 /**
  * Builds the HTML template text for all of the fragments in a component
@@ -68,7 +68,14 @@ function buildNodeFragmentText(
 }
 
 function buildRootFragmentText(node: RootNode, status: BuildStatus, fragments: Fragment[]) {
-	node.fragment = { number: fragments.length, text: "", ns: status.ns, events: [], animations: [] };
+	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);
@@ -103,6 +110,7 @@ function buildControlFragmentText(
 				number: fragments.length,
 				text: "",
 				ns: status.ns,
+				effects: [],
 				events: [],
 				animations: [],
 			};
@@ -129,12 +137,13 @@ function buildComponentFragmentText(
 			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
+			// TODO: Make sure it's not a fill node
 			buildNodeFragmentText(child, status, fragments, node.fragment);
 		}
 	}
@@ -149,9 +158,9 @@ function buildElementFragmentText(
 	let needsClass = node.scopeStyles;
 	currentFragment.text += `<${node.tagName}`;
 	let attributesText = node.attributes
-		.filter((a) => !a.name.startsWith("on") && !a.name.includes(":"))
+		.filter((a) => !a.name.startsWith("on"))
 		.map((a) => {
-			if (a.value && isReactive(a.value) && !a.name.includes(":")) {
+			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-")) {
@@ -189,7 +198,7 @@ function buildSpecialFragmentText(
 	currentFragment: Fragment,
 ) {
 	switch (node.tagName) {
-		case ":slot": {
+		case "slot": {
 			// Add an anchor for the slot
 			currentFragment.text += ANCHOR_COMMENT;
 			for (let child of node.children) {
@@ -197,12 +206,13 @@ function buildSpecialFragmentText(
 			}
 			break;
 		}
-		case ":fill": {
+		case "fill": {
 			// Add a new fragment for filled slot content
 			node.fragment = {
 				number: fragments.length,
 				text: "",
 				ns: status.ns,
+				effects: [],
 				events: [],
 				animations: [],
 			};
@@ -212,20 +222,17 @@ function buildSpecialFragmentText(
 			}
 			break;
 		}
-		case ":element": {
+		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": {
+		case "@component": {
 			buildComponentFragmentText(node, status, fragments, currentFragment);
 			break;
 		}
-		case ":head": {
-			// Don't need to do anything here
-			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,9 +1,11 @@
-import { type ControlNode } from "../../types/nodes/ControlNode";
+import type ControlNode from "../../types/nodes/ControlNode";
 import Builder from "../../utils/Builder";
 import nextVarName from "../utils/nextVarName";
-import { type BuildStatus } from "./BuildStatus";
+import type BuildStatus from "./BuildStatus";
 import buildAddFragment from "./buildAddFragment";
 
+// TODO: type checking
+
 export default function buildHtmlNode(node: ControlNode, status: BuildStatus, b: Builder): void {
 	const htmlAnchorName = node.varName!;
 	const htmlParentName = node.parentName || htmlAnchorName + ".parentNode";
@@ -37,7 +39,7 @@ function buildHtmlBranch(
 	status.imports.add("t_run_branch");
 
 	b.append(`${node.statement};`);
-	b.append(`t_run_branch(${rangeName}, -1, () => {`);
+	b.append(`t_run_branch(${rangeName}, () => {`);
 
 	const templateName = nextVarName("template", status);
 	const fragmentName = `t_fragment_${node.fragment!.number}`;

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

@@ -1,8 +1,9 @@
-import { type ControlNode } from "../../types/nodes/ControlNode";
-import isControlNode from "../../types/nodes/isControlNode";
+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 type BuildStatus from "./BuildStatus";
+import addMappedText from "./addMappedText";
 import buildAddFragment from "./buildAddFragment";
 import buildFragment from "./buildFragment";
 import buildNode from "./buildNode";
@@ -11,9 +12,10 @@ 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 ifAnchorName = node.varName!;
-	const ifParentName = node.parentName || ifAnchorName + ".parentNode";
-	const ifRangeName = nextVarName("if_range", status);
+	const anchorName = node.varName!;
+	const parentName = node.parentName || anchorName + ".parentNode";
+	const rangeName = nextVarName("if_range", status);
+	const stateName = "$" + nextVarName("if_state", status);
 
 	// Filter non-control branches (spaces)
 	const branches = node.children.filter((n) => isControlNode(n)) as ControlNode[];
@@ -25,24 +27,33 @@ export default function buildIfNode(node: ControlNode, status: BuildStatus, b: B
 			operation: "@else",
 			statement: "else",
 			children: [],
+			range: { start: 0, end: 0 },
 		};
 		branches.push(elseBranch);
 	}
 
+	status.imports.add("$watch");
+	status.imports.add("$run");
 	status.imports.add("t_range");
 	status.imports.add("t_run_control");
+	status.imports.add("t_run_branch");
 
 	b.append("");
 	b.append(`
-	/* @if */
-	const ${ifRangeName} = t_range();
-	t_run_control(${ifRangeName}, ${ifAnchorName}, (t_before) => {`);
+		/* @if */
+		const ${rangeName} = t_range();
+		let ${stateName} = $watch({ creator: (_: Node | null) => {} });`);
 
-	for (let [i, branch] of branches.entries()) {
-		buildIfBranch(branch, status, b, ifParentName, ifRangeName, i);
+	b.append(`$run(function runIf() {`);
+	for (let branch of branches) {
+		buildIfBranch(branch, status, b, parentName, stateName);
 	}
+	b.append(`});`);
 
-	b.append("});");
+	b.append(`
+		t_run_control(${rangeName}, ${anchorName}, (t_before) => {
+			t_run_branch(${rangeName}, () => ${stateName}.creator(t_before));
+		});`);
 	b.append("");
 }
 
@@ -51,27 +62,31 @@ function buildIfBranch(
 	status: BuildStatus,
 	b: Builder,
 	parentName: string,
-	rangeName: string,
-	index: number,
+	stateName: string,
 ) {
-	status.imports.add("t_run_branch");
+	// TODO: replaceForVarNames is going to throw mapping out
+	addMappedText("", `${replaceForVarNames(node.statement, status)}`, " {", node.range, status, b);
 
-	b.append(`${replaceForVarNames(node.statement, status)} {`);
-	b.append(`t_run_branch(${rangeName}, ${index}, () => {`);
+	if (node.children.length > 0) {
+		b.append(`${stateName}.creator = (t_before) => {`);
 
-	buildFragment(node, status, b, parentName, "t_before");
+		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();
+		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");
+		buildAddFragment(node, status, b, parentName, "t_before");
 
-	b.append(`});`);
-	b.append(`}`);
+		b.append("};");
+	} else {
+		b.append(`${stateName}.creator = (_) => {};`);
+	}
+
+	b.append("}");
 }

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

@@ -1,5 +1,5 @@
 import Builder from "../../utils/Builder";
-import { type BuildStatus } from "./BuildStatus";
+import type BuildStatus from "./BuildStatus";
 import replaceForVarNames from "./replaceForVarNames";
 
 export default function buildMount(

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

@@ -1,10 +1,10 @@
-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 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 type BuildStatus from "./BuildStatus";
 import buildComponentNode from "./buildComponentNode";
 import buildControlNode from "./buildControlNode";
 import buildElementNode from "./buildElementNode";
@@ -45,7 +45,7 @@ export default function buildNode(
 			break;
 		}
 		case "text": {
-			buildTextNode(node as TextNode, status, b);
+			buildTextNode(node as TextNode, status);
 			break;
 		}
 		case "special": {
@@ -53,6 +53,7 @@ export default function buildNode(
 			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,12 +1,14 @@
-import { type ControlNode } from "../../types/nodes/ControlNode";
+import type ControlNode from "../../types/nodes/ControlNode";
 import Builder from "../../utils/Builder";
 import nextVarName from "../utils/nextVarName";
-import { type BuildStatus } from "./BuildStatus";
+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";
@@ -40,7 +42,7 @@ function buildReplaceBranch(
 	status.imports.add("t_run_branch");
 
 	b.append(`${replaceForVarNames(node.statement, status)};`);
-	b.append(`t_run_branch(${rangeName}, -1, () => {`);
+	b.append(`t_run_branch(${rangeName}, () => {`);
 
 	buildFragment(node, status, b, parentName, "t_before");
 

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

@@ -1,6 +1,6 @@
-import { type RootNode } from "../../types/nodes/RootNode";
+import type RootNode from "../../types/nodes/RootNode";
 import Builder from "../../utils/Builder";
-import { type BuildStatus } from "./BuildStatus";
+import type BuildStatus from "./BuildStatus";
 import buildAddFragment from "./buildAddFragment";
 import buildFragment from "./buildFragment";
 import buildNode from "./buildNode";

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

@@ -1,5 +1,5 @@
 import Builder from "../../utils/Builder";
-import { type BuildStatus } from "./BuildStatus";
+import type BuildStatus from "./BuildStatus";
 import replaceForVarNames from "./replaceForVarNames";
 
 export default function buildRun(

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

@@ -1,9 +1,11 @@
-import { type ControlNode } from "../../types/nodes/ControlNode";
+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, b: Builder): void {
+export default function buildScriptNode(node: ControlNode, status: BuildStatus, b: Builder): void {
 	b.append(`/* ${node.operation} */`);
-	b.append(`${maybeAppend(node.statement, ";")}`);
+	addMappedText("", `${maybeAppend(node.statement, ";")}`, "", node.range, status, b);
 }
 
 function maybeAppend(text: string, end: string) {

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

@@ -1,11 +1,9 @@
-import { type ElementNode } from "../../types/nodes/ElementNode";
-import isSpecialNode from "../../types/nodes/isSpecialNode";
+import type ElementNode from "../../types/nodes/ElementNode";
 import Builder from "../../utils/Builder";
+import isSpecialNode from "../../utils/isSpecialNode";
 import trimQuotes from "../../utils/trimQuotes";
-import isFullyReactive from "../utils/isFullyReactive";
-import isReactive from "../utils/isReactive";
 import nextVarName from "../utils/nextVarName";
-import { type BuildStatus } from "./BuildStatus";
+import type BuildStatus from "./BuildStatus";
 import buildAddFragment from "./buildAddFragment";
 import buildFragment from "./buildFragment";
 import buildNode from "./buildNode";
@@ -24,24 +22,10 @@ export default function buildSlotNode(node: ElementNode, status: BuildStatus, b:
 		// TODO: defaults etc props
 		status.imports.add("$watch");
 		b.append(`const ${propsName} = $watch({});`);
-		for (let { name, value } of slotAttributes) {
-			if (name.startsWith("{") && name.endsWith("}")) {
-				// It's a shortcut attribute
-				// It could be e.g. {width} or it could be {$state.width}, but
-				// in either case we set the value of the width property
-				name = name.substring(1, name.length - 1);
-				const propName = name.split(".").at(-1);
-				buildRun("setProp", `${propsName}["${propName}"] = ${name};`, status, b);
-			} else if (value != null) {
-				let fullyReactive = isFullyReactive(value);
-				let partlyReactive = isReactive(value);
-				if (fullyReactive) {
-					value = value.substring(1, value.length - 1);
-				} else if (partlyReactive) {
-					value = `\`${trimQuotes(value).replaceAll("{", "${")}\``;
-				}
+		for (let { name, value, reactive } of slotAttributes) {
+			if (value != null) {
 				const setProp = `${propsName}["${name}"] = ${value}`;
-				if (fullyReactive || partlyReactive) {
+				if (reactive) {
 					buildRun("setProp", `${setProp};`, status, b);
 				} else {
 					b.append(`${setProp};`);
@@ -60,7 +44,7 @@ export default function buildSlotNode(node: ElementNode, status: BuildStatus, b:
 	b.append(`$slots["${slotName}"](${params.join(", ")})`);
 
 	// TODO: Maybe not if there's only a single space node?
-	const fill = node.children.find((c) => isSpecialNode(c) && c.tagName === ":fill");
+	const fill = node.children.find((c) => isSpecialNode(c) && c.tagName === "fill");
 	if (fill && isSpecialNode(fill) && fill.children.length) {
 		b.append(`} else {`);
 

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

@@ -1,9 +1,8 @@
-import { type ElementNode } from "../../types/nodes/ElementNode";
+import type ElementNode from "../../types/nodes/ElementNode";
 import Builder from "../../utils/Builder";
-import { type BuildStatus } from "./BuildStatus";
+import type BuildStatus from "./BuildStatus";
 import buildComponentNode from "./buildComponentNode";
 import buildElementNode from "./buildElementNode";
-import buildHeadNode from "./buildHeadNode";
 import buildSlotNode from "./buildSlotNode";
 
 export default function buildSpecialNode(
@@ -14,27 +13,24 @@ export default function buildSpecialNode(
 	root = false,
 ) {
 	switch (node.tagName) {
-		case ":slot": {
+		case "slot": {
 			buildSlotNode(node, status, b);
 			break;
 		}
-		case ":element": {
-			buildElementNode(node, status, b, parentName, root);
-			break;
-		}
-		case ":component": {
-			buildComponentNode(node, status, b, root);
+		case "fill": {
+			// HACK:
 			break;
 		}
-		case ":head": {
-			buildHeadNode(node, status, b);
+		case "@element": {
+			buildElementNode(node, status, b, parentName, root);
 			break;
 		}
-		case ":fill": {
-			// HACK:
+		case "@component": {
+			buildComponentNode(node, status, b, root);
 			break;
 		}
 		default: {
+			// eslint-disable-next-line restrict-template-expressions
 			throw new Error(`Invalid special node: ${node.tagName}`);
 		}
 	}

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

@@ -1,6 +1,6 @@
-import { type Attribute } from "../../types/nodes/Attribute";
-import { type Style } from "../../types/styles/Style";
-import { type StyleBlock } from "../../types/styles/StyleBlock";
+import type Attribute from "../../types/styles/Attribute";
+import type Style from "../../types/styles/Style";
+import type StyleBlock from "../../types/styles/StyleBlock";
 import Builder from "../../utils/Builder";
 
 export default function buildStyles(style: Style, styleHash: string): string {
@@ -13,8 +13,6 @@ export default function buildStyles(style: Style, styleHash: string): string {
 	return b.toString();
 }
 
-const globalStyleRegex = /\:global\((.+)\)/;
-
 function buildStyleBlock(block: StyleBlock, b: Builder, styleHash: string) {
 	// TODO: This should probably be done while parsing
 	// And handle attribute selectors
@@ -22,19 +20,31 @@ function buildStyleBlock(block: StyleBlock, b: Builder, styleHash: string) {
 		// Just output media queries and properties as-is
 		b.append(`${block.selector} {`);
 	} else {
-		const selectors = block.selector
-			.split(/([\s*,>+~])/)
-			.filter((s) => !!s.trim())
-			.map((s) => {
-				if (s.length === 1 && "*,>+~".includes(s)) {
-					return s;
-				} else if (globalStyleRegex.test(s)) {
-					return s.match(globalStyleRegex)![1];
-				} else {
-					return `${s}.torp-${styleHash}`;
-				}
-			});
-		b.append(`${selectors.join(" ")} {`);
+		block.selector = block.selector.replaceAll(/\s+/g, " ");
+		let selectors: string[] = [];
+		let global = false;
+		let start = 0;
+		for (let i = 0; i <= block.selector.length; i++) {
+			if (block.selector.substring(i).startsWith(":global(")) {
+				i += ":global".length;
+				start = i + 1;
+				global = true;
+			} else if (global && block.selector[i] === ")") {
+				addSelector(selectors, block.selector, styleHash, start, i, global);
+				start = i + 1;
+				global = false;
+			} else if ("*,>+~".includes(block.selector[i])) {
+				addSelector(selectors, block.selector, styleHash, start, i, global);
+				selectors.push(block.selector[i]);
+				start = i + 1;
+			} else if (i === block.selector.length) {
+				addSelector(selectors, block.selector, styleHash, start, i, global);
+			} else if (block.selector[i] === " ") {
+				addSelector(selectors, block.selector, styleHash, start, i, global);
+				start = i + 1;
+			}
+		}
+		b.append(`${selectors.join(" ").replaceAll(" ,", ",")} {`);
 	}
 	for (let attribute of block.attributes) {
 		buildStyleAttribute(attribute, b);
@@ -45,6 +55,31 @@ function buildStyleBlock(block: StyleBlock, b: Builder, styleHash: string) {
 	b.append(`}`);
 }
 
+function addSelector(
+	selectors: string[],
+	selector: string,
+	styleHash: string,
+	start: number,
+	end: number,
+	global: boolean,
+) {
+	if (end > start) {
+		let s = selector.substring(start, end);
+		if (!global) {
+			let pre = s;
+			let post = "";
+			// We might need to handle e.g. `:hover` or `::before`
+			let colonPosition = s.indexOf(":");
+			if (colonPosition !== -1) {
+				pre = s.substring(0, colonPosition);
+				post = s.substring(colonPosition);
+			}
+			s = `${pre}.torp-${styleHash}${post}`;
+		}
+		selectors.push(s);
+	}
+}
+
 function buildStyleAttribute(attribute: Attribute, b: Builder) {
 	b.append(`${attribute.name}: ${attribute.value};`);
 }