@alepha/react 0.6.0 → 0.6.2

package/src/providers/ReactBrowserProvider.ts

@@ -1,250 +0,0 @@
-import { $hook, $inject, $logger } from "@alepha/core";
-import type { UserAccountToken } from "@alepha/security";
-import { HttpClient } from "@alepha/server";
-import type { Root } from "react-dom/client";
-import { createRoot, hydrateRoot } from "react-dom/client";
-import type {
-	PreviousLayerData,
-	RouterMatchOptions,
-	RouterState,
-} from "../services/Router";
-import { Router } from "../services/Router";
-import type { RouterRenderHelmetContext } from "../services/Router";
-import type { ReactHydrationState } from "./ReactAuthProvider";
-
-export class ReactBrowserProvider {
-	protected readonly log = $logger();
-	protected readonly client = $inject(HttpClient);
-	protected readonly router = $inject(Router);
-	protected root!: Root;
-
-	public transitioning?: {
-		to: string;
-	};
-
-	public state: RouterState = {
-		layers: [],
-		pathname: "",
-		search: "",
-		context: {},
-	};
-
-	/**
-	 *
-	 */
-	public get document() {
-		return window.document;
-	}
-
-	/**
-	 *
-	 */
-	public get history() {
-		return window.history;
-	}
-
-	/**
-	 *
-	 */
-	public get url(): string {
-		return window.location.pathname + window.location.search;
-	}
-
-	/**
-	 *
-	 * @param props
-	 */
-	public async invalidate(props?: Record<string, any>) {
-		const previous: PreviousLayerData[] = [];
-
-		if (props) {
-			const [key] = Object.keys(props);
-			const value = props[key];
-
-			for (const layer of this.state.layers) {
-				if (layer.props?.[key]) {
-					previous.push({
-						...layer,
-						props: {
-							...layer.props,
-							[key]: value,
-						},
-					});
-					break;
-				}
-				previous.push(layer);
-			}
-		}
-
-		await this.render({ previous });
-	}
-
-	/**
-	 *
-	 * @param url
-	 * @param options
-	 */
-	public async go(url: string, options: RouterGoOptions = {}): Promise<void> {
-		const result = await this.render({
-			url,
-		});
-
-		if (result.url !== url) {
-			this.history.replaceState({}, "", result.url);
-			return;
-		}
-
-		if (options.replace) {
-			this.history.replaceState({}, "", url);
-			return;
-		}
-
-		this.history.pushState({}, "", url);
-	}
-
-	/**
-	 *
-	 * @param options
-	 * @protected
-	 */
-	protected async render(
-		options: {
-			url?: string;
-			previous?: PreviousLayerData[];
-		} = {},
-	): Promise<{ url: string }> {
-		const previous = options.previous ?? this.state.layers;
-		const url = options.url ?? this.url;
-
-		this.transitioning = { to: url };
-
-		const result = await this.router.render(url, {
-			previous,
-			state: this.state,
-		});
-
-		if (result.redirect) {
-			return await this.render({ url: result.redirect });
-		}
-
-		this.transitioning = undefined;
-
-		return { url };
-	}
-
-	protected renderHelmetContext(ctx: RouterRenderHelmetContext) {
-		if (ctx.title) {
-			this.document.title = ctx.title;
-		}
-	}
-
-	/**
-	 * Get embedded layers from the server.
-	 *
-	 * @protected
-	 */
-	protected getHydrationState(): ReactHydrationState | undefined {
-		try {
-			if ("__ssr" in window && typeof window.__ssr === "object") {
-				return window.__ssr as ReactHydrationState;
-			}
-		} catch (error) {
-			console.error(error);
-		}
-	}
-
-	/**
-	 *
-	 * @protected
-	 */
-	protected getRootElement() {
-		const root = this.document.getElementById("root");
-		if (root) {
-			return root;
-		}
-
-		const div = this.document.createElement("div");
-		div.id = "root";
-
-		this.document.body.appendChild(div);
-
-		return div;
-	}
-
-	protected getUserFromCookies(): UserAccountToken | undefined {
-		const cookies = this.document.cookie.split("; ");
-		const userCookie = cookies.find((cookie) => cookie.startsWith("user="));
-		try {
-			if (userCookie) {
-				return JSON.parse(decodeURIComponent(userCookie.split("=")[1]));
-			}
-		} catch (error) {
-			this.log.warn(error, "Failed to parse user cookie");
-		}
-
-		return undefined;
-	}
-
-	// -------------------------------------------------------------------------------------------------------------------
-
-	/**
-	 *
-	 * @protected
-	 */
-	protected ready = $hook({
-		name: "ready",
-		handler: async () => {
-			const cache = this.getHydrationState();
-			const previous = cache?.layers ?? [];
-
-			await this.render({ previous });
-
-			const element = this.router.root(this.state, {
-				user: cache?.user ?? this.getUserFromCookies(),
-			});
-
-			if (previous.length > 0) {
-				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");
-			}
-
-			window.addEventListener("popstate", () => {
-				this.render();
-			});
-
-			this.router.on("end", ({ context }) => {
-				if (context.helmet) {
-					this.renderHelmetContext(context.helmet);
-				}
-			});
-		},
-	});
-
-	/**
-	 *
-	 * @protected
-	 */
-	protected stop = $hook({
-		name: "stop",
-		handler: async () => {
-			if (this.root) {
-				this.root.unmount();
-				this.log.info("Unmounted root element");
-			}
-		},
-	});
-}
-
-// ---------------------------------------------------------------------------------------------------------------------
-
-/**
- *
- */
-export interface RouterGoOptions {
-	replace?: boolean;
-	match?: RouterMatchOptions;
-}

package/src/providers/ReactServerProvider.ts

@@ -1,301 +0,0 @@
-import { existsSync } from "node:fs";
-import { readFile } from "node:fs/promises";
-import { join } from "node:path";
-import { $logger, Alepha, type Static } from "@alepha/core";
-import { $hook, $inject, t } from "@alepha/core";
-import {
-	type CreateRoute,
-	type ServeDescriptorOptions,
-	ServerProvider,
-} from "@alepha/server";
-import { renderToString } from "react-dom/server";
-import { $page, type PageContext } from "../descriptors/$page";
-import { Router, type RouterRenderHelmetContext } from "../services/Router";
-
-export const envSchema = t.object({
-	REACT_SERVER_DIST: t.string({ default: "client" }),
-	REACT_SERVER_PREFIX: t.string({ default: "" }),
-	REACT_SSR_ENABLED: t.boolean({ default: false }),
-	REACT_SSR_OUTLET: t.string({ default: "<!--ssr-outlet-->" }),
-});
-
-declare module "@alepha/core" {
-	interface Env extends Partial<Static<typeof envSchema>> {}
-	interface State {
-		"ReactServerProvider.template"?: string;
-	}
-}
-
-export class ReactServerProvider {
-	protected readonly log = $logger();
-	protected readonly alepha = $inject(Alepha);
-	protected readonly router = $inject(Router);
-	protected readonly server = $inject(ServerProvider);
-	protected readonly env = $inject(envSchema);
-
-	protected readonly configure = $hook({
-		name: "configure",
-		handler: async () => {
-			await this.configureRoutes();
-		},
-	});
-
-	protected async configureRoutes() {
-		if (this.alepha.isTest()) {
-			this.processDescriptors();
-		}
-
-		if (this.router.empty()) {
-			return;
-		}
-
-		if (process.env.VITE_ALEPHA_DEV === "true") {
-			this.log.info("SSR (vite) OK");
-			const templateUrl = "http://127.0.0.1:5173/index.html"; // TODO: use env variable from vite
-			this.log.debug(`Fetch template from ${templateUrl}`);
-
-			const route = this.createHandler(() =>
-				fetch(templateUrl)
-					.then((it) => it.text())
-					.catch(() => undefined)
-					.then((it) => (it ? this.checkTemplate(it) : undefined)),
-			);
-
-			await this.server.route(route);
-
-			// fallback for static files
-			await this.server.route({
-				...route,
-				url: "*",
-			});
-
-			return;
-		}
-
-		let root = "";
-
-		if (!this.alepha.isServerless()) {
-			const maybe = [
-				join(process.cwd(), this.env.REACT_SERVER_DIST),
-				join(process.cwd(), "..", this.env.REACT_SERVER_DIST),
-			];
-
-			for (const it of maybe) {
-				if (existsSync(it)) {
-					root = it;
-					break;
-				}
-			}
-
-			if (!root) {
-				this.log.warn("Missing static files, SSR will be disabled");
-				return;
-			}
-
-			await this.server.serve(this.createStaticHandler(root));
-		}
-
-		const template = this.checkTemplate(
-			this.alepha.state("ReactServerProvider.template") ??
-				(await readFile(join(root, "index.html"), "utf-8")),
-		);
-
-		const route = this.createHandler(async () => template);
-
-		await this.server.route(route); // we must take control of "/", or it will be handled by the static handler
-
-		// fallback for static files
-		await this.server.route({
-			...route,
-			url: "*",
-		});
-	}
-
-	/**
-	 * Check if the template contains the outlet.
-	 *
-	 * @param template
-	 * @protected
-	 */
-	protected checkTemplate(template: string) {
-		if (!template.includes(this.env.REACT_SSR_OUTLET)) {
-			if (!template.includes('<div id="root"></div>')) {
-				throw new Error(
-					`Missing React SSR outlet in index.html, please add ${this.env.REACT_SSR_OUTLET} to the index.html file`,
-				);
-			}
-
-			return template.replace(
-				`<div id="root"></div>`,
-				`<div id="root">${this.env.REACT_SSR_OUTLET}</div>`,
-			);
-		}
-
-		return template;
-	}
-
-	/**
-	 *
-	 * @param root
-	 * @protected
-	 */
-	protected createStaticHandler(root: string): ServeDescriptorOptions {
-		return {
-			root,
-			prefix: this.env.REACT_SERVER_PREFIX,
-			logLevel: "warn",
-			cacheControl: true,
-			immutable: true,
-			preCompressed: true,
-			maxAge: "30d",
-			index: false,
-		};
-	}
-
-	/**
-	 *
-	 * @param templateLoader
-	 * @protected
-	 */
-	protected createHandler(
-		templateLoader: () => Promise<string | undefined>,
-	): CreateRoute {
-		return {
-			method: "GET",
-			url: "/",
-			handler: async (ctx) => {
-				const template = await templateLoader();
-				if (!template) {
-					return new Response("Not found", { status: 404 });
-				}
-
-				const response = this.notFoundHandler(ctx.url);
-				if (response) {
-					// not found handler for static files (favicon, css, js, etc)
-					return response;
-				}
-
-				return await this.ssr(ctx.url, template, {
-					user: ctx.user,
-					cookies: ctx.cookies,
-				});
-			},
-		};
-	}
-
-	protected processDescriptors() {
-		const pages = this.alepha.getDescriptorValues($page);
-		for (const { key, instance, value } of pages) {
-			instance[key].render = async (
-				options: {
-					params?: Record<string, string>;
-					query?: Record<string, string>;
-				} = {},
-			) => {
-				const name = value.options.name ?? key;
-				const page = this.router.page(name);
-				const layers = await this.router.createLayers(
-					"",
-					page,
-					options.params ?? {},
-					options.query ?? {},
-					[],
-				);
-
-				return renderToString(
-					this.router.root({
-						layers,
-						pathname: "",
-						search: "",
-						context: {},
-					}),
-				);
-			};
-		}
-	}
-
-	/**
-	 *
-	 * @param url
-	 * @protected
-	 */
-	protected notFoundHandler(url: URL) {
-		if (url.pathname.match(/\.\w+$/)) {
-			return new Response("Not found", { status: 404 });
-		}
-	}
-
-	/**
-	 *
-	 * @param url
-	 * @param template
-	 * @param page
-	 */
-	public async ssr(
-		url: URL,
-		template: string = this.env.REACT_SSR_OUTLET,
-		page: PageContext = {},
-	): Promise<Response> {
-		const { element, layers, redirect, context } = await this.router.render(
-			url.pathname + url.search,
-			{
-				args: page,
-			},
-		);
-
-		if (redirect) {
-			return new Response("", {
-				status: 302,
-				headers: {
-					Location: redirect,
-				},
-			});
-		}
-
-		const appHtml = renderToString(element);
-
-		const script = `<script>window.__ssr=${JSON.stringify({
-			layers: layers.map((it) => ({
-				...it,
-				index: undefined,
-				path: undefined,
-				element: undefined,
-			})),
-		})}</script>`;
-
-		const index = template.indexOf("</body>");
-		if (index !== -1) {
-			template = template.slice(0, index) + script + template.slice(index);
-		}
-
-		if (context.helmet) {
-			template = this.renderHelmetContext(template, context.helmet);
-		}
-
-		template = template.replace(this.env.REACT_SSR_OUTLET, appHtml);
-
-		return new Response(template, {
-			headers: { "Content-Type": "text/html" },
-		});
-	}
-
-	protected renderHelmetContext(
-		template: string,
-		helmetContext: RouterRenderHelmetContext,
-	) {
-		if (helmetContext.title) {
-			if (template.includes("<title>")) {
-				template = template.replace(
-					/<title>.*<\/title>/,
-					`<title>${helmetContext.title}</title>`,
-				);
-			} else {
-				template = template.replace(
-					"</head>",
-					`<title>${helmetContext.title}</title></head>`,
-				);
-			}
-		}
-		return template;
-	}
-}

package/src/services/Auth.ts

@@ -1,45 +0,0 @@
-import { $hook, $inject, $logger, Alepha } from "@alepha/core";
-import { HttpClient } from "@alepha/server";
-import { RedirectionError } from "../errors/RedirectionError";
-import { ReactBrowserProvider } from "../providers/ReactBrowserProvider";
-
-export class Auth {
-	alepha = $inject(Alepha);
-	log = $logger();
-	client = $inject(HttpClient);
-	api = "/api/_oauth/login";
-
-	start = $hook({
-		name: "start",
-		handler: async () => {
-			this.client.on("onError", (err) => {
-				if (err.statusCode === 401) {
-					this.login();
-				}
-			});
-		},
-	});
-
-	login = (provider?: string) => {
-		if (this.alepha.isBrowser()) {
-			const browser = this.alepha.get(ReactBrowserProvider);
-			const redirect = browser.transitioning
-				? window.location.origin + browser.transitioning.to
-				: window.location.href;
-
-			window.location.href = `${this.api}?redirect=${redirect}`;
-
-			if (browser.transitioning) {
-				throw new RedirectionError(browser.state.pathname);
-			}
-
-			return;
-		}
-
-		throw new RedirectionError(this.api);
-	};
-
-	logout = () => {
-		window.location.href = `/api/_oauth/logout?redirect=${encodeURIComponent(window.location.origin)}`;
-	};
-}