@alepha/react 0.5.2 → 0.6.1

package/src/descriptors/$page.ts

@@ -1,90 +0,0 @@
-import type { Async, Static, TSchema } from "@alepha/core";
-import { KIND, NotImplementedError, __descriptor } from "@alepha/core";
-import type { UserAccountToken } from "@alepha/security";
-import type { FC } from "react";
-import type { RouterHookApi } from "../hooks/RouterHookApi";
-
-export const pageDescriptorKey = "PAGE";
-
-export interface PageDescriptorConfigSchema {
-	query?: TSchema;
-	params?: TSchema;
-}
-export type TPropsDefault = any;
-export type TPropsParentDefault = object;
-
-export interface PageDescriptorOptions<
-	TConfig extends PageDescriptorConfigSchema = PageDescriptorConfigSchema,
-	TProps extends object = TPropsDefault,
-	TPropsParent extends object = TPropsParentDefault,
-> {
-	parent?: { options: PageDescriptorOptions<any, TPropsParent> };
-	name?: string;
-	path?: string;
-	schema?: TConfig;
-	abstract?: boolean;
-	resolve?: (
-		config: PageDescriptorConfigValue<TConfig> &
-			TPropsParent & { user?: UserAccountToken },
-	) => Async<TProps>;
-	component?: FC<TProps & TPropsParent>;
-	lazy?: () => Promise<{ default: FC<TProps & TPropsParent> }>;
-	children?: () => Array<{ options: PageDescriptorOptions }>;
-	notFoundHandler?: FC<{ error: Error }>;
-	errorHandler?: FC<{ error: Error; url: string }>;
-}
-
-export interface PageDescriptorConfigValue<
-	TConfig extends PageDescriptorConfigSchema = PageDescriptorConfigSchema,
-> {
-	query: TConfig["query"] extends TSchema
-		? Static<TConfig["query"]>
-		: Record<string, string>;
-	params: TConfig["params"] extends TSchema
-		? Static<TConfig["params"]>
-		: Record<string, string>;
-	pathname: string;
-}
-
-export interface PageDescriptor<
-	TConfig extends PageDescriptorConfigSchema = PageDescriptorConfigSchema,
-	TProps extends object = TPropsDefault,
-	TPropsParent extends object = TPropsParentDefault,
-> {
-	[KIND]: typeof pageDescriptorKey;
-	render: (options?: {
-		params?: Record<string, string>;
-		query?: Record<string, string>;
-	}) => Promise<string>;
-	go: () => void;
-	createAnchorProps: (routerHook: RouterHookApi) => {
-		href: string;
-		onClick: () => void;
-	};
-	options: PageDescriptorOptions<TConfig, TProps, TPropsParent>;
-}
-
-export const $page = <
-	TConfig extends PageDescriptorConfigSchema = PageDescriptorConfigSchema,
-	TProps extends object = TPropsDefault,
-	TPropsParent extends object = TPropsParentDefault,
->(
-	options: PageDescriptorOptions<TConfig, TProps, TPropsParent>,
-): PageDescriptor<TConfig, TProps, TPropsParent> => {
-	__descriptor(pageDescriptorKey);
-	return {
-		[KIND]: pageDescriptorKey,
-		options,
-		render: () => {
-			throw new NotImplementedError(pageDescriptorKey);
-		},
-		go: () => {
-			throw new NotImplementedError(pageDescriptorKey);
-		},
-		createAnchorProps: () => {
-			throw new NotImplementedError(pageDescriptorKey);
-		},
-	};
-};
-
-$page[KIND] = pageDescriptorKey;

package/src/hooks/RouterHookApi.ts

@@ -1,154 +0,0 @@
-import {} from "react";
-import type {
-	ReactBrowserProvider,
-	RouterGoOptions,
-} from "../providers/ReactBrowserProvider";
-import type { AnchorProps, RouterState } from "../services/Router";
-
-export class RouterHookApi {
-	constructor(
-		private readonly state: RouterState,
-		private readonly layer: {
-			path: string;
-		},
-		private readonly browser?: ReactBrowserProvider,
-	) {}
-
-	/**
-	 *
-	 */
-	public get current(): RouterState {
-		return this.state;
-	}
-
-	/**
-	 *
-	 */
-	public get pathname(): string {
-		return this.state.pathname;
-	}
-
-	/**
-	 *
-	 */
-	public get query(): Record<string, string> {
-		const query: Record<string, string> = {};
-
-		for (const [key, value] of new URLSearchParams(
-			this.state.search,
-		).entries()) {
-			query[key] = String(value);
-		}
-
-		return query;
-	}
-
-	/**
-	 *
-	 */
-	public async back() {
-		this.browser?.history.back();
-	}
-
-	/**
-	 *
-	 */
-	public async forward() {
-		this.browser?.history.forward();
-	}
-
-	/**
-	 *
-	 * @param props
-	 */
-	public async invalidate(props?: Record<string, any>) {
-		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) {
-		if (typeof pathname === "object") {
-			pathname = pathname.options.path ?? "";
-		}
-
-		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);
-	}
-
-	/**
-	 *
-	 * @param path
-	 */
-	public createAnchorProps(path: string): AnchorProps {
-		const href = this.createHref(path, this.layer);
-		return {
-			href,
-			onClick: (ev: any) => {
-				ev.stopPropagation();
-				ev.preventDefault();
-
-				this.go(path).catch(console.error);
-			},
-		};
-	}
-
-	/**
-	 * Set query params.
-	 *
-	 * @param record
-	 * @param options
-	 */
-	public setQueryParams(
-		record: 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 state = search ? `${this.pathname}?${search}` : this.pathname;
-
-		if (options.push) {
-			window.history.pushState({}, "", state);
-		} else {
-			window.history.replaceState({}, "", state);
-		}
-	}
-}
-
-export type HrefLike = string | { options: { path?: string; name?: string } };

package/src/hooks/useActive.ts

@@ -1,57 +0,0 @@
-import { useContext, useEffect, useMemo, useState } from "react";
-import { RouterContext } from "../contexts/RouterContext";
-import { RouterLayerContext } from "../contexts/RouterLayerContext";
-import type { AnchorProps } from "../services/Router";
-import type { HrefLike } from "./RouterHookApi";
-import { useRouter } from "./useRouter";
-
-export const useActive = (path: HrefLike): UseActiveHook => {
-	const router = useRouter();
-	const ctx = useContext(RouterContext);
-	const layer = useContext(RouterLayerContext);
-	if (!ctx || !layer) {
-		throw new Error("useRouter must be used within a RouterProvider");
-	}
-
-	let name: string | undefined;
-	if (typeof path === "object" && path.options.name) {
-		name = path.options.name;
-	}
-
-	const [current, setCurrent] = useState(ctx.state.pathname);
-	const href = useMemo(() => router.createHref(path, layer), [path, layer]);
-	const [isPending, setPending] = useState(false);
-	const isActive = current === href;
-
-	useEffect(
-		() => ctx.router.on("end", ({ pathname }) => setCurrent(pathname)),
-		[],
-	);
-
-	return {
-		name,
-		isPending,
-		isActive,
-		anchorProps: {
-			href,
-			onClick: (ev: any) => {
-				ev.stopPropagation();
-				ev.preventDefault();
-				if (isActive) return;
-				if (isPending) return;
-
-				setPending(true);
-				router.go(href).then(() => {
-					setPending(false);
-				});
-			},
-		},
-	};
-};
-
-export interface UseActiveHook {
-	isActive: boolean;
-	anchorProps: AnchorProps;
-	isPending: boolean;
-	name?: string;
-}

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 { ClassEntry } from "@alepha/core";
-import { useContext } from "react";
-import { RouterContext } from "../contexts/RouterContext";
-
-export const useInject = <T extends object>(classEntry: ClassEntry<T>): T => {
-	const ctx = useContext(RouterContext);
-	if (!ctx) {
-		throw new Error("useRouter must be used within a <RouterProvider>");
-	}
-
-	return ctx.alepha.get(classEntry);
-};

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,19 +0,0 @@
-import { $inject, Alepha, autoInject } from "@alepha/core";
-import { $page } from "./descriptors/$page";
-import { PageDescriptorProvider } from "./providers/PageDescriptorProvider";
-import { ReactBrowserProvider } from "./providers/ReactBrowserProvider";
-
-export * from "./index.shared";
-export * from "./providers/ReactBrowserProvider";
-
-export class ReactModule {
-	protected readonly alepha = $inject(Alepha);
-
-	constructor() {
-		this.alepha //
-			.with(PageDescriptorProvider)
-			.with(ReactBrowserProvider);
-	}
-}
-
-autoInject($page, ReactModule);

package/src/index.shared.ts

@@ -1,17 +0,0 @@
-export { default as NestedView } from "./components/NestedView";
-
-export * from "./contexts/RouterContext";
-export * from "./contexts/RouterLayerContext";
-
-export * from "./descriptors/$page";
-
-export * from "./hooks/useActive";
-export * from "./hooks/useClient";
-export * from "./hooks/useInject";
-export * from "./hooks/useQueryParams";
-export * from "./hooks/RouterHookApi";
-export * from "./hooks/useRouter";
-export * from "./hooks/useRouterEvents";
-export * from "./hooks/useRouterState";
-
-export * from "./services/Router";

package/src/index.ts

@@ -1,29 +0,0 @@
-import { $inject, Alepha, autoInject } from "@alepha/core";
-import { ServerLinksProvider, ServerModule } from "@alepha/server";
-import { $page } from "./descriptors/$page";
-import { PageDescriptorProvider } from "./providers/PageDescriptorProvider";
-import { ReactServerProvider } from "./providers/ReactServerProvider";
-import { ReactSessionProvider } from "./providers/ReactSessionProvider";
-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/ReactSessionProvider";
-export * from "./services/Router";
-
-export class ReactModule {
-	protected readonly alepha = $inject(Alepha);
-
-	constructor() {
-		this.alepha //
-			.with(ServerModule)
-			.with(ServerLinksProvider)
-			.with(ReactServerProvider)
-			.with(ReactSessionProvider)
-			.with(PageDescriptorProvider);
-	}
-}
-
-autoInject($page, ReactModule);

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;
-	}
-}