@alepha/react 0.14.3 → 0.15.0

package/README.md

@@ -10,3 +10,13 @@ This package is part of the Alepha framework and can be installed via the all-in
 npm install alepha
 ```
 
+## API Reference
+
+### Environment Variables
+
+Environment variables used to configure this package.
+
+| Variable | Type | Default | Description |
+|----------|------|---------|-------------|
+| `REACT_SSR_ENABLED` | boolean | - |  |
+| `REACT_STRICT_MODE` | boolean | true |  |

package/dist/auth/index.browser.js

@@ -2,6 +2,7 @@ import { $atom, $env, $hook, $inject, $module, $use, Alepha, AlephaError, KIND,
 import { AlephaDateTime, DateTimeProvider } from "alepha/datetime";
 import { $logger } from "alepha/logger";
 import { AlephaServerLinks, LinkProvider } from "alepha/server/links";
+import { BrowserHeadProvider } from "@alepha/react/head";
 import { RouterProvider } from "alepha/router";
 import { StrictMode, createContext, createElement, memo, use, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -23,6 +24,15 @@ var ReactPageService = class {
 	}
 };
 
+//#endregion
+//#region ../../src/router/constants/PAGE_PRELOAD_KEY.ts
+/**
+* Symbol key for SSR module preloading path.
+* Using Symbol.for() allows the Vite plugin to inject this at build time.
+* @internal
+*/
+const PAGE_PRELOAD_KEY = Symbol.for("alepha.page.preload");
+
 //#endregion
 //#region ../../src/router/primitives/$page.ts
 /**
@@ -37,7 +47,7 @@ var ReactPageService = class {
 * - Type-safe URL parameter and query string validation
 *
 * **Data Loading**
-* - Server-side data fetching with the `resolve` function
+* - Server-side data fetching with the `loader` function
 * - Automatic serialization and hydration for SSR
 * - Access to request context, URL params, and parent data
 *
@@ -74,7 +84,7 @@ var ReactPageService = class {
 *     params: t.object({ id: t.integer() }),
 *     query: t.object({ tab: t.optional(t.text()) })
 *   },
-*   resolve: async ({ params }) => {
+*   loader: async ({ params }) => {
 *     const user = await userApi.getUser(params.id);
 *     return { user };
 *   },
@@ -87,7 +97,7 @@ var ReactPageService = class {
 * const projectSection = $page({
 *   path: "/projects/:id",
 *   children: () => [projectBoard, projectSettings],
-*   resolve: async ({ params }) => {
+*   loader: async ({ params }) => {
 *     const project = await projectApi.get(params.id);
 *     return { project };
 *   },
@@ -106,7 +116,7 @@ var ReactPageService = class {
 *   static: {
 *     entries: posts.map(p => ({ params: { slug: p.slug } }))
 *   },
-*   resolve: async ({ params }) => {
+*   loader: async ({ params }) => {
 *     const post = await loadPost(params.slug);
 *     return { post };
 *   }
@@ -587,7 +597,7 @@ const RouterLayerContext = createContext(void 0);
 * import { Redirection } from "@alepha/react";
 *
 * const MyPage = $page({
-*   resolve: async () => {
+*   loader: async () => {
 *    if (needRedirect) {
 *      throw new Redirection("/new-path");
 *    }
@@ -743,13 +753,13 @@ function parseAnimation(animationLike, state, type = "enter") {
 
 //#endregion
 //#region ../../src/router/providers/ReactPageProvider.ts
-const envSchema$1 = t.object({ REACT_STRICT_MODE: t.boolean({ default: true }) });
+const envSchema = t.object({ REACT_STRICT_MODE: t.boolean({ default: true }) });
 /**
 * Handle page routes for React applications. (Browser and Server)
 */
 var ReactPageProvider = class {
 	log = $logger();
-	env = $env(envSchema$1);
+	env = $env(envSchema);
 	alepha = $inject(Alepha);
 	pages = [];
 	getPages() {
@@ -869,11 +879,11 @@ var ReactPageProvider = class {
 				}
 				forceRefresh = true;
 			}
-			if (!route$1.resolve) continue;
+			if (!route$1.loader) continue;
 			try {
 				const args = Object.create(state);
 				Object.assign(args, config, context);
-				const props = await route$1.resolve?.(args) ?? {};
+				const props = await route$1.loader?.(args) ?? {};
 				it.props = { ...props };
 				context = {
 					...context,
@@ -881,7 +891,7 @@ var ReactPageProvider = class {
 				};
 			} catch (e) {
 				if (e instanceof Redirection) return { redirect: e.redirect };
-				this.log.error("Page resolver has failed", e);
+				this.log.error("Page loader has failed", e);
 				it.error = e;
 				break;
 			}
@@ -1076,6 +1086,7 @@ var ReactBrowserRouterProvider = class extends RouterProvider {
 	log = $logger();
 	alepha = $inject(Alepha);
 	pageApi = $inject(ReactPageProvider);
+	browserHeadProvider = $inject(BrowserHeadProvider);
 	add(entry) {
 		this.pageApi.add(entry);
 	}
@@ -1146,6 +1157,7 @@ var ReactBrowserRouterProvider = class extends RouterProvider {
 		this.alepha.store.set("alepha.react.router.state", state);
 		await this.alepha.events.emit("react:action:end", { type: "transition" });
 		await this.alepha.events.emit("react:transition:end", { state });
+		this.browserHeadProvider.fillAndRenderHead(state);
 	}
 	root(state) {
 		return this.pageApi.root(state);
@@ -1154,7 +1166,6 @@ var ReactBrowserRouterProvider = class extends RouterProvider {
 
 //#endregion
 //#region ../../src/router/providers/ReactBrowserProvider.ts
-const envSchema = t.object({ REACT_ROOT_ID: t.text({ default: "root" }) });
 /**
 * React browser renderer configuration atom
 */
@@ -1164,18 +1175,21 @@ const reactBrowserOptions = $atom({
 	default: { scrollRestoration: "top" }
 });
 var ReactBrowserProvider = class {
-	env = $env(envSchema);
 	log = $logger();
 	client = $inject(LinkProvider);
 	alepha = $inject(Alepha);
 	router = $inject(ReactBrowserRouterProvider);
 	dateTimeProvider = $inject(DateTimeProvider);
+	browserHeadProvider = $inject(BrowserHeadProvider);
 	options = $use(reactBrowserOptions);
+	get rootId() {
+		return "root";
+	}
 	getRootElement() {
-		const root = this.document.getElementById(this.env.REACT_ROOT_ID);
+		const root = this.document.getElementById(this.rootId);
 		if (root) return root;
 		const div = this.document.createElement("div");
-		div.id = this.env.REACT_ROOT_ID;
+		div.id = this.rootId;
 		this.document.body.prepend(div);
 		return div;
 	}
@@ -1308,6 +1322,7 @@ var ReactBrowserProvider = class {
 				hydration,
 				state: this.state
 			});
+			this.browserHeadProvider.fillAndRenderHead(this.state);
 			window.addEventListener("popstate", () => {
 				if (this.base + this.state.url.pathname === this.location.pathname) return;
 				this.log.debug("Popstate event triggered - rendering new state", { url: this.location.pathname + this.location.search });