vigla 0.0.0 → 0.2.0

package/src/compiler/client/events.ts

@@ -0,0 +1,147 @@
+import type * as ES from 'estree';
+import { isCapture, isDelegated } from '../../shared/html.ts';
+import { spanOf } from '../analysis/index.ts';
+import * as b from '../ir/estree.ts';
+import type { Property } from '../ir/nodes.ts';
+import { rewrite, runtime } from './script.ts';
+import type { TemplateContext } from './template.ts';
+
+export function isEvent(attribute: Property): boolean {
+	return attribute.value.kind === 'expression' && /^on/i.test(attribute.name);
+}
+
+function sideEffects(expression: ES.Expression): boolean {
+	return (
+		expression.type === 'CallExpression' ||
+		expression.type === 'NewExpression' ||
+		expression.type === 'AssignmentExpression' ||
+		expression.type === 'UpdateExpression' ||
+		(expression.type === 'SequenceExpression' && expression.expressions.some(sideEffects))
+	);
+}
+
+function pure(context: TemplateContext, expression: ES.Expression | ES.Super): boolean {
+	if (context.analysis.runes.get(expression) === '$effect.tracking') return false;
+	switch (expression.type) {
+		case 'Literal':
+			return true;
+		case 'Identifier':
+			return (
+				!context.analysis.references.has(expression) && !context.analysis.externals.has(expression)
+			);
+		case 'MemberExpression':
+			return pure(context, expression.object);
+		case 'CallExpression':
+			return (
+				pure(context, expression.callee) &&
+				expression.arguments.every((argument) =>
+					pure(context, argument.type === 'SpreadElement' ? argument.argument : argument)
+				)
+			);
+		default:
+			return false;
+	}
+}
+
+function cached(context: TemplateContext, expression: ES.Expression): boolean {
+	let call = false;
+	let dependent = false;
+	let impure = false;
+	b.walk(expression, (node) => {
+		if (node.type === 'ArrowFunctionExpression' || node.type === 'FunctionExpression') return false;
+		if (node.type === 'Identifier') {
+			dependent ||= context.analysis.references.has(node) || context.analysis.externals.has(node);
+		} else if (node.type === 'CallExpression') {
+			call = true;
+			impure ||= !pure(context, node.callee);
+		} else if (node.type === 'TaggedTemplateExpression') {
+			impure ||= !pure(context, node.tag);
+		}
+	});
+	return impure || (call && dependent);
+}
+
+export function handler(
+	context: TemplateContext,
+	expression: ES.Expression,
+	declarations: ES.Statement[]
+): ES.Expression {
+	let value = rewrite(context, expression);
+	if (value.type === 'ArrowFunctionExpression' || value.type === 'FunctionExpression') return value;
+	if (expression.type === 'Identifier') {
+		const binding = context.analysis.references.get(expression);
+		if (binding !== undefined && context.analysis.functions.has(binding)) return value;
+	}
+	if (cached(context, expression)) {
+		const cell = b.id(context.names.unique('handler'));
+		declarations.push(b.constant(cell.name, runtime(context, 'derived', b.arrow([], value))));
+		value = runtime(context, 'get', cell);
+	}
+	const args = b.id(context.names.unique('args'));
+	const callee: ES.MemberExpression = { ...b.member(value, 'apply'), optional: true };
+	const invoke: ES.Expression = context.dev
+		? runtime(
+				context,
+				'invoke',
+				b.arrow([], value),
+				{ type: 'ThisExpression' },
+				args,
+				b.object(context.positions.at(spanOf(expression).start)),
+				b.literal(sideEffects(expression)),
+				b.literal(
+					expression.type === 'CallExpression' &&
+						expression.arguments.length === 0 &&
+						expression.callee.type === 'Identifier'
+				)
+			)
+		: { type: 'ChainExpression', expression: b.call(callee, { type: 'ThisExpression' }, args) };
+	return {
+		type: 'FunctionExpression',
+		id: null,
+		params: [{ type: 'RestElement', argument: args }],
+		body: {
+			type: 'BlockStatement',
+			body: [b.statement(invoke)]
+		},
+		async: false,
+		generator: false
+	};
+}
+
+export function named(context: TemplateContext, type: string, fn: ES.Expression): ES.Expression {
+	if (!context.dev || fn.type !== 'ArrowFunctionExpression') return fn;
+	const body: ES.BlockStatement =
+		fn.body.type === 'BlockStatement'
+			? fn.body
+			: { type: 'BlockStatement', body: [{ type: 'ReturnStatement', argument: fn.body }] };
+	return {
+		type: 'FunctionExpression',
+		id: b.id(context.names.unique(type.replace(/[^\w$]/g, '_'))),
+		params: fn.params,
+		body,
+		async: fn.async,
+		generator: false
+	};
+}
+
+export function event(
+	context: TemplateContext,
+	element: ES.Identifier,
+	attribute: Property,
+	declarations: ES.Statement[]
+): ES.Statement {
+	let type = attribute.name.slice(2).toLowerCase();
+	const expression = (attribute.value as { expression: ES.Expression }).expression;
+	const capture = isCapture(type);
+	if (capture) type = type.slice(0, -7);
+	const fn = named(context, type, handler(context, expression, declarations));
+	if (!capture && isDelegated(type)) {
+		context.events.add(type);
+		return b.statement(
+			runtime(context, 'delegated', element, b.literal(type), fn, b.literal(true))
+		);
+	}
+	const args: ES.Expression[] = [element, b.literal(type), fn];
+	if (capture) args.push(b.literal(true));
+	return b.statement(runtime(context, 'listen', ...args));
+}

package/src/compiler/client/exports.ts

@@ -0,0 +1,39 @@
+import type * as ES from 'estree';
+import * as b from '../ir/estree.ts';
+import { runtime, type Context } from './script.ts';
+
+export interface DeferredExports {
+	readonly setup: ES.Statement;
+	readonly publish: ES.Statement;
+	readonly properties: ES.Property[];
+}
+
+export function deferExports(context: Context, properties: ES.Property[]): DeferredExports {
+	const cell = b.id(context.names.unique('$$exports'));
+	return {
+		setup: b.constant(cell.name, runtime(context, 'deferredExports')),
+		publish: b.statement(
+			b.call(b.member(cell, 'publish'), { type: 'ObjectExpression', properties })
+		),
+		properties: properties.map((property) => {
+			const name =
+				property.key.type === 'Identifier'
+					? property.key.name
+					: String((property.key as ES.Literal).value);
+			const value = b.id(context.names.unique('$$value'));
+			const setter = property.kind === 'set';
+			const call = b.call(
+				b.member(cell, setter ? 'set' : 'get'),
+				b.literal(name),
+				...(setter ? [value] : [])
+			);
+			return {
+				...property,
+				value: b.functionExpression(
+					setter ? [value] : [],
+					setter ? [b.statement(call)] : [{ type: 'ReturnStatement', argument: call }]
+				)
+			};
+		})
+	};
+}

package/src/compiler/client/external.ts

@@ -0,0 +1,190 @@
+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),
+				b.literal(binding.references.values().next().value?.name ?? 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'
+				);
+			const binding =
+				base.type === 'Identifier' ? context.analysis.references.get(base) : undefined;
+			if (binding?.kind === 'prop')
+				return b.member(
+					runtime(
+						context,
+						'mutationTarget',
+						object as ES.Expression,
+						key,
+						b.arrow([], runtime(context, 'mutateProp', base as ES.Identifier, 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/client/hot.ts

@@ -0,0 +1,62 @@
+import type * as ES from 'estree';
+import * as b from '../ir/estree.ts';
+
+function hotModule(): ES.MemberExpression {
+	const meta: ES.MetaProperty = {
+		type: 'MetaProperty',
+		meta: b.id('import'),
+		property: b.id('meta')
+	};
+	return b.member(meta, 'hot');
+}
+
+export function hotComponent(
+	runtime: ES.Identifier,
+	name: string,
+	params: readonly ES.Pattern[],
+	body: readonly ES.Statement[],
+	hash: string | null
+): (ES.Statement | ES.ModuleDeclaration)[] {
+	const component = b.id(name);
+	const module = b.id('module');
+	const record: ES.MemberExpression = {
+		type: 'MemberExpression',
+		object: component,
+		property: b.member(runtime, 'HMR'),
+		computed: true,
+		optional: false
+	};
+	const accept: ES.Statement[] = [
+		b.statement(b.call(b.member(record, 'update'), b.member(module, 'default')))
+	];
+	if (hash !== null) {
+		accept.unshift(b.statement(b.call(b.member(runtime, 'cleanupStyles'), b.literal(hash))));
+	}
+	const declaration: ES.FunctionDeclaration = {
+		type: 'FunctionDeclaration',
+		id: component,
+		params: [...params],
+		body: { type: 'BlockStatement', body: [...body] },
+		async: false,
+		generator: false
+	};
+	const replace: ES.AssignmentExpression = {
+		type: 'AssignmentExpression',
+		operator: '=',
+		left: component,
+		right: b.call(b.member(runtime, 'hmr'), component)
+	};
+	const swap: ES.IfStatement = {
+		type: 'IfStatement',
+		test: hotModule(),
+		consequent: {
+			type: 'BlockStatement',
+			body: [
+				b.statement(replace),
+				b.statement(b.call(b.member(hotModule(), 'accept'), b.arrow([module], accept)))
+			]
+		},
+		alternate: null
+	};
+	return [declaration, swap, { type: 'ExportDefaultDeclaration', declaration: component }];
+}