@torpor/view 0.1.11 → 0.3.0

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

@@ -1,19 +1,19 @@
-import { type ElementNode } from "../../types/nodes/ElementNode";
-import { type TextNode } from "../../types/nodes/TextNode";
+import type SourceRange from "../../types/SourceRange";
+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 trimMatched from "../../utils/trimMatched";
 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 addMappedText from "./addMappedText";
 import buildAddFragment from "./buildAddFragment";
 import buildFragment from "./buildFragment";
 import buildMount from "./buildMount";
 import buildNode from "./buildNode";
 import buildRun from "./buildRun";
 import replaceForVarNames from "./replaceForVarNames";
+import stashRun from "./stashRun";
 
 export default function buildElementNode(
 	node: ElementNode,
@@ -25,16 +25,21 @@ export default function buildElementNode(
 	if (status.inHead) {
 		if (node.tagName === "title") {
 			buildTitleNode(node, status, b);
-			return;
 		} else {
 			buildHeadNode(node, status, b);
-			return;
 		}
+		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") {
+		if (node.tagName === "@element") {
 			buildDynamicElementNode(node, status, b);
 		}
 
@@ -52,19 +57,23 @@ export default function buildElementNode(
 	}
 
 	const oldPreserveWhitespace = status.preserveWhitespace;
-	status.preserveWhitespace = ["code", "pre"].includes(node.tagName);
+	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) {
+	if (selfAttribute && selfAttribute.value && selfAttribute.fullyReactive) {
 		status.imports.add("$run");
 		status.imports.add("t_dynamic");
-		let selfValue = trimMatched(selfAttribute.value, "{", "}");
+		let selfValue = selfAttribute.value;
 		b.append(`$run(function setDynamic() {`);
 		b.append(`${node.varName} = t_dynamic(${node.varName}, ${selfValue});`);
 
@@ -134,29 +143,12 @@ function buildHeadNode(node: ElementNode, status: BuildStatus, b: Builder) {
 	// TODO: dedupe e.g. <meta name="x"> or on special key
 	b.append(`
 		$run(function runHead() {
-			const t_head_el = document.createElement("${node.tagName}");
-			document.getElementsByTagName("head")[0].appendChild(t_head_el);`);
+			const t_headel = document.createElement("${node.tagName}");
+			document.getElementsByTagName("head")[0].appendChild(t_headel);`);
 	for (let { name, value } of node.attributes) {
-		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("setAttribute", `t_head_el.setAttribute("${propName}", ${name});`, status, b);
-		} else if (value != null && isReactive(value)) {
-			// It's a reactive attribute
-			if (isFullyReactive(value)) {
-				value = value.substring(1, value.length - 1);
-			} else {
-				value = `\`${trimQuotes(value).replaceAll("{", "${")}\``;
-			}
-
+		if (value != null) {
 			status.imports.add("t_attribute");
-			buildRun("setAttribute", `t_attribute(t_head_el, "${name}", ${value});`, status, b);
-		} else if (value != null) {
-			status.imports.add("t_attribute");
-			b.append(`t_attribute(t_head_el, "${name}", ${value});`);
+			b.append(`t_attribute(t_headel, "${name}", ${value});`);
 		}
 	}
 	b.append(`
@@ -169,78 +161,77 @@ function buildElementAttributes(
 	status: BuildStatus,
 	b: Builder,
 ) {
-	// TODO: Flatten this out
+	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 = refAttribute.value;
-		if (value != null && isFullyReactive(value)) {
+		let { value, fullyReactive } = refAttribute;
+		if (value != null && fullyReactive) {
 			// Bind the DOM element to a user-defined variable
-			value = value.substring(1, value.length - 1);
 			b.append(`${value} = ${varName};`);
 		}
 	}
 
-	for (let { name, value } of node.attributes) {
-		if (name === "self" && node.tagName === ":element") {
+	for (let { name, value, reactive, range } 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 (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("setAttribute", `${varName}.setAttribute("${propName}", ${name});`, status, b);
-		} else if (value != null && isReactive(value)) {
-			// It's a reactive attribute
-			if (isFullyReactive(value)) {
-				value = value.substring(1, value.length - 1);
-			} else {
-				value = `\`${trimQuotes(value).replaceAll("{", "${")}\``;
-			}
-
+		} else if (value != null && reactive) {
 			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
+			} 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, status, b);
-			} else if (name.startsWith(":transition")) {
+				buildEventAttribute(varName, name, value, range, status, b);
+			} else if (name.startsWith("transition")) {
 				buildTransitionAttribute(node, varName, name, value, status, b);
 			} else if (name === "class") {
-				if (node.scopeStyles) {
-					value += `+ "torp-${status.styleHash}"`;
-				}
-				buildRun("setClassName", `${varName}.className = ${value};`, status, b);
-			} else if (name === ":class") {
 				status.imports.add("t_class");
+				const params = [value];
 				if (node.scopeStyles) {
-					value += `, "torp-${status.styleHash}"`;
+					params.push(`"torp-${status.styleHash}"`);
 				}
-				buildRun("setClasses", `${varName}.className = t_class(${value});`, status, b);
-			} else if (name === ":style") {
+				// SVGs have a different className
+				const propName = status.ns ? "className.baseVal" : "className";
+				stashRun(
+					fragment,
+					`${varName}.${propName} = t_class(`,
+					params.join(", "),
+					");",
+					range,
+					status,
+				);
+			} else if (name === "style") {
 				status.imports.add("t_style");
-				buildRun("setStyles", `${varName}.setAttribute("style", t_style(${value}));`, status, b);
+				stashRun(
+					fragment,
+					`${varName}.setAttribute("style", t_style(`,
+					value,
+					"));",
+					range,
+					status,
+				);
 			} else if (name.includes("-")) {
 				// Handle data-, aria- etc
 				status.imports.add("t_attribute");
-				buildRun("setDataAttribute", `t_attribute(${varName}, "${name}", ${value});`, status, b);
+				stashRun(fragment, `t_attribute(${varName}, "${name}", `, value, ");", range, 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");
-				buildRun("setAttribute", `t_attribute(${varName}, "${name}", ${value});`, status, b);
+				stashRun(fragment, `t_attribute(${varName}, "${name}", `, value, ");", range, status);
 			}
 		}
 	}
@@ -322,6 +313,7 @@ function buildEventAttribute(
 	varName: string,
 	name: string,
 	value: string,
+	range: SourceRange,
 	status: BuildStatus,
 	b: Builder,
 ) {
@@ -330,7 +322,7 @@ function buildEventAttribute(
 	// Add an event listener, after the fragment has been added
 	const eventName = name.substring(2);
 	status.imports.add("t_event");
-	b.append(`t_event(${varName}, "${eventName}", ${value});`);
+	addMappedText(`t_event(${varName}, "${eventName}", `, value, `);`, range, status, b);
 }
 
 function buildTransitionAttribute(
@@ -351,14 +343,14 @@ function buildTransitionAttribute(
 	let entryVarName = nextVarName("trans_in", status);
 	let exitVarName = nextVarName("trans_out", status);
 
-	if (name === ":transition") {
+	if (name === "transition") {
 		b.append(`const ${entryVarName} = ${getAnimationDetails(value)};`);
 		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) {
-			let outValue = trimMatched(outAttribute.value, "{", "}");
+	} 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} = ${getAnimationDetails(value)};`);
 			b.append(`const ${exitVarName} = ${getAnimationDetails(outValue)};`);
 			b.append(`t_animate(${varName}, ${entryVarName}, ${exitVarName});`);
@@ -366,10 +358,10 @@ function buildTransitionAttribute(
 			b.append(`const ${entryVarName} = ${getAnimationDetails(value)};`);
 			b.append(`t_animate(${varName}, ${entryVarName});`);
 		}
-	} else if (name === ":transition-out") {
-		let inAttribute = node.attributes.find((a) => a.name === ":transition-in");
+	} 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
+			// This has already been handled with transition-in, above
 			return;
 		} else {
 			b.append(`const ${exitVarName} = ${getAnimationDetails(value)};`);

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

@@ -1,10 +1,11 @@
-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 trimEnd from "../../utils/trimEnd";
 import trimMatched from "../../utils/trimMatched";
 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";
@@ -74,13 +75,19 @@ export default function buildForNode(node: ControlNode, status: BuildStatus, b:
 	${forAnchorName},
 	function createNewItems() {
 		let t_new_items: ListItem[] = [];
-		${node.statement} {
-			t_new_items.push(t_list_item({ ${forVarNames.join(",\n")} }${keyStatement ? `, ${keyStatement}` : ""}));
-			/*t_new_items.push({
-				${keyStatement ? `key: ${keyStatement},` : ";"}
-				data: { ${forVarNames.join(",\n")} }
-			});*/
+		let t_previous_item = ${forRangeName};
+		let t_next_item = ${forRangeName}.nextRange;`);
+
+	addMappedText("", `${node.statement}`, " {", node.range, status, b);
+
+	b.append(`
+			let t_new_item = t_list_item({ ${forVarNames.join(",\n")} }${keyStatement ? `, ${keyStatement}` : ""});
+			t_new_item.previousRange = t_previous_item;
+			t_previous_item.nextRange = t_new_item;
+			t_previous_item = t_new_item;
+			t_new_items.push(t_new_item);
 		}
+		${forRangeName}.nextRange = t_next_item;
 		return t_new_items;
 	},
 	function createListItem(t_item, t_before) {`);
@@ -89,8 +96,13 @@ export default function buildForNode(node: ControlNode, status: BuildStatus, b:
 	buildForItem(node, status, b, forParentName);
 	status.forVarNames = [];
 
-	b.append(`}`);
-	b.append(`);`);
+	b.append(`},
+	function updateListItem(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(`}
+		);`);
 	b.append("");
 }
 
@@ -98,7 +110,7 @@ function buildForItem(node: ControlNode, status: BuildStatus, b: Builder, parent
 	const oldRangeName = nextVarName("old_range", status);
 
 	status.imports.add("t_push_range");
-	b.append(`let ${oldRangeName} = t_push_range(t_item, true);`);
+	b.append(`let ${oldRangeName} = t_push_range(t_item);`);
 
 	buildFragment(node, status, b, parentName, "t_before");
 

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

@@ -1,19 +1,19 @@
 import isSpace from "../../parse/utils/isSpace";
-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 isControlNode from "../../types/nodes/isControlNode";
-import isElementNode from "../../types/nodes/isElementNode";
-import isTextNode from "../../types/nodes/isTextNode";
+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 isControlNode from "../../utils/isControlNode";
+import isElementNode from "../../utils/isElementNode";
+import isReactive from "../../utils/isReactive";
+import isSpecialNode from "../../utils/isSpecialNode";
+import isTextNode from "../../utils/isTextNode";
 import trimQuotes from "../../utils/trimQuotes";
-import isReactive from "../utils/isReactive";
-import isReactiveAttribute from "../utils/isReactiveAttribute";
 import nextVarName from "../utils/nextVarName";
-import { type BuildStatus } from "./BuildStatus";
+import type BuildStatus from "./BuildStatus";
 import buildNode from "./buildNode";
 
 interface VariablePath {
@@ -124,10 +124,6 @@ function maybeAddRootNodeDeclaration(
 			params.push("true");
 		}
 		const rootPath = `t_root(${params.join(", ")})`;
-		// HACK: We don't know whether this variable will be used by other child
-		// nodes, so we have to create it regardless and ignore the error if
-		// it's not used -- maybe we could be smarter about this
-		b.append("// @ts-ignore");
 		b.append(`const ${rootName} = ${rootPath};`);
 		// HACK: pretend we don't have the text param, so that subsequent t_root
 		// uses will be shortened, even if we don't know they are text nodes
@@ -236,6 +232,7 @@ function declareFragmentVars(
 			break;
 		}
 		default: {
+			// eslint-disable-next-line restrict-template-expressions
 			throw new Error(`Invalid node type: ${node.type}`);
 		}
 	}
@@ -370,7 +367,7 @@ function declareElementFragmentVars(
 	lastChild: boolean,
 	declare: boolean,
 ) {
-	const tagName = node.tagName === ":element" ? "element" : node.tagName;
+	const tagName = node.tagName === "@element" ? "element" : node.tagName;
 
 	let elementPath = { parent: path, type: tagName, children: [] };
 	path.children.push(elementPath);
@@ -388,15 +385,10 @@ function declareElementFragmentVars(
 			if (status.options?.useCreateElement) {
 				b.append(`let ${node.varName};`);
 			} else {
-				if (node.tagName === ":element") {
+				if (node.tagName === "@element") {
 					b.append(`let ${node.varName} = ${varPath} as ${elementTypeName(node)};`);
 				} else {
-					// HACK: Not great
-					if (topLevel && lastChild) {
-						b.append("// @ts-ignore");
-					}
 					b.append(`const ${node.varName} = ${varPath} as ${elementTypeName(node)};`);
-
 					printDebug(node.varName, status, b);
 				}
 			}
@@ -410,9 +402,9 @@ function declareElementFragmentVars(
 
 	if (!declare) {
 		let attributes = 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)) {
+				if (a.value && a.reactive) {
 					// Adding a placeholder for reactive attributes seems to speed things
 					// up, especially in the case of data attributes
 					return `"${a.name}": "#"`;
@@ -461,11 +453,9 @@ function declareElementFragmentVars(
 }
 
 function elementNodeNeedsDeclaration(node: ElementNode, topLevel: boolean, lastChild: boolean) {
-	const hasReactiveAttribute = node.attributes.some(
-		(a) => a.value && isReactiveAttribute(a.name, a.value),
-	);
+	const hasReactiveAttribute = node.attributes.some((a) => a.value && a.reactive);
 	const isDynamicElement =
-		node.tagName === ":element" && node.attributes.find((a) => a.name === "self");
+		node.tagName === "@element" && node.attributes.find((a) => a.name === "self");
 	return hasReactiveAttribute || isDynamicElement || (topLevel && lastChild);
 }
 
@@ -503,12 +493,7 @@ function declareTextFragmentVars(
 			if (status.options?.useCreateElement) {
 				b.append(`let ${node.varName};`);
 			} else {
-				// HACK: Not great
-				if (topLevel && lastChild) {
-					b.append("// @ts-ignore");
-				}
 				b.append(`const ${node.varName} = ${varPath};`);
-
 				printDebug(node.varName, status, b);
 			}
 		}
@@ -538,7 +523,7 @@ function declareSpecialFragmentVars(
 	lastChild: boolean,
 	declare: boolean,
 ) {
-	if (node.tagName === ":slot") {
+	if (node.tagName === "slot") {
 		declareParentAndAnchorFragmentVars(
 			fragment,
 			node,
@@ -554,9 +539,13 @@ function declareSpecialFragmentVars(
 	}
 
 	switch (node.tagName) {
-		case ":slot":
-		case ":fill": {
+		case "slot":
+		case "fill": {
 			for (let [i, child] of node.children.entries()) {
+				// Don't build the fill node twice
+				if (node.tagName === "slot" && isSpecialNode(child) && child.tagName === "fill") {
+					continue;
+				}
 				declareFragmentVars(
 					fragment,
 					child,
@@ -572,7 +561,7 @@ function declareSpecialFragmentVars(
 			}
 			break;
 		}
-		case ":element": {
+		case "@element": {
 			declareElementFragmentVars(
 				fragment,
 				node,
@@ -587,7 +576,7 @@ function declareSpecialFragmentVars(
 			);
 			break;
 		}
-		case ":component": {
+		case "@component": {
 			declareComponentFragmentVars(
 				fragment,
 				node,
@@ -601,11 +590,8 @@ function declareSpecialFragmentVars(
 			);
 			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/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}`;