vigla 0.0.0 → 0.2.0

package/src/compiler/client/special.ts

@@ -0,0 +1,177 @@
+import type * as ES from 'estree';
+import { hash } from '../../shared/hash.ts';
+import { hasAwait, unsupported } from '../analysis/index.ts';
+import { nameOf } from '../analysis/validate/report.ts';
+import * as b from '../ir/estree.ts';
+import { isCapture } from '../../shared/html.ts';
+import type { Binding as BindingNode, Fragment, Special, Title } from '../ir/nodes.ts';
+import { accessors, validateBinding } from './bindings.ts';
+import { asyncThunks } from './asynchronous.ts';
+import { actionCall, attachCall } from './directives.ts';
+import { handler, named } from './events.ts';
+import { rewrite, runtime } from './script.ts';
+import { cleaned, render, type TemplateContext } from './template.ts';
+
+export function headHash(context: TemplateContext): string {
+	return hash((context.component.unit.filename ?? '(unknown)').replace(/\\/g, '/'));
+}
+
+export function titleValue(
+	context: TemplateContext,
+	parts: Title['parts'],
+	text: (expression: ES.Expression) => ES.Expression
+): ES.Expression {
+	const [only] = parts;
+	if (parts.length === 1 && only?.kind === 'expression') {
+		return b.logical('??', text(rewrite(context, only.expression)), b.literal(''));
+	}
+	const quasis: string[] = [''];
+	const expressions: ES.Expression[] = [];
+	for (const part of parts) {
+		if (part.kind === 'text') quasis[quasis.length - 1] += part.data;
+		else {
+			expressions.push(b.logical('??', text(rewrite(context, part.expression)), b.literal('')));
+			quasis.push('');
+		}
+	}
+	return expressions.length === 0 ? b.literal(quasis[0] ?? '') : b.template(quasis, expressions);
+}
+
+function titleCode(context: TemplateContext, node: Title): ES.Statement {
+	const pending = node.parts
+		.filter((part) => part.kind === 'expression')
+		.map((part) => part.expression)
+		.filter((expression) => !context.awaited?.has(expression) && hasAwait(expression));
+	const awaited = new Map(context.awaited ?? []);
+	const ids = pending.map((expression) => {
+		const id = b.id(context.names.unique('$async'));
+		awaited.set(expression, id);
+		return id;
+	});
+	const inner: TemplateContext = { ...context, awaited };
+	const value = titleValue(inner, node.parts, (expression) => expression);
+	const effect = b.statement(
+		runtime(context, 'effect', b.arrow([], runtime(context, 'title', value)))
+	);
+	if (pending.length === 0) return effect;
+	const thunks = asyncThunks(context, pending);
+	return b.statement(
+		runtime(
+			context,
+			'async',
+			b.literal(null),
+			{ type: 'ArrayExpression', elements: thunks },
+			b.arrow([b.id(context.names.unique('$$anchor')), ...ids], [effect])
+		)
+	);
+}
+
+function headCode(context: TemplateContext, node: Special): ES.Statement {
+	const anchor = b.id(context.names.unique('$$anchor'));
+	const body = [
+		...render(context, cleaned(context, node.body), anchor, 'html', false),
+		...separateCode(context, node.body)
+	];
+	return b.statement(
+		runtime(context, 'head', b.literal(headHash(context)), b.arrow([anchor], body))
+	);
+}
+
+function targetOf(node: Special): ES.Expression {
+	if (node.target === 'window') return b.id('window');
+	if (node.target === 'document') return b.id('document');
+	return b.member(b.id('document'), 'body');
+}
+
+const documentEvents: Readonly<Record<string, string>> = {
+	fullscreenElement: 'fullscreenchange',
+	pointerLockElement: 'pointerlockchange',
+	visibilityState: 'visibilitychange'
+};
+
+function targetBinding(
+	context: TemplateContext,
+	target: ES.Expression,
+	node: BindingNode
+): ES.Expression {
+	const { get, set } = accessors(context, node.expression);
+	const name = node.name;
+	switch (name) {
+		case 'innerWidth':
+		case 'innerHeight':
+		case 'outerWidth':
+		case 'outerHeight':
+			return runtime(context, 'bindWindowSize', b.literal(name), set);
+		case 'scrollX':
+		case 'scrollY':
+			return runtime(
+				context,
+				'bindWindowScroll',
+				b.literal(name === 'scrollX' ? 'x' : 'y'),
+				get,
+				set
+			);
+		case 'online':
+			return runtime(context, 'bindOnline', set);
+		case 'devicePixelRatio':
+			return runtime(context, 'bindProperty', b.literal(name), b.literal('resize'), target, set);
+		case 'activeElement':
+			return runtime(context, 'bindActiveElement', set);
+		default: {
+			const event = documentEvents[name];
+			if (event === undefined) throw unsupported(node, `bind:${name}`);
+			return runtime(context, 'bindProperty', b.literal(name), b.literal(event), target, set);
+		}
+	}
+}
+
+function targetCode(context: TemplateContext, node: Special): ES.Statement[] {
+	const target = targetOf(node);
+	const statements: ES.Statement[] = [];
+	for (const attribute of node.attributes) {
+		switch (attribute.kind) {
+			case 'attribute': {
+				if (attribute.value.kind !== 'expression' || !/^on/i.test(attribute.name)) {
+					throw unsupported(
+						attribute,
+						`The ${attribute.name} attribute on <${nameOf(node.target)}>`
+					);
+				}
+				let type = attribute.name.slice(2).toLowerCase();
+				const capture = isCapture(type);
+				if (capture) type = type.slice(0, -7);
+				const args: ES.Expression[] = [
+					target,
+					b.literal(type),
+					named(context, type, handler(context, attribute.value.expression, statements))
+				];
+				if (capture) args.push(b.literal(true));
+				statements.push(b.statement(runtime(context, 'on', ...args)));
+				break;
+			}
+			case 'binding':
+				statements.push(...validateBinding(context, node, attribute));
+				statements.push(b.statement(targetBinding(context, target, attribute)));
+				break;
+			case 'action':
+				statements.push(actionCall(context, target, attribute));
+				break;
+			case 'attachment':
+				statements.push(attachCall(context, target, attribute));
+				break;
+			default:
+				throw unsupported(attribute, `The ${attribute.kind} directive on <${nameOf(node.target)}>`);
+		}
+	}
+	return statements;
+}
+
+export function separateCode(context: TemplateContext, fragment: Fragment): ES.Statement[] {
+	const statements: ES.Statement[] = [];
+	for (const node of context.component.separate.get(fragment) ?? []) {
+		if (node.kind === 'title') statements.push(titleCode(context, node));
+		else if (node.target === 'head') statements.push(headCode(context, node));
+		else statements.push(...targetCode(context, node));
+	}
+	return statements;
+}

package/src/compiler/client/template.ts

@@ -0,0 +1,533 @@
+import type * as ES from 'estree';
+import { format as nativeFormat, htmlPolicy, type Format } from '../../shared/format.ts';
+import {
+	asyncStep,
+	dynamic,
+	hoisted,
+	richSelect,
+	unsupported,
+	type AsyncStep,
+	type ComponentAnalysis
+} from '../analysis/index.ts';
+import * as b from '../ir/estree.ts';
+import type { Expression, Fragment, Namespace, Node, RawHtml, Text } from '../ir/nodes.ts';
+import type { Host, Scoping } from '../css/index.ts';
+import { asyncSetup, awaiting } from './asynchronous.ts';
+import { blockCode } from './blocks.ts';
+import type { GroupKey } from './bindings.ts';
+import {
+	boundaryCall,
+	componentCall,
+	isDynamicComponent,
+	isStaticRender,
+	renderCall,
+	snippetDeclarations,
+	styledComponent
+} from './component.ts';
+import { constantDeclarations } from './constants.ts';
+import { dynamicCall } from './dynamic.ts';
+import { slotCall } from './custom-element.ts';
+import { elementPart } from './element.ts';
+import { anchorComment, html, tree, type Fragments, type Markup } from './markup.ts';
+import type { Positions } from './meta.ts';
+import { rewrite, runtime, type Context } from './script.ts';
+
+export interface TemplateContext extends Context {
+	readonly component: ComponentAnalysis;
+	readonly events: Set<string>;
+	readonly groups: Map<GroupKey, ES.Identifier>;
+	readonly instance: ES.Statement[];
+	readonly early: ES.Statement[];
+	readonly moduleSetup: ES.Statement[];
+	readonly scoping: Scoping;
+	readonly format: Format;
+	readonly positions: Positions;
+	readonly boundContent?: boolean;
+	readonly structural?: boolean;
+	readonly externalRows?: boolean;
+	readonly fragments: Fragments;
+}
+
+export function scopeHash(context: TemplateContext, node: Host): string | null {
+	const { hash, scoped } = context.scoping;
+	return hash !== '' && scoped.has(node) ? hash : null;
+}
+
+export interface Emit {
+	readonly init: ES.Statement[];
+	readonly after: ES.Statement[];
+	readonly update: ES.Statement[];
+	readonly thunks: ES.Expression[];
+	readonly params: ES.Identifier[];
+	content?: ES.Statement[];
+	awaited?: Emit;
+}
+
+export function awaitedEmit(emit: Emit): Emit {
+	return (emit.awaited ??= {
+		init: emit.init,
+		after: emit.after,
+		update: [],
+		thunks: [],
+		params: []
+	});
+}
+
+export interface Part {
+	readonly markup: Markup;
+	readonly hint: string;
+	readonly text: boolean;
+	readonly referenced: boolean;
+	readonly children: readonly Part[];
+	readonly setup: ((node: ES.Identifier, emit: Emit) => void) | null;
+}
+
+export const SINGLE = 1;
+export const SVG = 2;
+export const MATHML = 4;
+export const SCRIPTS = 8;
+
+function needed(part: Part): boolean {
+	return part.referenced || part.children.some(needed);
+}
+
+export function cleaned(context: TemplateContext, fragment: Fragment): readonly Node[] {
+	const nodes = context.component.fragments.get(fragment);
+	if (nodes === undefined) throw new Error('fragment was not analyzed');
+	return nodes;
+}
+
+export function hasCall(expression: ES.Node): boolean {
+	let found = false;
+	b.walk(expression, (node) => {
+		if (found) return false;
+		if (node.type === 'ArrowFunctionExpression' || node.type === 'FunctionExpression') return false;
+		if (
+			node.type === 'CallExpression' ||
+			node.type === 'NewExpression' ||
+			node.type === 'TaggedTemplateExpression'
+		) {
+			found = true;
+			return false;
+		}
+	});
+	return found;
+}
+
+export function memo(
+	context: TemplateContext,
+	emit: Emit,
+	source: ES.Expression,
+	value: ES.Expression
+): ES.Expression {
+	if (!hasCall(source)) return value;
+	const param = b.id(context.names.unique('$value'));
+	emit.thunks.push(b.arrow([], value));
+	emit.params.push(param);
+	return param;
+}
+
+export function isDynamic(context: TemplateContext, expression: ES.Node): boolean {
+	return dynamic(context.component, expression);
+}
+
+function textValue(
+	context: TemplateContext,
+	emit: Emit,
+	run: readonly (Text | Expression)[]
+): ES.Expression {
+	const read = (expression: ES.Expression): ES.Expression => {
+		const value = rewrite(context, expression);
+		return context.boundContent ? value : memo(context, emit, expression, value);
+	};
+	const [only] = run;
+	if (run.length === 1 && only?.kind === 'expression') return read(only.expression);
+	const quasis: string[] = [''];
+	const expressions: ES.Expression[] = [];
+	for (const part of run) {
+		if (part.kind === 'text') {
+			quasis[quasis.length - 1] += part.data;
+		} else {
+			const value = read(part.expression);
+			expressions.push(b.logical('??', value, b.literal('')));
+			quasis.push('');
+		}
+	}
+	return b.template(quasis, expressions);
+}
+
+function textPart(context: TemplateContext, run: readonly (Text | Expression)[]): Part {
+	if (run.every((part) => part.kind === 'text')) {
+		const data = run.map((part) => (part as Text).data).join('');
+		return {
+			markup: { kind: 'text', data },
+			hint: 'text',
+			text: false,
+			referenced: false,
+			children: [],
+			setup: null
+		};
+	}
+	const reactive =
+		!context.boundContent &&
+		run.some((part) => part.kind === 'expression' && isDynamic(context, part.expression));
+	const empty = run.every((part) => part.kind === 'expression' || part.data === '');
+	return {
+		markup: { kind: 'text', data: ' ' },
+		hint: 'text',
+		text: empty,
+		referenced: true,
+		children: [],
+		setup: (node, emit) => {
+			if (reactive) {
+				emit.update.push(
+					b.statement(runtime(context, 'text', node, textValue(context, emit, run)))
+				);
+			} else {
+				const value = textValue(
+					context,
+					{ init: [], after: [], update: [], thunks: [], params: [] },
+					run
+				);
+				emit.init.push(b.statement(runtime(context, 'text', node, value)));
+			}
+		}
+	};
+}
+
+export const HTML_CONTROLLED = 1;
+const HTML_SVG = 2;
+const HTML_MATHML = 4;
+const HTML_UNCHECKED = 8;
+
+export function htmlCall(
+	context: TemplateContext,
+	node: RawHtml,
+	target: ES.Identifier,
+	given: number
+): ES.Statement {
+	let flags = given;
+	if (context.component.ignored.get(node)?.has('hydration_html_changed')) flags |= HTML_UNCHECKED;
+	const args: ES.Expression[] = [target, b.arrow([], rewrite(context, node.expression))];
+	if (flags !== 0) args.push(b.literal(flags));
+	return b.statement(runtime(context, 'html', ...args));
+}
+
+function anchorPart(setup: (node: ES.Identifier, emit: Emit) => void): Part {
+	return {
+		markup: anchorComment,
+		hint: 'node',
+		text: false,
+		referenced: true,
+		children: [],
+		setup
+	};
+}
+
+export function parts(
+	context: TemplateContext,
+	nodes: readonly Node[],
+	namespace: Namespace,
+	step: AsyncStep | null = asyncStep(nodes, context.awaited)
+): Part[] {
+	if (step !== null)
+		return [anchorPart(asyncSetup(context, step.rest, step.pending, namespace, render))];
+	const result: Part[] = [];
+	let run: (Text | Expression)[] = [];
+	const flush = (): void => {
+		if (run.length > 0) {
+			const pending = awaiting(context, run);
+			result.push(
+				pending.length > 0
+					? anchorPart(asyncSetup(context, run, pending, namespace, render, 'content'))
+					: textPart(context, run)
+			);
+		}
+		run = [];
+	};
+	for (const node of nodes) {
+		if (node.kind === 'text' || node.kind === 'expression') {
+			run.push(node);
+			continue;
+		}
+		flush();
+		const pending =
+			node.kind === 'snippet' || node.kind === 'async-block' ? [] : awaiting(context, [node]);
+		if (pending.length > 0) {
+			result.push(anchorPart(asyncSetup(context, [node], pending, namespace, render)));
+			continue;
+		}
+		switch (node.kind) {
+			case 'element':
+				result.push(elementPart(context, node, namespace));
+				break;
+			case 'comment':
+				result.push({
+					markup: { kind: 'comment', data: node.data },
+					hint: 'comment',
+					text: false,
+					referenced: false,
+					children: [],
+					setup: null
+				});
+				break;
+			case 'branch':
+			case 'keyed-list':
+			case 'unkeyed-list':
+			case 'keyed-block':
+			case 'async-block':
+				result.push(
+					anchorPart((anchor, emit) => emit.init.push(...blockCode(context, node, anchor)))
+				);
+				break;
+			case 'component':
+				result.push(
+					styledComponent(context, node, namespace === 'svg') ??
+						anchorPart((anchor, emit) => emit.init.push(...componentCall(context, node, anchor)))
+				);
+				break;
+			case 'slot':
+				result.push(anchorPart((anchor, emit) => emit.init.push(slotCall(context, node, anchor))));
+				break;
+			case 'render':
+				result.push(
+					anchorPart((anchor, emit) => emit.init.push(...renderCall(context, node, anchor)))
+				);
+				break;
+			case 'boundary':
+				result.push(
+					anchorPart((anchor, emit) => emit.init.push(...boundaryCall(context, node, anchor)))
+				);
+				break;
+			case 'dynamic-element':
+				result.push(
+					anchorPart((anchor, emit) => emit.init.push(...dynamicCall(context, node, anchor)))
+				);
+				break;
+			case 'raw-html': {
+				const flags = namespace === 'svg' ? HTML_SVG : namespace === 'mathml' ? HTML_MATHML : 0;
+				result.push(
+					anchorPart((anchor, emit) => emit.init.push(htmlCall(context, node, anchor, flags)))
+				);
+				break;
+			}
+			case 'debug':
+			case 'snippet':
+			case 'constant':
+			case 'declaration':
+				break;
+			default:
+				throw unsupported(node, `The ${node.kind} node`);
+		}
+	}
+	flush();
+	return result;
+}
+
+function withElementChildren(context: TemplateContext, nodes: readonly Node[]): Node[] {
+	const result: Node[] = [];
+	for (const node of nodes) {
+		result.push(node);
+		if (node.kind === 'element') {
+			if ((context.component.namespaces.get(node) ?? 'html') === 'html' && richSelect(node))
+				continue;
+			const body = cleaned(context, node.body);
+			result.push(
+				...withElementChildren(context, asyncStep(body, context.awaited)?.before ?? body)
+			);
+		}
+	}
+	return result;
+}
+
+function standalone(context: TemplateContext, nodes: readonly Node[]): Node | null {
+	const regular = nodes.filter((node) => !hoisted(node));
+	if (regular.length !== 1) return null;
+	const [only] = regular;
+	if (only === undefined || awaiting(context, [only]).length > 0) return null;
+	if (
+		only?.kind === 'component' &&
+		!isDynamicComponent(context, only) &&
+		!only.attributes.some(
+			(attribute) => attribute.kind === 'attribute' && attribute.name.startsWith('--')
+		)
+	)
+		return only;
+	if (only?.kind === 'render' && isStaticRender(context, only)) return only;
+	return null;
+}
+
+export function navigate(
+	context: TemplateContext,
+	list: readonly Part[],
+	initial: (text: boolean) => ES.Expression,
+	emit: Emit
+): boolean {
+	let previous = initial;
+	let skipped = 0;
+	let moved = false;
+	for (const part of list) {
+		if (!needed(part)) {
+			skipped++;
+			continue;
+		}
+		const from = previous;
+		const expression =
+			skipped === 0
+				? from(part.text)
+				: runtime(
+						context,
+						'sibling',
+						from(false),
+						...(part.text || skipped !== 1 ? [b.literal(skipped)] : []),
+						...(part.text ? [b.literal(true)] : [])
+					);
+		let id: ES.Identifier;
+		if (expression.type === 'Identifier') {
+			id = expression;
+		} else {
+			id = b.id(context.names.unique(part.hint.replace(/[^\w$]/g, '_')));
+			emit.init.push(b.constant(id.name, expression));
+		}
+		moved = true;
+		previous = () => id;
+		skipped = 1;
+		if (part.children.some(needed)) {
+			const node = id;
+			const descended = navigate(
+				context,
+				part.children,
+				(text) => runtime(context, 'child', node, ...(text ? [b.literal(true)] : [])),
+				emit
+			);
+			if (descended) emit.init.push(b.statement(runtime(context, 'reset', node)));
+		}
+		part.setup?.(id, emit);
+	}
+	if (skipped > 1) {
+		emit.init.push(
+			b.statement(runtime(context, 'next', ...(skipped - 1 !== 1 ? [b.literal(skipped - 1)] : [])))
+		);
+	}
+	return moved;
+}
+
+function effectCall(
+	context: TemplateContext,
+	name: string,
+	emit: Emit | undefined
+): ES.Statement[] {
+	if (emit === undefined || emit.update.length === 0) return [];
+	const args: ES.Expression[] = [b.arrow(emit.params, emit.update)];
+	if (emit.thunks.length > 0) args.push({ type: 'ArrayExpression', elements: emit.thunks });
+	return [b.statement(runtime(context, name, ...args))];
+}
+
+export function flush(context: TemplateContext, emit: Emit): ES.Statement[] {
+	const content = emit.content ?? [];
+	const effects = [
+		...effectCall(context, 'content', emit),
+		...effectCall(context, 'awaitedContent', emit.awaited)
+	];
+	if (effects.length === 0 && content.length === 0 && emit.after.length === 0) return emit.init;
+	return [...emit.init, ...content, ...effects, ...emit.after];
+}
+
+function hasScript(part: Part): boolean {
+	return part.hint.toLowerCase() === 'script' || part.children.some(hasScript);
+}
+
+function flags(namespace: Namespace, single: boolean, scripts: boolean): number {
+	let result = single ? SINGLE : 0;
+	if (namespace === 'svg') result |= SVG;
+	if (namespace === 'mathml') result |= MATHML;
+	if (scripts) result |= SCRIPTS;
+	return result;
+}
+
+export function policyArgument(context: TemplateContext): ES.Expression[] {
+	const policy = htmlPolicy(context.format);
+	return policy === htmlPolicy(nativeFormat) ? [] : [b.literal(policy)];
+}
+
+function isElement(part: Part | undefined): boolean {
+	return part?.markup.kind === 'element';
+}
+
+export function render(
+	context: TemplateContext,
+	nodes: readonly Node[],
+	anchor: ES.Identifier,
+	namespace: Namespace,
+	textFirst: boolean
+): ES.Statement[] {
+	const step = asyncStep(nodes, context.awaited);
+	const within = step === null ? withElementChildren(context, nodes) : step.before;
+	const declarations = [
+		...snippetDeclarations(context, within),
+		...constantDeclarations(context, within, new Set(nodes))
+	];
+	if (context.dev) {
+		for (const node of within) {
+			if (node.kind !== 'debug') continue;
+			const values = b.object(
+				Object.fromEntries(
+					node.identifiers.map((id) => [
+						id.name,
+						runtime(context, 'snapshot', rewrite(context, id))
+					])
+				)
+			);
+			declarations.push(
+				b.statement(
+					runtime(
+						context,
+						'content',
+						b.arrow(
+							[],
+							[
+								b.statement(b.call(b.member(b.id('console'), 'log'), values)),
+								{ type: 'DebuggerStatement' }
+							]
+						)
+					)
+				)
+			);
+		}
+	}
+	const alone = step === null ? standalone(context, nodes) : null;
+	if (alone?.kind === 'component')
+		return [...declarations, ...componentCall(context, alone, anchor)];
+	if (alone?.kind === 'render') return [...declarations, ...renderCall(context, alone, anchor)];
+	const list = parts(context, nodes, namespace, step);
+	if (list.length === 0) return declarations;
+	const emit: Emit = { init: [...declarations], after: [], update: [], thunks: [], params: [] };
+	if (textFirst && list[0]?.markup.kind === 'text') {
+		emit.init.push(b.statement(runtime(context, 'next')));
+	}
+	const [head] = list;
+	const single = list.length === 1 && isElement(head);
+	const template = context.names.unique('root');
+	const flagged = flags(namespace, single, list.some(hasScript));
+	const markups = list.map((part) => part.markup);
+	const args: ES.Expression[] =
+		context.fragments === 'tree' ? [tree(markups)] : [b.template([markups.map(html).join('')], [])];
+	const policy = policyArgument(context);
+	if (flagged !== 0 || policy.length > 0) args.push(b.literal(flagged), ...policy);
+	const maker = context.fragments === 'tree' ? 'tree' : 'fragment';
+	context.hoisted.push(b.constant(template, runtime(context, maker, ...args)));
+	const hint = single && head !== undefined ? head.hint.replace(/[^\w$]/g, '_') : 'fragment';
+	const root = b.id(context.names.unique(hint));
+	emit.init.push(b.constant(root.name, b.call(b.id(template))));
+	if (single) {
+		navigate(context, list, () => root, emit);
+	} else {
+		navigate(
+			context,
+			list,
+			(text) => runtime(context, 'first', root, ...(text ? [b.literal(true)] : [])),
+			emit
+		);
+	}
+	return [...flush(context, emit), b.statement(runtime(context, 'append', anchor, root))];
+}