vigla 0.0.0 → 0.2.0

package/src/runtime/server/context.ts

@@ -0,0 +1,319 @@
+import type { Layer } from '../../shared/context.ts';
+import { lifetime } from '../reactivity/abort.ts';
+import { failure } from '../../shared/diagnostics.ts';
+import { destroy, teardown } from '../reactivity/effects.ts';
+import type { Effect } from '../reactivity/graph.ts';
+import { ambient } from '../reactivity/carried.ts';
+import { installComponents, layerOf, ownerOf } from '../reactivity/owners.ts';
+import { owner, setOwner } from '../reactivity/tracking.ts';
+import type { Data } from './hydration.ts';
+import type { Output } from './render.ts';
+
+export interface Instance extends Layer<Effect> {
+	destroys: (() => void)[] | null;
+}
+
+interface Saved {
+	readonly render: Render | null;
+	readonly owner: Effect | null;
+	readonly site: Output | null;
+}
+
+export interface Render {
+	readonly scope: Effect;
+	readonly out: Output;
+	readonly instances: Instance[];
+	readonly saved: Saved;
+	released: boolean;
+}
+
+let render: Render | null = null;
+let site: Output | null = null;
+
+const stores = new WeakMap<Effect, Data>();
+const resumed = new WeakSet<Layer<Effect>>();
+
+function standing(): Layer<Effect> | null {
+	if (render === null || owner !== render.scope) return null;
+	const layer = layerOf(owner);
+	return layer !== null && layer.component ? layer : null;
+}
+
+function instanceOf(effect: Effect): Instance | null {
+	for (let layer = layerOf(effect); layer !== null; layer = layer.parent) {
+		if (layer.component) return layer as Instance;
+	}
+	return null;
+}
+
+installComponents({
+	layer: standing,
+	teardown(fn) {
+		const effect = ambient();
+		const instance =
+			effect !== null && render !== null && effect === render.scope ? instanceOf(effect) : null;
+		if (instance === null) return false;
+		(instance.destroys ??= []).push(fn);
+		return true;
+	}
+});
+
+export function enter(output: Output | null): Output | null {
+	const previous = site;
+	site = output;
+	return previous;
+}
+
+export function push(map?: Map<unknown, unknown>): void {
+	if (render === null) return;
+	const instance: Instance = {
+		parent: layerOf(render.scope),
+		owner: null,
+		component: true,
+		map: map ?? null,
+		destroys: null
+	};
+	render.scope.context = instance;
+	render.instances.push(instance);
+	site?.place(instance);
+}
+
+export function pop(): void {
+	if (render !== null) render.scope.context = layerOf(render.scope)?.parent ?? null;
+}
+
+export function begin(scope: Effect, hydration: Data, out: Output, inheritContext = true): Render {
+	const saved = { render, owner, site };
+	scope.context = {
+		parent: inheritContext ? layerOf(scope) : null,
+		owner: scope,
+		component: false,
+		isolated: !inheritContext,
+		map: null
+	};
+	ownerOf(scope);
+	stores.set(scope, hydration);
+	const opened: Render = { scope, out, instances: [], saved, released: false };
+	render = opened;
+	site = out;
+	setOwner(scope);
+	teardown(() => release(opened));
+	return opened;
+}
+
+export function end(done: Render): void {
+	render = done.saved.render;
+	site = done.saved.site;
+	setOwner(done.saved.owner);
+}
+
+export function finish(done: Render, failed: boolean): void {
+	let caught = false;
+	let first: unknown;
+	for (const step of [() => destroy(done.scope), () => release(done)]) {
+		try {
+			step();
+		} catch (error) {
+			if (!caught) first = error;
+			caught = true;
+		}
+	}
+	if (caught && !failed) throw first;
+}
+
+function within(instance: Instance, ancestor: Instance): boolean {
+	for (let at = instance.parent; at !== null; at = at.parent) if (at === ancestor) return true;
+	return false;
+}
+
+function release(done: Render): void {
+	if (done.released) return;
+	done.released = true;
+	const ordered: Instance[] = [];
+	const open: Instance[] = [];
+	done.out.instances((instance) => {
+		while (open.length > 0 && !within(instance, open.at(-1)!)) ordered.push(open.pop()!);
+		open.push(instance);
+	});
+	while (open.length > 0) ordered.push(open.pop()!);
+	if (ordered.length < done.instances.length) {
+		const reached = new Set(ordered);
+		ordered.unshift(...done.instances.filter((instance) => !reached.has(instance)).reverse());
+	}
+	const previous = setOwner(done.scope);
+	let failed = false;
+	let first: unknown;
+	try {
+		for (const instance of ordered) {
+			for (const fn of instance.destroys ?? []) {
+				try {
+					fn();
+				} catch (error) {
+					if (!failed) first = error;
+					failed = true;
+				}
+			}
+		}
+	} finally {
+		setOwner(previous);
+	}
+	if (failed) throw first;
+}
+
+export function storeOf(effect: Effect | null): Data | null {
+	for (let at = effect; at !== null; at = at.parent) {
+		const data = stores.get(at);
+		if (data !== undefined) return data;
+	}
+	return null;
+}
+
+export function openStore(data: Data): void {
+	const effect = ambient();
+	if (effect === null) {
+		throw failure(
+			'context_without_owner',
+			'Hydration data can only be opened where an owner exists'
+		);
+	}
+	stores.set(effect, data);
+}
+
+export function hydrationData(): Data | null {
+	return storeOf(ambient());
+}
+
+export function getAbortSignal(): AbortSignal {
+	const effect = ambient();
+	return effect === null ? new AbortController().signal : lifetime(effect);
+}
+
+function open(captured: Render | null, layer: Layer<Effect> | null, at: Output | null): Saved {
+	const previous: Saved = { render, owner, site };
+	render = captured;
+	site = at;
+	if (captured !== null) {
+		captured.scope.context = layer;
+		setOwner(captured.scope);
+	}
+	return previous;
+}
+
+function close(previous: Saved): void {
+	render = previous.render;
+	site = previous.site;
+	setOwner(previous.owner);
+}
+
+export type Resume = <T>(fn: () => T) => T;
+
+export function capture(): Resume {
+	const captured = render;
+	const layer = layerOf(captured?.scope ?? null);
+	const at = site;
+	return (fn) => {
+		const previous = open(captured, layer, at);
+		try {
+			return fn();
+		} finally {
+			close(previous);
+		}
+	};
+}
+
+interface Left {
+	readonly render: Render | null;
+	readonly layer: Layer<Effect> | null;
+	readonly site: Output | null;
+}
+
+export interface Segment {
+	replaced: Saved | null;
+	left: Left | null;
+}
+
+export function segment(): Segment {
+	return { replaced: null, left: null };
+}
+
+export function unsave(segment: Segment): void {
+	const replaced = segment.replaced;
+	if (replaced === null) return;
+	segment.replaced = null;
+	close(replaced);
+}
+
+export function leave<T>(value: T, segment: Segment): T {
+	segment.left = { render, layer: layerOf(render?.scope ?? null), site };
+	unsave(segment);
+	return value;
+}
+
+export function reenter(segment: Segment): void {
+	const left = segment.left;
+	if (left !== null && segment.replaced === null)
+		segment.replaced = open(left.render, left.layer, left.site);
+}
+
+type Step = ((...args: unknown[]) => unknown) | null | undefined;
+
+interface Steps {
+	readonly next: Step;
+	readonly return?: Step;
+}
+
+interface Iterated {
+	readonly [Symbol.asyncIterator]?: Step;
+	readonly [Symbol.iterator]?: Step;
+}
+
+function stepped(iterator: Steps, segment: Segment): Steps {
+	const step = (method: Step): Step =>
+		method == null
+			? undefined
+			: (...args) => {
+					reenter(segment);
+					try {
+						return method.apply(iterator, args);
+					} finally {
+						unsave(segment);
+					}
+				};
+	return { next: step(iterator.next), return: step(iterator.return) };
+}
+
+export function acquire(iterable: unknown, segment: Segment): object {
+	const source = iterable as Iterated;
+	const method = source?.[Symbol.asyncIterator];
+	if (method != null) {
+		const iterator = stepped(method.call(source) as Steps, segment);
+		return { [Symbol.asyncIterator]: () => iterator };
+	}
+	const iterator = stepped((source[Symbol.iterator] as Step)!.call(source) as Steps, segment);
+	return { [Symbol.iterator]: () => iterator };
+}
+
+export async function save<T>(value: T | PromiseLike<T>, segment: Segment): Promise<() => T> {
+	const captured = render;
+	const layer = layerOf(captured?.scope ?? null);
+	const at = site;
+	unsave(segment);
+	const resolved = await value;
+	return () => {
+		segment.replaced = open(captured, layer, at);
+		if (layer !== null) resumed.add(layer);
+		return resolved;
+	};
+}
+
+export function isRendering(): boolean {
+	return render !== null;
+}
+
+export type Phase = 'initializing' | 'running' | null;
+
+export function phase(): Phase {
+	const layer = standing();
+	if (layer === null) return null;
+	return resumed.has(layer) ? 'running' : 'initializing';
+}

package/src/runtime/server/derived.ts

@@ -0,0 +1,37 @@
+import { isRendering } from './context.ts';
+
+export type Derived<T> = (value?: T) => T;
+
+export function derived<T>(fn: () => T): Derived<T> {
+	const memoize = isRendering();
+	let computed = false;
+	let value = undefined as T;
+	let override: T | undefined;
+	return function (next?: T): T {
+		if (arguments.length > 0) {
+			override = next;
+			return next as T;
+		}
+		if (override != null) return override;
+		if (!memoize || !computed) {
+			value = fn();
+			computed = true;
+		}
+		return value;
+	};
+}
+
+export function updateDerived<T extends number | bigint>(
+	target: Derived<T>,
+	delta: 1 | -1 = 1,
+	prefix = false
+): number | bigint {
+	let value = target();
+	const previous = delta === 1 ? value++ : value--;
+	target(value);
+	return prefix ? value : previous;
+}
+
+export function held<T>(value: T): Derived<T> {
+	return derived(() => value);
+}

package/src/runtime/server/external.ts

@@ -0,0 +1,59 @@
+import {
+	Connection,
+	type Connected,
+	type Subscribable,
+	type WritableSource
+} from '../../shared/external.ts';
+import { onDestroy } from '../reactivity/owners.ts';
+import { ambient } from '../reactivity/carried.ts';
+import { untrack } from '../reactivity/tracking.ts';
+import { track, type Dependency } from './cells.ts';
+
+export function external<T>(
+	read: () => Subscribable<T> | null | undefined,
+	name = 'source'
+): Connected<T> {
+	let last: T | undefined;
+	const emitted = {
+		version: 0,
+		settle(): void {
+			connection.select(read(), name, true);
+			if (emitted.version > 0 && Object.is(connection.value, last)) return;
+			last = connection.value;
+			emitted.version++;
+		}
+	} satisfies Dependency;
+	const connection = new Connection<T>(() => emitted.version++);
+	if (ambient() !== null) onDestroy(() => connection.dispose());
+	const current = (): T => {
+		emitted.settle();
+		track(emitted);
+		return connection.value;
+	};
+	const set = (value: T): void => (read() as WritableSource<T>).set(value);
+	return {
+		get current() {
+			return current();
+		},
+		set current(value: T) {
+			set(value);
+		},
+		get peek() {
+			return untrack(() => {
+				emitted.settle();
+				return connection.value;
+			});
+		},
+		mutate(result) {
+			set(untrack(current));
+			return result;
+		},
+		refresh(result) {
+			connection.refresh(read());
+			return result;
+		},
+		dispose() {
+			connection.dispose();
+		}
+	};
+}

package/src/runtime/server/hydration.ts

@@ -0,0 +1,238 @@
+import { DEV } from 'esm-env';
+import { uneval } from 'devalue';
+import { failure, warn } from '../../shared/diagnostics.ts';
+import { escapeAttribute } from '../../shared/escape.ts';
+import type { Format } from '../../shared/format.ts';
+import { getOwner } from '../reactivity/owners.ts';
+import { hydrationData, openStore } from './context.ts';
+
+export interface Csp {
+	readonly nonce?: string;
+	readonly hash?: boolean;
+}
+
+export interface Script {
+	readonly html: string;
+	readonly hash: string | null;
+}
+
+interface Slot {
+	pending: boolean;
+	encoded: string;
+	ready: Promise<void>;
+}
+
+const placeholder = /\/\*<p(\d+)>\*\/0/g;
+
+class Entry {
+	readonly value: unknown;
+	readonly #key: string;
+	readonly #slots: Slot[] = [];
+	readonly #indices = new WeakMap<object, number>();
+	readonly #encoded: string;
+	#ready: Promise<void> | null = null;
+	readonly #serialized = new Map<string, Promise<string>>();
+
+	constructor(key: string, value: unknown) {
+		this.value = value;
+		this.#key = key;
+		this.#encoded = this.#encode(value);
+	}
+
+	get asynchronous(): boolean {
+		return this.#slots.length > 0;
+	}
+
+	get unresolved(): boolean {
+		return this.#slots.some((slot) => slot.pending);
+	}
+
+	#error(error: unknown): Error {
+		return failure(
+			'hydratable_serialization_failed',
+			`Failed to serialize hydratable key ${JSON.stringify(this.#key)}: ${String(error)}`
+		);
+	}
+
+	#encode(value: unknown): string {
+		try {
+			return uneval(value, (candidate) => {
+				if (Object.prototype.toString.call(candidate) !== '[object Promise]') return;
+				let index = this.#indices.get(candidate);
+				if (index === undefined) {
+					index = this.#slots.length;
+					this.#indices.set(candidate, index);
+					const slot: Slot = { pending: true, encoded: '', ready: Promise.resolve() };
+					this.#slots.push(slot);
+					slot.ready = Promise.resolve(candidate).then(
+						(resolved) => {
+							slot.pending = false;
+							slot.encoded = this.#encode(resolved);
+						},
+						(error: unknown) => {
+							slot.pending = false;
+							throw this.#error(error);
+						}
+					);
+					slot.ready.catch(() => {});
+				}
+				return `/*<p${index}>*/0`;
+			});
+		} catch (error) {
+			throw this.#error(error);
+		}
+	}
+
+	#expand(
+		source: string,
+		resolver: string,
+		cache: Map<number, string>,
+		visiting: Set<number>
+	): string {
+		return source.replace(placeholder, (_, index: string) => {
+			const id = Number(index);
+			let encoded = cache.get(id);
+			if (encoded !== undefined) return encoded;
+			if (visiting.has(id)) throw this.#error('A promise resolves to a graph containing itself');
+			visiting.add(id);
+			encoded = `${resolver}(${this.#expand(this.#slots[id]!.encoded, resolver, cache, visiting)})`;
+			visiting.delete(id);
+			cache.set(id, encoded);
+			return encoded;
+		});
+	}
+
+	#prepare(): Promise<void> {
+		return (this.#ready ??= (async () => {
+			for (let index = 0; index < this.#slots.length; index++) await this.#slots[index]!.ready;
+		})());
+	}
+
+	async identifiers(): Promise<Set<string>> {
+		await this.#prepare();
+		const names = new Set<string>();
+		for (const source of [this.#encoded, ...this.#slots.map((slot) => slot.encoded)]) {
+			for (const name of source.match(/[$A-Z_a-z][$\w]*/g) ?? []) names.add(name);
+		}
+		return names;
+	}
+
+	serialize(resolver: string): Promise<string> {
+		let serialized = this.#serialized.get(resolver);
+		if (serialized === undefined) {
+			serialized = this.#prepare().then(() =>
+				this.#expand(this.#encoded, resolver, new Map(), new Set())
+			);
+			this.#serialized.set(resolver, serialized);
+		}
+		return serialized;
+	}
+}
+
+export class Data {
+	readonly #entries = new Map<string, Entry>();
+	readonly #comparisons: [Entry, Entry][] = [];
+	readonly #beforeSnapshot?: () => void;
+
+	constructor(beforeSnapshot?: () => void) {
+		this.#beforeSnapshot = beforeSnapshot;
+	}
+
+	get needsSnapshot(): boolean {
+		return this.size > 0 || this.#beforeSnapshot !== undefined;
+	}
+
+	get size(): number {
+		return this.#entries.size;
+	}
+
+	read<T>(key: string, fn: () => T): T {
+		const existing = this.#entries.get(key);
+		if (existing !== undefined) {
+			if (DEV) this.#comparisons.push([existing, new Entry(key, fn())]);
+			return existing.value as T;
+		}
+		const value = fn();
+		this.#entries.set(key, new Entry(key, value));
+		return value;
+	}
+
+	async script(format: Format, csp: Csp | undefined): Promise<Script> {
+		this.#beforeSnapshot?.();
+		if (this.size === 0) return { html: '', hash: null };
+		if (DEV)
+			for (const [key, entry] of this.#entries) {
+				if (entry.unresolved)
+					warn(
+						'unresolved_hydratable',
+						`A \`hydratable\` value with key \`${key}\` was created, but at least part of it was not used during the render.`
+					);
+			}
+		const names = new Set<string>();
+		const values = new Set([...this.#entries.values(), ...this.#comparisons.flat()]);
+		for (const entry of values) for (const name of await entry.identifiers()) names.add(name);
+		let resolver = 'r';
+		while (names.has(resolver)) resolver += '_';
+		for (const [first, next] of this.#comparisons) {
+			if ((await first.serialize(resolver)) !== (await next.serialize(resolver))) {
+				throw failure(
+					'hydratable_clobbering',
+					'A hydratable key was read with different values in the same render'
+				);
+			}
+		}
+		const entries: string[] = [];
+		let promises = false;
+		for (const [key, entry] of this.#entries) {
+			entries.push(`[${uneval(key)},${await entry.serialize(resolver)}]`);
+			promises ||= entry.asynchronous;
+		}
+		const global = /^[$A-Z_a-z][$\w]*$/.test(format.global)
+			? `window.${format.global}`
+			: `window[${uneval(format.global)}]`;
+		let prelude = `const h = (${global} ??= {}).h ??= new Map();`;
+		if (promises) prelude = `const ${resolver} = (v) => Promise.resolve(v);\n\t\t\t\t${prelude}`;
+		const body = `
+			{
+				${prelude}
+
+				for (const [k, v] of [
+					${entries.join(',\n\t\t\t\t\t')}
+				]) {
+					h.set(k, v);
+				}
+			}
+		`;
+		let hash: string | null = null;
+		if (csp?.hash) {
+			const bytes = new Uint8Array(
+				await crypto.subtle.digest('SHA-256', new TextEncoder().encode(body))
+			);
+			hash = `sha256-${btoa(String.fromCharCode(...bytes))}`;
+		}
+		const nonce = csp?.nonce ? ` nonce="${escapeAttribute(csp.nonce)}"` : '';
+		return { html: `\n\t\t<script${nonce}>${body}</script>`, hash };
+	}
+}
+
+export function hydratable<T>(key: string, fn: () => T): T {
+	const data = hydrationData();
+	return data === null ? fn() : data.read(key, fn);
+}
+
+export function hydrated<T>(key: string, fn: () => T): T {
+	return hydratable(key, fn);
+}
+
+export interface HydrationOptions {
+	readonly format?: Format;
+	readonly target?: ParentNode;
+	readonly beforeSnapshot?: () => void;
+}
+
+export function openHydration(options: HydrationOptions = {}): () => void {
+	const owner = getOwner();
+	const publish = options.beforeSnapshot;
+	openStore(new Data(owner && publish ? () => owner.run(publish) : undefined));
+	return () => {};
+}

package/src/runtime/server/placement.ts

@@ -0,0 +1,47 @@
+import { invalidIn, invalidUnder } from '../../shared/nesting.ts';
+import type { Output } from './render.ts';
+
+export interface Placed {
+	readonly tag: string;
+	readonly parent: Placed | null;
+	readonly at: string;
+}
+
+const reported = new WeakMap<object, Set<string>>();
+
+function report(out: Output, message: string): void {
+	const text = `node_invalid_placement_ssr: ${message}\n\nThis can cause content to shift around as the browser repairs the HTML, and will likely result in a \`hydration_mismatch\` warning.`;
+	let seen = reported.get(out.global);
+	if (seen === undefined) reported.set(out.global, (seen = new Set()));
+	if (seen.has(text)) return;
+	seen.add(text);
+	console.error(text);
+	const script = JSON.stringify(text).replaceAll('</', '<\\u002f');
+	out.head((head) => head.push(`<script>console.error(${script})</script>`));
+}
+
+export function pushElement(
+	out: Output,
+	tag: string,
+	file: string,
+	line: number,
+	column: number
+): void {
+	const parent = out.element;
+	const at = `${file}:${line}:${column}`;
+	if (parent !== null) {
+		const message = invalidIn(tag, parent.tag, at, parent.at);
+		if (message !== null) report(out, message);
+		const ancestors = [parent.tag];
+		for (let ancestor = parent.parent; ancestor !== null; ancestor = ancestor.parent) {
+			ancestors.push(ancestor.tag);
+			const found = invalidUnder(tag, ancestors, at, ancestor.at);
+			if (found !== null) report(out, found);
+		}
+	}
+	out.element = { tag, parent, at };
+}
+
+export function popElement(out: Output): void {
+	out.element = out.element?.parent ?? null;
+}