vorma 0.0.0-pre.0 → 0.83.0

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

@@ -0,0 +1,299 @@
+import {
+	type JSX,
+	useEffect,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+	useState,
+	useSyncExternalStore,
+} from "react";
+import {
+	__applyScrollState,
+	addLocationListener,
+	addRouteChangeListener,
+	__vormaClientGlobal as ctx,
+	getLocation,
+	getRouterData,
+	type RouteChangeEvent,
+} from "vorma/client";
+
+/////////////////////////////////////////////////////////////////////
+/////// STORE
+/////////////////////////////////////////////////////////////////////
+
+type NavigationState = {
+	latestEvent: RouteChangeEvent | null;
+	loadersData: any;
+	clientLoadersData: any;
+	routerData: ReturnType<typeof getRouterData>;
+	outermostError: any;
+	outermostErrorIdx: number | undefined;
+	activeComponents: any[] | null;
+	activeErrorBoundary: any;
+	importURLs: string[];
+	exportKeys: string[];
+};
+
+type StoreState = {
+	navigation: NavigationState;
+	location: ReturnType<typeof getLocation>;
+};
+
+function getInitialState(): StoreState {
+	return {
+		navigation: {
+			latestEvent: null,
+			loadersData: ctx.get("loadersData"),
+			clientLoadersData: ctx.get("clientLoadersData"),
+			routerData: getRouterData(),
+			outermostError: ctx.get("outermostError"),
+			outermostErrorIdx: ctx.get("outermostErrorIdx"),
+			activeComponents: ctx.get("activeComponents"),
+			activeErrorBoundary: ctx.get("activeErrorBoundary"),
+			importURLs: ctx.get("importURLs"),
+			exportKeys: ctx.get("exportKeys"),
+		},
+		location: getLocation(),
+	};
+}
+
+let state = getInitialState();
+const listeners = new Set<() => void>();
+
+const store = {
+	getSnapshot: () => state,
+	subscribe: (listener: () => void) => {
+		listeners.add(listener);
+		return () => listeners.delete(listener);
+	},
+	setState: (updater: (prevState: StoreState) => StoreState) => {
+		const nextState = updater(state);
+		if (nextState !== state) {
+			state = nextState;
+			listeners.forEach((listener) => listener());
+		}
+	},
+};
+
+function useStoreSelector<T>(selector: (state: StoreState) => T): T {
+	const getSelectedSnapshot = useMemo(() => {
+		let selectedSnapshot: T;
+		return () => {
+			const nextSnapshot = selector(store.getSnapshot());
+			if (
+				selectedSnapshot === undefined ||
+				!Object.is(selectedSnapshot, nextSnapshot)
+			) {
+				selectedSnapshot = nextSnapshot;
+			}
+			return selectedSnapshot;
+		};
+	}, [selector]);
+
+	return useSyncExternalStore(store.subscribe, getSelectedSnapshot);
+}
+
+export function useLoadersData() {
+	return useStoreSelector((s) => s.navigation.loadersData);
+}
+export function useClientLoadersData() {
+	return useStoreSelector((s) => s.navigation.clientLoadersData);
+}
+export function useRouterData() {
+	return useStoreSelector((s) => s.navigation.routerData);
+}
+function useLatestEvent() {
+	return useStoreSelector((s) => s.navigation.latestEvent);
+}
+function useOutermostError() {
+	return useStoreSelector((s) => s.navigation.outermostError);
+}
+function useOutermostErrorIdx() {
+	return useStoreSelector((s) => s.navigation.outermostErrorIdx);
+}
+function useActiveComponents() {
+	return useStoreSelector((s) => s.navigation.activeComponents);
+}
+function useActiveErrorBoundary() {
+	return useStoreSelector((s) => s.navigation.activeErrorBoundary);
+}
+function useImportURLs() {
+	return useStoreSelector((s) => s.navigation.importURLs);
+}
+function useExportKeys() {
+	return useStoreSelector((s) => s.navigation.exportKeys);
+}
+
+let isInited = false;
+
+function initUIListeners() {
+	if (isInited) return;
+	isInited = true;
+
+	addRouteChangeListener((e) => {
+		store.setState((prev) => {
+			return {
+				...prev,
+				navigation: {
+					latestEvent: e,
+					loadersData: ctx.get("loadersData"),
+					clientLoadersData: ctx.get("clientLoadersData"),
+					routerData: getRouterData(),
+					outermostError: ctx.get("outermostError"),
+					outermostErrorIdx: ctx.get("outermostErrorIdx"),
+					activeComponents: ctx.get("activeComponents"),
+					activeErrorBoundary: ctx.get("activeErrorBoundary"),
+					importURLs: ctx.get("importURLs"),
+					exportKeys: ctx.get("exportKeys"),
+				},
+			};
+		});
+	});
+
+	addLocationListener(() => {
+		store.setState((prev) => {
+			return {
+				...prev,
+				location: getLocation(),
+			};
+		});
+	});
+}
+
+export function useLocation() {
+	return useStoreSelector((s) => s.location);
+}
+
+/////////////////////////////////////////////////////////////////////
+/////// COMPONENT
+/////////////////////////////////////////////////////////////////////
+
+export function VormaRootOutlet(props: { idx?: number }): JSX.Element {
+	const idx = props.idx ?? 0;
+
+	const initialRenderRef = useRef(true);
+
+	if (idx === 0 && initialRenderRef.current) {
+		initUIListeners();
+
+		initialRenderRef.current = false;
+		store.setState((prev) => {
+			return {
+				...prev,
+				navigation: {
+					latestEvent: null,
+					loadersData: ctx.get("loadersData"),
+					clientLoadersData: ctx.get("clientLoadersData"),
+					routerData: getRouterData(),
+					outermostError: ctx.get("outermostError"),
+					outermostErrorIdx: ctx.get("outermostErrorIdx"),
+					activeComponents: ctx.get("activeComponents"),
+					activeErrorBoundary: ctx.get("activeErrorBoundary"),
+					importURLs: ctx.get("importURLs"),
+					exportKeys: ctx.get("exportKeys"),
+				},
+			};
+		});
+	}
+
+	const latestEvent = useLatestEvent();
+	const loadersData = useLoadersData();
+	const outermostError = useOutermostError();
+	const outermostErrorIdx = useOutermostErrorIdx();
+	const activeComponents = useActiveComponents();
+	const activeErrorBoundary = useActiveErrorBoundary();
+	const importURLs = useImportURLs();
+	const exportKeys = useExportKeys();
+
+	const [currentImportURL, setCurrentImportURL] = useState(importURLs[idx]);
+	const [currentExportKey, setCurrentExportKey] = useState(exportKeys[idx]);
+	const [nextImportURL, setNextImportURL] = useState(importURLs[idx + 1]);
+	const [nextExportKey, setNextExportKey] = useState(exportKeys[idx + 1]);
+
+	useEffect(() => {
+		if (!currentImportURL || !latestEvent) {
+			return;
+		}
+
+		const newCurrentImportURL = importURLs[idx];
+		const newCurrentExportKey = exportKeys[idx];
+
+		if (currentImportURL !== newCurrentImportURL) {
+			setCurrentImportURL(newCurrentImportURL);
+		}
+		if (currentExportKey !== newCurrentExportKey) {
+			setCurrentExportKey(newCurrentExportKey);
+		}
+
+		// these are also needed for Outlets to render correctly
+		const newNextImportURL = importURLs[idx + 1];
+		const newNextExportKey = exportKeys[idx + 1];
+
+		if (nextImportURL !== newNextImportURL) {
+			setNextImportURL(newNextImportURL);
+		}
+		if (nextExportKey !== newNextExportKey) {
+			setNextExportKey(newNextExportKey);
+		}
+	}, [latestEvent, importURLs, exportKeys]);
+
+	useLayoutEffect(() => {
+		if (!latestEvent || idx !== 0) {
+			return;
+		}
+		window.requestAnimationFrame(() => {
+			__applyScrollState(latestEvent.detail.__scrollState);
+		});
+	}, [latestEvent, idx]);
+
+	const isErrorIdxMemo = useMemo(() => {
+		return idx === outermostErrorIdx;
+	}, [idx, outermostErrorIdx]);
+
+	const CurrentCompMemo = useMemo(() => {
+		if (isErrorIdxMemo) {
+			return null;
+		}
+		return activeComponents?.[idx];
+	}, [isErrorIdxMemo, currentImportURL, currentExportKey, activeComponents]);
+
+	const Outlet = useMemo(
+		() => (localProps: Record<string, any> | undefined) => {
+			return <VormaRootOutlet {...localProps} {...props} idx={idx + 1} />;
+		},
+		[nextImportURL, nextExportKey],
+	);
+
+	const shouldFallbackOutletMemo = useMemo(() => {
+		if (isErrorIdxMemo) {
+			return false;
+		}
+		if (CurrentCompMemo) {
+			return false;
+		}
+		return idx + 1 < loadersData.length;
+	}, [isErrorIdxMemo, CurrentCompMemo, idx, loadersData]);
+
+	const ErrorCompMemo = useMemo(() => {
+		if (!isErrorIdxMemo) {
+			return null;
+		}
+		return activeErrorBoundary;
+	}, [isErrorIdxMemo, activeErrorBoundary]);
+
+	if (isErrorIdxMemo) {
+		if (ErrorCompMemo) {
+			return <ErrorCompMemo error={outermostError} />;
+		}
+		return <>{`Error: ${outermostError || "unknown"}`}</>;
+	}
+
+	if (!CurrentCompMemo) {
+		if (shouldFallbackOutletMemo) {
+			return <Outlet />;
+		}
+		return <></>;
+	}
+
+	return <CurrentCompMemo idx={idx} Outlet={Outlet} />;
+}

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

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

package/internal/framework/_typescript/solid/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, location } from "./src/solid.tsx";

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

@@ -0,0 +1,114 @@
+/// <reference types="vite/client" />
+
+import { createMemo, type Accessor } from "solid-js";
+import type { JSX } from "solid-js/jsx-runtime";
+import {
+	__registerClientLoaderPattern,
+	__runClientLoadersAfterHMRUpdate,
+	__vormaClientGlobal,
+	type ClientLoaderAwaitedServerData,
+	type ParamsForPattern,
+	type UseRouterDataFunction,
+	type VormaAppBase,
+	type VormaLoaderOutput,
+	type VormaLoaderPattern,
+	type VormaRouteGeneric,
+	type VormaRoutePropsGeneric,
+} from "vorma/client";
+import { clientLoadersData, loadersData, routerData } from "./solid.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 (() => routerData) as UseRouterDataFunction<App, true>;
+}
+
+export function makeTypedUseLoaderData<App extends VormaAppBase>() {
+	return function useLoaderData<Pattern extends VormaLoaderPattern<App>>(
+		props: VormaRouteProps<App, Pattern>,
+	): Accessor<VormaLoaderOutput<App, Pattern>> {
+		return createMemo(() => {
+			return loadersData()[props.idx];
+		});
+	};
+}
+
+export function makeTypedUsePatternLoaderData<App extends VormaAppBase>() {
+	return function usePatternLoaderData<
+		Pattern extends VormaLoaderPattern<App>,
+	>(pattern: Pattern): Accessor<VormaLoaderOutput<App, Pattern> | undefined> {
+		const idx = createMemo(() => {
+			const matchedPatterns = routerData().matchedPatterns;
+			return matchedPatterns.findIndex((p) => p === pattern);
+		});
+		const loaderData = createMemo(() => {
+			const index = idx();
+			if (index === -1) {
+				return undefined;
+			}
+			return loadersData()[index];
+		});
+		return loaderData;
+	};
+}
+
+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>,
+		): Accessor<Res | undefined> => {
+			return createMemo(() => {
+				if (props) {
+					return clientLoadersData()[props.idx];
+				}
+				const matched = routerData().matchedPatterns;
+				const idx = matched.findIndex((pattern) => pattern === p);
+				if (idx === -1) return undefined;
+				return clientLoadersData()[idx];
+			});
+		};
+
+		return useClientLoaderData as {
+			(props: VormaRouteProps<App, Pattern>): Accessor<Res>;
+			(): Accessor<Res | undefined>;
+		};
+	};
+}

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

@@ -0,0 +1,104 @@
+import { createMemo, mergeProps, splitProps, type JSX } from "solid-js";
+import type {
+	ExtractApp,
+	PermissivePatternBasedProps,
+	VormaAppBase,
+	VormaLoaderPattern,
+} from "vorma/client";
+import {
+	__makeFinalLinkProps,
+	__resolvePath,
+	type VormaAppConfig,
+	type VormaLinkPropsBase,
+} from "vorma/client";
+
+export function VormaLink(
+	props: JSX.AnchorHTMLAttributes<HTMLAnchorElement> &
+		VormaLinkPropsBase<
+			JSX.CustomEventHandlersCamelCase<HTMLAnchorElement>["onClick"]
+		>,
+) {
+	const finalLinkProps = createMemo(() => __makeFinalLinkProps(props));
+	const [, rest] = splitProps(props, [
+		"prefetch",
+		"scrollToTop",
+		"replace",
+		"state",
+	]);
+
+	return (
+		<a
+			data-external={finalLinkProps().dataExternal}
+			{...rest}
+			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<JSX.AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "pattern"> &
+	VormaLinkPropsBase<
+		JSX.CustomEventHandlersCamelCase<HTMLAnchorElement>["onClick"]
+	> &
+	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 merged = mergeProps(defaultProps || {}, props);
+
+		const [local, linkProps] = splitProps(merged as any, [
+			"pattern",
+			"params",
+			"splatValues",
+			"search",
+			"hash",
+			"state",
+		]);
+
+		const href = createMemo(() => {
+			const basePath = __resolvePath({
+				vormaAppConfig,
+				type: "loader",
+				props: {
+					pattern: local.pattern,
+					...(local.params && { params: local.params }),
+					...(local.splatValues && {
+						splatValues: local.splatValues,
+					}),
+				},
+			});
+			const url = new URL(basePath, window.location.origin);
+			if (local.search !== undefined) url.search = local.search;
+			if (local.hash !== undefined) url.hash = local.hash;
+			return url.href;
+		});
+
+		return <VormaLink {...linkProps} href={href()} state={local.state} />;
+	};
+
+	return TypedLink;
+}