@alepha/react 0.9.3 → 0.9.5

package/src/hooks/useRouter.ts

@@ -1,33 +1,20 @@
-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";
-import { useAlepha } from "./useAlepha.ts";
+import { ReactRouter } from "../services/ReactRouter.ts";
+import { useInject } from "./useInject.ts";
 
-export const useRouter = <T extends object>(): RouterHookApi<T> => {
-	const alepha = useAlepha();
-	const ctx = useContext(RouterContext);
-	const layer = useContext(RouterLayerContext);
-	if (!ctx || !layer) {
-		throw new Error("useRouter must be used within a RouterProvider");
-	}
-
-	const pages = useMemo(() => {
-		return alepha.inject(PageDescriptorProvider).getPages();
-	}, []);
-
-	return useMemo(
-		() =>
-			new RouterHookApi(
-				pages,
-				ctx.context,
-				ctx.state,
-				layer,
-				alepha.inject(PageDescriptorProvider),
-				alepha.isBrowser() ? alepha.inject(ReactBrowserProvider) : undefined,
-			),
-		[layer],
-	);
+/**
+ * Use this hook to access the React Router instance.
+ *
+ * You can add a type parameter to specify the type of your application.
+ * This will allow you to use the router in a typesafe way.
+ *
+ * @example
+ * class App {
+ *   home = $page();
+ * }
+ *
+ * const router = useRouter<App>();
+ * router.go("home"); // typesafe
+ */
+export const useRouter = <T extends object = any>(): ReactRouter<T> => {
+	return useInject(ReactRouter<T>);
 };

package/src/hooks/useRouterEvents.ts

@@ -1,15 +1,23 @@
+import type { Hooks } from "@alepha/core";
 import { useEffect } from "react";
-import type {
-	PageReactContext,
-	RouterState,
-} from "../providers/PageDescriptorProvider.ts";
 import { useAlepha } from "./useAlepha.ts";
 
+type Hook<T extends keyof Hooks> =
+	| ((ev: Hooks[T]) => void)
+	| {
+			priority?: "first" | "last";
+			callback: (ev: Hooks[T]) => void;
+	  };
+
+/**
+ * Subscribe to various router events.
+ */
 export const useRouterEvents = (
 	opts: {
-		onBegin?: (ev: { state: RouterState }) => void;
-		onEnd?: (ev: { state: RouterState; context: PageReactContext }) => void;
-		onError?: (ev: { state: RouterState; error: Error }) => void;
+		onBegin?: Hook<"react:transition:begin">;
+		onError?: Hook<"react:transition:error">;
+		onEnd?: Hook<"react:transition:end">;
+		onSuccess?: Hook<"react:transition:success">;
 	} = {},
 	deps: any[] = [],
 ) => {
@@ -20,33 +28,33 @@ export const useRouterEvents = (
 			return;
 		}
 
+		const cb = <T extends keyof Hooks>(callback: Hook<T>) => {
+			if (typeof callback === "function") {
+				return { callback };
+			}
+			return callback;
+		};
+
 		const subs: Function[] = [];
 		const onBegin = opts.onBegin;
 		const onEnd = opts.onEnd;
 		const onError = opts.onError;
+		const onSuccess = opts.onSuccess;
 
 		if (onBegin) {
-			subs.push(
-				alepha.on("react:transition:begin", {
-					callback: onBegin,
-				}),
-			);
+			subs.push(alepha.on("react:transition:begin", cb(onBegin)));
 		}
 
 		if (onEnd) {
-			subs.push(
-				alepha.on("react:transition:end", {
-					callback: onEnd,
-				}),
-			);
+			subs.push(alepha.on("react:transition:end", cb(onEnd)));
 		}
 
 		if (onError) {
-			subs.push(
-				alepha.on("react:transition:error", {
-					callback: onError,
-				}),
-			);
+			subs.push(alepha.on("react:transition:error", cb(onError)));
+		}
+
+		if (onSuccess) {
+			subs.push(alepha.on("react:transition:success", cb(onSuccess)));
 		}
 
 		return () => {

package/src/hooks/useRouterState.ts

@@ -1,23 +1,11 @@
-import { useContext, useState } from "react";
-import { RouterContext } from "../contexts/RouterContext.ts";
-import { RouterLayerContext } from "../contexts/RouterLayerContext.ts";
-import type { RouterState } from "../providers/PageDescriptorProvider.ts";
-import { useRouterEvents } from "./useRouterEvents.ts";
-
-export const useRouterState = (): RouterState => {
-	const router = useContext(RouterContext);
-	const layer = useContext(RouterLayerContext);
-	if (!router || !layer) {
-		throw new Error(
-			"useRouterState must be used within a RouterContext.Provider",
-		);
+import { AlephaError } from "@alepha/core";
+import type { ReactRouterState } from "../providers/ReactPageProvider.ts";
+import { useStore } from "./useStore.ts";
+
+export const useRouterState = (): ReactRouterState => {
+	const [state] = useStore("react.router.state");
+	if (!state) {
+		throw new AlephaError("Missing react router state");
 	}
-
-	const [state, setState] = useState(router.state);
-
-	useRouterEvents({
-		onEnd: ({ state }) => setState({ ...state }),
-	});
-
 	return state;
 };

package/src/hooks/useSchema.ts

@@ -4,11 +4,7 @@ import {
 	HttpClient,
 	type RequestConfigSchema,
 } from "@alepha/server";
-import {
-	type HttpClientLink,
-	LinkProvider,
-	type VirtualAction,
-} from "@alepha/server-links";
+import { LinkProvider, type VirtualAction } from "@alepha/server-links";
 import { useEffect, useState } from "react";
 import { useAlepha } from "./useAlepha.ts";
 import { useInject } from "./useInject.ts";
@@ -19,7 +15,6 @@ export const useSchema = <TConfig extends RequestConfigSchema>(
 	const name = action.name;
 	const alepha = useAlepha();
 	const httpClient = useInject(HttpClient);
-	const linkProvider = useInject(LinkProvider);
 	const [schema, setSchema] = useState<UseSchemaReturn<TConfig>>(
 		ssrSchemaLoading(alepha, name) as UseSchemaReturn<TConfig>,
 	);
@@ -34,7 +29,7 @@ export const useSchema = <TConfig extends RequestConfigSchema>(
 		};
 
 		httpClient
-			.fetch(`${linkProvider.URL_LINKS}/${name}/schema`, {}, opts)
+			.fetch(`${LinkProvider.path.apiLinks}/${name}/schema`, {}, opts)
 			.then((it) => setSchema(it.data as UseSchemaReturn<TConfig>));
 	}, [name]);
 
@@ -54,26 +49,26 @@ export const ssrSchemaLoading = (alepha: Alepha, name: string) => {
 	// server-side rendering (SSR) context
 	if (!alepha.isBrowser()) {
 		// get user links
-		const links =
-			alepha.context.get<{ links: HttpClientLink[] }>("links")?.links ?? [];
+		const linkProvider = alepha.inject(LinkProvider);
 
 		// check if user can access the link
-		const can = links.find((it) => it.name === name);
+		const can = linkProvider
+			.getServerLinks()
+			.find((link) => link.name === name);
 
 		// yes!
 		if (can) {
 			// user-links have no schema, so we need to get it from the provider
-			const schema = alepha
-				.inject(LinkProvider)
-				.links?.find((it) => it.name === name)?.schema;
+			const schema = linkProvider.links.find((it) => it.name === name)?.schema;
 
 			// oh, we have a schema!
 			if (schema) {
-				// attach to user link, it will be used in the client during hydration :)
+				// attach to user link, it will be used in the client during hydration
 				can.schema = schema;
 				return schema;
 			}
 		}
+
 		return { loading: true };
 	}
 
@@ -81,7 +76,7 @@ export const ssrSchemaLoading = (alepha: Alepha, name: string) => {
 	// check if we have the schema already loaded
 	const schema = alepha
 		.inject(LinkProvider)
-		.links?.find((it) => it.name === name)?.schema;
+		.links.find((it) => it.name === name)?.schema;
 
 	// yes!
 	if (schema) {

package/src/hooks/useStore.ts

@@ -31,13 +31,6 @@ export const useStore = <Key extends keyof State>(
 		});
 	}, []);
 
-	if (!alepha.isBrowser()) {
-		const value = alepha.context.get(key) as State[Key];
-		if (value !== null) {
-			return [value, (_: State[Key]) => {}] as const;
-		}
-	}
-
 	return [
 		state,
 		(value: State[Key]) => {

package/src/index.browser.ts

@@ -2,17 +2,18 @@ import { $module } from "@alepha/core";
 import { AlephaServer } from "@alepha/server";
 import { AlephaServerLinks } from "@alepha/server-links";
 import { $page } from "./descriptors/$page.ts";
-import { BrowserRouterProvider } from "./providers/BrowserRouterProvider.ts";
-import { PageDescriptorProvider } from "./providers/PageDescriptorProvider.ts";
 import { ReactBrowserProvider } from "./providers/ReactBrowserProvider.ts";
-import { ReactBrowserRenderer } from "./providers/ReactBrowserRenderer.ts";
+import { ReactBrowserRendererProvider } from "./providers/ReactBrowserRendererProvider.ts";
+import { ReactBrowserRouterProvider } from "./providers/ReactBrowserRouterProvider.ts";
+import { ReactPageProvider } from "./providers/ReactPageProvider.ts";
+import { ReactRouter } from "./services/ReactRouter.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
 export * from "./index.shared.ts";
-export * from "./providers/BrowserRouterProvider.ts";
-export * from "./providers/PageDescriptorProvider.ts";
 export * from "./providers/ReactBrowserProvider.ts";
+export * from "./providers/ReactBrowserRouterProvider.ts";
+export * from "./providers/ReactPageProvider.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
@@ -20,17 +21,19 @@ export const AlephaReact = $module({
 	name: "alepha.react",
 	descriptors: [$page],
 	services: [
-		PageDescriptorProvider,
-		ReactBrowserRenderer,
-		BrowserRouterProvider,
+		ReactPageProvider,
+		ReactBrowserRouterProvider,
 		ReactBrowserProvider,
+		ReactRouter,
+		ReactBrowserRendererProvider,
 	],
 	register: (alepha) =>
 		alepha
 			.with(AlephaServer)
 			.with(AlephaServerLinks)
-			.with(PageDescriptorProvider)
+			.with(ReactPageProvider)
 			.with(ReactBrowserProvider)
-			.with(BrowserRouterProvider)
-			.with(ReactBrowserRenderer),
+			.with(ReactBrowserRouterProvider)
+			.with(ReactBrowserRendererProvider)
+			.with(ReactRouter),
 });

package/src/index.shared.ts

@@ -1,15 +1,13 @@
 export { default as ClientOnly } from "./components/ClientOnly.tsx";
 export { default as ErrorBoundary } from "./components/ErrorBoundary.tsx";
-export * from "./components/ErrorViewer.tsx";
+export { default as ErrorViewer } from "./components/ErrorViewer.tsx";
 export { default as Link, type LinkProps } from "./components/Link.tsx";
 export { default as NestedView } from "./components/NestedView.tsx";
 export { default as NotFound } from "./components/NotFound.tsx";
 export * from "./contexts/AlephaContext.ts";
-export * from "./contexts/RouterContext.ts";
 export * from "./contexts/RouterLayerContext.ts";
 export * from "./descriptors/$page.ts";
 export * from "./errors/Redirection.ts";
-export * from "./hooks/RouterHookApi.ts";
 export * from "./hooks/useActive.ts";
 export * from "./hooks/useAlepha.ts";
 export * from "./hooks/useClient.ts";
@@ -20,3 +18,4 @@ export * from "./hooks/useRouterEvents.ts";
 export * from "./hooks/useRouterState.ts";
 export * from "./hooks/useSchema.ts";
 export * from "./hooks/useStore.ts";
+export * from "./services/ReactRouter.ts";

package/src/index.ts

@@ -2,66 +2,61 @@ import { $module } from "@alepha/core";
 import { AlephaServer, type ServerRequest } from "@alepha/server";
 import { AlephaServerCache } from "@alepha/server-cache";
 import { AlephaServerLinks } from "@alepha/server-links";
-import { $page } from "./descriptors/$page.ts";
+import type { ReactNode } from "react";
+import { $page, type PageAnimation } from "./descriptors/$page.ts";
+import type { ReactHydrationState } from "./providers/ReactBrowserProvider.ts";
 import {
-	PageDescriptorProvider,
-	type PageReactContext,
-	type PageRequest,
-	type RouterState,
-} from "./providers/PageDescriptorProvider.ts";
-import {
-	ReactBrowserProvider,
-	type ReactHydrationState,
-} from "./providers/ReactBrowserProvider.ts";
+	ReactPageProvider,
+	type ReactRouterState,
+} from "./providers/ReactPageProvider.ts";
 import { ReactServerProvider } from "./providers/ReactServerProvider.ts";
+import { ReactRouter } from "./services/ReactRouter.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
 export * from "./index.shared.ts";
-export * from "./providers/PageDescriptorProvider.ts";
 export * from "./providers/ReactBrowserProvider.ts";
+export * from "./providers/ReactPageProvider.ts";
 export * from "./providers/ReactServerProvider.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
 declare module "@alepha/core" {
+	interface State {
+		"react.router.state"?: ReactRouterState;
+	}
+
 	interface Hooks {
-		"react:router:createLayers": {
-			request: ServerRequest;
-			context: PageRequest;
-			layers: PageRequest[];
-		};
 		"react:server:render:begin": {
 			request?: ServerRequest;
-			context: PageRequest;
+			state: ReactRouterState;
 		};
 		"react:server:render:end": {
 			request?: ServerRequest;
-			context: PageRequest;
-			state: RouterState;
+			state: ReactRouterState;
 			html: string;
 		};
+		// -----------------------------------------------------------------------------------------------------------------
 		"react:browser:render": {
-			state: RouterState;
-			context: PageReactContext;
+			root: HTMLDivElement;
+			element: ReactNode;
+			state: ReactRouterState;
 			hydration?: ReactHydrationState;
 		};
 		"react:transition:begin": {
-			state: RouterState;
-			context: PageReactContext;
+			previous: ReactRouterState;
+			state: ReactRouterState;
+			animation?: PageAnimation;
 		};
 		"react:transition:success": {
-			state: RouterState;
-			context: PageReactContext;
+			state: ReactRouterState;
 		};
 		"react:transition:error": {
+			state: ReactRouterState;
 			error: Error;
-			state: RouterState;
-			context: PageReactContext;
 		};
 		"react:transition:end": {
-			state: RouterState;
-			context: PageReactContext;
+			state: ReactRouterState;
 		};
 	}
 }
@@ -81,12 +76,13 @@ declare module "@alepha/core" {
 export const AlephaReact = $module({
 	name: "alepha.react",
 	descriptors: [$page],
-	services: [ReactServerProvider, PageDescriptorProvider, ReactBrowserProvider],
+	services: [ReactServerProvider, ReactPageProvider, ReactRouter],
 	register: (alepha) =>
 		alepha
 			.with(AlephaServer)
 			.with(AlephaServerCache)
 			.with(AlephaServerLinks)
 			.with(ReactServerProvider)
-			.with(PageDescriptorProvider),
+			.with(ReactPageProvider)
+			.with(ReactRouter),
 });