vigla 0.0.0 → 0.2.0

package/src/runtime/reactivity/units.ts

@@ -0,0 +1,103 @@
+import { current, open, pending, processing } from './batch.ts';
+import { ambient } from './carried.ts';
+import { application, type Effect } from './graph.ts';
+import { owner } from './tracking.ts';
+
+let outstanding = 0;
+const watchers = new Set<() => void>();
+const speculative = new WeakSet<() => void>();
+let drains: (() => void)[] = [];
+let waiting: (() => void)[] = [];
+
+export function unsettled(): boolean {
+	return outstanding > 0;
+}
+
+export function begin(): void {
+	outstanding++;
+}
+
+export function exempt(settle: () => void): void {
+	speculative.add(settle);
+}
+
+export function released(): void {
+	if (--outstanding === 0) {
+		quieted();
+		const resolved = drains;
+		drains = [];
+		for (const done of resolved) done();
+	}
+	recheck();
+}
+
+export function recheck(): void {
+	if (watchers.size === 0) return;
+	for (const check of [...watchers]) check();
+}
+
+function busy(effect: Effect): boolean {
+	if (effect.destroyed) return false;
+	for (const settle of effect.units ?? []) if (!speculative.has(settle)) return true;
+	for (let child = effect.first; child !== null; child = child.next) if (busy(child)) return true;
+	return false;
+}
+
+export function unit(holder: Effect | null): () => void {
+	outstanding++;
+	let open = true;
+	const settle = (): void => {
+		if (!open) return;
+		open = false;
+		holder?.units?.delete(settle);
+		released();
+	};
+	if (holder !== null && !holder.destroyed) (holder.units ??= new Set()).add(settle);
+	return settle;
+}
+
+export function drained(): Promise<void> {
+	const effect = ambient();
+	if (effect !== null) return settledUnder(application(effect));
+	return new Promise((done) => {
+		if (outstanding === 0) queueMicrotask(done);
+		else drains.push(done);
+	});
+}
+
+export function settledUnder(effect: Effect): Promise<void> {
+	return new Promise((done) => {
+		let confirming = false;
+		const check = (): void => {
+			if (confirming || busy(effect)) return;
+			confirming = true;
+			queueMicrotask(() => {
+				confirming = false;
+				if (busy(effect)) return;
+				watchers.delete(check);
+				done();
+			});
+		};
+		watchers.add(check);
+		check();
+	});
+}
+
+function idle(): boolean {
+	if (open !== null || processing !== null) return false;
+	for (const batch of pending) if (!batch.fork) return false;
+	return true;
+}
+
+export function quieted(): void {
+	if (!idle() || waiting.length === 0 || unsettled()) return;
+	const resolved = waiting;
+	waiting = [];
+	for (const done of resolved) done();
+}
+
+export function settled(): Promise<void> {
+	current();
+	if (owner !== null) return settledUnder(application(owner));
+	return new Promise((done) => waiting.push(done));
+}

package/src/runtime/reactivity/views.ts

@@ -0,0 +1,114 @@
+import {
+	active,
+	alias,
+	live,
+	open,
+	pending,
+	processing,
+	setActive,
+	within,
+	type Batch
+} from './batch.ts';
+import { equal, isDerived, type Source } from './graph.ts';
+import { beforeOf } from './history.ts';
+import {
+	endReading,
+	owner,
+	resumeReading,
+	setOwner,
+	setView,
+	suspendReading,
+	type View
+} from './tracking.ts';
+
+export function others(batch: Batch): boolean {
+	if (batch.after !== null || batch.fork || (open !== null && open !== batch)) return true;
+	for (const other of pending) if (other !== batch) return true;
+	return false;
+}
+
+export function materialize(batch: Batch): Map<Source, unknown> {
+	const after = new Map<Source, unknown>();
+	const origins = (batch.origins ??= new Map());
+	for (const source of beforeOf(batch).keys()) {
+		after.set(source, source.v);
+		if (!origins.has(source)) origins.set(source, { order: batch.order, version: source.wv });
+	}
+	return after;
+}
+
+export function intersects(a: Batch, b: Batch): boolean {
+	const first = beforeOf(a);
+	const second = beforeOf(b);
+	const [small, large] = first.size < second.size ? [first, second] : [second, first];
+	for (const source of small.keys()) if (large.has(source)) return true;
+	return false;
+}
+
+export function inherits(batch: Batch, other: Batch): boolean {
+	return !other.fork && !other.done && other.order < batch.order && intersects(other, batch);
+}
+
+export function viewOf(batch: Batch): View {
+	const given: View = {
+		batch,
+		values: new Map(),
+		hidden: new Map(),
+		checked: new Map(),
+		reached: new Map()
+	};
+	const own = (batch.after ??= materialize(batch));
+	const hide = (other: Batch): void => {
+		if (other === batch || other.done) return;
+		if (other.fork) {
+			for (const source of other.after?.keys() ?? []) {
+				if ((own !== null && own.has(source)) || given.values.has(source)) continue;
+				given.values.set(source, source.v);
+				given.hidden.set(source, other);
+			}
+			return;
+		}
+		if (inherits(batch, other)) return;
+		for (const [source, value] of beforeOf(other)) {
+			if ((own !== null && own.has(source)) || given.values.has(source)) continue;
+			given.values.set(source, value);
+			given.hidden.set(source, other);
+		}
+	};
+	for (const other of pending) hide(other);
+	if (open !== null) hide(open);
+	if (own !== null)
+		for (const [source, value] of own)
+			if (isDerived(source) || !equal(source, source.v, value)) given.values.set(source, value);
+	return given;
+}
+
+export function inside<T>(batch: Batch, fn: () => T): T {
+	const previous = setView(viewOf(batch));
+	try {
+		return within(batch, fn);
+	} finally {
+		setView(previous);
+	}
+}
+
+export function suspend(): () => void {
+	const effect = owner;
+	const batch = active ?? processing ?? open;
+	const reaction = suspendReading();
+	return () => {
+		setOwner(effect);
+		const next = live(batch);
+		setActive(next);
+		if (processing === null) setView(next !== null && others(next) ? viewOf(next) : null);
+		resumeReading(reaction, batch !== null && alias(batch).discarded);
+	};
+}
+
+export function resumed(): void {
+	endReading();
+	if (processing !== null) return;
+	setOwner(null);
+	setActive(null);
+	setView(null);
+}

package/src/runtime/server/attributes.ts

@@ -0,0 +1,80 @@
+import { DEV } from 'esm-env';
+import { clsx, toClass, toStyle, type StyleDirectives } from '../../shared/attributes.ts';
+import { escapeAttribute } from '../../shared/escape.ts';
+import { hash } from '../../shared/hash.ts';
+import { empty } from '../../shared/markers.ts';
+import { isBooleanAttribute } from '../../shared/html.ts';
+
+const invalidName =
+	/[\s'">/=\u{FDD0}-\u{FDEF}\u{FFFE}\u{FFFF}\u{1FFFE}\u{1FFFF}\u{2FFFE}\u{2FFFF}\u{3FFFE}\u{3FFFF}\u{4FFFE}\u{4FFFF}\u{5FFFE}\u{5FFFF}\u{6FFFE}\u{6FFFF}\u{7FFFE}\u{7FFFF}\u{8FFFE}\u{8FFFF}\u{9FFFE}\u{9FFFF}\u{AFFFE}\u{AFFFF}\u{BFFFE}\u{BFFFF}\u{CFFFE}\u{CFFFF}\u{DFFFE}\u{DFFFF}\u{EFFFE}\u{EFFFF}\u{FFFFE}\u{FFFFF}\u{10FFFE}\u{10FFFF}]/u;
+
+export function attr(name: string, value: unknown, boolean = false): string {
+	const flag = boolean || (name === 'hidden' && value !== 'until-found');
+	if (value == null || (flag && !value && value !== '')) return '';
+	let shown = value;
+	if (name === 'translate' && typeof value === 'boolean') shown = value ? 'yes' : 'no';
+	return flag ? ` ${name}=""` : ` ${name}="${escapeAttribute(shown)}"`;
+}
+
+export function attrClass(
+	value: unknown,
+	hash?: string | null,
+	directives?: Readonly<Record<string, unknown>> | null
+): string {
+	const result = toClass(value, hash, directives);
+	return result ? ` class="${escapeAttribute(result)}"` : '';
+}
+
+export function attrStyle(value: unknown, directives?: StyleDirectives | null): string {
+	const result = toStyle(value, directives);
+	return result ? ` style="${escapeAttribute(result)}"` : '';
+}
+
+const NAMESPACED = 1;
+const PRESERVE_CASE = 2;
+const INPUT = 4;
+
+export function attributes(
+	given: Record<string, unknown>,
+	hash?: string | null,
+	classes?: Readonly<Record<string, unknown>> | null,
+	styles?: StyleDirectives | null,
+	flags = 0
+): string {
+	const all = given;
+	if (styles) all.style = toStyle(all.style, styles);
+	if (all.class) all.class = clsx(all.class);
+	if (hash || classes) all.class = toClass(all.class, hash, classes);
+	const html = (flags & NAMESPACED) === 0;
+	const lowercase = (flags & PRESERVE_CASE) === 0;
+	const input = (flags & INPUT) !== 0;
+	const names = Object.keys(all);
+	let result = '';
+	outer: for (const key of names) {
+		const value = all[key];
+		if (typeof value === 'function') continue;
+		if (key.startsWith('$$')) continue;
+		if (key === '' || invalidName.test(key)) continue;
+		const lower = key.toLowerCase();
+		let name = lowercase ? lower : key;
+		if (lower.length > 2 && lower.startsWith('on')) continue;
+		if (input && (name === 'defaultvalue' || name === 'defaultchecked')) {
+			name = name === 'defaultvalue' ? 'value' : 'checked';
+			if (name in all) continue;
+			for (const other of names) if (other.toLowerCase() === name) continue outer;
+		}
+		result += attr(name, value, html && isBooleanAttribute(name));
+	}
+	return result;
+}
+
+export function html(value: unknown): string {
+	return value == null ? '' : String(value);
+}
+
+export function rawHtml(value: unknown): string {
+	const content = html(value);
+	return `${DEV ? `<!--${hash(content)}-->` : empty}${content}${empty}`;
+}
+
+export { clsx };

package/src/runtime/server/cells.ts

@@ -0,0 +1,135 @@
+import type { Layer } from '../../shared/context.ts';
+import { fail } from '../reactivity/effects.ts';
+import { ambient } from '../reactivity/carried.ts';
+import type { Effect, Failure } from '../reactivity/graph.ts';
+import type { Cell } from '../reactivity/sources.ts';
+import { collect, collected } from '../reactivity/collector.ts';
+import { owner, setOwner, untrack, withoutReaction } from '../reactivity/tracking.ts';
+import { layerOf } from '../reactivity/owners.ts';
+
+export interface Dependency {
+	readonly version: number;
+	settle(): void;
+}
+
+interface Read {
+	readonly from: Dependency;
+	readonly version: number;
+}
+
+export function track(from: Dependency): void {
+	(collected() as Read[] | null)?.push({ from, version: from.version });
+}
+
+function unchanged(recorded: readonly Read[]): boolean {
+	return untrack(() => {
+		for (const read of recorded) {
+			read.from.settle();
+			if (read.from.version !== read.version) return false;
+		}
+		return true;
+	});
+}
+
+class Value<T> implements Cell<T>, Dependency {
+	version = 0;
+	#value: T;
+
+	constructor(value: T) {
+		this.#value = value;
+	}
+
+	get current(): T {
+		track(this);
+		return this.#value;
+	}
+
+	set current(next: T) {
+		if (Object.is(next, this.#value)) return;
+		this.#value = next;
+		this.version++;
+	}
+
+	settle(): void {}
+}
+
+class Memo<T> implements Cell<T>, Dependency {
+	version = 0;
+	readonly #fn: () => T;
+	readonly #equals: (before: T, after: T) => boolean;
+	readonly #scope: Effect | null = ambient();
+	readonly #layer: Layer<Effect> | null = layerOf(this.#scope);
+	#reads: Read[] | null = null;
+	#assigned = false;
+	#failure: Failure | null = null;
+	#value = undefined as T;
+
+	constructor(fn: () => T, equals: (before: T, after: T) => boolean = Object.is) {
+		this.#fn = fn;
+		this.#equals = equals;
+	}
+
+	get current(): T {
+		try {
+			this.settle();
+		} finally {
+			track(this);
+		}
+		if (this.#failure !== null) throw this.#failure.error;
+		return this.#value;
+	}
+
+	set current(next: T) {
+		this.settle();
+		this.#assigned = true;
+		const failed = this.#failure !== null;
+		this.#failure = null;
+		this.#publish(next, failed);
+	}
+
+	settle(): void {
+		const kept = this.#scope !== null || this.#assigned;
+		if (kept && this.#reads !== null && unchanged(this.#reads)) return;
+		const fresh = this.#reads === null || this.#failure !== null;
+		this.#assigned = false;
+		this.#failure = null;
+		const next = this.#evaluate();
+		if (this.#failure === null) this.#publish(next, fresh);
+	}
+
+	#publish(next: T, fresh: boolean): void {
+		if (!fresh && this.#equals(this.#value, next)) return;
+		this.#value = next;
+		this.version++;
+	}
+
+	#evaluate(): T {
+		const scope = this.#scope;
+		const previous = setOwner(scope ?? owner);
+		const active = scope?.context;
+		if (scope !== null) scope.context = this.#layer;
+		const recorded: Read[] = [];
+		try {
+			return withoutReaction(() => collect(recorded, this.#fn));
+		} catch (error) {
+			this.#failure = { error };
+			this.#value = undefined as T;
+			this.version++;
+			if (scope === null) throw error;
+			if (!scope.destroyed) fail(scope, error);
+			return undefined as T;
+		} finally {
+			this.#reads = recorded;
+			if (scope !== null) scope.context = active;
+			setOwner(previous);
+		}
+	}
+}
+
+export function cell<T>(value: T): Cell<T> {
+	return new Value(value);
+}
+
+export function memo<T>(fn: () => T, equals?: (before: T, after: T) => boolean): Cell<T> {
+	return new Memo(fn, equals);
+}