vigla 0.0.0 → 0.2.0

package/src/runtime/dom/async.ts

@@ -0,0 +1,208 @@
+import { asyncDerived, work } from '../reactivity/async.ts';
+import { resumed, suspend } from '../reactivity/views.ts';
+import { fail } from '../reactivity/effects.ts';
+import type { Effect, Source } from '../reactivity/graph.ts';
+import { get } from '../reactivity/reads.ts';
+import { endReading, owner } from '../reactivity/tracking.ts';
+import { derived, set, state } from '../reactivity/sources.ts';
+import type { Exports } from './mount.ts';
+import { CLOSE, OPEN, OPEN_ELSE } from '../../shared/markers.ts';
+import { claim, COMMENT, cursor, hydrating, resumeHydration, setHydrating } from './hydration.ts';
+import type { Render } from './template.ts';
+
+function matchingClose(open: ChildNode): ChildNode {
+	let depth = 0;
+	for (let node = open.nextSibling; node !== null; node = node.nextSibling) {
+		if (node.nodeType !== COMMENT) continue;
+		const data = (node as Comment).data;
+		if (data === CLOSE) {
+			if (depth === 0) return node;
+			depth--;
+		} else if (data === OPEN || data === OPEN_ELSE || data.startsWith('[')) {
+			depth++;
+		}
+	}
+	return open;
+}
+
+interface Resume {
+	readonly start: ChildNode | null;
+	readonly end: ChildNode | null;
+}
+
+function park(node: ChildNode | null): Resume {
+	if (!hydrating || node === null) return { start: null, end: null };
+	const end = matchingClose(node);
+	const start = node.nextSibling;
+	claim(end);
+	return { start, end };
+}
+
+function resume<T>(parked: Resume, fn: () => T): T {
+	if (parked.start === null) return fn();
+	const was = setHydrating(true);
+	const saved = cursor;
+	claim(parked.start);
+	try {
+		return fn();
+	} finally {
+		setHydrating(was);
+		claim(saved);
+	}
+}
+
+function settleWith(effect: Effect | null, error: unknown): void {
+	if (effect === null || effect.destroyed) return;
+	fail(effect, error);
+}
+
+interface Value {
+	readonly value: unknown;
+}
+
+type AsyncThunk = () => Value | PromiseLike<Value>;
+
+type AsyncRender = (anchor: ChildNode | null, ...values: Source[]) => void;
+
+export function prepareAsync(
+	node: ChildNode | null,
+	thunks: readonly AsyncThunk[],
+	fn: AsyncRender
+): () => void {
+	const parked = park(node);
+	return () => startAsync(node, parked, thunks, fn);
+}
+
+export function async(
+	node: ChildNode | null,
+	thunks: readonly AsyncThunk[],
+	fn: AsyncRender
+): void {
+	startAsync(node, park(node), thunks, fn);
+}
+
+function startAsync(
+	node: ChildNode | null,
+	parked: Resume,
+	thunks: readonly AsyncThunk[],
+	fn: AsyncRender
+): void {
+	const anchor = parked.end ?? node;
+	const at = owner;
+	const done = work();
+	const restore = suspend();
+	Promise.all(thunks.map((thunk) => asyncDerived(thunk))).then(
+		(sources) => {
+			if (at?.destroyed) {
+				done();
+				return;
+			}
+			restore();
+			try {
+				for (const source of sources) get(source);
+				const values = sources.map((source) => derived(() => get(source).value));
+				resume(parked, () => fn(anchor, ...values));
+			} catch (error) {
+				settleWith(at, error);
+			} finally {
+				resumed();
+				done();
+			}
+		},
+		(error: unknown) => {
+			restore();
+			try {
+				settleWith(at, error);
+			} finally {
+				resumed();
+				done();
+			}
+		}
+	);
+}
+
+export async function save<T>(value: T | PromiseLike<T>): Promise<() => T> {
+	const restore = suspend();
+	endReading();
+	const mode = hydrating;
+	const resolved = await value;
+	return () => {
+		restore();
+		const finish = resumeHydration(mode);
+		queueMicrotask(() => {
+			finish();
+			resumed();
+		});
+		return resolved;
+	};
+}
+
+export class ExportsCell {
+	readonly #values = state<Exports>({});
+	#pending: Map<string, unknown> | null = new Map();
+
+	get(name: string): unknown {
+		const values = get(this.#values);
+		return this.#pending?.has(name) ? this.#pending.get(name) : values[name];
+	}
+
+	set(name: string, value: unknown): void {
+		if (this.#pending !== null) this.#pending.set(name, value);
+		else get(this.#values)[name] = value;
+	}
+
+	publish(values: Exports): void {
+		for (const [name, value] of this.#pending ?? []) values[name] = value;
+		this.#pending = null;
+		set(this.#values, values);
+	}
+}
+
+export function deferredExports(): ExportsCell {
+	return new ExportsCell();
+}
+
+export function script(node: ChildNode, fn: () => Promise<Render>): void {
+	const parked = park(hydrating ? cursor : node);
+	if (parked.end !== null) claim(parked.end.nextSibling);
+	let anchor = parked.end;
+	if (anchor === null) {
+		anchor = document.createTextNode('');
+		node.before(anchor);
+	}
+	const at = owner;
+	const done = work();
+	const restore = suspend();
+	let promise: Promise<Render>;
+	try {
+		promise = fn();
+	} catch (error) {
+		promise = Promise.reject(error);
+	}
+	promise.then(
+		(render) => {
+			if (at?.destroyed) {
+				done();
+				return;
+			}
+			restore();
+			try {
+				resume(parked, () => render(anchor));
+			} catch (error) {
+				settleWith(at, error);
+			} finally {
+				resumed();
+				done();
+			}
+		},
+		(error: unknown) => {
+			restore();
+			try {
+				settleWith(at, error);
+			} finally {
+				resumed();
+				done();
+			}
+		}
+	);
+}

package/src/runtime/dom/attachments.ts

@@ -0,0 +1,139 @@
+import { alias, atCommit, atDiscard, atMerge, processed, type Batch } from '../reactivity/batch.ts';
+import { block, branch, destroy, effect, template } from '../reactivity/effects.ts';
+import type { Effect } from '../reactivity/graph.ts';
+import { owner, setOwner, untrack } from '../reactivity/tracking.ts';
+
+export const ATTACHMENT = '@attach';
+
+export type Attachment<E extends Element = Element> = (element: E) => void | (() => void);
+
+export function attachment(): symbol {
+	return Symbol(ATTACHMENT);
+}
+
+export function attach(element: Element, get: () => unknown): Effect {
+	let current: unknown;
+	let shown: Effect | null = null;
+	let parent: Effect | null = null;
+	let stages: Map<Batch, unknown> | null = null;
+	const publish = (next: unknown): void => {
+		if (parent === null || parent.destroyed || next === current) return;
+		current = next;
+		if (shown !== null) destroy(shown);
+		shown = null;
+		if (typeof next !== 'function') return;
+		const previous = setOwner(parent);
+		try {
+			shown = branch(() => effect(() => (next as Attachment)(element)));
+		} finally {
+			setOwner(previous);
+		}
+	};
+	return block(() => {
+		parent = owner;
+		const next = get();
+		const batch = processed();
+		if (batch === null) {
+			publish(next);
+			return;
+		}
+		const pending = (stages ??= new Map());
+		const known = pending.has(batch);
+		pending.set(batch, next);
+		if (known) return;
+		atCommit({
+			apply() {
+				const target = alias(batch);
+				if (!pending.has(target)) return;
+				const selected = pending.get(target);
+				pending.delete(target);
+				publish(selected);
+			}
+		});
+		atDiscard(() => pending.delete(alias(batch)));
+		atMerge((from, into) => {
+			if (!pending.has(from)) return;
+			const selected = pending.get(from);
+			pending.delete(from);
+			if (from.order > into.order || !pending.has(into)) pending.set(into, selected);
+		});
+	});
+}
+
+const attached = Symbol('attached');
+
+type Spread = Record<string | symbol, unknown> & { [attached]?: Map<symbol, Effect> };
+
+export function spreadAttachments(element: Element, current: Spread, next: Spread): void {
+	let effects = current[attached];
+	for (const key of Object.getOwnPropertySymbols(next)) {
+		if (key.description !== ATTACHMENT) continue;
+		const fn = next[key];
+		if (effects?.has(key) && current[key] === fn) continue;
+		effects ??= current[attached] = new Map();
+		const previous = effects.get(key);
+		if (previous !== undefined) destroy(previous);
+		const parent = owner?.parent ?? null;
+		const saved = setOwner(parent);
+		try {
+			effects.set(
+				key,
+				untrack(() => attach(element, () => fn))
+			);
+		} finally {
+			setOwner(saved);
+		}
+		current[key] = fn;
+	}
+	if (effects === undefined) return;
+	for (const [key, effect] of effects) {
+		if (key in next) continue;
+		destroy(effect);
+		effects.delete(key);
+		delete current[key];
+	}
+}
+
+interface Payload<P> {
+	readonly update?: (value: P) => void;
+	readonly destroy?: () => void;
+}
+
+type Action<P> = (element: Element, value?: P) => Payload<P> | void | null | undefined;
+
+function deepRead(value: unknown, seen: Set<object>): void {
+	if (typeof value !== 'object' || value === null || value instanceof EventTarget) return;
+	if (seen.has(value)) return;
+	seen.add(value);
+	for (const key of Object.keys(value)) deepRead((value as Record<string, unknown>)[key], seen);
+}
+
+function differs(previous: unknown, next: unknown): boolean {
+	if (previous !== previous) return next === next;
+	return (
+		previous !== next ||
+		(previous !== null && typeof previous === 'object') ||
+		typeof previous === 'function'
+	);
+}
+
+export function action<P>(element: Element, run: Action<P>, get?: () => P): void {
+	effect(() => {
+		const payload = untrack(() => run(element, get?.())) ?? {};
+		if (get !== undefined && payload.update !== undefined) {
+			const update = payload.update;
+			let previous: unknown = {};
+			let started = false;
+			template(() => {
+				const value = get();
+				deepRead(value, new Set());
+				if (started && differs(previous, value)) {
+					previous = value;
+					update.call(payload, value);
+				}
+			});
+			started = true;
+		}
+		if (payload.destroy !== undefined) return () => payload.destroy?.();
+	});
+}