@vigla/kit 0.0.0-stage → 0.1.0

package/src/client/stream.ts

@@ -0,0 +1,65 @@
+export async function* readStream(
+	reader: ReadableStreamDefaultReader<Uint8Array>,
+	delimiter: string,
+	options?: TextDecoderOptions
+): AsyncGenerator<string> {
+	if (!delimiter.length) throw new TypeError('A stream delimiter cannot be empty');
+	const decoder = new TextDecoder('utf-8', options);
+	const fragments: string[] = [];
+	let pending = '';
+	try {
+		while (true) {
+			const { value, done } = await reader.read();
+			pending += done ? decoder.decode() : decoder.decode(value, { stream: true });
+			let end: number;
+			while ((end = pending.indexOf(delimiter)) >= 0) {
+				fragments.push(pending.slice(0, end));
+				yield fragments.join('');
+				fragments.length = 0;
+				pending = pending.slice(end + delimiter.length);
+			}
+			if (done) break;
+			const stable = Math.max(0, pending.length - delimiter.length + 1);
+			if (stable) fragments.push(pending.slice(0, stable));
+			pending = pending.slice(stable);
+		}
+		if (pending || fragments.length) yield fragments.join('') + pending;
+	} finally {
+		try {
+			await reader.cancel();
+		} finally {
+			reader.releaseLock();
+		}
+	}
+}
+
+export async function* readNdjson(
+	reader: ReadableStreamDefaultReader<Uint8Array>
+): AsyncGenerator<unknown> {
+	for await (const line of readStream(reader, '\n', { fatal: true })) {
+		if (line.trim()) yield JSON.parse(line);
+	}
+}
+
+export function streamFrom<T>(values: AsyncIterable<T> | Iterable<T>): ReadableStream<T> {
+	const iterator =
+		Symbol.asyncIterator in values ? values[Symbol.asyncIterator]() : values[Symbol.iterator]();
+	return new ReadableStream<T>({
+		async pull(controller) {
+			try {
+				const next = await iterator.next();
+				if (next.done) controller.close();
+				else controller.enqueue(next.value);
+			} catch (error) {
+				controller.error(error);
+			}
+		},
+		async cancel() {
+			await iterator.return?.();
+		}
+	});
+}
+
+export function decodeBase64(value: string): Uint8Array<ArrayBuffer> {
+	return Uint8Array.from(atob(value), (character) => character.charCodeAt(0));
+}

package/src/client/transport.ts

@@ -0,0 +1,25 @@
+import { parse, stringify, unflatten } from 'devalue';
+import type { Owner } from 'vigla';
+import type { ClientApp } from '../types/internal/client.ts';
+
+export class Transport {
+	readonly #app: ClientApp;
+	readonly #owner: Owner;
+
+	constructor(app: ClientApp, owner: Owner) {
+		this.#app = app;
+		this.#owner = owner;
+	}
+
+	parse(value: string): any {
+		return this.#owner.run(() => parse(value, this.#app.decoders));
+	}
+
+	stringify(value: unknown): string {
+		return this.#owner.run(() => stringify(value, this.#app.encoders));
+	}
+
+	unflatten(value: any, decoders: Record<string, (value: any) => any> = {}): any {
+		return this.#owner.run(() => unflatten(value, { ...this.#app.decoders, ...decoders }));
+	}
+}

package/src/client/view.ts

@@ -0,0 +1,178 @@
+import { cell, hydrate, mount, unmount, settled, type Exports, type Owner } from 'vigla';
+import { errorGuards } from '../shared/render.ts';
+import type { ClientApp, RenderNode, RootProps } from '../types/internal/client.ts';
+import type { Component } from 'vigla';
+import type { Loaded } from './load.ts';
+import type { State } from './state.ts';
+import type { Routes } from './routes.ts';
+
+type ErrorTransform = (error: unknown) => Promise<App.Error>;
+
+class Tree implements RenderNode {
+	readonly #component = cell<Component<any, any>>(null!);
+	readonly #error = cell<Component<any, any> | undefined>(undefined);
+	readonly #data = cell<Record<string, any>>({});
+	readonly #child = cell<RenderNode | null>(null);
+	get component(): Component<any, any> {
+		return this.#component.current;
+	}
+	set component(value: Component<any, any>) {
+		this.#component.current = value;
+	}
+	get error(): Component<any, any> | undefined {
+		return this.#error.current;
+	}
+	set error(value: Component<any, any> | undefined) {
+		this.#error.current = value;
+	}
+	get data(): Record<string, any> {
+		return this.#data.current;
+	}
+	set data(value: Record<string, any>) {
+		this.#data.current = value;
+	}
+	get child(): RenderNode | null {
+		return this.#child.current;
+	}
+	set child(value: RenderNode | null) {
+		this.#child.current = value;
+	}
+}
+
+export class View {
+	readonly components: Exports[] = [];
+	readonly #trees: Tree[] = [];
+	#branches: Loaded['branch'] = [];
+	readonly #root = cell<RenderNode>(null!);
+	readonly #resets = new Set<() => void>();
+	readonly #pendingResets = new Set<() => void>();
+	readonly #app: ClientApp;
+	readonly #owner: Owner;
+	readonly #target: HTMLElement;
+	readonly #state: State;
+	readonly #routes: Routes;
+	readonly #transformError: ErrorTransform;
+	#instance: Record<string, unknown> | undefined;
+
+	constructor(
+		app: ClientApp,
+		owner: Owner,
+		target: HTMLElement,
+		state: State,
+		routes: Routes,
+		transformError: ErrorTransform
+	) {
+		this.#app = app;
+		this.#owner = owner;
+		this.#target = target;
+		this.#state = state;
+		this.#routes = routes;
+		this.#transformError = transformError;
+	}
+
+	async prepare(result: Loaded, state: App.PageState, hydratePage = false): Promise<() => void> {
+		const guards = errorGuards(
+			result.branch.flatMap((node, depth) => (node ? [depth] : [])),
+			result.route.errors
+		);
+		const errors = await Promise.all(
+			guards.map((guard) => {
+				const loader = guard === undefined ? undefined : result.route.errors[guard];
+				return loader
+					? this.#routes
+							.load(loader)
+							.then((node) => node.component)
+							.catch(() => undefined)
+					: undefined;
+			})
+		);
+		return () => this.#commit(result, state, errors, hydratePage);
+	}
+
+	#commit(
+		result: Loaded,
+		state: App.PageState,
+		errors: Array<Component<any, any> | undefined>,
+		hydratePage: boolean
+	): void {
+		for (const reset of this.#resets) this.#pendingResets.add(reset);
+		this.#resets.clear();
+		let data: Record<string, any> = {};
+		let depth = 0;
+		let parent: Tree | undefined;
+		let changed = false;
+		for (const [index, branch] of result.branch.entries()) {
+			if (!branch) continue;
+			const tree = (this.#trees[depth] ??= new Tree());
+			changed ||= !this.#branches[index] || branch.data !== this.#branches[index]!.data;
+			data = changed ? { ...data, ...branch.data } : tree.data;
+			tree.component = branch.node.component;
+			tree.error = errors[depth];
+			tree.data = data;
+			if (parent) parent.child = tree;
+			else this.#root.current = tree;
+			parent = tree;
+			depth++;
+		}
+		if (parent) parent.child = null;
+		this.#trees.length = depth;
+		this.#branches = result.branch;
+		this.#state.update({
+			url: new URL(result.url),
+			params: result.params,
+			route: { id: result.route.id },
+			status: result.status,
+			data,
+			form: result.form,
+			error: result.error,
+			state,
+			shallow: null
+		});
+		if (!this.#instance) {
+			const view = this;
+			const props: RootProps = {
+				page: this.#state.page,
+				components: this.components,
+				get tree() {
+					return view.#root.current;
+				},
+				get form() {
+					return view.#state.page.form;
+				},
+				get error() {
+					return view.#state.page.error;
+				},
+				onerror: (_error, reset) => {
+					this.#resets.add(reset);
+				}
+			};
+			this.#instance = this.#owner.run(() =>
+				(hydratePage ? hydrate : mount)(this.#app.root, {
+					target: this.#target,
+					props,
+					format: this.#app.format,
+					intro: !hydratePage,
+					transformError: this.#transformError
+				})
+			);
+		}
+	}
+
+	async settle(): Promise<void> {
+		const resets = [...this.#pendingResets];
+		this.#pendingResets.clear();
+		await settled();
+		for (const reset of resets) reset();
+		if (resets.length) await settled();
+	}
+
+	error(html: string): void {
+		const parsed = new DOMParser().parseFromString(html, 'text/html');
+		document.head.replaceWith(document.adoptNode(parsed.head));
+		document.body.replaceWith(document.adoptNode(parsed.body));
+	}
+
+	dispose(): void {
+		if (this.#instance) void unmount(this.#instance);
+	}
+}

package/src/client/warnings.ts

@@ -0,0 +1,66 @@
+import { warnDiagnostic } from '../shared/diagnostics.ts';
+import { identity } from '../shared/identity.ts';
+
+interface Route {
+	id: string;
+}
+interface Link {
+	name: string;
+	options: string;
+}
+interface Preload {
+	path: string;
+	message: string;
+}
+
+export function window_fetch_in_load(values: { url: string }): void {
+	warnDiagnostic(
+		'window_fetch_in_load',
+		`Loading \`${values.url}\` using \`window.fetch\`. For best results, use the \`fetch\` that is passed to your \`load\` function`
+	);
+}
+export function app_body_unwrapped(values: { tag: string }): void {
+	warnDiagnostic(
+		'app_body_unwrapped',
+		`Placing \`${values.tag}\` directly inside \`<body>\` is not recommended, as your app may break for users who have certain browser extensions installed`
+	);
+}
+export function history_api_conflict(): void {
+	warnDiagnostic(
+		'history_api_conflict',
+		`Avoid using \`history.pushState(...)\` and \`history.replaceState(...)\` as these will conflict with ${identity.product}'s router. Use \`goto(...)\` from \`$app/navigation\` instead.`
+	);
+}
+export function preload_route_is_pathname(values: Route): void {
+	warnDiagnostic(
+		'preload_route_is_pathname',
+		`\`${values.id}\` did not match any route, but it does match as a pathname — use \`match(...)\` from \`$app/paths\` to convert a pathname into a route ID`
+	);
+}
+export function preload_code_endpoint_only(values: Route): void {
+	warnDiagnostic(
+		'preload_code_endpoint_only',
+		`\`${values.id}\` has no \`+page\`, so there is no code to preload. If you meant to warm up an endpoint, request it with \`fetch\` instead.`
+	);
+}
+export function preload_route_missing(values: Route): void {
+	warnDiagnostic('preload_route_missing', `\`${values.id}\` did not match any route`);
+}
+export function preload_data_failed(values: Preload): void {
+	warnDiagnostic(
+		'preload_data_failed',
+		`Preloading data for \`${values.path}\` failed with the following error: ${values.message}`
+	);
+}
+export function link_option_invalid(values: Link): void {
+	warnDiagnostic(
+		'link_option_invalid',
+		`Unexpected value for \`${values.name}\` — should be one of ${values.options}`
+	);
+}
+export function link_option_replaced(values: { name: string; replacement: string }): void {
+	warnDiagnostic(
+		'link_option_replaced',
+		`\`data-${identity.name}-${values.name}="true"\` has been replaced with \`data-${identity.name}-${values.replacement}\``
+	);
+}

package/src/components/fallbacks.ts

@@ -0,0 +1,18 @@
+import type { ComponentUnit } from 'vigla/compiler';
+import { element, render, show, Source, text } from './source.ts';
+
+export function layout(): ComponentUnit {
+	const source = new Source();
+	const instance = source.program('const { children } = $props();');
+	return source.unit('kit:layout', instance, [render(source, 'children()')]);
+}
+
+export function error(): ComponentUnit {
+	const source = new Source();
+	const instance = source.program("import { page } from '$app/state';");
+	return source.unit('kit:error', instance, [
+		element(source, 'h1', [], show(source, 'page.status')),
+		text(source, ' '),
+		element(source, 'p', [], show(source, 'page.error?.message'))
+	]);
+}

package/src/components/index.ts

@@ -0,0 +1,42 @@
+import { compile, type ComponentUnit, type Format, type Generate } from 'vigla/compiler';
+import { error, layout } from './fallbacks.ts';
+import { root } from './root.ts';
+
+export type ComponentName = 'root' | 'layout' | 'error';
+
+export interface ComponentOptions {
+	readonly generate: Generate;
+	readonly dev: boolean;
+	readonly announcer: string;
+	readonly format?: Format;
+}
+
+const units: Record<
+	ComponentName,
+	{ readonly name: string; readonly unit: (options: ComponentOptions) => ComponentUnit }
+> = {
+	root: { name: 'Root', unit: (options) => root(options.announcer) },
+	layout: { name: 'Layout', unit: layout },
+	error: { name: 'Error', unit: error }
+};
+
+export const componentNames = Object.keys(units) as ComponentName[];
+
+export interface CompiledComponent {
+	readonly code: string;
+	readonly map: object;
+}
+
+export function compileComponent(
+	name: ComponentName,
+	options: ComponentOptions
+): CompiledComponent {
+	const { name: component, unit } = units[name];
+	const output = compile(unit(options), {
+		name: component,
+		generate: options.generate,
+		dev: options.dev,
+		format: options.format
+	});
+	return output.js;
+}

package/src/components/root.ts

@@ -0,0 +1,95 @@
+import type { ComponentUnit } from 'vigla/compiler';
+import {
+	binding,
+	boundary,
+	component,
+	declare,
+	element,
+	fragment,
+	literal,
+	property,
+	render,
+	show,
+	snippet,
+	Source,
+	when
+} from './source.ts';
+
+const announcer =
+	'position: absolute; left: 0; top: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; width: 1px; height: 1px';
+
+const script = `import { afterNavigate } from '$app/navigation';
+const { page, components, onerror, tree, form, error } = $props();
+let mounted = $state(false);
+let navigated = $state(false);
+let title = $state('');
+afterNavigate(() => {
+	if (mounted) {
+		navigated = true;
+		title = document.title || 'untitled page';
+	} else {
+		mounted = true;
+	}
+});`;
+
+export function root(announcerId: string): ComponentUnit {
+	const source = new Source();
+	const instance = source.program(script);
+	const node = (leaf: boolean) =>
+		source.ignore(
+			component(
+				source,
+				'Component',
+				[
+					binding(source, 'this', 'components[depth]'),
+					property(source, 'data', 'data'),
+					property(source, 'form', 'form'),
+					property(source, 'params', 'page.params'),
+					...(leaf ? [property(source, 'error', 'error')] : [])
+				],
+				...(leaf ? [] : [render(source, 'node(n.child, depth + 1)')])
+			),
+			['binding_property_non_reactive']
+		);
+	const nested = snippet(
+		source,
+		'node',
+		'n, depth',
+		declare(source, 'const Component = $derived(n.component)'),
+		declare(source, 'const Error = $derived(n.error)'),
+		declare(source, 'const data = $derived(n.data)'),
+		snippet(
+			source,
+			'failed',
+			'error',
+			component(source, 'Error', [property(source, 'error', 'error')])
+		),
+		boundary(
+			source,
+			[
+				property(source, 'failed', 'Error ? failed : undefined'),
+				property(source, 'onerror', 'Error ? onerror : undefined')
+			],
+			when(source, 'n.child', fragment(node(false)), fragment(node(true)))
+		)
+	);
+	const region = when(
+		source,
+		'mounted',
+		fragment(
+			element(
+				source,
+				'div',
+				[
+					literal(source, 'id', announcerId),
+					literal(source, 'aria-live', 'assertive'),
+					literal(source, 'aria-atomic', 'true'),
+					literal(source, 'style', announcer)
+				],
+				when(source, 'navigated', fragment(show(source, 'title')), null)
+			)
+		),
+		null
+	);
+	return source.unit('kit:root', instance, [nested, render(source, 'node(tree, 0)'), region]);
+}

package/src/components/source.ts

@@ -0,0 +1,201 @@
+import type * as ES from 'estree';
+import {
+	parseExpression,
+	parseProgram,
+	type Attribute,
+	type ComponentUnit,
+	type Fragment,
+	type Node,
+	type Rune,
+	type Span
+} from 'vigla/compiler';
+
+const runes = new Set<string>(['$props', '$state', '$state.raw', '$derived', '$derived.by']);
+
+const skipped = new Set(['type', 'loc', 'range', 'start', 'end']);
+
+function calleeName(callee: ES.Node): string | null {
+	if (callee.type === 'Identifier') return callee.name;
+	if (
+		callee.type === 'MemberExpression' &&
+		callee.object.type === 'Identifier' &&
+		callee.property.type === 'Identifier' &&
+		!callee.computed
+	) {
+		return `${callee.object.name}.${callee.property.name}`;
+	}
+	return null;
+}
+
+export class Source {
+	#text = '';
+	readonly #runes = new Map<ES.Node, Rune>();
+	readonly #ignores = new Map<object, ReadonlySet<string>>();
+
+	#append(code: string): number {
+		const start = this.#text.length;
+		this.#text += `${code}\n`;
+		return start;
+	}
+
+	#mark(node: ES.Node): void {
+		if (node.type === 'CallExpression') {
+			const name = calleeName(node.callee);
+			if (name !== null && runes.has(name)) this.#runes.set(node.callee, name as Rune);
+		}
+		for (const key of Object.keys(node)) {
+			if (skipped.has(key)) continue;
+			const value = (node as unknown as Record<string, unknown>)[key];
+			for (const item of Array.isArray(value) ? value : [value]) {
+				if (typeof item === 'object' && item !== null && typeof (item as ES.Node).type === 'string')
+					this.#mark(item as ES.Node);
+			}
+		}
+	}
+
+	span(): Span {
+		const start = this.#append(' ');
+		return { start, end: start + 1 };
+	}
+
+	expression(code: string): ES.Expression {
+		const start = this.#append(code);
+		const node = parseExpression(this.#text, start);
+		this.#mark(node);
+		return node;
+	}
+
+	program(code: string): ES.Program {
+		const start = this.#append(code);
+		const program = parseProgram(this.#text, start, start + code.length);
+		this.#mark(program);
+		return program;
+	}
+
+	declaration(code: string): ES.VariableDeclaration {
+		return this.program(code).body[0] as ES.VariableDeclaration;
+	}
+
+	parameters(code: string): ES.Pattern[] {
+		return (this.expression(`(${code}) => {}`) as ES.ArrowFunctionExpression).params;
+	}
+
+	ignore<T extends object>(node: T, codes: readonly string[]): T {
+		this.#ignores.set(node, new Set(codes));
+		return node;
+	}
+
+	unit(filename: string, instance: ES.Program | null, nodes: readonly Node[]): ComponentUnit {
+		return {
+			kind: 'component',
+			source: this.#text,
+			filename,
+			module: null,
+			instance,
+			template: { nodes },
+			style: null,
+			options: null,
+			runes: this.#runes,
+			ignores: this.#ignores
+		};
+	}
+}
+
+export function fragment(...nodes: Node[]): Fragment {
+	return { nodes };
+}
+
+export function text(source: Source, data: string): Node {
+	return { kind: 'text', ...source.span(), data };
+}
+
+export function show(source: Source, code: string): Node {
+	return { kind: 'expression', ...source.span(), expression: source.expression(code) };
+}
+
+export function property(source: Source, name: string, code: string): Attribute {
+	return {
+		kind: 'attribute',
+		...source.span(),
+		name,
+		value: { kind: 'expression', expression: source.expression(code) }
+	};
+}
+
+export function literal(source: Source, name: string, data: string): Attribute {
+	return {
+		kind: 'attribute',
+		...source.span(),
+		name,
+		value: { kind: 'text', parts: [{ kind: 'text', ...source.span(), data }] }
+	};
+}
+
+export function binding(source: Source, name: string, code: string): Attribute {
+	return { kind: 'binding', ...source.span(), name, expression: source.expression(code) };
+}
+
+export function element(
+	source: Source,
+	name: string,
+	attributes: readonly Attribute[],
+	...body: Node[]
+): Node {
+	return { kind: 'element', ...source.span(), name, attributes, body: fragment(...body) };
+}
+
+export function component(
+	source: Source,
+	reference: string,
+	attributes: readonly Attribute[],
+	...body: Node[]
+): Node {
+	return {
+		kind: 'component',
+		...source.span(),
+		reference: source.expression(reference),
+		attributes,
+		body: fragment(...body)
+	};
+}
+
+export function when(
+	source: Source,
+	test: string,
+	body: Fragment,
+	fallback: Fragment | null
+): Node {
+	const span = source.span();
+	return {
+		kind: 'branch',
+		...span,
+		arms: [{ ...span, test: source.expression(test), body }],
+		fallback
+	};
+}
+
+export function snippet(source: Source, name: string, parameters: string, ...body: Node[]): Node {
+	return {
+		kind: 'snippet',
+		...source.span(),
+		name: source.expression(name) as ES.Identifier,
+		parameters: source.parameters(parameters),
+		body: fragment(...body)
+	};
+}
+
+export function render(source: Source, call: string): Node {
+	return {
+		kind: 'render',
+		...source.span(),
+		call: source.expression(call) as ES.SimpleCallExpression
+	};
+}
+
+export function boundary(source: Source, attributes: readonly Attribute[], ...body: Node[]): Node {
+	return { kind: 'boundary', ...source.span(), attributes, body: fragment(...body) };
+}
+
+export function declare(source: Source, code: string): Node {
+	return { kind: 'declaration', ...source.span(), declaration: source.declaration(code) };
+}