vigla 0.0.0 → 0.1.0

package/src/compiler/client/custom-element.ts

@@ -0,0 +1,173 @@
+import type * as ES from 'estree';
+import type { Binding, ComponentAnalysis } from '../analysis/index.ts';
+import * as b from '../ir/estree.ts';
+import type { Slot } from '../ir/nodes.ts';
+import { valueOf } from './values.ts';
+import { read, rewrite, runtime } from './script.ts';
+import { cleaned, render, type TemplateContext } from './template.ts';
+
+function properties(analysis: ComponentAnalysis): Binding[] {
+	return [...new Set(analysis.declarations.values())].filter((binding) => binding.kind === 'prop');
+}
+
+function propertyName(node: ES.Property): string {
+	return node.key.type === 'Identifier' ? node.key.name : String((node.key as ES.Literal).value);
+}
+
+export function accessors(context: TemplateContext): ES.Property[] {
+	if (context.component.customElement === null) return [];
+	const result: ES.Property[] = [];
+	for (const binding of properties(context.component)) {
+		const key = b.literal(binding.prop!.key);
+		const local = b.id(binding.name);
+		result.push({
+			type: 'Property',
+			key,
+			value: b.functionExpression(
+				[],
+				[{ type: 'ReturnStatement', argument: read(context, local, binding)! }]
+			),
+			kind: 'get',
+			method: false,
+			shorthand: false,
+			computed: false
+		});
+		const value = b.id(context.names.unique('$$value'));
+		result.push({
+			type: 'Property',
+			key,
+			value: b.functionExpression(
+				[value],
+				[b.statement(b.call(local, value)), b.statement(runtime(context, 'flushSync'))]
+			),
+			kind: 'set',
+			method: false,
+			shorthand: false,
+			computed: false
+		});
+	}
+	return result;
+}
+
+export function customElement(
+	context: TemplateContext,
+	name: string,
+	exports: ES.Property[],
+	hmr: boolean
+): ES.Statement[] {
+	const definition = context.component.customElement;
+	if (definition === null) return [];
+	const bindings = properties(context.component);
+	const named = new Map<string, Binding>();
+	const props: Record<string, ES.Expression> = {};
+	for (const binding of bindings) {
+		const key = binding.prop!.key;
+		props[key] = b.object({});
+		if (!named.has(binding.name)) named.set(binding.name, binding);
+		if (!named.has(key)) named.set(key, binding);
+	}
+	for (const property of definition.props?.properties ?? []) {
+		if (property.type !== 'Property') continue;
+		const key = propertyName(property);
+		const binding = named.get(key);
+		let value = rewrite(context, property.value as ES.Expression);
+		const initial = binding?.prop?.fallback;
+		if (
+			value.type === 'ObjectExpression' &&
+			initial?.type === 'Literal' &&
+			typeof initial.value === 'boolean' &&
+			!value.properties.some(
+				(property) => property.type === 'Property' && propertyName(property) === 'type'
+			)
+		)
+			value = {
+				...value,
+				properties: [...value.properties, ...b.object({ type: b.literal('Boolean') }).properties]
+			};
+		props[binding?.prop?.key ?? key] = value;
+	}
+	const shadow = definition.shadow;
+	const create = runtime(
+		context,
+		'customElement',
+		b.id(name),
+		b.object(props),
+		{
+			type: 'ArrayExpression',
+			elements: [...new Set(exports.map(propertyName))].map((name) => b.literal(name))
+		},
+		shadow === 'none'
+			? b.id('undefined')
+			: typeof shadow === 'object' && shadow !== null
+				? shadow
+				: b.object({ mode: b.literal('open') }),
+		definition.extend ?? b.id('undefined')
+	);
+	const registration = b.statement(
+		definition.tag === null
+			? create
+			: b.call(b.member(b.id('customElements'), 'define'), b.literal(definition.tag), create)
+	);
+	if (!hmr || definition.tag === null) return [registration];
+	return [
+		{
+			type: 'IfStatement',
+			test: b.binary(
+				'==',
+				b.call(b.member(b.id('customElements'), 'get'), b.literal(definition.tag)),
+				b.literal(null)
+			),
+			consequent: registration,
+			alternate: null
+		}
+	];
+}
+
+export function slotCall(
+	context: TemplateContext,
+	node: Slot,
+	anchor: ES.Identifier
+): ES.Statement {
+	const inner = b.id(context.names.unique('$$anchor'));
+	const namespace = context.component.fragmentNamespaces.get(node.fallback) ?? 'html';
+	const fallback = cleaned(context, node.fallback);
+	const props: ES.ObjectExpression = { type: 'ObjectExpression', properties: [] };
+	for (const attribute of node.attributes) {
+		if (attribute.kind === 'spread')
+			props.properties.push({
+				type: 'SpreadElement',
+				argument: rewrite(context, attribute.expression)
+			});
+		else if (
+			attribute.kind === 'attribute' &&
+			attribute.name !== 'name' &&
+			attribute.name !== 'slot'
+		) {
+			props.properties.push({
+				type: 'Property',
+				key: b.literal(attribute.name),
+				value: b.functionExpression(
+					[],
+					[{ type: 'ReturnStatement', argument: valueOf(context, null, attribute.value) }]
+				),
+				kind: 'get',
+				method: false,
+				shorthand: false,
+				computed: false
+			});
+		}
+	}
+	return b.statement(
+		runtime(
+			context,
+			'slot',
+			anchor,
+			context.props!,
+			b.literal(node.name ?? 'default'),
+			props,
+			fallback.length === 0
+				? b.literal(null)
+				: b.arrow([inner], render(context, fallback, inner, namespace, true))
+		)
+	);
+}

package/src/compiler/client/directives.ts

@@ -0,0 +1,35 @@
+import type * as ES from 'estree';
+import * as b from '../ir/estree.ts';
+import type { Action, Attachment } from '../ir/nodes.ts';
+import { rewrite, runtime } from './script.ts';
+import type { TemplateContext } from './template.ts';
+
+function optionalCall(callee: ES.Expression, args: ES.Expression[]): ES.Expression {
+	return { type: 'ChainExpression', expression: { ...b.call(callee, ...args), optional: true } };
+}
+
+export function actionCall(
+	context: TemplateContext,
+	element: ES.Expression,
+	node: Action
+): ES.Statement {
+	const target = b.id(context.names.unique('$$node'));
+	const params = [target];
+	if (node.argument !== null) params.push(b.id(context.names.unique('$$action_arg')));
+	const args: ES.Expression[] = [
+		element,
+		b.arrow(params, optionalCall(rewrite(context, node.action), params))
+	];
+	if (node.argument !== null) args.push(b.arrow([], rewrite(context, node.argument)));
+	return b.statement(runtime(context, 'action', ...args));
+}
+
+export function attachCall(
+	context: TemplateContext,
+	element: ES.Expression,
+	node: Attachment
+): ES.Statement {
+	return b.statement(
+		runtime(context, 'attach', element, b.arrow([], rewrite(context, node.expression)))
+	);
+}

package/src/compiler/client/dynamic.ts

@@ -0,0 +1,85 @@
+import type * as ES from 'estree';
+import { unsupported } from '../analysis/index.ts';
+import { nameOf } from '../analysis/validate/report.ts';
+import * as b from '../ir/estree.ts';
+import type { DynamicElement, Transition } from '../ir/nodes.ts';
+import { binding, hasContentBinding } from './bindings.ts';
+import { actionCall, attachCall } from './directives.ts';
+import { spread } from './element.ts';
+import { valueOf } from './values.ts';
+import { rewrite, runtime } from './script.ts';
+import { location } from './meta.ts';
+import { cleaned, flush, render, scopeHash, type Emit, type TemplateContext } from './template.ts';
+import { transitionCall } from './transitions.ts';
+
+function dynamicNamespace(context: TemplateContext, node: DynamicElement): ES.Expression | null {
+	for (const attribute of node.attributes) {
+		if (attribute.kind !== 'attribute' || attribute.name !== 'xmlns') continue;
+		if (
+			attribute.value.kind === 'text' &&
+			attribute.value.parts.every((part) => part.kind === 'text')
+		)
+			return null;
+		return b.arrow([], valueOf(context, null, attribute.value));
+	}
+	return null;
+}
+
+export function dynamicCall(
+	context: TemplateContext,
+	node: DynamicElement,
+	anchor: ES.Identifier
+): ES.Statement[] {
+	const namespace = context.component.namespaces.get(node) ?? 'html';
+	const element = b.id(context.names.unique('$$element'));
+	const inner = b.id(context.names.unique('$$anchor'));
+	const emit: Emit = {
+		init: location(context, node, element),
+		after: [],
+		update: [],
+		thunks: [],
+		params: []
+	};
+	const bound: Emit = { init: [], after: [], update: [], thunks: [], params: [] };
+	let attributes = scopeHash(context, node) !== null;
+	const transitions: Transition[] = [];
+	for (const attribute of node.attributes) {
+		switch (attribute.kind) {
+			case 'transition':
+				transitions.push(attribute);
+				break;
+			case 'action':
+				emit.init.push(actionCall(context, element, attribute));
+				break;
+			case 'attachment':
+				emit.init.push(attachCall(context, element, attribute));
+				break;
+			case 'binding':
+				binding(context, node, attribute)(element, attribute.name === 'this' ? emit : bound);
+				break;
+			case 'attribute':
+			case 'spread':
+			case 'class':
+			case 'style':
+				attributes = true;
+				break;
+			default:
+				throw unsupported(attribute, `The ${attribute.kind} directive on <${nameOf('element')}>`);
+		}
+	}
+	if (attributes) spread(context, node, element, emit);
+	for (const transition of transitions)
+		emit.init.push(transitionCall(context, element, transition));
+	const childContext = hasContentBinding(node) ? { ...context, boundContent: true } : context;
+	const children = render(childContext, cleaned(context, node.body), inner, namespace, false);
+	const body = [...flush(context, emit), ...children, ...flush(context, bound)];
+	const args: ES.Expression[] = [
+		anchor,
+		b.arrow([], rewrite(context, node.tag)),
+		b.literal(namespace),
+		body.length > 0 ? b.arrow([element, inner], body) : b.literal(null)
+	];
+	const given = dynamicNamespace(context, node);
+	if (given !== null) args.push(given);
+	return [b.statement(runtime(context, 'element', ...args))];
+}