vigla 0.0.0 → 0.2.0

package/src/compiler/server/blocks.ts

@@ -0,0 +1,165 @@
+import type * as ES from 'estree';
+import { arm, close, empty, fallback, open, openElse } from '../../shared/markers.ts';
+import { hasAwait } from '../analysis/index.ts';
+import * as b from '../ir/estree.ts';
+import type {
+	AsyncBlock,
+	Branch,
+	Fragment,
+	KeyedBlock,
+	KeyedList,
+	UnkeyedList
+} from '../ir/nodes.ts';
+import { asyncThunk, rewrite, runtime } from './script.ts';
+import { Buffer, cleaned, fragmentCode, type TemplateContext } from './template.ts';
+
+export type Block = Branch | KeyedList | UnkeyedList | KeyedBlock | AsyncBlock;
+
+export function section(
+	context: TemplateContext,
+	marker: string,
+	fragment: Fragment | null,
+	textFirst: boolean
+): ES.BlockStatement {
+	const statements: ES.Statement[] = [];
+	const buffer = new Buffer();
+	buffer.text(marker);
+	if (fragment !== null)
+		fragmentCode(context, cleaned(context, fragment), statements, buffer, textFirst);
+	buffer.flush(context, statements);
+	return { type: 'BlockStatement', body: statements };
+}
+
+function branch(context: TemplateContext, node: Branch, statements: ES.Statement[]): void {
+	let chain: ES.Statement = section(context, arm(fallback), node.fallback, false);
+	for (let index = node.arms.length - 1; index >= 0; index--) {
+		const entry = node.arms[index];
+		if (entry === undefined) continue;
+		chain = {
+			type: 'IfStatement',
+			test: rewrite(context, entry.test),
+			consequent: section(context, arm(index), entry.body, false),
+			alternate: chain
+		};
+	}
+	statements.push(chain);
+}
+
+function list(
+	context: TemplateContext,
+	node: KeyedList | UnkeyedList,
+	statements: ES.Statement[]
+): void {
+	const facts = context.component.lists.get(node);
+	if (facts === undefined) throw new Error('each block was not analyzed');
+	const items = b.id(context.names.unique('each_array'));
+	const index = b.id(facts.index?.name ?? context.names.unique('$$index'));
+	const length = b.id(context.names.unique('$$length'));
+	statements.push(
+		b.constant(items.name, runtime(context, 'iterate', rewrite(context, node.collection)))
+	);
+	const body = section(context, '', node.body, true);
+	const current: ES.MemberExpression = {
+		type: 'MemberExpression',
+		object: items,
+		property: index,
+		computed: true,
+		optional: false
+	};
+	const item: ES.Statement[] =
+		node.item === null
+			? []
+			: [
+					{
+						type: 'VariableDeclaration',
+						kind: 'const',
+						declarations: [
+							{ type: 'VariableDeclarator', id: rewrite(context, node.item), init: current }
+						]
+					}
+				];
+	const loop: ES.ForStatement = {
+		type: 'ForStatement',
+		init: {
+			type: 'VariableDeclaration',
+			kind: 'let',
+			declarations: [
+				{ type: 'VariableDeclarator', id: index, init: b.literal(0) },
+				{ type: 'VariableDeclarator', id: length, init: b.member(items, 'length') }
+			]
+		},
+		test: b.binary('<', index, length),
+		update: { type: 'UpdateExpression', operator: '++', prefix: false, argument: index },
+		body: { type: 'BlockStatement', body: [...item, ...body.body] }
+	};
+	const push = (html: string): ES.Statement =>
+		b.statement(b.call(b.member(context.out, 'push'), b.literal(html)));
+	if (node.fallback !== null) {
+		statements.push({
+			type: 'IfStatement',
+			test: b.binary('!==', b.member(items, 'length'), b.literal(0)),
+			consequent: { type: 'BlockStatement', body: [push(open), loop] },
+			alternate: section(context, openElse, node.fallback, true)
+		});
+	} else {
+		statements.push(push(open), loop);
+	}
+}
+
+function awaited(context: TemplateContext, node: AsyncBlock, statements: ES.Statement[]): void {
+	const value = b.id(context.names.unique('$$promise'));
+	const input = hasAwait(node.promise, context.awaited)
+		? b.call(asyncThunk(context, node.promise, (value) => value))
+		: rewrite(context, node.promise);
+	statements.push(b.constant(value.name, input));
+	const pending = section(context, open, node.pending, false);
+	const then = section(context, openElse, node.resolved?.body ?? null, false);
+	const binding = node.resolved?.binding ?? null;
+	if (binding !== null) {
+		then.body.unshift({
+			type: 'VariableDeclaration',
+			kind: 'const',
+			declarations: [{ type: 'VariableDeclarator', id: rewrite(context, binding), init: value }]
+		});
+	}
+	pending.body.unshift(
+		b.statement(b.call(b.member(value, 'then'), b.literal(null), b.arrow([], [])))
+	);
+	const method: ES.ChainExpression = {
+		type: 'ChainExpression',
+		expression: {
+			type: 'MemberExpression',
+			object: value,
+			property: b.id('then'),
+			computed: false,
+			optional: true
+		}
+	};
+	const kind: ES.UnaryExpression = {
+		type: 'UnaryExpression',
+		operator: 'typeof',
+		prefix: true,
+		argument: method
+	};
+	const thenable = b.binary('===', kind, b.literal('function'));
+	statements.push({ type: 'IfStatement', test: thenable, consequent: pending, alternate: then });
+}
+
+export function blockCode(
+	context: TemplateContext,
+	node: Block,
+	statements: ES.Statement[],
+	buffer: Buffer
+): void {
+	if (node.kind === 'keyed-block') {
+		buffer.text(empty);
+		fragmentCode(context, cleaned(context, node.body), statements, buffer, false);
+		buffer.text(empty);
+		return;
+	}
+	buffer.flush(context, statements);
+	if (node.kind === 'branch') branch(context, node, statements);
+	else if (node.kind === 'async-block') awaited(context, node, statements);
+	else list(context, node, statements);
+	buffer.text(close);
+}

package/src/compiler/server/classes.ts

@@ -0,0 +1,139 @@
+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';
+
+type Next = <T extends ES.Node>(node: T) => T;
+
+function derivedField(field: StateField): boolean {
+	return field.rune === '$derived' || field.rune === '$derived.by';
+}
+
+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);
+	switch (field.rune) {
+		case '$state':
+		case '$state.raw':
+			return value;
+		case '$derived':
+			return runtime(context, 'derived', b.arrow([], value));
+		case '$derived.by':
+			return runtime(context, 'derived', value);
+	}
+}
+
+function member(key: ES.PrivateIdentifier): ES.MemberExpression {
+	return {
+		type: 'MemberExpression',
+		object: { type: 'ThisExpression' },
+		property: key,
+		computed: false,
+		optional: false
+	};
+}
+
+function accessors(
+	field: StateField,
+	key: ES.Expression,
+	computed: boolean
+): ES.MethodDefinition[] {
+	const value = b.id('value');
+	const make = (
+		kind: 'get' | 'set',
+		params: ES.Pattern[],
+		body: ES.Statement[]
+	): ES.MethodDefinition => ({
+		type: 'MethodDefinition',
+		key,
+		computed,
+		static: false,
+		kind,
+		value: b.functionExpression(params, body)
+	});
+	return [
+		make('get', [], [{ type: 'ReturnStatement', argument: b.call(member(field.key)) }]),
+		make('set', [value], [b.statement(b.call(member(field.key), value))])
+	];
+}
+
+function definition(
+	key: ES.Expression | ES.PrivateIdentifier,
+	value: ES.Expression | null,
+	computed = false
+): ES.PropertyDefinition {
+	return { type: 'PropertyDefinition', key, value, computed, 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' || !derivedField(field))
+			continue;
+		const left = field.node.left as ES.MemberExpression;
+		members.push(
+			definition(field.key, null),
+			...accessors(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' &&
+			derivedField(field) &&
+			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 (item.key.type === 'PrivateIdentifier' || !derivedField(field)) {
+			members.push(definition(item.key, value, item.computed));
+			continue;
+		}
+		members.push(
+			definition(field.key, value),
+			...accessors(field, item.key as ES.Expression, item.computed)
+		);
+	}
+	return { ...body, body: members };
+}
+
+export function privateDerived(
+	context: Context,
+	node: ES.MemberExpression
+): StateField | undefined {
+	if (node.property.type !== 'PrivateIdentifier') return undefined;
+	const field = context.fields?.get(`#${node.property.name}`);
+	return field !== undefined && derivedField(field) ? field : undefined;
+}
+
+export function constructorField(
+	context: Context,
+	node: ES.AssignmentExpression
+): StateField | undefined {
+	const left = node.left;
+	if (left.type !== 'MemberExpression' || left.object.type !== 'ThisExpression') return undefined;
+	const name = fieldName(left.property, left.computed);
+	const field = name === null ? undefined : context.fields?.get(name);
+	return field?.node === node ? field : undefined;
+}
+
+export function isDerivedField(field: StateField): boolean {
+	return derivedField(field);
+}

package/src/compiler/server/component.ts

@@ -0,0 +1,400 @@
+import type * as ES from 'estree';
+import { close, empty, open, openElse } from '../../shared/markers.ts';
+import { hoisted, spanOf, unsupported } from '../analysis/index.ts';
+import * as b from '../ir/estree.ts';
+import type {
+	Boundary,
+	Component,
+	Expression,
+	Node,
+	Render,
+	Snippet,
+	Text,
+	Value
+} from '../ir/nodes.ts';
+import { rewrite, runtime } from './script.ts';
+import { Buffer, fragmentCode, type TemplateContext } from './template.ts';
+
+function property(
+	name: string,
+	value: ES.Expression,
+	kind: 'init' | 'get' | 'set' = 'init'
+): ES.Property {
+	return {
+		type: 'Property',
+		key: b.literal(name),
+		value,
+		kind,
+		method: false,
+		shorthand: false,
+		computed: false
+	};
+}
+
+function valueOf(context: TemplateContext, value: Value): ES.Expression {
+	if (value.kind === 'boolean') return b.literal(true);
+	if (value.kind === 'expression') return rewrite(context, value.expression);
+	const quasis: string[] = [''];
+	const expressions: ES.Expression[] = [];
+	for (const part of value.parts) {
+		if (part.kind === 'text') quasis[quasis.length - 1] += (part as Text).data;
+		else {
+			expressions.push(
+				b.logical('??', rewrite(context, (part as Expression).expression), b.literal(''))
+			);
+			quasis.push('');
+		}
+	}
+	return b.template(quasis, expressions);
+}
+
+export function isDynamicComponent(context: TemplateContext, node: Component): boolean {
+	const reference = node.reference;
+	if (reference.type !== 'Identifier') return true;
+	const binding = context.analysis.references.get(reference);
+	if (binding === undefined) return false;
+	return (binding.kind !== 'normal' && binding.kind !== 'import') || binding.reassigned;
+}
+
+function bindingProperties(
+	context: TemplateContext,
+	name: string,
+	expression: ES.Expression
+): ES.Property[] {
+	const value = b.id(context.names.unique('$$value'));
+	if (expression.type === 'SequenceExpression') {
+		const [get, set] = expression.expressions as [ES.Expression, ES.Expression];
+		return [
+			property(
+				name,
+				b.functionExpression(
+					[],
+					[{ type: 'ReturnStatement', argument: b.call(rewrite(context, get)) }]
+				),
+				'get'
+			),
+			property(
+				name,
+				b.functionExpression([value], [b.statement(b.call(rewrite(context, set), value))]),
+				'set'
+			)
+		];
+	}
+	const assignment: ES.AssignmentExpression = {
+		type: 'AssignmentExpression',
+		operator: '=',
+		left: expression as ES.Pattern,
+		right: value
+	};
+	return [
+		property(
+			name,
+			b.functionExpression(
+				[],
+				[{ type: 'ReturnStatement', argument: rewrite(context, expression) }]
+			),
+			'get'
+		),
+		property(
+			name,
+			b.functionExpression(
+				[value],
+				[
+					b.statement(rewrite(context, assignment)),
+					b.statement(b.call(b.member(context.settlement ?? context.out, 'invalidate')))
+				]
+			),
+			'set'
+		)
+	];
+}
+
+function propsObject(context: TemplateContext, node: Component): ES.Expression {
+	const groups: (ES.Property[] | ES.Expression)[] = [];
+	const bindings: ES.Property[] = [];
+	const push = (...properties: ES.Property[]): void => {
+		const last = groups.at(-1);
+		if (Array.isArray(last)) last.push(...properties);
+		else groups.push([...properties]);
+	};
+	for (const attribute of node.attributes) {
+		switch (attribute.kind) {
+			case 'attribute':
+				if (attribute.name.startsWith('--')) break;
+				push(property(attribute.name, valueOf(context, attribute.value)));
+				break;
+			case 'spread':
+				groups.push(rewrite(context, attribute.expression));
+				break;
+			case 'binding': {
+				if (attribute.name === 'this') break;
+				const properties = bindingProperties(context, attribute.name, attribute.expression);
+				if (attribute.expression.type === 'SequenceExpression') push(...properties);
+				else bindings.push(...properties);
+				break;
+			}
+			case 'attachment':
+				break;
+			default:
+				throw unsupported(attribute, `The ${attribute.kind} directive on a component`);
+		}
+	}
+	if (bindings.length > 0) push(...bindings);
+	const nodes = context.component.fragments.get(node.body) ?? [];
+	const slots: Record<string, ES.Expression> = {};
+	const regular: Node[] = [];
+	for (const child of nodes) {
+		if (child.kind === 'snippet') {
+			push(property(child.name.name, { ...child.name, name: context.names.bound(child.name) }));
+			slots[child.name.name === 'children' ? 'default' : child.name.name] = b.literal(true);
+		} else regular.push(child);
+	}
+	if (regular.length > 0) {
+		const out = b.id(context.names.unique('$$out'));
+		const inner: TemplateContext = { ...context, out };
+		const statements: ES.Statement[] = [];
+		const buffer = new Buffer();
+		fragmentCode(inner, regular, statements, buffer, true);
+		buffer.flush(inner, statements);
+		push(property('children', b.arrow([out], statements)));
+		slots.default = b.literal(true);
+	}
+	const objects = groups.map((group) =>
+		Array.isArray(group)
+			? ({ type: 'ObjectExpression', properties: group } as ES.ObjectExpression)
+			: group
+	);
+	if (objects.length === 0) return { type: 'ObjectExpression', properties: [] };
+	const props =
+		objects.length === 1 && Array.isArray(groups[0])
+			? (objects[0] as ES.Expression)
+			: runtime(context, 'spreadProps', ...objects);
+	return Object.keys(slots).length === 0
+		? props
+		: runtime(context, 'slotProps', props, b.object(slots));
+}
+
+export function component(
+	context: TemplateContext,
+	node: Component,
+	statements: ES.Statement[],
+	buffer: Buffer,
+	alone: boolean
+): void {
+	const styles: Record<string, ES.Expression> = {};
+	for (const attribute of node.attributes) {
+		if (attribute.kind === 'attribute' && attribute.name.startsWith('--')) {
+			styles[attribute.name] = valueOf(context, attribute.value);
+		}
+	}
+	const wrapped = Object.keys(styles).length > 0;
+	const svg = context.component.fragmentNamespaces.get(node.body) === 'svg';
+	const tag = svg ? 'g' : context.format.cssWrapper;
+	if (wrapped) {
+		buffer.text(`<${tag}`);
+		buffer.value(
+			runtime(context, 'attrStyle', b.literal(svg ? null : 'display: contents;'), b.object(styles))
+		);
+		buffer.text('>');
+	}
+	buffer.flush(context, statements);
+	statements.push(
+		...snippetDeclarations(context, context.component.fragments.get(node.body) ?? [])
+	);
+	const props = propsObject(context, node);
+	const reference = rewrite(context, node.reference);
+	const call = b.statement(b.call(reference, context.out, props));
+	if (!isDynamicComponent(context, node)) {
+		statements.push(call);
+		if (!alone || wrapped) buffer.text(empty);
+		if (wrapped) buffer.text(`</${tag}>`);
+		return;
+	}
+	const push = (html: string): ES.Statement =>
+		b.statement(b.call(b.member(context.out, 'push'), b.literal(html)));
+	statements.push({
+		type: 'IfStatement',
+		test: reference,
+		consequent: { type: 'BlockStatement', body: [push(open), call, push(close)] },
+		alternate: { type: 'BlockStatement', body: [push(openElse), push(close)] }
+	});
+	if (wrapped) buffer.text(`</${tag}>`);
+}
+
+export function boundary(
+	context: TemplateContext,
+	node: Boundary,
+	statements: ES.Statement[],
+	buffer: Buffer
+): void {
+	buffer.flush(context, statements);
+	const nodes = context.component.fragments.get(node.body) ?? [];
+	const handed = (child: Node): boolean =>
+		child.kind === 'snippet' && (child.name.name === 'failed' || child.name.name === 'pending');
+	const declarations = snippetDeclarations(context, nodes.filter(handed));
+	const snippet = (name: string): ES.Expression | null => {
+		const declared = nodes.find(
+			(child): child is Snippet => child.kind === 'snippet' && child.name.name === name
+		);
+		if (declared !== undefined)
+			return { ...declared.name, name: context.names.bound(declared.name) };
+		const attribute = node.attributes.find(
+			(candidate) => candidate.kind === 'attribute' && candidate.name === name
+		);
+		return attribute?.kind === 'attribute' ? valueOf(context, attribute.value) : null;
+	};
+	const pending = snippet('pending');
+	const failed = snippet('failed');
+	const regular = nodes.filter((child) => !handed(child));
+	const out = failed === null ? context.out : b.id(context.names.unique('$$out'));
+	const inner: TemplateContext = { ...context, out };
+	const body: ES.Statement[] = [];
+	const showing = (handler: ES.Expression): ES.Statement[] => [
+		b.statement(b.call(b.member(out, 'push'), b.literal(openElse))),
+		b.statement(b.call(handler, out)),
+		b.statement(b.call(b.member(out, 'push'), b.literal(close)))
+	];
+	if (
+		pending !== null &&
+		nodes.some((child) => child.kind === 'snippet' && child.name.name === 'pending')
+	) {
+		body.push(...showing(pending));
+	} else {
+		const content: ES.Statement[] = [];
+		const children = new Buffer();
+		children.text(open);
+		fragmentCode(inner, regular, content, children, true);
+		children.text(close);
+		children.flush(inner, content);
+		if (pending === null) body.push(...content);
+		else {
+			const handler = b.id(context.names.unique('pending'));
+			body.push(b.constant(handler.name, pending), {
+				type: 'IfStatement',
+				test: handler,
+				consequent: { type: 'BlockStatement', body: showing(handler) },
+				alternate: { type: 'BlockStatement', body: content }
+			});
+		}
+	}
+	if (failed === null) {
+		statements.push({ type: 'BlockStatement', body: [...declarations, ...body] });
+		return;
+	}
+	statements.push({
+		type: 'BlockStatement',
+		body: [
+			...declarations,
+			b.statement(
+				runtime(
+					context,
+					'boundary',
+					context.out,
+					{ type: 'ObjectExpression', properties: [property('failed', failed)] },
+					b.arrow([out], body)
+				)
+			)
+		]
+	});
+}
+
+export function snippetDeclarations(
+	context: TemplateContext,
+	nodes: readonly Node[]
+): ES.Statement[] {
+	const result: ES.Statement[] = [];
+	for (const node of nodes) {
+		if (node.kind !== 'snippet') continue;
+		const lifted = context.component.lifted.has(node);
+		const declaration = snippetDeclaration(
+			lifted ? { ...context, props: null, settlement: undefined } : context,
+			node
+		);
+		const initialize = context.dev
+			? b.statement(runtime(context, 'snippet', { ...declaration.id! }))
+			: null;
+		if (lifted) {
+			context.hoisted.push(declaration);
+			if (initialize !== null) context.hoisted.unshift(initialize);
+		} else {
+			result.push(declaration);
+			if (initialize !== null) {
+				if (context.awaited === undefined && context.component.root.includes(node))
+					context.early.push(initialize);
+				else result.push(initialize);
+			}
+		}
+	}
+	return result;
+}
+
+function snippetDeclaration(context: TemplateContext, node: Snippet): ES.FunctionDeclaration {
+	const out = b.id(context.names.unique('$$out'));
+	const inner: TemplateContext = { ...context, out };
+	const statements: ES.Statement[] = [];
+	const buffer = new Buffer();
+	fragmentCode(inner, context.component.fragments.get(node.body) ?? [], statements, buffer, true);
+	buffer.flush(inner, statements);
+	return {
+		type: 'FunctionDeclaration',
+		id: { ...node.name, name: context.names.bound(node.name) },
+		params: [out, ...node.parameters.map((parameter) => rewrite(context, parameter))],
+		body: {
+			type: 'BlockStatement',
+			body: [
+				...(context.dev ? [b.statement(runtime(context, 'snippetArgs', out))] : []),
+				...statements
+			]
+		},
+		async: false,
+		generator: false
+	};
+}
+
+export function isStaticRender(context: TemplateContext, node: Render): boolean {
+	const expression = node.call;
+	if (expression.type === 'ChainExpression' || expression.optional) return false;
+	if (expression.callee.type !== 'Identifier') return false;
+	const binding = context.analysis.references.get(expression.callee);
+	return binding?.kind === 'snippet' && !binding.reassigned;
+}
+
+export function render(
+	context: TemplateContext,
+	node: Render,
+	statements: ES.Statement[],
+	buffer: Buffer,
+	alone: boolean
+): void {
+	buffer.flush(context, statements);
+	const chained = node.call.type === 'ChainExpression';
+	const call = (
+		chained ? (node.call as ES.ChainExpression).expression : node.call
+	) as ES.SimpleCallExpression;
+	const args = call.arguments.map((argument) => {
+		if (argument.type === 'SpreadElement')
+			throw unsupported(spanOf(argument), 'A spread argument to a snippet');
+		return rewrite(context, argument);
+	});
+	const invoked: ES.SimpleCallExpression = {
+		type: 'CallExpression',
+		callee: rewrite(context, call.callee as ES.Expression),
+		arguments: [context.out, ...args],
+		optional: chained || call.optional
+	};
+	statements.push(
+		b.statement(
+			chained || call.optional ? { type: 'ChainExpression', expression: invoked } : invoked
+		)
+	);
+	if (!alone) buffer.text(empty);
+}
+
+export function standalone(context: TemplateContext, nodes: readonly Node[]): boolean {
+	const regular = nodes.filter((node) => !hoisted(node));
+	if (regular.length !== 1) return false;
+	const [only] = regular;
+	if (only?.kind === 'component') return !isDynamicComponent(context, only);
+	if (only?.kind === 'render') return isStaticRender(context, only);
+	return false;
+}