@torpor/view 0.2.0 → 0.3.1

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

@@ -1,12 +1,10 @@
-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 trimMatched from "../../utils/trimMatched";
+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 addMappedText from "./addMappedText";
 import buildAddFragment from "./buildAddFragment";
 import buildFragment from "./buildFragment";
 import buildNode from "./buildNode";
@@ -21,6 +19,8 @@ export default function buildComponentNode(
 	b.append("");
 	b.append("/* @component */");
 
+	// TODO: map params to props
+
 	// Props
 	const componentHasProps = node.attributes.length || root;
 	const propsName = componentHasProps ? nextVarName("props", status) : "undefined";
@@ -32,54 +32,31 @@ export default function buildComponentNode(
 		status.imports.add("$watch");
 		b.append(`const ${propsName}: any = $watch({});`);
 
-		for (let { name, value } of node.attributes) {
-			if (name === "self" && node.tagName === ":component") {
+		for (let { name, value, reactive, fullyReactive } of node.attributes) {
+			if (name === "self" && node.tagName === "@component") {
 				// Ignore this special attribute
-			} 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("setProp", `${propsName}["${propName}"] = ${name};`, status, b);
-			} else if (name.startsWith("&") && value != null && isFullyReactive(value)) {
+			} else if (name.startsWith("&") && value != null && fullyReactive) {
 				// 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);
-				value = value.substring(1, value.length - 1);
 				buildRun("setProp", `${propsName}["${name}"] = ${value};`, status, b);
 				buildRun("setBinding", `${value} = ${propsName}["${name}"];`, status, b);
-			} else if ((name === "class" || name === ":class") && value != null) {
-				// NOTE: :class is obsolete, but let's keep it for a version or two
+			} else if (name === "class" && value != null) {
 				status.imports.add("t_class");
-				if (isFullyReactive(value)) {
-					value = value.substring(1, value.length - 1);
-				}
 				const params = [value];
 				if (node.scopeStyles) {
 					params.push(`"torp-${status.styleHash}"`);
 				}
 				buildRun("setClasses", `${propsName}["class"] = t_class(${params.join(", ")});`, status, b);
-			} else if ((name === "style" || name === ":style") && value != null) {
-				// NOTE: :style is obsolete, but let's keep it for a version or two
+			} else if (name === "style" && value != null) {
 				status.imports.add("t_style");
-				if (isFullyReactive(value)) {
-					value = value.substring(1, value.length - 1);
-				}
 				buildRun("setStyles", `${propsName}["style"] = t_style(${value});`, 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("{", "${")}\``;
-				}
 				const setProp = `${propsName}["${name}"] = ${value};`;
-				if (fullyReactive || partlyReactive) {
+				if (reactive) {
 					buildRun("setProp", setProp, status, b);
 				} else {
 					b.append(setProp);
@@ -109,14 +86,14 @@ export default function buildComponentNode(
 	if (componentHasSlots) {
 		b.append(`const ${slotsName}: Record<string, SlotRender> = {};`);
 		for (let slot of node.children) {
-			if (isSpecialNode(slot)) {
+			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",
-					"//@ts-ignore\n$sprops?: Record<PropertyKey, any>",
-					"//@ts-ignore\n$context?: Record<PropertyKey, any>",
+					`${slot.hasSlotProps ? "$sprops" : "_$sprops?"}: Record<PropertyKey, any>`,
+					"// @ts-ignore\n$context?: Record<PropertyKey, any>",
 				];
 				b.append(`${slotsName}["${slotName}"] = (\n${slotParams.join(",\n")}\n) => {`);
 
@@ -147,13 +124,14 @@ export default function buildComponentNode(
 	}
 
 	let componentName = node.tagName;
-	if (componentName === ":component") {
+	if (componentName === "@component") {
 		let selfAttribute = node.attributes.find((a) => a.name === "self");
-		if (selfAttribute && selfAttribute.value) {
-			componentName = trimMatched(selfAttribute.value, "{", "}");
+		if (selfAttribute && selfAttribute.value && selfAttribute.fullyReactive) {
+			componentName = selfAttribute.value;
 		}
 	}
 
-	b.append(`${componentName}(${renderParams});`);
+	addMappedText("", `${componentName}(${renderParams})`, ";", node.range, status, b);
+
 	b.append("");
 }

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

@@ -1,6 +1,6 @@
-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 type BuildStatus from "./BuildStatus";
 import buildAwaitNode from "./buildAwaitNode";
 import buildForNode from "./buildForNode";
 import buildHtmlNode from "./buildHtmlNode";
@@ -68,17 +68,18 @@ export default function buildControlNode(node: ControlNode, status: BuildStatus,
 		case "@const":
 		case "@console":
 		case "@debugger": {
-			buildScriptNode(node, b);
+			buildScriptNode(node, status, b);
 			break;
 		}
 		case "@function":
 		case "@async function": {
 			b.append("");
-			buildScriptNode(node, b);
+			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,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});`);
 
@@ -137,24 +146,7 @@ function buildHeadNode(node: ElementNode, status: BuildStatus, b: Builder) {
 			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_headel.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("{", "${")}\``;
-			}
-
-			status.imports.add("t_attribute");
-			buildRun("setAttribute", `t_attribute(t_headel, "${name}", ${value});`, status, b);
-		} else if (value != null) {
+		if (value != null) {
 			status.imports.add("t_attribute");
 			b.append(`t_attribute(t_headel, "${name}", ${value});`);
 		}
@@ -169,75 +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" || name === ":class") {
-				// NOTE: :class is obsolete, but let's keep it for a version or two
+			} else if (name === "class") {
 				status.imports.add("t_class");
 				const params = [value];
 				if (node.scopeStyles) {
 					params.push(`"torp-${status.styleHash}"`);
 				}
-				buildRun("setClasses", `${varName}.className = t_class(${params.join(", ")});`, 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);
 			}
 		}
 	}
@@ -319,6 +313,7 @@ function buildEventAttribute(
 	varName: string,
 	name: string,
 	value: string,
+	range: SourceRange,
 	status: BuildStatus,
 	b: Builder,
 ) {
@@ -327,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(
@@ -348,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});`);
@@ -363,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}`);
 		}
 	}