vigla 0.0.0 → 0.2.0

package/src/runtime/dom/head.ts

@@ -0,0 +1,56 @@
+import { teardown } from '../reactivity/effects.ts';
+import { claim, COMMENT, cursor, hydrating, setHydrating } from './hydration.ts';
+import { build, discard, place, type Built } from './range.ts';
+import type { Render } from './template.ts';
+
+function marker(hash: string): ChildNode | null {
+	let node = document.head.firstChild;
+	while (node !== null && (node.nodeType !== COMMENT || (node as Comment).data !== hash)) {
+		node = node.nextSibling;
+	}
+	return node;
+}
+
+function adopted(open: ChildNode, render: Render): { built: Built; anchor: ChildNode } {
+	const start = open.nextSibling as ChildNode;
+	open.remove();
+	claim(start);
+	const built = build(render);
+	return { built, anchor: cursor };
+}
+
+function fresh(render: Render): { built: Built; anchor: ChildNode } {
+	const anchor = document.head.appendChild(document.createTextNode(''));
+	const built = build(render);
+	place(built, anchor);
+	return { built, anchor };
+}
+
+export function head(hash: string, render: Render): void {
+	let shown: { built: Built; anchor: ChildNode };
+	if (hydrating) {
+		const previous = cursor;
+		const open = marker(hash);
+		if (open === null) {
+			setHydrating(false);
+			try {
+				shown = fresh(render);
+			} finally {
+				setHydrating(true);
+			}
+		} else {
+			shown = adopted(open, render);
+		}
+		claim(previous);
+	} else {
+		shown = fresh(render);
+	}
+	teardown(() => {
+		discard(shown.built);
+		shown.anchor.remove();
+	});
+}
+
+export function title(value: string): void {
+	document.title = value;
+}

package/src/runtime/dom/hot.ts

@@ -0,0 +1,45 @@
+import { set, state } from '../reactivity/sources.ts';
+import type { Source } from '../reactivity/graph.ts';
+import { get } from '../reactivity/reads.ts';
+import { hydrating } from './hydration.ts';
+import { render, type Mountable } from './swap.ts';
+
+export const HMR = Symbol('hmr');
+
+interface Replacement {
+	readonly fn: Mountable;
+	current: Source<Mountable>;
+	update(incoming: Hot): void;
+}
+
+export type Hot = Mountable & { [HMR]: Replacement };
+
+export function hmr(fn: Mountable): Hot {
+	const wrapper = ((initial: ChildNode, props: { [key: string]: unknown }) => {
+		const instance: { [key: PropertyKey]: unknown } = {};
+		const anchor = hydrating ? initial : document.createTextNode('');
+		if (!hydrating) initial.before(anchor);
+		render(anchor, () => {
+			const component = get(wrapper[HMR].current);
+			return (inner: ChildNode) => {
+				for (const key of Reflect.ownKeys(instance)) delete instance[key];
+				const result = component(inner, props);
+				if (result) Object.defineProperties(instance, Object.getOwnPropertyDescriptors(result));
+			};
+		});
+		return instance;
+	}) as Hot;
+	wrapper[HMR] = {
+		fn,
+		current: state(fn),
+		update(incoming) {
+			set(wrapper[HMR].current, incoming[HMR].fn);
+			incoming[HMR].current = wrapper[HMR].current;
+		}
+	};
+	return wrapper;
+}
+
+export function cleanupStyles(hash: string): void {
+	for (const style of document.querySelectorAll(`style#${hash}`)) style.remove();
+}

package/src/runtime/dom/html.ts

@@ -0,0 +1,92 @@
+import { DEV } from 'esm-env';
+import { warn } from '../../shared/diagnostics.ts';
+import { hash } from '../../shared/hash.ts';
+import { template } from '../reactivity/effects.ts';
+import { claim, COMMENT, hydrating, instruction, mismatch } from './hydration.ts';
+
+export const CONTROLLED = 1;
+export const HTML_SVG = 2;
+export const HTML_MATHML = 4;
+export const UNCHECKED = 8;
+
+const FRAGMENT = 11;
+
+function closing(open: ChildNode): ChildNode {
+	let node = open.nextSibling;
+	while (node !== null && (node.nodeType !== COMMENT || (node as Comment).data !== '')) {
+		node = node.nextSibling;
+	}
+	if (node === null) mismatch();
+	return node;
+}
+
+export function parse(html: unknown, flags = 0, doc: Document = document): ParentNode {
+	if ((flags & HTML_SVG) !== 0 || (flags & HTML_MATHML) !== 0) {
+		const svg = (flags & HTML_SVG) !== 0;
+		const wrapper = doc.createElementNS(
+			svg ? 'http://www.w3.org/2000/svg' : 'http://www.w3.org/1998/Math/MathML',
+			svg ? 'svg' : 'math'
+		);
+		wrapper.innerHTML = html as string;
+		return wrapper;
+	}
+	const wrapper = doc.createElement('template');
+	wrapper.innerHTML = html as string;
+	return wrapper.content;
+}
+
+function changed(server: string, value: string): void {
+	if (server === '' || server === hash(value)) return;
+	warn(
+		'hydration_html_changed',
+		'The value of an `{@html ...}` block changed between server and client renders. The client value will be ignored in favour of the server value'
+	);
+}
+
+export function html(node: ChildNode, get: () => unknown, flags = 0): void {
+	const controlled = (flags & CONTROLLED) !== 0;
+	let anchor = node;
+	let first: ChildNode | null = null;
+	let last: ChildNode | null = null;
+	let value: unknown = '';
+	let server: string | null = null;
+	if (hydrating) {
+		const open = controlled ? (node.firstChild ?? mismatch()) : node;
+		server = instruction(open);
+		const close = closing(open);
+		if (open.nextSibling !== close) {
+			first = open.nextSibling;
+			last = close.previousSibling;
+		}
+		anchor = close;
+		claim(controlled ? node : close);
+	}
+	template(() => {
+		const next = get() ?? '';
+		if (server !== null) {
+			if (DEV && (flags & UNCHECKED) === 0) changed(server, String(next));
+			server = null;
+			value = next;
+			return;
+		}
+		if (next === value) return;
+		value = next;
+		if (controlled) {
+			if (next === '') (node as Element).replaceChildren();
+			else (node as Element).innerHTML = next as string;
+			return;
+		}
+		while (first !== null) {
+			const following: ChildNode | null = first === last ? null : first.nextSibling;
+			first.remove();
+			first = following;
+		}
+		last = null;
+		if (next === '') return;
+		const content = parse(next, flags);
+		first = content.firstChild as ChildNode | null;
+		last = content.lastChild as ChildNode | null;
+		if (content.nodeType === FRAGMENT) anchor.before(content as DocumentFragment);
+		else while (content.firstChild !== null) anchor.before(content.firstChild);
+	});
+}

package/src/runtime/dom/hydration.ts

@@ -0,0 +1,108 @@
+import { warn } from '../../shared/diagnostics.ts';
+import { CLOSE, OPEN, OPEN_ELSE, OPEN_FAILED } from '../../shared/markers.ts';
+
+export const COMMENT = 8;
+
+export const TEXT = 3;
+
+export const MISMATCH: unique symbol = Symbol('mismatch');
+
+export let hydrating = false;
+
+export let cursor: ChildNode = null as unknown as ChildNode;
+
+export function setHydrating(on: boolean): boolean {
+	const previous = hydrating;
+	hydrating = on;
+	return previous;
+}
+
+export let overwriting = false;
+
+export function setOverwriting(on: boolean): boolean {
+	const previous = overwriting;
+	overwriting = on;
+	return previous;
+}
+
+interface Continuation {
+	readonly mode: boolean;
+	previous: Continuation | null;
+	next: Continuation | null;
+}
+
+let resumed: Continuation | null = null;
+let ambient = false;
+
+export function resumeHydration(mode: boolean): () => void {
+	if (resumed === null) ambient = hydrating;
+	const segment: Continuation = { mode, previous: resumed, next: null };
+	if (resumed !== null) resumed.next = segment;
+	resumed = segment;
+	hydrating = mode;
+	let active = true;
+	return () => {
+		if (!active) return;
+		active = false;
+		if (segment.previous !== null) segment.previous.next = segment.next;
+		if (segment.next !== null) segment.next.previous = segment.previous;
+		if (resumed === segment) resumed = segment.previous;
+		hydrating = resumed?.mode ?? ambient;
+	};
+}
+
+export function mismatch(): never {
+	warn(
+		'hydration_mismatch',
+		'Hydration failed because the initial UI does not match what was rendered on the server'
+	);
+	throw MISMATCH;
+}
+
+export function claim(node: ChildNode | null): ChildNode {
+	if (node === null) mismatch();
+	cursor = node;
+	return node;
+}
+
+export function advance(): ChildNode {
+	return claim(cursor.nextSibling);
+}
+
+export function instruction(node: ChildNode): string {
+	if (node.nodeType !== COMMENT) mismatch();
+	return (node as Comment).data;
+}
+
+export function isClose(node: ChildNode): boolean {
+	return node.nodeType === COMMENT && (node as Comment).data === CLOSE;
+}
+
+function opens(data: string): boolean {
+	return (
+		data === OPEN ||
+		data === OPEN_ELSE ||
+		data.startsWith(OPEN_FAILED) ||
+		(data[0] === '[' && !Number.isNaN(Number(data.slice(1))))
+	);
+}
+
+export function skip(): ChildNode {
+	let depth = 0;
+	let node: ChildNode | null = cursor;
+	for (;;) {
+		if (node === null) mismatch();
+		const next: ChildNode | null = node.nextSibling;
+		if (node.nodeType === COMMENT) {
+			const data = (node as Comment).data;
+			if (data === CLOSE) {
+				if (depth === 0) return claim(node);
+				depth--;
+			} else if (opens(data)) {
+				depth++;
+			}
+		}
+		node.remove();
+		node = next;
+	}
+}

package/src/runtime/dom/inspect.ts

@@ -0,0 +1,70 @@
+import { snapshot } from '../../shared/clone.ts';
+import { formatFrame } from '../../shared/diagnostics.ts';
+import { eager, template } from '../reactivity/effects.ts';
+import { untrack } from '../reactivity/tracking.ts';
+
+const internal =
+	/\/vigla\/src\/(runtime\/(reactivity|dom|server)|shared)\/|\/vigla\/src\/runtime\/classes\/subscriber\.ts/;
+
+function stackOf(label: string): Error | null {
+	const limit = Error.stackTraceLimit;
+	Error.stackTraceLimit = Infinity;
+	const stack = new Error().stack;
+	Error.stackTraceLimit = limit;
+	if (stack === undefined) return null;
+	const lines: string[] = [];
+	for (const line of stack.split('\n')) {
+		if (line.trim() === 'Error' || internal.test(line.replaceAll('\\', '/'))) continue;
+		const shown = formatFrame(line);
+		if (shown !== null) lines.push(shown);
+	}
+	if (lines.length === 0) return null;
+	const error = new Error();
+	Object.defineProperty(error, 'stack', { value: ['\n', ...lines].join('\n') });
+	Object.defineProperty(error, 'name', { value: label });
+	return error;
+}
+
+const unset = Symbol('unset');
+
+export function inspect(
+	get: () => readonly unknown[],
+	inspector: (...values: unknown[]) => void,
+	stack = false
+): void {
+	let initial = true;
+	let error: unknown = unset;
+	eager(() => {
+		error = unset;
+		let values: readonly unknown[];
+		try {
+			values = get();
+		} catch (caught) {
+			error = caught;
+			return;
+		}
+		const copied = snapshot(values, true) as readonly unknown[];
+		untrack(() => {
+			if (!stack) {
+				inspector(initial ? 'init' : 'update', ...copied);
+				return;
+			}
+			inspector(...copied);
+			if (initial) return;
+			const trace = stackOf('$inspect(...)');
+			if (trace === null) return;
+			console.groupCollapsed('stack trace');
+			console.log(trace);
+			console.groupEnd();
+		});
+		initial = false;
+	});
+	template(() => {
+		try {
+			get();
+		} catch {}
+		if (error === unset) return;
+		console.error(error);
+		error = unset;
+	});
+}