@alepha/react 0.14.3 → 0.14.4

package/src/router/providers/ReactBrowserProvider.ts

@@ -1,36 +1,14 @@
-import {
-  $atom,
-  $env,
-  $hook,
-  $inject,
-  $use,
-  Alepha,
-  type State,
-  type Static,
-  t,
-} from "alepha";
+import { $atom, $env, $hook, $inject, $use, Alepha, type State, type Static, t, } from "alepha";
 import { DateTimeProvider } from "alepha/datetime";
 import { $logger } from "alepha/logger";
 import { LinkProvider } from "alepha/server/links";
+import { BrowserHeadProvider } from "@alepha/react/head";
 import { ReactBrowserRouterProvider } from "./ReactBrowserRouterProvider.ts";
-import type {
-  PreviousLayerData,
-  ReactRouterState,
-  TransitionOptions,
-} from "./ReactPageProvider.ts";
+import type { PreviousLayerData, ReactRouterState, } from "./ReactPageProvider.ts";
 import type { RouterGoOptions } from "../services/ReactRouter.ts";
 
 export type { RouterGoOptions } from "../services/ReactRouter.ts";
 
-// ---------------------------------------------------------------------------------------------------------------------
-
-const envSchema = t.object({
-  REACT_ROOT_ID: t.text({ default: "root" }),
-});
-
-declare module "alepha" {
-  interface Env extends Partial<Static<typeof envSchema>> {}
-}
 
 /**
  * React browser renderer configuration atom
@@ -38,7 +16,7 @@ declare module "alepha" {
 export const reactBrowserOptions = $atom({
   name: "alepha.react.browser.options",
   schema: t.object({
-    scrollRestoration: t.enum(["top", "manual"]),
+    scrollRestoration: t.enum(["top", "manual"]), // TODO: must be per page?
   }),
   default: {
     scrollRestoration: "top" as const,
@@ -58,23 +36,27 @@ declare module "alepha" {
 // ---------------------------------------------------------------------------------------------------------------------
 
 export class ReactBrowserProvider {
-  protected readonly env = $env(envSchema);
   protected readonly log = $logger();
   protected readonly client = $inject(LinkProvider);
   protected readonly alepha = $inject(Alepha);
   protected readonly router = $inject(ReactBrowserRouterProvider);
   protected readonly dateTimeProvider = $inject(DateTimeProvider);
+  protected readonly browserHeadProvider = $inject(BrowserHeadProvider);
 
   protected readonly options = $use(reactBrowserOptions);
 
+  public get rootId() {
+    return "root";
+  }
+
   protected 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);
 
@@ -281,6 +263,9 @@ export class ReactBrowserProvider {
         state: this.state,
       });
 
+      // Fill and render head from route configurations
+      this.browserHeadProvider.fillAndRenderHead(this.state);
+
       window.addEventListener("popstate", () => {
         // when you update silently queryParams or hash, skip rendering
         // if you want to force a rendering, use #go()

package/src/router/providers/ReactBrowserRouterProvider.ts

@@ -2,6 +2,7 @@ import { $hook, $inject, Alepha } from "alepha";
 import { $logger } from "alepha/logger";
 import { type Route, RouterProvider } from "alepha/router";
 import { createElement, type ReactNode } from "react";
+import { BrowserHeadProvider } from "@alepha/react/head";
 import NotFoundPage from "../components/NotFound.tsx";
 import {
   isPageRoute,
@@ -23,6 +24,7 @@ export class ReactBrowserRouterProvider extends RouterProvider<BrowserRoute> {
   protected readonly log = $logger();
   protected readonly alepha = $inject(Alepha);
   protected readonly pageApi = $inject(ReactPageProvider);
+  protected readonly browserHeadProvider = $inject(BrowserHeadProvider);
 
   public add(entry: PageRouteEntry) {
     this.pageApi.add(entry);
@@ -147,6 +149,9 @@ export class ReactBrowserRouterProvider extends RouterProvider<BrowserRoute> {
     await this.alepha.events.emit("react:transition:end", {
       state,
     });
+
+    // Fill and render head from route configurations
+    this.browserHeadProvider.fillAndRenderHead(state);
   }
 
   public root(state: ReactRouterState): ReactNode {

package/src/router/providers/ReactPageProvider.ts

@@ -22,6 +22,7 @@ import {
   type PagePrimitive,
   type PagePrimitiveOptions,
 } from "../primitives/$page.ts";
+import type { Head } from "@alepha/react/head";
 
 const envSchema = t.object({
   REACT_STRICT_MODE: t.boolean({ default: true }),
@@ -251,15 +252,15 @@ export class ReactPageProvider {
         forceRefresh = true;
       }
 
-      // no resolve, render a basic view by default
-      if (!route.resolve) {
+      // no loader, render a basic view by default
+      if (!route.loader) {
         continue;
       }
 
       try {
         const args = Object.create(state);
         Object.assign(args, config, context);
-        const props = (await route.resolve?.(args)) ?? {};
+        const props = (await route.loader?.(args)) ?? {};
 
         // save props
         it.props = {
@@ -279,7 +280,7 @@ export class ReactPageProvider {
           };
         }
 
-        this.log.error("Page resolver has failed", e);
+        this.log.error("Page loader has failed", e);
 
         it.error = e as Error;
         break;
@@ -696,6 +697,12 @@ export interface ReactRouterState {
    */
   meta: Record<string, any>;
 
+  /**
+   * Head configuration for the current page (title, meta tags, etc.).
+   * Populated by HeadProvider during SSR.
+   */
+  head: Head;
+
   //
   name?: string;
 }