vigla 0.0.0 → 0.2.0

package/src/runtime/dom/custom-element.ts

@@ -0,0 +1,214 @@
+import { slots, slotProps } from '../../shared/slots.ts';
+import { effectRoot, template } from '../reactivity/effects.ts';
+import { proxy } from '../reactivity/proxy.ts';
+import { untrack } from '../reactivity/tracking.ts';
+import { advance, hydrating } from './hydration.ts';
+import { mount, unmount, type Component, type Exports, type Props } from './mount.ts';
+import { append } from './template.ts';
+
+export interface ElementProperty {
+	readonly attribute?: string;
+	readonly reflect?: boolean;
+	readonly type?: 'String' | 'Boolean' | 'Number' | 'Array' | 'Object';
+}
+
+export type ElementProperties = Readonly<Record<string, ElementProperty>>;
+export type ElementExtension = (base: CustomElementConstructor) => CustomElementConstructor;
+export type ElementComponent = Component & { element?: CustomElementConstructor };
+export type Slot = (anchor: ChildNode, props?: () => Props) => void;
+
+const hosts = new WeakMap<object, HTMLElement>();
+const shadows = new WeakMap<HTMLElement, ShadowRoot>();
+
+export function host(props: object): HTMLElement | undefined {
+	return hosts.get(props);
+}
+
+export function slot(
+	anchor: ChildNode,
+	props: Props,
+	name: string,
+	values: Props,
+	fallback: Slot | null
+): void {
+	if (hydrating) advance();
+	const element = host(props);
+	if (element !== undefined && shadows.has(element)) {
+		const node = anchor.ownerDocument!.createElement('slot');
+		if (name !== 'default') node.name = name;
+		append(anchor, node);
+		if (fallback !== null) {
+			const end = anchor.ownerDocument!.createTextNode('');
+			node.append(end);
+			fallback(end);
+		}
+		return;
+	}
+	if (element !== undefined && slots(props)[name]) {
+		const node = anchor.ownerDocument!.createElement('slot');
+		if (name !== 'default') node.name = name;
+		append(anchor, node);
+		return;
+	}
+	const snippet = props[name === 'default' ? 'children' : name] as Slot | undefined;
+	if (snippet === undefined) fallback?.(anchor);
+	else snippet(anchor, () => values);
+}
+
+function fromAttribute(value: string | null, type: ElementProperty['type']): unknown {
+	switch (type) {
+		case 'Boolean':
+			return value !== null;
+		case 'Number':
+			return value === null ? null : +value;
+		case 'Object':
+		case 'Array':
+			return value ? JSON.parse(value) : value;
+		default:
+			return value;
+	}
+}
+
+function toAttribute(value: unknown, type: ElementProperty['type']): string | null {
+	if (type === 'Boolean') return value ? '' : null;
+	if (value == null) return null;
+	return type === 'Object' || type === 'Array' ? JSON.stringify(value) : String(value);
+}
+
+export function customElement(
+	component: ElementComponent,
+	properties: ElementProperties,
+	exports: readonly string[],
+	shadow?: ShadowRootInit,
+	extend?: ElementExtension
+): CustomElementConstructor {
+	const attributes = new Map(
+		Object.entries(properties).map(([key, value]) => [(value.attribute ?? key).toLowerCase(), key])
+	);
+	class Element extends HTMLElement {
+		static get observedAttributes(): string[] {
+			return [...attributes.keys()];
+		}
+
+		#instance: Exports | null = null;
+		#props: Props | null = null;
+		#values: Props = Object.create(null);
+		#connected = false;
+		#reflecting = false;
+		#stop: (() => void) | null = null;
+
+		constructor() {
+			super();
+			if (shadow !== undefined) shadows.set(this, this.attachShadow(shadow));
+		}
+
+		connectedCallback(): void {
+			this.#connected = true;
+			if (this.#instance !== null) return;
+			Promise.resolve().then(() => {
+				if (!this.#connected || this.#instance !== null) return;
+				for (const attribute of this.attributes) {
+					const key = attributes.get(attribute.name);
+					if (key !== undefined && !(key in this.#values)) {
+						this.#values[key] = fromAttribute(attribute.value, properties[key]?.type);
+					}
+				}
+				for (const key of Object.keys(properties)) {
+					if (!Object.hasOwn(this, key)) continue;
+					if (!(key in this.#values)) this.#values[key] = Reflect.get(this, key);
+					Reflect.deleteProperty(this, key);
+				}
+				const available: Record<string, boolean> = Object.create(null);
+				for (const child of this.childNodes)
+					available[(child as HTMLElement).slot || 'default'] = true;
+				this.#props = slotProps(proxy({ ...this.#values }), available);
+				hosts.set(this.#props, this);
+				this.#stop = effectRoot(() => {
+					this.#instance = mount(component, {
+						target: shadows.get(this) ?? this,
+						props: this.#props!,
+						intro: false
+					});
+					template(() => {
+						this.#reflecting = true;
+						try {
+							for (const [key, definition] of Object.entries(properties)) {
+								if (!definition.reflect) continue;
+								const value = this.#get(key);
+								const text = toAttribute(value, definition.type);
+								const name = definition.attribute ?? key;
+								if (text === null) this.removeAttribute(name);
+								else this.setAttribute(name, text);
+							}
+						} finally {
+							this.#reflecting = false;
+						}
+					});
+				});
+			});
+		}
+
+		disconnectedCallback(): void {
+			this.#connected = false;
+			Promise.resolve().then(() => {
+				if (this.#connected || this.#instance === null) return;
+				untrack(() => {
+					for (const [key, definition] of Object.entries(properties)) {
+						if (definition.reflect) this.#values[key] = this.#get(key);
+					}
+				});
+				unmount(this.#instance);
+				this.#stop?.();
+				this.#stop = null;
+				this.#instance = null;
+				this.#props = null;
+			});
+		}
+
+		attributeChangedCallback(name: string, _before: string | null, value: string | null): void {
+			if (this.#reflecting) return;
+			const key = attributes.get(name);
+			if (key !== undefined) this.#set(key, fromAttribute(value, properties[key]?.type));
+		}
+
+		#get(key: string): unknown {
+			return this.#instance !== null && key in this.#instance
+				? this.#instance[key]
+				: this.#props !== null
+					? this.#props[key]
+					: this.#values[key];
+		}
+
+		#set(key: string, value: unknown): void {
+			if (properties[key]?.type === 'Boolean' && typeof value !== 'boolean') value = value != null;
+			this.#values[key] = value;
+			if (this.#props !== null) this.#props[key] = value;
+			if (this.#instance !== null && Object.getOwnPropertyDescriptor(this.#instance, key)?.set) {
+				this.#instance[key] = value;
+			}
+		}
+
+		static {
+			for (const key of Object.keys(properties)) {
+				Object.defineProperty(this.prototype, key, {
+					get(this: Element) {
+						return this.#get(key);
+					},
+					set(this: Element, value: unknown) {
+						this.#set(key, value);
+					}
+				});
+			}
+			for (const key of exports) {
+				Object.defineProperty(this.prototype, key, {
+					get(this: Element) {
+						return this.#instance?.[key];
+					}
+				});
+			}
+		}
+	}
+	const result = extend === undefined ? Element : extend(Element);
+	component.element = result;
+	return result;
+}

package/src/runtime/dom/data.ts

@@ -0,0 +1,131 @@
+import { DEV } from 'esm-env';
+import { failure, warn } from '../../shared/diagnostics.ts';
+import { format as nativeFormat, type Format } from '../../shared/format.ts';
+import type { Effect } from '../reactivity/graph.ts';
+import { teardown } from '../reactivity/effects.ts';
+import { owner } from '../reactivity/tracking.ts';
+import { hydrating } from './hydration.ts';
+
+interface Input {
+	readonly values: Map<string, unknown> | undefined;
+	readonly explicit: boolean;
+}
+
+interface Global {
+	h?: Map<string, unknown>;
+}
+
+interface Published {
+	readonly values: Map<string, unknown>;
+	users: number;
+}
+
+const inputs = new WeakMap<Effect, Input>();
+const published = new WeakMap<Window, Map<string, Published>>();
+
+function acquire(view: Window, key: string, values: Map<string, unknown>): () => void {
+	let stores = published.get(view);
+	if (stores === undefined) published.set(view, (stores = new Map()));
+	let store = stores.get(key);
+	if (store === undefined || store.values !== values) {
+		store = { values, users: 0 };
+		stores.set(key, store);
+	}
+	const retained = store;
+	store.users++;
+	let active = true;
+	return () => {
+		if (!active) return;
+		active = false;
+		if (--retained.users !== 0) return;
+		if (stores.get(key) === retained) stores.delete(key);
+		const globals = view as unknown as Record<string, Global | undefined>;
+		const global = globals[key];
+		if (global?.h === values) delete global.h;
+	};
+}
+
+function viewOf(target: ParentNode | undefined): Window {
+	if (target === undefined) return window;
+	const document =
+		(target as Node).nodeType === 9 ? (target as Document) : (target as Node).ownerDocument;
+	return document?.defaultView ?? window;
+}
+
+function serverData(view: Window, format: Format): Map<string, unknown> | undefined {
+	return (view as unknown as Record<string, Global | undefined>)[format.global]?.h;
+}
+
+export interface HydrationOptions {
+	readonly format?: Format;
+	readonly target?: ParentNode;
+	readonly beforeSnapshot?: () => void;
+}
+
+export function openHydration(options: HydrationOptions = {}): () => void {
+	if (owner === null) {
+		throw failure(
+			'context_without_owner',
+			'Hydration data can only be opened where an owner exists'
+		);
+	}
+	const view = viewOf(options.target);
+	const format = options.format ?? nativeFormat;
+	const values = serverData(view, format);
+	if (values === undefined) return () => {};
+	const at = owner;
+	const input: Input = { values, explicit: true };
+	inputs.set(at, input);
+	const releaseStore = acquire(view, format.global, values);
+	let open = true;
+	return () => {
+		if (!open) return;
+		open = false;
+		if (inputs.get(at) === input) inputs.delete(at);
+		releaseStore();
+	};
+}
+
+export function withHydration<T>(format: Format, target: ParentNode, fn: () => T): T {
+	if (owner === null) return fn();
+	const view = viewOf(target);
+	const values = hydrating ? serverData(view, format) : undefined;
+	const at = owner;
+	inputs.set(at, { values, explicit: false });
+	if (values === undefined) return fn();
+	const releaseStore = acquire(view, format.global, values);
+	const release = (): void => {
+		inputs.delete(at);
+		releaseStore();
+	};
+	teardown(release);
+	try {
+		return fn();
+	} catch (error) {
+		release();
+		throw error;
+	}
+}
+
+function nearest(): Input | undefined {
+	for (let at = owner; at !== null; at = at.parent) {
+		const input = inputs.get(at);
+		if (input !== undefined && (input.explicit || hydrating)) return input;
+	}
+	return undefined;
+}
+
+export function hydratable<T>(key: string, fn: () => T): T {
+	const input = nearest();
+	if (input === undefined) return fn();
+	if (input.values?.has(key)) return input.values.get(key) as T;
+	const message = `The hydratable key ${JSON.stringify(key)} was not present in the server render`;
+	if (DEV) throw failure('hydratable_missing_but_required', message);
+	warn('hydratable_missing_but_expected', message);
+	return fn();
+}
+
+export function hydrated<T>(key: string, fn: () => T): T {
+	const values = nearest()?.values;
+	return values?.has(key) ? (values.get(key) as T) : fn();
+}

package/src/runtime/dom/element.ts

@@ -0,0 +1,89 @@
+import { namespaces } from '../../shared/html.ts';
+import { block } from '../reactivity/effects.ts';
+import { Branches } from './branches.ts';
+import { advance, claim, cursor, hydrating, mismatch, setHydrating } from './hydration.ts';
+import type { Render } from './template.ts';
+
+const ELEMENT = 1;
+
+export type Content = (element: Element, anchor: ChildNode | null) => void;
+
+function namespaceOf(
+	tag: string,
+	namespace: (() => string | null | undefined) | null,
+	parent: string
+): string {
+	if (namespace !== null) return namespace() || namespaces.html;
+	if (parent === 'svg' || tag === 'svg') return namespaces.svg;
+	if (parent === 'mathml' || tag === 'math') return namespaces.mathml;
+	return namespaces.html;
+}
+
+const rawText = new Set(['TEXTAREA', 'SCRIPT', 'STYLE', 'TITLE']);
+
+function children(element: Element, content: Content): void {
+	if (!hydrating) {
+		content(element, element.appendChild(document.createTextNode('')));
+		return;
+	}
+	if (rawText.has(element.nodeName)) {
+		const end = element.appendChild(document.createComment(''));
+		claim(element.firstChild as ChildNode);
+		try {
+			content(element, element.firstChild);
+		} finally {
+			end.remove();
+		}
+		return;
+	}
+	const first = element.firstChild;
+	if (first === null) {
+		setHydrating(false);
+		try {
+			content(element, element.appendChild(document.createTextNode('')));
+		} finally {
+			setHydrating(true);
+		}
+		return;
+	}
+	claim(first);
+	content(element, first);
+}
+
+function rendering(tag: string, namespace: string, content: Content | null): Render {
+	return (anchor) => {
+		let element: Element;
+		if (hydrating) {
+			if (cursor.nodeType !== ELEMENT) mismatch();
+			element = cursor as Element;
+		} else {
+			element = document.createElementNS(namespace, tag);
+		}
+		if (content !== null) children(element, content);
+		if (hydrating) claim(element.nextSibling);
+		else anchor.before(element);
+	};
+}
+
+export function element(
+	node: ChildNode,
+	tag: () => unknown,
+	parent: string,
+	content: Content | null,
+	namespace: (() => string | null | undefined) | null = null
+): void {
+	if (hydrating) advance();
+	const branches = new Branches<string | null>(node, true);
+	let first = true;
+	block(() => {
+		const next = (tag() as string | null | undefined) || null;
+		const render =
+			next === null ? null : rendering(next, namespaceOf(next, namespace, parent), content);
+		if (!first) {
+			branches.show(next, () => render);
+			return;
+		}
+		first = false;
+		branches.start(next, render);
+	});
+}

package/src/runtime/dom/events.ts

@@ -0,0 +1,254 @@
+import { warn } from '../../shared/diagnostics.ts';
+import { isPassive } from '../../shared/html.ts';
+import { setOwner, untrack } from '../reactivity/tracking.ts';
+import { teardown } from '../reactivity/effects.ts';
+import type { Location } from './meta.ts';
+
+const handlers = Symbol('events');
+
+const handled = Symbol('handled');
+
+interface Registration {
+	readonly handler: EventListener | null | undefined;
+}
+
+type Handlers = Record<string, Registration | undefined>;
+
+interface Holder {
+	[handlers]?: Handlers;
+}
+
+interface Dispatched extends Event {
+	[handled]?: EventTarget;
+}
+
+export function unowned<T>(fn: () => T): T {
+	const previous = setOwner(null);
+	try {
+		return untrack(fn);
+	} finally {
+		setOwner(previous);
+	}
+}
+
+export function invoke(
+	get: () => unknown,
+	target: EventTarget,
+	args: [Event, ...unknown[]],
+	location: Location,
+	sideEffects = false,
+	call = false
+): void {
+	let handler: unknown;
+	let failure: unknown;
+	let failed = false;
+	try {
+		handler = get();
+	} catch (error) {
+		failed = true;
+		failure = error;
+	}
+	if (typeof handler !== 'function' && (sideEffects || handler != null || failed)) {
+		const event = args[0];
+		const phase = event.eventPhase < 3 ? 'capture' : '';
+		const at = `${location.file}:${location.line}:${location.column}`;
+		const suggestion = call ? 'remove the trailing `()`' : 'add a leading `() =>`';
+		warn(
+			'event_handler_invalid',
+			`\`${event.type}${phase}\` handler at ${at} should be a function. Did you mean to ${suggestion}?`
+		);
+	}
+	if (failed) throw failure;
+	(handler as ((...values: unknown[]) => unknown) | null | undefined)?.apply(target, args);
+}
+
+function deferred(type: string): boolean {
+	return type.startsWith('pointer') || type.startsWith('touch') || type === 'wheel';
+}
+
+export function listen(
+	target: EventTarget,
+	type: string,
+	handler: EventListener,
+	capture = false,
+	passive?: boolean
+): () => void {
+	const options: AddEventListenerOptions = { capture, passive };
+	let removed = false;
+	const wrapped = function (this: EventTarget, event: Event): void {
+		if (!capture) propagate.call(target, event);
+		if (!event.cancelBubble) unowned(() => handler.call(this, event));
+	};
+	if (deferred(type)) {
+		queueMicrotask(() => {
+			if (!removed) target.addEventListener(type, wrapped, options);
+		});
+	} else {
+		target.addEventListener(type, wrapped, options);
+	}
+	return () => {
+		removed = true;
+		target.removeEventListener(type, wrapped, options);
+	};
+}
+
+export function event(
+	target: EventTarget,
+	type: string,
+	handler: EventListener,
+	capture = false,
+	passive?: boolean
+): void {
+	teardown(listen(target, type, handler, capture, passive));
+}
+
+export function delegated(
+	element: EventTarget,
+	type: string,
+	handler: EventListener | null,
+	owned = false
+): () => void {
+	const holder = element as EventTarget & Holder;
+	const events = (holder[handlers] ??= {});
+	const registration: Registration = { handler };
+	events[type] = registration;
+	const remove = (): void => {
+		if (events[type] === registration) delete events[type];
+	};
+	if (owned) teardown(remove);
+	return remove;
+}
+
+const registered = new Set<string>();
+
+const roots = new Set<(types: readonly string[]) => void>();
+
+export function delegate(...types: string[]): void {
+	for (const type of types) registered.add(type);
+	for (const root of roots) root(types);
+}
+
+const counts = new Map<EventTarget, Map<string, number>>();
+
+export function delegateRoot(target: EventTarget): () => void {
+	const own = new Set<string>();
+	const add = (types: readonly string[]): void => {
+		for (const type of types) {
+			if (own.has(type)) continue;
+			own.add(type);
+			for (const node of [target, document]) {
+				let byType = counts.get(node);
+				if (byType === undefined) {
+					byType = new Map();
+					counts.set(node, byType);
+				}
+				const count = byType.get(type) ?? 0;
+				if (count === 0) node.addEventListener(type, propagate, { passive: isPassive(type) });
+				byType.set(type, count + 1);
+			}
+		}
+	};
+	add([...registered]);
+	roots.add(add);
+	return () => {
+		roots.delete(add);
+		for (const type of own) {
+			for (const node of [target, document]) {
+				const byType = counts.get(node) as Map<string, number>;
+				const count = (byType.get(type) as number) - 1;
+				if (count === 0) {
+					node.removeEventListener(type, propagate);
+					byType.delete(type);
+					if (byType.size === 0) counts.delete(node);
+				} else {
+					byType.set(type, count);
+				}
+			}
+		}
+	};
+}
+
+let last: Event | null = null;
+
+let clearing = false;
+
+function propagate(this: EventTarget, event: Event): void {
+	const root = this;
+	const dispatched = event as Dispatched;
+	const path = event.composedPath();
+	let index = 0;
+	last = event;
+	if (!clearing) {
+		clearing = true;
+		setTimeout(() => {
+			clearing = false;
+			last = null;
+		});
+	}
+	const at = last === event ? dispatched[handled] : undefined;
+	if (at !== undefined) {
+		const atIndex = path.indexOf(at);
+		if (atIndex !== -1 && (root === document || root === (window as EventTarget))) {
+			dispatched[handled] = root;
+			return;
+		}
+		const rootIndex = path.indexOf(root);
+		if (rootIndex === -1) return;
+		if (atIndex <= rootIndex) index = atIndex;
+	}
+	const walk = { index, current: (path[index] ?? event.target) as EventTarget | null };
+	if (walk.current === root) return;
+	const owner = (root as Node).ownerDocument ?? document;
+	Object.defineProperty(event, 'currentTarget', {
+		configurable: true,
+		get: () => walk.current ?? owner
+	});
+	const previous = setOwner(null);
+	try {
+		untrack(() => dispatch(event, path, walk, root));
+	} finally {
+		dispatched[handled] = root;
+		delete (event as unknown as Record<string, unknown>).currentTarget;
+		setOwner(previous);
+	}
+}
+
+interface Walk {
+	index: number;
+	current: EventTarget | null;
+}
+
+function dispatch(event: Event, path: EventTarget[], walk: Walk, root: EventTarget): void {
+	let first: unknown = undefined;
+	let failed = false;
+	const others: unknown[] = [];
+	while (walk.current !== null && walk.current !== root) {
+		const current = walk.current;
+		try {
+			const handler = (current as EventTarget & Holder)[handlers]?.[event.type]?.handler;
+			if (
+				handler != null &&
+				(!(current as HTMLButtonElement).disabled || event.target === current)
+			) {
+				handler.call(current, event);
+			}
+		} catch (error) {
+			if (failed) others.push(error);
+			else {
+				failed = true;
+				first = error;
+			}
+		}
+		if (event.cancelBubble) break;
+		walk.index++;
+		walk.current = walk.index < path.length ? (path[walk.index] as EventTarget) : null;
+	}
+	if (failed) {
+		for (const error of others) {
+			queueMicrotask(() => {
+				throw error;
+			});
+		}
+		throw first;
+	}
+}