@alepha/react 0.6.10 → 0.7.1

package/src/hooks/RouterHookApi.ts

@@ -1,5 +1,7 @@
+import type { PageDescriptor } from "../descriptors/$page.ts";
 import type {
 	AnchorProps,
+	PageRoute,
 	RouterState,
 } from "../providers/PageDescriptorProvider.ts";
 import type {
@@ -9,6 +11,7 @@ import type {
 
 export class RouterHookApi {
 	constructor(
+		private readonly pages: PageRoute[],
 		private readonly state: RouterState,
 		private readonly layer: {
 			path: string;
@@ -73,41 +76,69 @@ export class RouterHookApi {
 	 * @param pathname
 	 * @param layer
 	 */
-	public createHref(pathname: HrefLike, layer: { path: string } = this.layer) {
+	public createHref(
+		pathname: HrefLike,
+		layer: { path: string } = this.layer,
+		options: { params?: Record<string, any> } = {},
+	) {
 		if (typeof pathname === "object") {
 			pathname = pathname.options.path ?? "";
 		}
 
+		if (options.params) {
+			for (const [key, value] of Object.entries(options.params)) {
+				pathname = pathname.replace(`:${key}`, String(value));
+			}
+		}
+
 		return pathname.startsWith("/")
 			? pathname
 			: `${layer.path}/${pathname}`.replace(/\/\/+/g, "/");
 	}
 
-	/**
-	 *
-	 * @param path
-	 * @param options
-	 */
-	public async go(
-		path: HrefLike,
-		options: RouterGoOptions = {},
-	): Promise<void> {
-		return await this.browser?.go(this.createHref(path, this.layer), options);
+	public async go(path: string, options?: RouterGoOptions): Promise<void>;
+	public async go<T extends object>(
+		path: keyof VirtualRouter<T>,
+		options?: RouterGoOptions,
+	): Promise<void>;
+	public async go(path: string, options?: RouterGoOptions): Promise<void> {
+		for (const page of this.pages) {
+			if (page.name === path) {
+				path = page.path ?? "";
+				break;
+			}
+		}
+
+		await this.browser?.go(this.createHref(path, this.layer, options), options);
 	}
 
-	/**
-	 *
-	 * @param path
-	 */
-	public createAnchorProps(path: string): AnchorProps {
-		const href = this.createHref(path, this.layer);
+	public anchor(
+		path: string,
+		options?: { params?: Record<string, any> },
+	): AnchorProps;
+	public anchor<T extends object>(
+		path: keyof VirtualRouter<T>,
+		options?: { params?: Record<string, any> },
+	): AnchorProps;
+	public anchor(
+		path: string,
+		options: { params?: Record<string, any> } = {},
+	): AnchorProps {
+		for (const page of this.pages) {
+			if (page.name === path) {
+				path = page.path ?? "";
+				break;
+			}
+		}
+
+		const href = this.createHref(path, this.layer, options);
 		return {
 			href,
 			onClick: (ev: any) => {
 				ev.stopPropagation();
 				ev.preventDefault();
 
-				this.go(path).catch(console.error);
+				this.go(path, options).catch(console.error);
 			},
 		};
 	}
@@ -119,30 +150,18 @@ export class RouterHookApi {
 	 * @param options
 	 */
 	public setQueryParams(
-		record: Record<string, any>,
+		record:
+			| Record<string, any>
+			| ((queryParams: Record<string, any>) => Record<string, any>),
 		options: {
-			/**
-			 * If true, this will merge current query params with the new ones.
-			 */
-			merge?: boolean;
-
 			/**
 			 * If true, this will add a new entry to the history stack.
 			 */
 			push?: boolean;
 		} = {},
 	) {
-		const search = new URLSearchParams(
-			options.merge
-				? {
-						...this.query,
-						...record,
-					}
-				: {
-						...record,
-					},
-		).toString();
-
+		const func = typeof record === "function" ? record : () => record;
+		const search = new URLSearchParams(func(this.query)).toString();
 		const state = search ? `${this.pathname}?${search}` : this.pathname;
 
 		if (options.push) {
@@ -154,3 +173,7 @@ export class RouterHookApi {
 }
 
 export type HrefLike = string | { options: { path?: string; name?: string } };
+
+export type VirtualRouter<T> = {
+	[K in keyof T as T[K] extends PageDescriptor ? K : never]: T[K];
+};

package/src/hooks/useAlepha.ts

@@ -0,0 +1,12 @@
+import type { Alepha } from "@alepha/core";
+import { useContext } from "react";
+import { RouterContext } from "../contexts/RouterContext.ts";
+
+export const useAlepha = (): Alepha => {
+	const routerContext = useContext(RouterContext);
+	if (!routerContext) {
+		throw new Error("useAlepha must be used within a RouterProvider");
+	}
+
+	return routerContext.alepha;
+};

package/src/hooks/useClient.ts

@@ -1,10 +1,12 @@
-import { HttpClient } from "@alepha/server";
+import {
+	type ClientScope,
+	HttpClient,
+	type HttpVirtualClient,
+} from "@alepha/server";
 import { useInject } from "./useInject.ts";
 
-export const useClient = (): HttpClient => {
-	return useInject(HttpClient);
-};
-
-export const useApi = <T extends object>() => {
+export const useClient = <T extends object>(
+	_scope?: ClientScope,
+): HttpVirtualClient<T> => {
 	return useInject(HttpClient).of<T>();
 };

package/src/hooks/useInject.ts

@@ -1,18 +1,12 @@
-import type { Class } from "@alepha/core";
+import type { Service } from "@alepha/core";
 import { useContext, useMemo } from "react";
 import { RouterContext } from "../contexts/RouterContext.ts";
 
-export const useInject = <T extends object>(clazz: Class<T>): T => {
+export const useInject = <T extends object>(clazz: Service<T>): T => {
 	const ctx = useContext(RouterContext);
 	if (!ctx) {
 		throw new Error("useRouter must be used within a <RouterProvider>");
 	}
 
-	return useMemo(
-		() =>
-			ctx.alepha.get(clazz, {
-				skipRegistration: true,
-			}),
-		[],
-	);
+	return useMemo(() => ctx.alepha.get(clazz), []);
 };

package/src/hooks/useQueryParams.ts

@@ -34,12 +34,9 @@ export const useQueryParams = <T extends TObject>(
 		queryParams,
 		(queryParams: Static<T>) => {
 			setQueryParams(queryParams);
-			router.setQueryParams(
-				{ [key]: encode(ctx.alepha, schema, queryParams) },
-				{
-					merge: true,
-				},
-			);
+			router.setQueryParams((data) => {
+				return { ...data, [key]: encode(ctx.alepha, schema, queryParams) };
+			});
 		},
 	];
 };
@@ -53,7 +50,7 @@ const encode = (alepha: Alepha, schema: TObject, data: any) => {
 const decode = (alepha: Alepha, schema: TObject, data: any) => {
 	try {
 		return alepha.parse(schema, JSON.parse(atob(decodeURIComponent(data))));
-	} catch (error) {
+	} catch (_error) {
 		return {};
 	}
 };

package/src/hooks/useRouter.ts

@@ -1,6 +1,7 @@
 import { useContext, useMemo } from "react";
 import { RouterContext } from "../contexts/RouterContext.ts";
 import { RouterLayerContext } from "../contexts/RouterLayerContext.ts";
+import { PageDescriptorProvider } from "../providers/PageDescriptorProvider.ts";
 import { ReactBrowserProvider } from "../providers/ReactBrowserProvider.ts";
 import { RouterHookApi } from "./RouterHookApi.ts";
 
@@ -11,9 +12,14 @@ export const useRouter = (): RouterHookApi => {
 		throw new Error("useRouter must be used within a RouterProvider");
 	}
 
+	const pages = useMemo(() => {
+		return ctx.alepha.get(PageDescriptorProvider).getPages();
+	}, []);
+
 	return useMemo(
 		() =>
 			new RouterHookApi(
+				pages,
 				ctx.state,
 				layer,
 				ctx.alepha.isBrowser()

package/src/index.browser.ts

@@ -1,4 +1,4 @@
-import { $inject, Alepha, __bind } from "@alepha/core";
+import { __bind, $inject, Alepha } from "@alepha/core";
 import { $page } from "./descriptors/$page.ts";
 import { BrowserRouterProvider } from "./providers/BrowserRouterProvider.ts";
 import { PageDescriptorProvider } from "./providers/PageDescriptorProvider.ts";

package/src/index.shared.ts

@@ -1,15 +1,22 @@
-export { default as NestedView } from "./components/NestedView.tsx";
+export { default as ClientOnly } from "./components/ClientOnly.tsx";
+export { default as ErrorBoundary } from "./components/ErrorBoundary.tsx";
+export * from "./components/ErrorViewer.tsx";
 export { default as Link } from "./components/Link.tsx";
+export { default as NestedView } from "./components/NestedView.tsx";
 
 export * from "./contexts/RouterContext.ts";
 export * from "./contexts/RouterLayerContext.ts";
+
 export * from "./descriptors/$page.ts";
+
+export * from "./errors/RedirectionError.ts";
+
 export * from "./hooks/RouterHookApi.ts";
-export * from "./hooks/useInject.ts";
+export * from "./hooks/useActive.ts";
+export * from "./hooks/useAlepha.ts";
 export * from "./hooks/useClient.ts";
+export * from "./hooks/useInject.ts";
 export * from "./hooks/useQueryParams.ts";
 export * from "./hooks/useRouter.ts";
 export * from "./hooks/useRouterEvents.ts";
 export * from "./hooks/useRouterState.ts";
-export * from "./hooks/useActive.ts";
-export * from "./errors/RedirectionError.ts";

package/src/index.ts

@@ -1,4 +1,4 @@
-import { $inject, Alepha, __bind } from "@alepha/core";
+import { __bind, $inject, Alepha } from "@alepha/core";
 import {
 	ServerLinksProvider,
 	ServerModule,
@@ -13,17 +13,18 @@ import {
 } from "./providers/PageDescriptorProvider.ts";
 import type { ReactHydrationState } from "./providers/ReactBrowserProvider.ts";
 import { ReactServerProvider } from "./providers/ReactServerProvider.ts";
-export { default as NestedView } from "./components/NestedView.tsx";
 
+export { default as NestedView } from "./components/NestedView.tsx";
+export * from "./errors/RedirectionError.ts";
 export * from "./index.shared.ts";
 export * from "./providers/PageDescriptorProvider.ts";
 export * from "./providers/ReactBrowserProvider.ts";
 export * from "./providers/ReactServerProvider.ts";
-export * from "./errors/RedirectionError.ts";
 
 declare module "@alepha/core" {
 	interface Hooks {
 		"react:browser:render": {
+			state: RouterState;
 			context: PageReactContext;
 			hydration?: ReactHydrationState;
 		};
@@ -31,9 +32,9 @@ declare module "@alepha/core" {
 			request: ServerRequest;
 			pageRequest: PageRequest;
 		};
-
 		"react:transition:begin": {
 			state: RouterState;
+			context: PageReactContext;
 		};
 		"react:transition:success": {
 			state: RouterState;
@@ -41,9 +42,11 @@ declare module "@alepha/core" {
 		"react:transition:error": {
 			error: Error;
 			state: RouterState;
+			context: PageReactContext;
 		};
 		"react:transition:end": {
 			state: RouterState;
+			context: PageReactContext;
 		};
 	}
 }

package/src/providers/BrowserRouterProvider.ts

@@ -2,14 +2,15 @@ import { $hook, $inject, $logger, Alepha } from "@alepha/core";
 import { type Route, RouterProvider } from "@alepha/router";
 import type { ReactNode } from "react";
 import {
+	isPageRoute,
 	PageDescriptorProvider,
 	type PageReactContext,
+	type PageRequest,
 	type PageRoute,
 	type PageRouteEntry,
 	type RouterRenderResult,
 	type RouterState,
 	type TransitionOptions,
-	isPageRoute,
 } from "./PageDescriptorProvider.ts";
 
 export interface BrowserRoute extends Route {
@@ -49,10 +50,18 @@ export class BrowserRouterProvider extends RouterProvider<BrowserRoute> {
 			pathname,
 			search,
 			layers: [],
+		};
+
+		const context: PageRequest = {
+			url,
+			query: {},
+			params: {},
 			head: {},
+			onError: () => null,
+			...(options.context ?? {}),
 		};
 
-		await this.alepha.emit("react:transition:begin", { state });
+		await this.alepha.emit("react:transition:begin", { state, context });
 
 		try {
 			const previous = options.previous;
@@ -65,31 +74,25 @@ export class BrowserRouterProvider extends RouterProvider<BrowserRoute> {
 				}
 			}
 
+			context.query = query;
+			context.params = params ?? {};
+			context.previous = previous;
+
 			if (isPageRoute(route)) {
 				const result = await this.pageDescriptorProvider.createLayers(
 					route.page,
-					{
-						url,
-						params: params ?? {},
-						query,
-						previous,
-						...state,
-						head: state.head,
-						...(options.context ?? {}),
-					},
+					context,
 				);
 
 				if (result.redirect) {
 					return {
-						element: null,
-						layers: [],
 						redirect: result.redirect,
-						head: state.head,
+						state,
+						context,
 					};
 				}
 
 				state.layers = result.layers;
-				state.head = result.head;
 			}
 
 			if (state.layers.length === 0) {
@@ -116,37 +119,28 @@ export class BrowserRouterProvider extends RouterProvider<BrowserRoute> {
 			await this.alepha.emit("react:transition:error", {
 				error: e as Error,
 				state,
+				context,
 			});
 		}
 
-		if (!options.state) {
-			await this.alepha.emit("react:transition:end", {
-				state,
-			});
-			return {
-				element: this.root(state, options.context),
-				layers: state.layers,
-				head: state.head,
-			};
+		if (options.state) {
+			options.state.layers = state.layers;
+			options.state.pathname = state.pathname;
+			options.state.search = state.search;
 		}
 
-		options.state.layers = state.layers;
-		options.state.pathname = state.pathname;
-		options.state.search = state.search;
-		options.state.head = state.head;
-
 		await this.alepha.emit("react:transition:end", {
 			state: options.state,
+			context,
 		});
 
 		return {
-			element: this.root(state, options.context),
-			layers: options.state.layers,
-			head: state.head,
+			context,
+			state,
 		};
 	}
 
-	public root(state: RouterState, context: PageReactContext = {}): ReactNode {
+	public root(state: RouterState, context: PageReactContext): ReactNode {
 		return this.pageDescriptorProvider.root(state, context);
 	}
 }