vigla 0.0.0 → 0.2.0

package/src/runtime/dom/boundary.ts

@@ -0,0 +1,349 @@
+import { failure, warn } from '../../shared/diagnostics.ts';
+import { OPEN_ELSE, OPEN_FAILED } from '../../shared/markers.ts';
+import { reveal } from '../reactivity/async.ts';
+import { current, onCommit, skip as skipEffect } from '../reactivity/batch.ts';
+import { block, branch, destroy, fail } from '../reactivity/effects.ts';
+import type { Boundary as Contract, Effect } from '../reactivity/graph.ts';
+import { task } from '../reactivity/tasks.ts';
+import { owner, setOwner } from '../reactivity/tracking.ts';
+import { seeThrough } from '../transitions/manager.ts';
+import { claim, cursor, hydrating, instruction, isClose, MISMATCH, skip } from './hydration.ts';
+import { build, discard, place, type Built } from './range.ts';
+import type { Render } from './template.ts';
+
+type Reset = () => void;
+
+type Snippet = (anchor: ChildNode, ...args: (() => unknown)[]) => void;
+
+export interface BoundaryProps {
+	readonly failed?: Snippet | null;
+	readonly pending?: Snippet | null;
+	readonly onerror?: ((error: unknown, reset: Reset) => void) | null;
+}
+
+type Transform = (error: unknown) => unknown;
+
+const transforms = new WeakMap<Contract, Transform>();
+
+const rooted = new WeakMap<Effect, Transform>();
+
+export function transformAt(root: Effect, transform: Transform | undefined): void {
+	if (transform !== undefined) rooted.set(root, transform);
+}
+
+function rootTransform(): Transform | undefined {
+	for (let current = owner; current !== null; current = current.parent) {
+		const transform = rooted.get(current);
+		if (transform !== undefined) return transform;
+	}
+	return undefined;
+}
+
+class Boundary implements Contract {
+	readonly parent: Contract | null;
+	showing = false;
+	readonly #props: BoundaryProps;
+	readonly #content: Render;
+	readonly #effect: Effect;
+	readonly #owner: Effect | null;
+	readonly #transform: (error: unknown) => unknown;
+	#anchor: ChildNode;
+	#units = 0;
+	#main: Built | null = null;
+	#pending: Built | null = null;
+	#failed: Built | null = null;
+	#building = false;
+	#errored = false;
+	#falling = false;
+
+	constructor(
+		node: ChildNode,
+		props: BoundaryProps,
+		content: Render,
+		transform?: (error: unknown) => unknown
+	) {
+		this.#anchor = node;
+		this.#props = props;
+		this.#content = content;
+		this.#owner = owner;
+		this.parent = owner?.boundary ?? null;
+		this.#transform =
+			transform ??
+			(this.parent === null ? rootTransform() : transforms.get(this.parent)) ??
+			((error) => error);
+		transforms.set(this, this.#transform);
+		this.#effect = block(() => {
+			if (hydrating) this.#hydrate(node);
+			else this.#render();
+		});
+		seeThrough(this.#effect);
+	}
+
+	#branch(render: Render, own: boolean): Built {
+		return build(render, (fn) => (own ? branch(fn, this) : branch(fn)), this.#anchor);
+	}
+
+	#fallback(render: Render): Built {
+		this.#falling = true;
+		try {
+			return this.#branch(render, true);
+		} finally {
+			this.#falling = false;
+		}
+	}
+
+	#hydrate(node: ChildNode): void {
+		const data = instruction(node);
+		claim(node.nextSibling);
+		if (data.startsWith(OPEN_FAILED)) {
+			const error = JSON.parse(data.slice(OPEN_FAILED.length)) as unknown;
+			const failed = this.#props.failed;
+			const { reset, report } = this.#resettable(error);
+			task(report);
+			if (failed)
+				this.#failed = this.#fallback((anchor) =>
+					failed(
+						anchor,
+						() => error,
+						() => reset
+					)
+				);
+			this.#settleAnchor();
+			return;
+		}
+		if (data === OPEN_ELSE) {
+			const pending = this.#props.pending;
+			if (pending) {
+				this.showing = true;
+				this.#pending = this.#branch((anchor) => pending(anchor), false);
+			}
+			this.#settleAnchor();
+			task(() => {
+				if (this.#effect.destroyed) return;
+				this.#offscreen();
+			});
+			return;
+		}
+		this.#errored = false;
+		const main = this.#branch(this.#content, true);
+		if (this.#errored) {
+			destroy(main.effect);
+			claim(node.nextSibling);
+		} else this.#main = main;
+		this.#settleAnchor();
+	}
+
+	#settleAnchor(): void {
+		if (!isClose(cursor)) skip();
+		this.#anchor = cursor;
+	}
+
+	#render(): void {
+		const pending = this.#props.pending;
+		this.#building = true;
+		for (const built of [this.#main, this.#pending]) if (built !== null) discard(built);
+		this.#main = this.#pending = null;
+		this.showing = pending != null;
+		this.#units = 0;
+		this.#errored = false;
+		let built: Built;
+		try {
+			built = this.#branch(this.#content, true);
+		} finally {
+			this.#building = false;
+		}
+		if (this.#errored) {
+			discard(built);
+			return;
+		}
+		this.#main = built;
+		if (this.#units > 0 && pending) {
+			this.#pending = this.#branch((anchor) => pending(anchor), false);
+			place(this.#pending, this.#anchor);
+			return;
+		}
+		this.showing = false;
+		place(built, this.#anchor);
+		reveal(this);
+	}
+
+	#offscreen(): void {
+		this.#units = 0;
+		this.#building = true;
+		let built: Built;
+		try {
+			built = this.#run(() => this.#branch(this.#content, true));
+		} finally {
+			this.#building = false;
+		}
+		this.#main = built;
+		if (this.#units === 0) this.#swap();
+	}
+
+	#run<T>(fn: () => T): T {
+		const previous = setOwner(this.#effect);
+		try {
+			return fn();
+		} finally {
+			setOwner(previous);
+		}
+	}
+
+	#swap(): void {
+		this.showing = false;
+		if (this.#pending !== null) {
+			discard(this.#pending);
+			this.#pending = null;
+		}
+		if (this.#main !== null) place(this.#main, this.#anchor);
+		reveal(this);
+	}
+
+	settle(delta: 1 | -1): void {
+		this.#units += delta;
+		if (!this.#props.pending) {
+			this.parent?.settle(delta);
+			return;
+		}
+		if (delta === -1 && this.#units === 0 && this.showing && !this.#building) {
+			if (this.#pending === null && this.#main !== null && this.#main.fragment === null) {
+				this.showing = false;
+				reveal(this);
+				return;
+			}
+			this.#swap();
+		}
+	}
+
+	#resettable(error: unknown): { reset: Reset; report: () => void } {
+		let done = false;
+		let reporting = false;
+		const reset: Reset = () => {
+			if (this.#effect.destroyed) return;
+			if (done) {
+				warn(
+					'boundary_reset_noop',
+					'A boundary `reset` function only resets the boundary the first time it is called'
+				);
+				return;
+			}
+			done = true;
+			if (reporting) {
+				throw failure(
+					'boundary_reset_onerror',
+					'A boundary `reset` function cannot be called while an error is still being handled'
+				);
+			}
+			if (this.#failed !== null) {
+				discard(this.#failed);
+				this.#failed = null;
+			}
+			this.#run(() => this.#render());
+		};
+		const report = (): void => {
+			if (this.#effect.destroyed) return;
+			try {
+				reporting = true;
+				this.#props.onerror?.(error, reset);
+			} catch (thrown) {
+				this.#escalate(thrown);
+			} finally {
+				reporting = false;
+			}
+		};
+		return { reset, report };
+	}
+
+	#escalate(error: unknown): void {
+		fail(this.#owner, error);
+	}
+
+	failed(error: unknown): void {
+		if (error === MISMATCH) throw error;
+		const failed = this.#props.failed;
+		if (this.#falling || this.#effect?.destroyed === true || (!failed && !this.#props.onerror)) {
+			this.#escalate(error);
+			return;
+		}
+		const batch = current();
+		if (batch.fork) {
+			for (const built of [this.#main, this.#pending, this.#failed]) {
+				if (built !== null) skipEffect(built.effect, batch);
+			}
+			onCommit(batch, {
+				apply: () => {
+					if (!this.#effect.destroyed) this.#handle(error);
+				}
+			});
+			return;
+		}
+		this.#handle(error);
+	}
+
+	#handle(error: unknown): void {
+		const failed = this.#props.failed;
+		this.#errored = true;
+		const retiring = [this.#main, this.#pending, this.#failed];
+		this.#main = this.#pending = this.#failed = null;
+		this.showing = false;
+		for (const built of retiring) if (built !== null) discard(built);
+		task(() => {
+			if (this.#effect.destroyed) return;
+			let transformed: unknown;
+			try {
+				transformed = this.#transform(error);
+			} catch (thrown) {
+				this.#escalate(thrown);
+				return;
+			}
+			const handle = (value: unknown): void => {
+				if (this.#effect.destroyed) return;
+				const { reset, report } = this.#resettable(value);
+				report();
+				if (!failed || this.#effect.destroyed) return;
+				if (this.#failed !== null) {
+					discard(this.#failed);
+					this.#failed = null;
+				}
+				try {
+					const built = this.#run(() =>
+						this.#fallback((anchor) =>
+							failed(
+								anchor,
+								() => value,
+								() => reset
+							)
+						)
+					);
+					if (this.#effect.destroyed) {
+						discard(built);
+						return;
+					}
+					this.#failed = built;
+					place(built, this.#anchor);
+				} catch (thrown) {
+					this.#escalate(thrown);
+				}
+			};
+			if (
+				transformed !== null &&
+				typeof (transformed as PromiseLike<unknown>)?.then === 'function'
+			) {
+				(transformed as PromiseLike<unknown>).then(handle, (thrown: unknown) =>
+					this.#escalate(thrown)
+				);
+			} else {
+				handle(transformed);
+			}
+		});
+	}
+}
+
+export function boundary(
+	node: ChildNode,
+	props: BoundaryProps,
+	content: Render,
+	transform?: (error: unknown) => unknown
+): void {
+	new Boundary(node, props, content, transform);
+}

package/src/runtime/dom/branches.ts

@@ -0,0 +1,219 @@
+import {
+	alias,
+	atCommit,
+	atDiscard,
+	atMerge,
+	processed,
+	skip,
+	unskip,
+	type Batch
+} from '../reactivity/batch.ts';
+import { branch, hide, show as unhide } from '../reactivity/effects.ts';
+import type { Effect } from '../reactivity/graph.ts';
+import { owner } from '../reactivity/tracking.ts';
+import { building, pause, prepare, resume, seeThrough } from '../transitions/manager.ts';
+import {
+	claim,
+	COMMENT,
+	cursor,
+	hydrating,
+	isClose,
+	mismatch,
+	setHydrating,
+	skip as removeServer
+} from './hydration.ts';
+import { build, discard, opener, place, stash, type Built } from './range.ts';
+import type { Render } from './template.ts';
+
+export function same(a: unknown, b: unknown): boolean {
+	return a === b || (a !== a && b !== b);
+}
+
+export const CLOSED = 0;
+
+export const REPAIRED = 1;
+
+export const COMMENTED = 2;
+
+export type Ending = typeof CLOSED | typeof REPAIRED | typeof COMMENTED;
+
+function ending(end: Ending): ChildNode {
+	if (end === COMMENTED) {
+		if (cursor.nodeType !== COMMENT) mismatch();
+		return cursor;
+	}
+	if (isClose(cursor)) return cursor;
+	if (end === CLOSED) mismatch();
+	return removeServer();
+}
+
+export class Branches<K> {
+	anchor: ChildNode;
+	readonly #transparent: boolean;
+	#block: Effect | null = null;
+	#shown!: K;
+	readonly #built = new Map<K, Built>();
+	readonly #leaving = new Set<K>();
+	#stages: Map<Batch, K> | null = null;
+
+	constructor(anchor: ChildNode, transparent = false) {
+		this.anchor = anchor;
+		this.#transparent = transparent;
+	}
+
+	#build(render: Render, update: boolean): Built {
+		const at = this.anchor;
+		return this.#transparent
+			? build(render, branch, at)
+			: building(update, () => build(render, branch, at));
+	}
+
+	start(key: K, render: Render | null, matched: boolean | null = null, end: Ending = CLOSED): void {
+		this.#block = owner;
+		if (this.#transparent && owner !== null) seeThrough(owner);
+		this.#shown = key;
+		let built: Built | null = null;
+		if (!hydrating) {
+			built = render === null ? null : this.#build(render, false);
+			if (built !== null) place(built, this.anchor);
+		} else if (matched === null) {
+			cursor.before(opener(cursor));
+			built = render === null ? null : this.#build(render, false);
+			this.anchor = cursor;
+		} else {
+			claim(this.anchor.nextSibling);
+			if (matched) {
+				built = render === null ? null : this.#build(render, false);
+				this.anchor = ending(end);
+			} else {
+				this.anchor = removeServer();
+				setHydrating(false);
+				try {
+					built = render === null ? null : this.#build(render, false);
+				} finally {
+					setHydrating(true);
+				}
+				if (built !== null) place(built, this.anchor);
+			}
+		}
+		if (built !== null) this.#built.set(key, built);
+	}
+
+	show(key: K, render: () => Render | null): void {
+		const batch = processed();
+		const stages = this.#stages;
+		const known = batch !== null && stages !== null && stages.has(batch);
+		if (!known && same(key, this.#shown) && (stages === null || stages.size === 0)) return;
+		if (!this.#built.has(key) && !same(key, this.#shown)) {
+			const content = render();
+			if (content !== null) {
+				const built = this.#build(content, true);
+				if (batch !== null) hide(built.effect);
+				this.#built.set(key, built);
+			}
+		}
+		if (batch === null) {
+			this.#capture(key);
+			this.#switch(key);
+			return;
+		}
+		(this.#stages ??= new Map()).set(batch, key);
+		for (const [held, built] of this.#built) {
+			if (same(held, key)) unskip(built.effect);
+			else skip(built.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;
+		if (stages === null || !stages.has(from)) return;
+		const key = stages.get(from) as K;
+		stages.delete(from);
+		if (from.order > into.order || !stages.has(into)) stages.set(into, key);
+	}
+
+	#capture(key: K): void {
+		if (same(key, this.#shown)) return;
+		const branches: Effect[] = [];
+		const old = this.#built.get(this.#shown);
+		if (old !== undefined) branches.push(old.effect);
+		const revived = this.#leaving.has(key) ? this.#built.get(key) : undefined;
+		if (revived !== undefined) branches.push(revived.effect);
+		prepare(branches);
+	}
+
+	#prepare(given: Batch): void {
+		const stages = this.#stages;
+		const batch = alias(given);
+		if (stages === null || !stages.has(batch) || this.#block?.destroyed === true) return;
+		this.#capture(stages.get(batch) as K);
+	}
+
+	#commit(given: Batch): void {
+		const batch = alias(given);
+		const stages = this.#stages;
+		if (stages === null || !stages.has(batch) || this.#block?.destroyed === true) return;
+		const key = stages.get(batch) as K;
+		stages.delete(batch);
+		this.#switch(key);
+	}
+
+	#discard(given: Batch): void {
+		const batch = alias(given);
+		if (this.#stages?.delete(batch) !== true || this.#block?.destroyed === true) return;
+		this.#prune();
+	}
+
+	#switch(key: K): void {
+		const previous = this.#shown;
+		if (!same(previous, key)) {
+			this.#shown = key;
+			const next = this.#built.get(key);
+			if (next !== undefined) {
+				if (this.#leaving.delete(key)) resume(next.effect);
+				else {
+					place(next, this.anchor);
+					unhide(next.effect);
+				}
+			}
+			const old = this.#built.get(previous);
+			if (old !== undefined) {
+				if (this.#needed(previous)) {
+					stash(old);
+					hide(old.effect);
+				} else this.#leave(previous, old);
+			}
+		}
+		this.#prune();
+	}
+
+	#leave(key: K, built: Built): void {
+		this.#leaving.add(key);
+		pause(built.effect, () => {
+			if (!this.#leaving.delete(key) || this.#block?.destroyed === true) return;
+			if (this.#needed(key)) {
+				stash(built);
+				return;
+			}
+			discard(built);
+			this.#built.delete(key);
+		});
+	}
+
+	#needed(key: K): boolean {
+		for (const held of this.#stages?.values() ?? []) if (same(held, key)) return true;
+		return false;
+	}
+
+	#prune(): void {
+		for (const [key, built] of this.#built) {
+			if (same(key, this.#shown) || this.#leaving.has(key) || this.#needed(key)) continue;
+			discard(built);
+			this.#built.delete(key);
+		}
+	}
+}

package/src/runtime/dom/context.ts

@@ -0,0 +1,90 @@
+import { DEV } from 'esm-env';
+import type { Layer } from '../../shared/context.ts';
+import { detached, effect } from '../reactivity/effects.ts';
+import type { Effect } from '../reactivity/graph.ts';
+import { installComponents, layerOf, setContext } from '../reactivity/owners.ts';
+import { owner, running, setOwner, untrack } from '../reactivity/tracking.ts';
+
+interface Initializing {
+	readonly layer: Layer<Effect>;
+	readonly outer: Initializing | null;
+	readonly caller: Effect | null;
+	readonly deferred: (() => void)[];
+}
+
+let initializing: Initializing | null = null;
+
+function standing(): Layer<Effect> | null {
+	return initializing !== null && initializing.layer.owner === owner ? initializing.layer : null;
+}
+
+installComponents({ layer: standing });
+
+export type Phase = 'initializing' | 'running' | null;
+
+export function phase(): Phase {
+	if (standing() !== null) return 'initializing';
+	for (let layer = layerOf(owner); layer !== null; layer = layer.parent) {
+		if (layer.component) return 'running';
+	}
+	return null;
+}
+
+export function provide<T>(key: unknown, value: T): T {
+	for (let layer = standing() ?? layerOf(owner); layer !== null; layer = layer.parent) {
+		if (layer.component) {
+			(layer.map ??= new Map()).set(key, value);
+			return value;
+		}
+	}
+	return setContext(key, value);
+}
+
+export function push(map?: Map<unknown, unknown>): void {
+	const caller = owner;
+	const parent = standing() ?? layerOf(owner);
+	const instance = caller === null ? null : detached(null, caller);
+	const layer: Layer<Effect> = { parent, owner: instance, component: true, map: map ?? null };
+	initializing = { layer, outer: initializing, caller, deferred: [] };
+	if (instance === null) return;
+	instance.context = layer;
+	setOwner(instance);
+}
+
+export function pop<T>(exports?: T): T {
+	const done = initializing as Initializing;
+	for (const create of done.deferred) create();
+	initializing = done.outer;
+	if (done.layer.owner !== null) setOwner(done.caller);
+	return (exports ?? {}) as T;
+}
+
+export function withContext<T>(map: Map<unknown, unknown> | undefined, fn: () => T): T {
+	const saved = initializing;
+	const caller = owner;
+	push(map);
+	try {
+		const result = fn();
+		pop();
+		return result;
+	} finally {
+		initializing = saved;
+		setOwner(caller);
+	}
+}
+
+export function userEffect(fn: () => void | (() => void)): void {
+	if (DEV) Object.defineProperty(fn, 'name', { value: '$effect' });
+	if (initializing !== null && standing() !== null && running() === null) {
+		initializing.deferred.push(() => effect(fn));
+		return;
+	}
+	effect(fn);
+}
+
+export function onMount(fn: () => unknown): void {
+	userEffect(() => {
+		const cleanup = untrack(fn);
+		if (typeof cleanup === 'function') return cleanup as () => void;
+	});
+}