vigla 0.0.0 → 0.2.0

package/src/compiler/client/transitions.ts

@@ -0,0 +1,38 @@
+import type * as ES from 'estree';
+import * as b from '../ir/estree.ts';
+import type { Animation, Transition } from '../ir/nodes.ts';
+import { rewrite, runtime } from './script.ts';
+import type { TemplateContext } from './template.ts';
+
+const IN = 1;
+const OUT = 2;
+const GLOBAL = 4;
+
+export function transitionCall(
+	context: TemplateContext,
+	element: ES.Identifier,
+	node: Transition
+): ES.Statement {
+	let flags = node.global ? GLOBAL : 0;
+	if (node.direction !== 'out') flags |= IN;
+	if (node.direction !== 'in') flags |= OUT;
+	const args: ES.Expression[] = [
+		b.literal(flags),
+		element,
+		b.arrow([], rewrite(context, node.transition))
+	];
+	if (node.argument !== null) args.push(b.arrow([], rewrite(context, node.argument)));
+	return b.statement(runtime(context, 'transition', ...args));
+}
+
+export function animationCall(
+	context: TemplateContext,
+	element: ES.Identifier,
+	node: Animation
+): ES.Statement {
+	const params =
+		node.argument === null ? b.literal(null) : b.arrow([], rewrite(context, node.argument));
+	return b.statement(
+		runtime(context, 'animation', element, b.arrow([], rewrite(context, node.animation)), params)
+	);
+}

package/src/compiler/client/values.ts

@@ -0,0 +1,52 @@
+import type * as ES from 'estree';
+import * as b from '../ir/estree.ts';
+import type { Expression, Text, Value } from '../ir/nodes.ts';
+import { rewrite } from './script.ts';
+import { isDynamic, memo, type Emit, type TemplateContext } from './template.ts';
+
+export function valueReactive(context: TemplateContext, value: Value): boolean {
+	if (value.kind === 'boolean') return false;
+	if (value.kind === 'expression') return isDynamic(context, value.expression);
+	return value.parts.some(
+		(part) => part.kind === 'expression' && isDynamic(context, part.expression)
+	);
+}
+
+export function isStatic(value: Value): boolean {
+	return (
+		value.kind === 'boolean' ||
+		(value.kind === 'text' && value.parts.every((part) => part.kind === 'text'))
+	);
+}
+
+export function staticText(value: Value): string {
+	return value.kind === 'text' ? value.parts.map((part) => (part as Text).data).join('') : '';
+}
+
+export function valueOf(context: TemplateContext, emit: Emit | null, value: Value): ES.Expression {
+	if (value.kind === 'boolean') return b.literal(true);
+	if (value.kind === 'expression') {
+		const rewritten = rewrite(context, value.expression);
+		return emit === null ? rewritten : memo(context, emit, value.expression, rewritten);
+	}
+	const run = value.parts;
+	const [only] = run;
+	if (run.length === 1 && only?.kind === 'expression') {
+		const rewritten = rewrite(context, only.expression);
+		const memoized = emit === null ? rewritten : memo(context, emit, only.expression, rewritten);
+		return b.logical('??', memoized, b.literal(''));
+	}
+	const quasis: string[] = [''];
+	const expressions: ES.Expression[] = [];
+	for (const part of run) {
+		if (part.kind === 'text') quasis[quasis.length - 1] += part.data;
+		else {
+			const rewritten = rewrite(context, (part as Expression).expression);
+			const memoized =
+				emit === null ? rewritten : memo(context, emit, (part as Expression).expression, rewritten);
+			expressions.push(b.logical('??', memoized, b.literal('')));
+			quasis.push('');
+		}
+	}
+	return b.template(quasis, expressions);
+}

package/src/compiler/css/analyze.ts

@@ -0,0 +1,281 @@
+import { fail } from '../analysis/validate/report.ts';
+import type * as S from '../ir/style.ts';
+import {
+	isGlobal,
+	isGlobalBlockSelector,
+	isKeyframes,
+	isPseudo,
+	isUnscopedPseudoClass,
+	type Marks
+} from './marks.ts';
+
+const viewTransitions = new Set([
+	'view-transition',
+	'view-transition-group',
+	'view-transition-old',
+	'view-transition-new',
+	'view-transition-image-pair'
+]);
+
+export function complexSelectorsIn(
+	node: S.SimpleSelector | S.SelectorList | S.ComplexSelector | S.RelativeSelector,
+	visit: (complex: S.ComplexSelector) => boolean
+): void {
+	switch (node.type) {
+		case 'SelectorList':
+			for (const complex of node.children) complexSelectorsIn(complex, visit);
+			return;
+		case 'ComplexSelector':
+			if (visit(node)) for (const relative of node.children) complexSelectorsIn(relative, visit);
+			return;
+		case 'RelativeSelector':
+			for (const selector of node.selectors) complexSelectorsIn(selector, visit);
+			return;
+		case 'PseudoClassSelector':
+			if (node.args !== null) complexSelectorsIn(node.args, visit);
+			return;
+		case 'PseudoElementSelector':
+			if (node.args !== undefined) complexSelectorsIn(node.args, visit);
+			return;
+		default:
+			return;
+	}
+}
+
+export class Analysis {
+	readonly keyframes: string[] = [];
+	hasGlobal = false;
+	readonly #marks: Marks;
+
+	constructor(marks: Marks) {
+		this.#marks = marks;
+	}
+
+	sheet(sheet: S.StyleSheet): void {
+		for (const child of sheet.children) this.#child(child, null);
+	}
+
+	#child(node: S.Rule | S.Atrule | S.Declaration, rule: S.Rule | null): void {
+		if (node.type === 'Rule') this.#rule(node, rule);
+		else if (node.type === 'Atrule') this.#atrule(node, rule);
+	}
+
+	#unscoped(rule: S.Rule | null): boolean {
+		for (let current = rule; current !== null; current = this.#marks.rule(current).parent) {
+			if (!this.#marks.rule(current).hasGlobalSelectors) return false;
+		}
+		return true;
+	}
+
+	inGlobalBlock(rule: S.Rule | null): boolean {
+		for (let current = rule; current !== null; current = this.#marks.rule(current).parent) {
+			if (this.#marks.rule(current).isGlobalBlock) return true;
+		}
+		return false;
+	}
+
+	#atrule(node: S.Atrule, rule: S.Rule | null): void {
+		if (isKeyframes(node)) {
+			if (!node.prelude.startsWith('-global-') && !this.inGlobalBlock(rule)) {
+				this.keyframes.push(node.prelude);
+			} else if (node.prelude.startsWith('-global-')) {
+				this.hasGlobal ||= this.#unscoped(rule);
+			}
+		}
+		if (node.block !== null) for (const child of node.block.children) this.#child(child, rule);
+	}
+
+	#rule(node: S.Rule, parent: S.Rule | null): void {
+		const facts = this.#marks.rule(node);
+		facts.parent = parent;
+		for (const complex of node.prelude.children) {
+			let globalBlock = false;
+			complex.children.forEach((child, index) => {
+				const at = child.selectors.findIndex(isGlobalBlockSelector);
+				if (globalBlock) this.#marks.relative(child).isGlobalLike = true;
+				if (at === 0) {
+					const modifier = child.selectors[1];
+					if (modifier !== undefined && index === 0 && parent === null) {
+						fail('css_global_block_invalid_modifier_start', modifier);
+					}
+					facts.isGlobalBlock = globalBlock = true;
+					for (const selector of child.selectors.slice(1)) {
+						complexSelectorsIn(selector, (inner) => {
+							this.#marks.complex(inner).used = true;
+							return false;
+						});
+					}
+					if (child.combinator !== null && child.combinator.name !== ' ') {
+						fail('css_global_block_invalid_combinator', child, { name: child.combinator.name });
+					}
+					const declaration = node.block.children.find((entry) => entry.type === 'Declaration');
+					const lone = complex.children.length === 1 && complex.children[0]?.selectors.length === 1;
+					if (lone && node.prelude.children.length > 1) {
+						fail('css_global_block_invalid_list', node.prelude);
+					}
+					if (declaration !== undefined && node.prelude.children.length === 1 && lone) {
+						fail('css_global_block_invalid_declaration', declaration);
+					}
+				} else if (at !== -1) {
+					fail('css_global_block_invalid_modifier', child.selectors[at] ?? child);
+				}
+			});
+			if (facts.isGlobalBlock && !globalBlock) fail('css_global_block_invalid_list', node.prelude);
+		}
+
+		for (const complex of node.prelude.children) this.#complex(complex, node, false);
+
+		for (const selector of node.prelude.children) {
+			const global = this.#marks.complex(selector).isGlobal;
+			facts.hasGlobalSelectors ||= global;
+			facts.hasLocalSelectors ||= !global;
+		}
+
+		this.hasGlobal ||=
+			facts.hasGlobalSelectors &&
+			node.block.children.some((child) => child.type === 'Declaration') &&
+			this.#unscoped(parent);
+
+		for (const child of node.block.children) this.#child(child, node);
+	}
+
+	#complex(node: S.ComplexSelector, rule: S.Rule, nested: boolean): void {
+		for (const relative of node.children) this.#relative(relative, node, rule, nested);
+
+		const global = node.children.find((relative) => isGlobal(relative));
+		if (global !== undefined) {
+			const pseudo = global.selectors[0] as S.PseudoClassSelector;
+			if (nested && pseudo.args === null) fail('css_global_block_invalid_placement', pseudo);
+			const index = node.children.indexOf(global);
+			if (pseudo.args !== null && index !== 0 && index !== node.children.length - 1) {
+				for (const after of node.children.slice(index + 1)) {
+					if (!isGlobal(after)) fail('css_global_invalid_placement', pseudo);
+				}
+			}
+		}
+
+		for (const relative of node.children) {
+			relative.selectors.forEach((selector, index) => {
+				if (selector.type !== 'PseudoClassSelector' || selector.name !== 'global') return;
+				const first = selector.args?.children[0]?.children[0];
+				if (first?.selectors[0]?.type === 'TypeSelector' && index !== 0) {
+					fail('css_global_invalid_selector_list', selector);
+				}
+				const following = relative.selectors[index + 1];
+				if (following?.type === 'TypeSelector') {
+					fail('css_type_selector_invalid_placement', following);
+				}
+				if (
+					selector.args !== null &&
+					selector.args.children.length > 1 &&
+					(node.children.length > 1 || relative.selectors.length > 1)
+				) {
+					fail('css_global_invalid_selector', selector);
+				}
+			});
+		}
+
+		const facts = this.#marks.complex(node);
+		facts.rule = rule;
+		facts.isGlobal = node.children.every((relative) => {
+			const own = this.#marks.relative(relative);
+			return own.isGlobal || own.isGlobalLike;
+		});
+		facts.used ||= facts.isGlobal;
+
+		const parent = this.#marks.rule(rule).parent;
+		if (parent !== null && node.children[0]?.selectors[0]?.type === 'NestingSelector') {
+			const first = node.children[0].selectors[1];
+			const unscopedNesting = first?.type !== 'PseudoClassSelector' || isUnscopedPseudoClass(first);
+			const parentGlobal = parent.prelude.children.some((child) => {
+				const only = child.children[0];
+				return (
+					child.children.length === 1 && only !== undefined && this.#marks.relative(only).isGlobal
+				);
+			});
+			if (unscopedNesting && parentGlobal) facts.used = true;
+		}
+	}
+
+	#relative(
+		node: S.RelativeSelector,
+		complex: S.ComplexSelector,
+		rule: S.Rule,
+		nested: boolean
+	): void {
+		if (
+			node.combinator !== null &&
+			this.#marks.rule(rule).parent === null &&
+			complex.children[0] === node &&
+			!nested
+		) {
+			fail('css_selector_invalid', node.combinator);
+		}
+
+		const facts = this.#marks.relative(node);
+		facts.isGlobal = node.selectors.length >= 1 && isGlobal(node);
+
+		const first = node.selectors[0];
+		if (
+			first !== undefined &&
+			node.selectors.every(
+				(selector) =>
+					selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector'
+			)
+		) {
+			facts.isGlobalLike ||=
+				(first.type === 'PseudoClassSelector' && first.name === 'host') ||
+				(first.type === 'PseudoElementSelector' && viewTransitions.has(first.name));
+		}
+
+		facts.isGlobalLike ||=
+			node.selectors.some((selector) => isPseudo(selector, 'root')) &&
+			!node.selectors.some((selector) => isPseudo(selector, 'has'));
+
+		if (facts.isGlobalLike || facts.isGlobal) {
+			for (const selector of node.selectors) {
+				complexSelectorsIn(selector, (inner) => {
+					this.#marks.complex(inner).used = true;
+					return true;
+				});
+			}
+		}
+
+		for (const selector of node.selectors) {
+			if (selector.type === 'PseudoClassSelector' && selector.args !== null) {
+				for (const inner of selector.args.children) this.#complex(inner, rule, true);
+			} else if (selector.type === 'NestingSelector') {
+				this.#nesting(selector, rule);
+			}
+		}
+	}
+
+	#nesting(node: S.NestingSelector, rule: S.Rule): void {
+		const parent = this.#marks.rule(rule).parent;
+		if (parent === null) {
+			const children = rule.prelude.children;
+			const selectors = children[0]?.children[0]?.selectors ?? [];
+			const only = selectors[0];
+			if (
+				children.length > 1 ||
+				selectors.length > 1 ||
+				only?.type !== 'PseudoClassSelector' ||
+				only.name !== 'global' ||
+				only.args?.children[0]?.children[0]?.selectors[0] !== node
+			) {
+				fail('css_nesting_selector_invalid_placement', node);
+			}
+		} else {
+			const outer = this.#marks.rule(parent);
+			const lone = parent.prelude.children[0];
+			if (
+				outer.isGlobalBlock &&
+				outer.parent === null &&
+				lone?.children.length === 1 &&
+				lone.children[0]?.selectors.length === 1
+			) {
+				fail('css_global_block_invalid_modifier_start', node);
+			}
+		}
+	}
+}

package/src/compiler/css/attributes.ts

@@ -0,0 +1,195 @@
+import type * as ES from 'estree';
+import type * as IR from '../ir/nodes.ts';
+import type { Host } from './template.ts';
+
+const unknown = Symbol('unknown');
+
+type Possible = string | number | boolean | typeof unknown;
+
+function gather(node: ES.Node, isClass: boolean, set: Set<Possible>, nested = false): void {
+	if (set.has(unknown)) return;
+	switch (node.type) {
+		case 'Literal':
+			set.add(String(node.value));
+			return;
+		case 'ConditionalExpression':
+			gather(node.consequent, isClass, set, nested);
+			gather(node.alternate, isClass, set, nested);
+			return;
+		case 'LogicalExpression':
+			if (node.operator === '&&') {
+				const left = new Set<Possible>();
+				gather(node.left, isClass, left, nested);
+				if (left.has(unknown)) {
+					if (!isClass || !nested) {
+						set.add('');
+						set.add(false);
+						set.add(Number.NaN);
+						set.add(0);
+					}
+				} else {
+					for (const value of left) {
+						if (!value && value !== undefined && (!isClass || !nested)) set.add(value);
+					}
+				}
+				gather(node.right, isClass, set, nested);
+			} else {
+				gather(node.left, isClass, set, nested);
+				gather(node.right, isClass, set, nested);
+			}
+			return;
+		case 'ArrayExpression':
+			if (!isClass) break;
+			for (const entry of node.elements) if (entry) gather(entry, isClass, set, true);
+			return;
+		case 'ObjectExpression':
+			if (!isClass) break;
+			for (const property of node.properties) {
+				if (
+					property.type === 'Property' &&
+					!property.computed &&
+					(property.key.type === 'Identifier' || property.key.type === 'Literal')
+				) {
+					set.add(
+						property.key.type === 'Identifier' ? property.key.name : String(property.key.value)
+					);
+				} else {
+					set.add(unknown);
+				}
+			}
+			return;
+		default:
+			break;
+	}
+	set.add(unknown);
+}
+
+function possibleValues(chunk: IR.Text | IR.Expression, isClass: boolean): string[] | null {
+	const values = new Set<Possible>();
+	if (chunk.kind === 'text') values.add(chunk.data);
+	else gather(chunk.expression, isClass, values);
+	if (values.has(unknown)) return null;
+	return [...values].map((value) => String(value));
+}
+
+function test(
+	operator: string | null,
+	expected: string,
+	insensitive: boolean,
+	actual: string
+): boolean {
+	const want = insensitive ? expected.toLowerCase() : expected;
+	const value = insensitive ? actual.toLowerCase() : actual;
+	switch (operator) {
+		case '=':
+			return value === want;
+		case '~=':
+			return value.split(/\s/).includes(want);
+		case '|=':
+			return `${value}-`.startsWith(`${want}-`);
+		case '^=':
+			return value.startsWith(want);
+		case '$=':
+			return value.endsWith(want);
+		case '*=':
+			return value.includes(want);
+		default:
+			throw new Error(`Unknown attribute selector operator ${operator}`);
+	}
+}
+
+function chunksOf(value: IR.Value): readonly (IR.Text | IR.Expression)[] {
+	if (value.kind === 'text') return value.parts;
+	if (value.kind === 'expression') {
+		return [{ kind: 'expression', expression: value.expression, start: -1, end: -1 }];
+	}
+	return [];
+}
+
+const leading = /^\s/;
+const trailing = /\s$/;
+
+function combinations(value: IR.Value, isClass: boolean): Set<string> | null {
+	const possible = new Set<string>();
+	let previous: string[] = [];
+	for (const chunk of chunksOf(value)) {
+		const current = possibleValues(chunk, isClass);
+		if (current === null) return null;
+		if (previous.length > 0) {
+			const spaced: string[] = [];
+			const remaining: string[] = [];
+			for (const option of current) (leading.test(option) ? spaced : remaining).push(option);
+			if (remaining.length > 0) {
+				if (spaced.length > 0) for (const option of previous) possible.add(option);
+				const combined: string[] = [];
+				for (const before of previous) for (const after of remaining) combined.push(before + after);
+				previous = combined;
+				for (const option of spaced) {
+					if (trailing.test(option)) possible.add(option);
+					else previous.push(option);
+				}
+				continue;
+			}
+			for (const option of previous) possible.add(option);
+			previous = [];
+		}
+		for (const option of current) {
+			if (trailing.test(option)) possible.add(option);
+			else previous.push(option);
+		}
+		if (previous.length < current.length) previous.push(' ');
+		if (previous.length > 20) return null;
+	}
+	for (const option of previous) possible.add(option);
+	return possible;
+}
+
+function staticText(value: IR.Value): string | null {
+	if (value.kind !== 'text') return null;
+	if (value.parts.length === 0) return '';
+	const only = value.parts[0];
+	return value.parts.length === 1 && only?.kind === 'text' ? only.data : null;
+}
+
+export function attributeMatches(
+	host: Host,
+	name: string,
+	expected: string | null,
+	operator: string | null,
+	insensitive: boolean
+): boolean {
+	const lower = name.toLowerCase();
+	for (const attribute of host.attributes) {
+		switch (attribute.kind) {
+			case 'spread':
+				return true;
+			case 'binding':
+				if (attribute.name === name) return true;
+				continue;
+			case 'style':
+				if (lower === 'style') return true;
+				continue;
+			case 'class':
+				if (lower !== 'class') continue;
+				if (operator !== '~=' || attribute.name === expected) return true;
+				continue;
+			case 'attribute':
+				break;
+			default:
+				continue;
+		}
+		if (attribute.name.toLowerCase() !== lower) continue;
+		if (attribute.value.kind === 'boolean') return operator === null;
+		if (expected === null) return true;
+		const text = staticText(attribute.value);
+		if (text !== null) {
+			const matches = test(operator, expected, insensitive, text);
+			if (!matches && (lower === 'class' || lower === 'style')) continue;
+			return matches;
+		}
+		const possible = combinations(attribute.value, lower === 'class');
+		if (possible === null) return true;
+		for (const value of possible) if (test(operator, expected, insensitive, value)) return true;
+	}
+	return false;
+}

package/src/compiler/css/hash.ts

@@ -0,0 +1 @@
+export { hash } from '../../shared/hash.ts';