vigla 0.0.0 → 0.2.0

package/src/compiler/client/bindings.ts

@@ -0,0 +1,246 @@
+import type * as ES from 'estree';
+import { unsupported, type Binding } from '../analysis/index.ts';
+import * as b from '../ir/estree.ts';
+import type { Binding as BindingNode, DynamicElement, Element, Node } from '../ir/nodes.ts';
+import { rewrite, runtime } from './script.ts';
+import type { Emit, TemplateContext } from './template.ts';
+
+interface Accessors {
+	readonly get: ES.Expression;
+	readonly set: ES.Expression;
+}
+
+export function accessors(context: TemplateContext, expression: ES.Expression): Accessors {
+	if (expression.type === 'SequenceExpression') {
+		const [get, set] = expression.expressions as [ES.Expression, ES.Expression];
+		return { get: rewrite(context, get), set: rewrite(context, set) };
+	}
+	const value = b.id(context.names.unique('$$value'));
+	const assignment: ES.AssignmentExpression = {
+		type: 'AssignmentExpression',
+		operator: '=',
+		left: expression as ES.Pattern,
+		right: value
+	};
+	return {
+		get: b.arrow([], rewrite(context, expression)),
+		set: b.arrow([value], rewrite(context, assignment))
+	};
+}
+
+const sizes = new Set(['clientWidth', 'clientHeight', 'offsetWidth', 'offsetHeight']);
+
+const boxes = new Set([
+	'contentRect',
+	'contentBoxSize',
+	'borderBoxSize',
+	'devicePixelContentBoxSize'
+]);
+
+const editable = new Set(['innerHTML', 'innerText', 'textContent']);
+
+function source(expression: ES.Node): string {
+	const located = expression as ES.Node & { start?: number; end?: number };
+	return `${located.start ?? 0}:${located.end ?? 0}`;
+}
+
+export type GroupKey = Binding | string;
+
+function group(context: TemplateContext, attribute: BindingNode): ES.Identifier {
+	const expression = attribute.expression;
+	const key =
+		expression.type === 'Identifier'
+			? (context.analysis.references.get(expression) ?? `global:${expression.name}`)
+			: source(expression);
+	let found = context.groups.get(key);
+	if (found === undefined) {
+		found = b.id(context.names.unique('$$group'));
+		context.groups.set(key, found);
+		context.instance.push(b.constant(found.name, { type: 'ArrayExpression', elements: [] }));
+	}
+	return found;
+}
+
+function literal(fn: ES.Expression): fn is ES.ArrowFunctionExpression | ES.FunctionExpression {
+	return fn.type === 'ArrowFunctionExpression' || fn.type === 'FunctionExpression';
+}
+
+function withParts(
+	context: TemplateContext,
+	inner: TemplateContext,
+	fn: ES.Expression,
+	parts: ES.Identifier[],
+	value: ES.Identifier | null
+): ES.Expression {
+	if (!literal(fn)) return rewrite(context, fn);
+	const rewritten = rewrite(inner, fn);
+	return {
+		...rewritten,
+		params: value === null ? parts : [rewritten.params[0] ?? value, ...parts]
+	};
+}
+
+export function bindThisCall(
+	context: TemplateContext,
+	element: ES.Expression,
+	expression: ES.Expression
+): ES.Expression {
+	const [getter, setter] =
+		expression.type === 'SequenceExpression'
+			? (expression.expressions as [ES.Expression, ES.Expression])
+			: [expression, null];
+	const sources: ES.Identifier[] = [];
+	const parts: ES.Identifier[] = [];
+	const plain = new Set(context.plain);
+	const renamed = new Map(context.renamed);
+	if (setter === null || literal(getter)) {
+		b.walk(getter, (node) => {
+			if (node.type !== 'Identifier') return;
+			const binding = context.analysis.references.get(node);
+			if (binding === undefined || (binding.kind !== 'item' && binding.kind !== 'index')) return;
+			if (sources.some((part) => context.analysis.references.get(part) === binding)) return;
+			const fresh = context.names.unique(node.name);
+			sources.push(node);
+			parts.push(b.id(fresh));
+			plain.add(binding);
+			renamed.set(binding, fresh);
+		});
+	}
+	const inner = { ...context, plain, renamed };
+	const args: ES.Expression[] = [element];
+	const value = b.id(context.names.unique('$$value'));
+	if (setter !== null) {
+		args.push(
+			withParts(context, inner, setter, parts, value),
+			withParts(context, inner, getter, parts, null)
+		);
+	} else {
+		const assignment: ES.AssignmentExpression = {
+			type: 'AssignmentExpression',
+			operator: '=',
+			left: expression as ES.Pattern,
+			right: value
+		};
+		args.push(
+			b.arrow([value, ...parts], rewrite(inner, assignment)),
+			b.arrow(parts, rewrite(inner, expression))
+		);
+	}
+	if (parts.length > 0) {
+		args.push(
+			b.arrow([], {
+				type: 'ArrayExpression',
+				elements: sources.map((part) => rewrite(context, part))
+			})
+		);
+	}
+	return runtime(context, 'bindThis', ...args);
+}
+
+export function validateBinding(
+	context: TemplateContext,
+	node: Node,
+	attribute: BindingNode
+): ES.Statement[] {
+	const expression = attribute.expression;
+	if (
+		!context.dev ||
+		expression.type !== 'MemberExpression' ||
+		context.externalRows ||
+		context.component.ignored.get(node)?.has('binding_property_non_reactive') ||
+		(attribute.name === 'this' && node.kind !== 'component' && !context.structural)
+	)
+		return [];
+	let base: ES.Node = expression;
+	while (base.type === 'MemberExpression') base = base.object;
+	if (base.type === 'Identifier' && context.analysis.externals.has(base)) return [];
+	const position = context.positions.at(attribute.start);
+	const property = expression.computed
+		? rewrite(context, expression.property as ES.Expression)
+		: b.literal((expression.property as ES.Identifier).name);
+	return [
+		b.statement(
+			runtime(
+				context,
+				'validateBinding',
+				b.literal(context.component.unit.source.slice(attribute.start, attribute.end)),
+				b.arrow([], rewrite(context, expression.object as ES.Expression)),
+				b.arrow([], property),
+				b.template(['', ':', ':', ''], [position.file!, position.line!, position.column!])
+			)
+		)
+	];
+}
+
+export function hasContentBinding(node: Element | DynamicElement): boolean {
+	return node.attributes.some(
+		(attribute) => attribute.kind === 'binding' && editable.has(attribute.name)
+	);
+}
+
+export function binding(
+	context: TemplateContext,
+	node: Element | DynamicElement,
+	attribute: BindingNode
+): (element: ES.Identifier, emit: Emit) => void {
+	const name = attribute.name;
+	return (element, emit) => {
+		emit.init.push(...validateBinding(context, node, attribute));
+		if (name === 'this') {
+			emit.init.push(b.statement(bindThisCall(context, element, attribute.expression)));
+			return;
+		}
+		const { get, set } = accessors(context, attribute.expression);
+		const call = (fn: string, ...args: ES.Expression[]): void => {
+			emit.after.push(b.statement(runtime(context, fn, ...args)));
+		};
+		if (name === 'value') {
+			call(
+				node.kind === 'element' && node.name === 'select' ? 'bindSelect' : 'bindValue',
+				element,
+				get,
+				set
+			);
+		} else if (name === 'checked') {
+			call('bindChecked', element, get, set);
+		} else if (name === 'indeterminate') {
+			call('bindIndeterminate', element, get, set);
+		} else if (name === 'group') {
+			call('bindGroup', group(context, attribute), element, get, set);
+		} else if (name === 'files') {
+			call('bindFiles', element, get, set);
+		} else if (name === 'currentTime') {
+			call('bindCurrentTime', element, get, set);
+		} else if (name === 'paused') {
+			call('bindPaused', element, get, set);
+		} else if (name === 'muted' || name === 'volume' || name === 'playbackRate') {
+			call('bindMediaControl', element, b.literal(name), get, set);
+		} else if (
+			name === 'buffered' ||
+			name === 'seekable' ||
+			name === 'played' ||
+			name === 'duration' ||
+			name === 'seeking' ||
+			name === 'ended' ||
+			name === 'readyState'
+		) {
+			call('bindMedia', element, b.literal(name), set);
+		} else if (name === 'videoWidth' || name === 'videoHeight') {
+			call('bindProperty', b.literal(name), b.literal('resize'), element, set);
+		} else if (editable.has(name)) {
+			call('bindContentEditable', b.literal(name), element, get, set);
+		} else if (name === 'open') {
+			call('bindProperty', b.literal('open'), b.literal('toggle'), element, set, get);
+		} else if (name === 'focused') {
+			call('bindFocused', element, set);
+		} else if (name === 'naturalWidth' || name === 'naturalHeight') {
+			call('bindProperty', b.literal(name), b.literal('load'), element, set);
+		} else if (sizes.has(name)) {
+			call('bindSize', element, b.literal(name), set);
+		} else if (boxes.has(name)) {
+			call('bindBox', element, b.literal(name), set);
+		} else {
+			throw unsupported(attribute, `bind:${name}`);
+		}
+	};
+}

package/src/compiler/client/blocks.ts

@@ -0,0 +1,239 @@
+import type * as ES from 'estree';
+import { hasAwait, patternNames, type Binding } from '../analysis/index.ts';
+import * as b from '../ir/estree.ts';
+import type {
+	AsyncBlock,
+	Branch,
+	Fragment,
+	KeyedBlock,
+	KeyedList,
+	Outcome,
+	UnkeyedList
+} from '../ir/nodes.ts';
+import { asyncThunk, rewrite, runtime } from './script.ts';
+import { scoped } from './meta.ts';
+import { cleaned, render, type TemplateContext } from './template.ts';
+
+export type Block = Branch | KeyedList | UnkeyedList | KeyedBlock | AsyncBlock;
+
+export function arm(
+	context: TemplateContext,
+	fragment: Fragment,
+	textFirst: boolean,
+	params: readonly ES.Pattern[] = [],
+	prelude: readonly ES.Statement[] = []
+): ES.ArrowFunctionExpression {
+	const anchor = b.id(context.names.unique('$$anchor'));
+	const namespace = context.component.fragmentNamespaces.get(fragment) ?? 'html';
+	return b.arrow(
+		[anchor, ...params],
+		[
+			...prelude,
+			...render(
+				{ ...context, structural: true },
+				cleaned(context, fragment),
+				anchor,
+				namespace,
+				textFirst
+			)
+		]
+	);
+}
+
+function branchCode(context: TemplateContext, node: Branch, anchor: ES.Identifier): ES.Statement[] {
+	const statements: ES.Statement[] = [];
+	const arms = node.arms.map((entry) => {
+		const name = context.names.unique('arm');
+		statements.push(b.constant(name, arm(context, entry.body, false)));
+		return b.id(name);
+	});
+	let fallback: ES.Expression = b.literal(null);
+	if (node.fallback !== null) {
+		const name = context.names.unique('fallback');
+		statements.push(b.constant(name, arm(context, node.fallback, false)));
+		fallback = b.id(name);
+	}
+	let select: ES.Expression = b.literal(-1);
+	for (let index = node.arms.length - 1; index >= 0; index--) {
+		const entry = node.arms[index] as (typeof node.arms)[number];
+		select = b.conditional(rewrite(context, entry.test), b.literal(index), select);
+	}
+	statements.push(
+		b.statement(
+			runtime(
+				context,
+				'branch',
+				anchor,
+				b.arrow([], select),
+				{ type: 'ArrayExpression', elements: arms },
+				fallback
+			)
+		)
+	);
+	return statements;
+}
+
+function destructure(pattern: ES.Pattern, value: ES.Expression): ES.VariableDeclaration {
+	return {
+		type: 'VariableDeclaration',
+		kind: 'const',
+		declarations: [{ type: 'VariableDeclarator', id: pattern, init: value }]
+	};
+}
+
+export function patternValues(
+	context: TemplateContext,
+	pattern: ES.Pattern,
+	names: readonly Binding[],
+	source: ES.Identifier
+): ES.Statement[] {
+	const inner = { ...context, plain: new Set([...context.plain, ...names]) };
+	const values = b.id(context.names.unique('$$values'));
+	const tuple: ES.ArrayExpression = {
+		type: 'ArrayExpression',
+		elements: names.map((binding) => b.id(binding.name))
+	};
+	const statements: ES.Statement[] = [
+		b.constant(
+			values.name,
+			runtime(
+				context,
+				'derived',
+				b.arrow(
+					[],
+					[
+						destructure(rewrite(inner, pattern), runtime(context, 'get', source)),
+						{ type: 'ReturnStatement', argument: tuple }
+					]
+				)
+			)
+		)
+	];
+	names.forEach((binding, position) => {
+		const read: ES.MemberExpression = {
+			type: 'MemberExpression',
+			object: runtime(context, 'get', values),
+			property: b.literal(position),
+			computed: true,
+			optional: false
+		};
+		statements.push(b.constant(binding.name, runtime(context, 'derived', b.arrow([], read))));
+	});
+	return statements;
+}
+
+function listCode(
+	context: TemplateContext,
+	node: KeyedList | UnkeyedList,
+	anchor: ES.Identifier
+): ES.Statement[] {
+	const facts = context.component.lists.get(node);
+	if (facts === undefined) throw new Error('each block was not analyzed');
+	const named = node.item?.type === 'Identifier' ? node.item : null;
+	const item = named !== null ? { ...named } : b.id(context.names.unique('$$item'));
+	const index = b.id(facts.index?.name ?? context.names.unique('$$index'));
+	const collection = b.arrow([], rewrite(context, node.collection));
+	const plain = new Set([...context.plain, ...facts.names]);
+	if (facts.index !== null) plain.add(facts.index);
+	let key: ES.Expression = b.literal(null);
+	if (node.kind === 'keyed-list') {
+		const inner = { ...context, plain };
+		const value = rewrite(inner, node.key);
+		key =
+			node.item === null || named !== null
+				? b.arrow([item, index], value)
+				: b.arrow(
+						[item, index],
+						[
+							destructure(rewrite(inner, node.item), item),
+							{ type: 'ReturnStatement', argument: value }
+						]
+					);
+	}
+	const prelude =
+		node.item === null || named !== null
+			? []
+			: patternValues(context, node.item, facts.names, item);
+	let mutable = false;
+	b.walk(node.collection, (node) => {
+		if (node.type === 'Identifier' && context.analysis.externals.has(node)) mutable = true;
+	});
+	const body = arm({ ...context, externalRows: mutable }, node.body, true, [item, index], prelude);
+	const args: ES.Expression[] = [anchor, collection, key, body];
+	if (node.fallback !== null || mutable)
+		args.push(node.fallback === null ? b.literal(null) : arm(context, node.fallback, true));
+	if (mutable) args.push(b.literal(true));
+	return [b.statement(runtime(context, 'list', ...args))];
+}
+
+function outcomeArm(context: TemplateContext, outcome: Outcome | null): ES.Expression {
+	if (outcome === null) return b.literal(null);
+	const binding = outcome.binding;
+	if (binding === null) return arm(context, outcome.body, false);
+	if (binding.type === 'Identifier') return arm(context, outcome.body, false, [b.id(binding.name)]);
+	const declarations = context.analysis.declarations;
+	const names = patternNames(binding).flatMap((name) => {
+		const found = declarations.get(name);
+		return found === undefined ? [] : [found];
+	});
+	const value = b.id(context.names.unique('$$value'));
+	return arm(context, outcome.body, false, [value], patternValues(context, binding, names, value));
+}
+
+function awaitCode(
+	context: TemplateContext,
+	node: AsyncBlock,
+	anchor: ES.Identifier
+): ES.Statement[] {
+	return [
+		b.statement(
+			runtime(
+				context,
+				'awaited',
+				anchor,
+				hasAwait(node.promise, context.awaited)
+					? asyncThunk(context, node.promise)
+					: b.arrow([], rewrite(context, node.promise)),
+				node.pending === null ? b.literal(null) : arm(context, node.pending, false),
+				outcomeArm(context, node.resolved),
+				outcomeArm(context, node.rejected)
+			)
+		)
+	];
+}
+
+function keyCode(
+	context: TemplateContext,
+	node: KeyedBlock,
+	anchor: ES.Identifier
+): ES.Statement[] {
+	return [
+		b.statement(
+			runtime(
+				context,
+				'key',
+				anchor,
+				b.arrow([], rewrite(context, node.key)),
+				arm(context, node.body, false)
+			)
+		)
+	];
+}
+
+export function blockCode(
+	context: TemplateContext,
+	node: Block,
+	anchor: ES.Identifier
+): ES.Statement[] {
+	switch (node.kind) {
+		case 'branch':
+			return scoped(context, node, 'if', branchCode(context, node, anchor));
+		case 'keyed-list':
+		case 'unkeyed-list':
+			return scoped(context, node, 'each', listCode(context, node, anchor));
+		case 'keyed-block':
+			return scoped(context, node, 'key', keyCode(context, node, anchor));
+		case 'async-block':
+			return scoped(context, node, 'await', awaitCode(context, node, anchor));
+	}
+}

package/src/compiler/client/classes.ts

@@ -0,0 +1,154 @@
+import type * as ES from 'estree';
+import { fieldName, spanOf, unsupported, type StateField } from '../analysis/index.ts';
+import * as b from '../ir/estree.ts';
+import { runtime, type Context } from './script.ts';
+import { tagged } from './inspect.ts';
+
+type Next = <T extends ES.Node>(node: T) => T;
+
+function primitive(node: ES.Expression): boolean {
+	return (
+		(node.type === 'Literal' && !('regex' in node)) ||
+		(node.type === 'Identifier' && node.name === 'undefined')
+	);
+}
+
+export function fieldValue(context: Context, field: StateField, next: Next): ES.Expression {
+	const [first] = field.value.arguments;
+	if (first?.type === 'SpreadElement') throw unsupported(spanOf(first), 'A spread rune argument');
+	const value = first === undefined ? b.id('undefined') : next(first);
+	const key =
+		field.node.type === 'PropertyDefinition'
+			? field.node.key
+			: (field.node.left as ES.MemberExpression).property;
+	const name =
+		key.type === 'PrivateIdentifier'
+			? `#${key.name}`
+			: key.type === 'Identifier'
+				? key.name
+				: key.type === 'Literal'
+					? String(key.value)
+					: '';
+	const tag = (value: ES.Expression): ES.Expression =>
+		tagged(context, value, `${context.className ?? '(anonymous)'}.${name}`, true);
+	switch (field.rune) {
+		case '$state':
+			return tag(
+				runtime(context, 'state', primitive(value) ? value : runtime(context, 'proxy', value))
+			);
+		case '$state.raw':
+			return tag(runtime(context, 'state', value));
+		case '$derived':
+			return tag(runtime(context, 'derived', b.arrow([], value)));
+		case '$derived.by':
+			return tag(runtime(context, 'derived', value));
+	}
+}
+
+function member(key: ES.PrivateIdentifier): ES.MemberExpression {
+	return {
+		type: 'MemberExpression',
+		object: { type: 'ThisExpression' },
+		property: key,
+		computed: false,
+		optional: false
+	};
+}
+
+function method(
+	kind: 'get' | 'set',
+	key: ES.Expression | ES.PrivateIdentifier,
+	params: ES.Pattern[],
+	body: ES.Statement[],
+	computed: boolean
+): ES.MethodDefinition {
+	return {
+		type: 'MethodDefinition',
+		key,
+		computed,
+		static: false,
+		kind,
+		value: b.functionExpression(params, body)
+	};
+}
+
+function accessors(
+	context: Context,
+	field: StateField,
+	key: ES.Expression | ES.PrivateIdentifier,
+	computed: boolean
+): ES.MethodDefinition[] {
+	const value = b.id('value');
+	const proxied = field.rune === '$state' ? runtime(context, 'proxy', value) : value;
+	return [
+		method(
+			'get',
+			key,
+			[],
+			[{ type: 'ReturnStatement', argument: runtime(context, 'get', member(field.key)) }],
+			computed
+		),
+		method(
+			'set',
+			key,
+			[value],
+			[b.statement(runtime(context, 'set', member(field.key), proxied))],
+			computed
+		)
+	];
+}
+
+function definition(key: ES.PrivateIdentifier, value: ES.Expression | null): ES.PropertyDefinition {
+	return { type: 'PropertyDefinition', key, value, computed: false, static: false };
+}
+
+export function classBody(
+	context: Context,
+	body: ES.ClassBody,
+	fields: ReadonlyMap<string, StateField>,
+	next: Next
+): ES.ClassBody {
+	const members: ES.ClassBody['body'] = [];
+	for (const [name, field] of fields) {
+		if (name.startsWith('#') || field.node.type !== 'AssignmentExpression') continue;
+		const left = field.node.left as ES.MemberExpression;
+		members.push(
+			definition(field.key, null),
+			...accessors(context, field, left.property as ES.Expression, left.computed)
+		);
+	}
+	for (const item of body.body) {
+		if (item.type !== 'PropertyDefinition' || item.static) {
+			members.push(next(item));
+			continue;
+		}
+		const name = fieldName(item.key, item.computed);
+		const field = name === null ? undefined : fields.get(name);
+		if (
+			field?.node.type === 'AssignmentExpression' &&
+			item.value == null &&
+			name !== null &&
+			!name.startsWith('#')
+		)
+			continue;
+		if (field === undefined || field.node !== item) {
+			members.push(next(item));
+			continue;
+		}
+		const value = fieldValue(context, field, next);
+		if (name?.startsWith('#')) {
+			members.push(definition(field.key, value));
+			continue;
+		}
+		members.push(
+			definition(field.key, value),
+			...accessors(context, field, item.key as ES.Expression, item.computed)
+		);
+	}
+	return { ...body, body: members };
+}
+
+export function privateField(context: Context, node: ES.MemberExpression): StateField | undefined {
+	if (node.property.type !== 'PrivateIdentifier') return undefined;
+	return context.fields?.get(`#${node.property.name}`);
+}