@alepha/react 0.9.3 → 0.9.4

package/src/{hooks/RouterHookApi.ts → services/ReactRouter.ts}

@@ -1,27 +1,34 @@
+import { $inject, Alepha } from "@alepha/core";
 import type { PageDescriptor } from "../descriptors/$page.ts";
-import type {
-	AnchorProps,
-	PageDescriptorProvider,
-	PageReactContext,
-	PageRoute,
-	RouterState,
-} from "../providers/PageDescriptorProvider.ts";
-import type {
+import {
 	ReactBrowserProvider,
-	RouterGoOptions,
+	type RouterGoOptions,
 } from "../providers/ReactBrowserProvider.ts";
+import {
+	type AnchorProps,
+	ReactPageProvider,
+	type ReactRouterState,
+} from "../providers/ReactPageProvider.ts";
+
+export class ReactRouter<T extends object> {
+	protected readonly alepha = $inject(Alepha);
+	protected readonly pageApi = $inject(ReactPageProvider);
+
+	public get state(): ReactRouterState {
+		return this.alepha.state("react.router.state")!;
+	}
+
+	public get pages() {
+		return this.pageApi.getPages();
+	}
 
-export class RouterHookApi<T extends object> {
-	constructor(
-		private readonly pages: PageRoute[],
-		private readonly context: PageReactContext,
-		private readonly state: RouterState,
-		private readonly layer: {
-			path: string;
-		},
-		private readonly pageApi: PageDescriptorProvider,
-		private readonly browser?: ReactBrowserProvider,
-	) {}
+	public get browser(): ReactBrowserProvider | undefined {
+		if (this.alepha.isBrowser()) {
+			return this.alepha.inject(ReactBrowserProvider);
+		}
+		// server-side
+		return undefined;
+	}
 
 	public path(
 		name: keyof VirtualRouter<T>,
@@ -32,7 +39,7 @@ export class RouterHookApi<T extends object> {
 	): string {
 		return this.pageApi.pathname(name as string, {
 			params: {
-				...this.context.params,
+				...this.state.params,
 				...config.params,
 			},
 			query: config.query,
@@ -41,8 +48,9 @@ export class RouterHookApi<T extends object> {
 
 	public getURL(): URL {
 		if (!this.browser) {
-			return this.context.url;
+			return this.state.url;
 		}
+
 		return new URL(this.location.href);
 	}
 
@@ -54,19 +62,19 @@ export class RouterHookApi<T extends object> {
 		return this.browser.location;
 	}
 
-	public get current(): RouterState {
+	public get current(): ReactRouterState {
 		return this.state;
 	}
 
 	public get pathname(): string {
-		return this.state.pathname;
+		return this.state.url.pathname;
 	}
 
 	public get query(): Record<string, string> {
 		const query: Record<string, string> = {};
 
 		for (const [key, value] of new URLSearchParams(
-			this.state.search,
+			this.state.url.search,
 		).entries()) {
 			query[key] = String(value);
 		}
@@ -86,32 +94,6 @@ export class RouterHookApi<T extends object> {
 		await this.browser?.invalidate(props);
 	}
 
-	/**
-	 * Create a valid href for the given pathname.
-	 *
-	 * @param pathname
-	 * @param 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, "/");
-	}
-
 	public async go(path: string, options?: RouterGoOptions): Promise<void>;
 	public async go(
 		path: keyof VirtualRouter<T>,
@@ -147,6 +129,7 @@ export class RouterHookApi<T extends object> {
 		options: { params?: Record<string, any> } = {},
 	): AnchorProps {
 		let href = path as string;
+
 		for (const page of this.pages) {
 			if (page.name === path) {
 				href = this.path(path as keyof VirtualRouter<T>, options);
@@ -155,7 +138,7 @@ export class RouterHookApi<T extends object> {
 		}
 
 		return {
-			href,
+			href: this.base(href),
 			onClick: (ev: any) => {
 				ev.stopPropagation();
 				ev.preventDefault();
@@ -165,6 +148,15 @@ export class RouterHookApi<T extends object> {
 		};
 	}
 
+	public base(path: string): string {
+		const base = import.meta.env?.BASE_URL;
+		if (!base || base === "/") {
+			return path;
+		}
+
+		return base + path;
+	}
+
 	/**
 	 * Set query params.
 	 *
@@ -194,8 +186,6 @@ export class RouterHookApi<T extends object> {
 	}
 }
 
-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/contexts/RouterContext.ts

@@ -1,14 +0,0 @@
-import { createContext } from "react";
-import type {
-	PageReactContext,
-	RouterState,
-} from "../providers/PageDescriptorProvider.ts";
-
-export interface RouterContextValue {
-	state: RouterState;
-	context: PageReactContext;
-}
-
-export const RouterContext = createContext<RouterContextValue | undefined>(
-	undefined,
-);

package/src/providers/BrowserRouterProvider.ts

@@ -1,155 +0,0 @@
-import { $hook, $inject, $logger, Alepha } from "@alepha/core";
-import { type Route, RouterProvider } from "@alepha/router";
-import { createElement, type ReactNode } from "react";
-import NotFoundPage from "../components/NotFound.tsx";
-import {
-	isPageRoute,
-	PageDescriptorProvider,
-	type PageReactContext,
-	type PageRequest,
-	type PageRoute,
-	type PageRouteEntry,
-	type RouterRenderResult,
-	type RouterState,
-	type TransitionOptions,
-} from "./PageDescriptorProvider.ts";
-
-export interface BrowserRoute extends Route {
-	page: PageRoute;
-}
-
-export class BrowserRouterProvider extends RouterProvider<BrowserRoute> {
-	protected readonly log = $logger();
-	protected readonly alepha = $inject(Alepha);
-	protected readonly pageDescriptorProvider = $inject(PageDescriptorProvider);
-
-	public add(entry: PageRouteEntry) {
-		this.pageDescriptorProvider.add(entry);
-	}
-
-	protected readonly configure = $hook({
-		on: "configure",
-		handler: async () => {
-			for (const page of this.pageDescriptorProvider.getPages()) {
-				// mount only if a view is provided
-				if (page.component || page.lazy) {
-					this.push({
-						path: page.match,
-						page,
-					});
-				}
-			}
-		},
-	});
-
-	public async transition(
-		url: URL,
-		options: TransitionOptions = {},
-	): Promise<RouterRenderResult> {
-		const { pathname, search } = url;
-		const state: RouterState = {
-			pathname,
-			search,
-			layers: [],
-		};
-
-		const context = {
-			url,
-			query: {},
-			params: {},
-			onError: () => null,
-			...(options.context ?? {}),
-		} as PageRequest;
-
-		await this.alepha.emit("react:transition:begin", { state, context });
-
-		try {
-			const previous = options.previous;
-			const { route, params } = this.match(pathname);
-
-			const query: Record<string, string> = {};
-			if (search) {
-				for (const [key, value] of new URLSearchParams(search).entries()) {
-					query[key] = String(value);
-				}
-			}
-
-			context.query = query;
-			context.params = params ?? {};
-			context.previous = previous;
-
-			if (isPageRoute(route)) {
-				const result = await this.pageDescriptorProvider.createLayers(
-					route.page,
-					context,
-				);
-
-				if (result.redirect) {
-					return {
-						redirect: result.redirect,
-						state,
-						context,
-					};
-				}
-
-				state.layers = result.layers;
-			}
-
-			if (state.layers.length === 0) {
-				state.layers.push({
-					name: "not-found",
-					element: createElement(NotFoundPage),
-					index: 0,
-					path: "/",
-				});
-			}
-
-			await this.alepha.emit("react:transition:success", { state, context });
-		} catch (e) {
-			this.log.error(e);
-			state.layers = [
-				{
-					name: "error",
-					element: this.pageDescriptorProvider.renderError(e as Error),
-					index: 0,
-					path: "/",
-				},
-			];
-
-			await this.alepha.emit("react:transition:error", {
-				error: e as Error,
-				state,
-				context,
-			});
-		}
-
-		if (options.state) {
-			options.state.layers = state.layers;
-			options.state.pathname = state.pathname;
-			options.state.search = state.search;
-		}
-
-		if (options.previous) {
-			for (let i = 0; i < options.previous.length; i++) {
-				const layer = options.previous[i];
-				if (state.layers[i]?.name !== layer.name) {
-					this.pageDescriptorProvider.page(layer.name)?.onLeave?.();
-				}
-			}
-		}
-
-		await this.alepha.emit("react:transition:end", {
-			state: options.state,
-			context,
-		});
-
-		return {
-			context,
-			state,
-		};
-	}
-
-	public root(state: RouterState, context: PageReactContext): ReactNode {
-		return this.pageDescriptorProvider.root(state, context);
-	}
-}

package/src/providers/ReactBrowserRenderer.ts

@@ -1,93 +0,0 @@
-import { $env, $hook, $inject, $logger, type Static, t } from "@alepha/core";
-import type { ApiLinksResponse } from "@alepha/server";
-import type { Root } from "react-dom/client";
-import { createRoot, hydrateRoot } from "react-dom/client";
-import { BrowserRouterProvider } from "./BrowserRouterProvider.ts";
-import type {
-	PreviousLayerData,
-	TransitionOptions,
-} from "./PageDescriptorProvider.ts";
-import { ReactBrowserProvider } from "./ReactBrowserProvider.ts";
-
-const envSchema = t.object({
-	REACT_ROOT_ID: t.string({ default: "root" }),
-});
-
-declare module "@alepha/core" {
-	interface Env extends Partial<Static<typeof envSchema>> {}
-}
-
-export interface ReactBrowserRendererOptions {
-	scrollRestoration?: "top" | "manual";
-}
-
-// TODO: move to ReactBrowserProvider when it will be removed from server-side imports
-export class ReactBrowserRenderer {
-	protected readonly browserProvider = $inject(ReactBrowserProvider);
-	protected readonly browserRouterProvider = $inject(BrowserRouterProvider);
-	protected readonly env = $env(envSchema);
-	protected readonly log = $logger();
-
-	protected root!: Root;
-
-	public options: ReactBrowserRendererOptions = {
-		scrollRestoration: "top",
-	};
-
-	protected getRootElement() {
-		const root = this.browserProvider.document.getElementById(
-			this.env.REACT_ROOT_ID,
-		);
-		if (root) {
-			return root;
-		}
-
-		const div = this.browserProvider.document.createElement("div");
-		div.id = this.env.REACT_ROOT_ID;
-
-		this.browserProvider.document.body.prepend(div);
-
-		return div;
-	}
-
-	public readonly ready = $hook({
-		on: "react:browser:render",
-		handler: async ({ state, context, hydration }) => {
-			const element = this.browserRouterProvider.root(state, context);
-
-			if (hydration?.layers) {
-				this.root = hydrateRoot(this.getRootElement(), element);
-				this.log.info("Hydrated root element");
-			} else {
-				this.root ??= createRoot(this.getRootElement());
-				this.root.render(element);
-				this.log.info("Created root element");
-			}
-		},
-	});
-
-	protected readonly onTransitionEnd = $hook({
-		on: "react:transition:end",
-		handler: () => {
-			if (
-				this.options.scrollRestoration === "top" &&
-				typeof window !== "undefined"
-			) {
-				window.scrollTo(0, 0);
-			}
-		},
-	});
-}
-
-// ---------------------------------------------------------------------------------------------------------------------
-
-export interface RouterGoOptions {
-	replace?: boolean;
-	match?: TransitionOptions;
-	params?: Record<string, string>;
-}
-
-export interface ReactHydrationState {
-	layers?: Array<PreviousLayerData>;
-	links?: ApiLinksResponse;
-}