vigla 0.0.0 → 0.2.0

package/src/compiler/server/external.ts

@@ -0,0 +1,176 @@
+import type * as ES from 'estree';
+import * as b from '../ir/estree.ts';
+import type { ExternalBinding } from '../ir/port.ts';
+import { rewrite, runtime, type Context } from './script.ts';
+
+export function prepare(context: Context, bindings: readonly ExternalBinding[]): ES.Statement[] {
+	const cells = context.externalCells!;
+	for (const binding of bindings)
+		cells.set(binding, b.id(context.names.unique(`$$external_${binding.name}`)));
+	return bindings.map((binding) =>
+		b.constant(
+			cells.get(binding)!.name,
+			runtime(
+				context,
+				'external',
+				b.arrow([], rewrite(context, binding.source)),
+				b.literal(binding.name)
+			)
+		)
+	);
+}
+
+function cell(context: Context, node: ES.Identifier): ES.Identifier | undefined {
+	const binding = context.analysis.externals.get(node);
+	return binding === undefined ? undefined : context.externalCells?.get(binding);
+}
+
+function bound(context: Context, node: ES.Identifier): boolean {
+	if (cell(context, node) !== undefined) return true;
+	const binding = context.analysis.references.get(node);
+	if (binding === undefined) return false;
+	if (
+		binding.kind === 'state' ||
+		binding.kind === 'raw-state' ||
+		binding.kind === 'derived' ||
+		binding.kind === 'prop'
+	)
+		return true;
+	return [...(context.externalCells?.keys() ?? [])].some(
+		(input) =>
+			input.source.type === 'Identifier' &&
+			context.analysis.references.get(input.source) === binding
+	);
+}
+
+function pattern(
+	context: Context,
+	target: ES.Pattern,
+	next: <T extends ES.Node>(node: T) => T
+): ES.Pattern {
+	switch (target.type) {
+		case 'Identifier': {
+			const selected = cell(context, target);
+			if (selected !== undefined) return b.member(selected, 'current');
+			if (!bound(context, target)) return target;
+			const value = b.id(context.names.unique('$$value'));
+			const write: ES.AssignmentExpression = {
+				type: 'AssignmentExpression',
+				operator: '=',
+				left: target,
+				right: value
+			};
+			return b.member(
+				runtime(context, 'assignment', b.arrow([value], rewrite(context, write))),
+				'current'
+			);
+		}
+		case 'MemberExpression': {
+			let base: ES.Node = target;
+			while (base.type === 'MemberExpression') base = base.object;
+			const selected = base.type === 'Identifier' ? cell(context, base) : undefined;
+			const object = next(
+				b.rewrite(target.object, (node) =>
+					node === base && selected !== undefined ? b.member(selected, 'peek') : undefined
+				)
+			);
+			const key = target.computed
+				? next(target.property as ES.Expression)
+				: b.literal((target.property as ES.Identifier).name);
+			if (selected !== undefined)
+				return b.member(
+					runtime(
+						context,
+						'mutationTarget',
+						object as ES.Expression,
+						key,
+						b.arrow([], b.call(b.member(selected, 'mutate'), b.id('undefined')))
+					),
+					'current'
+				);
+			return {
+				...target,
+				object: object as ES.Expression,
+				property: target.computed ? key : target.property
+			};
+		}
+		case 'ArrayPattern':
+			return {
+				...target,
+				elements: target.elements.map((element) =>
+					element === null ? null : pattern(context, element, next)
+				)
+			};
+		case 'ObjectPattern':
+			return {
+				...target,
+				properties: target.properties.map((property) =>
+					property.type === 'RestElement'
+						? { ...property, argument: pattern(context, property.argument, next) }
+						: {
+								...property,
+								key: property.computed ? next(property.key) : property.key,
+								value: pattern(context, property.value, next),
+								shorthand: false
+							}
+				)
+			};
+		case 'AssignmentPattern':
+			return { ...target, left: pattern(context, target.left, next), right: next(target.right) };
+		case 'RestElement':
+			return { ...target, argument: pattern(context, target.argument, next) };
+	}
+}
+
+export function external(
+	context: Context,
+	node: ES.Node,
+	next: <T extends ES.Node>(node: T) => T
+): ES.Node | undefined {
+	if (node.type === 'Identifier') {
+		const target = cell(context, node);
+		return target === undefined ? undefined : b.member(target, 'current');
+	}
+	if (
+		node.type === 'AssignmentExpression' &&
+		(node.left.type === 'ArrayPattern' || node.left.type === 'ObjectPattern')
+	) {
+		let changes = false;
+		b.walk(node.left, (node) => {
+			if (node.type === 'Identifier' && bound(context, node)) changes = true;
+		});
+		if (changes)
+			return { ...node, left: pattern(context, node.left, next), right: next(node.right) };
+	}
+	if (node.type !== 'AssignmentExpression' && node.type !== 'UpdateExpression') return;
+	const target = node.type === 'AssignmentExpression' ? node.left : node.argument;
+	let base: ES.Node = target;
+	while (base.type === 'MemberExpression') base = base.object;
+	if (base.type !== 'Identifier') return;
+	const selected = cell(context, base);
+	if (selected !== undefined) {
+		const replacement = b.rewrite(target, (current) =>
+			current === base ? b.member(selected, target === base ? 'current' : 'peek') : undefined
+		);
+		const expression = next(
+			node.type === 'AssignmentExpression'
+				? { ...node, left: replacement as ES.Pattern }
+				: { ...node, argument: replacement as ES.Expression }
+		);
+		return target === base ? expression : b.call(b.member(selected, 'mutate'), expression);
+	}
+	if (context.refreshing === node || target !== base) return;
+	const binding = context.analysis.references.get(base);
+	if (binding === undefined) return;
+	let expression: ES.Expression | undefined;
+	for (const [input, selected] of context.externalCells ?? []) {
+		if (
+			input.source.type !== 'Identifier' ||
+			context.analysis.references.get(input.source) !== binding
+		)
+			continue;
+		expression ??= rewrite({ ...context, refreshing: node }, node);
+		expression = b.call(b.member(selected, 'refresh'), expression);
+	}
+	return expression;
+}

package/src/compiler/server/index.ts

@@ -0,0 +1,205 @@
+import type * as ES from 'estree';
+import type { Format } from '../../shared/format.ts';
+import type { RuntimeNames } from '../ir/runtime.ts';
+import {
+	ignoring,
+	spanOf,
+	unsupported,
+	type ComponentAnalysis,
+	type ModuleAnalysis
+} from '../analysis/index.ts';
+import { close, open } from '../../shared/markers.ts';
+import type { InjectedStyle, Scoping } from '../css/index.ts';
+import * as b from '../ir/estree.ts';
+import { inSegment, rewrite, runtime, type Context } from './script.ts';
+import { prepare } from './external.ts';
+import { separateCode } from './special.ts';
+import { Buffer, fragmentCode, type TemplateContext } from './template.ts';
+
+export interface ModuleOptions {
+	readonly runtime: string;
+	readonly runtimeNames?: RuntimeNames;
+	readonly dev: boolean;
+}
+
+export interface ServerOptions extends ModuleOptions {
+	readonly name: string;
+	readonly format: Format;
+	readonly scoping: Scoping;
+	readonly styles: InjectedStyle | null;
+	readonly filename: string;
+}
+
+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;
+}
+
+export function server(analysis: ComponentAnalysis, options: ServerOptions): ES.Program {
+	const names = new b.Names(analysis.names);
+	const id = b.id(names.unique('$'));
+	const out = b.id(names.unique('$$out'));
+	const props = b.id(names.unique('$$props'));
+	const settlement = b.id(names.unique('$$settlement'));
+	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,
+		out,
+		props,
+		settlement,
+		scoping: options.scoping,
+		format: options.format,
+		hoisted: [],
+		early: [],
+		dev: options.dev,
+		filename: options.filename,
+		externalCells: new Map(),
+		ignoring: ignoring(analysis.unit.ignores, analysis.ignored)
+	};
+	const imports: ES.ImportDeclaration[] = [];
+	const hoisted = context.hoisted;
+	for (const statement of analysis.unit.module?.body ?? []) {
+		if (statement.type === 'ImportDeclaration') imports.push(statement);
+		else hoisted.push(rewrite({ ...context, props: null, out: null }, statement as ES.Statement));
+	}
+	const body: ES.Statement[] = [];
+	if (options.styles !== null) {
+		const css = names.unique('$$css');
+		const { hash, code } = options.styles;
+		hoisted.push(b.constant(css, b.object({ hash: b.literal(hash), code: b.literal(code) })));
+		body.push(b.statement(runtime(context, 'appendStyles', out, b.id(css))));
+	}
+	body.push(b.statement(runtime(context, 'push')));
+	if (propsId !== undefined) body.push(b.constant(propsId.name, runtime(context, 'propsId', out)));
+	const inner = analysis.asynchronous ? b.id(names.unique('$$out')) : out;
+	const segment = analysis.asynchronous ? b.id(names.unique('$$segment')) : undefined;
+	const scripted: TemplateContext = analysis.asynchronous
+		? { ...context, out: inner, saved: topLevelAwaits(analysis), segment }
+		: context;
+	const script = prepare(scripted, [...new Set(analysis.externals.values())]);
+	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(scripted, statement.declaration));
+		} else if (statement.type.startsWith('Export'))
+			throw unsupported(spanOf(statement), 'This export from a component');
+		else script.push(rewrite(scripted, statement as ES.Statement));
+	}
+	const template: TemplateContext = { ...context, out: inner };
+	const content: ES.Statement[] = separateCode(template, analysis.unit.template);
+	const buffer = new Buffer();
+	if (analysis.asynchronous) buffer.text(open);
+	fragmentCode(template, analysis.root, content, buffer, true);
+	if (analysis.asynchronous) buffer.text(close);
+	buffer.flush(template, content);
+	const bindable = [...analysis.declarations.values()].filter(
+		(binding) => binding.kind === 'prop' && binding.prop?.bindable
+	);
+	const finish =
+		bindable.length === 0
+			? []
+			: [
+					b.statement(
+						runtime(
+							context,
+							'bindProps',
+							props,
+							b.object(
+								Object.fromEntries(
+									bindable.map((binding) => [binding.prop!.key, { ...binding.declaration! }])
+								)
+							)
+						)
+					)
+				];
+	const bindings = [...analysis.fragments.values()].some((nodes) =>
+		nodes.some(
+			(node) =>
+				node.kind === 'component' &&
+				node.attributes.some(
+					(attribute) =>
+						attribute.kind === 'binding' &&
+						attribute.name !== 'this' &&
+						attribute.expression.type !== 'SequenceExpression'
+				)
+		)
+	);
+	const declarations = content.filter((statement) => statement.type === 'FunctionDeclaration');
+	const repeated = content.filter((statement) => statement.type !== 'FunctionDeclaration');
+	const stabilized = bindings || finish.length > 0;
+	const rendered = stabilized
+		? [
+				b.statement(
+					b.call(
+						b.member(inner, 'stabilize'),
+						settlement,
+						b.arrow([inner], repeated),
+						...(finish.length === 0 ? [] : [b.arrow([], finish)])
+					)
+				)
+			]
+		: repeated;
+	const setup = stabilized
+		? [
+				b.constant(settlement.name, {
+					type: 'NewExpression',
+					callee: b.member(id, options.runtimeNames?.Settlement ?? 'Settlement'),
+					arguments: []
+				})
+			]
+		: [];
+	const instance = [...setup, ...declarations, ...context.early, ...script, ...rendered];
+	if (segment !== undefined) {
+		const fn = { ...b.arrow([inner], inSegment(context, segment, instance)), async: true };
+		body.push(b.statement(b.call(b.member(out, 'child'), fn)));
+	} else {
+		body.push(...instance);
+	}
+	body.push(b.statement(runtime(context, 'pop')));
+	return b.program([
+		b.namespaceImport(id.name, options.runtime),
+		...imports,
+		...hoisted,
+		b.exportDefaultFunction(options.name, [out, props], body)
+	]);
+}
+
+export function serverModule(analysis: ModuleAnalysis, options: ModuleOptions): ES.Program {
+	const names = new b.Names(analysis.names);
+	const context: Context = {
+		analysis,
+		names,
+		runtime: b.id(names.unique('$')),
+		runtimeNames: options.runtimeNames,
+		props: null,
+		out: null,
+		dev: options.dev,
+		ignoring: ignoring(analysis.unit.ignores)
+	};
+	const body = analysis.unit.program.body.map((statement) => rewrite(context, statement));
+	return b.program([b.namespaceImport(context.runtime.name, options.runtime), ...body]);
+}

package/src/compiler/server/placement.ts

@@ -0,0 +1,58 @@
+import type * as ES from 'estree';
+import * as b from '../ir/estree.ts';
+import type { ComponentUnit } from '../ir/port.ts';
+import type { Element } from '../ir/nodes.ts';
+import { runtime } from './script.ts';
+import type { Buffer, TemplateContext } from './template.ts';
+
+const lines = new WeakMap<ComponentUnit, number[]>();
+
+function position(unit: ComponentUnit, offset: number): [number, number] {
+	let starts = lines.get(unit);
+	if (starts === undefined) {
+		starts = [0];
+		for (let index = 0; index < unit.source.length; index++)
+			if (unit.source[index] === '\n') starts.push(index + 1);
+		lines.set(unit, starts);
+	}
+	let low = 0;
+	let high = starts.length;
+	while (low + 1 < high) {
+		const middle = (low + high) >>> 1;
+		if ((starts[middle] as number) <= offset) low = middle;
+		else high = middle;
+	}
+	return [low + 1, offset - (starts[low] as number)];
+}
+
+export function placed(
+	context: TemplateContext,
+	node: Element,
+	statements: ES.Statement[],
+	buffer: Buffer,
+	emit: () => void
+): void {
+	if (!context.dev) {
+		emit();
+		return;
+	}
+	const unit = context.component.unit;
+	const [line, column] = position(unit, node.start);
+	buffer.flush(context, statements);
+	statements.push(
+		b.statement(
+			runtime(
+				context,
+				'pushElement',
+				context.out,
+				b.literal(node.name),
+				b.literal(context.filename ?? '(unknown)'),
+				b.literal(line),
+				b.literal(column)
+			)
+		)
+	);
+	emit();
+	buffer.flush(context, statements);
+	statements.push(b.statement(runtime(context, 'popElement', context.out)));
+}