vigla 0.0.0 → 0.2.0

package/src/runtime/dom/list.ts

@@ -0,0 +1,432 @@
+import { DEV } from 'esm-env';
+import { failure } from '../../shared/diagnostics.ts';
+import { OPEN_ELSE } from '../../shared/markers.ts';
+import {
+	alias,
+	atCommit,
+	atDiscard,
+	atMerge,
+	processed,
+	skip,
+	unskip,
+	type Batch
+} from '../reactivity/batch.ts';
+import { write } from '../reactivity/scheduler.ts';
+import { block, branch, hide, show as unhide } from '../reactivity/effects.ts';
+import type { Derived, Effect, Source } from '../reactivity/graph.ts';
+import { derived, mutableEqual, mutableSource, source } from '../reactivity/sources.ts';
+import { get } from '../reactivity/reads.ts';
+import { owner } from '../reactivity/tracking.ts';
+import { untrace } from '../reactivity/provenance.ts';
+import { traceInputs, traceSource } from '../reactivity/trace.ts';
+import {
+	claim,
+	cursor,
+	hydrating,
+	instruction,
+	isClose,
+	setHydrating,
+	skip as removeServer
+} from './hydration.ts';
+import {
+	animateMoves,
+	building,
+	moverOf,
+	pause,
+	prepare,
+	resume,
+	type Mover
+} from '../transitions/manager.ts';
+import { build, discard, opener, place, stash, type Built } from './range.ts';
+import type { Render } from './template.ts';
+
+interface Row<T> extends Built {
+	readonly key: unknown;
+	readonly item: Source<T>;
+	readonly index: Source<number>;
+}
+
+export type Item<T> = (anchor: ChildNode, item: Source<T>, index: Source<number>) => void;
+
+type Collection<T> = Iterable<T> | ArrayLike<T> | null | undefined;
+
+interface Stage<T> {
+	readonly rows: readonly Row<T>[];
+	readonly empty: boolean;
+}
+
+function duplicate(key: unknown, first: number, second: number): Error {
+	const shown = String(key);
+	return failure(
+		'each_key_duplicate',
+		shown.startsWith('[object ')
+			? `Keyed each block has duplicate key at indexes ${first} and ${second}`
+			: `Keyed each block has duplicate key \`${shown}\` at indexes ${first} and ${second}`
+	);
+}
+
+function volatile(position: number, first: unknown, second: unknown): Error {
+	return failure(
+		'each_key_volatile',
+		`Keyed each block has key that is not idempotent — the key for item at index ${position} was \`${String(first)}\` but is now \`${String(second)}\`. Keys must be the same each time for a given item`
+	);
+}
+
+function kept(positions: readonly number[]): Set<number> {
+	const tails: number[] = [];
+	const links = new Array<number>(positions.length);
+	for (let at = 0; at < positions.length; at++) {
+		const position = positions[at] as number;
+		if (position < 0) continue;
+		let low = 0;
+		let high = tails.length;
+		while (low < high) {
+			const middle = (low + high) >> 1;
+			if ((positions[tails[middle] as number] as number) < position) low = middle + 1;
+			else high = middle;
+		}
+		links[at] = low > 0 ? (tails[low - 1] as number) : -1;
+		tails[low] = at;
+	}
+	const result = new Set<number>();
+	for (let at = tails.length > 0 ? (tails.at(-1) as number) : -1; at >= 0; at = links[at] as number)
+		result.add(at);
+	return result;
+}
+
+class List<T> {
+	anchor: ChildNode;
+	readonly #collection: Derived<ArrayLike<T>>;
+	readonly #key: ((item: T, index: number) => unknown) | null;
+	readonly #render: Item<T>;
+	readonly #fallback: Render | null;
+	readonly #mutable: boolean;
+	#block: Effect | null = null;
+	#start: ChildNode | null = null;
+	readonly #rows = new Map<unknown, Row<T>>();
+	readonly #leaving = new Set<Row<T>>();
+	#order: readonly Row<T>[] = [];
+	#empty: Built | null = null;
+	#emptyShown = false;
+	#stages: Map<Batch, Stage<T>> | null = null;
+
+	constructor(
+		anchor: ChildNode,
+		collection: Derived<ArrayLike<T>>,
+		key: ((item: T, index: number) => unknown) | null,
+		render: Item<T>,
+		fallback: Render | null,
+		mutable: boolean
+	) {
+		this.anchor = anchor;
+		this.#collection = collection;
+		this.#key = key;
+		this.#render = render;
+		this.#fallback = fallback;
+		this.#mutable = mutable;
+	}
+
+	#identify(items: ArrayLike<T>, position: number, seen: Map<unknown, number> | null): unknown {
+		if (this.#key === null) return position;
+		const key = this.#key(items[position] as T, position);
+		if (DEV) {
+			const again = this.#key(items[position] as T, position);
+			if (!Object.is(key, again)) throw volatile(position, key, again);
+		}
+		const earlier = (seen as Map<unknown, number>).get(key);
+		if (earlier !== undefined) throw duplicate(key, earlier, position);
+		(seen as Map<unknown, number>).set(key, position);
+		return key;
+	}
+
+	#create(key: unknown, value: T, position: number, update: boolean): Row<T> {
+		const item = this.#mutable ? mutableSource(value) : source(value);
+		const index = source(position);
+		if (DEV)
+			traceSource(item, () => {
+				const position = untrace(() => get(index));
+				return traceInputs(this.#collection)[position];
+			});
+		const built = building(update, () =>
+			build((at) => this.#render(at, item, index), branch, this.anchor)
+		);
+		const row: Row<T> = { key, item, index, ...built };
+		this.#rows.set(key, row);
+		return row;
+	}
+
+	start(items: ArrayLike<T>): void {
+		this.#block = owner;
+		let adopting = false;
+		let restore = false;
+		if (hydrating) this.#start = this.anchor;
+		else {
+			this.#start = opener(this.anchor);
+			this.anchor.before(this.#start);
+		}
+		if (hydrating) {
+			const rendered = instruction(this.anchor) !== OPEN_ELSE;
+			claim(this.anchor.nextSibling);
+			if (rendered === items.length > 0) adopting = true;
+			else {
+				this.anchor = removeServer();
+				setHydrating(false);
+				restore = true;
+			}
+		}
+		try {
+			const rows: Row<T>[] = [];
+			const seen = this.#key === null ? null : new Map<unknown, number>();
+			for (let position = 0; position < items.length; position++) {
+				const value = items[position] as T;
+				const key = this.#identify(items, position, seen);
+				if (adopting && isClose(cursor)) {
+					this.anchor = cursor;
+					adopting = false;
+					setHydrating(false);
+					restore = true;
+				}
+				rows.push(this.#create(key, value, position, false));
+			}
+			if (items.length === 0 && this.#fallback !== null) {
+				this.#empty = building(false, () => build(this.#fallback as Render, branch, this.anchor));
+				this.#emptyShown = true;
+			}
+			if (adopting) this.anchor = isClose(cursor) ? cursor : removeServer();
+			if (this.#empty !== null) place(this.#empty, this.anchor);
+			let before = this.anchor;
+			for (let position = rows.length - 1; position >= 0; position--) {
+				const row = rows[position] as Row<T>;
+				place(row, before);
+				before = row.first;
+			}
+			this.#order = rows;
+		} finally {
+			if (restore) setHydrating(true);
+		}
+	}
+
+	update(items: ArrayLike<T>): void {
+		const batch = processed();
+		const rows: Row<T>[] = [];
+		const seen = this.#key === null ? null : new Map<unknown, number>();
+		for (let position = 0; position < items.length; position++) {
+			const value = items[position] as T;
+			const key = this.#identify(items, position, seen);
+			let row = this.#rows.get(key);
+			if (row === undefined) {
+				row = this.#create(key, value, position, true);
+				if (batch !== null) hide(row.effect);
+			} else {
+				write(row.item, value);
+				write(row.index, position);
+			}
+			rows.push(row);
+		}
+		const empty = items.length === 0 && this.#fallback !== null;
+		if (empty && this.#empty === null) {
+			this.#empty = building(true, () => build(this.#fallback as Render, branch, this.anchor));
+			if (batch !== null) hide(this.#empty.effect);
+		}
+		const stage: Stage<T> = { rows, empty };
+		if (batch === null) {
+			this.#capture(stage);
+			this.#apply(stage);
+			return;
+		}
+		const stages = (this.#stages ??= new Map());
+		const known = stages.has(batch);
+		stages.set(batch, stage);
+		const selected = new Set(rows);
+		for (const row of this.#rows.values()) {
+			if (selected.has(row)) unskip(row.effect);
+			else skip(row.effect);
+		}
+		if (this.#empty !== null) {
+			if (empty) unskip(this.#empty.effect);
+			else skip(this.#empty.effect);
+		}
+		if (known) return;
+		atCommit({ prepare: () => this.#prepare(batch), apply: () => this.#commit(batch) });
+		atDiscard(() => this.#discard(batch));
+		atMerge((from, into) => this.#merge(from, into));
+	}
+
+	#merge(from: Batch, into: Batch): void {
+		const stages = this.#stages;
+		const stage = stages?.get(from);
+		if (stages === null || stage === undefined) return;
+		stages.delete(from);
+		if (from.order > into.order || !stages.has(into)) stages.set(into, stage);
+	}
+
+	#capture(stage: Stage<T>): void {
+		const selected = new Set(stage.rows);
+		const branches: Effect[] = [];
+		const retained: Effect[] = [];
+		for (const row of this.#order) (selected.has(row) ? retained : branches).push(row.effect);
+		for (const row of stage.rows) if (this.#leaving.has(row)) branches.push(row.effect);
+		prepare(branches, retained);
+	}
+
+	#prepare(given: Batch): void {
+		const stage = this.#stages?.get(alias(given));
+		if (stage !== undefined && this.#block?.destroyed !== true) this.#capture(stage);
+	}
+
+	#commit(given: Batch): void {
+		const batch = alias(given);
+		const stage = this.#stages?.get(batch);
+		if (stage === undefined || this.#block?.destroyed === true) return;
+		this.#stages?.delete(batch);
+		this.#apply(stage);
+	}
+
+	#discard(given: Batch): void {
+		const batch = alias(given);
+		if (this.#stages?.delete(batch) !== true || this.#block?.destroyed === true) return;
+		this.#prune(this.#needed());
+	}
+
+	#needed(): Set<Row<T>> | null {
+		const stages = this.#stages;
+		if (stages === null || stages.size === 0) return null;
+		const needed = new Set<Row<T>>();
+		for (const stage of stages.values()) for (const row of stage.rows) needed.add(row);
+		return needed;
+	}
+
+	#emptyNeeded(): boolean {
+		for (const stage of this.#stages?.values() ?? []) if (stage.empty) return true;
+		return false;
+	}
+
+	#apply(stage: Stage<T>): void {
+		const next = stage.rows;
+		const needed = this.#needed();
+		const selected = new Set(next);
+		const previous = this.#order;
+		const positions = new Map<Row<T>, number>();
+		for (let position = 0; position < previous.length; position++) {
+			const row = previous[position] as Row<T>;
+			if (selected.has(row)) positions.set(row, position);
+		}
+		const moved: Mover[] = [];
+		for (const row of next) {
+			const mover = positions.has(row) ? moverOf(row.effect) : undefined;
+			if (mover !== undefined) moved.push(mover);
+		}
+		for (const row of previous) {
+			if (selected.has(row)) continue;
+			if (needed?.has(row)) {
+				stash(row);
+				hide(row.effect);
+				continue;
+			}
+			moverOf(row.effect)?.fix();
+			this.#leave(row);
+		}
+		if (this.#empty !== null) {
+			if (stage.empty && !this.#emptyShown) {
+				place(this.#empty, this.anchor);
+				unhide(this.#empty.effect);
+				this.#emptyShown = true;
+			} else if (!stage.empty && this.#emptyShown) {
+				this.#emptyShown = false;
+				if (this.#emptyNeeded()) {
+					stash(this.#empty);
+					hide(this.#empty.effect);
+				} else {
+					discard(this.#empty);
+					this.#empty = null;
+				}
+			}
+		}
+		const order = next.map((row) => positions.get(row) ?? -1);
+		let ordered = true;
+		for (let at = 0; at < order.length; at++) {
+			const position = order[at] as number;
+			if (position < 0 || (at > 0 && position < (order[at - 1] as number))) {
+				ordered = false;
+				break;
+			}
+		}
+		if (!ordered) {
+			const stay = kept(order);
+			let after = this.#start as ChildNode;
+			for (let at = 0; at < next.length; at++) {
+				const row = next[at] as Row<T>;
+				if (!stay.has(at)) {
+					if (this.#leaving.delete(row)) {
+						moverOf(row.effect)?.unfix();
+						resume(row.effect);
+					}
+					const before = after.nextSibling as ChildNode;
+					if (before !== row.first) place(row, before);
+					unhide(row.effect);
+				}
+				after = row.last;
+			}
+		}
+		this.#order = next;
+		this.#prune(needed);
+		animateMoves(moved);
+	}
+
+	#leave(row: Row<T>): void {
+		this.#leaving.add(row);
+		pause(row.effect, () => {
+			if (!this.#leaving.delete(row) || this.#block?.destroyed === true) return;
+			moverOf(row.effect)?.unfix();
+			if (this.#needed()?.has(row)) {
+				stash(row);
+				return;
+			}
+			discard(row);
+			if (this.#rows.get(row.key) === row) this.#rows.delete(row.key);
+		});
+	}
+
+	#prune(needed: Set<Row<T>> | null): void {
+		if (this.#rows.size > this.#order.length + this.#leaving.size) {
+			const shown = new Set(this.#order);
+			for (const [key, row] of this.#rows) {
+				if (shown.has(row) || this.#leaving.has(row) || needed?.has(row)) continue;
+				discard(row);
+				this.#rows.delete(key);
+			}
+		}
+		if (this.#empty !== null && !this.#emptyShown && !this.#emptyNeeded()) {
+			discard(this.#empty);
+			this.#empty = null;
+		}
+	}
+}
+
+export function list<T>(
+	node: ChildNode,
+	collection: () => Collection<T>,
+	key: ((item: T, index: number) => unknown) | null,
+	render: Item<T>,
+	fallback: Render | null = null,
+	mutable = false
+): void {
+	const values = derived<ArrayLike<T>>(
+		() => {
+			const given = collection();
+			return given == null ? [] : Array.isArray(given) ? given : Array.from(given as Iterable<T>);
+		},
+		mutable ? mutableEqual : undefined
+	);
+	const rows = new List<T>(node, values, key, render, fallback, mutable);
+	let first = true;
+	block(() => {
+		const items = get(values);
+		if (first) {
+			first = false;
+			rows.start(items);
+			return;
+		}
+		rows.update(items);
+	});
+}

package/src/runtime/dom/media.ts

@@ -0,0 +1,164 @@
+import { effect, template, teardown } from '../reactivity/effects.ts';
+import { unowned } from './events.ts';
+
+type Get<T> = () => T;
+type Set<T> = (value: T) => void;
+
+export interface TimeRange {
+	readonly start: number;
+	readonly end: number;
+}
+
+interface MediaValues {
+	buffered: TimeRange[];
+	seekable: TimeRange[];
+	played: TimeRange[];
+	duration: number;
+	seeking: boolean;
+	ended: boolean;
+	readyState: number;
+}
+
+interface Controls {
+	muted: boolean;
+	volume: number;
+	playbackRate: number;
+}
+
+const changes: Readonly<Record<keyof MediaValues, readonly string[]>> = {
+	buffered: ['loadedmetadata', 'progress', 'timeupdate', 'seeking'],
+	seekable: ['loadedmetadata'],
+	played: ['timeupdate'],
+	duration: ['durationchange'],
+	seeking: ['seeking', 'seeked'],
+	ended: ['timeupdate', 'ended'],
+	readyState: [
+		'loadedmetadata',
+		'loadeddata',
+		'canplay',
+		'canplaythrough',
+		'playing',
+		'waiting',
+		'emptied'
+	]
+};
+
+function subscribe(
+	media: HTMLMediaElement,
+	events: readonly string[],
+	read: () => void,
+	initial = true
+): void {
+	const callback = (): void => unowned(read);
+	if (initial) callback();
+	for (const name of events) media.addEventListener(name, callback);
+	teardown(() => {
+		for (const name of events) media.removeEventListener(name, callback);
+	});
+}
+
+function ranges(value: TimeRanges): TimeRange[] {
+	return Array.from({ length: value.length }, (_, index) => ({
+		start: value.start(index),
+		end: value.end(index)
+	}));
+}
+
+function sameRanges(previous: readonly TimeRange[] | undefined, current: TimeRanges): boolean {
+	if (previous === undefined || previous.length !== current.length) return false;
+	return previous.every(
+		(range, index) => range.start === current.start(index) && range.end === current.end(index)
+	);
+}
+
+export function bindMedia<K extends keyof MediaValues>(
+	media: HTMLMediaElement,
+	name: K,
+	set: Set<MediaValues[K]>
+): void {
+	let previous: TimeRange[] | undefined;
+	subscribe(media, changes[name], () => {
+		let value: unknown;
+		if (name === 'buffered') {
+			const current = media.buffered;
+			if (sameRanges(previous, current)) return;
+			value = previous = ranges(current);
+		} else if (name === 'seekable' || name === 'played')
+			value = ranges(name === 'seekable' ? media.seekable : media.played);
+		else value = media[name];
+		set(value as MediaValues[K]);
+	});
+}
+
+export function bindMediaControl<K extends keyof Controls>(
+	media: HTMLMediaElement,
+	name: K,
+	get: Get<unknown>,
+	set: Set<Controls[K]>
+): void {
+	const read = (): void => set(media[name] as Controls[K]);
+	const write = (): void => {
+		if (name === 'muted') {
+			const next = Boolean(get());
+			if (media.muted !== next) media.muted = next;
+		} else {
+			const next = Number(get());
+			const property = name as 'volume' | 'playbackRate';
+			if (!Number.isNaN(next) && media[property] !== next) media[property] = next;
+		}
+	};
+	if (name === 'playbackRate') {
+		effect(write);
+		effect(() => subscribe(media, ['ratechange'], read));
+	} else {
+		if (unowned(get) == null) unowned(read);
+		subscribe(media, ['volumechange'], read, false);
+		template(write);
+	}
+}
+
+export function bindCurrentTime(
+	media: HTMLMediaElement,
+	get: Get<unknown>,
+	set: Set<number>
+): void {
+	let frame = 0;
+	let value = Number.NaN;
+	const read = (): void => {
+		cancelAnimationFrame(frame);
+		if (!media.paused) frame = requestAnimationFrame(() => unowned(read));
+		const next = media.currentTime;
+		if (next !== value) set((value = next));
+	};
+	frame = requestAnimationFrame(() => unowned(read));
+	subscribe(media, ['timeupdate'], read, false);
+	template(() => {
+		const next = Number(get());
+		if (next === value || Number.isNaN(next)) return;
+		value = next;
+		media.currentTime = next;
+	});
+	teardown(() => cancelAnimationFrame(frame));
+}
+
+export function bindPaused(media: HTMLMediaElement, get: Get<unknown>, set: Set<boolean>): void {
+	let paused = unowned(get);
+	subscribe(
+		media,
+		['play', 'pause', 'canplay'],
+		() => {
+			if (paused !== media.paused) set((paused = media.paused));
+		},
+		paused == null
+	);
+	effect(() => {
+		paused = Boolean(get());
+		if (paused === media.paused) return;
+		if (paused) media.pause();
+		else
+			void media.play().catch((error: unknown) => {
+				unowned(() => set((paused = true)));
+				throw error;
+			});
+	});
+}

package/src/runtime/dom/meta.ts

@@ -0,0 +1,67 @@
+import { detached } from '../reactivity/effects.ts';
+import type { Effect } from '../reactivity/graph.ts';
+import { owner, setOwner } from '../reactivity/tracking.ts';
+
+export interface Location {
+	readonly file: string;
+	readonly line: number;
+	readonly column: number;
+}
+
+export interface FrameInput extends Location {
+	readonly type: string;
+	readonly componentTag?: string;
+}
+
+interface Frame extends FrameInput {
+	readonly parent: Frame | null;
+}
+
+const frames = new WeakMap<Effect, Frame>();
+const components = new WeakMap<object, string>();
+
+export function componentSource(component: object, file: string): void {
+	components.set(component, file);
+}
+
+export function componentFile(component: object): string {
+	return components.get(component) ?? '(unknown)';
+}
+
+export function callerFile(): string | null {
+	for (let frame = current(); frame !== null; frame = frame.parent) {
+		if (frame.type === 'component') return frame.file;
+	}
+	return null;
+}
+
+function current(): Frame | null {
+	for (let at = owner; at !== null; at = at.parent) {
+		const frame = frames.get(at);
+		if (frame !== undefined) return frame;
+	}
+	return null;
+}
+
+export function frame<T>(source: FrameInput, fn: () => T): T {
+	const parent = current();
+	const previous = owner;
+	const scope = detached(null, previous);
+	frames.set(scope, { ...source, parent });
+	setOwner(scope);
+	try {
+		return fn();
+	} finally {
+		setOwner(previous);
+	}
+}
+
+export function locate(element: Element, key: string, loc: Location): void {
+	(element as unknown as Record<string, unknown>)[key] = { parent: current(), loc };
+}
+
+export function disclose(key: string, version: string): void {
+	if (typeof window === 'undefined') return;
+	const target = window as unknown as Record<string, { v?: Set<string> }>;
+	((target[key] ??= {}).v ??= new Set()).add(version);
+}