@torpor/view 0.3.4 → 0.4.0

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

@@ -1,4 +1,4 @@
-import type SourceRange from "../../types/SourceRange";
+import type SourceSpan from "../../types/SourceSpan";
 import type ElementNode from "../../types/nodes/ElementNode";
 import type TextNode from "../../types/nodes/TextNode";
 import Builder from "../../utils/Builder";
@@ -74,7 +74,8 @@ function buildDynamicElementNode(node: ElementNode, status: BuildStatus, b: Buil
 		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;
@@ -92,7 +93,7 @@ function buildDynamicElementNode(node: ElementNode, status: BuildStatus, b: Buil
 
 		buildAddFragment(node, status, b, parentName!, "null");
 
-		b.append(`});`);
+		b.append(`}${status.options.dev === true ? `, "setDynamic"` : ""});`);
 	}
 }
 
@@ -130,19 +131,19 @@ function buildTitleNode(node: ElementNode, status: BuildStatus, b: Builder) {
 	}
 
 	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: ElementNode, status: BuildStatus, b: Builder) {
 	status.imports.add("$run");
 	// TODO: dedupe e.g. <meta name="x"> or on special key
+	b.append("$run(() => {");
 	b.append(`
-		$run(function runHead() {
 			const t_headel = document.createElement("${node.tagName}");
 			document.getElementsByTagName("head")[0].appendChild(t_headel);`);
 	for (let { name, value } of node.attributes) {
@@ -151,8 +152,7 @@ function buildHeadNode(node: ElementNode, status: BuildStatus, b: Builder) {
 			b.append(`t_attribute(t_headel, "${name}", ${value});`);
 		}
 	}
-	b.append(`
-		});`);
+	b.append(`}${status.options.dev === true ? `, "runHead"` : ""});`);
 }
 
 function buildElementAttributes(
@@ -177,7 +177,7 @@ function buildElementAttributes(
 		}
 	}
 
-	for (let { name, value, reactive, range } of node.attributes) {
+	for (let { name, value, reactive, span: range } of node.attributes) {
 		if (name === "self" && node.tagName === "@element") {
 			// Ignore this special attribute
 		} else if (name === "&ref") {
@@ -313,7 +313,7 @@ function buildEventAttribute(
 	varName: string,
 	name: string,
 	value: string,
-	range: SourceRange,
+	span: SourceSpan,
 	status: BuildStatus,
 	b: Builder,
 ) {
@@ -322,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");
-	addMappedText(`t_event(${varName}, "${eventName}", `, value, `);`, range, status, b);
+	addMappedText(`t_event(${varName}, "${eventName}", `, value, `);`, span, status, b);
 }
 
 function buildTransitionAttribute(
@@ -344,18 +344,18 @@ function buildTransitionAttribute(
 	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") {
@@ -364,56 +364,10 @@ function buildTransitionAttribute(
 			// This has already been handled with transition-in, above
 			return;
 		} else {
-			b.append(`const ${exitVarName} = ${getAnimationDetails(value)};`);
+			b.append(`const ${exitVarName} = (${value})(${varName});`);
 			b.append(`t_animate(${varName}, null, ${entryVarName});`);
 		}
 	} else {
 		// TODO: Add an error
 	}
 }
-
-function getAnimationDetails(value: string) {
-	// HACK: Split by commas, but not when in brackets
-	let parts: string[] = [];
-	let start = 0;
-	let squareCount = 0;
-	let curlyCount = 0;
-	for (let i = 0; i < value.length; i++) {
-		let char = value[i];
-		switch (char) {
-			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 func = parts[0].trim();
-	//let isAnimateFunction = func === "animate";
-	//let options = isAnimateFunction ? parts[2]?.trim() : parts[1]?.trim();
-	//let keyframes = isAnimateFunction ? parts[1]?.trim() : undefined;
-	//if (isAnimateFunction) {
-	//	status.imports.add("t_animate");
-	//	func = "t_animate";
-	//}
-
-	let keyframes = parts[0]?.trim();
-	let options = parts[1]?.trim();
-
-	return `{ ${[`keyframes: ${keyframes}`, options ? `options: ${options}` : null].filter(Boolean).join(", ")} }`;
-}

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

@@ -6,17 +6,20 @@ import trimMatched from "../../utils/trimMatched";
 import nextVarName from "../utils/nextVarName";
 import type BuildStatus from "./BuildStatus";
 import addMappedText from "./addMappedText";
+import addPopDevBoundary from "./addPopDevBoundary";
+import addPushDevBoundary from "./addPushDevBoundary";
 import buildAddFragment from "./buildAddFragment";
 import buildFragment from "./buildFragment";
 import buildNode from "./buildNode";
+import replaceForVarNames from "./replaceForVarNames";
 
 const forLoopRegex = /for\s*\((.+?);.*?;.*?\)/;
 const forLoopVarsRegex = /(?:let\s+|var\s+){0,1}([^\s,;+=]+)(?:\s*=\s*[^,;]+){0,1}/g;
 const forOfRegex = /for\s*\(\s*(?:let\s*|var\s*){0,1}(.+?)\s+(?:of|in).*?\)/;
 
 export default function buildForNode(node: ControlNode, status: BuildStatus, b: Builder): void {
-	const forParentName = node.parentName!;
-	const forAnchorName = node.varName!;
+	const parentName = node.parentName!;
+	const anchorName = node.varName!;
 
 	// HACK:
 	node = node.children[0] as ControlNode;
@@ -49,7 +52,13 @@ export default function buildForNode(node: ControlNode, status: BuildStatus, b:
 		}
 	}
 
-	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);
 
 	// Get the key node if it's been set
 	const key = node.children.find(
@@ -60,59 +69,77 @@ export default function buildForNode(node: ControlNode, status: BuildStatus, b:
 		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;`);
+
+	// TODO: replaceForVarNames is going to throw mapping out
+	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);
+			let ${newItemName} = t_list_item(${params.join(", ")});
+			${newItemName}.previousRegion = ${previousItemName};
+			${previousItemName}.nextRegion = ${newItemName};
+			${previousItemName} = ${newItemName};
+			${listItemsName}.push(${newItemName});
 		}
-		${forRangeName}.nextRange = t_next_item;
-		return t_new_items;
+		${regionName}.nextRegion = ${nextItemName};
+		return ${listItemsName};
 	},
-	function createListItem(t_item, t_before) {`);
+	${status.options.dev === true ? `function createListItem(${itemName}, ${beforeName}) {` : `(${itemName}, ${beforeName}) => {`}`);
 
-	status.forVarNames = forVarNames;
-	buildForItem(node, status, b, forParentName);
-	status.forVarNames = [];
+	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: ControlNode, status: BuildStatus, b: Builder, parentName: string) {
-	const oldRangeName = nextVarName("old_range", status);
+function buildForItem(
+	node: ControlNode,
+	status: BuildStatus,
+	b: Builder,
+	parentName: string,
+	beforeName: string,
+	itemName: string,
+) {
+	const oldRegionName = nextVarName("old_region", status);
 
-	status.imports.add("t_push_range");
-	b.append(`let ${oldRangeName} = t_push_range(t_item);`);
+	status.imports.add("t_push_region");
+	b.append(`let ${oldRegionName} = t_push_region(${itemName});`);
 
-	buildFragment(node, status, b, parentName, "t_before");
+	buildFragment(node, status, b, parentName, beforeName);
 
 	status.fragmentStack.push({
 		fragment: node.fragment!,
@@ -122,11 +149,11 @@ function buildForItem(node: ControlNode, status: BuildStatus, b: Builder, parent
 		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");
+	buildAddFragment(node, status, b, parentName, beforeName);
 
 	// If we wanted to return the fragment instead:
 	//b.append(`t_item.startNode = t_fragment_1.firstChild;`);
@@ -135,8 +162,8 @@ function buildForItem(node: ControlNode, status: BuildStatus, b: Builder, parent
 	//  b.append(`${ev.varName}.addEventListener("${ev.eventName}", ${ev.handler});`);
 	//}
 
-	status.imports.add("t_pop_range");
-	b.append(`t_pop_range(${oldRangeName});`);
+	status.imports.add("t_pop_region");
+	b.append(`t_pop_region(${oldRegionName});`);
 
 	// If we wanted to return the fragment instead:
 	//b.append(`return t_fragment_${node.fragment!.number};`);

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

@@ -35,7 +35,7 @@ export default function buildFragment(
 	if (node.fragment) {
 		const fragment = node.fragment;
 		const fragmentName = `t_fragment_${fragment.number}`;
-		if (status.options?.useCreateElement) {
+		if (status.options.useCreateElement === true) {
 			// Declarations, then createXxx calls
 			let fragmentPath = { parent: null, type: "fragment", children: [] };
 			let varPaths = new Map<string, string>();
@@ -382,7 +382,7 @@ function declareElementFragmentVars(
 				fragment.endVarName = node.varName;
 			}
 			const varPath = getFragmentVarPath(fragment, status, node.varName, elementPath, varPaths);
-			if (status.options?.useCreateElement) {
+			if (status.options.useCreateElement === true) {
 				b.append(`let ${node.varName};`);
 			} else {
 				if (node.tagName === "@element") {
@@ -490,7 +490,7 @@ function declareTextFragmentVars(
 				fragment.endVarName = node.varName;
 			}
 			const varPath = getFragmentVarPath(fragment, status, node.varName, textPath, varPaths);
-			if (status.options?.useCreateElement) {
+			if (status.options.useCreateElement === true) {
 				b.append(`let ${node.varName};`);
 			} else {
 				b.append(`const ${node.varName} = ${varPath};`);
@@ -627,7 +627,7 @@ function declareParentAndAnchorFragmentVars(
 		} else {
 			if (declare) {
 				node.parentName = nextVarName(`${name}_parent`, status);
-				if (status.options?.useCreateElement) {
+				if (status.options.useCreateElement === true) {
 					b.append(`let ${node.parentName} as HTMLElement;`);
 				} else {
 					b.append(`const ${node.parentName} = ${parentVarPath} as HTMLElement;`);
@@ -648,7 +648,7 @@ function declareParentAndAnchorFragmentVars(
 
 		node.varName = nextVarName(`${name}_anchor`, status);
 		const anchorVarPath = getFragmentVarPath(fragment, status, node.varName, anchorPath, varPaths);
-		if (status.options?.useCreateElement) {
+		if (status.options.useCreateElement === true) {
 			b.append(`let ${node.varName};`);
 		} else {
 			status.imports.add("t_anchor");

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

@@ -9,23 +9,23 @@ import buildAddFragment from "./buildAddFragment";
 export default function buildHtmlNode(node: ControlNode, status: BuildStatus, b: Builder): void {
 	const htmlAnchorName = node.varName!;
 	const htmlParentName = node.parentName || htmlAnchorName + ".parentNode";
-	const htmlRangeName = nextVarName("html_range", status);
+	const htmlRegionName = nextVarName("html_region", status);
 
 	// HACK: I'm not actually sure we need this here (or in @replace, where I copied it from)
 	node = node.children[0] as ControlNode;
 
-	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) => {`);
+	const ${htmlRegionName} = t_region(${status.options.dev === true ? `"html"` : ""});
+	t_run_control(${htmlRegionName}, ${htmlAnchorName}, (t_before) => {`);
 
-	buildHtmlBranch(node, status, b, htmlParentName, htmlRangeName);
+	buildHtmlBranch(node, status, b, htmlParentName, htmlRegionName);
 
-	b.append("});");
+	b.append(`}${status.options.dev === true ? ', "html"' : ""});`);
 	b.append("");
 }
 
@@ -34,12 +34,12 @@ function buildHtmlBranch(
 	status: BuildStatus,
 	b: Builder,
 	parentName: string,
-	rangeName: string,
+	regionName: string,
 ) {
 	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}`;
@@ -49,5 +49,5 @@ function buildHtmlBranch(
 
 	buildAddFragment(node, status, b, parentName, "t_before");
 
-	b.append(`});`);
+	b.append(`}${status.options.dev === true ? ', "html"' : ""});`);
 }

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

@@ -4,6 +4,8 @@ import isControlNode from "../../utils/isControlNode";
 import nextVarName from "../utils/nextVarName";
 import type BuildStatus from "./BuildStatus";
 import addMappedText from "./addMappedText";
+import addPopDevBoundary from "./addPopDevBoundary";
+import addPushDevBoundary from "./addPushDevBoundary";
 import buildAddFragment from "./buildAddFragment";
 import buildFragment from "./buildFragment";
 import buildNode from "./buildNode";
@@ -14,7 +16,7 @@ import replaceForVarNames from "./replaceForVarNames";
 export default function buildIfNode(node: ControlNode, status: BuildStatus, b: Builder): void {
 	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);
 
@@ -28,35 +30,44 @@ export default function buildIfNode(node: ControlNode, status: BuildStatus, b: B
 			operation: "@else",
 			statement: "else",
 			children: [],
-			range: { start: 0, end: 0 },
+			span: { start: 0, end: 0 },
 		};
 		branches.push(elseBranch);
 	}
 
 	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)[] = [];`);
+		let ${creatorsName}: ((t_before: Node | null) => void)[] = [];
+		$run(() => {`);
 
-	b.append(`$run(function runIf() {`);
 	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;`);
+	//addPushDevBoundary("branch", "`branch ${index}`", status, b);
+	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("");
 }
 
@@ -70,7 +81,7 @@ function buildIfBranch(
 	index: number,
 ) {
 	// TODO: replaceForVarNames is going to throw mapping out
-	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) => {`);

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

@@ -12,23 +12,23 @@ import replaceForVarNames from "./replaceForVarNames";
 export default function buildReplaceNode(node: ControlNode, status: BuildStatus, b: Builder): void {
 	const replaceAnchorName = node.varName!;
 	const replaceParentName = node.parentName || replaceAnchorName + ".parentNode";
-	const replaceRangeName = nextVarName("replace_range", status);
+	const replaceRegionName = nextVarName("replace_region", status);
 
 	// HACK:
 	node = node.children[0] as ControlNode;
 
-	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) => {`);
+	const ${replaceRegionName} = t_region(${status.options.dev === true ? `"replace"` : ""});
+	t_run_control(${replaceRegionName}, ${replaceAnchorName}, (t_before) => {`);
 
-	buildReplaceBranch(node, status, b, replaceParentName, replaceRangeName);
+	buildReplaceBranch(node, status, b, replaceParentName, replaceRegionName);
 
-	b.append("});");
+	b.append(`}${status.options.dev === true ? ', "replace"' : ""});`);
 	b.append("");
 }
 
@@ -37,12 +37,12 @@ function buildReplaceBranch(
 	status: BuildStatus,
 	b: Builder,
 	parentName: string,
-	rangeName: string,
+	regionName: string,
 ) {
 	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");
 
@@ -57,5 +57,5 @@ function buildReplaceBranch(
 
 	buildAddFragment(node, status, b, parentName, "t_before");
 
-	b.append(`});`);
+	b.append(`}${status.options.dev === true ? ', "replace"' : ""});`);
 }

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

@@ -1,5 +1,7 @@
 import Builder from "../../utils/Builder";
 import type BuildStatus from "./BuildStatus";
+import addPopDevBoundary from "./addPopDevBoundary";
+import addPushDevBoundary from "./addPushDevBoundary";
 import replaceForVarNames from "./replaceForVarNames";
 
 export default function buildRun(
@@ -10,8 +12,12 @@ export default function buildRun(
 ): void {
 	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);
 }

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

@@ -5,7 +5,7 @@ import addMappedText from "./addMappedText";
 
 export default function buildScriptNode(node: ControlNode, status: BuildStatus, b: Builder): void {
 	b.append(`/* ${node.operation} */`);
-	addMappedText("", `${maybeAppend(node.statement, ";")}`, "", node.range, status, b);
+	addMappedText("", `${maybeAppend(node.statement, ";")}`, "", node.span, status, b);
 }
 
 function maybeAppend(text: string, end: string) {