@vigla/kit 0.0.0-stage → 0.1.0

package/src/client/history.ts

@@ -0,0 +1,128 @@
+import { DEV } from 'esm-env';
+import type { Transport } from './transport.ts';
+import { history_api_conflict } from './warnings.ts';
+import { identity } from '../shared/identity.ts';
+
+export interface Metadata {
+	historyIndex: number;
+	navigationIndex: number;
+	state: string;
+	persistState: boolean;
+	pageUrl?: string;
+	resetIndex: number;
+}
+export interface SavedState {
+	serialized: string;
+	value: App.PageState;
+}
+export const metadataKey = `${identity.name}:metadata`;
+
+export interface HistoryEntry {
+	index: number;
+	navigation: number;
+}
+
+let watching = false;
+
+function watchHistoryApi(): void {
+	if (!DEV || watching) return;
+	watching = true;
+	let warned = false;
+	const own = import.meta.url.split('?')[0]!;
+	const check = (): void => {
+		if (warned) return;
+		let stack = new Error().stack?.split('\n');
+		if (!stack) return;
+		if (!stack[0]!.includes('https:') && !stack[0]!.includes('http:')) stack = stack.slice(1);
+		const frame = stack[2];
+		if (frame?.includes('node_modules') || frame?.includes(own)) return;
+		warned = true;
+		history_api_conflict();
+	};
+	for (const method of ['pushState', 'replaceState'] as const) {
+		const original = history[method];
+		history[method] = (...args) => {
+			check();
+			return original.apply(history, args);
+		};
+	}
+}
+
+export class History implements HistoryEntry {
+	index: number;
+	navigation: number;
+	reset: number;
+	#current!: Metadata;
+	readonly #transport: Transport;
+
+	constructor(transport: Transport) {
+		this.#transport = transport;
+		const metadata = this.metadata();
+		this.index = metadata?.historyIndex ?? Date.now();
+		this.navigation = metadata?.navigationIndex ?? this.index;
+		this.reset = metadata?.resetIndex ?? 0;
+		if (metadata) this.#current = metadata;
+		else this.write(new URL(location.href), this.encode({}), true, false, false, undefined, false);
+		history.scrollRestoration = 'manual';
+		watchHistoryApi();
+	}
+
+	get current(): Metadata {
+		return this.#current;
+	}
+
+	metadata(state: any = history.state): Metadata | undefined {
+		return state?.[metadataKey];
+	}
+
+	state(metadata = this.#current): App.PageState {
+		return this.#transport.parse(metadata.state);
+	}
+
+	encode(state: App.PageState): SavedState {
+		const serialized = this.#transport.stringify(state);
+		return { serialized, value: this.#transport.parse(serialized) };
+	}
+
+	write(
+		url: URL,
+		state: SavedState,
+		replace: boolean,
+		shallow: boolean,
+		persist: boolean,
+		pageUrl?: URL,
+		reset = !shallow
+	): void {
+		if (!replace) {
+			this.index++;
+			if (!shallow) this.navigation++;
+		}
+		if (reset) this.reset++;
+		const metadata: Metadata = {
+			historyIndex: this.index,
+			navigationIndex: this.navigation,
+			state: state.serialized,
+			persistState: persist,
+			resetIndex: this.reset,
+			...(shallow ? { pageUrl: pageUrl?.href ?? location.href } : {})
+		};
+		history[replace ? 'replaceState' : 'pushState']({ [metadataKey]: metadata }, '', url);
+		this.#current = metadata;
+	}
+
+	fragment(url: URL, source: Metadata, reset: boolean): void {
+		this.accept({
+			...source,
+			historyIndex: this.index + 1,
+			resetIndex: this.reset + Number(reset)
+		});
+		history.replaceState({ ...history.state, [metadataKey]: this.#current }, '', url);
+	}
+
+	accept(metadata: Metadata): void {
+		this.#current = metadata;
+		this.index = metadata.historyIndex;
+		this.navigation = metadata.navigationIndex;
+		this.reset = metadata.resetIndex;
+	}
+}

package/src/client/lifecycle.ts

@@ -0,0 +1,71 @@
+import { getOwner, onDestroy, type Owner } from 'vigla';
+import type {
+	AfterNavigate,
+	BeforeNavigate,
+	Navigation,
+	NavigationCallback,
+	NavigationEnter,
+	OnNavigate
+} from '../types/navigation.ts';
+
+interface Registration<T> {
+	callback: (value: T) => unknown;
+	owner: Owner | null;
+}
+
+export class Lifecycle {
+	readonly #before = new Set<Registration<BeforeNavigate>>();
+	readonly #on = new Set<Registration<OnNavigate>>();
+	readonly #after = new Set<Registration<AfterNavigate>>();
+
+	#register<T>(set: Set<Registration<T>>, callback: (value: T) => unknown): void {
+		const registration = { callback, owner: getOwner() };
+		set.add(registration);
+		if (registration.owner) onDestroy(() => set.delete(registration));
+	}
+
+	before(callback: (navigation: BeforeNavigate) => void): void {
+		this.#register(this.#before, callback);
+	}
+	on(callback: NavigationCallback): void {
+		this.#register(this.#on, callback);
+	}
+	after(callback: (navigation: AfterNavigate) => void): void {
+		this.#register(this.#after, callback);
+	}
+
+	allow(navigation: Navigation): boolean {
+		let cancelled = false;
+		const event: BeforeNavigate = {
+			...navigation,
+			cancel() {
+				cancelled = true;
+			}
+		};
+		for (const registration of this.#before) {
+			if (registration.owner) registration.owner.run(() => registration.callback(event));
+			else registration.callback(event);
+		}
+		return !cancelled;
+	}
+
+	async prepare(navigation: OnNavigate): Promise<Array<() => void>> {
+		const values = await Promise.all(
+			[...this.#on].map((registration) =>
+				registration.owner
+					? registration.owner.run(() => registration.callback(navigation))
+					: registration.callback(navigation)
+			)
+		);
+		return values.filter((value): value is () => void => typeof value === 'function');
+	}
+
+	finish(navigation: Navigation | NavigationEnter): void {
+		if (navigation.willUnload || navigation.type === 'leave') return;
+		for (const registration of this.#after) {
+			if (registration.owner)
+				registration.owner.run(() => registration.callback(navigation as AfterNavigate));
+			else registration.callback(navigation as AfterNavigate);
+		}
+	}
+}

package/src/client/links.ts

@@ -0,0 +1,356 @@
+import { DEV } from 'esm-env';
+import type { Client } from './client.ts';
+import type { Metadata } from './history.ts';
+import { preload_data_failed, link_option_invalid, link_option_replaced } from './warnings.ts';
+import { identity } from '../shared/identity.ts';
+
+interface Options {
+	code: number;
+	data: number;
+	reload: boolean;
+	replace: boolean;
+	reset: boolean;
+}
+
+interface Listeners {
+	startPreloads(): void;
+	dispose(): void;
+}
+
+const priorities: Record<string, number> = {
+	tap: 1,
+	hover: 2,
+	viewport: 3,
+	eager: 4,
+	'': 2,
+	false: -1
+};
+const valid: Record<string, string[]> = {
+	'preload-code': ['', 'false', 'tap', 'hover', 'viewport', 'eager'],
+	'preload-data': ['', 'false', 'tap', 'hover'],
+	reload: ['', 'true', 'false'],
+	replacestate: ['', 'true', 'false'],
+	reset: ['', 'true', 'false']
+};
+const warned = new WeakSet<Element>();
+
+function parent(element: Element): Element | null {
+	const node = element.assignedSlot ?? element.parentNode;
+	return node instanceof ShadowRoot ? node.host : node instanceof Element ? node : null;
+}
+
+function anchor(event: Event, container: Element): Element | null {
+	if (!event.composedPath().includes(container)) return null;
+	let element =
+		event.composedPath().find((node): node is Element => node instanceof Element) ?? null;
+	while (element && element !== container) {
+		if (element.localName === 'a' && element.hasAttribute('href')) return element;
+		element = parent(element);
+	}
+	return null;
+}
+
+function options(element: Element): Options {
+	const values: Record<string, string> = {};
+	for (let node: Element | null = element; node; node = parent(node)) {
+		if (DEV && !warned.has(node)) {
+			for (const [name, replacement] of Object.entries(identity.replacedLinkOptions ?? {}))
+				if (node.hasAttribute(`data-${identity.name}-${name}`)) {
+					warned.add(node);
+					link_option_replaced({ name, replacement });
+					break;
+				}
+		}
+		for (const [name, accepted] of Object.entries(valid)) {
+			const value = node.getAttribute(`data-${identity.name}-${name}`);
+			if (value === null || name in values) continue;
+			if (accepted.includes(value)) values[name] = value;
+			else if (DEV && !warned.has(node)) {
+				warned.add(node);
+				link_option_invalid({
+					name,
+					options: accepted.map((value) => JSON.stringify(value)).join(', ')
+				});
+			}
+		}
+	}
+	return {
+		code: priorities[values['preload-code'] ?? 'false'] ?? -1,
+		data: priorities[values['preload-data'] ?? 'false'] ?? -1,
+		reload: 'reload' in values && values.reload !== 'false',
+		replace: 'replacestate' in values && values.replacestate !== 'false',
+		reset: values.reset !== 'false'
+	};
+}
+
+export function listen(client: Client): Listeners {
+	const abort = new AbortController();
+	const container = client.container;
+	let preloading = false;
+	let hover: ReturnType<typeof setTimeout> | undefined;
+	let fragment: { source: Metadata; reset: boolean } | undefined;
+	const listener = <K extends keyof WindowEventMap>(
+		target: Window,
+		name: K,
+		callback: (event: WindowEventMap[K]) => void
+	) => target.addEventListener(name, callback, { signal: abort.signal });
+	function info(
+		element: Element
+	): { url: URL; options: Options; external: boolean; ignore: boolean } | null {
+		const href = element.getAttribute('href');
+		if (href === null) return null;
+		let url: URL;
+		try {
+			url = client.url(href);
+		} catch {
+			return null;
+		}
+		if (client.routes.hash && url.hash && !url.hash.startsWith('#/'))
+			url.hash = `${location.hash.split('#')[1] ?? '/'}${url.hash}`;
+		const target = element.getAttribute('target') || document.querySelector('base')?.target;
+		const ignore = (!!target && target !== '_self') || element.hasAttribute('download');
+		const external =
+			client.routes.outside(url) ||
+			(element.getAttribute('rel') ?? '').split(/\s+/).includes('external');
+		return { url, options: options(element), external, ignore };
+	}
+	function preload(element: Element, priority: number): void {
+		if (!preloading) return;
+		if ('connection' in navigator && (navigator.connection as { saveData?: boolean }).saveData)
+			return;
+		const link = info(element);
+		if (!link || link.ignore || link.external || link.options.reload) return;
+		if (link.options.data >= priority) {
+			void client.preloadData(link.url).catch((error: unknown) => {
+				if (DEV) preload_data_failed({ path: link.url.href, message: String(error) });
+			});
+		} else if (link.options.code >= priority) {
+			void client
+				.intent(link.url)
+				.then((intent) => intent && client.routes.preload(intent.route.id))
+				.catch(() => {});
+		}
+	}
+	listener(window, 'click', (event) => {
+		if (
+			event.button ||
+			event.metaKey ||
+			event.ctrlKey ||
+			event.shiftKey ||
+			event.altKey ||
+			event.defaultPrevented
+		)
+			return;
+		const element = anchor(event, container);
+		if (!element) return;
+		const link = info(element);
+		if (!link || link.ignore) return;
+		const follow = () => {
+			event.preventDefault();
+			void client
+				.navigate(link.url, {
+					type: 'link',
+					event,
+					replace: link.options.replace || link.url.href === location.href,
+					refreshAll: link.url.href === location.href,
+					reset: link.options.reset
+				})
+				.catch(console.error);
+		};
+		if (!client.started && !link.external && !link.options.reload) {
+			follow();
+			return;
+		}
+		const same = client.routes.key(link.url) === client.routes.key(new URL(location.href));
+		if (
+			!client.routes.hash &&
+			!link.external &&
+			same &&
+			link.url.href.includes('#') &&
+			!link.options.replace
+		) {
+			client.restoration.capture(client.history);
+			if (link.url.href === location.href) {
+				event.preventDefault();
+				client.restoration.scroll(link.url, true);
+				client.restoration.focus(link.url);
+			} else {
+				fragment = { source: client.history.current, reset: link.options.reset };
+				client.updateUrl(link.url);
+			}
+			return;
+		}
+		if (link.external || link.options.reload) {
+			if (!client.leave(link.url, event)) event.preventDefault();
+			return;
+		}
+		follow();
+	});
+	listener(window, 'pointermove', (event) => {
+		clearTimeout(hover);
+		const element = anchor(event, container);
+		if (element) hover = setTimeout(() => preload(element, 2), 20);
+	});
+	listener(window, 'pointerdown', (event) => {
+		const element = anchor(event, container);
+		if (element) preload(element, 1);
+	});
+	listener(window, 'touchstart', (event) => {
+		const element = anchor(event, container);
+		if (element) preload(element, 1);
+	});
+	listener(window, 'pageshow', () => {
+		client.unloading = false;
+		client.state.navigation.current = null;
+	});
+	listener(window, 'popstate', (event) => {
+		const url = new URL(location.href);
+		const metadata = client.history.metadata(event.state);
+		if (!metadata) {
+			if (!fragment) {
+				if (client.routes.hash) location.reload();
+				else client.updateUrl(url);
+			}
+			return;
+		}
+		if (metadata.historyIndex === client.history.index) return;
+		const source = client.history.current;
+		const delta = metadata.historyIndex - source.historyIndex;
+		const reset = metadata.resetIndex !== source.resetIndex;
+		const hash =
+			!!client.current &&
+			(url.hash !== '' || client.current.url.hash !== '') &&
+			client.routes.key(url) === client.routes.key(client.current.url);
+		const shallow =
+			metadata.navigationIndex === client.history.navigation &&
+			(hash ||
+				(client.navigated &&
+					(metadata.pageUrl === undefined || metadata.pageUrl === location.href)));
+		if (!shallow) client.restorer?.capture(client.history.navigation, client.view.components);
+		client.restoration.capture(client.history);
+		client.history.accept(metadata);
+		void client
+			.navigate(new URL(location.href), {
+				type: 'popstate',
+				event,
+				delta,
+				popped: metadata,
+				source,
+				reset,
+				shallow
+			})
+			.catch(console.error);
+	});
+	listener(window, 'hashchange', () => {
+		if (!fragment) return;
+		client.history.fragment(new URL(location.href), fragment.source, fragment.reset);
+		client.restoration.clear(client.history);
+		fragment = undefined;
+	});
+	listener(window, 'beforeunload', (event) => {
+		client.persist();
+		if (
+			!client.unloading &&
+			!client.lifecycle.allow(
+				client.navigation(null, 'leave') as import('../types/navigation.ts').Navigation
+			)
+		) {
+			event.preventDefault();
+			event.returnValue = '';
+		}
+	});
+	listener(window, 'pagehide', () => client.persist());
+	listener(window, 'focus', () => {
+		if (document.visibilityState === 'visible') void client.state.check();
+	});
+	document.addEventListener(
+		'visibilitychange',
+		() => {
+			if (document.visibilityState === 'visible') void client.state.check();
+		},
+		{ signal: abort.signal }
+	);
+	listener(window, 'submit', (event) => {
+		if (
+			event.defaultPrevented ||
+			!(event.target instanceof HTMLFormElement) ||
+			!event.composedPath().includes(container)
+		)
+			return;
+		const form = event.target;
+		const copy = HTMLFormElement.prototype.cloneNode.call(form) as HTMLFormElement;
+		const submitter = event.submitter as HTMLButtonElement | HTMLInputElement | null;
+		const method = submitter?.hasAttribute('formmethod') ? submitter.formMethod : copy.method;
+		const target = submitter?.hasAttribute('formtarget') ? submitter.formTarget : copy.target;
+		if (method !== 'get' || (target && target !== '_self')) return;
+		const url = client.url(
+			submitter?.hasAttribute('formaction') ? submitter.formAction : copy.action
+		);
+		const config = options(form);
+		if (client.routes.outside(url) || config.reload) return;
+		const data = new FormData(form, submitter);
+		url.search = '';
+		for (const [name, value] of data)
+			url.searchParams.append(name, typeof value === 'string' ? value : value.name);
+		event.preventDefault();
+		void client
+			.navigate(url, { type: 'form', event, replace: config.replace, reset: config.reset })
+			.catch(console.error);
+	});
+	const observer =
+		typeof IntersectionObserver === 'undefined'
+			? undefined
+			: new IntersectionObserver((entries) => {
+					for (const entry of entries)
+						if (entry.isIntersecting) {
+							preload(entry.target, 3);
+							observer?.unobserve(entry.target);
+						}
+				});
+	function anchors(root: Element): Element[] {
+		return [...(root.matches('a[href]') ? [root] : []), ...root.querySelectorAll('a[href]')];
+	}
+	function scan(root: Element): void {
+		for (const element of anchors(root)) {
+			const config = options(element);
+			if (config.code === 4) preload(element, 4);
+			if (config.code === 3) observer?.observe(element);
+			else observer?.unobserve(element);
+		}
+	}
+	const mutations = new MutationObserver((records) => {
+		for (const record of records) {
+			if (record.type === 'attributes' && record.target instanceof Element) scan(record.target);
+			for (const node of record.addedNodes) if (node instanceof Element) scan(node);
+			for (const node of record.removedNodes)
+				if (node instanceof Element)
+					for (const element of anchors(node)) observer?.unobserve(element);
+		}
+	});
+	for (const link of document.querySelectorAll<HTMLLinkElement>('link[rel="icon"]'))
+		link.href = link.href;
+	return {
+		startPreloads() {
+			if (preloading || abort.signal.aborted) return;
+			preloading = true;
+			mutations.observe(container, {
+				childList: true,
+				subtree: true,
+				attributes: true,
+				attributeFilter: [
+					'href',
+					`data-${identity.name}-preload-code`,
+					`data-${identity.name}-preload-data`,
+					`data-${identity.name}-reload`
+				]
+			});
+			scan(container);
+		},
+		dispose() {
+			clearTimeout(hover);
+			abort.abort();
+			observer?.disconnect();
+			mutations.disconnect();
+		}
+	};
+}