@torpor/view 0.3.3 → 0.4.0

package/dist/compile.cjs

@@ -61,14 +61,14 @@ var Builder = class {
 
 //#endregion
 //#region src/compile/build/client/addMappedText.ts
-function addMappedText(preText, text, postText, range, status, b) {
-	if (status.options?.mapped) {
+function addMappedText(preText, text, postText, span, status, b) {
+	if (status.options.mapped === true) {
 		let start = b.toString().length + preText.length;
 		b.append(preText + text + postText);
-		let end = start + text.length - postText.length;
+		let end = start + text.length;
 		status.map.push({
 			script: text,
-			source: range,
+			source: span,
 			compiled: {
 				start,
 				end
@@ -77,6 +77,27 @@ function addMappedText(preText, text, postText, range, status, b) {
 	} else b.append(preText + text + postText);
 }
 
+//#endregion
+//#region src/compile/build/client/addPopDevBoundary.ts
+function addPopDevBoundary(status, b) {
+	if (status.options.dev === true) {
+		status.imports.add("t_pop_dev_bound");
+		b.append("");
+		b.append(`t_pop_dev_bound();`);
+	}
+}
+
+//#endregion
+//#region src/compile/build/client/addPushDevBoundary.ts
+function addPushDevBoundary(type, name, status, b) {
+	if (status.options.dev === true) {
+		status.imports.add("t_push_dev_bound");
+		if (!(name.startsWith("'") && name.endsWith("'") || name.startsWith("\"") && name.endsWith("\"") || name.startsWith("`") || name.endsWith("`"))) name = `"${name}"`;
+		b.append(`t_push_dev_bound("${type}", ${name});`);
+		b.append("");
+	}
+}
+
 //#endregion
 //#region src/compile/types/comments.ts
 const ANCHOR_COMMENT = "<!>";
@@ -285,14 +306,14 @@ function buildAddFragment(node, status, b, parentName, anchorName) {
 		status.imports.add("t_add_fragment");
 		if (fragment.effects.length > 0) {
 			status.imports.add("$run");
-			b.append(`$run(function setAttributes() {`);
-			if (status.options?.mapped) for (let effect of fragment.effects) for (let i = 0; i < effect.ranges.length; i++) {
+			b.append("$run(() => {");
+			if (status.options.mapped === true) for (let effect of fragment.effects) for (let i = 0; i < effect.spans.length; i++) {
 				let start = b.toString().length + effect.offsets[i];
 				b.append(effect.functionBody);
 				let end = start + effect.lengths[i];
 				status.map.push({
 					script: effect.functionBody,
-					source: effect.ranges[i],
+					source: effect.spans[i],
 					compiled: {
 						start,
 						end
@@ -300,7 +321,7 @@ function buildAddFragment(node, status, b, parentName, anchorName) {
 				});
 			}
 			else b.append(fragment.effects.map((e) => e.functionBody).join("\n"));
-			b.append("});");
+			b.append(`}${status.options.dev === true ? `, "setAttributes"` : ""});`);
 		}
 		let params = [
 			fragmentName,
@@ -372,7 +393,7 @@ function buildFragment(node, status, b, parentName, anchorName) {
 	if (node.fragment) {
 		const fragment = node.fragment;
 		const fragmentName = `t_fragment_${fragment.number}`;
-		if (status.options?.useCreateElement) {
+		if (status.options.useCreateElement === true) {
 			let fragmentPath = {
 				parent: null,
 				type: "fragment",
@@ -449,11 +470,9 @@ function declareControlFragmentVars(fragment, node, path, status, b, parentName,
 		case "@for group":
 		case "@await group":
 		case "@replace group":
-		case "@html group": {
-			const operation = node.operation.substring(1).replace(" group", "");
-			declareParentAndAnchorFragmentVars(fragment, node, path, status, b, parentName, anchorName, varPaths, operation, declare);
+		case "@html group":
+			declareParentAndAnchorFragmentVars(fragment, node, path, status, b, parentName, anchorName, varPaths, node.operation.substring(1).replace(" group", ""), declare);
 			break;
-		}
 		default:
 			for (let [i, child] of node.children.entries()) declareFragmentVars(fragment, child, path, status, b, parentName, anchorName, varPaths, i === node.children.length - 1, declare);
 			break;
@@ -485,7 +504,7 @@ function declareElementFragmentVars(fragment, node, path, status, b, parentName,
 			node.varName = nextVarName(tagName, status);
 			if (topLevel) fragment.endVarName = node.varName;
 			const varPath = getFragmentVarPath(fragment, status, node.varName, elementPath, varPaths);
-			if (status.options?.useCreateElement) b.append(`let ${node.varName};`);
+			if (status.options.useCreateElement === true) b.append(`let ${node.varName};`);
 			else if (node.tagName === "@element") b.append(`let ${node.varName} = ${varPath} as ${elementTypeName(node)};`);
 			else {
 				b.append(`const ${node.varName} = ${varPath} as ${elementTypeName(node)};`);
@@ -530,7 +549,7 @@ function declareTextFragmentVars(fragment, node, path, status, b, varPaths, last
 			node.varName = nextVarName("text", status);
 			if (topLevel) fragment.endVarName = node.varName;
 			const varPath = getFragmentVarPath(fragment, status, node.varName, textPath, varPaths);
-			if (status.options?.useCreateElement) b.append(`let ${node.varName};`);
+			if (status.options.useCreateElement === true) b.append(`let ${node.varName};`);
 			else {
 				b.append(`const ${node.varName} = ${varPath};`);
 				printDebug(node.varName, status, b);
@@ -575,7 +594,7 @@ function declareParentAndAnchorFragmentVars(fragment, node, path, status, b, par
 		if (varPaths.has(parentVarPath)) node.parentName = varPaths.get(parentVarPath);
 		else if (declare) {
 			node.parentName = nextVarName(`${name}_parent`, status);
-			if (status.options?.useCreateElement) b.append(`let ${node.parentName} as HTMLElement;`);
+			if (status.options.useCreateElement === true) b.append(`let ${node.parentName} as HTMLElement;`);
 			else {
 				b.append(`const ${node.parentName} = ${parentVarPath} as HTMLElement;`);
 				printDebug(node.parentName, status, b);
@@ -592,7 +611,7 @@ function declareParentAndAnchorFragmentVars(fragment, node, path, status, b, par
 		path.children.push(anchorPath);
 		node.varName = nextVarName(`${name}_anchor`, status);
 		const anchorVarPath = getFragmentVarPath(fragment, status, node.varName, anchorPath, varPaths);
-		if (status.options?.useCreateElement) b.append(`let ${node.varName};`);
+		if (status.options.useCreateElement === true) b.append(`let ${node.varName};`);
 		else {
 			status.imports.add("t_anchor");
 			b.append(`let ${node.varName} = t_anchor(${anchorVarPath}) as HTMLElement;`);
@@ -629,8 +648,7 @@ function getFragmentVarPath(fragment, status, name, path, varPaths) {
 			break;
 		} else level--;
 		const tail = varPath.substring(end + count);
-		const param = varPath.substring(pos + match.length, end);
-		varPath = `${head}t_skip(${param}, ${count})${tail}`;
+		varPath = `${head}t_skip(${varPath.substring(pos + match.length, end)}, ${count})${tail}`;
 	}
 	varPath = varPath.replaceAll("t_next_text", "t_next");
 	return varPath;
@@ -661,7 +679,7 @@ function printDebug(varName, status, b) {}
 * Variables used within a for loop need to be retrieved from the loop data.
 */
 function replaceForVarNames(value, status) {
-	for (let varName of status.forVarNames) value = value.replaceAll(new RegExp(`(^|\\s|\\(|\\[|\\{)${varName}($|\\s|\\.|\\(|\\)|\\[|\\]|\\}|;)`, "g"), `$1t_item.data.${varName}$2`);
+	for (let varName of status.forVarNames) value = value.replaceAll(new RegExp(`(^|\\s|\\(|\\[|\\{|!)${varName[0]}($|\\s|\\.|\\(|\\)|\\[|\\]|\\}|;)`, "g"), `$1${varName[1]}$2`);
 	return value;
 }
 
@@ -669,10 +687,12 @@ function replaceForVarNames(value, status) {
 //#region src/compile/build/client/buildRun.ts
 function buildRun(functionName, functionBody, status, b) {
 	functionBody = replaceForVarNames(functionBody, status);
+	addPushDevBoundary("run", functionName, status, b);
 	status.imports.add("$run");
-	b.append(`$run(function ${functionName}() {`);
+	b.append("$run(() => {");
 	b.append(functionBody);
-	b.append("});");
+	b.append(`}${status.options.dev === true ? `, "${functionName}"` : ""});`);
+	addPopDevBoundary(status, b);
 }
 
 //#endregion
@@ -684,24 +704,48 @@ function buildComponentNode(node, status, b, root = false) {
 	const propsName = componentHasProps ? nextVarName("props", status) : "undefined";
 	if (componentHasProps) {
 		status.imports.add("$watch");
-		b.append(`const ${propsName}: any = $watch({});`);
+		let props = [];
+		let runs = [];
+		let bindingRuns = [];
 		for (let { name, value, reactive, fullyReactive } of node.attributes) if (name === "self" && node.tagName === "@component") {} else if (name.startsWith("&") && value != null && fullyReactive) {
 			name = name.substring(1);
-			buildRun("setProp", `${propsName}["${name}"] = ${value};`, status, b);
-			buildRun("setBinding", `${value} = ${propsName}["${name}"];`, status, b);
+			props.push({
+				name,
+				value
+			});
+			runs.push(`${propsName}["${name}"] = ${value};`);
+			bindingRuns.push(`${value} = ${propsName}["${name}"];`);
 		} else if (name === "class" && value != null) {
 			status.imports.add("t_class");
 			const params = [value];
 			if (node.scopeStyles) params.push(`"torp-${status.styleHash}"`);
-			buildRun("setClasses", `${propsName}["class"] = t_class(${params.join(", ")});`, status, b);
+			value = `t_class(${params.join(", ")})`;
+			props.push({
+				name,
+				value
+			});
+			runs.push(`${propsName}["${name}"] = ${value};`);
 		} else if (name === "style" && value != null) {
 			status.imports.add("t_style");
-			buildRun("setStyles", `${propsName}["style"] = t_style(${value});`, status, b);
+			value = `t_style(${value})`;
+			props.push({
+				name,
+				value
+			});
+			runs.push(`${propsName}["${name}"] = ${value};`);
 		} else if (value != null) {
-			const setProp = `${propsName}["${name}"] = ${value};`;
-			if (reactive) buildRun("setProp", setProp, status, b);
-			else b.append(setProp);
-		} else b.append(`${propsName}["${name}"] = true;`);
+			props.push({
+				name,
+				value
+			});
+			if (reactive) runs.push(`${propsName}["${name}"] = ${value};`);
+		} else props.push({
+			name,
+			value: "true"
+		});
+		b.append(`const ${propsName} = $watch({ ${replaceForVarNames(props.map((p) => `${p.name}: ${p.value}`).join(", "), status)} });`);
+		if (runs.length) buildRun("setProps", replaceForVarNames(runs.join("\n"), status), status, b);
+		if (bindingRuns.length) buildRun("setBindings", replaceForVarNames(bindingRuns.join("\n"), status), status, b);
 		if (root) {
 			status.imports.add("$run");
 			b.append(`
@@ -740,16 +784,14 @@ function buildComponentNode(node, status, b, root = false) {
 			b.append(`}`);
 		}
 	}
-	const compParentName = node.parentName;
-	const compAnchorName = node.varName;
-	let renderParams = `${compParentName}, ${compAnchorName}, ${propsName}, $context`;
+	let renderParams = `${node.parentName}, ${node.varName}, ${propsName}, $context`;
 	if (slotsName !== "undefined") renderParams += `, ${slotsName}`;
 	let componentName = node.tagName;
 	if (componentName === "@component") {
 		let selfAttribute = node.attributes.find((a) => a.name === "self");
 		if (selfAttribute && selfAttribute.value && selfAttribute.fullyReactive) componentName = selfAttribute.value;
 	}
-	addMappedText("", `${componentName}(${renderParams})`, ";", node.range, status, b);
+	addMappedText("", `${componentName}(${renderParams})`, ";", node.span, status, b);
 	b.append("");
 }
 
@@ -777,7 +819,7 @@ function trimMatched(text, startChar, endChar) {
 function buildAwaitNode(node, status, b) {
 	const anchorName = node.varName;
 	const parentName = node.parentName;
-	const rangeName = nextVarName("await_range", status);
+	const regionName = nextVarName("await_region", status);
 	const stateName = "$" + nextVarName("await_state", status);
 	const creatorsName = nextVarName("await_creators", status);
 	const awaitVarsName = nextVarName("await_vars", status);
@@ -790,7 +832,7 @@ function buildAwaitNode(node, status, b) {
 		operation: "@then",
 		statement: "then",
 		children: [],
-		range: {
+		span: {
 			start: 0,
 			end: 0
 		}
@@ -801,7 +843,7 @@ function buildAwaitNode(node, status, b) {
 		operation: "@catch",
 		statement: "catch",
 		children: [],
-		range: {
+		span: {
 			start: 0,
 			end: 0
 		}
@@ -811,43 +853,46 @@ function buildAwaitNode(node, status, b) {
 	const catchVar = trimMatched(catchBranch.statement.substring(5).trim(), "(", ")");
 	status.imports.add("$watch");
 	status.imports.add("$run");
-	status.imports.add("t_range");
+	status.imports.add("t_region");
 	status.imports.add("t_run_control");
 	status.imports.add("t_run_branch");
 	b.append("");
+	b.append("/* @await */");
+	addPushDevBoundary("control", `@${branches[0].statement}`, status, b);
 	b.append(`
-		/* @await */
-		const ${rangeName} = t_range();
+		const ${regionName} = t_region(${status.options.dev === true ? `"await"` : ""});
 		let ${stateName} = $watch({ index: -1 });
-		let ${creatorsName}: ((t_before: Node | null) => void)[] = [];`);
-	b.append(`
+		let ${creatorsName}: ((t_before: Node | null) => void)[] = [];
 		let ${awaitVarsName} = { t_token: 0 };
-		$run(function runAwait() {`);
+		$run(() => {`);
 	let index = 0;
 	buildAwaitBranch(awaitBranch, status, b, parentName, stateName, creatorsName, index++);
-	b.append(`${awaitVarsName}.t_token++;
-			((t_token) => {`);
-	awaitBranch.range.start += 7;
-	addMappedText("", replaceForVarNames(awaiterName, status), "", awaitBranch.range, status, b);
-	thenBranch.range.start -= 1;
-	addMappedText(".then((", replaceForVarNames(thenVar, status), ") => {", thenBranch.range, status, b);
+	b.append(`
+		${awaitVarsName}.t_token++;
+		((t_token) => {`);
+	awaitBranch.span.start += 7;
+	addMappedText("", replaceForVarNames(awaiterName, status), "", awaitBranch.span, status, b);
+	thenBranch.span.start -= 1;
+	addMappedText(".then((", replaceForVarNames(thenVar, status), ") => {", thenBranch.span, status, b);
 	b.append(`if (t_token === ${awaitVarsName}.t_token) {`);
 	buildAwaitBranch(thenBranch, status, b, parentName, stateName, creatorsName, index++);
 	b.append(`}
 		})`);
-	catchBranch.range.start -= 1;
-	addMappedText(".catch((", replaceForVarNames(catchVar, status), ") => {", catchBranch.range, status, b);
-	b.append(`
-		if (t_token === ${awaitVarsName}.t_token) {`);
+	catchBranch.span.start -= 1;
+	addMappedText(".catch((", replaceForVarNames(catchVar, status), ") => {", catchBranch.span, status, b);
+	b.append(`if (t_token === ${awaitVarsName}.t_token) {`);
 	buildAwaitBranch(catchBranch, status, b, parentName, stateName, creatorsName, index++);
 	b.append(`}
 				});
 			})(${awaitVarsName}.t_token);
-		});`);
+		}${status.options.dev === true ? `, "runAwait"` : ""});`);
 	b.append(`
-		t_run_control(${rangeName}, ${anchorName}, (t_before) => {
-			t_run_branch(${rangeName}, () => ${creatorsName}[${stateName}.index](t_before));
-		});`);
+		t_run_control(${regionName}, ${anchorName}, (t_before) => {
+			const index = ${stateName}.index;`);
+	b.append(`t_run_branch(${regionName}, () => ${creatorsName}[index](t_before)${status.options.dev === true ? ", `branch ${index}`" : ""});`);
+	addPopDevBoundary(status, b);
+	b.append("});");
+	addPopDevBoundary(status, b);
 	b.append("");
 }
 function buildAwaitBranch(node, status, b, parentName, stateName, creatorsName, index) {
@@ -888,8 +933,8 @@ 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).*?\)/;
 function buildForNode(node, status, b) {
-	const forParentName = node.parentName;
-	const forAnchorName = node.varName;
+	const parentName = node.parentName;
+	const anchorName = node.varName;
 	node = node.children[0];
 	const forVarNames = [];
 	const forIndexMatch = node.statement.match(forLoopRegex);
@@ -904,65 +949,76 @@ function buildForNode(node, status, b) {
 			else forVarNames.push(match);
 		}
 	}
-	const forRangeName = nextVarName("for_range", status);
+	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);
 	const key = node.children.find((n) => n.type === "control" && n.operation === "@key");
 	let keyStatement = key ? key.statement : "";
 	if (keyStatement) keyStatement = trimEnd(keyStatement.substring(keyStatement.indexOf("=") + 1).trim(), ";");
-	status.imports.add("t_range");
+	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(`
-	/* @for */
-	let ${forRangeName} = t_range();
-	t_run_list(
-	${forRangeName},
-	${forParentName},
-	${forAnchorName},
-	function createNewItems() {
-		let t_new_items: ListItem[] = [];
-		let t_previous_item = ${forRangeName};
-		let t_next_item = ${forRangeName}.nextRange;`);
-	addMappedText("", `${node.statement}`, " {", node.range, status, b);
+		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;`);
+	addMappedText("", `${replaceForVarNames(node.statement, status)}`, " {", node.span, status, b);
+	let params = [`{ ${forVarNames.join(",\n")} }`, keyStatement || "undefined"];
+	if (status.options.dev === true) params.push(`"for item"`);
 	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;
+			let ${newItemName} = t_list_item(${params.join(", ")});
+			${newItemName}.previousRegion = ${previousItemName};
+			${previousItemName}.nextRegion = ${newItemName};
+			${previousItemName} = ${newItemName};
+			${listItemsName}.push(${newItemName});
+		}
+		${regionName}.nextRegion = ${nextItemName};
+		return ${listItemsName};
 	},
-	function createListItem(t_item, t_before) {`);
-	status.forVarNames = forVarNames;
-	buildForItem(node, status, b, forParentName);
-	status.forVarNames = [];
+	${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(`},
-	function updateListItem(t_old_item, t_new_item) {`);
+	${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, status, b, parentName) {
-	const oldRangeName = nextVarName("old_range", status);
-	status.imports.add("t_push_range");
-	b.append(`let ${oldRangeName} = t_push_range(t_item);`);
-	buildFragment(node, status, b, parentName, "t_before");
+function buildForItem(node, status, b, parentName, beforeName, itemName) {
+	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, "t_before");
+		buildNode(child, status, b, parentName, beforeName);
 	}
 	status.fragmentStack.pop();
-	buildAddFragment(node, status, b, parentName, "t_before");
-	status.imports.add("t_pop_range");
-	b.append(`t_pop_range(${oldRangeName});`);
+	buildAddFragment(node, status, b, parentName, beforeName);
+	status.imports.add("t_pop_region");
+	b.append(`t_pop_region(${oldRegionName});`);
 }
 
 //#endregion
@@ -970,30 +1026,30 @@ function buildForItem(node, status, b, parentName) {
 function buildHtmlNode(node, status, b) {
 	const htmlAnchorName = node.varName;
 	const htmlParentName = node.parentName || htmlAnchorName + ".parentNode";
-	const htmlRangeName = nextVarName("html_range", status);
+	const htmlRegionName = nextVarName("html_region", status);
 	node = node.children[0];
-	status.imports.add("t_range");
+	status.imports.add("t_region");
 	status.imports.add("t_run_control");
 	b.append("");
 	b.append(`
 	/* @html */
-	const ${htmlRangeName} = t_range();
-	t_run_control(${htmlRangeName}, ${htmlAnchorName}, (t_before) => {`);
-	buildHtmlBranch(node, status, b, htmlParentName, htmlRangeName);
-	b.append("});");
+	const ${htmlRegionName} = t_region(${status.options.dev === true ? `"html"` : ""});
+	t_run_control(${htmlRegionName}, ${htmlAnchorName}, (t_before) => {`);
+	buildHtmlBranch(node, status, b, htmlParentName, htmlRegionName);
+	b.append(`}${status.options.dev === true ? ", \"html\"" : ""});`);
 	b.append("");
 }
-function buildHtmlBranch(node, status, b, parentName, rangeName) {
+function buildHtmlBranch(node, status, b, parentName, regionName) {
 	status.imports.add("t_run_branch");
 	b.append(`${node.statement};`);
-	b.append(`t_run_branch(${rangeName}, () => {`);
+	b.append(`t_run_branch(${regionName}, () => {`);
 	const templateName = nextVarName("template", status);
 	const fragmentName = `t_fragment_${node.fragment.number}`;
 	b.append(`const ${templateName} = document.createElement("template");`);
 	b.append(`${templateName}.innerHTML = ${node.statement};`);
 	b.append(`let ${fragmentName} = ${templateName}.content.cloneNode(true) as DocumentFragment;`);
 	buildAddFragment(node, status, b, parentName, "t_before");
-	b.append(`});`);
+	b.append(`}${status.options.dev === true ? ", \"html\"" : ""});`);
 }
 
 //#endregion
@@ -1001,7 +1057,7 @@ function buildHtmlBranch(node, status, b, parentName, rangeName) {
 function buildIfNode(node, status, b) {
 	const anchorName = node.varName;
 	const parentName = node.parentName || anchorName + ".parentNode";
-	const rangeName = nextVarName("if_range", status);
+	const regionName = nextVarName("if_region", status);
 	const stateName = "$" + nextVarName("if_state", status);
 	const creatorsName = nextVarName("if_creators", status);
 	const branches = node.children.filter((n) => isControlNode(n));
@@ -1010,34 +1066,38 @@ function buildIfNode(node, status, b) {
 		operation: "@else",
 		statement: "else",
 		children: [],
-		range: {
+		span: {
 			start: 0,
 			end: 0
 		}
 	});
 	status.imports.add("$watch");
 	status.imports.add("$run");
-	status.imports.add("t_range");
+	status.imports.add("t_region");
 	status.imports.add("t_run_control");
 	status.imports.add("t_run_branch");
 	b.append("");
+	b.append("/* @if */");
+	addPushDevBoundary("control", `@${branches[0].statement}`, status, b);
 	b.append(`
-		/* @if */
-		const ${rangeName} = t_range();
+		const ${regionName} = t_region(${status.options.dev === true ? `"if"` : ""});
 		let ${stateName} = $watch({ index: -1 });
-		let ${creatorsName}: ((t_before: Node | null) => void)[] = [];`);
-	b.append(`$run(function runIf() {`);
+		let ${creatorsName}: ((t_before: Node | null) => void)[] = [];
+		$run(() => {`);
 	let index = 0;
 	for (let branch of branches) buildIfBranch(branch, status, b, parentName, stateName, creatorsName, index++);
-	b.append(`});`);
+	b.append(`}${status.options.dev === true ? `, "runIf"` : ""});`);
 	b.append(`
-		t_run_control(${rangeName}, ${anchorName}, (t_before) => {
-			t_run_branch(${rangeName}, () => ${creatorsName}[${stateName}.index](t_before));
-		});`);
+		t_run_control(${regionName}, ${anchorName}, (t_before) => {
+			const index = ${stateName}.index;`);
+	b.append(`t_run_branch(${regionName}, () => ${creatorsName}[index](t_before)${status.options.dev === true ? ", `branch ${index}`" : ""});`);
+	addPopDevBoundary(status, b);
+	b.append("});");
+	addPopDevBoundary(status, b);
 	b.append("");
 }
 function buildIfBranch(node, status, b, parentName, stateName, creatorsName, index) {
-	addMappedText("", `${replaceForVarNames(node.statement, status)}`, " {", node.range, status, b);
+	addMappedText("", `${replaceForVarNames(node.statement, status)}`, " {", node.span, status, b);
 	if (node.children.length > 0) {
 		b.append(`${creatorsName}[${index}] = (t_before) => {`);
 		buildFragment(node, status, b, parentName, "t_before");
@@ -1059,23 +1119,23 @@ function buildIfBranch(node, status, b, parentName, stateName, creatorsName, ind
 function buildReplaceNode(node, status, b) {
 	const replaceAnchorName = node.varName;
 	const replaceParentName = node.parentName || replaceAnchorName + ".parentNode";
-	const replaceRangeName = nextVarName("replace_range", status);
+	const replaceRegionName = nextVarName("replace_region", status);
 	node = node.children[0];
-	status.imports.add("t_range");
+	status.imports.add("t_region");
 	status.imports.add("t_run_control");
 	b.append("");
 	b.append(`
 	/* @replace */
-	const ${replaceRangeName} = t_range();
-	t_run_control(${replaceRangeName}, ${replaceAnchorName}, (t_before) => {`);
-	buildReplaceBranch(node, status, b, replaceParentName, replaceRangeName);
-	b.append("});");
+	const ${replaceRegionName} = t_region(${status.options.dev === true ? `"replace"` : ""});
+	t_run_control(${replaceRegionName}, ${replaceAnchorName}, (t_before) => {`);
+	buildReplaceBranch(node, status, b, replaceParentName, replaceRegionName);
+	b.append(`}${status.options.dev === true ? ", \"replace\"" : ""});`);
 	b.append("");
 }
-function buildReplaceBranch(node, status, b, parentName, rangeName) {
+function buildReplaceBranch(node, status, b, parentName, regionName) {
 	status.imports.add("t_run_branch");
 	b.append(`${replaceForVarNames(node.statement, status)};`);
-	b.append(`t_run_branch(${rangeName}, () => {`);
+	b.append(`t_run_branch(${regionName}, () => {`);
 	buildFragment(node, status, b, parentName, "t_before");
 	status.fragmentStack.push({
 		fragment: node.fragment,
@@ -1084,14 +1144,14 @@ function buildReplaceBranch(node, status, b, parentName, rangeName) {
 	for (let child of node.children) buildNode(child, status, b, parentName, "t_before");
 	status.fragmentStack.pop();
 	buildAddFragment(node, status, b, parentName, "t_before");
-	b.append(`});`);
+	b.append(`}${status.options.dev === true ? ", \"replace\"" : ""});`);
 }
 
 //#endregion
 //#region src/compile/build/client/buildScriptNode.ts
 function buildScriptNode(node, status, b) {
 	b.append(`/* ${node.operation} */`);
-	addMappedText("", `${maybeAppend$1(node.statement, ";")}`, "", node.range, status, b);
+	addMappedText("", `${maybeAppend$1(node.statement, ";")}`, "", node.span, status, b);
 }
 function maybeAppend$1(text, end) {
 	if (!text.endsWith(end)) text += end;
@@ -1103,7 +1163,7 @@ function maybeAppend$1(text, end) {
 function buildSwitchNode(node, status, b) {
 	const anchorName = node.varName;
 	const parentName = node.parentName;
-	const rangeName = nextVarName("switch_range", status);
+	const regionName = nextVarName("switch_region", status);
 	const stateName = "$" + nextVarName("switch_state", status);
 	const creatorsName = nextVarName("switch_creators", status);
 	const branches = node.children.filter((n) => isControlNode(n));
@@ -1112,38 +1172,41 @@ function buildSwitchNode(node, status, b) {
 		operation: "@default",
 		statement: "default",
 		children: [],
-		range: {
+		span: {
 			start: 0,
 			end: 0
 		}
 	});
 	status.imports.add("$watch");
 	status.imports.add("$run");
-	status.imports.add("t_range");
+	status.imports.add("t_region");
 	status.imports.add("t_run_control");
 	status.imports.add("t_run_branch");
 	b.append("");
+	b.append("/* @switch */");
+	addPushDevBoundary("control", `@${branches[0].statement}`, status, b);
 	b.append(`
-		/* @switch */
-		const ${rangeName} = t_range();
+		const ${regionName} = t_region(${status.options.dev === true ? `"switch"` : ""});
 		let ${stateName} = $watch({ index: -1 });
-		let ${creatorsName}: ((t_before: Node | null) => void)[] = [];`);
-	b.append(`
-		$run(function runSwitch() {`);
+		let ${creatorsName}: ((t_before: Node | null) => void)[] = [];
+		$run(() => {`);
+	addMappedText("", `${replaceForVarNames(node.statement, status)}`, " {", node.span, status, b);
 	let index = 0;
-	addMappedText("", `${replaceForVarNames(node.statement, status)}`, " {", node.range, status, b);
 	for (let branch of branches) buildSwitchBranch(branch, status, b, parentName, stateName, creatorsName, index++);
 	b.append(`
 		}
-	});`);
+	}${status.options.dev === true ? `, "runSwitch"` : ""});`);
 	b.append(`
-		t_run_control(${rangeName}, ${anchorName}, (t_before) => {
-			t_run_branch(${rangeName}, () => ${creatorsName}[${stateName}.index](t_before));
-		});`);
+		t_run_control(${regionName}, ${anchorName}, (t_before) => {
+			const index = ${stateName}.index;`);
+	b.append(`t_run_branch(${regionName}, () => ${creatorsName}[index](t_before)${status.options.dev === true ? ", `branch ${index}`" : ""});`);
+	addPopDevBoundary(status, b);
+	b.append("});");
+	addPopDevBoundary(status, b);
 	b.append("");
 }
 function buildSwitchBranch(node, status, b, parentName, stateName, creatorsName, index) {
-	addMappedText("", `${replaceForVarNames(node.statement, status)}`, " {", node.range, status, b);
+	addMappedText("", `${replaceForVarNames(node.statement, status)}`, " {", node.span, status, b);
 	if (node.children.length > 0) {
 		b.append(`${creatorsName}[${index}] = (t_before) => {`);
 		buildFragment(node, status, b, parentName, "t_before");
@@ -1223,12 +1286,12 @@ function buildMount(functionName, functionBody, status, b) {
 
 //#endregion
 //#region src/compile/build/client/stashRun.ts
-function stashRun(fragment, functionStart, value, functionEnd, range, status) {
+function stashRun(fragment, functionStart, value, functionEnd, span, status) {
 	value = replaceForVarNames(value, status);
 	let functionBody = functionStart + value + functionEnd;
 	fragment.effects.push({
 		functionBody,
-		ranges: [range],
+		spans: [span],
 		offsets: [functionStart.length],
 		lengths: [value.length]
 	});
@@ -1263,7 +1326,7 @@ function buildDynamicElementNode(node, status, b) {
 		status.imports.add("$run");
 		status.imports.add("t_dynamic");
 		let selfValue = selfAttribute.value;
-		b.append(`$run(function setDynamic() {`);
+		b.append("$run(() => {");
 		b.append(`${node.varName} = t_dynamic(${node.varName}, ${selfValue});`);
 		let parentName = node.varName;
 		buildFragment(node, status, b, parentName, "null");
@@ -1274,7 +1337,7 @@ function buildDynamicElementNode(node, status, b) {
 		for (let child of node.children) buildNode(child, status, b, parentName, "null");
 		status.fragmentStack.pop();
 		buildAddFragment(node, status, b, parentName, "null");
-		b.append(`});`);
+		b.append(`}${status.options.dev === true ? `, "setDynamic"` : ""});`);
 	}
 }
 function buildTitleNode(node, status, b) {
@@ -1295,25 +1358,24 @@ function buildTitleNode(node, status, b) {
 		else content = `\`${content.replaceAll("{", "${t_fmt(").replaceAll("}", ")}")}\``;
 	} else content = `"${content}"`;
 	status.imports.add("$run");
+	b.append("$run(() => {");
 	b.append(`
-		$run(function runTitle() {
 			const t_old_title = document.title;
 			document.title = ${content};
 			return () => document.title = t_old_title;
-		});`);
+		}${status.options.dev === true ? `, "runTitle"` : ""});`);
 }
 function buildHeadNode(node, status, b) {
 	status.imports.add("$run");
+	b.append("$run(() => {");
 	b.append(`
-		$run(function runHead() {
 			const t_headel = document.createElement("${node.tagName}");
 			document.getElementsByTagName("head")[0].appendChild(t_headel);`);
 	for (let { name, value } of node.attributes) if (value != null) {
 		status.imports.add("t_attribute");
 		b.append(`t_attribute(t_headel, "${name}", ${value});`);
 	}
-	b.append(`
-		});`);
+	b.append(`}${status.options.dev === true ? `, "runHead"` : ""});`);
 }
 function buildElementAttributes$1(node, varName, status, b) {
 	let fragment = status.fragmentStack.at(-1)?.fragment;
@@ -1323,7 +1385,7 @@ function buildElementAttributes$1(node, varName, status, b) {
 		let { value, fullyReactive } = refAttribute;
 		if (value != null && fullyReactive) b.append(`${value} = ${varName};`);
 	}
-	for (let { name, value, reactive, range } of node.attributes) if (name === "self" && node.tagName === "@element") {} else if (name === "&ref") {} else if (value != null && reactive) if (name === "&group") buildBindGroupAttribute(node, varName, value, status, b);
+	for (let { name, value, reactive, span: range } of node.attributes) if (name === "self" && node.tagName === "@element") {} else if (name === "&ref") {} 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") buildMount("elMount", `return (${trimEnd(value.trim(), ";")})(${varName});`, status, b);
 	else if (name.startsWith("on")) buildEventAttribute(varName, name, value, range, status, b);
@@ -1332,8 +1394,7 @@ function buildElementAttributes$1(node, varName, status, b) {
 		status.imports.add("t_class");
 		const params = [value];
 		if (node.scopeStyles) params.push(`"torp-${status.styleHash}"`);
-		const propName = status.ns ? "className.baseVal" : "className";
-		stashRun(fragment, `${varName}.${propName} = t_class(`, params.join(", "), ");", range, status);
+		stashRun(fragment, `${varName}.${status.ns ? "className.baseVal" : "className"} = t_class(`, params.join(", "), ");", range, status);
 	} else if (name === "style") {
 		status.imports.add("t_style");
 		stashRun(fragment, `${varName}.setAttribute("style", t_style(`, value, "));", range, status);
@@ -1351,8 +1412,7 @@ function buildBindGroupAttribute(node, varName, value, status, b) {
 	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);
+	buildRun("setBinding", `${`${varName}.${propName} = ${set}`};`, status, b);
 	status.imports.add("t_event");
 	b.append(`t_event(${varName}, "${eventName}", (e) => {
 			if (e.target.${propName}) ${value} = ${inputValue};
@@ -1381,17 +1441,15 @@ function buildBindAttribute(node, varName, name, value, status, b) {
 		}
 	} 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);
+	buildRun("setBinding", `${`${varName}.${name.substring(1)} = ${set}`};`, status, b);
 	status.imports.add("t_event");
 	b.append(`t_event(${varName}, "${eventName}", (e) => ${value} = ${inputValue});`);
 }
-function buildEventAttribute(varName, name, value, range, status, b) {
+function buildEventAttribute(varName, name, value, span, status, b) {
 	value = replaceForVarNames(value, status);
 	const eventName = name.substring(2);
 	status.imports.add("t_event");
-	addMappedText(`t_event(${varName}, "${eventName}", `, value, `);`, range, status, b);
+	addMappedText(`t_event(${varName}, "${eventName}", `, value, `);`, span, status, b);
 }
 function buildTransitionAttribute(node, varName, name, value, status, b) {
 	value = replaceForVarNames(value, status);
@@ -1399,56 +1457,26 @@ function buildTransitionAttribute(node, varName, name, value, status, b) {
 	let entryVarName = nextVarName("trans_in", status);
 	let exitVarName = nextVarName("trans_out", status);
 	if (name === "transition") {
-		b.append(`const ${entryVarName} = ${getAnimationDetails(value)};`);
+		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} = ${getAnimationDetails(value)};`);
-			b.append(`const ${exitVarName} = ${getAnimationDetails(outValue)};`);
+			b.append(`const ${entryVarName} = (${value})(${varName});`);
+			b.append(`const ${exitVarName} = (${outValue})(${varName});`);
 			b.append(`t_animate(${varName}, ${entryVarName}, ${exitVarName});`);
 		} else {
-			b.append(`const ${entryVarName} = ${getAnimationDetails(value)};`);
+			b.append(`const ${entryVarName} = (${value})(${varName});`);
 			b.append(`t_animate(${varName}, ${entryVarName});`);
 		}
 	} else if (name === "transition-out") if (node.attributes.find((a) => a.name === "transition-in")) return;
 	else {
-		b.append(`const ${exitVarName} = ${getAnimationDetails(value)};`);
+		b.append(`const ${exitVarName} = (${value})(${varName});`);
 		b.append(`t_animate(${varName}, null, ${entryVarName});`);
 	}
 }
-function getAnimationDetails(value) {
-	let parts = [];
-	let start = 0;
-	let squareCount = 0;
-	let curlyCount = 0;
-	for (let i = 0; i < value.length; i++) switch (value[i]) {
-		case ",":
-			if (squareCount === 0 && curlyCount === 0) {
-				parts.push(value.substring(start, i));
-				start = i + 1;
-			}
-			break;
-		case "[":
-			squareCount += 1;
-			break;
-		case "]":
-			squareCount -= 1;
-			break;
-		case "{":
-			curlyCount += 1;
-			break;
-		case "}":
-			curlyCount -= 1;
-			break;
-	}
-	parts.push(value.substring(start));
-	let keyframes = parts[0]?.trim();
-	let options = parts[1]?.trim();
-	return `{ ${[`keyframes: ${keyframes}`, options ? `options: ${options}` : null].filter(Boolean).join(", ")} }`;
-}
 
 //#endregion
 //#region src/compile/build/client/buildRootNode.ts
@@ -1533,7 +1561,7 @@ function endOfString(char, content, start) {
 
 //#endregion
 //#region src/compile/build/client/stashRunWithOffsets.ts
-function stashRunWithOffsets(fragment, functionBody, ranges, offsets, lengths, status) {
+function stashRunWithOffsets(fragment, functionBody, spans, offsets, lengths, status) {
 	for (let i = 0; i < offsets.length; i++) {
 		const oldLength = functionBody.length;
 		functionBody = functionBody.substring(0, offsets[i]) + replaceForVarNames(functionBody.substring(offsets[i], offsets[i] + lengths[i]), status) + functionBody.substring(offsets[i] + lengths[i]);
@@ -1543,7 +1571,7 @@ function stashRunWithOffsets(fragment, functionBody, ranges, offsets, lengths, s
 	}
 	fragment.effects.push({
 		functionBody,
-		ranges,
+		spans,
 		offsets,
 		lengths
 	});
@@ -1622,7 +1650,7 @@ function buildTextNode(node, status) {
 		offsetChange += functionBody.length;
 		offsets.map((_, i) => offsets[i] += offsetChange);
 		functionBody += `${textContent};`;
-		stashRunWithOffsets(fragment, functionBody, node.ranges, offsets, lengths, status);
+		stashRunWithOffsets(fragment, functionBody, node.spans, offsets, lengths, status);
 	}
 }
 
@@ -1666,9 +1694,9 @@ const importsMap$1 = {
 	$unwrap: "import { $unwrap } from \"${folder}\";",
 	$peek: "import { $peek } from \"${folder}\";",
 	$batch: "import { $batch } from \"${folder}\";",
-	t_range: "import { t_range } from \"${folder}\";",
-	t_push_range: "import { t_push_range } from \"${folder}\";",
-	t_pop_range: "import { t_pop_range } from \"${folder}\";",
+	t_region: "import { t_region } from \"${folder}\";",
+	t_push_region: "import { t_push_region } from \"${folder}\";",
+	t_pop_region: "import { t_pop_region } from \"${folder}\";",
 	t_run_control: "import { t_run_control } from \"${folder}\";",
 	t_run_branch: "import { t_run_branch } from \"${folder}\";",
 	t_list_item: "import { t_list_item } from \"${folder}\";",
@@ -1694,7 +1722,10 @@ const importsMap$1 = {
 	t_cmt: "import { t_cmt } from \"${folder}\";",
 	t_print: "import { t_print } from \"${folder}\";",
 	ListItem: "import { type ListItem } from \"${folder}\";",
-	SlotRender: "import { type SlotRender } from \"${folder}\";"
+	SlotRender: "import { type SlotRender } from \"${folder}\";",
+	devContext: "import { devContext } from \"${folder}/dev\";",
+	t_push_dev_bound: "import { t_push_dev_bound } from \"${folder}/dev\";",
+	t_pop_dev_bound: "import { t_pop_dev_bound } from \"${folder}/dev\";"
 };
 function buildCode(template, map, options) {
 	let b = new Builder(options?.mapped);
@@ -1705,8 +1736,10 @@ function buildCode(template, map, options) {
 	if (imports.size) {
 		b.prepend("");
 		for (let imp of Array.from(imports).sort().reverse()) {
-			imp = importsMap$1[imp] || imp;
-			b.prepend(imp.replace("${folder}", options?.renderFolder || "@torpor/view"));
+			let importStatement = importsMap$1[imp] ?? imp;
+			let folder = options?.renderFolder ?? "@torpor/view";
+			importStatement = importStatement.replace("${folder}", folder);
+			b.prepend(importStatement);
 		}
 	}
 	if (options?.mapped) {
@@ -1729,7 +1762,11 @@ function buildTemplate(template, map, imports, b, options) {
 	if (/\$batch\b/.test(script)) imports.add("$batch");
 	let currentIndex = 0;
 	let current = template.components[0];
+	let status = makeStatus(imports, map, current, options);
+	let first = true;
 	for (let chunk of template.script) if (chunk.script === "/* @params */") {
+		if (!first) status = makeStatus(imports, map, current, options);
+		first = false;
 		let params = [
 			`${current.markup ? "$parent" : "_$parent"}: ParentNode`,
 			`${current.markup ? "$anchor" : "_$anchor"}: Node | null`,
@@ -1740,12 +1777,12 @@ function buildTemplate(template, map, imports, b, options) {
 		b.append(params.join(",\n"));
 	} else if (chunk.script === ") /* @return_type */ {") b.append("): void {");
 	else if (chunk.script === "/* @start */") {
+		addPushDevBoundary("component", current.name || "Anon Component", status, b);
 		if (current.contextProps?.length) b.append(`$context = Object.assign({}, $context);`);
 		b.append("$peek(() => { /**/");
 		b.append("");
 	} else if (chunk.script === "/* @render */") {
 		if (current.markup) {
-			let status = makeStatus(imports, map, current, options);
 			b.append("");
 			b.append("/* User interface */");
 			buildFragmentText(current.markup, status, b);
@@ -1754,7 +1791,6 @@ function buildTemplate(template, map, imports, b, options) {
 		}
 	} else if (chunk.script === "/* @head */") {
 		if (current.head) {
-			let status = makeStatus(imports, map, current, options);
 			b.append("");
 			b.append("/* Head */");
 			status.inHead = true;
@@ -1762,13 +1798,11 @@ function buildTemplate(template, map, imports, b, options) {
 			status.inHead = false;
 		}
 	} else if (chunk.script === "/* @style */") {} else if (chunk.script === "/* @end */") {
+		addPopDevBoundary(status, b);
 		b.append("/**/ });");
 		currentIndex += 1;
 		current = template.components[currentIndex];
-	} else {
-		let status = makeStatus(imports, map, current, options);
-		addMappedText("", chunk.script, "", chunk.range, status, b);
-	}
+	} else addMappedText("", chunk.script, "", chunk.span, status, b);
 }
 function makeStatus(imports, map, current, options) {
 	return {
@@ -1783,7 +1817,8 @@ function makeStatus(imports, map, current, options) {
 		forVarNames: [],
 		ns: false,
 		preserveWhitespace: false,
-		options
+		inHead: false,
+		options: options ?? {}
 	};
 }
 
@@ -2133,12 +2168,7 @@ function buildServerElementNode(node, status, b) {
 function buildElementAttributes(node, status) {
 	let needsClass = node.scopeStyles;
 	let attributes = [];
-	for (let { name, value, reactive, fullyReactive } of node.attributes) if (name === "self" && node.tagName === "@element") {} else if (name === "&ref") {} else if (name.startsWith("on") || name.startsWith(":on")) {} else if (name.startsWith("transition") && value) {
-		value = value.split(",")[0].trim();
-		if (value.startsWith("[")) value = value.substring(1);
-		else value = value + "[0]";
-		attributes.push(`style="\${Object.entries(${value}).map(([k, v]) => \`$\{k}: $\{v}\`).join("; ")}"`);
-	} else if (value != null && fullyReactive) if (name === "&value" || name === "&checked" || name === "&group") {
+	for (let { name, value, reactive, fullyReactive } of node.attributes) if (name === "self" && node.tagName === "@element") {} else if (name === "&ref") {} else if (name.startsWith("on") || name.startsWith(":on")) {} else if (name.startsWith("transition") && value) {} else if (value != null && fullyReactive) if (name === "&value" || name === "&checked" || name === "&group") {
 		let defaultValue = "";
 		let typeAttribute = node.attributes.find((a) => a.name === "type");
 		if (typeAttribute && typeAttribute.value) switch (trimQuotes(typeAttribute.value)) {
@@ -2415,14 +2445,12 @@ function buildServerTemplate(template, imports, b, options) {
 */
 function build(template, options) {
 	let map = [];
-	let code = options?.server ? buildServerCode(template, options) : buildCode(template, map, options);
-	let styles = template.components.map((c) => c.style ? {
-		style: buildStyles(c.style, c.style.hash),
-		hash: c.style.hash
-	} : void 0).filter((c) => c !== void 0);
 	return {
-		code,
-		styles,
+		code: options?.server ? buildServerCode(template, options) : buildCode(template, map, options),
+		styles: template.components.map((c) => c.style ? {
+			style: buildStyles(c.style, c.style.hash),
+			hash: c.style.hash
+		} : void 0).filter((c) => c !== void 0),
 		map
 	};
 }
@@ -2550,7 +2578,7 @@ function addSpaceElement(parent, status) {
 			const space = {
 				type: "text",
 				content,
-				ranges: []
+				spans: []
 			};
 			parent.children.push(space);
 		}
@@ -2650,7 +2678,7 @@ function parseTag(status) {
 		closed: selfClosed || void 0,
 		attributes,
 		children: [],
-		range: {
+		span: {
 			start: tagStart,
 			end: tagEnd
 		}
@@ -2703,7 +2731,7 @@ function parseAttribute(status) {
 		value,
 		reactive,
 		fullyReactive,
-		range: {
+		span: {
 			start: valueStart,
 			end: valueEnd
 		}
@@ -2732,7 +2760,7 @@ function parseAttributeValue(status) {
 //#endregion
 //#region src/compile/parse/parseText.ts
 function parseText(status, element) {
-	let ranges = [];
+	let spans = [];
 	const start = status.i;
 	let end = -1;
 	for (let j = status.i; j < status.source.length; j++) {
@@ -2756,7 +2784,7 @@ function parseText(status, element) {
 					}
 				}
 			}
-			ranges.push({
+			spans.push({
 				start: reactiveStart,
 				end: j
 			});
@@ -2776,12 +2804,12 @@ function parseText(status, element) {
 			const previousNode = element.children[element.children.length - 1];
 			if (previousNode && isTextNode(previousNode)) {
 				previousNode.content += content + spaceContent;
-				previousNode.ranges.push(...ranges);
+				previousNode.spans.push(...spans);
 			} else {
 				const text = {
 					type: "text",
 					content: content + spaceContent,
-					ranges
+					spans
 				};
 				element.children.push(text);
 			}
@@ -2806,7 +2834,7 @@ function slottifyChildNodes(node) {
 				tagName: "fill",
 				attributes: [],
 				children: nonFillNodes,
-				range: {
+				span: {
 					start: 0,
 					end: 0
 				}
@@ -2869,8 +2897,7 @@ function parseElement(status) {
 	}
 	if (voidTags_default.includes(element.tagName)) checkVoidElement(status, element);
 	if (!element.selfClosed && !voidTags_default.includes(element.tagName)) {
-		current.stack ??= [];
-		current.stack.push(element);
+		status.stack.push(element);
 		while (status.i < status.source.length) {
 			addSpaceElement(element, status);
 			if (accept("}", status, false)) break;
@@ -2878,14 +2905,14 @@ function parseElement(status) {
 			else if (accept("@//", status)) status.i = status.source.indexOf("\n", status.i) + 1;
 			else if (accept("@/*", status)) status.i = status.source.indexOf("*/", status.i) + 2;
 			else if (accept("</", status, false)) {
-				if (checkCloseTag(status, element, current)) break;
+				if (checkCloseTag(status, element)) break;
 			} else if (accept("<", status, false)) {
 				const child = parseElement(status);
 				element.children.push(child);
 			} else if (accept("@", status, false)) parseControl(status, element);
 			else parseText(status, element);
 		}
-		current.stack.pop();
+		status.stack.pop();
 	}
 	if (/[A-Z]/.test(element.tagName[0])) {
 		element.type = "component";
@@ -2914,12 +2941,12 @@ function parseElement(status) {
 						operation: "@replace",
 						statement: selfValue,
 						children: [element],
-						range: {
+						span: {
 							start: 0,
 							end: 0
 						}
 					}],
-					range: {
+					span: {
 						start: 0,
 						end: 0
 					}
@@ -2944,7 +2971,7 @@ function checkVoidElement(status, element) {
 	}
 	status.i = i;
 }
-function checkCloseTag(status, element, current) {
+function checkCloseTag(status, element) {
 	const start = status.i;
 	accept("</", status);
 	consumeSpace(status);
@@ -2954,12 +2981,10 @@ function checkCloseTag(status, element, current) {
 	consumeSpace(status);
 	accept(">", status);
 	let found = false;
-	if (current.stack) {
-		for (let i = current.stack.length - 1; i >= 0; i--) if (closingTagName === current.stack[i].tagName) {
-			current.stack[i].closed = true;
-			found = true;
-			break;
-		}
+	for (let i = status.stack.length - 1; i >= 0; i--) if (closingTagName === status.stack[i].tagName) {
+		status.stack[i].closed = true;
+		found = true;
+		break;
 	}
 	if (!found) addError(status, `Non-matching close tag: ${closingTagName} (expected ${element.tagName})`, start, start + element.tagName.length + 1);
 	return found;
@@ -3049,7 +3074,7 @@ function parseControlOpen(status) {
 		operation,
 		statement,
 		children: [],
-		range: {
+		span: {
 			start: statementStart,
 			end: status.i
 		}
@@ -3082,7 +3107,7 @@ function wrangleControlNode(node, parentNode) {
 			operation: "@if group",
 			statement: "",
 			children: [node],
-			range: {
+			span: {
 				start: 0,
 				end: 0
 			}
@@ -3103,7 +3128,7 @@ function wrangleControlNode(node, parentNode) {
 			operation: "@for group",
 			statement: "",
 			children: [node],
-			range: {
+			span: {
 				start: 0,
 				end: 0
 			}
@@ -3118,7 +3143,7 @@ function wrangleControlNode(node, parentNode) {
 			operation: "@await group",
 			statement: "",
 			children: [node],
-			range: {
+			span: {
 				start: 0,
 				end: 0
 			}
@@ -3137,7 +3162,7 @@ function wrangleControlNode(node, parentNode) {
 			operation: "@replace group",
 			statement: "",
 			children: [node],
-			range: {
+			span: {
 				start: 0,
 				end: 0
 			}
@@ -3149,7 +3174,7 @@ function wrangleControlNode(node, parentNode) {
 			operation: "@html group",
 			statement: "",
 			children: [node],
-			range: {
+			span: {
 				start: 0,
 				end: 0
 			}
@@ -3193,7 +3218,7 @@ function parseMarkup(status, source) {
 		const text = {
 			type: "text",
 			content: consumeSpace(status),
-			ranges: []
+			spans: []
 		};
 		current.markup.children.push(text);
 	} else if (accept("<", status, false)) {
@@ -3263,6 +3288,7 @@ function parseStyles(source, status) {
 		imports: [],
 		script: [],
 		components: [],
+		stack: [],
 		errors: []
 	};
 	while (styleStatus.i < styleStatus.source.length) if (isSpaceChar(styleStatus.source, styleStatus.i)) consumeSpace(styleStatus);
@@ -3361,6 +3387,7 @@ function parseCode(source) {
 		imports: [],
 		script: [],
 		components: [],
+		stack: [],
 		errors: []
 	};
 	for (status.i; status.i < source.length; status.i++) if (consumeScriptComments(status)) {} else if (status.source[status.i] === "{") status.level += 1;
@@ -3392,7 +3419,7 @@ function parseCode(source) {
 	else if (accept("@style", status, false)) parseComponentStyle(status);
 	status.script.push({
 		script: source.substring(status.marker, source.length),
-		range: {
+		span: {
 			start: status.marker,
 			end: source.length
 		}
@@ -3406,23 +3433,7 @@ function parseCode(source) {
 		template: ok ? {
 			imports: status.imports,
 			script: status.script,
-			components: status.components.map((c) => {
-				return {
-					start: c.start,
-					name: c.name,
-					exported: c.exported,
-					default: c.default,
-					documentation: c.documentation,
-					params: c.params,
-					markup: c.markup,
-					head: c.head,
-					style: c.style,
-					propsType: c.propsType,
-					props: c.props,
-					contextProps: c.contextProps,
-					slotProps: c.slotProps
-				};
-			})
+			components: status.components
 		} : void 0
 	};
 }
@@ -3432,11 +3443,9 @@ function parseComponentStart(status) {
 	let def = /export\s+default\s+(function\s+|const\s+)*$/.test(source);
 	let isConst = /const\s+$/.test(source);
 	let isAnon = /export default\s+$/.test(source);
-	let componentStart = status.i;
-	let name = consumeAlphaNumeric(status);
 	const current = {
-		start: componentStart,
-		name,
+		start: status.i,
+		name: consumeAlphaNumeric(status),
 		exported,
 		default: def
 	};
@@ -3470,14 +3479,14 @@ function parseComponentStart(status) {
 	}
 	status.script.push({
 		script: status.source.substring(status.marker, start),
-		range: {
+		span: {
 			start: status.marker,
 			end: start
 		}
 	});
 	status.script.push({
 		script: "/* @params */",
-		range: {
+		span: {
 			start: 0,
 			end: 0
 		}
@@ -3491,7 +3500,7 @@ function parseComponentStart(status) {
 		if (propsTypeStart !== -1) {
 			let bracesStart = status.source.indexOf("{", propsTypeStart);
 			if (bracesStart !== -1) {
-				const status2 = {
+				const propsType = parseInlineScript({
 					source: status.source,
 					i: bracesStart + 1,
 					marker: 0,
@@ -3499,9 +3508,9 @@ function parseComponentStart(status) {
 					imports: [],
 					script: [],
 					components: [],
+					stack: [],
 					errors: []
-				};
-				const propsType = parseInlineScript(status2);
+				});
 				if (propsType) current.propsType = `${status.source.substring(propsTypeStart, bracesStart)}{${propsType}}`;
 			}
 		}
@@ -3518,7 +3527,7 @@ function parseComponentStart(status) {
 	status.level += 1;
 	const postFunctionChunk = {
 		script: status.source.substring(status.marker, status.i),
-		range: {
+		span: {
 			start: status.marker,
 			end: status.i
 		}
@@ -3527,7 +3536,7 @@ function parseComponentStart(status) {
 	status.script.push(postFunctionChunk);
 	status.script.push({
 		script: "/* @start */",
-		range: {
+		span: {
 			start: 0,
 			end: 0
 		}
@@ -3536,7 +3545,7 @@ function parseComponentStart(status) {
 	const space = consumeSpace(status);
 	status.script.push({
 		script: space,
-		range: {
+		span: {
 			start: status.marker,
 			end: status.i
 		}
@@ -3550,14 +3559,14 @@ function parseComponentRender(status) {
 	if (current.markup) addError(status, `Multiple @render sections`, status.i, status.i + 7);
 	status.script.push({
 		script: status.source.substring(status.marker, status.i),
-		range: {
+		span: {
 			start: status.marker,
 			end: status.i
 		}
 	});
 	status.script.push({
 		script: "/* @render */",
-		range: {
+		span: {
 			start: 0,
 			end: 0
 		}
@@ -3576,14 +3585,14 @@ function parseComponentHead(status) {
 	if (current.head) addError(status, `Multiple @head sections`, status.i, status.i + 5);
 	status.script.push({
 		script: status.source.substring(status.marker, status.i),
-		range: {
+		span: {
 			start: status.marker,
 			end: status.i
 		}
 	});
 	status.script.push({
 		script: "/* @head */",
-		range: {
+		span: {
 			start: 0,
 			end: 0
 		}
@@ -3604,14 +3613,14 @@ function parseComponentStyle(status) {
 	if (current.style) addError(status, `Multiple @style sections`, status.i, status.i + 6);
 	status.script.push({
 		script: status.source.substring(status.marker, status.i),
-		range: {
+		span: {
 			start: status.marker,
 			end: status.i
 		}
 	});
 	status.script.push({
 		script: "/* @style */",
-		range: {
+		span: {
 			start: 0,
 			end: 0
 		}
@@ -3655,14 +3664,14 @@ function parseComponentEnd(status) {
 	if (!current) return;
 	status.script.push({
 		script: status.source.substring(status.marker, status.i),
-		range: {
+		span: {
 			start: status.marker,
 			end: status.i
 		}
 	});
 	status.script.push({
 		script: "/* @end */",
-		range: {
+		span: {
 			start: 0,
 			end: 0
 		}