@vigla/kit 0.0.0-stage → 0.1.1

package/src/client/load.ts

@@ -0,0 +1,487 @@
+import { INVALID_SPAN_CONTEXT, trace } from '@opentelemetry/api';
+import type { Owner } from 'vigla';
+import type {
+	ClientApp,
+	ClientNode,
+	HydrationPayload,
+	MatchedParams,
+	NodeLoader
+} from '../types/internal/client.ts';
+import type {
+	DataNode,
+	DataResponse,
+	DataRedirectNode,
+	SerializedUses,
+	TrailingSlash
+} from '../types/internal/data.ts';
+import type { NavigationEvent, LoadEvent } from '../types/request.ts';
+import { HttpError, Redirect, FrameworkError, HandledError } from '../shared/outcomes.ts';
+import { load_invalid_response } from '../shared/errors.ts';
+import { makeTrackable, normalizePath } from '../shared/url.ts';
+import { fetchData } from './data.ts';
+import type { FetchCache } from './fetch.ts';
+import type { Intent, Route, Routes } from './routes.ts';
+import type { State } from './state.ts';
+import type { Transport } from './transport.ts';
+
+export interface Uses {
+	dependencies: Set<string>;
+	params: Set<string>;
+	paramsAll: boolean;
+	search: Set<string>;
+	parent: boolean;
+	route: boolean;
+	url: boolean;
+}
+export interface Branch {
+	loader: NodeLoader;
+	node: ClientNode;
+	server: DataNode | null;
+	uses: Uses | null;
+	data: Record<string, any>;
+	slash?: TrailingSlash;
+}
+export interface Loaded extends Intent {
+	type: 'loaded';
+	branch: Array<Branch | undefined>;
+	status: number;
+	error: App.Error | null;
+	form: Record<string, any> | null;
+}
+export interface Changes {
+	all: boolean;
+	dependencies: Array<(url: URL) => boolean>;
+}
+const span = trace.wrapSpanContext(INVALID_SPAN_CONTEXT);
+const empty = {};
+
+function uses(value: SerializedUses = {}): Uses {
+	return {
+		dependencies: new Set(value.dependencies),
+		params: new Set(value.params),
+		paramsAll: false,
+		search: new Set(value.search_params),
+		parent: !!value.parent,
+		route: !!value.route,
+		url: !!value.url
+	};
+}
+
+function changed(
+	usage: Uses | null,
+	previous: Loaded | null,
+	next: Intent,
+	changes: Changes,
+	parent: boolean,
+	moved: boolean
+): boolean {
+	if (changes.all) return true;
+	if (!usage || !previous) return !previous;
+	if (
+		(usage.parent && parent) ||
+		(usage.route && previous.route.id !== next.route.id) ||
+		(usage.url && moved)
+	)
+		return true;
+	if (
+		usage.paramsAll &&
+		(Object.keys(previous.params).length !== Object.keys(next.params).length ||
+			Object.keys(previous.params).some((name) => previous.params[name] !== next.params[name]))
+	)
+		return true;
+	for (const name of usage.params) if (previous.params[name] !== next.params[name]) return true;
+	for (const name of usage.search) {
+		const before = previous.url.searchParams.getAll(name).sort();
+		const after = next.url.searchParams.getAll(name).sort();
+		if (before.length !== after.length || before.some((value, index) => value !== after[index]))
+			return true;
+	}
+	for (const dependency of usage.dependencies)
+		if (changes.dependencies.some((test) => test(new URL(dependency)))) return true;
+	return false;
+}
+
+export class Pages {
+	readonly app: ClientApp;
+	readonly owner: Owner;
+	readonly routes: Routes;
+	readonly state: State;
+	readonly fetches: FetchCache;
+	readonly transport: Transport;
+
+	constructor(
+		app: ClientApp,
+		owner: Owner,
+		routes: Routes,
+		state: State,
+		fetches: FetchCache,
+		transport: Transport
+	) {
+		this.app = app;
+		this.owner = owner;
+		this.routes = routes;
+		this.state = state;
+		this.fetches = fetches;
+		this.transport = transport;
+	}
+
+	async error(error: unknown, intent: NavigationEvent<MatchedParams>): Promise<App.Error> {
+		if (error instanceof HandledError) return error.body;
+		const caught =
+			error instanceof HttpError
+				? { kind: 'app' as const, error: error.body }
+				: error instanceof FrameworkError
+					? { kind: 'framework' as const, error: { status: error.status, message: error.text } }
+					: { kind: 'unknown' as const, error };
+		const fallback =
+			caught.kind === 'unknown' ? { status: 500, message: 'Internal Error' } : caught.error;
+		const body = await this.owner.run(() =>
+			this.app.hooks.handleError?.({ ...caught, event: intent as NavigationEvent })
+		);
+		return { ...fallback, ...body };
+	}
+
+	async node(
+		loader: NodeLoader,
+		server: DataNode | null,
+		intent: Intent,
+		parent: () => Promise<Record<string, any>>
+	): Promise<Branch> {
+		const node = await this.routes.load(loader);
+		const usage = uses();
+		let tracking = true;
+		let data: Record<string, any> | void;
+		const event: LoadEvent<MatchedParams> = {
+			url: makeTrackable(
+				intent.url,
+				() => {
+					if (tracking) usage.url = true;
+				},
+				(name) => {
+					if (tracking) usage.search.add(name);
+				},
+				this.routes.hash
+			),
+			params: new Proxy(intent.params, {
+				get(target, key) {
+					if (tracking && typeof key === 'string') usage.params.add(key);
+					return Reflect.get(target, key);
+				},
+				ownKeys(target) {
+					if (tracking) usage.paramsAll = true;
+					return Reflect.ownKeys(target);
+				}
+			}),
+			route: new Proxy(
+				{ id: intent.route.id },
+				{
+					get(target, key) {
+						if (tracking) usage.route = true;
+						return Reflect.get(target, key);
+					}
+				}
+			),
+			data: server?.data ?? null,
+			fetch: async (input, init) => {
+				const url = new URL(input instanceof Request ? input.url : input, intent.url);
+				if (tracking) usage.dependencies.add(url.href);
+				return this.fetches.fetch(input, init, intent.url);
+			},
+			depends: (...dependencies) => {
+				if (tracking)
+					for (const dependency of dependencies)
+						usage.dependencies.add(new URL(dependency, intent.url).href);
+			},
+			parent: () => {
+				if (tracking) usage.parent = true;
+				return parent();
+			},
+			setHeaders() {},
+			untrack: (fn) => {
+				const before = tracking;
+				tracking = false;
+				try {
+					return fn();
+				} finally {
+					tracking = before;
+				}
+			},
+			tracing: { enabled: false, root: span, current: span }
+		};
+		if (node.universal?.load) {
+			data = await this.fetches.load(() =>
+				this.owner.run(() => node.universal!.load!(event as LoadEvent))
+			);
+			if (data != null && Object.getPrototypeOf(data) !== Object.prototype) {
+				load_invalid_response({
+					location: `related to route '${intent.route.id}'`,
+					type:
+						typeof data !== 'object'
+							? `a ${typeof data}`
+							: data instanceof Response
+								? 'a Response object'
+								: Array.isArray(data)
+									? 'an array'
+									: 'a non-plain object'
+				});
+			}
+		}
+		return {
+			loader,
+			node,
+			server,
+			uses: node.universal?.load ? usage : null,
+			data: data! ?? server?.data ?? empty,
+			slash: node.universal?.trailingSlash ?? server?.slash
+		};
+	}
+
+	async hydrate(value: HydrationPayload, url: URL): Promise<Loaded | DataRedirectNode> {
+		const resolved = value.server_route
+			? this.routes.accept(value.server_route)
+			: this.routes.get(value.route.id ?? '');
+		const route = resolved ?? this.fallback(value.route.id ?? '/');
+		const intent: Intent = { route, params: value.params, url };
+		const ids: Array<number | undefined> = [...value.node_ids];
+		const data = [...value.data];
+		resolved?.layouts.forEach((entry, depth) => {
+			if (!entry) {
+				ids.splice(depth, 0, undefined);
+				data.splice(depth, 0, null);
+			}
+		});
+		const pending: Array<Promise<Branch | undefined>> = ids.map((id, index) =>
+			id === undefined
+				? Promise.resolve(undefined)
+				: this.node(this.app.nodes[id]!, data[index] ?? null, intent, async () => {
+						const ancestors = await Promise.all(pending.slice(0, index));
+						return Object.assign({}, ...ancestors.map((branch) => branch?.data));
+					})
+		);
+		for (const promise of pending) void promise.catch(() => {});
+		const branch: Array<Branch | undefined> = [];
+		for (let depth = 0; depth < pending.length; depth++) {
+			try {
+				branch.push(await pending[depth]);
+			} catch (error) {
+				if (error instanceof Redirect)
+					return { type: 'redirect', status: error.status, location: error.location };
+				return this.failure(
+					intent,
+					branch,
+					depth,
+					await this.error(error, { ...intent, params: intent.params })
+				);
+			}
+		}
+		return {
+			...intent,
+			type: 'loaded',
+			branch,
+			status: value.status ?? value.error?.status ?? 200,
+			error: value.error,
+			form: value.form
+		};
+	}
+
+	async rootError(intent: Intent, error: unknown): Promise<Loaded | DataRedirectNode> {
+		return this.#root(
+			intent,
+			await this.error(error, {
+				url: intent.url,
+				params: {},
+				route: { id: intent.route.id }
+			})
+		);
+	}
+
+	async #root(intent: Intent, body: App.Error): Promise<Loaded | DataRedirectNode> {
+		const fallback: Intent = {
+			url: intent.url,
+			params: {},
+			route: { ...this.fallback(intent.route.id), errors: [] }
+		};
+		let data: DataNode | null = null;
+		const response = this.app.serverLoads.includes(0)
+			? await fetchData(intent.url, [true], this.transport, this.state).catch(() => null)
+			: null;
+		if (response) {
+			if (response.type === 'redirect') return response;
+			const node = response.nodes[0];
+			if (node?.type === 'error') throw new HandledError(node.error);
+			if (node && node.type !== 'data') throw new HandledError(body);
+			data = node ?? null;
+		}
+		let root: Branch;
+		try {
+			root = await this.node(this.app.nodes[0]!, data, fallback, async () => ({}));
+		} catch (error) {
+			if (error instanceof Redirect)
+				return { type: 'redirect', status: error.status, location: error.location };
+			throw error;
+		}
+		const loader = this.app.nodes[1]!;
+		const leaf: Branch = {
+			loader,
+			node: await this.routes.load(loader),
+			server: null,
+			uses: null,
+			data: empty
+		};
+		return {
+			...fallback,
+			type: 'loaded',
+			branch: [root, leaf],
+			error: body,
+			status: body.status,
+			form: null
+		};
+	}
+
+	fallback(id = '/'): Route {
+		return {
+			id,
+			pattern: /^$/,
+			params: [],
+			layouts: [[this.app.serverLoads.includes(0), this.app.nodes[0]!]],
+			errors: [this.app.nodes[1]],
+			leaf: [false, this.app.nodes[1]!]
+		};
+	}
+
+	async load(
+		intent: Intent,
+		previous: Loaded | null,
+		changes: Changes,
+		actionError?: App.Error
+	): Promise<Loaded | DataRedirectNode> {
+		const entries = [...intent.route.layouts, intent.route.leaf];
+		for (const loader of intent.route.errors)
+			if (loader) void this.routes.load(loader).catch(() => {});
+		for (const entry of entries) if (entry) void this.routes.load(entry[1]).catch(() => {});
+		const page = (url: URL) =>
+			this.routes.hash ? url.hash.slice(1) + url.search : this.routes.key(url);
+		const moved = !!previous && page(previous.url) !== page(intent.url);
+		let parent = false;
+		const invalid = entries.map((entry, depth) => {
+			const old = previous?.branch[depth];
+			const reload =
+				!(actionError && depth === entries.length - 1) &&
+				!!entry?.[0] &&
+				(entry[1] !== old?.loader ||
+					changed(
+						old.server ? uses(old.server.uses) : null,
+						previous,
+						intent,
+						changes,
+						parent,
+						moved
+					));
+			parent ||= reload;
+			return reload;
+		});
+		let response: DataResponse | DataRedirectNode | null;
+		try {
+			response = invalid.some(Boolean)
+				? await fetchData(intent.url, invalid, this.transport, this.state)
+				: null;
+		} catch (error) {
+			return this.failure(
+				intent,
+				[],
+				0,
+				await this.error(error, {
+					url: intent.url,
+					route: { id: intent.route.id },
+					params: intent.params
+				})
+			);
+		}
+		if (response?.type === 'redirect') return response;
+		parent = false;
+		const pending: Array<Promise<Branch | undefined>> = entries.map((entry, depth) => {
+			if (!entry || (actionError && depth === entries.length - 1))
+				return Promise.resolve(undefined);
+			const old = previous?.branch[depth];
+			const data = response?.nodes[depth];
+			if (
+				old?.loader === entry[1] &&
+				(!data || data.type === 'skip') &&
+				!changed(old.uses, previous, intent, changes, parent, moved)
+			)
+				return Promise.resolve(old);
+			parent = true;
+			if (data?.type === 'error') return Promise.reject(new HandledError(data.error));
+			return this.node(
+				entry[1],
+				data?.type === 'data' ? data : old?.loader === entry[1] ? old.server : null,
+				intent,
+				async () => {
+					const ancestors = await Promise.all(pending.slice(0, depth));
+					return Object.assign({}, ...ancestors.map((branch) => branch?.data));
+				}
+			);
+		});
+		for (const promise of pending) void promise.catch(() => {});
+		const branch: Array<Branch | undefined> = [];
+		for (let depth = 0; depth < pending.length; depth++) {
+			try {
+				branch.push(await pending[depth]);
+			} catch (error) {
+				if (error instanceof Redirect)
+					return { type: 'redirect', status: error.status, location: error.location };
+				return this.failure(
+					intent,
+					branch,
+					depth,
+					await this.error(error, {
+						url: intent.url,
+						route: { id: intent.route.id },
+						params: intent.params
+					})
+				);
+			}
+		}
+		if (actionError) return this.failure(intent, branch, entries.length, actionError);
+		const url = new URL(intent.url);
+		if (!this.routes.hash) {
+			let slash: TrailingSlash = 'never';
+			for (const node of branch) slash = node?.slash ?? slash;
+			url.pathname = normalizePath(url.pathname, slash);
+		}
+		return { ...intent, url, type: 'loaded', branch, status: 200, error: null, form: null };
+	}
+
+	async failure(
+		intent: Intent,
+		branch: Array<Branch | undefined>,
+		depth: number,
+		error: App.Error
+	): Promise<Loaded | DataRedirectNode> {
+		let index = Math.max(0, Math.min(depth - 1, intent.route.errors.length - 1));
+		while (index > 0 && !intent.route.errors[index]) index--;
+		let loader = intent.route.errors[index] ?? this.app.nodes[1]!;
+		let node: ClientNode;
+		for (;;) {
+			try {
+				node = await this.routes.load(loader);
+				break;
+			} catch (failure) {
+				if (index === 0) throw failure;
+				do {
+					index--;
+				} while (index > 0 && !intent.route.errors[index]);
+				loader = intent.route.errors[index] ?? this.app.nodes[1]!;
+			}
+		}
+		while (
+			index > 0 &&
+			(!branch[index] || branch[index]!.loader !== intent.route.layouts[index]?.[1])
+		)
+			index--;
+		const kept = branch.slice(0, index + 1);
+		if (!kept[0]) return this.#root(intent, error);
+		kept.push({ node, loader, data: {}, server: null, uses: null });
+		return { ...intent, type: 'loaded', branch: kept, status: error.status, error, form: null };
+	}
+}

package/src/client/messages/client-errors/forms.md

@@ -0,0 +1,7 @@
+## enhance_invalid_method
+
+> `use:enhance` can only be used on `<form>` elements with `method="POST"`
+
+## enhance_file_without_enctype
+
+> Your form contains `<input type="file">` fields, but is missing the necessary `enctype="multipart/form-data"` attribute

package/src/client/messages/client-errors/navigation.md

@@ -0,0 +1,23 @@
+## navigation_before_start
+
+> Cannot call `%caller%(...)` before router is initialized
+
+## navigation_external_url
+
+> Cannot use `%caller%` with an external URL. Use `window.location = "%url%"` instead
+
+## navigation_route_missing
+
+> Cannot use `%caller%` with a URL that does not resolve to a route within the app. Use `window.location = "%url%"` instead
+
+## redirect_loop
+
+> Redirect loop while navigating to `%url%`
+
+## reserved_query_parameter
+
+> Cannot use reserved query parameter `%key%`
+
+## scroll_handling_outside_navigation
+
+> Can only disable scroll handling during navigation

package/src/client/messages/client-errors/preload.md

@@ -0,0 +1,7 @@
+## preload_invalid_route_id
+
+> `preloadCode` expects a route ID starting with `/`, but received `%id%`
+
+## preload_url_outside_app
+
+> Attempted to preload a URL that does not belong to this app: `%url%`

package/src/client/messages/client-errors/snapshots.md

@@ -0,0 +1,7 @@
+## snapshot_duplicate_id
+
+> A snapshot with id `%id%` is already registered. Pass a unique `id`.
+
+## snapshot_id_missing
+
+> Could not generate a snapshot id from the stack trace. Pass an `id` instead.

package/src/client/messages/client-warnings/links.md

@@ -0,0 +1,7 @@
+## link_option_invalid
+
+> Unexpected value for `%name%` — should be one of %options%
+
+## link_option_replaced
+
+> `data-%identity%-%name%="true"` has been replaced with `data-%identity%-%replacement%`

package/src/client/messages/client-warnings/preload.md

@@ -0,0 +1,7 @@
+## preload_route_missing
+
+> `%id%` did not match any route
+
+## preload_data_failed
+
+> Preloading data for `%path%` failed with the following error: %message%

package/src/client/navigation.ts

@@ -0,0 +1,79 @@
+import { onDestroy } from 'vigla';
+import { DEV } from 'esm-env';
+import type {
+	AfterNavigate,
+	BeforeNavigate,
+	GotoOptions,
+	Invalidation,
+	NavigationCallback,
+	ShallowCaller,
+	SnapshotOptions
+} from '../types/navigation.ts';
+import { client } from './client.ts';
+import { hash } from '../shared/hash.ts';
+import {
+	navigation_before_start,
+	scroll_handling_outside_navigation,
+	snapshot_id_missing
+} from './errors.ts';
+
+export function goto(url: string | URL, options?: GotoOptions): Promise<void> {
+	return client('goto').goto(url, options);
+}
+export function beforeNavigate(callback: (navigation: BeforeNavigate) => void): void {
+	client('beforeNavigate').lifecycle.before(callback);
+}
+export function onNavigate(callback: NavigationCallback): void {
+	client('onNavigate').lifecycle.on(callback);
+}
+export function afterNavigate(callback: (navigation: AfterNavigate) => void): void {
+	client('afterNavigate').lifecycle.after(callback);
+}
+export function invalidate(value: Invalidation, keepState = false): Promise<void> {
+	return client('invalidate').invalidate(value, keepState);
+}
+export function invalidateAll(): Promise<void> {
+	return client('invalidateAll').invalidate();
+}
+export function refreshAll(): Promise<void> {
+	return client('refreshAll').invalidate(undefined, true);
+}
+export function preloadCode(id: string): Promise<void> {
+	const runtime = client('preloadCode');
+	return runtime.owner.run(() => runtime.routes.preload(id));
+}
+export function preloadData(
+	url: string | URL
+): ReturnType<ReturnType<typeof client>['preloadData']> {
+	return client('preloadData').preloadData(url);
+}
+export function disableScrollHandling(): void {
+	const runtime = client('disableScrollHandling');
+	if (!runtime.updating) scroll_handling_outside_navigation();
+	runtime.restoration.disableScroll();
+}
+export function shallow(
+	caller: ShallowCaller,
+	url: string | URL,
+	state: App.PageState
+): Promise<void> {
+	const runtime = client(caller);
+	if (DEV && !runtime.started) navigation_before_start({ caller });
+	return runtime.shallow(url, state, caller);
+}
+export function snapshot<T>(options: SnapshotOptions<T>): void {
+	const runtime = client('snapshot');
+	let id = options.id;
+	if (id === undefined) {
+		const limit = Error.stackTraceLimit;
+		if (typeof limit === 'number' && limit < 3) Error.stackTraceLimit = 3;
+		const frames = new Error().stack?.split('\n');
+		Error.stackTraceLimit = limit;
+		const frame = frames?.[0]?.trim() === 'Error' ? frames[2] : frames?.[1];
+		if (!frame) snapshot_id_missing();
+		id = hash(frame.replace(/\?[^)\s]*(?=:\d+:\d+\)?$)/, ''));
+	}
+	onDestroy(
+		runtime.restoration.register(id, options, runtime.updating ? null : runtime.history.index)
+	);
+}

package/src/client/origin.ts

@@ -0,0 +1,3 @@
+export function getOrigin(): string {
+	return location.origin;
+}

package/src/client/paths.ts

@@ -0,0 +1,35 @@
+import type {
+	PathnameWithSearchOrHash,
+	ResolvedPathname,
+	RouteIdWithSearchOrHash,
+	AssetPath
+} from '$app/types';
+import type { ResolveArgs, RouteMatch } from '../types/paths.ts';
+import type { ParamValue } from '../types/params.ts';
+import { resolveRoute } from '../shared/routing/index.ts';
+import { resolve_params_missing } from '../shared/errors.ts';
+import { base, assets, hashRouting } from './payload.ts';
+
+export { base, assets, appDir as app_dir } from './payload.ts';
+let matcher: (url: URL | string) => Promise<RouteMatch | null> = async () => null;
+
+export function setMatcher(value: typeof matcher): void {
+	matcher = value;
+}
+
+export function asset(file: AssetPath): string {
+	return `${assets || base}/${file}`;
+}
+
+export function resolve<T extends RouteIdWithSearchOrHash | PathnameWithSearchOrHash>(
+	...args: ResolveArgs<T>
+): ResolvedPathname {
+	const [id, params] = args as [string, Record<string, ParamValue | undefined>?];
+	if (id.startsWith('/') && id.includes('[') && !params) resolve_params_missing({ id });
+	const path = id.startsWith('/') ? resolveRoute(id, params ?? {}) : `/${id}`;
+	return `${hashRouting ? '#' : base}${path}` as ResolvedPathname;
+}
+
+export function match(url: URL | string): Promise<RouteMatch | null> {
+	return matcher(url);
+}

package/src/client/payload.ts

@@ -0,0 +1,31 @@
+import type { ClientGlobal, ClientPayload } from '../types/internal/client.ts';
+import { Chunks } from './chunks.ts';
+
+export let payload: ClientPayload = {};
+export let chunks = new Chunks();
+export let base = '';
+export let assets = '';
+export let appDir = '_app';
+export let version = '';
+export let env: Record<string, unknown> = {};
+export let hashRouting = false;
+
+let initialized: ClientGlobal | null = null;
+
+export function init(value: ClientPayload): ClientGlobal {
+	if (initialized === value) return initialized;
+	const channel = new Chunks();
+	chunks = channel;
+	payload = value;
+	hashRouting = value.hash ?? false;
+	base = value.base ?? '';
+	assets = value.assets ?? base;
+	appDir = value.app_dir ?? '_app';
+	version = value.version ?? '';
+	env = value.env ?? {};
+	initialized = Object.assign(value, {
+		defer: channel.defer.bind(channel),
+		resolve: channel.resolve.bind(channel)
+	});
+	return initialized;
+}