vorma 0.0.0-pre.0 → 0.83.0

package/internal/framework/_typescript/preact/src/link.tsx

@@ -0,0 +1,107 @@
+import { h, type JSX } from "preact";
+import { memo } from "preact/compat";
+import type {
+	ExtractApp,
+	PermissivePatternBasedProps,
+	VormaAppBase,
+	VormaLoaderPattern,
+} from "vorma/client";
+import {
+	__makeFinalLinkProps,
+	__resolvePath,
+	type VormaAppConfig,
+	type VormaLinkPropsBase,
+} from "vorma/client";
+
+export const VormaLink = memo(function VormaLink(
+	props: JSX.HTMLAttributes<HTMLAnchorElement> &
+		VormaLinkPropsBase<
+			(
+				e: JSX.TargetedMouseEvent<HTMLAnchorElement>,
+			) => void | Promise<void>
+		>,
+) {
+	const finalLinkProps = __makeFinalLinkProps(props);
+	// oxlint-disable-next-line no-unused-vars
+	const { prefetch, scrollToTop, replace, state, ...rest } = props;
+
+	return h(
+		"a",
+		{
+			"data-external": finalLinkProps.dataExternal,
+			...(rest as any),
+			onPointerEnter: finalLinkProps.onPointerEnter,
+			onFocus: finalLinkProps.onFocus,
+			onPointerLeave: finalLinkProps.onPointerLeave,
+			onBlur: finalLinkProps.onBlur,
+			onTouchCancel: finalLinkProps.onTouchCancel,
+			onClick: finalLinkProps.onClick,
+		},
+		props.children,
+	);
+});
+
+type TypedVormaLinkProps<
+	App extends VormaAppBase,
+	Pattern extends VormaLoaderPattern<App> = VormaLoaderPattern<App>,
+> = Omit<JSX.HTMLAttributes<HTMLAnchorElement>, "href" | "pattern"> &
+	VormaLinkPropsBase<
+		(e: JSX.TargetedMouseEvent<HTMLAnchorElement>) => void | Promise<void>
+	> &
+	PermissivePatternBasedProps<App, Pattern> & {
+		search?: string;
+		hash?: string;
+	};
+
+export function makeTypedLink<C extends VormaAppConfig>(
+	vormaAppConfig: C,
+	defaultProps?: Partial<
+		Omit<
+			TypedVormaLinkProps<ExtractApp<C>>,
+			"pattern" | "params" | "splatValues"
+		>
+	>,
+) {
+	type App = ExtractApp<C>;
+
+	const TypedLink = memo(function TypedLink<
+		Pattern extends VormaLoaderPattern<App>,
+	>(props: TypedVormaLinkProps<App, Pattern>) {
+		const {
+			pattern,
+			params,
+			splatValues,
+			search,
+			hash,
+			state,
+			...linkProps
+		} = props as any;
+
+		const href = __resolvePath({
+			vormaAppConfig,
+			type: "loader",
+			props: {
+				pattern,
+				...(params && { params }),
+				...(splatValues && { splatValues }),
+			},
+		});
+
+		const url = new URL(href, window.location.origin);
+		if (search !== undefined) url.search = search;
+		if (hash !== undefined) url.hash = hash;
+
+		const finalProps = {
+			...defaultProps,
+			...linkProps,
+			href: url.href,
+			state,
+		};
+
+		return h(VormaLink, finalProps);
+	});
+
+	(TypedLink as any).displayName =
+		`TypedLink(${Object.keys(defaultProps || {}).join(", ")})`;
+	return TypedLink;
+}

package/internal/framework/_typescript/preact/src/preact.tsx

@@ -0,0 +1,191 @@
+import { batch, computed, effect, signal } from "@preact/signals";
+import { h } from "preact";
+import { useEffect, useLayoutEffect, useMemo, useRef } from "preact/hooks";
+import {
+	__applyScrollState,
+	addLocationListener,
+	addRouteChangeListener,
+	__vormaClientGlobal as ctx,
+	getLocation,
+	getRouterData,
+	type RouteChangeEvent,
+} from "vorma/client";
+
+/////////////////////////////////////////////////////////////////////
+/////// CORE SETUP
+/////////////////////////////////////////////////////////////////////
+
+const latestEvent = signal<RouteChangeEvent | null>(null);
+const loadersData = signal(ctx.get("loadersData"));
+const clientLoadersData = signal(ctx.get("clientLoadersData"));
+const routerData = signal(getRouterData());
+const outermostErrorIdx = signal(ctx.get("outermostErrorIdx"));
+const outermostError = signal(ctx.get("outermostError"));
+const activeComponents = signal(ctx.get("activeComponents"));
+const activeErrorBoundary = signal(ctx.get("activeErrorBoundary"));
+const importURLs = signal(ctx.get("importURLs"));
+const exportKeys = signal(ctx.get("exportKeys"));
+
+export { clientLoadersData, loadersData, routerData };
+
+let isInited = false;
+
+function initUIListeners() {
+	if (isInited) return;
+	isInited = true;
+
+	addRouteChangeListener((e) => {
+		batch(() => {
+			latestEvent.value = e;
+			loadersData.value = ctx.get("loadersData");
+			clientLoadersData.value = ctx.get("clientLoadersData");
+			routerData.value = getRouterData();
+			outermostErrorIdx.value = ctx.get("outermostErrorIdx");
+			outermostError.value = ctx.get("outermostError");
+			activeComponents.value = ctx.get("activeComponents");
+			activeErrorBoundary.value = ctx.get("activeErrorBoundary");
+			importURLs.value = ctx.get("importURLs");
+			exportKeys.value = ctx.get("exportKeys");
+		});
+	});
+
+	addLocationListener(() => {
+		location.value = getLocation();
+	});
+}
+
+export const location = signal(getLocation());
+
+/////////////////////////////////////////////////////////////////////
+/////// COMPONENT
+/////////////////////////////////////////////////////////////////////
+
+export function VormaRootOutlet(props: { idx?: number }): h.JSX.Element {
+	const idx = props.idx ?? 0;
+
+	const initialRenderRef = useRef(true);
+
+	if (idx === 0 && initialRenderRef.current) {
+		initUIListeners();
+
+		initialRenderRef.current = false;
+		batch(() => {
+			loadersData.value = ctx.get("loadersData");
+			clientLoadersData.value = ctx.get("clientLoadersData");
+			routerData.value = getRouterData();
+			outermostError.value = ctx.get("outermostError");
+			outermostErrorIdx.value = ctx.get("outermostErrorIdx");
+			activeComponents.value = ctx.get("activeComponents");
+			activeErrorBoundary.value = ctx.get("activeErrorBoundary");
+			importURLs.value = ctx.get("importURLs");
+			exportKeys.value = ctx.get("exportKeys");
+		});
+	}
+
+	const currentImportURL = signal(importURLs.value[idx]);
+	const currentExportKey = signal(exportKeys.value[idx]);
+	const nextImportURL = signal(importURLs.value[idx + 1]);
+	const nextExportKey = signal(exportKeys.value[idx + 1]);
+
+	useEffect(() => {
+		const dispose = effect(() => {
+			if (!currentImportURL.value || !latestEvent.value) {
+				return;
+			}
+
+			batch(() => {
+				const newCurrentImportURL = importURLs.value[idx];
+				const newCurrentExportKey = exportKeys.value[idx];
+
+				if (currentImportURL.value !== newCurrentImportURL) {
+					currentImportURL.value = newCurrentImportURL;
+				}
+				if (currentExportKey.value !== newCurrentExportKey) {
+					currentExportKey.value = newCurrentExportKey;
+				}
+
+				// these are also needed for Outlets to render correctly
+				const newNextImportURL = importURLs.value[idx + 1];
+				const newNextExportKey = exportKeys.value[idx + 1];
+
+				if (nextImportURL.value !== newNextImportURL) {
+					nextImportURL.value = newNextImportURL;
+				}
+				if (nextExportKey.value !== newNextExportKey) {
+					nextExportKey.value = newNextExportKey;
+				}
+			});
+		});
+
+		return dispose;
+	}, [idx]);
+
+	useLayoutEffect(() => {
+		const dispose = effect(() => {
+			const event = latestEvent.value;
+			if (!event || idx !== 0) {
+				return;
+			}
+			window.requestAnimationFrame(() => {
+				__applyScrollState(event.detail.__scrollState);
+			});
+		});
+
+		return dispose;
+	}, [idx]);
+
+	const isErrorIdx = computed(() => idx === outermostErrorIdx.value);
+
+	const CurrentComp = computed(() => {
+		if (isErrorIdx.value) {
+			return null;
+		}
+		currentImportURL.value;
+		currentExportKey.value;
+		return activeComponents.value?.[idx];
+	});
+
+	const Outlet = useMemo(
+		() => (localProps: Record<string, any> | undefined) => {
+			return h(VormaRootOutlet, {
+				...localProps,
+				...props,
+				idx: idx + 1,
+			});
+		},
+		[nextImportURL.value, nextExportKey.value],
+	);
+
+	const shouldFallbackOutlet = computed(() => {
+		if (isErrorIdx.value) {
+			return false;
+		}
+		if (CurrentComp.value) {
+			return false;
+		}
+		return idx + 1 < loadersData.value.length;
+	});
+
+	const ErrorComp = computed(() => {
+		if (!isErrorIdx.value) {
+			return null;
+		}
+		return activeErrorBoundary.value;
+	});
+
+	if (isErrorIdx.value) {
+		if (ErrorComp.value) {
+			return h(ErrorComp.value, { error: outermostError.value });
+		}
+		return h("div", {}, `Error: ${outermostError.value || "unknown"}`);
+	}
+
+	if (!CurrentComp.value) {
+		if (shouldFallbackOutlet.value) {
+			return h(Outlet, {});
+		}
+		return h("div", {});
+	}
+
+	return h(CurrentComp.value, { idx, Outlet });
+}

package/internal/framework/_typescript/preact/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"extends": "../../../../tsconfig.base.json",
+	"compilerOptions": {
+		"jsx": "react-jsx",
+		"jsxImportSource": "preact"
+	}
+}

package/internal/framework/_typescript/react/index.tsx

@@ -0,0 +1,10 @@
+export {
+	makeTypedAddClientLoader,
+	makeTypedUseLoaderData,
+	makeTypedUsePatternLoaderData,
+	makeTypedUseRouterData,
+	type VormaRoute,
+	type VormaRouteProps,
+} from "./src/helpers.ts";
+export { VormaLink, makeTypedLink } from "./src/link.tsx";
+export { VormaRootOutlet, useLocation } from "./src/react.tsx";

package/internal/framework/_typescript/react/src/helpers.ts

@@ -0,0 +1,118 @@
+/// <reference types="vite/client" />
+
+import { useMemo, type JSX } from "react";
+import {
+	__registerClientLoaderPattern,
+	__runClientLoadersAfterHMRUpdate,
+	__vormaClientGlobal,
+	type ClientLoaderAwaitedServerData,
+	type ParamsForPattern,
+	type UseRouterDataFunction,
+	type VormaAppBase,
+	type VormaLoaderOutput,
+	type VormaLoaderPattern,
+	type VormaRouteGeneric,
+	type VormaRoutePropsGeneric,
+} from "vorma/client";
+import {
+	useClientLoadersData,
+	useLoadersData,
+	useRouterData,
+} from "./react.tsx";
+
+export type VormaRouteProps<
+	App extends VormaAppBase = any,
+	Pattern extends VormaLoaderPattern<App> = string,
+> = VormaRoutePropsGeneric<JSX.Element, App, Pattern>;
+
+export type VormaRoute<
+	App extends VormaAppBase = any,
+	Pattern extends VormaLoaderPattern<App> = string,
+> = VormaRouteGeneric<JSX.Element, App, Pattern>;
+
+export function makeTypedUseRouterData<App extends VormaAppBase>() {
+	return useRouterData as UseRouterDataFunction<App, false>;
+}
+
+export function makeTypedUseLoaderData<App extends VormaAppBase>() {
+	return function useLoaderData<Pattern extends VormaLoaderPattern<App>>(
+		props: VormaRouteProps<App, Pattern>,
+	): VormaLoaderOutput<App, Pattern> {
+		const loadersData = useLoadersData();
+		return loadersData[props.idx];
+	};
+}
+
+export function makeTypedUsePatternLoaderData<App extends VormaAppBase>() {
+	return function usePatternLoaderData<
+		Pattern extends VormaLoaderPattern<App>,
+	>(pattern: Pattern): VormaLoaderOutput<App, Pattern> | undefined {
+		const routerData = useRouterData();
+		const loadersData = useLoadersData();
+		const idx = useMemo(() => {
+			return routerData.matchedPatterns.findIndex((p) => p === pattern);
+		}, [routerData.matchedPatterns, pattern]);
+
+		if (idx === -1) {
+			return undefined;
+		}
+		return loadersData[idx];
+	};
+}
+
+export function makeTypedAddClientLoader<App extends VormaAppBase>() {
+	const m = __vormaClientGlobal.get("patternToWaitFnMap");
+	return function addClientLoader<
+		Pattern extends VormaLoaderPattern<App>,
+		LoaderData extends VormaLoaderOutput<App, Pattern>,
+		T = any,
+	>(props: {
+		pattern: Pattern;
+		clientLoader: (props: {
+			params: Record<ParamsForPattern<App, Pattern>, string>;
+			splatValues: string[];
+			serverDataPromise: Promise<
+				ClientLoaderAwaitedServerData<App["rootData"], LoaderData>
+			>;
+			signal: AbortSignal;
+		}) => Promise<T>;
+		reRunOnModuleChange?: ImportMeta;
+	}) {
+		const p = props.pattern;
+		const fn = props.clientLoader;
+
+		__registerClientLoaderPattern(p as string).catch((error) => {
+			console.error("Failed to register client loader pattern:", error);
+		});
+		(m as any)[p] = fn;
+
+		if (import.meta.env.DEV && props.reRunOnModuleChange) {
+			__runClientLoadersAfterHMRUpdate(props.reRunOnModuleChange, p);
+		}
+
+		type Res = Awaited<ReturnType<typeof fn>>;
+
+		const useClientLoaderData = (
+			props?: VormaRouteProps<App, Pattern>,
+		): Res | undefined => {
+			const clientLoadersData = useClientLoadersData();
+			const routerData = useRouterData();
+
+			const idx = useMemo(() => {
+				if (props) {
+					return props.idx;
+				}
+				const matched = routerData.matchedPatterns;
+				return matched.findIndex((pattern) => pattern === p);
+			}, [props, routerData.matchedPatterns]);
+
+			if (idx === -1) return undefined;
+			return clientLoadersData[idx];
+		};
+
+		return useClientLoaderData as {
+			(props: VormaRouteProps<App, Pattern>): Res;
+			(): Res | undefined;
+		};
+	};
+}

package/internal/framework/_typescript/react/src/link.tsx

@@ -0,0 +1,115 @@
+import { memo, type ComponentProps, type JSX } from "react";
+import type {
+	ExtractApp,
+	PermissivePatternBasedProps,
+	VormaAppBase,
+	VormaLoaderPattern,
+} from "vorma/client";
+import {
+	__makeFinalLinkProps,
+	__resolvePath,
+	type VormaAppConfig,
+	type VormaLinkPropsBase,
+} from "vorma/client";
+
+export const VormaLink = memo(function VormaLink(
+	props: ComponentProps<"a"> &
+		VormaLinkPropsBase<
+			(
+				e: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
+			) => void | Promise<void>
+		>,
+) {
+	const finalLinkProps = __makeFinalLinkProps(props);
+	// oxlint-disable-next-line no-unused-vars
+	const { prefetch, scrollToTop, replace, state, ...rest } = props;
+
+	return (
+		<a
+			data-external={finalLinkProps.dataExternal}
+			{...(rest as any)}
+			onPointerEnter={finalLinkProps.onPointerEnter}
+			onFocus={finalLinkProps.onFocus}
+			onPointerLeave={finalLinkProps.onPointerLeave}
+			onBlur={finalLinkProps.onBlur}
+			onTouchCancel={finalLinkProps.onTouchCancel}
+			onClick={finalLinkProps.onClick}
+		>
+			{props.children}
+		</a>
+	);
+});
+
+type TypedVormaLinkProps<
+	App extends VormaAppBase,
+	Pattern extends VormaLoaderPattern<App> = VormaLoaderPattern<App>,
+> = Omit<ComponentProps<"a">, "href" | "pattern"> &
+	VormaLinkPropsBase<
+		(
+			e: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
+		) => void | Promise<void>
+	> &
+	PermissivePatternBasedProps<App, Pattern> & {
+		search?: string;
+		hash?: string;
+	};
+
+export function makeTypedLink<C extends VormaAppConfig>(
+	vormaAppConfig: C,
+	defaultProps?: Partial<
+		Omit<
+			TypedVormaLinkProps<ExtractApp<C>>,
+			"pattern" | "params" | "splatValues"
+		>
+	>,
+) {
+	type App = ExtractApp<C>;
+
+	const TypedLink = <Pattern extends VormaLoaderPattern<App>>(
+		props: TypedVormaLinkProps<App, Pattern>,
+	) => {
+		const {
+			pattern,
+			params,
+			splatValues,
+			search,
+			hash,
+			state,
+			...linkProps
+		} = props as any;
+
+		const href = __resolvePath({
+			vormaAppConfig,
+			type: "loader",
+			props: {
+				pattern,
+				...(params && { params }),
+				...(splatValues && { splatValues }),
+			},
+		});
+
+		const url = new URL(href, window.location.origin);
+		if (search !== undefined) url.search = search;
+		if (hash !== undefined) url.hash = hash;
+
+		const finalProps = {
+			...defaultProps,
+			...linkProps,
+			href: url.href,
+			state,
+		};
+
+		return <VormaLink {...finalProps} />;
+	};
+
+	const MemoizedTypedLink = memo(TypedLink) as <
+		Pattern extends VormaLoaderPattern<App>,
+	>(
+		props: TypedVormaLinkProps<App, Pattern>,
+	) => JSX.Element;
+
+	(MemoizedTypedLink as any).displayName =
+		`TypedLink(${Object.keys(defaultProps || {}).join(", ")})`;
+
+	return MemoizedTypedLink;
+}