@alepha/react 0.6.0 → 0.6.1

package/src/hooks/useAuth.ts

@@ -1,29 +0,0 @@
-import type { UserAccountToken } from "@alepha/security";
-import { useContext } from "react";
-import { RouterContext } from "../contexts/RouterContext";
-import { Auth } from "../services/Auth";
-
-export const useAuth = (): AuthHook => {
-	const ctx = useContext(RouterContext);
-	if (!ctx) {
-		throw new Error("useAuth must be used within a RouterContext");
-	}
-
-	const args = ctx.args ?? {};
-
-	return {
-		user: args.user,
-		logout: () => {
-			ctx.alepha.get(Auth).logout();
-		},
-		login: (provider?: string) => {
-			ctx.alepha.get(Auth).login();
-		},
-	};
-};
-
-export interface AuthHook {
-	user?: UserAccountToken;
-	logout: () => void;
-	login: (provider?: string) => void;
-}

package/src/hooks/useClient.ts

@@ -1,6 +0,0 @@
-import { HttpClient } from "@alepha/server";
-import { useInject } from "./useInject";
-
-export const useClient = (): HttpClient => {
-	return useInject(HttpClient);
-};

package/src/hooks/useInject.ts

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

package/src/hooks/useQueryParams.ts

@@ -1,59 +0,0 @@
-import type { Alepha, Static, TObject } from "@alepha/core";
-import { useContext, useEffect, useState } from "react";
-import { RouterContext } from "../contexts/RouterContext";
-import { useRouter } from "./useRouter";
-
-export interface UseQueryParamsHookOptions {
-	format?: "base64" | "querystring";
-	key?: string;
-	push?: boolean;
-}
-
-export const useQueryParams = <T extends TObject>(
-	schema: T,
-	options: UseQueryParamsHookOptions = {},
-): [Static<T>, (data: Static<T>) => void] => {
-	const ctx = useContext(RouterContext);
-	if (!ctx) {
-		throw new Error("useQueryParams must be used within a RouterProvider");
-	}
-
-	const key = options.key ?? "q";
-	const router = useRouter();
-	const querystring = router.query[key];
-
-	const [queryParams, setQueryParams] = useState(
-		decode(ctx.alepha, schema, router.query[key]),
-	);
-
-	useEffect(() => {
-		setQueryParams(decode(ctx.alepha, schema, querystring));
-	}, [querystring]);
-
-	return [
-		queryParams,
-		(queryParams: Static<T>) => {
-			setQueryParams(queryParams);
-			router.setQueryParams(
-				{ [key]: encode(ctx.alepha, schema, queryParams) },
-				{
-					merge: true,
-				},
-			);
-		},
-	];
-};
-
-// ---------------------------------------------------------------------------------------------------------------------
-
-const encode = (alepha: Alepha, schema: TObject, data: any) => {
-	return btoa(JSON.stringify(alepha.parse(schema, data)));
-};
-
-const decode = (alepha: Alepha, schema: TObject, data: any) => {
-	try {
-		return alepha.parse(schema, JSON.parse(atob(decodeURIComponent(data))));
-	} catch (error) {
-		return {};
-	}
-};

package/src/hooks/useRouter.ts

@@ -1,28 +0,0 @@
-import { useContext, useMemo } from "react";
-import { RouterContext } from "../contexts/RouterContext";
-import { RouterLayerContext } from "../contexts/RouterLayerContext";
-import { ReactBrowserProvider } from "../providers/ReactBrowserProvider";
-import { RouterHookApi } from "./RouterHookApi";
-
-/**
- *
- */
-export const useRouter = (): RouterHookApi => {
-	const ctx = useContext(RouterContext);
-	const layer = useContext(RouterLayerContext);
-	if (!ctx || !layer) {
-		throw new Error("useRouter must be used within a RouterProvider");
-	}
-
-	return useMemo(
-		() =>
-			new RouterHookApi(
-				ctx.state,
-				layer,
-				ctx.alepha.isBrowser()
-					? ctx.alepha.get(ReactBrowserProvider)
-					: undefined,
-			),
-		[ctx.router, layer],
-	);
-};

package/src/hooks/useRouterEvents.ts

@@ -1,43 +0,0 @@
-import { useContext, useEffect } from "react";
-import { RouterContext } from "../contexts/RouterContext";
-import { RouterLayerContext } from "../contexts/RouterLayerContext";
-import type { RouterState } from "../services/Router";
-
-export const useRouterEvents = (
-	opts: {
-		onBegin?: () => void;
-		onEnd?: (it: RouterState) => void;
-		onError?: (it: Error) => void;
-	} = {},
-) => {
-	const ctx = useContext(RouterContext);
-	const layer = useContext(RouterLayerContext);
-	if (!ctx || !layer) {
-		throw new Error("useRouter must be used within a RouterProvider");
-	}
-
-	useEffect(() => {
-		const subs: Function[] = [];
-		const onBegin = opts.onBegin;
-		const onEnd = opts.onEnd;
-		const onError = opts.onError;
-
-		if (onBegin) {
-			subs.push(ctx.router.on("begin", onBegin));
-		}
-
-		if (onEnd) {
-			subs.push(ctx.router.on("end", onEnd));
-		}
-
-		if (onError) {
-			subs.push(ctx.router.on("error", onError));
-		}
-
-		return () => {
-			for (const sub of subs) {
-				sub();
-			}
-		};
-	}, []);
-};

package/src/hooks/useRouterState.ts

@@ -1,23 +0,0 @@
-import { useContext, useEffect, useState } from "react";
-import { RouterContext } from "../contexts/RouterContext";
-import { RouterLayerContext } from "../contexts/RouterLayerContext";
-import type { RouterState } from "../services/Router";
-
-export const useRouterState = (): RouterState => {
-	const ctx = useContext(RouterContext);
-	const layer = useContext(RouterLayerContext);
-	if (!ctx || !layer) {
-		throw new Error("useRouter must be used within a RouterProvider");
-	}
-
-	const [state, setState] = useState(ctx.state);
-	useEffect(
-		() =>
-			ctx.router.on("end", (it) => {
-				setState({ ...it });
-			}),
-		[],
-	);
-
-	return state;
-};

package/src/index.browser.ts

@@ -1,21 +0,0 @@
-import { $inject, Alepha, autoInject } from "@alepha/core";
-import { $page } from "./descriptors/$page";
-import { PageDescriptorProvider } from "./providers/PageDescriptorProvider";
-import { ReactBrowserProvider } from "./providers/ReactBrowserProvider";
-import { Auth } from "./services/Auth";
-
-export * from "./index.shared";
-export * from "./providers/ReactBrowserProvider";
-
-export class ReactModule {
-	protected readonly alepha = $inject(Alepha);
-
-	constructor() {
-		this.alepha //
-			.with(PageDescriptorProvider)
-			.with(ReactBrowserProvider)
-			.with(Auth);
-	}
-}
-
-autoInject($page, ReactModule);

package/src/index.shared.ts

@@ -1,28 +0,0 @@
-export { default as NestedView } from "./components/NestedView";
-export { default as Link } from "./components/Link";
-
-export * from "./contexts/RouterContext";
-export * from "./contexts/RouterLayerContext";
-
-export * from "./services/Auth";
-
-export * from "./descriptors/$page";
-export * from "./descriptors/$auth";
-
-export * from "./hooks/RouterHookApi";
-
-// --- Hooks
-// - core
-export * from "./hooks/useInject";
-// - http
-export * from "./hooks/useClient";
-// - router
-export * from "./hooks/useQueryParams";
-export * from "./hooks/useRouter";
-export * from "./hooks/useRouterEvents";
-export * from "./hooks/useRouterState";
-export * from "./hooks/useActive";
-// - auth
-export * from "./hooks/useAuth";
-
-export * from "./services/Router";

package/src/index.ts

@@ -1,46 +0,0 @@
-import { $inject, Alepha, type Static, autoInject, t } from "@alepha/core";
-import { ServerLinksProvider, ServerModule } from "@alepha/server";
-import { $auth } from "./descriptors/$auth";
-import { $page } from "./descriptors/$page";
-import { PageDescriptorProvider } from "./providers/PageDescriptorProvider";
-import { ReactAuthProvider } from "./providers/ReactAuthProvider";
-import { ReactServerProvider } from "./providers/ReactServerProvider";
-import { Auth } from "./services/Auth";
-export { default as NestedView } from "./components/NestedView";
-
-export * from "./index.shared";
-export * from "./providers/PageDescriptorProvider";
-export * from "./providers/ReactBrowserProvider";
-export * from "./providers/ReactServerProvider";
-export * from "./providers/ReactAuthProvider";
-export * from "./services/Router";
-export * from "./errors/RedirectionError";
-
-const envSchema = t.object({
-	REACT_AUTH_ENABLED: t.boolean({ default: false }),
-});
-
-declare module "@alepha/core" {
-	interface Env extends Partial<Static<typeof envSchema>> {}
-}
-
-export class ReactModule {
-	protected readonly env = $inject(envSchema);
-	protected readonly alepha = $inject(Alepha);
-
-	constructor() {
-		this.alepha //
-			.with(ServerModule)
-			.with(ServerLinksProvider)
-			.with(PageDescriptorProvider)
-			.with(ReactServerProvider);
-
-		if (this.env.REACT_AUTH_ENABLED) {
-			this.alepha.with(ReactAuthProvider);
-			this.alepha.with(Auth);
-		}
-	}
-}
-
-autoInject($page, ReactModule);
-autoInject($auth, ReactAuthProvider, Auth);

package/src/providers/PageDescriptorProvider.ts

@@ -1,52 +0,0 @@
-import { $hook, $inject, Alepha } from "@alepha/core";
-import type { PageDescriptorOptions } from "../descriptors/$page";
-import { $page } from "../descriptors/$page";
-import type { PageRoute, PageRouteEntry } from "../services/Router";
-import { Router } from "../services/Router";
-
-export class PageDescriptorProvider {
-	protected readonly alepha = $inject(Alepha);
-	protected readonly router = $inject(Router);
-
-	protected readonly configure = $hook({
-		name: "configure",
-		handler: () => {
-			const pages = this.alepha.getDescriptorValues($page);
-			for (const { value, key } of pages) {
-				value.options.name ??= key;
-
-				// skip children, we only want root pages
-				if (pages.find((it) => it.value.options.children?.().includes(value))) {
-					continue;
-				}
-
-				this.router.add(this.map(pages, value));
-			}
-		},
-	});
-
-	/**
-	 * Transform
-	 * @param pages
-	 * @param target
-	 * @protected
-	 */
-	protected map(
-		pages: Array<{ value: { options: PageDescriptorOptions } }>,
-		target: { options: PageDescriptorOptions },
-	): PageRouteEntry {
-		const children = target.options.children?.() ?? [];
-
-		for (const it of pages) {
-			if (it.value.options.parent === target) {
-				children.push(it.value);
-			}
-		}
-
-		return {
-			...target.options,
-			parent: undefined,
-			children: children.map((it) => this.map(pages, it)),
-		} as PageRoute;
-	}
-}