vigla 0.0.0 → 0.2.0

package/src/runtime/dom/attributes.ts

@@ -0,0 +1,526 @@
+import { DEV } from 'esm-env';
+import { warn } from '../../shared/diagnostics.ts';
+import {
+	clsx,
+	toClass,
+	toStyle,
+	type StyleDirectives,
+	type Styles
+} from '../../shared/attributes.ts';
+import {
+	isCapture,
+	isCustomTag,
+	isDelegated,
+	namespaces,
+	propertyName
+} from '../../shared/html.ts';
+import { spreadAttachments } from './attachments.ts';
+import { delegated, delegate, listen } from './events.ts';
+import { claim, cursor, hydrating, overwriting, setHydrating } from './hydration.ts';
+import { owner, setOwner, withoutReaction } from '../reactivity/tracking.ts';
+import { teardown } from '../reactivity/effects.ts';
+import { task } from '../reactivity/tasks.ts';
+import { selectDefault, selectOption, selected } from './select.ts';
+import { onReset } from './reset.ts';
+
+type Directives = Readonly<Record<string, unknown>>;
+
+type Values = Record<string, unknown>;
+
+const cache = Symbol('attributes');
+
+interface Holder {
+	[cache]?: Values;
+}
+
+function values(element: Element): Values {
+	const holder = element as Element & Holder;
+	return (holder[cache] ??= {});
+}
+
+const setters = new Map<string, Set<string>>();
+
+function setterNames(element: Element): Set<string> {
+	const key = element.getAttribute('is') ?? element.nodeName;
+	let found = setters.get(key);
+	if (found !== undefined) return found;
+	found = new Set();
+	setters.set(key, found);
+	let prototype = element as object | null;
+	const stop = Element.prototype;
+	while (prototype !== null && prototype !== stop) {
+		const descriptors = Object.getOwnPropertyDescriptors(prototype);
+		for (const name of Object.keys(descriptors)) {
+			if (descriptors[name]?.set) found.add(name);
+		}
+		prototype = Object.getPrototypeOf(prototype) as object | null;
+	}
+	return found;
+}
+
+function keepsNetwork(element: Element, name: string): boolean {
+	return (
+		name === 'src' ||
+		name === 'srcset' ||
+		(name === 'href' && element.namespaceURI === namespaces.html && element.localName === 'link')
+	);
+}
+
+function sameUrl(left: string, right: string, base: string): boolean {
+	if (left === right) return true;
+	try {
+		return new URL(left, base).href === new URL(right, base).href;
+	} catch {
+		return false;
+	}
+}
+
+function sameSrcset(left: string, right: string, base: string): boolean {
+	const split = (value: string): string[][] =>
+		value.split(',').map((entry) => entry.trim().split(/\s+/));
+	const before = split(left);
+	const after = split(right);
+	return (
+		before.length === after.length &&
+		before.every((entry, index) => {
+			const next = after[index] as string[];
+			return (
+				entry.slice(1).join(' ') === next.slice(1).join(' ') &&
+				sameUrl(entry[0] ?? '', next[0] ?? '', base)
+			);
+		})
+	);
+}
+
+function warnNetworkChange(element: Element, name: string, value: unknown): void {
+	const before = element.getAttribute(name) ?? '';
+	const next = String(value ?? '');
+	const base = element.ownerDocument.baseURI;
+	if (name === 'srcset' ? sameSrcset(before, next, base) : sameUrl(before, next, base)) return;
+	const markup = element.innerHTML
+		? element.outerHTML.replace(element.innerHTML, '...')
+		: element.outerHTML;
+	warn(
+		'hydration_attribute_changed',
+		`The \`${name}\` attribute on \`${markup}\` changed its value between server and client renders. The client value, \`${next}\`, will be ignored in favour of the server value`
+	);
+}
+
+export function attr(element: Element, name: string, value: unknown, unchecked = false): void {
+	const known = values(element);
+	if (hydrating) {
+		known[name] = element.getAttribute(name);
+		if (keepsNetwork(element, name)) {
+			if (DEV && !unchecked) warnNetworkChange(element, name, value);
+			return;
+		}
+	}
+	const adopting = hydrating && !overwriting;
+	const previous = known[name];
+	if (previous === value && (adopting || !hydrating)) return;
+	known[name] = value;
+	if (value == null) {
+		element.removeAttribute(name);
+	} else if (typeof value !== 'string' && setterNames(element).has(name)) {
+		(element as unknown as Values)[name] = value;
+	} else if (
+		!(
+			adopting &&
+			(typeof value === 'number' || typeof value === 'boolean') &&
+			previous === String(value)
+		)
+	) {
+		element.setAttribute(name, String(value));
+	}
+}
+
+export function removeInputDefaults(element: Element): void {
+	if (!hydrating || element.namespaceURI !== namespaces.html) return;
+	const input = element as HTMLInputElement;
+	let removed = false;
+	const remove = (): void => {
+		if (removed) return;
+		removed = true;
+		release();
+		if (input.hasAttribute('value')) {
+			const current = input.value;
+			attr(input, 'value', null);
+			input.value = current;
+		}
+		if (input.hasAttribute('checked')) {
+			const current = input.checked;
+			attr(input, 'checked', null);
+			input.checked = current;
+		}
+	};
+	const release = onReset(input, remove);
+	task(remove);
+}
+
+export function removeTextareaChild(element: Element): void {
+	if (hydrating && element.firstChild !== null) element.textContent = '';
+}
+
+export function customProp(element: Element, name: string, value: unknown): void {
+	const parent = setOwner(null);
+	const node = hydrating ? cursor : null;
+	const was = setHydrating(false);
+	try {
+		withoutReaction(() => {
+			const registered =
+				typeof customElements === 'undefined' ||
+				customElements.get(element.getAttribute('is') ?? element.nodeName.toLowerCase()) !==
+					undefined;
+			const settable = registered
+				? setterNames(element).has(name)
+				: value !== null && typeof value === 'object';
+			if (name !== 'style' && settable) {
+				(element as unknown as Values)[name] = value;
+				return;
+			}
+			attr(element, name, value == null ? value : String(value));
+		});
+	} finally {
+		setOwner(parent);
+		setHydrating(was);
+		if (node !== null) claim(node);
+	}
+}
+
+export function xlink(element: Element, name: string, value: unknown): void {
+	element.setAttributeNS('http://www.w3.org/1999/xlink', name, String(value));
+}
+
+interface Valued extends Element {
+	value: unknown;
+	__value?: unknown;
+}
+
+export function value(element: Element, next: unknown): void {
+	const known = values(element);
+	const target = element as Valued;
+	if (known.value === (known.value = next ?? undefined)) return;
+	if (
+		target.value === next &&
+		(next !== 0 || element.localName !== 'progress' || element.namespaceURI !== namespaces.html)
+	)
+		return;
+	target.value = next ?? '';
+}
+
+export function optionValue(element: Element, next: unknown): void {
+	const target = element as Valued;
+	if (target.__value === next && '__value' in target) return;
+	target.__value = next;
+	target.value = next ?? '';
+}
+
+export function checked(element: Element, next: unknown): void {
+	const known = values(element);
+	if (known.checked === (known.checked = next ?? undefined)) return;
+	(element as HTMLInputElement).checked = next as boolean;
+}
+
+export function defaultValue(element: Element, next: unknown): void {
+	const input = element as HTMLInputElement;
+	const current = input.value;
+	input.defaultValue = next as string;
+	input.value = current;
+}
+
+export function defaultChecked(element: Element, next: unknown): void {
+	const input = element as HTMLInputElement;
+	const current = input.checked;
+	input.defaultChecked = next as boolean;
+	input.checked = current;
+}
+
+const classCache = Symbol('class');
+
+interface ClassHolder {
+	[classCache]?: unknown;
+}
+
+export function className(
+	element: Element,
+	html: boolean,
+	next: unknown,
+	hash?: string | null,
+	previous?: Directives | null,
+	directives?: Directives | null
+): Directives | null | undefined {
+	const holder = element as Element & ClassHolder;
+	const before = holder[classCache];
+	if (hydrating || before !== next || before === undefined) {
+		const name = toClass(next, hash, directives);
+		if (!hydrating || overwriting || name !== element.getAttribute('class')) {
+			if (name == null) element.removeAttribute('class');
+			else if (html) element.className = name;
+			else element.setAttribute('class', name);
+		}
+		holder[classCache] = next;
+	} else if (directives && previous !== directives) {
+		for (const key of Object.keys(directives)) {
+			const present = !!directives[key];
+			if (previous == null || present !== !!previous[key]) element.classList.toggle(key, present);
+		}
+	}
+	return directives;
+}
+
+const styleCache = Symbol('style');
+
+interface StyleHolder {
+	[styleCache]?: unknown;
+}
+
+function updateStyles(
+	element: ElementCSSInlineStyle,
+	previous: Styles | null | undefined,
+	next: Styles | null | undefined,
+	priority?: string
+): void {
+	for (const key of Object.keys(next ?? {})) {
+		const value = (next as Styles)[key];
+		if (previous?.[key] === value) continue;
+		if (value == null) element.style.removeProperty(key);
+		else element.style.setProperty(key, String(value), priority);
+	}
+}
+
+export function style(
+	element: Element,
+	next: unknown,
+	previous?: StyleDirectives | null,
+	directives?: StyleDirectives | null
+): StyleDirectives | null | undefined {
+	const holder = element as Element & StyleHolder;
+	const styled = element as Element & ElementCSSInlineStyle;
+	if (hydrating || holder[styleCache] !== next) {
+		const css = toStyle(next, directives);
+		if (!hydrating || overwriting || css !== element.getAttribute('style')) {
+			if (css == null) element.removeAttribute('style');
+			else styled.style.cssText = css;
+		}
+		holder[styleCache] = next;
+	} else if (directives) {
+		if (Array.isArray(directives)) {
+			const before = previous as readonly [Styles | null, Styles | null] | null | undefined;
+			updateStyles(styled, before?.[0], directives[0] as Styles | null);
+			updateStyles(styled, before?.[1], directives[1] as Styles | null, 'important');
+		} else {
+			updateStyles(styled, previous as Styles | null | undefined, directives as Styles);
+		}
+	}
+	return directives;
+}
+
+export function autofocus(element: HTMLElement, on: boolean): void {
+	if (!on) return;
+	const body = document.body;
+	element.autofocus = true;
+	queueMicrotask(() => {
+		if (document.activeElement === body) element.focus();
+	});
+}
+
+export const CLASS = Symbol('class');
+
+export const STYLE = Symbol('style');
+
+export type Spread = Record<string | symbol, unknown>;
+
+const listeners = Symbol('listeners');
+
+type Listener = () => void;
+
+function listenerSet(current: Spread): Set<Listener> {
+	let set = current[listeners] as Set<Listener> | undefined;
+	if (set !== undefined) return set;
+	set = new Set();
+	current[listeners] = set;
+	const parent = owner?.parent ?? null;
+	const previous = setOwner(parent);
+	try {
+		withoutReaction(() =>
+			teardown(() => {
+				for (const remove of set) remove();
+				set.clear();
+			})
+		);
+	} finally {
+		setOwner(previous);
+	}
+	return set;
+}
+
+export function attributes(
+	element: Element,
+	previous: Spread | undefined,
+	next: Spread,
+	hash?: string | null,
+	removeDefaults = false,
+	unchecked = false
+): Spread {
+	const html = element.namespaceURI === namespaces.html;
+	const tag = html ? element.localName : null;
+	if (
+		previous === undefined &&
+		removeDefaults &&
+		tag === 'input' &&
+		!('defaultValue' in next || 'defaultChecked' in next)
+	) {
+		removeInputDefaults(element);
+	}
+	const current: Spread = previous ?? {};
+	const custom = isCustomTag(element.nodeName) || element.hasAttribute('is');
+	const select = tag === 'select';
+	const hasOptionValue = tag === 'option' && Object.hasOwn(next, 'value');
+	for (const key of Object.keys(current)) {
+		if (!(key in next) && !key.startsWith('$$')) next[key] = null;
+	}
+	if (next.class) next.class = clsx(next.class);
+	else if (hash || next[CLASS]) next.class = null;
+	if (next[STYLE]) next.style ??= null;
+	if (tag === 'input' && 'type' in next && 'value' in next) {
+		if (next.type !== current.type) {
+			current.type = next.type;
+			attr(element, 'type', next.type);
+		}
+	}
+	for (const key of Object.keys(next)) {
+		const value = next[key];
+		if (tag === 'option' && key === 'value') {
+			if (hasOptionValue) {
+				optionValue(element, value);
+				current[key] = value;
+			} else {
+				delete (element as Valued).__value;
+				element.removeAttribute('value');
+				delete values(element).value;
+				delete current[key];
+			}
+			continue;
+		}
+		if (key === 'class') {
+			className(
+				element,
+				html,
+				value,
+				hash,
+				current[CLASS] as Directives | undefined,
+				next[CLASS] as Directives | undefined
+			);
+			current[key] = value;
+			current[CLASS] = next[CLASS];
+			continue;
+		}
+		if (key === 'style') {
+			style(
+				element,
+				value,
+				current[STYLE] as StyleDirectives | undefined,
+				next[STYLE] as StyleDirectives | undefined
+			);
+			current[key] = value;
+			current[STYLE] = next[STYLE];
+			continue;
+		}
+		const before = current[key];
+		if (value === before && !(value === undefined && element.hasAttribute(key))) continue;
+		current[key] = value;
+		if (key.startsWith('$$')) continue;
+		if (key.startsWith('on')) {
+			let type = key.slice(2);
+			const capture = isCapture(type);
+			if (capture) type = type.slice(0, -7);
+			const slot = `$$${key}`;
+			if (!capture && isDelegated(type)) {
+				const existing = current[slot] as Listener | undefined;
+				if (existing !== undefined) {
+					existing();
+					(current[listeners] as Set<Listener>).delete(existing);
+				}
+				const remove = delegated(element, type, value as EventListener | null);
+				listenerSet(current).add(remove);
+				current[slot] = remove;
+				delegate(type);
+				continue;
+			}
+			const existing = current[slot] as Listener | undefined;
+			if (existing !== undefined) {
+				if (value != null) continue;
+				existing();
+				(current[listeners] as Set<Listener>).delete(existing);
+				current[slot] = undefined;
+			}
+			if (value != null) {
+				const handle: EventListener = function (this: Element, event) {
+					(current[key] as EventListener).call(this, event);
+				};
+				const remove = listen(element, type, handle, capture);
+				listenerSet(current).add(remove);
+				current[slot] = remove;
+			}
+			continue;
+		}
+		if (key === 'autofocus') {
+			autofocus(element as HTMLElement, Boolean(value));
+			continue;
+		}
+		if (select && key === 'value' && !custom) {
+			(element as Valued).__value = value;
+			continue;
+		}
+		if (html && !custom && (key === '__value' || (key === 'value' && value != null))) {
+			const target = element as Valued;
+			target.__value = value;
+			if (before == null || target.value !== value || (value === 0 && tag === 'progress')) {
+				target.value = value;
+			}
+			continue;
+		}
+		if (key === 'selected' && tag === 'option') {
+			selected(element, value);
+			continue;
+		}
+		const name = html ? propertyName(key) : key;
+		const fallback = name === 'defaultValue' || name === 'defaultChecked';
+		if (select && name === 'defaultValue') {
+			selectDefault(element as HTMLSelectElement, value, previous === undefined);
+			continue;
+		}
+		if (value == null && !custom && !fallback) {
+			values(element)[key] = null;
+			if (html && (name === 'value' || name === 'checked')) {
+				const input = element as HTMLInputElement;
+				const initial = previous === undefined;
+				if (name === 'value') {
+					const kept = input.defaultValue;
+					input.removeAttribute(name);
+					input.defaultValue = kept;
+					input.value = initial ? kept : '';
+					(input as Valued).__value = initial ? kept : null;
+				} else {
+					const kept = input.defaultChecked;
+					input.removeAttribute(name);
+					input.defaultChecked = kept;
+					input.checked = initial ? kept : false;
+				}
+			} else {
+				element.removeAttribute(key);
+			}
+			continue;
+		}
+		if (fallback || ((custom || typeof value !== 'string') && setterNames(element).has(name))) {
+			(element as unknown as Values)[name] = value;
+			delete values(element)[name];
+			continue;
+		}
+		if (typeof value !== 'function') attr(element, name, value, unchecked);
+	}
+	if (select && previous !== undefined && 'value' in next)
+		selectOption(element as HTMLSelectElement, next.value);
+	spreadAttachments(element, current, next);
+	return current;
+}

package/src/runtime/dom/await.ts

@@ -0,0 +1,108 @@
+import { OPEN_ELSE } from '../../shared/markers.ts';
+import { flushSync, write } from '../reactivity/scheduler.ts';
+import { resumed, suspend } from '../reactivity/views.ts';
+import { block } from '../reactivity/effects.ts';
+import type { Effect, Source } from '../reactivity/graph.ts';
+import { derived, source } from '../reactivity/sources.ts';
+import { task } from '../reactivity/tasks.ts';
+import { get } from '../reactivity/reads.ts';
+import { owner, present, setOwner, untrack } from '../reactivity/tracking.ts';
+import { Branches } from './branches.ts';
+import { hydrating, instruction } from './hydration.ts';
+import type { Render } from './template.ts';
+
+const NONE = -1;
+const PENDING = 0;
+const THEN = 1;
+const CATCH = 2;
+
+export type Outcome = (anchor: ChildNode, value: Source) => void;
+
+interface Run {
+	readonly effect: Effect;
+}
+
+function thenable(value: unknown): value is PromiseLike<unknown> {
+	return typeof (value as PromiseLike<unknown> | null | undefined)?.then === 'function';
+}
+
+export function awaited(
+	node: ChildNode,
+	input: () => unknown,
+	pending: Render | null,
+	then: Outcome | null,
+	caught: Outcome | null
+): void {
+	const branches = new Branches<number>(node);
+	const value = source<unknown>(undefined);
+	const error = source<unknown>(undefined);
+	const given = derived(input);
+	let seen: unknown;
+	let run: Run | null = null;
+	let first = true;
+	const render = (key: number): Render | null => {
+		switch (key) {
+			case PENDING:
+				return pending;
+			case THEN:
+				return then === null ? null : (anchor) => then(anchor, value);
+			case CATCH:
+				return caught === null ? null : (anchor) => caught(anchor, error);
+			default:
+				return null;
+		}
+	};
+	const settle = (from: Run, key: number, update?: () => void): void => {
+		if (run !== from || from.effect.destroyed) return;
+		const restore = suspend();
+		resumed();
+		setOwner(from.effect);
+		try {
+			untrack(() =>
+				present(() => {
+					update?.();
+					branches.show(key, () => render(key));
+					if (key === CATCH && caught === null) throw get(error);
+					flushSync();
+				})
+			);
+		} finally {
+			resumed();
+			restore();
+		}
+	};
+	const listen = (promise: PromiseLike<unknown>, from: Run, showing: boolean): void => {
+		let done = showing;
+		promise.then(
+			(result) => {
+				done = true;
+				settle(from, THEN, () => write(value, result));
+			},
+			(reason: unknown) => {
+				done = true;
+				settle(from, CATCH, () => write(error, reason));
+			}
+		);
+		task(() => {
+			if (!done) settle(from, PENDING);
+		});
+	};
+	block(() => {
+		const current = get(given);
+		if (!first && Object.is(current, seen)) return;
+		seen = current;
+		const promise = thenable(current);
+		const matched = first && hydrating ? (instruction(node) === OPEN_ELSE) === !promise : null;
+		const from: Run | null = promise ? { effect: owner as Effect } : null;
+		run = from;
+		const key = promise ? (matched === true ? PENDING : NONE) : THEN;
+		if (!promise) write(value, current);
+		if (first) {
+			first = false;
+			branches.start(key, render(key), matched);
+		} else if (!promise) {
+			branches.show(key, () => render(key));
+		}
+		if (promise && from !== null) listen(current, from, matched === true);
+	});
+}