vigla 0.0.0 → 0.2.0

package/src/compiler/client/index.ts

@@ -0,0 +1,307 @@
+import type * as ES from 'estree';
+import type { Format } from '../../shared/format.ts';
+import type { ExpressionProjection, RuntimeNames } from '../ir/runtime.ts';
+import {
+	ignoring,
+	patternNames,
+	spanOf,
+	unsupported,
+	type ComponentAnalysis,
+	type ModuleAnalysis
+} from '../analysis/index.ts';
+import type { InjectedStyle, Scoping } from '../css/index.ts';
+import * as b from '../ir/estree.ts';
+import { hotComponent } from './hot.ts';
+import { accessors, customElement } from './custom-element.ts';
+import { prepare } from './external.ts';
+import { deferExports } from './exports.ts';
+import { traceStacks } from './inspect.ts';
+import { Positions } from './meta.ts';
+import { ownership } from './ownership.ts';
+import { losses } from './loss.ts';
+import { read, rewrite, runtime, type Context } from './script.ts';
+import { separateCode } from './special.ts';
+import type { Fragments } from './markup.ts';
+import { render, type TemplateContext } from './template.ts';
+
+export type { Fragments } from './markup.ts';
+
+export interface ModuleOptions {
+	readonly runtime: string;
+	readonly runtimeNames?: RuntimeNames;
+	readonly project?: ExpressionProjection;
+	readonly dev: boolean;
+}
+
+export interface ClientOptions extends ModuleOptions {
+	readonly name: string;
+	readonly format: Format;
+	readonly scoping: Scoping;
+	readonly styles: InjectedStyle | null;
+	readonly hmr: boolean;
+	readonly filename: string;
+	readonly discloseVersion: string | false;
+	readonly fragments: Fragments;
+}
+
+function topLevelAwaits(analysis: ComponentAnalysis): Set<ES.Node> {
+	const found = new Set<ES.Node>();
+	const program = analysis.unit.instance;
+	if (program === null) return found;
+	b.walk(program, (node) => {
+		if (
+			node.type === 'FunctionDeclaration' ||
+			node.type === 'FunctionExpression' ||
+			node.type === 'ArrowFunctionExpression' ||
+			node.type === 'ClassBody'
+		) {
+			return false;
+		}
+		if (node.type === 'CallExpression') {
+			const rune = analysis.runes.get(node.callee);
+			if (rune === '$derived' || rune === '$derived.by') return false;
+		}
+		if (node.type === 'AwaitExpression') found.add(node);
+	});
+	return found;
+}
+
+function declaredNames(declaration: ES.Declaration): ES.Identifier[] {
+	if (declaration.type === 'VariableDeclaration') {
+		return declaration.declarations.flatMap((declarator) => patternNames(declarator.id));
+	}
+	return declaration.id === null ? [] : [declaration.id];
+}
+
+function exportProperties(context: Context, name: string, local: ES.Identifier): ES.Property[] {
+	const binding =
+		context.analysis.references.get(local) ?? context.analysis.declarations.get(local);
+	const value =
+		(binding === undefined ? undefined : read(context, { ...local }, binding)) ??
+		rewrite(context, local);
+	const getter: ES.Property = {
+		type: 'Property',
+		key: b.literal(name),
+		value: b.functionExpression([], [{ type: 'ReturnStatement', argument: value }]),
+		kind: 'get',
+		method: false,
+		shorthand: false,
+		computed: false
+	};
+	const next = b.id(context.names.unique('$$value'));
+	let write: ES.Expression | undefined;
+	if (binding?.kind === 'prop') write = b.call({ ...local }, next);
+	else if (binding?.kind === 'state' || binding?.kind === 'raw-state')
+		write = runtime(
+			context,
+			'set',
+			{ ...local },
+			binding.kind === 'state' ? runtime(context, 'proxy', next) : next
+		);
+	else if (
+		binding?.kind === 'normal' &&
+		(binding.declarationKind === 'let' || binding.declarationKind === 'var')
+	)
+		write = { type: 'AssignmentExpression', operator: '=', left: { ...local }, right: next };
+	return write === undefined
+		? [getter]
+		: [
+				getter,
+				{
+					...getter,
+					kind: 'set',
+					value: b.functionExpression([next], [b.statement(write)])
+				}
+			];
+}
+
+export function client(analysis: ComponentAnalysis, options: ClientOptions): ES.Program {
+	const names = new b.Names(analysis.names);
+	const id = b.id(names.unique('$'));
+	const anchor = b.id(names.unique('$$anchor'));
+	const props = b.id(names.unique('$$props'));
+	const propsId = [...analysis.runes.values()].includes('$props.id')
+		? b.id(names.unique('$$id'))
+		: undefined;
+	const context: TemplateContext = {
+		analysis,
+		component: analysis,
+		names,
+		runtime: id,
+		propsId,
+		runtimeNames: options.runtimeNames,
+		project: options.dev ? options.project : undefined,
+		plain: new Set(),
+		hoisted: [],
+		props,
+		ownership: options.dev ? ownership(analysis, names) : undefined,
+		losses: options.dev ? losses(analysis.unit.ignores, analysis.ignored) : undefined,
+		ignoring: ignoring(analysis.unit.ignores, analysis.ignored),
+		events: new Set(),
+		groups: new Map(),
+		instance: [],
+		early: [],
+		moduleSetup: [],
+		scoping: options.scoping,
+		positions: new Positions(options.dev ? analysis.unit.source : '', options.filename),
+		filename: options.filename,
+		format: options.format,
+		fragments: options.fragments,
+		dev: options.dev,
+		aliases: new Map(),
+		renamed: new Map(),
+		externalCells: new Map()
+	};
+	traceStacks(context);
+	if (options.discloseVersion !== false) {
+		context.hoisted.push(
+			b.statement(
+				runtime(
+					context,
+					'disclose',
+					b.literal(options.format.global),
+					b.literal(options.discloseVersion)
+				)
+			)
+		);
+	}
+	const imports: ES.ImportDeclaration[] = [];
+	const level: (ES.Statement | ES.ModuleDeclaration)[] = [];
+	for (const statement of analysis.unit.module?.body ?? []) {
+		if (statement.type === 'ImportDeclaration') imports.push(statement);
+		else level.push(rewrite({ ...context, props: null }, statement as ES.Statement));
+	}
+	const body: ES.Statement[] = [];
+	if (options.styles !== null) {
+		const css = names.unique('$$css');
+		const { hash, code } = options.styles;
+		context.hoisted.push(
+			b.constant(css, b.object({ hash: b.literal(hash), code: b.literal(code) }))
+		);
+		body.push(b.statement(runtime(context, 'appendStyles', anchor, b.id(css))));
+	}
+	body.push(b.statement(runtime(context, 'push')));
+	if (propsId !== undefined) body.push(b.constant(propsId.name, runtime(context, 'propsId')));
+	if (context.ownership !== undefined) {
+		body.push(
+			b.constant(
+				context.ownership.validator.name,
+				runtime(context, 'ownership', props, b.literal(options.filename))
+			)
+		);
+	}
+	const script = prepare(context, [...new Set(analysis.externals.values())]);
+	const exported: ES.Property[] = [];
+	const saving: Context = analysis.asynchronous
+		? { ...context, saved: topLevelAwaits(analysis) }
+		: context;
+	for (const statement of analysis.unit.instance?.body ?? []) {
+		if (statement.type === 'ImportDeclaration') imports.push(statement);
+		else if (statement.type === 'ExportNamedDeclaration' && statement.source == null) {
+			if (statement.declaration != null) {
+				script.push(rewrite(saving, statement.declaration));
+				for (const name of declaredNames(statement.declaration)) {
+					exported.push(...exportProperties(context, name.name, name));
+				}
+			}
+			for (const specifier of statement.specifiers) {
+				const local = specifier.local as ES.Identifier;
+				const name =
+					specifier.exported.type === 'Identifier'
+						? specifier.exported.name
+						: String(specifier.exported.value);
+				exported.push(...exportProperties(context, name, local));
+			}
+		} else if (statement.type.startsWith('Export'))
+			throw unsupported(spanOf(statement), 'This export from a component');
+		else script.push(rewrite(saving, statement as ES.Statement));
+	}
+	const exposed = [...exported, ...accessors(context)];
+	const deferred =
+		analysis.asynchronous && exposed.length > 0 ? deferExports(context, exposed) : null;
+	if (deferred !== null) body.push(deferred.setup);
+	const separate = separateCode(context, analysis.unit.template);
+	if (analysis.asynchronous) {
+		const inner = b.id(names.unique('$$anchor'));
+		const template = [
+			...separate,
+			...render(context, analysis.root, inner, analysis.namespace, true)
+		];
+		const fn = b.arrow(
+			[],
+			[
+				...script,
+				...(deferred === null ? [] : [deferred.publish]),
+				{ type: 'ReturnStatement', argument: b.arrow([inner], [...context.instance, ...template]) }
+			]
+		);
+		body.push(b.statement(runtime(context, 'script', anchor, { ...fn, async: true })));
+	} else {
+		const template = render(context, analysis.root, anchor, analysis.namespace, true);
+		body.push(...context.early, ...script, ...context.instance, ...separate, ...template);
+	}
+	body.push({
+		type: 'ReturnStatement',
+		argument: runtime(
+			context,
+			'pop',
+			...(exposed.length > 0
+				? [
+						{
+							type: 'ObjectExpression',
+							properties: deferred?.properties ?? exposed
+						} as ES.ObjectExpression
+					]
+				: [])
+		)
+	});
+	const trailer: ES.Statement[] = options.dev
+		? [
+				b.statement(
+					runtime(context, 'componentSource', b.id(options.name), b.literal(options.filename))
+				)
+			]
+		: [];
+	if (context.events.size > 0) {
+		trailer.push(
+			b.statement(
+				runtime(context, 'delegate', ...[...context.events].map((type) => b.literal(type)))
+			)
+		);
+	}
+	trailer.push(...customElement(context, options.name, exported, options.hmr));
+	const hash = options.scoping.hash === '' ? null : options.scoping.hash;
+	return b.program([
+		b.namespaceImport(id.name, options.runtime),
+		...imports,
+		...context.moduleSetup,
+		...level,
+		...context.hoisted,
+		...(options.hmr
+			? hotComponent(id, options.name, [anchor, props], body, hash)
+			: [b.exportDefaultFunction(options.name, [anchor, props], body)]),
+		...trailer
+	]);
+}
+
+export function clientModule(analysis: ModuleAnalysis, options: ModuleOptions): ES.Program {
+	const names = new b.Names(analysis.names);
+	const id = b.id(names.unique('$'));
+	const context: Context = {
+		analysis,
+		names,
+		runtime: id,
+		runtimeNames: options.runtimeNames,
+		project: options.dev ? options.project : undefined,
+		plain: new Set(),
+		hoisted: [],
+		props: null,
+		filename: analysis.unit.filename ?? '(unknown)',
+		dev: options.dev,
+		losses: options.dev ? losses(analysis.unit.ignores) : undefined,
+		ignoring: ignoring(analysis.unit.ignores)
+	};
+	traceStacks(context);
+	const body = analysis.unit.program.body.map((statement) => rewrite(context, statement));
+	return b.program([b.namespaceImport(id.name, options.runtime), ...context.hoisted, ...body]);
+}

package/src/compiler/client/inspect.ts

@@ -0,0 +1,153 @@
+import type * as ES from 'estree';
+import { patternNames, type Inspection } from '../analysis/index.ts';
+import * as b from '../ir/estree.ts';
+import { runtime, type Context } from './script.ts';
+
+type Next = <T extends ES.Node>(node: T) => T;
+type Function = ES.FunctionDeclaration | ES.FunctionExpression | ES.ArrowFunctionExpression;
+
+export function tagged(
+	context: Context,
+	value: ES.Expression,
+	name: string,
+	signal: boolean
+): ES.Expression {
+	return context.dev
+		? runtime(context, signal ? 'tag' : 'tagProxy', value, b.literal(name))
+		: value;
+}
+
+export function traceStacks(context: Context): void {
+	if (context.dev && [...context.analysis.runes.values()].includes('$inspect.trace')) {
+		context.hoisted.push(b.statement(runtime(context, 'traceStacks')));
+	}
+}
+
+interface Body {
+	readonly declarations: ES.VariableDeclarator[];
+	readonly statements: ES.Statement[];
+}
+
+function hoisted(statements: ES.Statement[]): Body {
+	const names = new Map<string, ES.Identifier>();
+	const initialize = (node: ES.VariableDeclaration): ES.Expression | null => {
+		const assignments: ES.Expression[] = [];
+		for (const declaration of node.declarations) {
+			for (const name of patternNames(declaration.id))
+				if (!names.has(name.name)) names.set(name.name, name);
+			if (declaration.init != null)
+				assignments.push({
+					type: 'AssignmentExpression',
+					operator: '=',
+					left: declaration.id,
+					right: declaration.init
+				});
+		}
+		return assignments.length === 0
+			? null
+			: assignments.length === 1
+				? assignments[0]!
+				: { type: 'SequenceExpression', expressions: assignments };
+	};
+	const body = statements.map((statement) =>
+		b.rewrite(statement, (node, next) => {
+			if (
+				node.type === 'FunctionDeclaration' ||
+				node.type === 'FunctionExpression' ||
+				node.type === 'ArrowFunctionExpression' ||
+				node.type === 'ClassDeclaration' ||
+				node.type === 'ClassExpression'
+			)
+				return node;
+			if (
+				node.type === 'ForStatement' &&
+				node.init?.type === 'VariableDeclaration' &&
+				node.init.kind === 'var'
+			) {
+				return {
+					...node,
+					init: initialize(node.init),
+					test: node.test == null ? node.test : next(node.test),
+					update: node.update == null ? node.update : next(node.update),
+					body: next(node.body)
+				};
+			}
+			if (
+				(node.type === 'ForInStatement' || node.type === 'ForOfStatement') &&
+				node.left.type === 'VariableDeclaration' &&
+				node.left.kind === 'var'
+			) {
+				initialize(node.left);
+				return {
+					...node,
+					left: node.left.declarations[0]!.id,
+					right: next(node.right),
+					body: next(node.body)
+				};
+			}
+			if (node.type === 'VariableDeclaration' && node.kind === 'var') {
+				const value = initialize(node);
+				return value === null ? { type: 'EmptyStatement' } : b.statement(value);
+			}
+			return undefined;
+		})
+	);
+	return {
+		declarations: [...names.values()].map((id) => ({ type: 'VariableDeclarator', id, init: null })),
+		statements: body
+	};
+}
+
+export function tracedFunction(context: Context, node: Function, next: Next): Function | undefined {
+	if (!context.dev || node.body.type !== 'BlockStatement') return undefined;
+	const first = node.body.body[0];
+	if (first?.type !== 'ExpressionStatement' || first.expression.type !== 'CallExpression')
+		return undefined;
+	const call = first.expression;
+	if (context.analysis.runes.get(call.callee) !== '$inspect.trace') return undefined;
+	const given = call.arguments[0];
+	const name = node.type === 'ArrowFunctionExpression' ? 'trace' : (node.id?.name ?? 'trace');
+	const position = node.loc?.start;
+	const automatic = `${name} (${context.filename ?? '(unknown)'}:${position?.line ?? 0}:${position?.column ?? 0})`;
+	const label = given === undefined ? b.literal(automatic) : next(given as ES.Expression);
+	const body = hoisted(node.body.body.slice(1).map((statement) => next(statement)));
+	const fn = { ...b.arrow([], body.statements), async: node.async };
+	return {
+		...node,
+		params: node.params.map((param) => next(param)),
+		body: {
+			type: 'BlockStatement',
+			body: [
+				...(body.declarations.length > 0
+					? [
+							{
+								type: 'VariableDeclaration',
+								kind: 'var',
+								declarations: body.declarations
+							} as ES.VariableDeclaration
+						]
+					: []),
+				{ type: 'ReturnStatement', argument: runtime(context, 'trace', b.arrow([], label), fn) }
+			]
+		}
+	};
+}
+
+export function inspectCall(context: Context, inspected: Inspection, next: Next): ES.Expression {
+	if (!context.dev)
+		return { type: 'UnaryExpression', operator: 'void', prefix: true, argument: b.literal(0) };
+	const values: ES.ArrayExpression = {
+		type: 'ArrayExpression',
+		elements: inspected.args.map((argument) => next(argument))
+	};
+	const rest = b.id(context.names.unique('$$args'));
+	const inspector =
+		inspected.inspector === null ? b.member(b.id('console'), 'log') : next(inspected.inspector);
+	const forward = b.arrow(
+		[{ type: 'RestElement', argument: rest }],
+		b.call(inspector, { type: 'SpreadElement', argument: rest })
+	);
+	const args: ES.Expression[] = [b.arrow([], values), forward];
+	if (inspected.inspector === null) args.push(b.literal(true));
+	return runtime(context, 'inspect', ...args);
+}

package/src/compiler/client/loss.ts

@@ -0,0 +1,53 @@
+import type * as ES from 'estree';
+import { spanOf } from '../analysis/index.ts';
+import * as b from '../ir/estree.ts';
+import type { Ignores } from '../ir/port.ts';
+import type { Span } from '../ir/nodes.ts';
+import { runtime, type Context } from './script.ts';
+
+type Function = ES.FunctionDeclaration | ES.FunctionExpression | ES.ArrowFunctionExpression;
+
+export interface Losses {
+	readonly ignored: readonly Span[];
+	readonly inside: boolean;
+}
+
+export function losses(...sources: Ignores[]): Losses {
+	const ignored: Span[] = [];
+	for (const ignores of sources)
+		for (const [node, codes] of ignores)
+			if (codes.has('await_reactivity_loss')) ignored.push(spanOf(node as ES.Node));
+	return { ignored, inside: false };
+}
+
+export function lossScope(context: Context, node: Function): Context {
+	const found = context.losses;
+	if (found === undefined || found.inside || !node.async) return context;
+	return { ...context, losses: { ...found, inside: true } };
+}
+
+function ignored(found: Losses, node: ES.Node): boolean {
+	const span = spanOf(node);
+	return found.ignored.some((at) => at.start <= span.start && at.end >= span.end);
+}
+
+export function checkLoss(
+	context: Context,
+	node: ES.Node,
+	next: <T extends ES.Node>(node: T) => T
+): ES.Node | undefined {
+	const found = context.losses;
+	if (found === undefined || !found.inside) return undefined;
+	if (node.type === 'AwaitExpression' && !ignored(found, node)) {
+		return b.call({ ...node, argument: runtime(context, 'trackLoss', next(node.argument)) });
+	}
+	if (node.type === 'ForOfStatement' && node.await && !ignored(found, node)) {
+		return {
+			...node,
+			left: next(node.left),
+			right: runtime(context, 'trackLossEach', next(node.right)),
+			body: next(node.body)
+		};
+	}
+	return undefined;
+}

package/src/compiler/client/markup.ts

@@ -0,0 +1,126 @@
+import type * as ES from 'estree';
+import { escapeAttribute, escapeContent } from '../../shared/escape.ts';
+import { isVoid } from '../../shared/html.ts';
+import * as b from '../ir/estree.ts';
+import type { Namespace } from '../ir/nodes.ts';
+
+export type Fragments = 'html' | 'tree';
+
+export interface TextMarkup {
+	readonly kind: 'text';
+	readonly data: string;
+}
+
+export interface CommentMarkup {
+	readonly kind: 'comment';
+	readonly data: string;
+}
+
+export interface ElementMarkup {
+	readonly kind: 'element' | 'declaration';
+	readonly name: string;
+	readonly namespace: Namespace;
+	readonly attributes: readonly (readonly [string, string])[];
+	readonly children: readonly Markup[];
+}
+
+export type Markup = TextMarkup | CommentMarkup | ElementMarkup;
+
+export function elementKind(name: string): ElementMarkup['kind'] {
+	return name.startsWith('!') ? 'declaration' : 'element';
+}
+
+export const anchorComment: CommentMarkup = { kind: 'comment', data: '' };
+
+export function html(markup: Markup): string {
+	switch (markup.kind) {
+		case 'text':
+			return escapeContent(markup.data);
+		case 'comment':
+			return `<!--${markup.data}-->`;
+		case 'declaration':
+		case 'element': {
+			let open = `<${markup.name}`;
+			for (const [name, value] of markup.attributes) open += ` ${name}="${escapeAttribute(value)}"`;
+			if (isVoid(markup.name)) return `${open}/>`;
+			return `${open}>${markup.children.map(html).join('')}</${markup.name}>`;
+		}
+	}
+}
+
+function cased(names: string): ReadonlyMap<string, string> {
+	return new Map(names.split(' ').map((name) => [name.toLowerCase(), name]));
+}
+
+const svgTags = cased(
+	'altGlyph altGlyphDef altGlyphItem animateColor animateMotion animateTransform clipPath feBlend feColorMatrix feComponentTransfer feComposite feConvolveMatrix feDiffuseLighting feDisplacementMap feDistantLight feDropShadow feFlood feFuncA feFuncB feFuncG feFuncR feGaussianBlur feImage feMerge feMergeNode feMorphology feOffset fePointLight feSpecularLighting feSpotLight feTile feTurbulence foreignObject glyphRef linearGradient radialGradient textPath'
+);
+
+const svgAttributes = cased(
+	'attributeName attributeType baseFrequency baseProfile calcMode clipPathUnits diffuseConstant edgeMode filterUnits glyphRef gradientTransform gradientUnits kernelMatrix kernelUnitLength keyPoints keySplines keyTimes lengthAdjust limitingConeAngle markerHeight markerUnits markerWidth maskContentUnits maskUnits numOctaves pathLength patternContentUnits patternTransform patternUnits pointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits refX refY repeatCount repeatDur requiredExtensions requiredFeatures specularConstant specularExponent spreadMethod startOffset stdDeviation stitchTiles surfaceScale systemLanguage tableValues targetX targetY textLength viewBox viewTarget xChannelSelector yChannelSelector zoomAndPan'
+);
+
+const mathmlAttributes = cased('definitionURL');
+
+function parsed(name: string, table: ReadonlyMap<string, string> | null): string {
+	const lower = name.toLowerCase();
+	return table?.get(lower) ?? lower;
+}
+
+const newlineStripping = new Set(['pre', 'textarea', 'listing']);
+
+function treeNodes(nodes: readonly Markup[], parent: string | null): ES.Expression[] {
+	const built: ES.Expression[] = [];
+	for (const node of nodes) {
+		const expression = treeNode(node, built.length === 0, parent);
+		if (expression !== null) built.push(expression);
+	}
+	return built;
+}
+
+function treeNode(markup: Markup, first: boolean, parent: string | null): ES.Expression | null {
+	switch (markup.kind) {
+		case 'declaration':
+			return null;
+		case 'text':
+			return b.literal(
+				first && parent !== null && newlineStripping.has(parent)
+					? markup.data.replace(/^\r?\n/, '')
+					: markup.data
+			);
+		case 'comment':
+			return markup.data === ''
+				? b.literal(null)
+				: { type: 'ArrayExpression', elements: [b.literal(`// ${markup.data}`)] };
+		case 'element': {
+			const svg = markup.namespace === 'svg';
+			const name = parsed(markup.name, svg ? svgTags : null);
+			const attributes = svg
+				? svgAttributes
+				: markup.namespace === 'mathml'
+					? mathmlAttributes
+					: null;
+			const elements: ES.Expression[] = [b.literal(name)];
+			if (markup.attributes.length > 0 || markup.children.length > 0) {
+				elements.push(
+					markup.attributes.length === 0
+						? b.literal(null)
+						: b.object(
+								Object.fromEntries(
+									markup.attributes.map(([key, value]) => [
+										parsed(key, attributes),
+										b.literal(value)
+									])
+								)
+							)
+				);
+			}
+			elements.push(...treeNodes(markup.children, name));
+			return { type: 'ArrayExpression', elements };
+		}
+	}
+}
+
+export function tree(nodes: readonly Markup[]): ES.ArrayExpression {
+	return { type: 'ArrayExpression', elements: treeNodes(nodes, null) };
+}

package/src/compiler/client/meta.ts

@@ -0,0 +1,64 @@
+import type * as ES from 'estree';
+import * as b from '../ir/estree.ts';
+import type { Span } from '../ir/nodes.ts';
+import { runtime } from './script.ts';
+import type { TemplateContext } from './template.ts';
+
+export class Positions {
+	readonly #lines = [0];
+	readonly #file: string;
+
+	constructor(source: string, file: string) {
+		this.#file = file;
+		for (let index = 0; index < source.length; index++) {
+			if (source[index] === '\n') this.#lines.push(index + 1);
+		}
+	}
+
+	at(offset: number): Record<string, ES.Expression> {
+		let low = 0;
+		let high = this.#lines.length;
+		while (low + 1 < high) {
+			const middle = (low + high) >>> 1;
+			if ((this.#lines[middle] as number) <= offset) low = middle;
+			else high = middle;
+		}
+		return {
+			file: b.literal(this.#file),
+			line: b.literal(low + 1),
+			column: b.literal(offset - (this.#lines[low] as number))
+		};
+	}
+}
+
+export function location(
+	context: TemplateContext,
+	node: Span,
+	target: ES.Expression
+): ES.Statement[] {
+	return context.dev
+		? [
+				b.statement(
+					runtime(
+						context,
+						'locate',
+						target,
+						b.literal(context.format.meta),
+						b.object(context.positions.at(node.start))
+					)
+				)
+			]
+		: [];
+}
+
+export function scoped(
+	context: TemplateContext,
+	node: Span,
+	type: string,
+	body: ES.Statement[],
+	extra: Record<string, ES.Expression> = {}
+): ES.Statement[] {
+	if (!context.dev) return body;
+	const source = b.object({ ...context.positions.at(node.start), type: b.literal(type), ...extra });
+	return [b.statement(runtime(context, 'frame', source, b.arrow([], body)))];
+}