vigla 0.0.0 → 0.1.0

package/src/compiler/analysis/validate/assignment.ts

@@ -0,0 +1,74 @@
+import type * as ES from 'estree';
+import type { At } from './report.ts';
+import { fail } from './report.ts';
+import type { Context } from './context.ts';
+import type { Scope } from './scope.ts';
+import { fieldName } from './classes.ts';
+
+function constant(node: At, argument: ES.Node, scope: Scope, binding: boolean): void {
+	switch (argument.type) {
+		case 'ArrayPattern':
+			for (const element of argument.elements) if (element) constant(node, element, scope, binding);
+			return;
+		case 'ObjectPattern':
+			for (const property of argument.properties) {
+				if (property.type === 'Property') constant(node, property.value, scope, binding);
+			}
+			return;
+		case 'Identifier': {
+			const found = scope.get(argument.name);
+			if (found === null) return;
+			if (
+				found.declaration !== 'import' &&
+				(found.declaration !== 'const' || found.kind === 'each')
+			)
+				return;
+			const thing = found.declaration === 'import' ? 'import' : 'constant';
+			fail(binding ? 'constant_binding' : 'constant_assignment', node, { thing });
+		}
+		default:
+			return;
+	}
+}
+
+export function assignment(
+	context: Context,
+	node: ES.Node | (At & object),
+	argument: ES.Node,
+	binding = false
+): void {
+	constant(node, argument, context.scope, binding);
+	if (argument.type === 'Identifier') {
+		const found = context.scope.get(argument.name);
+		if (context.propsId !== null && found?.node === context.propsId) {
+			fail('constant_assignment', node, { thing: '$props.id()' });
+		}
+		if (found?.kind === 'each') fail('each_item_invalid_assignment', node);
+		if (found?.kind === 'snippet') fail('snippet_parameter_assignment', node);
+	}
+	if (argument.type !== 'MemberExpression' || argument.object.type !== 'ThisExpression') return;
+	const name =
+		argument.computed && argument.property.type !== 'Literal' ? null : fieldName(argument.property);
+	const field = name === null ? undefined : context.fields?.get(name);
+	if (field === undefined || field.node.type !== 'AssignmentExpression' || node === field.node)
+		return;
+	for (let index = context.path.length - 1; index >= 0; index--) {
+		const ancestor = context.path[index] as ES.Node;
+		if (
+			ancestor.type !== 'FunctionDeclaration' &&
+			ancestor.type !== 'FunctionExpression' &&
+			ancestor.type !== 'ArrowFunctionExpression'
+		) {
+			continue;
+		}
+		const owner = context.path[index - 1] as ES.Node | undefined;
+		if (
+			owner?.type === 'MethodDefinition' &&
+			owner.kind === 'constructor' &&
+			((node as { start?: number }).start ?? 0) < ((field.node as { start?: number }).start ?? 0)
+		) {
+			fail('state_field_invalid_assignment', node);
+		}
+		return;
+	}
+}

package/src/compiler/analysis/validate/bindings.ts

@@ -0,0 +1,210 @@
+import type * as ES from 'estree';
+import { isSvg } from '../../../shared/html.ts';
+import type * as IR from '../../ir/nodes.ts';
+import { closest } from './a11y/fuzzy.ts';
+import { assignment } from './assignment.ts';
+import type { Context } from './context.ts';
+import { fail, nameOf } from './report.ts';
+import { base } from './scope.ts';
+
+interface Property {
+	readonly valid?: readonly string[];
+	readonly invalid?: readonly string[];
+}
+
+const media = ['audio', 'video'];
+const windowOnly = [':window'];
+const documentOnly = [':document'];
+const notGlobal = [':window', ':document'];
+
+const properties: Readonly<Record<string, Property>> = {
+	currentTime: { valid: media },
+	duration: { valid: media },
+	focused: {},
+	paused: { valid: media },
+	buffered: { valid: media },
+	seekable: { valid: media },
+	played: { valid: media },
+	volume: { valid: media },
+	muted: { valid: media },
+	playbackRate: { valid: media },
+	seeking: { valid: media },
+	ended: { valid: media },
+	readyState: { valid: media },
+	videoHeight: { valid: ['video'] },
+	videoWidth: { valid: ['video'] },
+	naturalWidth: { valid: ['img'] },
+	naturalHeight: { valid: ['img'] },
+	activeElement: { valid: documentOnly },
+	fullscreenElement: { valid: documentOnly },
+	pointerLockElement: { valid: documentOnly },
+	visibilityState: { valid: documentOnly },
+	innerWidth: { valid: windowOnly },
+	innerHeight: { valid: windowOnly },
+	outerWidth: { valid: windowOnly },
+	outerHeight: { valid: windowOnly },
+	scrollX: { valid: windowOnly },
+	scrollY: { valid: windowOnly },
+	online: { valid: windowOnly },
+	devicePixelRatio: { valid: windowOnly },
+	clientWidth: { invalid: notGlobal },
+	clientHeight: { invalid: notGlobal },
+	offsetWidth: { invalid: notGlobal },
+	offsetHeight: { invalid: notGlobal },
+	contentRect: { invalid: notGlobal },
+	contentBoxSize: { invalid: notGlobal },
+	borderBoxSize: { invalid: notGlobal },
+	devicePixelContentBoxSize: { invalid: notGlobal },
+	indeterminate: { valid: ['input'] },
+	checked: { valid: ['input'] },
+	group: { valid: ['input'] },
+	this: {},
+	innerText: { invalid: notGlobal },
+	innerHTML: { invalid: notGlobal },
+	textContent: { invalid: notGlobal },
+	open: { valid: ['details'] },
+	value: { valid: ['input', 'textarea', 'select'] },
+	files: { valid: ['input'] }
+};
+
+const names = Object.keys(properties);
+
+const editable = new Set(['textContent', 'innerHTML', 'innerText']);
+
+export type Host = IR.Element | IR.DynamicElement | IR.Special;
+
+function keyOf(host: Host): string {
+	if (host.kind === 'element') return host.name;
+	if (host.kind === 'dynamic-element') return ':element';
+	return `:${host.target}`;
+}
+
+function shown(key: string): string {
+	return key.startsWith(':') ? nameOf(key.slice(1)) : key;
+}
+
+function attributeNamed(host: Host, name: string): IR.Property | undefined {
+	return host.attributes.find((a): a is IR.Property => a.kind === 'attribute' && a.name === name);
+}
+
+export function textOf(attribute: IR.Property): string | null {
+	const value = attribute.value;
+	if (value.kind !== 'text' || value.parts.length !== 1) return null;
+	const part = value.parts[0] as IR.Text | IR.Expression;
+	return part.kind === 'text' ? part.data : null;
+}
+
+function target(node: IR.Binding, host: Host): void {
+	const parent = keyOf(host);
+	const property = properties[node.name];
+	if (property === undefined) {
+		const match = closest(node.name, names);
+		if (match !== null) {
+			const found = properties[match] as Property;
+			if (found.valid === undefined || found.valid.includes(parent)) {
+				fail('bind_invalid_name', node, {
+					name: node.name,
+					explanation: `Did you mean '${match}'?`
+				});
+			}
+		}
+		fail('bind_invalid_name', node, { name: node.name });
+	}
+	if (property.valid !== undefined && !property.valid.includes(parent)) {
+		fail('bind_invalid_target', node, {
+			name: node.name,
+			elements: property.valid.map((valid) => `\`<${shown(valid)}>\``).join(', ')
+		});
+	}
+	if (property.invalid?.includes(parent)) {
+		const valid = names
+			.filter((name) => {
+				const candidate = properties[name] as Property;
+				return (
+					candidate.valid?.includes(parent) ||
+					(candidate.valid === undefined && !candidate.invalid?.includes(parent))
+				);
+			})
+			.sort();
+		fail('bind_invalid_name', node, {
+			name: node.name,
+			explanation: `Possible bindings for <${shown(parent)}> are ${valid.join(', ')}`
+		});
+	}
+	if (parent === 'input' && node.name !== 'this') {
+		const type = attributeNamed(host, 'type');
+		if (type !== undefined && textOf(type) === null) {
+			if (node.name !== 'value' || type.value.kind === 'boolean')
+				fail('attribute_invalid_type', type);
+		} else {
+			const kind = type === undefined ? undefined : textOf(type);
+			if (node.name === 'checked' && kind !== 'checkbox') {
+				const radio = kind === 'radio' ? ' — for `<input type="radio">`, use `bind:group`' : '';
+				fail('bind_invalid_target', node, {
+					name: node.name,
+					elements: `\`<input type="checkbox">\`${radio}`
+				});
+			}
+			if (node.name === 'files' && kind !== 'file') {
+				fail('bind_invalid_target', node, { name: node.name, elements: '`<input type="file">`' });
+			}
+		}
+	}
+	if (parent === 'select' && node.name !== 'this') {
+		const multiple = attributeNamed(host, 'multiple');
+		if (multiple !== undefined && textOf(multiple) === null && multiple.value.kind !== 'boolean') {
+			fail('attribute_invalid_multiple', multiple);
+		}
+	}
+	if (node.name === 'offsetWidth' && isSvg(parent)) {
+		fail('bind_invalid_target', node, {
+			name: node.name,
+			elements: 'non-`<svg>` elements. Use `bind:clientWidth` for `<svg>` instead'
+		});
+	}
+	if (editable.has(node.name)) {
+		const contenteditable = attributeNamed(host, 'contenteditable');
+		if (contenteditable === undefined) fail('attribute_contenteditable_missing', node);
+		else if (textOf(contenteditable) === null && contenteditable.value.kind !== 'boolean') {
+			fail('attribute_contenteditable_dynamic', contenteditable);
+		}
+	}
+}
+
+export function binding(context: Context, node: IR.Binding, host: Host | null): void {
+	if (host !== null) target(node, host);
+	const expression = node.expression;
+	if (expression.type === 'SequenceExpression') {
+		if (node.name === 'group') fail('bind_group_invalid_expression', node);
+		if (expression.expressions.length !== 2) fail('bind_invalid_expression', node);
+		const [get, set] = expression.expressions as [ES.Expression, ES.Expression];
+		context.es(get.type === 'ArrowFunctionExpression' ? (get.body as ES.Node) : get);
+		context.es(set.type === 'ArrowFunctionExpression' ? (set.body as ES.Node) : set);
+		return;
+	}
+	assignment(context, node, expression, true);
+	const left = base(expression);
+	if (left === null) fail('bind_invalid_expression', node);
+	const found = context.scope.get(left.name);
+	if (expression.type === 'Identifier' && node.name !== 'this') {
+		const kind = found?.kind;
+		if (
+			found === null ||
+			(kind !== 'state' &&
+				kind !== 'raw_state' &&
+				kind !== 'prop' &&
+				kind !== 'bindable_prop' &&
+				kind !== 'each' &&
+				kind !== 'store_sub' &&
+				!found.updated)
+		) {
+			fail('bind_invalid_value', expression);
+		}
+	}
+	if (node.name === 'group' && found?.kind === 'snippet')
+		fail('bind_group_invalid_snippet_parameter', node);
+	if (found?.kind === 'each' && found.insideRest) {
+		context.report.warn('bind_invalid_each_rest', found.node, { name: found.node.name });
+	}
+	context.es(expression);
+}

package/src/compiler/analysis/validate/classes.ts

@@ -0,0 +1,102 @@
+import type * as ES from 'estree';
+import type { Context, Field } from './context.ts';
+import { fail } from './report.ts';
+
+const creating = new Set(['$state', '$state.raw', '$derived', '$derived.by']);
+
+export function fieldName(node: ES.Node): string | null {
+	if (node.type === 'Literal') return String(node.value);
+	if (node.type === 'PrivateIdentifier') return `#${node.name}`;
+	if (node.type === 'Identifier') return node.name;
+	return null;
+}
+
+type Kinds = string[];
+
+export function classBody(context: Context, node: ES.ClassBody): void {
+	const fields = new Map<string, Field>();
+	const members = new Map<string, Kinds>();
+	let constructor: ES.MethodDefinition | null = null;
+	const handle = (
+		owner: ES.PropertyDefinition | ES.AssignmentExpression,
+		key: ES.Node,
+		value: ES.Node | null | undefined
+	): void => {
+		const name = fieldName(key);
+		if (name === null) return;
+		const rune = context.rune(value);
+		if (rune === null || !creating.has(rune)) return;
+		if (fields.has(name)) fail('state_field_duplicate', owner, { name });
+		const member = (owner.type === 'AssignmentExpression' || !owner.static ? '' : '@') + name;
+		const kinds = members.get(member);
+		if (kinds !== undefined && !(kinds.length === 1 && kinds[0] === 'prop')) {
+			fail('duplicate_class_field', owner, { name: member });
+		}
+		fields.set(name, { node: owner });
+	};
+	for (const child of node.body) {
+		if (child.type === 'PropertyDefinition' && !child.computed && !child.static) {
+			handle(child, child.key, child.value);
+			const key = fieldName(child.key) ?? '';
+			if (!members.has(key)) {
+				members.set(key, [child.value ? 'assigned_prop' : 'prop']);
+				continue;
+			}
+			fail('duplicate_class_field', child, { name: key });
+		}
+		if (child.type !== 'MethodDefinition') continue;
+		if (child.kind === 'constructor') {
+			constructor = child;
+			continue;
+		}
+		if (child.computed) continue;
+		const key = (child.static ? '@' : '') + fieldName(child.key);
+		const kinds = members.get(key);
+		if (kinds === undefined) {
+			members.set(key, [child.kind]);
+			continue;
+		}
+		if (kinds.includes(child.kind) || kinds.includes('prop') || kinds.includes('assigned_prop')) {
+			fail('duplicate_class_field', child, { name: key });
+		}
+		if (child.kind === 'get' && kinds.length === 1 && kinds[0] === 'set') {
+			kinds.push('get');
+			continue;
+		}
+		if (child.kind === 'set' && kinds.length === 1 && kinds[0] === 'get') {
+			kinds.push('set');
+			continue;
+		}
+		if (child.kind === 'method') {
+			kinds.push(child.kind);
+			continue;
+		}
+		fail('duplicate_class_field', child, { name: key });
+	}
+	if (constructor !== null) {
+		for (const statement of constructor.value.body.body) {
+			if (
+				statement.type !== 'ExpressionStatement' ||
+				statement.expression.type !== 'AssignmentExpression'
+			)
+				continue;
+			const { left, right } = statement.expression;
+			if (left.type !== 'MemberExpression' || left.object.type !== 'ThisExpression') continue;
+			if (left.computed && left.property.type !== 'Literal') continue;
+			handle(statement.expression, left.property, right);
+		}
+	}
+	const saved = context.fields;
+	context.fields = fields;
+	context.next(node);
+	context.fields = saved;
+}
+
+export function propertyDefinition(context: Context, node: ES.PropertyDefinition): void {
+	const name = fieldName(node.key);
+	const field = name === null ? undefined : context.fields?.get(name);
+	if (field === undefined || node === field.node || !node.value) return;
+	if ((node as { start?: number }).start! < (field.node as { start?: number }).start!) {
+		fail('state_field_invalid_assignment', node);
+	}
+}

package/src/compiler/analysis/validate/context.ts

@@ -0,0 +1,119 @@
+import type * as ES from 'estree';
+import { children } from '../../ir/estree.ts';
+import type * as IR from '../../ir/nodes.ts';
+import type { Runes, Unit } from '../../ir/port.ts';
+import type { Anchors } from './front.ts';
+import type { Report } from './report.ts';
+import type { Scope, PathNode } from './scope.ts';
+import type { Scopes } from './scopes.ts';
+
+export type Program = 'module' | 'instance' | 'template' | null;
+
+export interface Field {
+	readonly node: ES.Node;
+}
+
+export interface Settings {
+	readonly customElement: boolean;
+	readonly customProps: boolean;
+	readonly async: boolean;
+}
+
+export type Visit = (context: Context, node: ES.Node) => void;
+
+export class Context {
+	readonly unit: Unit;
+	readonly report: Report;
+	readonly scopes: Scopes;
+	readonly runes: Runes;
+	readonly settings: Settings;
+	readonly module: Scope;
+	readonly instance: Scope | null;
+	readonly path: PathNode[] = [];
+	readonly elements: IR.Node[] = [];
+	readonly snippets: IR.Snippet[] = [];
+	readonly #visit: Visit;
+	readonly anchors: Anchors;
+	scope: Scope;
+	depth = 0;
+	program: Program = null;
+	parentElement: string | null = null;
+	hasProps = false;
+	propsId: ES.Identifier | null = null;
+	fields: ReadonlyMap<string, Field> | null = null;
+
+	constructor(
+		unit: Unit,
+		report: Report,
+		scopes: Scopes,
+		settings: Settings,
+		module: Scope,
+		instance: Scope | null,
+		visit: Visit,
+		anchors: Anchors
+	) {
+		this.anchors = anchors;
+		this.unit = unit;
+		this.report = report;
+		this.scopes = scopes;
+		this.runes = unit.runes;
+		this.settings = settings;
+		this.module = module;
+		this.instance = instance;
+		this.scope = module;
+		this.#visit = visit;
+	}
+
+	rune(node: ES.Node | null | undefined): string | null {
+		if (node?.type !== 'CallExpression') return null;
+		const rune = this.runes.get(node.callee);
+		if (rune === undefined) return null;
+		const callee = node.callee.type === 'MemberExpression' ? node.callee.object : node.callee;
+		if (callee.type === 'Identifier' && this.scope.get(callee.name)?.kind === 'store_sub')
+			return null;
+		return rune;
+	}
+
+	start(program: Program, scope: Scope): void {
+		this.program = program;
+		this.scope = scope;
+		this.depth = scope.depth;
+		this.hasProps = false;
+		this.fields = null;
+		this.parentElement = null;
+	}
+
+	es(node: ES.Node): void {
+		const entered = this.report.enter(node);
+		const saved = this.scope;
+		const scope = this.scopes.map.get(node);
+		if (scope !== undefined) this.scope = scope;
+		this.anchors.emit(node);
+		this.#visit(this, node);
+		this.scope = saved;
+		this.report.leave(entered);
+	}
+
+	next(node: ES.Node): void {
+		this.path.push(node);
+		children(node, (child) => this.es(child));
+		this.path.pop();
+	}
+
+	deeper(depth: number, run: () => void): void {
+		const saved = this.depth;
+		this.depth = depth;
+		run();
+		this.depth = saved;
+	}
+
+	within(node: PathNode, run: () => void): void {
+		this.path.push(node);
+		run();
+		this.path.pop();
+	}
+
+	at(offset: number): ES.Node | undefined {
+		return this.path.at(offset) as ES.Node | undefined;
+	}
+}

package/src/compiler/analysis/validate/element.ts

@@ -0,0 +1,148 @@
+import type * as ES from 'estree';
+import type * as IR from '../../ir/nodes.ts';
+import type { Context } from './context.ts';
+import { invalidIn, invalidUnder } from '../../../shared/nesting.ts';
+import { fail } from './report.ts';
+import { typeOf } from './scope.ts';
+
+const illegal = /(^[0-9-.])|[\^$@%&#?!|()[\]{}^*+~;]/;
+
+const react = new Map([
+	['className', 'class'],
+	['htmlFor', 'for']
+]);
+
+const blocks = new Set(['branch', 'keyed-list', 'unkeyed-list', 'async-block', 'keyed-block']);
+
+const opaque = new Set(['component', 'dynamic-element', 'snippet']);
+
+export function eventExpression(attribute: IR.Property): ES.Expression | null {
+	return attribute.value.kind === 'expression' ? attribute.value.expression : null;
+}
+
+export function globalEvent(context: Context, attribute: IR.Property): void {
+	const value = eventExpression(attribute);
+	if (
+		value?.type === 'Identifier' &&
+		value.name === attribute.name &&
+		context.scope.get(value.name) === null
+	) {
+		context.report.warn('attribute_global_event_reference', attribute, { name: attribute.name });
+	}
+}
+
+function animation(context: Context, attribute: IR.Animation): void {
+	const list = context.path.at(-2);
+	if (list === undefined || (typeOf(list) !== 'keyed-list' && typeOf(list) !== 'unkeyed-list')) {
+		fail('animation_invalid_placement', attribute);
+	}
+	if (typeOf(list) === 'unkeyed-list') fail('animation_missing_key', attribute);
+	const body = (list as IR.KeyedList).body.nodes.filter(
+		(node) =>
+			node.kind !== 'comment' &&
+			node.kind !== 'constant' &&
+			node.kind !== 'declaration' &&
+			(node.kind !== 'text' || node.data.trim() !== '')
+	);
+	if (body.length > 1) fail('animation_invalid_placement', attribute);
+}
+
+const directions: Readonly<Record<IR.Transition['direction'], string>> = {
+	both: 'transition',
+	in: 'in',
+	out: 'out'
+};
+
+export function validateElement(context: Context, node: IR.Element | IR.DynamicElement): void {
+	let animated = false;
+	let intro: IR.Transition | null = null;
+	let outro: IR.Transition | null = null;
+	for (const attribute of node.attributes) {
+		switch (attribute.kind) {
+			case 'attribute': {
+				if (illegal.test(attribute.name))
+					fail('attribute_invalid_name', attribute, { name: attribute.name });
+				if (attribute.name.startsWith('on') && attribute.name.length > 2) {
+					if (attribute.value.kind !== 'expression')
+						fail('attribute_invalid_event_handler', attribute);
+					globalEvent(context, attribute);
+				}
+				if (attribute.name === 'is') context.report.warn('attribute_avoid_is', attribute);
+				const right = react.get(attribute.name);
+				if (right !== undefined) {
+					context.report.warn('attribute_invalid_property_name', attribute, {
+						wrong: attribute.name,
+						right
+					});
+				}
+				break;
+			}
+			case 'animation':
+				animation(context, attribute);
+				if (animated) fail('animation_duplicate', attribute);
+				animated = true;
+				break;
+			case 'transition': {
+				const isIntro = attribute.direction !== 'out';
+				const isOutro = attribute.direction !== 'in';
+				const existing = (isIntro && intro) || (isOutro && outro) || null;
+				if (existing !== null) {
+					const a = directions[existing.direction];
+					const b = directions[attribute.direction];
+					if (a === b) fail('transition_duplicate', attribute, { type: a });
+					fail('transition_conflict', attribute, { type: a, existing: b });
+				}
+				if (isIntro) intro = attribute;
+				if (isOutro) outro = attribute;
+				break;
+			}
+			default:
+				break;
+		}
+	}
+}
+
+export function placement(context: Context, node: IR.Element): void {
+	const parent = context.parentElement;
+	if (parent === null) return;
+	let past = false;
+	let warn = false;
+	const ancestors = [parent];
+	const report = (message: string): void => {
+		if (warn) context.report.warn('node_invalid_placement_ssr', node, { message });
+		else fail('node_invalid_placement', node, { message });
+	};
+	for (let index = context.path.length - 1; index >= 0; index--) {
+		const ancestor = context.path[index]!;
+		const kind = typeOf(ancestor);
+		if (blocks.has(kind)) warn = true;
+		if (!past) {
+			if (kind === 'element' && (ancestor as IR.Element).name === parent) {
+				const message = invalidIn(node.name, parent);
+				if (message !== null) report(message);
+				past = true;
+			}
+		} else if (kind === 'element') {
+			ancestors.push((ancestor as IR.Element).name);
+			const message = invalidUnder(node.name, ancestors);
+			if (message !== null) report(message);
+		} else if (opaque.has(kind)) {
+			break;
+		}
+	}
+}
+
+export function textPlacement(context: Context, node: IR.Text | IR.Expression): void {
+	const parent = context.parentElement;
+	if (parent === null) return;
+	if (node.kind === 'text' && !/[^ \t\r\n]/.test(node.data)) return;
+	const message = invalidIn('#text', parent);
+	if (message !== null) fail('node_invalid_placement', node, { message });
+}
+
+export function lowercaseComponent(context: Context, node: IR.Element): void {
+	const binding = context.scope.get(node.name);
+	if (binding !== null && binding.declaration === 'import' && binding.references.length === 0) {
+		context.report.warn('component_name_lowercase', node, { name: node.name });
+	}
+}