@alepha/react 0.6.0 → 0.6.1

package/dist/index.cjs

@@ -142,7 +142,7 @@ class ReactAuthProvider {
    */
   login = server.$route({
     security: false,
-    private: true,
+    internal: true,
     url: "/_oauth/login",
     group: "auth",
     method: "GET",
@@ -153,13 +153,13 @@ class ReactAuthProvider {
       })
     },
     handler: async ({ query, cookies, url }) => {
-      const { client } = this.provider(query.provider);
+      const { client, redirectUri } = this.provider(query.provider);
       const codeVerifier = openidClient.randomPKCECodeVerifier();
       const codeChallenge = await openidClient.calculatePKCECodeChallenge(codeVerifier);
       const scope = "openid profile email";
-      let redirect_uri = this.authProviders[0].redirectUri;
+      let redirect_uri = redirectUri;
       if (redirect_uri.startsWith("/")) {
-        redirect_uri = `${url.protocol}://${url.host}${redirect_uri}`;
+        redirect_uri = `${url.protocol}//${url.host}${redirect_uri}`;
       }
       const parameters = {
         redirect_uri,
@@ -184,7 +184,7 @@ class ReactAuthProvider {
    */
   callback = server.$route({
     security: false,
-    private: true,
+    internal: true,
     url: "/_oauth/callback",
     group: "auth",
     method: "GET",
@@ -246,7 +246,7 @@ class ReactAuthProvider {
    */
   logout = server.$route({
     security: false,
-    private: true,
+    internal: true,
     url: "/_oauth/logout",
     group: "auth",
     method: "GET",
@@ -339,7 +339,7 @@ class ReactServerProvider {
     }
     if (process.env.VITE_ALEPHA_DEV === "true") {
       this.log.info("SSR (vite) OK");
-      const templateUrl = "http://127.0.0.1:5173/index.html";
+      const templateUrl = `http://${process.env.SERVER_HOST}:${process.env.SERVER_PORT}/index.html`;
       this.log.debug(`Fetch template from ${templateUrl}`);
       const route2 = this.createHandler(
         () => fetch(templateUrl).then((it) => it.text()).catch(() => void 0).then((it) => it ? this.checkTemplate(it) : void 0)
@@ -434,10 +434,7 @@ class ReactServerProvider {
         if (response) {
           return response;
         }
-        return await this.ssr(ctx.url, template, {
-          user: ctx.user,
-          cookies: ctx.cookies
-        });
+        return await this.ssr(ctx.url, template, ctx);
       }
     };
   }
@@ -479,13 +476,13 @@ class ReactServerProvider {
    *
    * @param url
    * @param template
-   * @param page
+   * @param args
    */
-  async ssr(url, template = this.env.REACT_SSR_OUTLET, page = {}) {
+  async ssr(url, template = this.env.REACT_SSR_OUTLET, args = {}) {
     const { element, layers, redirect, context } = await this.router.render(
       url.pathname + url.search,
       {
-        args: page
+        args
       }
     );
     if (redirect) {

package/dist/index.d.ts

@@ -1014,9 +1014,9 @@ declare class ReactServerProvider {
      *
      * @param url
      * @param template
-     * @param page
+     * @param args
      */
-    ssr(url: URL, template?: string, page?: PageContext): Promise<Response>;
+    ssr(url: URL, template?: string, args?: PageContext): Promise<Response>;
     protected renderHelmetContext(template: string, helmetContext: RouterRenderHelmetContext): string;
 }
 

package/dist/index.js

@@ -141,7 +141,7 @@ class ReactAuthProvider {
    */
   login = $route({
     security: false,
-    private: true,
+    internal: true,
     url: "/_oauth/login",
     group: "auth",
     method: "GET",
@@ -152,13 +152,13 @@ class ReactAuthProvider {
       })
     },
     handler: async ({ query, cookies, url }) => {
-      const { client } = this.provider(query.provider);
+      const { client, redirectUri } = this.provider(query.provider);
       const codeVerifier = randomPKCECodeVerifier();
       const codeChallenge = await calculatePKCECodeChallenge(codeVerifier);
       const scope = "openid profile email";
-      let redirect_uri = this.authProviders[0].redirectUri;
+      let redirect_uri = redirectUri;
       if (redirect_uri.startsWith("/")) {
-        redirect_uri = `${url.protocol}://${url.host}${redirect_uri}`;
+        redirect_uri = `${url.protocol}//${url.host}${redirect_uri}`;
       }
       const parameters = {
         redirect_uri,
@@ -183,7 +183,7 @@ class ReactAuthProvider {
    */
   callback = $route({
     security: false,
-    private: true,
+    internal: true,
     url: "/_oauth/callback",
     group: "auth",
     method: "GET",
@@ -245,7 +245,7 @@ class ReactAuthProvider {
    */
   logout = $route({
     security: false,
-    private: true,
+    internal: true,
     url: "/_oauth/logout",
     group: "auth",
     method: "GET",
@@ -338,7 +338,7 @@ class ReactServerProvider {
     }
     if (process.env.VITE_ALEPHA_DEV === "true") {
       this.log.info("SSR (vite) OK");
-      const templateUrl = "http://127.0.0.1:5173/index.html";
+      const templateUrl = `http://${process.env.SERVER_HOST}:${process.env.SERVER_PORT}/index.html`;
       this.log.debug(`Fetch template from ${templateUrl}`);
       const route2 = this.createHandler(
         () => fetch(templateUrl).then((it) => it.text()).catch(() => void 0).then((it) => it ? this.checkTemplate(it) : void 0)
@@ -433,10 +433,7 @@ class ReactServerProvider {
         if (response) {
           return response;
         }
-        return await this.ssr(ctx.url, template, {
-          user: ctx.user,
-          cookies: ctx.cookies
-        });
+        return await this.ssr(ctx.url, template, ctx);
       }
     };
   }
@@ -478,13 +475,13 @@ class ReactServerProvider {
    *
    * @param url
    * @param template
-   * @param page
+   * @param args
    */
-  async ssr(url, template = this.env.REACT_SSR_OUTLET, page = {}) {
+  async ssr(url, template = this.env.REACT_SSR_OUTLET, args = {}) {
     const { element, layers, redirect, context } = await this.router.render(
       url.pathname + url.search,
       {
-        args: page
+        args
       }
     );
     if (redirect) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alepha/react",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.js",
@@ -9,9 +9,9 @@
     "./dist/index.js": "./dist/index.browser.js"
   },
   "dependencies": {
-    "@alepha/core": "0.6.0",
-    "@alepha/security": "0.6.0",
-    "@alepha/server": "0.6.0",
+    "@alepha/core": "0.6.1",
+    "@alepha/security": "0.6.1",
+    "@alepha/server": "0.6.1",
     "openid-client": "^6.4.2",
     "path-to-regexp": "^8.2.0",
     "react-dom": "^18.3.1"

package/src/components/Link.tsx

@@ -1,22 +0,0 @@
-import React from "react";
-import type { AnchorHTMLAttributes } from "react";
-import { RouterContext } from "../contexts/RouterContext";
-import { useRouter } from "../hooks/useRouter";
-
-export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-	to: string;
-	children?: React.ReactNode;
-}
-
-const Link = (props: LinkProps) => {
-	React.useContext(RouterContext);
-
-	const router = useRouter();
-	return (
-		<a {...router.createAnchorProps(props.to)} {...props}>
-			{props.children}
-		</a>
-	);
-};
-
-export default Link;

package/src/components/NestedView.tsx

@@ -1,36 +0,0 @@
-import type { ReactNode } from "react";
-import { useContext, useEffect, useState } from "react";
-import { RouterContext } from "../contexts/RouterContext";
-import { RouterLayerContext } from "../contexts/RouterLayerContext";
-
-export interface NestedViewProps {
-	children?: ReactNode;
-}
-
-/**
- * Nested view component
- *
- * @param props
- * @constructor
- */
-const NestedView = (props: NestedViewProps) => {
-	const app = useContext(RouterContext);
-	const layer = useContext(RouterLayerContext);
-	const index = layer?.index ?? 0;
-
-	const [view, setView] = useState<ReactNode | undefined>(
-		app?.state.layers[index]?.element,
-	);
-
-	useEffect(() => {
-		if (app?.alepha.isBrowser()) {
-			return app?.router.on("end", (state) => {
-				setView(state.layers[index]?.element);
-			});
-		}
-	}, [app]);
-
-	return view ?? props.children ?? null;
-};
-
-export default NestedView;

package/src/constants/SSID.ts

@@ -1 +0,0 @@
-export const SSID = "ssid";

package/src/contexts/RouterContext.ts

@@ -1,15 +0,0 @@
-import type { Alepha } from "@alepha/core";
-import { createContext } from "react";
-import type { PageContext } from "../descriptors/$page";
-import type { Router, RouterState } from "../services/Router";
-
-export interface RouterContextValue {
-	router: Router;
-	alepha: Alepha;
-	state: RouterState;
-	args: PageContext;
-}
-
-export const RouterContext = createContext<RouterContextValue | undefined>(
-	undefined,
-);

package/src/contexts/RouterLayerContext.ts

@@ -1,10 +0,0 @@
-import { createContext } from "react";
-
-export interface RouterLayerContextValue {
-	index: number;
-	path: string;
-}
-
-export const RouterLayerContext = createContext<
-	RouterLayerContextValue | undefined
->(undefined);

package/src/descriptors/$auth.ts

@@ -1,28 +0,0 @@
-import { KIND, __descriptor } from "@alepha/core";
-
-const KEY = "AUTH";
-
-export interface AuthDescriptorOptions {
-	name?: string;
-	oidc?: {
-		issuer: string;
-		clientId: string;
-		clientSecret?: string;
-		redirectUri?: string;
-	};
-}
-
-export interface AuthDescriptor {
-	[KIND]: typeof KEY;
-	options: AuthDescriptorOptions;
-}
-
-export const $auth = (options: AuthDescriptorOptions): AuthDescriptor => {
-	__descriptor(KEY);
-	return {
-		[KIND]: KEY,
-		options,
-	};
-};
-
-$auth[KIND] = KEY;

package/src/descriptors/$page.ts

@@ -1,144 +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 { CookieManager } from "@alepha/server";
-import type { FC } from "react";
-import type { RouterHookApi } from "../hooks/RouterHookApi";
-import {} from "../services/Router";
-import type { RouterRenderHelmetContext } from "../services/Router";
-
-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,
-> {
-	/**
-	 *
-	 */
-	name?: string;
-
-	/**
-	 *
-	 */
-	path?: string;
-
-	/**
-	 *
-	 */
-	schema?: TConfig;
-
-	/**
-	 * Function to call when the page is loaded.
-	 */
-	resolve?: (
-		config: PageDescriptorConfigValue<TConfig> &
-			TPropsParent & { context: PageContext },
-		context: PageContext,
-	) => Async<TProps>;
-
-	/**
-	 * Component to render when the page is loaded.
-	 */
-	component?: FC<TProps & TPropsParent>;
-
-	/**
-	 * Component to render when the page is loaded. (like .component)
-	 */
-	lazy?: () => Promise<{ default: FC<TProps & TPropsParent> }>;
-
-	/**
-	 *
-	 */
-	children?: () => Array<{ options: PageDescriptorOptions }>;
-
-	/**
-	 *
-	 */
-	parent?: { options: PageDescriptorOptions<any, TPropsParent> };
-
-	/**
-	 *
-	 */
-	helmet?:
-		| RouterRenderHelmetContext
-		| ((props: TProps) => RouterRenderHelmetContext);
-
-	/**
-	 *
-	 */
-	notFoundHandler?: FC<{ error: Error }>;
-
-	/**
-	 *
-	 */
-	errorHandler?: FC<{ error: Error; url: string }>;
-}
-
-export interface PageContext {
-	user?: UserAccountToken;
-	cookies?: CookieManager;
-}
-
-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/errors/RedirectionError.ts

@@ -1,7 +0,0 @@
-import type { HrefLike } from "../hooks/RouterHookApi";
-
-export class RedirectionError extends Error {
-	constructor(public readonly page: HrefLike) {
-		super("Redirection");
-	}
-}

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