@vigla/kit 0.0.0-stage → 0.1.0

package/src/client/data.ts

@@ -0,0 +1,144 @@
+import type {
+	DataResponse,
+	DataRedirectNode,
+	DataChunkNode,
+	EncodedDataResponse
+} from '../types/internal/data.ts';
+import { addDataSuffix } from '../shared/pathname.ts';
+import { HttpError } from '../shared/outcomes.ts';
+import { readNdjson } from './stream.ts';
+import { reserved_query_parameter } from './errors.ts';
+import type { State } from './state.ts';
+import type { Transport } from './transport.ts';
+import { identity } from '../shared/identity.ts';
+
+interface Deferred {
+	resolve(value: unknown): void;
+	reject(error: unknown): void;
+}
+
+function message(value: unknown): EncodedDataResponse | DataRedirectNode | DataChunkNode {
+	if (!value || typeof value !== 'object' || !('type' in value))
+		throw new TypeError('Invalid data response');
+	if (value.type === 'data' && 'nodes' in value && Array.isArray(value.nodes)) {
+		for (const node of value.nodes) {
+			if (node === null) continue;
+			if (!node || typeof node !== 'object') throw new TypeError('Invalid data node');
+			if (node.type === 'skip') continue;
+			if (node.type === 'error' && node.error && typeof node.error.message === 'string') continue;
+			if (node.type !== 'data' || !node.uses || typeof node.uses !== 'object')
+				throw new TypeError('Invalid data node');
+			for (const key of ['dependencies', 'params', 'search_params']) {
+				if (
+					node.uses[key] !== undefined &&
+					(!Array.isArray(node.uses[key]) ||
+						node.uses[key].some((entry: unknown) => typeof entry !== 'string'))
+				)
+					throw new TypeError('Invalid data dependencies');
+			}
+		}
+		return value as EncodedDataResponse;
+	}
+	if (
+		value.type === 'redirect' &&
+		'location' in value &&
+		typeof value.location === 'string' &&
+		'status' in value &&
+		typeof value.status === 'number'
+	)
+		return value as DataRedirectNode;
+	if (
+		value.type === 'chunk' &&
+		'id' in value &&
+		typeof value.id === 'number' &&
+		Number.isSafeInteger(value.id) &&
+		value.id >= 0
+	)
+		return value as DataChunkNode;
+	throw new TypeError('Invalid data response');
+}
+
+export function readData(
+	response: Response,
+	transport: Transport
+): Promise<DataResponse | DataRedirectNode> {
+	const first = Promise.withResolvers<DataResponse | DataRedirectNode>();
+	const pending = new Map<number, Deferred>();
+	let received = false;
+	function revive(value: any): any {
+		return transport.unflatten(value, {
+			Promise: (id: number) => {
+				const deferred = Promise.withResolvers<unknown>();
+				pending.set(id, deferred);
+				void deferred.promise.catch(() => {});
+				return deferred.promise;
+			}
+		});
+	}
+	void (async () => {
+		try {
+			if (!response.body) throw new TypeError('Empty data response');
+			for await (const value of readNdjson(response.body.getReader())) {
+				const frame = message(value);
+				if (frame.type === 'redirect') {
+					received = true;
+					first.resolve(frame);
+					return;
+				}
+				if (frame.type === 'data') {
+					if (received) throw new TypeError('Duplicate data response');
+					const result: DataResponse = {
+						type: 'data',
+						nodes: frame.nodes.map((node) =>
+							node?.type === 'data' ? { ...node, data: revive(node.data) } : node
+						)
+					};
+					received = true;
+					first.resolve(result);
+				} else {
+					const deferred = pending.get(frame.id);
+					if (!deferred) throw new TypeError('Unknown deferred data id');
+					pending.delete(frame.id);
+					if ('error' in frame) deferred.reject(revive(frame.error));
+					else deferred.resolve(revive(frame.data));
+				}
+			}
+			if (!received || pending.size) throw new TypeError('Incomplete data response');
+		} catch (error) {
+			first.reject(error);
+			for (const deferred of pending.values()) deferred.reject(error);
+			pending.clear();
+		}
+	})();
+	return first.promise;
+}
+
+export async function fetchData(
+	url: URL,
+	invalid: boolean[],
+	transport: Transport,
+	state: State
+): Promise<DataResponse | DataRedirectNode> {
+	const reserved = `x-${identity.name}-`;
+	for (const key of url.searchParams.keys())
+		if (key.startsWith(reserved)) reserved_query_parameter({ key });
+	const dataUrl = new URL(url);
+	dataUrl.pathname = addDataSuffix(url.pathname);
+	if (url.pathname.endsWith('/')) dataUrl.searchParams.set(`${reserved}trailing-slash`, '1');
+	dataUrl.searchParams.set(
+		`${reserved}invalidated`,
+		invalid.map((value) => Number(value)).join('')
+	);
+	const response = await fetch(dataUrl);
+	state.notify(response.headers.get(`${reserved}version`));
+	if (!response.ok) {
+		let body: App.Error = {
+			status: response.status,
+			message: response.status === 404 ? 'Not Found' : 'Internal Error'
+		};
+		if (response.headers.get('content-type')?.includes('application/json'))
+			body = { ...body, ...(await response.json()) };
+		throw new HttpError(body);
+	}
+	return readData(response, transport);
+}

package/src/client/entry.ts

@@ -0,0 +1,3 @@
+export { init } from './payload.ts';
+export { start } from './client.ts';
+export { loadCss as load_css } from './routes.ts';

package/src/client/errors.ts

@@ -0,0 +1,172 @@
+import { DEV } from 'esm-env';
+import { throwCode, throwDiagnostic } from '../shared/diagnostics.ts';
+
+interface Caller {
+	caller: string;
+}
+interface Destination extends Caller {
+	url: string;
+}
+interface Route {
+	id: string;
+}
+interface Url {
+	url: string;
+}
+interface Key {
+	key: string;
+}
+
+export function navigation_before_start(values: Caller): never {
+	if (DEV)
+		throwDiagnostic(
+			'navigation_before_start',
+			`Cannot call \`${values.caller}(...)\` before router is initialized`,
+			navigation_before_start
+		);
+	throwCode('navigation_before_start');
+}
+export function navigation_external_url(values: Destination): never {
+	if (DEV)
+		throwDiagnostic(
+			'navigation_external_url',
+			`Cannot use \`${values.caller}\` with an external URL. Use \`window.location = "${values.url}"\` instead`,
+			navigation_external_url
+		);
+	throwCode('navigation_external_url');
+}
+export function navigation_route_missing(values: Destination): never {
+	if (DEV)
+		throwDiagnostic(
+			'navigation_route_missing',
+			`Cannot use \`${values.caller}\` with a URL that does not resolve to a route within the app. Use \`window.location = "${values.url}"\` instead`,
+			navigation_route_missing
+		);
+	throwCode('navigation_route_missing');
+}
+export function redirect_loop(values: Url): never {
+	if (DEV)
+		throwDiagnostic(
+			'redirect_loop',
+			`Redirect loop while navigating to \`${values.url}\``,
+			redirect_loop
+		);
+	throwCode('redirect_loop');
+}
+export function reserved_query_parameter(values: Key): never {
+	if (DEV)
+		throwDiagnostic(
+			'reserved_query_parameter',
+			`Cannot use reserved query parameter \`${values.key}\``,
+			reserved_query_parameter
+		);
+	throwCode('reserved_query_parameter');
+}
+export function scroll_handling_outside_navigation(): never {
+	if (DEV)
+		throwDiagnostic(
+			'scroll_handling_outside_navigation',
+			'Can only disable scroll handling during navigation',
+			scroll_handling_outside_navigation
+		);
+	throwCode('scroll_handling_outside_navigation');
+}
+export function preload_invalid_route_id(values: Route): never {
+	if (DEV)
+		throwDiagnostic(
+			'preload_invalid_route_id',
+			`\`preloadCode\` expects a route ID starting with \`/\` (such as \`/blog/[slug]\`), but received \`${values.id}\``,
+			preload_invalid_route_id
+		);
+	throwCode('preload_invalid_route_id');
+}
+export function preload_url_outside_app(values: Url): never {
+	if (DEV)
+		throwDiagnostic(
+			'preload_url_outside_app',
+			`Attempted to preload a URL that does not belong to this app: \`${values.url}\``,
+			preload_url_outside_app
+		);
+	throwCode('preload_url_outside_app');
+}
+export function snapshot_duplicate_id(values: { id: string }): never {
+	if (DEV)
+		throwDiagnostic(
+			'snapshot_duplicate_id',
+			`A snapshot with id \`${values.id}\` is already registered. Pass a unique \`id\`.`,
+			snapshot_duplicate_id
+		);
+	throwCode('snapshot_duplicate_id');
+}
+export function snapshot_id_missing(): never {
+	if (DEV)
+		throwDiagnostic(
+			'snapshot_id_missing',
+			'Could not generate a snapshot id from the stack trace. Pass an `id` instead.',
+			snapshot_id_missing
+		);
+	throwCode('snapshot_id_missing');
+}
+export function enhance_invalid_method(): never {
+	if (DEV)
+		throwDiagnostic(
+			'enhance_invalid_method',
+			'`use:enhance` can only be used on `<form>` elements with `method="POST"`',
+			enhance_invalid_method
+		);
+	throwCode('enhance_invalid_method');
+}
+export function remote_form_multiple_elements(): never {
+	if (DEV)
+		throwDiagnostic(
+			'remote_form_multiple_elements',
+			'A form object can only be attached to a single `<form>` element',
+			remote_form_multiple_elements
+		);
+	throwCode('remote_form_multiple_elements');
+}
+export function remote_form_not_attached(): never {
+	if (DEV)
+		throwDiagnostic(
+			'remote_form_not_attached',
+			'Cannot call `submit()` before the form is attached',
+			remote_form_not_attached
+		);
+	throwCode('remote_form_not_attached');
+}
+export function remote_form_reserved_field(): never {
+	if (DEV)
+		throwDiagnostic(
+			'remote_form_reserved_field',
+			'`$` is used to collect all FormData validation issues and cannot be used as the `name` of a form control',
+			remote_form_reserved_field
+		);
+	throwCode('remote_form_reserved_field');
+}
+export function remote_form_mixed_inputs(values: { name: string }): never {
+	if (DEV)
+		throwDiagnostic(
+			'remote_form_mixed_inputs',
+			`Cannot mix and match file and non-file inputs under the same name (\`${values.name}\`)`,
+			remote_form_mixed_inputs
+		);
+	throwCode('remote_form_mixed_inputs');
+}
+export function remote_form_multiple_files(values: { name: string }): never {
+	if (DEV)
+		throwDiagnostic(
+			'remote_form_multiple_files',
+			`Can only use the \`multiple\` attribute when \`name\` includes a \`[]\` suffix — consider changing \`${values.name}\` to \`${values.name}[]\``,
+			remote_form_multiple_files
+		);
+	throwCode('remote_form_multiple_files');
+}
+export function enhance_file_without_enctype(): never {
+	if (DEV)
+		throwDiagnostic(
+			'enhance_file_without_enctype',
+			'Your form contains `<input type="file">` fields, but is missing the necessary `enctype="multipart/form-data"` attribute',
+			enhance_file_without_enctype
+		);
+	throwCode('enhance_file_without_enctype');
+}

package/src/client/fetch.ts

@@ -0,0 +1,131 @@
+import { hashRequest } from '../shared/hash.ts';
+import { decodeBase64 } from './stream.ts';
+import { DEV } from 'esm-env';
+import { window_fetch_in_load } from './warnings.ts';
+import { identity } from '../shared/identity.ts';
+
+interface Cached {
+	body: BodyInit | null;
+	init: ResponseInit;
+	expires: number;
+	url: string;
+}
+
+export class FetchCache {
+	initial = true;
+	readonly #cache = new Map<string, Cached>();
+	readonly #internal = new WeakSet<RequestInit>();
+	#loading = 0;
+
+	async load<T>(callback: () => T | Promise<T>): Promise<T> {
+		this.#loading++;
+		try {
+			return await callback();
+		} finally {
+			this.#loading--;
+		}
+	}
+
+	observe(): () => void {
+		const native = globalThis.fetch;
+		let active = true;
+		const observed: typeof fetch = (input, init) => {
+			if (active) {
+				const url = new URL(input instanceof Request ? input.url : input, location.href);
+				if (DEV && this.#loading && (!init || !this.#internal.has(init)))
+					window_fetch_in_load({ url: url.href });
+				const method = init?.method ?? (input instanceof Request ? input.method : 'GET');
+				if (method.toUpperCase() !== 'GET') {
+					const requested =
+						url.origin === location.origin ? url.href.slice(url.origin.length) : url.href;
+					for (const [key, cached] of this.#cache)
+						if (cached.url === requested) this.#cache.delete(key);
+				}
+			}
+			return native(input, init);
+		};
+		globalThis.fetch = observed;
+		return () => {
+			active = false;
+			this.#cache.clear();
+			if (globalThis.fetch === observed) globalThis.fetch = native;
+		};
+	}
+
+	async fetch(
+		input: RequestInfo | URL,
+		options: RequestInit | undefined,
+		page: URL
+	): Promise<Response> {
+		let init = options;
+		if (input instanceof Request) {
+			init = {
+				method: input.method,
+				headers: [...input.headers].length ? input.headers : undefined,
+				body:
+					input.method === 'GET' || input.method === 'HEAD'
+						? undefined
+						: new Uint8Array(await input.clone().arrayBuffer()),
+				cache: input.cache,
+				credentials: input.credentials,
+				integrity: input.integrity,
+				keepalive: input.keepalive,
+				mode: input.mode,
+				redirect: input.redirect,
+				referrer: input.referrer,
+				referrerPolicy: input.referrerPolicy,
+				signal: input.signal,
+				...options
+			};
+		}
+		const url = new URL(input instanceof Request ? input.url : input, page);
+		const requested = url.origin === page.origin ? url.href.slice(url.origin.length) : url.href;
+		const body = init?.body;
+		const replayable = !body || typeof body === 'string' || ArrayBuffer.isView(body);
+		const digest =
+			replayable && (init?.headers || body)
+				? hashRequest(init?.headers, body as string | ArrayBufferView | undefined)
+				: '';
+		const key = JSON.stringify([requested, digest]);
+		if (this.initial && replayable) {
+			const script = [
+				...document.querySelectorAll<HTMLScriptElement>(`script[data-${identity.name}-fetched]`)
+			].find(
+				(script) =>
+					script.getAttribute('data-url') === requested &&
+					(script.getAttribute('data-hash') ?? '') === digest
+			);
+			if (script?.textContent) {
+				const {
+					body: text,
+					...response
+				}: { body: string; status: number; statusText?: string; headers?: Record<string, string> } =
+					JSON.parse(script.textContent);
+				script.remove();
+				const value = script.hasAttribute('data-b64') ? decodeBase64(text) : text;
+				const ttl = Number(script.getAttribute('data-ttl'));
+				if (ttl > 0)
+					this.#cache.set(key, {
+						url: requested,
+						body: value,
+						init: response,
+						expires: performance.now() + ttl * 1000
+					});
+				return new Response(value, response);
+			}
+		}
+		const cached = replayable && this.#cache.get(key);
+		if (cached) {
+			if (
+				performance.now() < cached.expires &&
+				(!init?.cache || ['default', 'force-cache', 'only-if-cached'].includes(init.cache))
+			) {
+				return new Response(cached.body, cached.init);
+			}
+			this.#cache.delete(key);
+		}
+		const outgoing = { ...init };
+		this.#internal.add(outgoing);
+		return globalThis.fetch(url, outgoing);
+	}
+}

package/src/client/forms.ts

@@ -0,0 +1,156 @@
+import { DEV } from 'esm-env';
+import type {
+	ActionResult,
+	Enhancement,
+	FormUpdateOptions,
+	SubmitFunction,
+	SubmitResult
+} from '../types/forms.ts';
+import { HttpError, FrameworkError } from '../shared/outcomes.ts';
+import { client } from './client.ts';
+import { enhance_file_without_enctype, enhance_invalid_method } from './errors.ts';
+import { identity } from '../shared/identity.ts';
+
+export function deserialize<
+	Success extends Record<string, unknown> | undefined = Record<string, any>,
+	Failure extends Record<string, unknown> | undefined = Record<string, any>
+>(value: string): ActionResult<Success, Failure> {
+	const result = JSON.parse(value);
+	if (result && typeof result.data === 'string')
+		result.data = client('deserialize').transport.parse(result.data);
+	return result;
+}
+
+export function applyAction<
+	Success extends Record<string, unknown> | undefined,
+	Failure extends Record<string, unknown> | undefined
+>(result: ActionResult<Success, Failure>): Promise<void> {
+	return client('applyAction').applyAction(result);
+}
+
+export function enhance<
+	Success extends Record<string, unknown> | undefined = Record<string, any>,
+	Failure extends Record<string, unknown> | undefined = Record<string, any>
+>(form: HTMLFormElement, submit: SubmitFunction<Success, Failure> = () => {}): Enhancement {
+	const runtime = client('enhance');
+	const clone = () => HTMLFormElement.prototype.cloneNode.call(form) as HTMLFormElement;
+	if (DEV && clone().method !== 'post') enhance_invalid_method();
+
+	async function update(result: ActionResult, options: FormUpdateOptions = {}): Promise<void> {
+		const refresh = options.refreshAll ?? result.type === 'success';
+		if (result.type === 'success' && options.reset !== false)
+			HTMLFormElement.prototype.reset.call(form);
+		const destination =
+			options.navigate !== false && result.location ? runtime.url(result.location) : null;
+		if (!destination || runtime.routes.outside(destination)) {
+			if (refresh && result.type !== 'redirect') await runtime.invalidate(undefined, true);
+			await runtime.applyAction(result);
+		} else await runtime.applySubmission(destination, result, refresh);
+	}
+
+	async function handle(event: SubmitEvent): Promise<void> {
+		const submitter = event.submitter as HTMLButtonElement | HTMLInputElement | null;
+		const copy = clone();
+		const method = submitter?.hasAttribute('formmethod') ? submitter.formMethod : copy.method;
+		if (method !== 'post') return;
+		event.preventDefault();
+		const action = runtime.url(
+			submitter?.hasAttribute('formaction') ? submitter.formAction : copy.action
+		);
+		const enctype = submitter?.hasAttribute('formenctype') ? submitter.formEnctype : copy.enctype;
+		const initial = new FormData(form, submitter);
+		if (
+			DEV &&
+			enctype !== 'multipart/form-data' &&
+			[...initial.values()].some((value) => value instanceof File)
+		)
+			enhance_file_without_enctype();
+		const controller = new AbortController();
+		let cancelled = false;
+		const input = {
+			action,
+			formData: initial,
+			formElement: form,
+			controller,
+			submitter,
+			cancel() {
+				cancelled = true;
+			}
+		};
+		const callback = await runtime.owner.run(() => submit(input));
+		if (cancelled) return;
+		const formData = input.formData;
+		let result: ActionResult;
+		try {
+			const headers = new Headers({
+				accept: 'application/json',
+				[`x-${identity.name}-action`]: 'true'
+			});
+			let body: FormData | URLSearchParams = formData;
+			if (enctype !== 'multipart/form-data') {
+				headers.set(
+					'content-type',
+					['application/x-www-form-urlencoded', 'text/plain'].includes(enctype)
+						? enctype
+						: 'application/x-www-form-urlencoded'
+				);
+				body = new URLSearchParams(
+					[...formData].map(([key, value]) => [key, typeof value === 'string' ? value : value.name])
+				);
+			}
+			const response = await fetch(action, {
+				method: 'POST',
+				headers,
+				body,
+				signal: controller.signal,
+				cache: 'no-store'
+			});
+			runtime.state.notify(response.headers.get(`x-${identity.name}-version`));
+			const text = await response.text();
+			let parsed: any;
+			try {
+				parsed = text ? deserialize(text) : undefined;
+			} catch (error) {
+				if (response.ok && !response.redirected) throw error;
+			}
+			if (parsed && ['success', 'failure', 'redirect', 'error'].includes(parsed.type)) {
+				result = parsed;
+				if (result.type === 'failure' || result.type === 'error') result.status = response.status;
+			} else if (response.redirected)
+				result = { type: 'redirect', status: 303, location: response.url };
+			else if (!response.ok) {
+				if (parsed && typeof parsed.message === 'string')
+					throw new HttpError({ ...parsed, status: response.status });
+				throw new FrameworkError(response.status, response.statusText || `HTTP ${response.status}`);
+			} else throw new TypeError('Invalid action response');
+		} catch (error) {
+			if (error instanceof Error && error.name === 'AbortError') return;
+			const body = await runtime.pages.error(error, {
+				url: action,
+				params: {},
+				route: { id: null }
+			});
+			result = { type: 'error', status: body.status, error: body };
+		}
+		if (callback) {
+			await runtime.owner.run(() =>
+				callback({
+					action,
+					formData,
+					formElement: form,
+					result,
+					update: (options) => update(result, options)
+				} as SubmitResult<Success, Failure>)
+			);
+		} else await update(result);
+	}
+	const listener = (event: Event) => {
+		void handle(event as SubmitEvent);
+	};
+	HTMLFormElement.prototype.addEventListener.call(form, 'submit', listener);
+	return {
+		destroy() {
+			HTMLFormElement.prototype.removeEventListener.call(form, 'submit', listener);
+		}
+	};
+}