@vigla/kit 0.0.0-stage → 0.1.0

package/src/client/remote/updates.ts

@@ -0,0 +1,110 @@
+import type { RemoteQueryUpdate, UpdatingPromise } from '../../types/remote.ts';
+import { DEV } from 'esm-env';
+import { throwCode, throwDiagnostic, warnCode, warnDiagnostic } from '../../shared/diagnostics.ts';
+import type { Remotes } from './cache.ts';
+
+export const queryId = Symbol('query.id');
+export const resourceKey = Symbol('query.key');
+export const overrideKey = Symbol('query.override');
+
+interface FunctionIdentity {
+	readonly [queryId]: string;
+}
+interface ResourceIdentity {
+	readonly [resourceKey]: string;
+}
+interface OverrideIdentity {
+	readonly [overrideKey]: string;
+}
+
+export interface Updates {
+	refreshes: Set<string>;
+	overrides: Array<() => void>;
+}
+
+interface Invocation {
+	updates: Updates | null;
+	called: boolean;
+	failure?: unknown;
+}
+
+function invalidUpdate(): never {
+	if (DEV)
+		throwDiagnostic(
+			'remote_updates_invalid_argument',
+			'`updates()` expects a query or live query function, query resource, or query override',
+			invalidUpdate
+		);
+	throwCode('remote_updates_invalid_argument');
+}
+
+function categorize(remotes: Remotes, updates: RemoteQueryUpdate[]): Updates {
+	const refreshes = new Set<string>();
+	const overrides: Array<() => void> = [];
+	const keys = new Set<string>();
+	for (const update of updates) {
+		if (typeof update === 'function') {
+			if (Object.hasOwn(update, queryId)) {
+				const id = (update as unknown as FunctionIdentity)[queryId];
+				for (const key of remotes.keys(id)) refreshes.add(key);
+			} else if (Object.hasOwn(update, overrideKey)) {
+				const key = (update as unknown as OverrideIdentity)[overrideKey];
+				if (keys.has(key)) {
+					if (DEV)
+						throwDiagnostic(
+							'remote_updates_duplicate_override',
+							'Multiple overrides for the same query are not allowed in a single `updates()` invocation',
+							categorize
+						);
+					throwCode('remote_updates_duplicate_override');
+				}
+				keys.add(key);
+				refreshes.add(key);
+				overrides.push(update as () => void);
+			} else overrides.push(update as () => void);
+		} else if (
+			update !== null &&
+			typeof update === 'object' &&
+			Object.hasOwn(update, resourceKey)
+		) {
+			refreshes.add((update as unknown as ResourceIdentity)[resourceKey]);
+		} else invalidUpdate();
+	}
+	return { refreshes, overrides };
+}
+
+export function updating<T>(
+	remotes: Remotes,
+	source: 'command invocation' | 'form submission',
+	run: (updates: Updates | null) => Promise<T>
+): UpdatingPromise<T> {
+	const invocation: Invocation = { updates: null, called: false };
+	const promise = (async () => {
+		try {
+			await Promise.resolve();
+			if (invocation.failure !== undefined) throw invocation.failure;
+			return await run(invocation.updates);
+		} finally {
+			for (const release of invocation.updates?.overrides ?? []) release();
+		}
+	})() as UpdatingPromise<T>;
+	promise.updates = (...values) => {
+		if (invocation.called) {
+			if (DEV)
+				warnDiagnostic(
+					'remote_updates_repeated',
+					`Updates can only be sent once per ${source}. Ignoring additional updates.`
+				);
+			else warnCode('remote_updates_repeated');
+			return promise;
+		}
+		invocation.called = true;
+		try {
+			invocation.updates = categorize(remotes, values);
+		} catch (error) {
+			invocation.failure = error;
+		}
+		return promise;
+	};
+	return promise;
+}

package/src/client/restore.ts

@@ -0,0 +1,196 @@
+import { parse, stringify } from 'devalue';
+import { getOwner, type Owner } from 'vigla';
+import type { ScrollPosition, SnapshotOptions } from '../types/navigation.ts';
+import { snapshot_duplicate_id } from './errors.ts';
+import type { Transport } from './transport.ts';
+import { identity } from '../shared/identity.ts';
+import type { HistoryEntry } from './history.ts';
+
+interface Registration {
+	snapshot: SnapshotOptions<any>;
+	owner: Owner | null;
+}
+
+const keys = {
+	info: `${identity.name}:history-info`,
+	registered: `${identity.name}:navigation-snapshot`
+};
+
+function hashElement(url: URL, hash: boolean): HTMLElement | null {
+	const fragment = hash ? (url.hash.split('#')[2] ?? '') : url.hash.slice(1);
+	return fragment ? document.getElementById(decodeURIComponent(fragment)) : null;
+}
+
+type Records<T> = Record<string, T>;
+
+function read<T>(key: string): Records<T> {
+	try {
+		return JSON.parse(sessionStorage.getItem(key) ?? '{}') ?? {};
+	} catch {
+		return {};
+	}
+}
+
+function write(key: string, value: unknown): void {
+	try {
+		sessionStorage.setItem(key, JSON.stringify(value));
+	} catch {}
+}
+
+function prune(records: Records<unknown>, index: number, onward: boolean): void {
+	for (const key of Object.keys(records))
+		if (+key === index || (onward && +key > index)) delete records[key];
+}
+
+export class Restoration {
+	#auto = true;
+	readonly #info: Records<{ scroll?: ScrollPosition; resetIndex?: number }>;
+	readonly #registered: Records<Record<string, string>>;
+	readonly #hash: boolean;
+	readonly #transport: Transport | undefined;
+	readonly #registrations = new Map<string, Registration>();
+
+	constructor(hash: boolean, transport?: Transport) {
+		this.#transport = transport;
+		this.#hash = hash;
+		this.#info = read(keys.info);
+		this.#registered = read(keys.registered);
+	}
+
+	#run<T>(registration: Registration, callback: () => T): T {
+		return registration.owner ? registration.owner.run(callback) : callback();
+	}
+
+	#stringify(value: unknown): string {
+		return this.#transport ? this.#transport.stringify(value) : stringify(value);
+	}
+
+	#parse(value: string): unknown {
+		return this.#transport ? this.#transport.parse(value) : parse(value);
+	}
+
+	capture(entry: HistoryEntry): void {
+		this.#info[entry.index] = {
+			...this.#info[entry.index],
+			scroll: { x: window.scrollX, y: window.scrollY }
+		};
+		if (this.#registrations.size)
+			this.#registered[entry.index] = Object.fromEntries(
+				[...this.#registrations].map(([id, registration]) => [
+					id,
+					this.#stringify(this.#run(registration, () => registration.snapshot.capture()))
+				])
+			);
+		else delete this.#registered[entry.index];
+	}
+
+	clear(entry: HistoryEntry, onward = true): void {
+		prune(this.#info, entry.index, onward);
+		prune(this.#registered, entry.index, onward);
+	}
+
+	position(index: number): ScrollPosition | null {
+		return this.#info[index]?.scroll ?? null;
+	}
+
+	restore(entry: HistoryEntry): void {
+		const saved = this.#registered[entry.index];
+		for (const [id, registration] of this.#registrations) {
+			if (saved && Object.hasOwn(saved, id))
+				this.#run(registration, () => registration.snapshot.restore(this.#parse(saved[id]!)));
+		}
+	}
+
+	register(id: string, snapshot: SnapshotOptions<any>, index: number | null): () => void {
+		if (this.#registrations.has(id)) snapshot_duplicate_id({ id });
+		const registration: Registration = { snapshot, owner: getOwner() };
+		this.#registrations.set(id, registration);
+		const saved = index === null ? undefined : this.#registered[index]?.[id];
+		if (saved !== undefined) this.#run(registration, () => snapshot.restore(this.#parse(saved)));
+		return () => this.#registrations.delete(id);
+	}
+
+	registrations(): Set<SnapshotOptions<any>> {
+		return new Set([...this.#registrations.values()].map((registration) => registration.snapshot));
+	}
+
+	reset(previous: Set<SnapshotOptions<any>>): void {
+		for (const registration of this.#registrations.values())
+			if (previous.has(registration.snapshot))
+				this.#run(registration, () => registration.snapshot.reset?.());
+	}
+
+	persist(): void {
+		write(keys.info, this.#info);
+		write(keys.registered, this.#registered);
+	}
+
+	disableScroll(): void {
+		this.#auto = false;
+	}
+
+	blur(reset: boolean): void {
+		const active = document.activeElement;
+		if (
+			reset &&
+			active !== document.body &&
+			(active instanceof HTMLElement || active instanceof SVGElement)
+		)
+			active.blur();
+	}
+
+	scroll(url: URL, reset: boolean, position?: ScrollPosition | null): void {
+		if (reset && this.#auto) {
+			if (position) window.scrollTo(position.x, position.y);
+			else {
+				const anchor = hashElement(url, this.#hash);
+				if (anchor) anchor.scrollIntoView();
+				else window.scrollTo(0, 0);
+			}
+		}
+		this.#auto = true;
+	}
+
+	focus(url: URL): void {
+		const canFocus = window.parent === window || document.hasFocus();
+		const autofocus = document.querySelector<HTMLElement>('[autofocus]');
+		if (autofocus) {
+			if (canFocus) autofocus.focus();
+			return;
+		}
+		if (canFocus) {
+			const target = hashElement(url, this.#hash) ?? document.body;
+			const tab = target.getAttribute('tabindex');
+			target.setAttribute('tabindex', '-1');
+			target.focus({ preventScroll: true });
+			if (tab === null) target.removeAttribute('tabindex');
+			else target.setAttribute('tabindex', tab);
+		}
+		const selection = window.getSelection();
+		if (!selection || selection.type === 'None') return;
+		const ranges = Array.from({ length: selection.rangeCount }, (_, index) => {
+			const range = selection.getRangeAt(index);
+			return {
+				start: range.startContainer,
+				end: range.endContainer,
+				from: range.startOffset,
+				to: range.endOffset
+			};
+		});
+		setTimeout(() => {
+			if (selection.rangeCount !== ranges.length) return;
+			if (
+				ranges.every((saved, index) => {
+					const range = selection.getRangeAt(index);
+					return (
+						saved.start === range.startContainer &&
+						saved.end === range.endContainer &&
+						saved.from === range.startOffset &&
+						saved.to === range.endOffset
+					);
+				})
+			)
+				selection.removeAllRanges();
+		});
+	}
+}

package/src/client/routes.ts

@@ -0,0 +1,217 @@
+import type {
+	ClientApp,
+	MatchedParams,
+	NodeLoader,
+	ServerRoute
+} from '../types/internal/client.ts';
+import type { RoutePattern } from '../types/internal/routes.ts';
+import { findRoute, parseRoute } from '../shared/routing/index.ts';
+import { addResolutionSuffix } from '../shared/pathname.ts';
+import { decodePathname } from '../shared/url.ts';
+import { base, appDir, hashRouting } from './payload.ts';
+import { preload_invalid_route_id } from './errors.ts';
+import {
+	preload_code_endpoint_only,
+	preload_route_missing,
+	preload_route_is_pathname
+} from './warnings.ts';
+
+export type NodeEntry = [server: boolean, loader: NodeLoader];
+export interface Route extends RoutePattern {
+	id: string;
+	layouts: Array<NodeEntry | undefined>;
+	errors: Array<NodeLoader | undefined>;
+	leaf: NodeEntry;
+}
+export interface Intent {
+	url: URL;
+	route: Route;
+	params: MatchedParams;
+}
+
+const stylesheets = new WeakMap<Document, Map<string, Promise<void>>>();
+
+export function loadCss(dependencies: string[]): Promise<void> {
+	let pending = stylesheets.get(document);
+	if (!pending) stylesheets.set(document, (pending = new Map()));
+	const cache = pending;
+	return Promise.all(
+		dependencies.map((dependency) => {
+			const href = new URL(dependency, document.baseURI).href;
+			const current = cache.get(href);
+			if (current) return current;
+			const existing = [...document.querySelectorAll<HTMLLinkElement>('link[rel=stylesheet]')].find(
+				(link) => link.href === href
+			);
+			if (existing?.sheet) return;
+			const promise = new Promise<void>((resolve, reject) => {
+				const link = existing ?? document.createElement('link');
+				link.addEventListener('load', () => resolve(), { once: true });
+				link.addEventListener(
+					'error',
+					() => {
+						cache.delete(href);
+						link.remove();
+						reject(new Error(`Unable to load CSS: ${href}`));
+					},
+					{ once: true }
+				);
+				if (!existing) {
+					link.rel = 'stylesheet';
+					link.href = href;
+					link.crossOrigin = '';
+					const nonce = document.querySelector<HTMLMetaElement>('meta[property=csp-nonce]')?.nonce;
+					if (nonce) link.nonce = nonce;
+					document.head.append(link);
+				}
+			});
+			cache.set(href, promise);
+			return promise;
+		})
+	).then(() => {});
+}
+
+export class Routes {
+	readonly hash = hashRouting;
+	readonly #app: ClientApp;
+	readonly #routes: Route[];
+	readonly #byId = new Map<string, Route>();
+	readonly #code = new Map<NodeLoader, ReturnType<NodeLoader>>();
+	readonly #rerouted = new Map<string, Promise<string>>();
+
+	constructor(app: ClientApp) {
+		this.#app = app;
+		const servers = new Set(app.serverLoads);
+		this.#routes = Object.entries(app.dictionary).map(([id, [leaf, layouts, errors]]) => {
+			const branch = [0, ...layouts];
+			const failures = [1, ...(errors ?? [])];
+			branch.length = failures.length = Math.max(branch.length, failures.length);
+			const route: Route = {
+				id,
+				...parseRoute(id),
+				layouts: Array.from(branch, (index) =>
+					index === undefined ? undefined : ([servers.has(index), app.nodes[index]!] as NodeEntry)
+				),
+				errors: Array.from(failures, (index) =>
+					index === undefined ? undefined : app.nodes[index]
+				),
+				leaf: [leaf < 0, app.nodes[leaf < 0 ? ~leaf : leaf]!]
+			};
+			this.#byId.set(id, route);
+			return route;
+		});
+	}
+
+	outside(url: URL): boolean {
+		if (url.origin !== location.origin) return true;
+		if (this.hash) return url.pathname !== location.pathname;
+		return url.pathname !== base && !url.pathname.startsWith(`${base}/`);
+	}
+
+	key(url: URL): string {
+		return this.hash ? url.hash.slice(1).split('#')[0]! + url.search : url.pathname + url.search;
+	}
+
+	async match(url: URL): Promise<Intent | null> {
+		if (this.outside(url)) return null;
+		const route = (url: URL) =>
+			this.hash ? url.hash.slice(1).split(/[?#]/)[0] || '/' : url.pathname;
+		let path = route(url);
+		if (this.#app.hooks.reroute) {
+			let rerouted = this.#rerouted.get(url.href);
+			if (!rerouted) {
+				try {
+					rerouted = Promise.resolve(this.#app.hooks.reroute({ url: new URL(url), fetch })).then(
+						(result) => {
+							if (result == null || !this.hash) return result ?? path;
+							const target = new URL(url);
+							target.hash = result;
+							return route(target);
+						}
+					);
+				} catch {
+					return null;
+				}
+				this.#rerouted.set(url.href, rerouted);
+				rerouted.catch(() => this.#rerouted.delete(url.href));
+			}
+			try {
+				path = await rerouted;
+			} catch {
+				return null;
+			}
+		}
+		if (this.#app.clientRouting === false) {
+			const module: { route?: ServerRoute; params?: MatchedParams } = await import(
+				/* @vite-ignore */ addResolutionSuffix(path)
+			);
+			return module.route
+				? { url, route: this.accept(module.route), params: module.params ?? {} }
+				: null;
+		}
+		const found = findRoute(
+			decodePathname(this.hash ? path : path.slice(base.length)) || '/',
+			this.#routes,
+			this.#app.matchers
+		);
+		return found ? { url, ...found } : null;
+	}
+
+	accept(value: ServerRoute): Route {
+		for (const [index, loader] of Object.entries(value.nodes)) this.#app.nodes[+index] ??= loader;
+		const entry = (value: [boolean, number]): NodeEntry => [value[0], this.#app.nodes[value[1]]!];
+		const route: Route = {
+			id: value.id,
+			...parseRoute(value.id),
+			layouts: Array.from(value.layouts, (node) => node && entry(node)),
+			errors: Array.from(value.errors, (node) =>
+				node === undefined ? undefined : this.#app.nodes[node]
+			),
+			leaf: entry(value.leaf)
+		};
+		this.#byId.set(value.id, route);
+		return route;
+	}
+
+	get(id: string): Route | undefined {
+		return this.#byId.get(id);
+	}
+
+	load(loader: NodeLoader): ReturnType<NodeLoader> {
+		let promise = this.#code.get(loader);
+		if (!promise) {
+			promise = loader().then(async (node) => {
+				if (node.stylesheets?.length) await loadCss(node.stylesheets);
+				return node;
+			});
+			this.#code.set(loader, promise);
+			promise.catch(() => this.#code.delete(loader));
+		}
+		return promise;
+	}
+
+	async preload(id: string): Promise<void> {
+		if (!id.startsWith('/')) preload_invalid_route_id({ id });
+		let route = this.#byId.get(id);
+		if (!route && this.#app.clientRouting === false) {
+			try {
+				const path = addResolutionSuffix(`${base}/${appDir}/routes${id === '/' ? '' : id}`);
+				const module: { route?: ServerRoute; endpoint_only?: boolean } = await import(
+					/* @vite-ignore */ path
+				);
+				if (module.endpoint_only) {
+					preload_code_endpoint_only({ id });
+					return;
+				}
+				if (module.route) route = this.accept(module.route);
+			} catch {}
+		}
+		if (!route) {
+			if (await this.match(new URL(`${base}${id}`, location.href)))
+				preload_route_is_pathname({ id });
+			else preload_route_missing({ id });
+			return;
+		}
+		await Promise.all([...route.layouts, route.leaf].map((entry) => entry && this.load(entry[1])));
+	}
+}

package/src/client/state.ts

@@ -0,0 +1,182 @@
+import { cell, createContext, untrack } from 'vigla';
+import { DEV } from 'esm-env';
+import type { Navigation, IdleNavigation } from '../types/navigation.ts';
+import type { Page, Updated } from '../types/state.ts';
+import type { ClientApp, ClientPayload, MatchedParams } from '../types/internal/client.ts';
+
+function pageCells(value: Page<MatchedParams>): Page<MatchedParams> {
+	const result = {} as Page<MatchedParams>;
+	for (const key of Object.keys(value) as Array<keyof Page<MatchedParams>>) {
+		const held = cell(value[key]);
+		Object.defineProperty(result, key, {
+			enumerable: true,
+			get: () => held.current,
+			set: (next: Page<MatchedParams>[typeof key]) => {
+				held.current = next;
+			}
+		});
+	}
+	return result;
+}
+
+export class State {
+	readonly page = pageCells({
+		url: new URL('a:'),
+		params: {},
+		route: { id: null },
+		status: -1,
+		error: null,
+		data: {},
+		form: null,
+		state: {},
+		shallow: null
+	});
+	readonly navigation = cell<Navigation | null>(null);
+	readonly changed = cell(false);
+	readonly updated: Updated;
+	#timer: ReturnType<typeof setTimeout> | undefined;
+	#checking: Promise<boolean> | undefined;
+	#controller: AbortController | undefined;
+	#disposed = false;
+	readonly #options: ClientPayload;
+	readonly #app: ClientApp | undefined;
+
+	constructor(options: ClientPayload, app?: ClientApp) {
+		this.#options = options;
+		this.#app = app;
+		const state = this;
+		this.updated = {
+			get current() {
+				return state.changed.current;
+			},
+			check: () => state.check()
+		};
+	}
+
+	update(value: Partial<Page<MatchedParams>>): void {
+		untrack(() => Object.assign(this.page, value));
+	}
+
+	notify(version: string | null): void {
+		if (version && this.#app?.versionChecks !== false) this.#observe(version);
+	}
+
+	#observe(version: string): void {
+		if (this.#options.version !== undefined && version !== this.#options.version) {
+			untrack(() => {
+				this.changed.current = true;
+			});
+		}
+	}
+
+	poll(): void {
+		const interval = this.#options.version_poll_interval;
+		if (!this.#disposed && !DEV && interval && !this.changed.current)
+			this.#timer = setTimeout(() => void this.check(), interval);
+	}
+
+	check(): Promise<boolean> {
+		if (DEV || this.#disposed) return Promise.resolve(false);
+		clearTimeout(this.#timer);
+		if (this.changed.current) return Promise.resolve(true);
+		if (this.#checking) return this.#checking;
+		this.#controller = new AbortController();
+		this.#checking = (async () => {
+			try {
+				const prefix = this.#options.assets || this.#options.base || '';
+				const response = await fetch(`${prefix}/${this.#options.app_dir ?? '_app'}/version.json`, {
+					headers: { 'cache-control': 'no-cache' },
+					signal: this.#controller!.signal
+				});
+				if (response.ok) {
+					const data: { version: string } = await response.json();
+					if (typeof data.version === 'string') this.#observe(data.version);
+				}
+				return this.changed.current;
+			} catch {
+				return false;
+			} finally {
+				this.#checking = undefined;
+				this.poll();
+			}
+		})();
+		return this.#checking;
+	}
+
+	dispose(): void {
+		this.#disposed = true;
+		clearTimeout(this.#timer);
+		this.#controller?.abort();
+	}
+}
+
+const context = createContext<State>();
+let active = new State({});
+
+export function bindState(state: State): void {
+	active = state;
+	context[1](state);
+}
+
+function current(): State {
+	return context[2]() ? context[0]() : active;
+}
+
+export const page: Page<MatchedParams> = {
+	get url() {
+		return current().page.url;
+	},
+	get params() {
+		return current().page.params;
+	},
+	get route() {
+		return current().page.route;
+	},
+	get status() {
+		return current().page.status;
+	},
+	get data() {
+		return current().page.data;
+	},
+	get form() {
+		return current().page.form;
+	},
+	get error() {
+		return current().page.error;
+	},
+	get state() {
+		return current().page.state;
+	},
+	get shallow() {
+		return current().page.shallow;
+	}
+};
+
+export const navigating: Navigation | IdleNavigation = {
+	get from() {
+		return current().navigation.current?.from ?? null;
+	},
+	get to() {
+		return current().navigation.current?.to ?? null;
+	},
+	get type() {
+		return current().navigation.current?.type ?? null;
+	},
+	get willUnload() {
+		return current().navigation.current?.willUnload ?? null;
+	},
+	get delta() {
+		const navigation = current().navigation.current;
+		return navigation?.type === 'popstate' ? navigation.delta : null;
+	},
+	get complete() {
+		return current().navigation.current?.complete ?? null;
+	}
+} as Navigation | IdleNavigation;
+
+export const updated: Updated = {
+	get current() {
+		return current().updated.current;
+	},
+	check: () => current().updated.check()
+};