vigla 0.0.0 → 0.2.0

package/src/compiler/ir/nodes.ts

@@ -0,0 +1,263 @@
+import type * as ES from 'estree';
+
+export interface Span {
+	readonly start: number;
+	readonly end: number;
+}
+
+export interface Fragment {
+	readonly nodes: readonly Node[];
+}
+
+export type Node =
+	| Text
+	| Comment
+	| Expression
+	| Element
+	| Component
+	| DynamicElement
+	| Branch
+	| KeyedList
+	| UnkeyedList
+	| KeyedBlock
+	| AsyncBlock
+	| Boundary
+	| Snippet
+	| Render
+	| RawHtml
+	| Constant
+	| Declaration
+	| Debug
+	| Title
+	| Special
+	| Slot;
+
+export interface Text extends Span {
+	readonly kind: 'text';
+	readonly data: string;
+}
+
+export interface Comment extends Span {
+	readonly kind: 'comment';
+	readonly data: string;
+}
+
+export interface Expression extends Span {
+	readonly kind: 'expression';
+	readonly expression: ES.Expression;
+}
+
+export interface Element extends Span {
+	readonly kind: 'element';
+	readonly name: string;
+	readonly attributes: readonly Attribute[];
+	readonly body: Fragment;
+}
+
+export interface Component extends Span {
+	readonly kind: 'component';
+	readonly reference: ES.Expression;
+	readonly attributes: readonly Attribute[];
+	readonly body: Fragment;
+}
+
+export interface DynamicElement extends Span {
+	readonly kind: 'dynamic-element';
+	readonly tag: ES.Expression;
+	readonly namespace: ES.Expression | null;
+	readonly attributes: readonly Attribute[];
+	readonly body: Fragment;
+}
+
+export interface Arm extends Span {
+	readonly test: ES.Expression;
+	readonly body: Fragment;
+}
+
+export interface Branch extends Span {
+	readonly kind: 'branch';
+	readonly arms: readonly Arm[];
+	readonly fallback: Fragment | null;
+}
+
+export interface List extends Span {
+	readonly collection: ES.Expression;
+	readonly item: ES.Pattern | null;
+	readonly index: ES.Identifier | null;
+	readonly body: Fragment;
+	readonly fallback: Fragment | null;
+}
+
+export interface KeyedList extends List {
+	readonly kind: 'keyed-list';
+	readonly key: ES.Expression;
+}
+
+export interface UnkeyedList extends List {
+	readonly kind: 'unkeyed-list';
+}
+
+export interface KeyedBlock extends Span {
+	readonly kind: 'keyed-block';
+	readonly key: ES.Expression;
+	readonly body: Fragment;
+}
+
+export interface Outcome {
+	readonly binding: ES.Pattern | null;
+	readonly body: Fragment;
+}
+
+export interface AsyncBlock extends Span {
+	readonly kind: 'async-block';
+	readonly promise: ES.Expression;
+	readonly pending: Fragment | null;
+	readonly resolved: Outcome | null;
+	readonly rejected: Outcome | null;
+}
+
+export interface Boundary extends Span {
+	readonly kind: 'boundary';
+	readonly attributes: readonly Attribute[];
+	readonly body: Fragment;
+}
+
+export interface Snippet extends Span {
+	readonly kind: 'snippet';
+	readonly name: ES.Identifier;
+	readonly parameters: readonly ES.Pattern[];
+	readonly body: Fragment;
+}
+
+export interface Render extends Span {
+	readonly kind: 'render';
+	readonly call: ES.SimpleCallExpression | ES.ChainExpression;
+}
+
+export interface RawHtml extends Span {
+	readonly kind: 'raw-html';
+	readonly expression: ES.Expression;
+}
+
+export interface Constant extends Span {
+	readonly kind: 'constant';
+	readonly declarator: ES.VariableDeclarator;
+}
+
+export interface Declaration extends Span {
+	readonly kind: 'declaration';
+	readonly declaration: ES.VariableDeclaration;
+}
+
+export interface Debug extends Span {
+	readonly kind: 'debug';
+	readonly identifiers: readonly ES.Identifier[];
+}
+
+export interface Title extends Span {
+	readonly kind: 'title';
+	readonly parts: readonly (Text | Expression)[];
+}
+
+export type Target = 'head' | 'window' | 'document' | 'body';
+
+export interface Special extends Span {
+	readonly kind: 'special';
+	readonly target: Target;
+	readonly attributes: readonly Attribute[];
+	readonly body: Fragment;
+}
+
+export interface Slot extends Span {
+	readonly kind: 'slot';
+	readonly name: string | null;
+	readonly attributes: readonly Attribute[];
+	readonly fallback: Fragment;
+}
+
+export type Attribute =
+	| Property
+	| Spread
+	| Binding
+	| ClassToggle
+	| StyleProperty
+	| Action
+	| Transition
+	| Animation
+	| Attachment;
+
+export type Value =
+	| { readonly kind: 'boolean' }
+	| { readonly kind: 'expression'; readonly expression: ES.Expression }
+	| { readonly kind: 'text'; readonly parts: readonly (Text | Expression)[] };
+
+export interface Property extends Span {
+	readonly kind: 'attribute';
+	readonly name: string;
+	readonly value: Value;
+}
+
+export interface Spread extends Span {
+	readonly kind: 'spread';
+	readonly expression: ES.Expression;
+}
+
+export interface Binding extends Span {
+	readonly kind: 'binding';
+	readonly name: string;
+	readonly expression: ES.Expression;
+}
+
+export interface ClassToggle extends Span {
+	readonly kind: 'class';
+	readonly name: string;
+	readonly expression: ES.Expression;
+}
+
+export interface StyleProperty extends Span {
+	readonly kind: 'style';
+	readonly name: string;
+	readonly value: Value;
+	readonly important: boolean;
+}
+
+export interface Action extends Span {
+	readonly kind: 'action';
+	readonly action: ES.Expression;
+	readonly argument: ES.Expression | null;
+}
+
+export interface Transition extends Span {
+	readonly kind: 'transition';
+	readonly direction: 'both' | 'in' | 'out';
+	readonly transition: ES.Expression;
+	readonly argument: ES.Expression | null;
+	readonly global: boolean;
+}
+
+export interface Animation extends Span {
+	readonly kind: 'animation';
+	readonly animation: ES.Expression;
+	readonly argument: ES.Expression | null;
+}
+
+export interface Attachment extends Span {
+	readonly kind: 'attachment';
+	readonly expression: ES.Expression;
+}
+
+export type Namespace = 'html' | 'svg' | 'mathml';
+
+export interface CustomElement {
+	readonly tag: string | null;
+	readonly shadow: 'open' | 'none' | ES.ObjectExpression | null;
+	readonly props: ES.ObjectExpression | null;
+	readonly extend: ES.Expression | null;
+}
+
+export interface Options extends Span {
+	readonly namespace: Namespace | null;
+	readonly css: 'injected' | null;
+	readonly customElement: CustomElement | null;
+	readonly preserveWhitespace: boolean | null;
+}

package/src/compiler/ir/port.ts

@@ -0,0 +1,88 @@
+import type * as ES from 'estree';
+import type { Fragment, Options, Span } from './nodes.ts';
+import type { StyleSheet } from './style.ts';
+
+export type Rune =
+	| '$state'
+	| '$state.raw'
+	| '$state.snapshot'
+	| '$state.eager'
+	| '$derived'
+	| '$derived.by'
+	| '$effect'
+	| '$effect.pre'
+	| '$effect.root'
+	| '$effect.tracking'
+	| '$effect.pending'
+	| '$props'
+	| '$props.id'
+	| '$bindable'
+	| '$inspect'
+	| '$inspect.trace'
+	| '$host';
+
+export type Runes = ReadonlyMap<ES.Node, Rune>;
+
+export type Ignores = ReadonlyMap<object, ReadonlySet<string>>;
+
+export interface Diagnostic extends Span {
+	readonly code: string;
+	readonly message: string;
+}
+
+export class CompileError extends Error {
+	readonly diagnostic: Diagnostic;
+
+	constructor(diagnostic: Diagnostic) {
+		super(diagnostic.message);
+		this.name = 'CompileError';
+		this.diagnostic = diagnostic;
+	}
+}
+
+export interface ExternalBinding {
+	readonly source: ES.Expression;
+	readonly name: string;
+	readonly references: ReadonlySet<ES.Identifier>;
+}
+
+export interface ComponentUnit {
+	readonly kind: 'component';
+	readonly source: string;
+	readonly filename: string | null;
+	readonly module: ES.Program | null;
+	readonly instance: ES.Program | null;
+	readonly template: Fragment;
+	readonly externals?: readonly ExternalBinding[];
+	readonly slotReferences?: ReadonlySet<ES.Identifier>;
+	readonly style: StyleSheet | null;
+	readonly options: Options | null;
+	readonly runes: Runes;
+	readonly ignores: Ignores;
+}
+
+export interface ModuleUnit {
+	readonly kind: 'module';
+	readonly source: string;
+	readonly filename: string | null;
+	readonly program: ES.Program;
+	readonly runes: Runes;
+	readonly ignores: Ignores;
+}
+
+export type Unit = ComponentUnit | ModuleUnit;
+
+export interface Reading<U extends Unit> {
+	readonly unit: U;
+	readonly warnings: readonly Diagnostic[];
+}
+
+export interface Input {
+	readonly source: string;
+	readonly filename: string | null;
+}
+
+export interface FrontEnd {
+	component(input: Input): Reading<ComponentUnit>;
+	module(input: Input): Reading<ModuleUnit>;
+}

package/src/compiler/ir/runtime.ts

@@ -0,0 +1,19 @@
+import type * as ES from 'estree';
+
+export interface ClientExpression {
+	readonly original: ES.Expression;
+	readonly lowered: ES.Expression;
+	readonly runtime: ES.Identifier;
+}
+
+export type ExpressionProjection = (expression: ClientExpression) => ES.Expression;
+
+export interface RuntimeNames {
+	readonly [operation: string]: string;
+}
+
+export interface Runtime {
+	readonly client: string;
+	readonly server: string;
+	readonly names?: RuntimeNames;
+}

package/src/compiler/ir/script.ts

@@ -0,0 +1,34 @@
+import { parse, parseExpressionAt, type Options } from 'acorn';
+import type * as ES from 'estree';
+import { CompileError } from './port.ts';
+
+const options: Options = {
+	ecmaVersion: 'latest',
+	sourceType: 'module',
+	locations: true,
+	allowAwaitOutsideFunction: true
+};
+
+function failure(error: unknown, fallback: number): CompileError {
+	if (!(error instanceof SyntaxError)) throw error;
+	const position = (error as SyntaxError & { pos?: number }).pos ?? fallback;
+	const message = error.message.replace(/ \(\d+:\d+\)$/, '');
+	return new CompileError({ code: 'js_parse_error', message, start: position, end: position });
+}
+
+export function parseProgram(source: string, start: number, end: number): ES.Program {
+	const text = source.slice(0, start).replace(/[^\n]/g, ' ') + source.slice(start, end);
+	try {
+		return parse(text, options) as unknown as ES.Program;
+	} catch (error) {
+		throw failure(error, start);
+	}
+}
+
+export function parseExpression(source: string, index: number): ES.Expression & { end: number } {
+	try {
+		return parseExpressionAt(source, index, options) as unknown as ES.Expression & { end: number };
+	} catch (error) {
+		throw failure(error, index);
+	}
+}

package/src/compiler/ir/style.ts

@@ -0,0 +1,120 @@
+import type { Span } from './nodes.ts';
+
+export interface StyleSheet extends Span {
+	readonly type: 'StyleSheet';
+	readonly children: readonly (Rule | Atrule)[];
+	readonly content: StyleContent;
+}
+
+export interface StyleContent {
+	readonly start: number;
+	readonly end: number;
+	readonly styles: string;
+}
+
+export interface Atrule extends Span {
+	readonly type: 'Atrule';
+	readonly name: string;
+	readonly prelude: string;
+	readonly block: Block | null;
+}
+
+export interface Rule extends Span {
+	readonly type: 'Rule';
+	readonly prelude: SelectorList;
+	readonly block: Block;
+}
+
+export interface SelectorList extends Span {
+	readonly type: 'SelectorList';
+	readonly children: readonly ComplexSelector[];
+}
+
+export interface ComplexSelector extends Span {
+	readonly type: 'ComplexSelector';
+	readonly children: readonly RelativeSelector[];
+}
+
+export interface RelativeSelector extends Span {
+	readonly type: 'RelativeSelector';
+	readonly combinator: Combinator | null;
+	readonly selectors: readonly SimpleSelector[];
+}
+
+export interface Combinator extends Span {
+	readonly type: 'Combinator';
+	readonly name: string;
+}
+
+export interface TypeSelector extends Span {
+	readonly type: 'TypeSelector';
+	readonly name: string;
+	readonly namespace?: string;
+}
+
+export interface IdSelector extends Span {
+	readonly type: 'IdSelector';
+	readonly name: string;
+}
+
+export interface ClassSelector extends Span {
+	readonly type: 'ClassSelector';
+	readonly name: string;
+}
+
+export interface NestingSelector extends Span {
+	readonly type: 'NestingSelector';
+	readonly name: string;
+}
+
+export interface PseudoElementSelector extends Span {
+	readonly type: 'PseudoElementSelector';
+	readonly name: string;
+	readonly args?: SelectorList;
+}
+
+export interface PseudoClassSelector extends Span {
+	readonly type: 'PseudoClassSelector';
+	readonly name: string;
+	readonly args: SelectorList | null;
+}
+
+export interface AttributeSelector extends Span {
+	readonly type: 'AttributeSelector';
+	readonly name: string;
+	readonly matcher: string | null;
+	readonly value: string | null;
+	readonly flags: string | null;
+}
+
+export interface Nth extends Span {
+	readonly type: 'Nth';
+	readonly value: string;
+}
+
+export interface Percentage extends Span {
+	readonly type: 'Percentage';
+	readonly value: string;
+}
+
+export type SimpleSelector =
+	| TypeSelector
+	| IdSelector
+	| ClassSelector
+	| NestingSelector
+	| PseudoElementSelector
+	| PseudoClassSelector
+	| AttributeSelector
+	| Nth
+	| Percentage;
+
+export interface Block extends Span {
+	readonly type: 'Block';
+	readonly children: readonly (Declaration | Rule | Atrule)[];
+}
+
+export interface Declaration extends Span {
+	readonly type: 'Declaration';
+	readonly property: string;
+	readonly value: string;
+}

package/src/compiler/server/asynchronous.ts

@@ -0,0 +1,71 @@
+import type * as ES from 'estree';
+import { close, open } from '../../shared/markers.ts';
+import { hasAwait, ownExpressions } from '../analysis/index.ts';
+import * as b from '../ir/estree.ts';
+import type { Node } from '../ir/nodes.ts';
+import { asyncThunk, runtime, segmented } from './script.ts';
+import { Buffer, type TemplateContext } from './template.ts';
+
+export function awaiting(context: TemplateContext, nodes: readonly Node[]): ES.Expression[] {
+	const found: ES.Expression[] = [];
+	for (const node of nodes) {
+		for (const expression of ownExpressions(node)) {
+			if (context.awaited?.has(expression)) continue;
+			if (hasAwait(expression)) found.push(expression);
+		}
+	}
+	return found;
+}
+
+type Fragment = (
+	context: TemplateContext,
+	nodes: readonly Node[],
+	statements: ES.Statement[],
+	buffer: Buffer,
+	textFirst: boolean
+) => void;
+
+export function asyncChild(
+	context: TemplateContext,
+	nodes: readonly Node[],
+	expressions: readonly ES.Expression[],
+	statements: ES.Statement[],
+	buffer: Buffer,
+	fragment: Fragment
+): void {
+	buffer.flush(context, statements);
+	const out = b.id(context.names.unique('$$out'));
+	const awaited = new Map(context.awaited ?? []);
+	const body = segmented(context, ({ segment }) => {
+		const body: ES.Statement[] = [];
+		for (const expression of expressions) {
+			const id = b.id(context.names.unique('$async'));
+			awaited.set(expression, id);
+			const thunk = asyncThunk(context, expression);
+			const value = b.member(
+				b.call({
+					type: 'AwaitExpression',
+					argument: runtime(context, 'save', b.call(thunk), { ...segment! })
+				}),
+				'value'
+			);
+			body.push(b.constant(id.name, value));
+		}
+		const inner: TemplateContext = { ...context, out, awaited };
+		const content = new Buffer();
+		content.text(open);
+		fragment(inner, nodes, body, content, false);
+		content.text(close);
+		content.flush(inner, body);
+		return body;
+	});
+	statements.push(
+		b.statement(
+			b.call(
+				b.member(context.out, 'child'),
+				{ ...b.arrow([out], body), async: true },
+				b.literal(true)
+			)
+		)
+	);
+}

package/src/compiler/server/bindings.ts

@@ -0,0 +1,101 @@
+import type * as ES from 'estree';
+import * as b from '../ir/estree.ts';
+import type { Binding as BindingNode, Element, Property, Text } from '../ir/nodes.ts';
+import { rewrite } from './script.ts';
+import type { TemplateContext } from './template.ts';
+
+export interface BoundAttribute {
+	readonly name: string;
+	readonly value: ES.Expression;
+	readonly boolean: boolean;
+}
+
+export interface Bound {
+	readonly attributes: ReadonlyMap<BindingNode, BoundAttribute>;
+	readonly content: ES.Expression | null;
+	readonly raw: boolean;
+}
+
+function read(context: TemplateContext, expression: ES.Expression): ES.Expression {
+	if (expression.type === 'SequenceExpression') {
+		return b.call(rewrite(context, expression.expressions[0] as ES.Expression));
+	}
+	return rewrite(context, expression);
+}
+
+function attribute(node: Element, name: string): Property | undefined {
+	return node.attributes.find(
+		(candidate): candidate is Property => candidate.kind === 'attribute' && candidate.name === name
+	);
+}
+
+function valueOf(context: TemplateContext, property: Property | undefined): ES.Expression | null {
+	if (property === undefined) return null;
+	const value = property.value;
+	if (value.kind === 'boolean') return b.literal('');
+	if (value.kind === 'expression') return rewrite(context, value.expression);
+	if (value.parts.every((part) => part.kind === 'text')) {
+		return b.literal(value.parts.map((part) => (part as Text).data).join(''));
+	}
+	return null;
+}
+
+export function bindings(context: TemplateContext, node: Element): Bound {
+	let content: ES.Expression | null = null;
+	let raw = false;
+	const attributes = new Map<BindingNode, BoundAttribute>();
+	for (const entry of node.attributes) {
+		if (entry.kind !== 'binding') continue;
+		const value = read(context, entry.expression);
+		switch (entry.name) {
+			case 'value': {
+				const type = attribute(node, 'type');
+				const file =
+					node.name === 'input' &&
+					type?.value.kind === 'text' &&
+					type.value.parts.every((part) => part.kind === 'text') &&
+					type.value.parts.map((part) => (part as Text).data).join('') === 'file';
+				if (node.name === 'textarea') content = value;
+				else if (!file) attributes.set(entry, { name: 'value', value, boolean: false });
+				break;
+			}
+			case 'checked':
+				attributes.set(entry, { name: 'checked', value, boolean: true });
+				break;
+			case 'open':
+				attributes.set(entry, { name: 'open', value, boolean: true });
+				break;
+			case 'group': {
+				const own = valueOf(context, attribute(node, 'value'));
+				if (own === null) break;
+				const type = attribute(node, 'type');
+				const checkbox =
+					type?.value.kind === 'text' &&
+					type.value.parts.every((part) => part.kind === 'text') &&
+					type.value.parts.map((part) => (part as Text).data).join('') === 'checkbox';
+				const test = checkbox
+					? b.call(
+							b.member(
+								b.logical('??', value, { type: 'ArrayExpression', elements: [] }),
+								'includes'
+							),
+							own
+						)
+					: b.binary('===', own, value);
+				attributes.set(entry, { name: 'checked', value: test, boolean: true });
+				break;
+			}
+			case 'innerHTML':
+				content = value;
+				raw = true;
+				break;
+			case 'textContent':
+			case 'innerText':
+				content = value;
+				break;
+			default:
+				break;
+		}
+	}
+	return { attributes, content, raw };
+}