vigla 0.0.0 → 0.2.0

package/src/runtime/dom/mount.ts

@@ -0,0 +1,190 @@
+import { failure, isFailure, warn } from '../../shared/diagnostics.ts';
+import { format as nativeFormat, type Format } from '../../shared/format.ts';
+import { OPEN } from '../../shared/markers.ts';
+import { destroy, detach, detached } from '../reactivity/effects.ts';
+import { setFront } from '../reactivity/front.ts';
+import type { Effect } from '../reactivity/graph.ts';
+import { owner } from '../reactivity/tracking.ts';
+import { introducing, pause } from '../transitions/manager.ts';
+import { boundary, transformAt } from './boundary.ts';
+import { delegateRoot } from './events.ts';
+import {
+	claim,
+	COMMENT,
+	cursor,
+	hydrating,
+	isClose,
+	MISMATCH,
+	mismatch,
+	setHydrating
+} from './hydration.ts';
+import { withContext } from './context.ts';
+import { entry, mountRoot } from './props.ts';
+import { withHydration } from './data.ts';
+import { build, remove, type Built } from './range.ts';
+
+export type Props = Record<string, unknown>;
+
+export type Exports = Record<string, unknown>;
+
+export type Component<P extends Props = Props, E extends Exports = Exports> = (
+	anchor: ChildNode,
+	props: P
+) => E | void;
+
+export interface MountOptions<P extends Props> {
+	readonly target: ParentNode;
+	readonly format?: Format;
+	readonly props?: P;
+	readonly anchor?: ChildNode | null;
+	readonly intro?: boolean;
+	readonly context?: Map<unknown, unknown>;
+	readonly transformError?: (error: unknown) => unknown;
+}
+
+export interface HydrateOptions<P extends Props> extends MountOptions<P> {
+	readonly recover?: boolean;
+}
+
+interface Mounted {
+	readonly effect: Effect;
+	readonly dispose: () => void;
+}
+
+export interface UnmountOptions {
+	readonly outro?: boolean;
+}
+
+const mounted = new WeakMap<object, Mounted>();
+
+function start<P extends Props, E extends Exports>(
+	component: Component<P, E>,
+	options: MountOptions<P>,
+	open: ChildNode | null = null
+): { instance: E; built: Built } {
+	let exports: E | void = undefined;
+	const props = options.props ?? ({} as P);
+	entry(props);
+	const parent = owner;
+	const create = (fn: () => void): Effect =>
+		detached(() => {
+			mountRoot(owner as Effect);
+			setFront(owner as Effect, options.format ?? nativeFormat);
+			fn();
+		}, parent);
+	const built = introducing(options.intro ?? true, () =>
+		build((anchor) => {
+			if (owner !== null) transformAt(owner, options.transformError);
+			const node = open ?? document.createTextNode('');
+			if (open === null) anchor.before(node);
+			boundary(
+				node,
+				{ pending: () => {} },
+				(anchor) => {
+					exports = withHydration(options.format ?? nativeFormat, options.target, () =>
+						withContext(options.context, () => component(anchor, props))
+					);
+					if (hydrating && !isClose(cursor)) mismatch();
+				},
+				options.transformError
+			);
+		}, create)
+	);
+	return {
+		instance: (exports ?? {}) as E,
+		built: open === null ? built : { ...built, first: open, last: cursor }
+	};
+}
+
+function finish(instance: object, built: Built, target: ParentNode): void {
+	if (built.effect.destroyed) {
+		remove(built);
+		return;
+	}
+	const release = delegateRoot(target);
+	let disposed = false;
+	const dispose = (): void => {
+		if (disposed) return;
+		disposed = true;
+		mounted.delete(instance);
+		release();
+		remove(built);
+	};
+	mounted.set(instance, { effect: built.effect, dispose });
+	detach(built.effect, dispose);
+}
+
+export function mount<P extends Props, E extends Exports>(
+	component: Component<P, E>,
+	options: MountOptions<P>
+): E {
+	const { instance, built } = start(component, options);
+	if (!built.effect.destroyed) {
+		options.target.insertBefore(built.fragment as DocumentFragment, options.anchor ?? null);
+		built.fragment = null;
+	}
+	finish(instance, built, options.target);
+	return instance;
+}
+
+function opening(target: ParentNode): ChildNode | null {
+	let node = target.firstChild;
+	while (node !== null && (node.nodeType !== COMMENT || (node as Comment).data !== OPEN)) {
+		node = node.nextSibling;
+	}
+	return node;
+}
+
+export function hydrate<P extends Props, E extends Exports>(
+	component: Component<P, E>,
+	options: HydrateOptions<P>
+): E {
+	const target = options.target;
+	const previous = hydrating ? cursor : null;
+	const was = setHydrating(true);
+	let adopted: Built | null = null;
+	try {
+		const open = opening(target);
+		if (open === null) throw MISMATCH;
+		claim(open.nextSibling);
+		const { instance, built } = start(component, options, open);
+		adopted = built;
+		if (!isClose(cursor)) mismatch();
+		finish(instance, built, target);
+		return instance;
+	} catch (error) {
+		if (adopted !== null) destroy(adopted.effect);
+		if (isFailure(error)) throw error;
+		if (error !== MISMATCH) console.warn('Failed to hydrate: ', error);
+		if (options.recover === false) {
+			throw failure('hydration_failed', 'Failed to hydrate the application');
+		}
+		setHydrating(false);
+		(target as Element).textContent = '';
+		return mount(component, options);
+	} finally {
+		setHydrating(was);
+		if (previous !== null) claim(previous);
+	}
+}
+
+export function unmount(instance: object, options?: UnmountOptions): Promise<void> {
+	const found = mounted.get(instance);
+	if (found === undefined) {
+		warn('lifecycle_double_unmount', 'Tried to unmount a component that was not mounted');
+		return Promise.resolve();
+	}
+	const { effect, dispose } = found;
+	if (options?.outro !== true) {
+		destroy(effect);
+		return Promise.resolve();
+	}
+	mounted.delete(instance);
+	return new Promise((resolve) => {
+		detach(effect, () => {
+			dispose();
+			resolve();
+		});
+		pause(effect, () => destroy(effect));
+	});
+}

package/src/runtime/dom/ownership.ts

@@ -0,0 +1,45 @@
+import { DEV } from 'esm-env';
+import { warn } from '../../shared/diagnostics.ts';
+import { original } from '../reactivity/proxy.ts';
+import { callerFile, componentFile } from './meta.ts';
+import { boundProp } from './props.ts';
+
+export interface Ownership {
+	mutation<T>(
+		prop: string,
+		path: readonly PropertyKey[],
+		result: T,
+		line: number,
+		column: number
+	): T;
+	binding(key: string, component: object, value: () => unknown): void;
+}
+
+export function ownership(props: Record<PropertyKey, unknown>, file: string): Ownership {
+	const parent = callerFile();
+	return {
+		mutation(prop, path, result, line, column) {
+			const name = path[0] as string;
+			if (!DEV || parent === null || boundProp(props, name)) return result;
+			let value: unknown = props;
+			for (let index = 0; index < path.length - 1; index++) {
+				value = (value as Record<PropertyKey, unknown>)[path[index] as PropertyKey];
+				if (original(value) === value) return result;
+			}
+			warn(
+				'ownership_invalid_mutation',
+				`Mutating unbound props (\`${name}\`, at ${file}:${line}:${column}) is strongly discouraged. Consider using \`bind:${prop}={...}\` in ${parent} (or using a callback) instead`
+			);
+			return result;
+		},
+		binding(key, component, value) {
+			if (!DEV || parent === null || boundProp(props, key)) return;
+			const current = value();
+			if (original(current) === current) return;
+			warn(
+				'ownership_invalid_binding',
+				`${file} passed property \`${key}\` to ${componentFile(component)} with \`bind:\`, but its parent component ${parent} did not declare \`${key}\` as a binding. Consider creating a binding between ${parent} and ${file} (e.g. \`bind:${key}={...}\` instead of \`${key}={...}\`)`
+			);
+		}
+	};
+}

package/src/runtime/dom/props.ts

@@ -0,0 +1,212 @@
+import { DEV } from 'esm-env';
+import { failure } from '../../shared/diagnostics.ts';
+import type { Effect } from '../reactivity/graph.ts';
+import { original, proxy } from '../reactivity/proxy.ts';
+import { derived, set } from '../reactivity/sources.ts';
+import { get } from '../reactivity/reads.ts';
+import { owner, untrack } from '../reactivity/tracking.ts';
+import { advance, COMMENT, cursor, hydrating } from './hydration.ts';
+
+export const BINDABLE = 1;
+
+export const LAZY = 2;
+
+export const UPDATED = 4;
+
+type Props = Record<PropertyKey, unknown>;
+
+const entries = new WeakSet<object>();
+const mutableGetters = new WeakSet<object>();
+const mutableAccessors = new WeakSet<object>();
+let mutableRead = false;
+
+export function captureMutable<T>(read: () => T): [T, boolean] {
+	const previous = mutableRead;
+	mutableRead = false;
+	try {
+		const value = read();
+		return [value, mutableRead];
+	} finally {
+		mutableRead = previous;
+	}
+}
+
+export function mutableProps<T extends object>(props: T, keys: readonly string[]): T {
+	for (const key of keys) {
+		const descriptor = Object.getOwnPropertyDescriptor(props, key);
+		const getter = descriptor?.get;
+		if (getter === undefined) continue;
+		if (!DEV) {
+			mutableGetters.add(getter);
+			continue;
+		}
+		const read = function (this: unknown): unknown {
+			mutableRead = true;
+			return getter.call(this);
+		};
+		mutableGetters.add(read);
+		Object.defineProperty(props, key, { ...descriptor, get: read });
+	}
+	return props;
+}
+
+export function forwardProps<T extends object, V>(props: T, key: string, accessor: Accessor<V>): T {
+	return mutableAccessors.has(accessor) ? mutableProps(props, [key]) : props;
+}
+
+function marked<T>(accessor: Accessor<T>, mutable: boolean): Accessor<T> {
+	if (!mutable) return accessor;
+	const result: Accessor<T> = DEV
+		? function (this: unknown, ...args: [value?: T, mutation?: boolean]): T {
+				mutableRead = true;
+				return accessor.apply(this, args);
+			}
+		: accessor;
+	mutableAccessors.add(result);
+	return result;
+}
+
+export function entry(props: object): void {
+	entries.add(props);
+}
+
+export function boundProp(props: Props, key: PropertyKey): boolean {
+	return (
+		Object.getOwnPropertyDescriptor(props, key)?.set !== undefined ||
+		!(key in props) ||
+		((entries.has(props) || original(props) !== props) && key in props)
+	);
+}
+
+export type Accessor<T> = (value?: T, mutation?: boolean) => T;
+
+export function mutateProp<T, R>(accessor: Accessor<T>, result: R): R {
+	accessor(undefined, true);
+	return result;
+}
+
+export function prop<T>(
+	props: Props,
+	key: string,
+	flags: number,
+	fallback?: T | (() => T)
+): Accessor<T> {
+	const bindable = (flags & BINDABLE) !== 0;
+	const lazy = (flags & LAZY) !== 0;
+	const computed = lazy ? derived(fallback as () => T) : null;
+	let fallbackValue = lazy ? undefined : (fallback as T | undefined);
+	const getFallback = (): T => (computed !== null ? get(computed) : (fallbackValue as T));
+	const descriptor = Object.getOwnPropertyDescriptor(props, key);
+	const mutable = descriptor?.get !== undefined && mutableGetters.has(descriptor.get);
+	let setter: ((value: T) => void) | undefined;
+	if (bindable) {
+		setter =
+			descriptor?.set ??
+			(entries.has(props) && key in props
+				? (value: T) => {
+						props[key] = value;
+					}
+				: undefined);
+	}
+	const initial = untrack(() => props[key]);
+	if (initial === undefined && fallback !== undefined && setter !== undefined) {
+		throw failure(
+			'props_invalid_value',
+			`Cannot do \`bind:${key}={undefined}\` when \`${key}\` has a fallback value`
+		);
+	}
+	const getter = (): T => {
+		const value = props[key] as T;
+		if (value === undefined) return getFallback();
+		if (!lazy) fallbackValue = fallback as T;
+		return value;
+	};
+	if ((flags & UPDATED) === 0) return marked(getter, mutable);
+	if (setter !== undefined) {
+		const write = setter;
+		return marked(function (this: unknown, value?: T, mutation = false): T {
+			if (arguments.length > 0) {
+				if (!mutation) write(value as T);
+				else if (mutable) write(getter());
+				return value as T;
+			}
+			return getter();
+		}, mutable);
+	}
+	const local = derived(getter);
+	if (bindable) get(local);
+	return marked(function (this: unknown, value?: T, mutation = false): T {
+		if (arguments.length > 0) {
+			if (mutation) return value as T;
+			const next = bindable ? proxy(value as T) : (value as T);
+			set(local, next);
+			if (fallbackValue !== undefined) fallbackValue = next;
+			return value as T;
+		}
+		return get(local);
+	}, mutable);
+}
+
+function step<T>(value: T, delta: number): T {
+	return (typeof value === 'bigint' ? value + BigInt(delta) : (value as number) + delta) as T;
+}
+
+export function updateProp<T>(accessor: Accessor<T>, delta = 1): T {
+	const value = accessor();
+	accessor(step(value, delta));
+	return value;
+}
+
+export function updatePropPre<T>(accessor: Accessor<T>, delta = 1): T {
+	return accessor(step(accessor(), delta));
+}
+
+export function rest(props: Props, excluded: readonly string[]): Props {
+	const hidden = new Set<PropertyKey>(excluded);
+	return new Proxy(props, {
+		get(target, key) {
+			return hidden.has(key) ? undefined : target[key];
+		},
+		set(target, key, value) {
+			if (hidden.has(key)) return false;
+			target[key] = value;
+			return true;
+		},
+		has(target, key) {
+			return !hidden.has(key) && key in target;
+		},
+		ownKeys(target) {
+			return Reflect.ownKeys(target).filter((key) => !hidden.has(key));
+		},
+		getOwnPropertyDescriptor(target, key) {
+			if (hidden.has(key)) return undefined;
+			const descriptor = Reflect.getOwnPropertyDescriptor(target, key);
+			if (descriptor !== undefined && 'value' in descriptor) {
+				return { ...descriptor, value: target[key] };
+			}
+			return descriptor;
+		}
+	});
+}
+
+const issued = new WeakMap<Effect, number>();
+const mounts = new WeakSet<Effect>();
+
+export function mountRoot(effect: Effect): void {
+	mounts.add(effect);
+}
+
+export function propsId(): string {
+	if (hydrating && cursor.nodeType === COMMENT) {
+		const data = (cursor as Comment).data;
+		if (data.charCodeAt(0) === 36) {
+			advance();
+			return data.slice(1);
+		}
+	}
+	let top = owner as Effect;
+	while (top.parent !== null && !mounts.has(top)) top = top.parent;
+	const next = (issued.get(top) ?? 0) + 1;
+	issued.set(top, next);
+	return `c${next}`;
+}

package/src/runtime/dom/range.ts

@@ -0,0 +1,132 @@
+import { branch, destroy } from '../reactivity/effects.ts';
+import type { Effect } from '../reactivity/graph.ts';
+import { isCustomTag } from '../../shared/html.ts';
+import { cursor, hydrating } from './hydration.ts';
+import type { Render } from './template.ts';
+
+export interface Built {
+	readonly effect: Effect;
+	readonly first: ChildNode;
+	readonly last: ChildNode;
+	fragment: DocumentFragment | null;
+}
+
+const positions = new WeakMap<Effect, ChildNode>();
+
+let slotting = false;
+
+const offscreen = new WeakMap<ParentNode, boolean>();
+
+function slots(at: ChildNode | null): boolean {
+	if (at === null) return false;
+	const parent = at.parentNode;
+	if (parent === null) return slotting;
+	if (parent.nodeType !== 1) return offscreen.get(parent) ?? slotting;
+	const element = parent as Element;
+	return isCustomTag(element.localName) || element.shadowRoot !== null;
+}
+
+export function opener(at: ChildNode | null): ChildNode {
+	return slots(at) ? document.createComment('') : document.createTextNode('');
+}
+
+export function position(effect: Effect | null): ChildNode | null {
+	for (let current = effect; current !== null; current = current.parent) {
+		const node = positions.get(current);
+		if (node !== undefined) return node;
+	}
+	return null;
+}
+
+function adopt(render: Render, create: (fn: () => void) => Effect): Built {
+	const start = cursor;
+	const parent = start.parentNode as ParentNode;
+	const before = start.previousSibling;
+	const effect = create(() => render(start));
+	const end = cursor;
+	const first = before === null ? parent.firstChild : before.nextSibling;
+	if (first === end) {
+		const marker = opener(end);
+		end.before(marker);
+		positions.set(effect, marker);
+		return { effect, first: marker, last: marker, fragment: null };
+	}
+	positions.set(effect, first as ChildNode);
+	return {
+		effect,
+		first: first as ChildNode,
+		last: end.previousSibling as ChildNode,
+		fragment: null
+	};
+}
+
+export function build(
+	render: Render,
+	create: (fn: () => void) => Effect = branch,
+	at: ChildNode | null = null
+): Built {
+	if (hydrating) return adopt(render, create);
+	const fragment = document.createDocumentFragment();
+	const slotted = slots(at);
+	const first = slotted ? document.createComment('') : document.createTextNode('');
+	const anchor = document.createTextNode('');
+	fragment.append(first, anchor);
+	offscreen.set(fragment, slotted);
+	const outer = slotting;
+	slotting = slotted;
+	let effect: Effect;
+	try {
+		effect = create(() => render(anchor));
+	} finally {
+		slotting = outer;
+	}
+	anchor.remove();
+	positions.set(effect, first);
+	return { effect, first, last: fragment.lastChild as ChildNode, fragment };
+}
+
+export function place(built: Built, before: ChildNode): void {
+	if (built.fragment !== null) {
+		before.before(built.fragment);
+		built.fragment = null;
+		return;
+	}
+	if (built.last.nextSibling === before) return;
+	let node: ChildNode = built.first;
+	for (;;) {
+		const next = node.nextSibling;
+		before.before(node);
+		if (node === built.last || next === null) return;
+		node = next;
+	}
+}
+
+export function stash(built: Built): void {
+	if (built.fragment !== null) return;
+	const fragment = document.createDocumentFragment();
+	offscreen.set(fragment, slots(built.first));
+	let node: ChildNode | null = built.first;
+	while (node !== null) {
+		const next: ChildNode | null = node.nextSibling;
+		fragment.append(node);
+		if (node === built.last) break;
+		node = next;
+	}
+	built.fragment = fragment;
+}
+
+export function remove(built: Built): void {
+	if (built.fragment !== null) return;
+	let node: ChildNode | null = built.first;
+	while (node !== null) {
+		const next: ChildNode | null = node.nextSibling;
+		node.remove();
+		if (node === built.last) break;
+		node = next;
+	}
+}
+
+export function discard(built: Built): void {
+	remove(built);
+	destroy(built.effect);
+}

package/src/runtime/dom/reset.ts

@@ -0,0 +1,39 @@
+import { namespaces } from '../../shared/html.ts';
+import { task } from '../reactivity/tasks.ts';
+import { unowned } from './events.ts';
+
+type Reset = () => void;
+
+const callbacks = new WeakMap<Element, Set<Reset>>();
+const documents = new WeakSet<Document>();
+
+function reset(event: Event): void {
+	const form = event.target as HTMLFormElement | null;
+	if (form?.namespaceURI !== namespaces.html || form.localName !== 'form') return;
+	task(() => {
+		if (event.defaultPrevented) return;
+		unowned(() => {
+			for (const element of form.elements) {
+				for (const callback of callbacks.get(element) ?? []) callback();
+			}
+		});
+	});
+}
+
+export function onReset(element: Element, fn: Reset): () => void {
+	let handlers = callbacks.get(element);
+	if (handlers === undefined) {
+		handlers = new Set();
+		callbacks.set(element, handlers);
+	}
+	const callback = (): void => fn();
+	handlers.add(callback);
+	const document = element.ownerDocument;
+	if (!documents.has(document)) {
+		documents.add(document);
+		document.addEventListener('reset', reset, { capture: true });
+	}
+	return () => {
+		if (handlers.delete(callback) && handlers.size === 0) callbacks.delete(element);
+	};
+}