@alepha/react 0.14.3 → 0.15.0

package/dist/router/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, useEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -22,6 +23,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
 /**
@@ -36,7 +46,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
 *
@@ -73,7 +83,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 };
 *   },
@@ -86,7 +96,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 };
 *   },
@@ -105,7 +115,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 };
 *   }
@@ -586,7 +596,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");
 *    }
@@ -742,13 +752,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() {
@@ -868,11 +878,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,
@@ -880,7 +890,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;
 			}
@@ -1075,6 +1085,7 @@ var ReactBrowserRouterProvider = class extends RouterProvider {
 	log = $logger();
 	alepha = $inject(Alepha);
 	pageApi = $inject(ReactPageProvider);
+	browserHeadProvider = $inject(BrowserHeadProvider);
 	add(entry) {
 		this.pageApi.add(entry);
 	}
@@ -1145,6 +1156,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);
@@ -1153,7 +1165,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
 */
@@ -1163,18 +1174,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;
 	}
@@ -1307,6 +1321,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 });
@@ -1596,5 +1611,5 @@ const AlephaReactRouter = $module({
 });
 
 //#endregion
-export { $page, AlephaReactRouter, ErrorViewer_default as ErrorViewer, Link_default as Link, NestedView_default as NestedView, NotFound_default as NotFound, PagePrimitive, ReactBrowserProvider, ReactBrowserRendererProvider, ReactBrowserRouterProvider, ReactPageProvider, ReactPageService, ReactRouter, Redirection, RouterLayerContext, isPageRoute, reactBrowserOptions, useActive, useQueryParams, useRouter, useRouterState };
+export { $page, AlephaReactRouter, ErrorViewer_default as ErrorViewer, Link_default as Link, NestedView_default as NestedView, NotFound_default as NotFound, PAGE_PRELOAD_KEY, PagePrimitive, ReactBrowserProvider, ReactBrowserRendererProvider, ReactBrowserRouterProvider, ReactPageProvider, ReactPageService, ReactRouter, Redirection, RouterLayerContext, isPageRoute, reactBrowserOptions, useActive, useQueryParams, useRouter, useRouterState };
 //# sourceMappingURL=index.browser.js.map