@alepha/react 0.7.1 → 0.7.2

package/dist/index.browser.cjs

@@ -1,17 +1,54 @@
 'use strict';
 
 var core = require('@alepha/core');
-var useRouterState = require('./useRouterState-AdK-XeM2.cjs');
+var useRouterState = require('./useRouterState-C2uo0jXu.cjs');
+var client = require('react-dom/client');
 require('react/jsx-runtime');
 require('react');
 require('@alepha/server');
-require('react-dom/client');
 require('@alepha/router');
 
+const envSchema = core.t.object({
+  REACT_ROOT_ID: core.t.string({ default: "root" })
+});
+class ReactBrowserRenderer {
+  browserProvider = core.$inject(useRouterState.ReactBrowserProvider);
+  browserRouterProvider = core.$inject(useRouterState.BrowserRouterProvider);
+  env = core.$inject(envSchema);
+  log = core.$logger();
+  root;
+  getRootElement() {
+    const root = this.browserProvider.document.getElementById(
+      this.env.REACT_ROOT_ID
+    );
+    if (root) {
+      return root;
+    }
+    const div = this.browserProvider.document.createElement("div");
+    div.id = this.env.REACT_ROOT_ID;
+    this.browserProvider.document.body.prepend(div);
+    return div;
+  }
+  ready = core.$hook({
+    name: "react:browser:render",
+    handler: async ({ state, context, hydration }) => {
+      const element = this.browserRouterProvider.root(state, context);
+      if (hydration?.layers) {
+        this.root = client.hydrateRoot(this.getRootElement(), element);
+        this.log.info("Hydrated root element");
+      } else {
+        this.root ??= client.createRoot(this.getRootElement());
+        this.root.render(element);
+        this.log.info("Created root element");
+      }
+    }
+  });
+}
+
 class ReactModule {
   alepha = core.$inject(core.Alepha);
   constructor() {
-    this.alepha.with(useRouterState.PageDescriptorProvider).with(useRouterState.ReactBrowserProvider).with(useRouterState.BrowserRouterProvider);
+    this.alepha.with(useRouterState.PageDescriptorProvider).with(useRouterState.ReactBrowserProvider).with(useRouterState.BrowserRouterProvider).with(ReactBrowserRenderer);
   }
 }
 core.__bind(useRouterState.$page, ReactModule);

package/dist/index.browser.js

@@ -1,16 +1,53 @@
-import { __bind, $inject, Alepha } from '@alepha/core';
-import { $ as $page, P as PageDescriptorProvider, l as ReactBrowserProvider, B as BrowserRouterProvider } from './useRouterState-qoMq7Y9J.js';
-export { C as ClientOnly, E as ErrorBoundary, L as Link, N as NestedView, R as RedirectionError, a as RouterContext, c as RouterHookApi, b as RouterLayerContext, u as useActive, d as useAlepha, e as useClient, f as useInject, g as useQueryParams, h as useRouter, i as useRouterEvents, j as useRouterState } from './useRouterState-qoMq7Y9J.js';
+import { t, $inject, $logger, $hook, __bind, Alepha } from '@alepha/core';
+import { l as ReactBrowserProvider, B as BrowserRouterProvider, $ as $page, P as PageDescriptorProvider } from './useRouterState-D5__ZcUV.js';
+export { C as ClientOnly, E as ErrorBoundary, L as Link, N as NestedView, R as RedirectionError, a as RouterContext, c as RouterHookApi, b as RouterLayerContext, u as useActive, d as useAlepha, e as useClient, f as useInject, g as useQueryParams, h as useRouter, i as useRouterEvents, j as useRouterState } from './useRouterState-D5__ZcUV.js';
+import { hydrateRoot, createRoot } from 'react-dom/client';
 import 'react/jsx-runtime';
 import 'react';
 import '@alepha/server';
-import 'react-dom/client';
 import '@alepha/router';
 
+const envSchema = t.object({
+  REACT_ROOT_ID: t.string({ default: "root" })
+});
+class ReactBrowserRenderer {
+  browserProvider = $inject(ReactBrowserProvider);
+  browserRouterProvider = $inject(BrowserRouterProvider);
+  env = $inject(envSchema);
+  log = $logger();
+  root;
+  getRootElement() {
+    const root = this.browserProvider.document.getElementById(
+      this.env.REACT_ROOT_ID
+    );
+    if (root) {
+      return root;
+    }
+    const div = this.browserProvider.document.createElement("div");
+    div.id = this.env.REACT_ROOT_ID;
+    this.browserProvider.document.body.prepend(div);
+    return div;
+  }
+  ready = $hook({
+    name: "react:browser:render",
+    handler: async ({ state, context, hydration }) => {
+      const element = this.browserRouterProvider.root(state, context);
+      if (hydration?.layers) {
+        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");
+      }
+    }
+  });
+}
+
 class ReactModule {
   alepha = $inject(Alepha);
   constructor() {
-    this.alepha.with(PageDescriptorProvider).with(ReactBrowserProvider).with(BrowserRouterProvider);
+    this.alepha.with(PageDescriptorProvider).with(ReactBrowserProvider).with(BrowserRouterProvider).with(ReactBrowserRenderer);
   }
 }
 __bind($page, ReactModule);

package/dist/index.cjs

@@ -2,14 +2,13 @@
 
 var core = require('@alepha/core');
 var server = require('@alepha/server');
-var useRouterState = require('./useRouterState-AdK-XeM2.cjs');
+var useRouterState = require('./useRouterState-C2uo0jXu.cjs');
 var node_fs = require('node:fs');
 var node_path = require('node:path');
 var serverStatic = require('@alepha/server-static');
 var server$1 = require('react-dom/server');
 require('react/jsx-runtime');
 require('react');
-require('react-dom/client');
 require('@alepha/router');
 
 class ServerHeadProvider {
@@ -138,7 +137,6 @@ class ReactServerProvider {
             return;
           }
           reply.headers["content-type"] = "text/html";
-          reply.status = 200;
           return this.template;
         }
       });
@@ -278,7 +276,6 @@ class ReactServerProvider {
       if (state.redirect) {
         return reply.redirect(state.redirect);
       }
-      reply.status = 200;
       reply.headers["content-type"] = "text/html";
       reply.headers["cache-control"] = "no-store, no-cache, must-revalidate, proxy-revalidate";
       reply.headers.pragma = "no-cache";
@@ -286,7 +283,9 @@ class ReactServerProvider {
       if (page.cache && serverRequest.user) {
         delete context.links;
       }
-      return this.renderToHtml(template, state, context);
+      const html = this.renderToHtml(template, state, context);
+      page.afterHandler?.(serverRequest);
+      return html;
     };
   }
   renderToHtml(template, state, context) {

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as _alepha_core from '@alepha/core';
 import { TSchema as TSchema$1, KIND, OPTIONS, Static as Static$1, Async, Alepha, Service, TObject as TObject$1 } from '@alepha/core';
-import { ServerRoute, ApiLinksResponse, HttpClient, ClientScope, HttpVirtualClient, ServerRouterProvider, ServerTimingProvider, ServerHandler, ServerRequest } from '@alepha/server';
+import { ServerRoute, ServerRequest, ApiLinksResponse, HttpClient, ClientScope, HttpVirtualClient, ServerRouterProvider, ServerTimingProvider, ServerHandler } from '@alepha/server';
 import * as React from 'react';
 import React__default, { PropsWithChildren, ReactNode, FC, ErrorInfo, AnchorHTMLAttributes } from 'react';
 import { Root } from 'react-dom/client';
@@ -227,6 +227,7 @@ interface PageDescriptorOptions<TConfig extends PageConfigSchema = PageConfigSch
      * If true, the page will be rendered on the client-side.
      */
     client?: boolean | ClientOnlyProps;
+    afterHandler?: (request: ServerRequest) => any;
 }
 interface PageDescriptor<TConfig extends PageConfigSchema = PageConfigSchema, TProps extends object = TPropsDefault, TPropsParent extends object = TPropsParentDefault> {
     [KIND]: typeof KEY;
@@ -296,11 +297,11 @@ interface PageRequestConfig<TConfig extends PageConfigSchema = PageConfigSchema>
 }
 type PageResolve<TConfig extends PageConfigSchema = PageConfigSchema, TPropsParent extends object = TPropsParentDefault> = PageRequestConfig<TConfig> & TPropsParent & PageReactContext;
 
-declare const envSchema$2: _alepha_core.TObject<{
+declare const envSchema$1: _alepha_core.TObject<{
     REACT_STRICT_MODE: TBoolean;
 }>;
 declare module "@alepha/core" {
-    interface Env extends Partial<Static$1<typeof envSchema$2>> {
+    interface Env extends Partial<Static$1<typeof envSchema$1>> {
     }
 }
 declare class PageDescriptorProvider {
@@ -445,22 +446,12 @@ declare class BrowserRouterProvider extends RouterProvider<BrowserRoute> {
     root(state: RouterState, context: PageReactContext): ReactNode;
 }
 
-declare const envSchema$1: _alepha_core.TObject<{
-    REACT_ROOT_ID: TString;
-}>;
-declare module "@alepha/core" {
-    interface Env extends Partial<Static$1<typeof envSchema$1>> {
-    }
-}
 declare class ReactBrowserProvider {
     protected readonly log: _alepha_core.Logger;
     protected readonly client: HttpClient;
     protected readonly alepha: Alepha;
     protected readonly router: BrowserRouterProvider;
     protected readonly headProvider: BrowserHeadProvider;
-    protected readonly env: {
-        REACT_ROOT_ID: string;
-    };
     protected root: Root;
     transitioning?: {
         to: string;
@@ -470,11 +461,6 @@ declare class ReactBrowserProvider {
     get history(): History;
     get url(): string;
     invalidate(props?: Record<string, any>): Promise<void>;
-    /**
-     *
-     * @param url
-     * @param options
-     */
     go(url: string, options?: RouterGoOptions): Promise<void>;
     protected render(options?: {
         url?: string;
@@ -482,19 +468,8 @@ declare class ReactBrowserProvider {
     }): Promise<RouterRenderResult>;
     /**
      * Get embedded layers from the server.
-     *
-     * @protected
      */
     protected getHydrationState(): ReactHydrationState | undefined;
-    /**
-     *
-     * @protected
-     */
-    protected getRootElement(): HTMLElement;
-    /**
-     *
-     * @protected
-     */
     readonly ready: _alepha_core.HookDescriptor<"ready">;
     readonly onTransitionEnd: _alepha_core.HookDescriptor<"react:transition:end">;
 }
@@ -542,30 +517,11 @@ declare class RouterHookApi {
     constructor(pages: PageRoute[], state: RouterState, layer: {
         path: string;
     }, browser?: ReactBrowserProvider | undefined);
-    /**
-     *
-     */
     get current(): RouterState;
-    /**
-     *
-     */
     get pathname(): string;
-    /**
-     *
-     */
     get query(): Record<string, string>;
-    /**
-     *
-     */
     back(): Promise<void>;
-    /**
-     *
-     */
     forward(): Promise<void>;
-    /**
-     *
-     * @param props
-     */
     invalidate(props?: Record<string, any>): Promise<void>;
     /**
      * Create a valid href for the given pathname.
@@ -734,9 +690,9 @@ declare class ReactServerProvider {
     protected readonly serverTimingProvider: ServerTimingProvider;
     protected readonly env: {
         REACT_SSR_ENABLED?: boolean | undefined;
-        REACT_ROOT_ID: string;
         REACT_SERVER_DIST: string;
         REACT_SERVER_PREFIX: string;
+        REACT_ROOT_ID: string;
     };
     protected readonly ROOT_DIV_REGEX: RegExp;
     readonly onConfigure: _alepha_core.HookDescriptor<"configure">;

package/dist/index.js

@@ -1,14 +1,13 @@
 import { t, $logger, $inject, Alepha, $hook, OPTIONS, __bind } from '@alepha/core';
 import { ServerRouterProvider, ServerTimingProvider, ServerLinksProvider, apiLinksResponseSchema, ServerModule } from '@alepha/server';
-import { P as PageDescriptorProvider, $ as $page } from './useRouterState-qoMq7Y9J.js';
-export { C as ClientOnly, E as ErrorBoundary, L as Link, N as NestedView, l as ReactBrowserProvider, R as RedirectionError, a as RouterContext, c as RouterHookApi, b as RouterLayerContext, k as isPageRoute, u as useActive, d as useAlepha, e as useClient, f as useInject, g as useQueryParams, h as useRouter, i as useRouterEvents, j as useRouterState } from './useRouterState-qoMq7Y9J.js';
+import { P as PageDescriptorProvider, $ as $page } from './useRouterState-D5__ZcUV.js';
+export { C as ClientOnly, E as ErrorBoundary, L as Link, N as NestedView, l as ReactBrowserProvider, R as RedirectionError, a as RouterContext, c as RouterHookApi, b as RouterLayerContext, k as isPageRoute, u as useActive, d as useAlepha, e as useClient, f as useInject, g as useQueryParams, h as useRouter, i as useRouterEvents, j as useRouterState } from './useRouterState-D5__ZcUV.js';
 import { existsSync } from 'node:fs';
 import { join } from 'node:path';
 import { ServerStaticProvider } from '@alepha/server-static';
 import { renderToString } from 'react-dom/server';
 import 'react/jsx-runtime';
 import 'react';
-import 'react-dom/client';
 import '@alepha/router';
 
 class ServerHeadProvider {
@@ -137,7 +136,6 @@ class ReactServerProvider {
             return;
           }
           reply.headers["content-type"] = "text/html";
-          reply.status = 200;
           return this.template;
         }
       });
@@ -277,7 +275,6 @@ class ReactServerProvider {
       if (state.redirect) {
         return reply.redirect(state.redirect);
       }
-      reply.status = 200;
       reply.headers["content-type"] = "text/html";
       reply.headers["cache-control"] = "no-store, no-cache, must-revalidate, proxy-revalidate";
       reply.headers.pragma = "no-cache";
@@ -285,7 +282,9 @@ class ReactServerProvider {
       if (page.cache && serverRequest.user) {
         delete context.links;
       }
-      return this.renderToHtml(template, state, context);
+      const html = this.renderToHtml(template, state, context);
+      page.afterHandler?.(serverRequest);
+      return html;
     };
   }
   renderToHtml(template, state, context) {

package/dist/{useRouterState-AdK-XeM2.cjs → useRouterState-C2uo0jXu.cjs}

@@ -4,7 +4,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var core = require('@alepha/core');
 var React = require('react');
 var server = require('@alepha/server');
-var client = require('react-dom/client');
 var router = require('@alepha/router');
 
 const KEY = "PAGE";
@@ -279,6 +278,39 @@ const NestedView = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { fallback: app.context.onError, children: element });
 };
 
+function NotFoundPage() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        height: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        textAlign: "center",
+        fontFamily: "sans-serif",
+        padding: "1rem"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { fontSize: "1rem", marginBottom: "0.5rem" }, children: "This page does not exist" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            href: "/",
+            style: {
+              fontSize: "0.7rem",
+              color: "#007bff",
+              textDecoration: "none"
+            },
+            children: "\u2190 Back to home"
+          }
+        )
+      ]
+    }
+  );
+}
+
 class RedirectionError extends Error {
   page;
   constructor(page) {
@@ -287,12 +319,12 @@ class RedirectionError extends Error {
   }
 }
 
-const envSchema$1 = core.t.object({
+const envSchema = core.t.object({
   REACT_STRICT_MODE: core.t.boolean({ default: true })
 });
 class PageDescriptorProvider {
   log = core.$logger();
-  env = core.$inject(envSchema$1);
+  env = core.$inject(envSchema);
   alepha = core.$inject(core.Alepha);
   pages = [];
   getPages() {
@@ -576,6 +608,7 @@ class PageDescriptorProvider {
   configure = core.$hook({
     name: "configure",
     handler: () => {
+      let hasNotFoundHandler = false;
       const pages = this.alepha.getDescriptorValues($page);
       for (const { value, key } of pages) {
         value[core.OPTIONS].name ??= key;
@@ -584,8 +617,22 @@ class PageDescriptorProvider {
         if (value[core.OPTIONS].parent) {
           continue;
         }
+        if (value[core.OPTIONS].path === "/*") {
+          hasNotFoundHandler = true;
+        }
         this.add(this.map(pages, value));
       }
+      if (!hasNotFoundHandler && pages.length > 0) {
+        this.add({
+          path: "/*",
+          name: "notFound",
+          cache: true,
+          component: NotFoundPage,
+          afterHandler: ({ reply }) => {
+            reply.status = 404;
+          }
+        });
+      }
     }
   });
   map(pages, target) {
@@ -738,7 +785,7 @@ class BrowserRouterProvider extends router.RouterProvider {
       if (state.layers.length === 0) {
         state.layers.push({
           name: "not-found",
-          element: "Not Found",
+          element: React.createElement(NotFoundPage),
           index: 0,
           path: "/"
         });
@@ -779,16 +826,12 @@ class BrowserRouterProvider extends router.RouterProvider {
   }
 }
 
-const envSchema = core.t.object({
-  REACT_ROOT_ID: core.t.string({ default: "root" })
-});
 class ReactBrowserProvider {
   log = core.$logger();
   client = core.$inject(server.HttpClient);
   alepha = core.$inject(core.Alepha);
   router = core.$inject(BrowserRouterProvider);
   headProvider = core.$inject(BrowserHeadProvider);
-  env = core.$inject(envSchema);
   root;
   transitioning;
   state = {
@@ -826,11 +869,6 @@ class ReactBrowserProvider {
     }
     await this.render({ previous });
   }
-  /**
-   *
-   * @param url
-   * @param options
-   */
   async go(url, options = {}) {
     const result = await this.render({
       url
@@ -864,8 +902,6 @@ class ReactBrowserProvider {
   }
   /**
    * Get embedded layers from the server.
-   *
-   * @protected
    */
   getHydrationState() {
     try {
@@ -876,25 +912,7 @@ class ReactBrowserProvider {
       console.error(error);
     }
   }
-  /**
-   *
-   * @protected
-   */
-  getRootElement() {
-    const root = this.document.getElementById(this.env.REACT_ROOT_ID);
-    if (root) {
-      return root;
-    }
-    const div = this.document.createElement("div");
-    div.id = this.env.REACT_ROOT_ID;
-    this.document.body.prepend(div);
-    return div;
-  }
   // -------------------------------------------------------------------------------------------------------------------
-  /**
-   *
-   * @protected
-   */
   ready = core.$hook({
     name: "ready",
     handler: async () => {
@@ -914,15 +932,6 @@ class ReactBrowserProvider {
         context,
         hydration
       });
-      const element = this.router.root(this.state, context);
-      if (previous.length > 0) {
-        this.root = client.hydrateRoot(this.getRootElement(), element);
-        this.log.info("Hydrated root element");
-      } else {
-        this.root ??= client.createRoot(this.getRootElement());
-        this.root.render(element);
-        this.log.info("Created root element");
-      }
       window.addEventListener("popstate", () => {
         this.render();
       });
@@ -943,21 +952,12 @@ class RouterHookApi {
     this.layer = layer;
     this.browser = browser;
   }
-  /**
-   *
-   */
   get current() {
     return this.state;
   }
-  /**
-   *
-   */
   get pathname() {
     return this.state.pathname;
   }
-  /**
-   *
-   */
   get query() {
     const query = {};
     for (const [key, value] of new URLSearchParams(
@@ -967,22 +967,12 @@ class RouterHookApi {
     }
     return query;
   }
-  /**
-   *
-   */
   async back() {
     this.browser?.history.back();
   }
-  /**
-   *
-   */
   async forward() {
     this.browser?.history.forward();
   }
-  /**
-   *
-   * @param props
-   */
   async invalidate(props) {
     await this.browser?.invalidate(props);
   }

package/dist/{useRouterState-qoMq7Y9J.js → useRouterState-D5__ZcUV.js}

@@ -2,7 +2,6 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { __descriptor, OPTIONS, NotImplementedError, KIND, t, $logger, $inject, Alepha, $hook } from '@alepha/core';
 import React, { useState, useEffect, createContext, useContext, createElement, StrictMode, useMemo } from 'react';
 import { HttpClient } from '@alepha/server';
-import { hydrateRoot, createRoot } from 'react-dom/client';
 import { RouterProvider } from '@alepha/router';
 
 const KEY = "PAGE";
@@ -277,6 +276,39 @@ const NestedView = (props) => {
   return /* @__PURE__ */ jsx(ErrorBoundary, { fallback: app.context.onError, children: element });
 };
 
+function NotFoundPage() {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        height: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        textAlign: "center",
+        fontFamily: "sans-serif",
+        padding: "1rem"
+      },
+      children: [
+        /* @__PURE__ */ jsx("h1", { style: { fontSize: "1rem", marginBottom: "0.5rem" }, children: "This page does not exist" }),
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: "/",
+            style: {
+              fontSize: "0.7rem",
+              color: "#007bff",
+              textDecoration: "none"
+            },
+            children: "\u2190 Back to home"
+          }
+        )
+      ]
+    }
+  );
+}
+
 class RedirectionError extends Error {
   page;
   constructor(page) {
@@ -285,12 +317,12 @@ class RedirectionError extends Error {
   }
 }
 
-const envSchema$1 = t.object({
+const envSchema = t.object({
   REACT_STRICT_MODE: t.boolean({ default: true })
 });
 class PageDescriptorProvider {
   log = $logger();
-  env = $inject(envSchema$1);
+  env = $inject(envSchema);
   alepha = $inject(Alepha);
   pages = [];
   getPages() {
@@ -574,6 +606,7 @@ class PageDescriptorProvider {
   configure = $hook({
     name: "configure",
     handler: () => {
+      let hasNotFoundHandler = false;
       const pages = this.alepha.getDescriptorValues($page);
       for (const { value, key } of pages) {
         value[OPTIONS].name ??= key;
@@ -582,8 +615,22 @@ class PageDescriptorProvider {
         if (value[OPTIONS].parent) {
           continue;
         }
+        if (value[OPTIONS].path === "/*") {
+          hasNotFoundHandler = true;
+        }
         this.add(this.map(pages, value));
       }
+      if (!hasNotFoundHandler && pages.length > 0) {
+        this.add({
+          path: "/*",
+          name: "notFound",
+          cache: true,
+          component: NotFoundPage,
+          afterHandler: ({ reply }) => {
+            reply.status = 404;
+          }
+        });
+      }
     }
   });
   map(pages, target) {
@@ -736,7 +783,7 @@ class BrowserRouterProvider extends RouterProvider {
       if (state.layers.length === 0) {
         state.layers.push({
           name: "not-found",
-          element: "Not Found",
+          element: createElement(NotFoundPage),
           index: 0,
           path: "/"
         });
@@ -777,16 +824,12 @@ class BrowserRouterProvider extends RouterProvider {
   }
 }
 
-const envSchema = t.object({
-  REACT_ROOT_ID: t.string({ default: "root" })
-});
 class ReactBrowserProvider {
   log = $logger();
   client = $inject(HttpClient);
   alepha = $inject(Alepha);
   router = $inject(BrowserRouterProvider);
   headProvider = $inject(BrowserHeadProvider);
-  env = $inject(envSchema);
   root;
   transitioning;
   state = {
@@ -824,11 +867,6 @@ class ReactBrowserProvider {
     }
     await this.render({ previous });
   }
-  /**
-   *
-   * @param url
-   * @param options
-   */
   async go(url, options = {}) {
     const result = await this.render({
       url
@@ -862,8 +900,6 @@ class ReactBrowserProvider {
   }
   /**
    * Get embedded layers from the server.
-   *
-   * @protected
    */
   getHydrationState() {
     try {
@@ -874,25 +910,7 @@ class ReactBrowserProvider {
       console.error(error);
     }
   }
-  /**
-   *
-   * @protected
-   */
-  getRootElement() {
-    const root = this.document.getElementById(this.env.REACT_ROOT_ID);
-    if (root) {
-      return root;
-    }
-    const div = this.document.createElement("div");
-    div.id = this.env.REACT_ROOT_ID;
-    this.document.body.prepend(div);
-    return div;
-  }
   // -------------------------------------------------------------------------------------------------------------------
-  /**
-   *
-   * @protected
-   */
   ready = $hook({
     name: "ready",
     handler: async () => {
@@ -912,15 +930,6 @@ class ReactBrowserProvider {
         context,
         hydration
       });
-      const element = this.router.root(this.state, context);
-      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();
       });
@@ -941,21 +950,12 @@ class RouterHookApi {
     this.layer = layer;
     this.browser = browser;
   }
-  /**
-   *
-   */
   get current() {
     return this.state;
   }
-  /**
-   *
-   */
   get pathname() {
     return this.state.pathname;
   }
-  /**
-   *
-   */
   get query() {
     const query = {};
     for (const [key, value] of new URLSearchParams(
@@ -965,22 +965,12 @@ class RouterHookApi {
     }
     return query;
   }
-  /**
-   *
-   */
   async back() {
     this.browser?.history.back();
   }
-  /**
-   *
-   */
   async forward() {
     this.browser?.history.forward();
   }
-  /**
-   *
-   * @param props
-   */
   async invalidate(props) {
     await this.browser?.invalidate(props);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@alepha/react",
-	"version": "0.7.1",
+	"version": "0.7.2",
 	"type": "module",
 	"license": "MIT",
 	"main": "./dist/index.js",
@@ -13,10 +13,10 @@
 		"src"
 	],
 	"dependencies": {
-		"@alepha/core": "0.7.1",
-		"@alepha/router": "0.7.1",
-		"@alepha/server": "0.7.1",
-		"@alepha/server-static": "0.7.1",
+		"@alepha/core": "0.7.2",
+		"@alepha/router": "0.7.2",
+		"@alepha/server": "0.7.2",
+		"@alepha/server-static": "0.7.2",
 		"react-dom": "^19.1.0"
 	},
 	"devDependencies": {

package/src/components/NotFound.tsx

@@ -0,0 +1,30 @@
+export default function NotFoundPage() {
+	return (
+		<div
+			style={{
+				height: "100vh",
+				display: "flex",
+				flexDirection: "column",
+				justifyContent: "center",
+				alignItems: "center",
+				textAlign: "center",
+				fontFamily: "sans-serif",
+				padding: "1rem",
+			}}
+		>
+			<h1 style={{ fontSize: "1rem", marginBottom: "0.5rem" }}>
+				This page does not exist
+			</h1>
+			<a
+				href="/"
+				style={{
+					fontSize: "0.7rem",
+					color: "#007bff",
+					textDecoration: "none",
+				}}
+			>
+				← Back to home
+			</a>
+		</div>
+	);
+}

package/src/descriptors/$page.ts

@@ -7,7 +7,7 @@ import {
 	type Static,
 	type TSchema,
 } from "@alepha/core";
-import type { ServerRoute } from "@alepha/server";
+import type { ServerRequest, ServerRoute } from "@alepha/server";
 import type { FC, ReactNode } from "react";
 import type { ClientOnlyProps } from "../components/ClientOnly.tsx";
 import type { PageReactContext } from "../providers/PageDescriptorProvider.ts";
@@ -115,6 +115,8 @@ export interface PageDescriptorOptions<
 	 * If true, the page will be rendered on the client-side.
 	 */
 	client?: boolean | ClientOnlyProps;
+
+	afterHandler?: (request: ServerRequest) => any;
 }
 
 export interface PageDescriptor<

package/src/hooks/RouterHookApi.ts

@@ -19,23 +19,14 @@ export class RouterHookApi {
 		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> = {};
 
@@ -48,24 +39,14 @@ export class RouterHookApi {
 		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);
 	}

package/src/index.browser.ts

@@ -3,6 +3,7 @@ import { $page } from "./descriptors/$page.ts";
 import { BrowserRouterProvider } from "./providers/BrowserRouterProvider.ts";
 import { PageDescriptorProvider } from "./providers/PageDescriptorProvider.ts";
 import { ReactBrowserProvider } from "./providers/ReactBrowserProvider.ts";
+import { ReactBrowserRenderer } from "./providers/ReactBrowserRenderer.ts";
 
 export * from "./index.shared";
 export * from "./providers/ReactBrowserProvider.ts";
@@ -14,7 +15,8 @@ export class ReactModule {
 		this.alepha //
 			.with(PageDescriptorProvider)
 			.with(ReactBrowserProvider)
-			.with(BrowserRouterProvider);
+			.with(BrowserRouterProvider)
+			.with(ReactBrowserRenderer);
 	}
 }
 

package/src/providers/BrowserRouterProvider.ts

@@ -1,6 +1,7 @@
 import { $hook, $inject, $logger, Alepha } from "@alepha/core";
 import { type Route, RouterProvider } from "@alepha/router";
-import type { ReactNode } from "react";
+import { createElement, type ReactNode } from "react";
+import NotFoundPage from "../components/NotFound.tsx";
 import {
 	isPageRoute,
 	PageDescriptorProvider,
@@ -98,7 +99,7 @@ export class BrowserRouterProvider extends RouterProvider<BrowserRoute> {
 			if (state.layers.length === 0) {
 				state.layers.push({
 					name: "not-found",
-					element: "Not Found",
+					element: createElement(NotFoundPage),
 					index: 0,
 					path: "/",
 				});

package/src/providers/PageDescriptorProvider.ts

@@ -5,6 +5,7 @@ import { createElement, type ReactNode, StrictMode } from "react";
 import ClientOnly from "../components/ClientOnly.tsx";
 import ErrorViewer from "../components/ErrorViewer.tsx";
 import NestedView from "../components/NestedView.tsx";
+import NotFoundPage from "../components/NotFound.tsx";
 import { RouterContext } from "../contexts/RouterContext.ts";
 import { RouterLayerContext } from "../contexts/RouterLayerContext.ts";
 import {
@@ -405,18 +406,37 @@ export class PageDescriptorProvider {
 	protected readonly configure = $hook({
 		name: "configure",
 		handler: () => {
+			let hasNotFoundHandler = false;
 			const pages = this.alepha.getDescriptorValues($page);
 			for (const { value, key } of pages) {
 				value[OPTIONS].name ??= key;
 			}
+
 			for (const { value } of pages) {
 				// skip children, we only want root pages
 				if (value[OPTIONS].parent) {
 					continue;
 				}
 
+				if (value[OPTIONS].path === "/*") {
+					hasNotFoundHandler = true;
+				}
+
 				this.add(this.map(pages, value));
 			}
+
+			if (!hasNotFoundHandler && pages.length > 0) {
+				// add a default 404 page if not already defined
+				this.add({
+					path: "/*",
+					name: "notFound",
+					cache: true,
+					component: NotFoundPage,
+					afterHandler: ({ reply }) => {
+						reply.status = 404;
+					},
+				});
+			}
 		},
 	});
 

package/src/providers/ReactBrowserProvider.ts

@@ -1,7 +1,6 @@
-import { $hook, $inject, $logger, Alepha, type Static, t } from "@alepha/core";
+import { $hook, $inject, $logger, Alepha } from "@alepha/core";
 import { type ApiLinksResponse, HttpClient } from "@alepha/server";
 import type { Root } from "react-dom/client";
-import { createRoot, hydrateRoot } from "react-dom/client";
 import { BrowserHeadProvider } from "./BrowserHeadProvider.ts";
 import { BrowserRouterProvider } from "./BrowserRouterProvider.ts";
 import type {
@@ -11,21 +10,12 @@ import type {
 	TransitionOptions,
 } from "./PageDescriptorProvider.ts";
 
-const envSchema = t.object({
-	REACT_ROOT_ID: t.string({ default: "root" }),
-});
-
-declare module "@alepha/core" {
-	interface Env extends Partial<Static<typeof envSchema>> {}
-}
-
 export class ReactBrowserProvider {
 	protected readonly log = $logger();
 	protected readonly client = $inject(HttpClient);
 	protected readonly alepha = $inject(Alepha);
 	protected readonly router = $inject(BrowserRouterProvider);
 	protected readonly headProvider = $inject(BrowserHeadProvider);
-	protected readonly env = $inject(envSchema);
 	protected root!: Root;
 
 	public transitioning?: {
@@ -75,11 +65,6 @@ export class ReactBrowserProvider {
 		await this.render({ previous });
 	}
 
-	/**
-	 *
-	 * @param url
-	 * @param options
-	 */
 	public async go(url: string, options: RouterGoOptions = {}): Promise<void> {
 		const result = await this.render({
 			url,
@@ -127,8 +112,6 @@ export class ReactBrowserProvider {
 
 	/**
 	 * Get embedded layers from the server.
-	 *
-	 * @protected
 	 */
 	protected getHydrationState(): ReactHydrationState | undefined {
 		try {
@@ -140,30 +123,8 @@ export class ReactBrowserProvider {
 		}
 	}
 
-	/**
-	 *
-	 * @protected
-	 */
-	protected getRootElement() {
-		const root = this.document.getElementById(this.env.REACT_ROOT_ID);
-		if (root) {
-			return root;
-		}
-
-		const div = this.document.createElement("div");
-		div.id = this.env.REACT_ROOT_ID;
-
-		this.document.body.prepend(div);
-
-		return div;
-	}
-
 	// -------------------------------------------------------------------------------------------------------------------
 
-	/**
-	 *
-	 * @protected
-	 */
 	public readonly ready = $hook({
 		name: "ready",
 		handler: async () => {
@@ -187,17 +148,6 @@ export class ReactBrowserProvider {
 				hydration,
 			});
 
-			const element = this.router.root(this.state, context);
-
-			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();
 			});

package/src/providers/ReactBrowserRenderer.ts

@@ -0,0 +1,72 @@
+import { $hook, $inject, $logger, type Static, t } from "@alepha/core";
+import type { ApiLinksResponse } from "@alepha/server";
+import type { Root } from "react-dom/client";
+import { createRoot, hydrateRoot } from "react-dom/client";
+import { BrowserRouterProvider } from "./BrowserRouterProvider.ts";
+import type {
+	PreviousLayerData,
+	TransitionOptions,
+} from "./PageDescriptorProvider.ts";
+import { ReactBrowserProvider } from "./ReactBrowserProvider.ts";
+
+const envSchema = t.object({
+	REACT_ROOT_ID: t.string({ default: "root" }),
+});
+
+declare module "@alepha/core" {
+	interface Env extends Partial<Static<typeof envSchema>> {}
+}
+
+export class ReactBrowserRenderer {
+	protected readonly browserProvider = $inject(ReactBrowserProvider);
+	protected readonly browserRouterProvider = $inject(BrowserRouterProvider);
+	protected readonly env = $inject(envSchema);
+	protected readonly log = $logger();
+
+	protected root!: Root;
+
+	protected getRootElement() {
+		const root = this.browserProvider.document.getElementById(
+			this.env.REACT_ROOT_ID,
+		);
+		if (root) {
+			return root;
+		}
+
+		const div = this.browserProvider.document.createElement("div");
+		div.id = this.env.REACT_ROOT_ID;
+
+		this.browserProvider.document.body.prepend(div);
+
+		return div;
+	}
+
+	public readonly ready = $hook({
+		name: "react:browser:render",
+		handler: async ({ state, context, hydration }) => {
+			const element = this.browserRouterProvider.root(state, context);
+
+			if (hydration?.layers) {
+				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");
+			}
+		},
+	});
+}
+
+// ---------------------------------------------------------------------------------------------------------------------
+
+export interface RouterGoOptions {
+	replace?: boolean;
+	match?: TransitionOptions;
+	params?: Record<string, string>;
+}
+
+export interface ReactHydrationState {
+	layers?: Array<PreviousLayerData>;
+	links?: ApiLinksResponse;
+}

package/src/providers/ReactServerProvider.ts

@@ -120,7 +120,6 @@ export class ReactServerProvider {
 					}
 
 					reply.headers["content-type"] = "text/html";
-					reply.status = 200;
 
 					// serve index.html for all unmatched routes
 					return this.template;
@@ -312,7 +311,6 @@ export class ReactServerProvider {
 				return reply.redirect(state.redirect);
 			}
 
-			reply.status = 200;
 			reply.headers["content-type"] = "text/html";
 
 			// by default, disable caching for SSR responses
@@ -327,7 +325,11 @@ export class ReactServerProvider {
 				delete context.links;
 			}
 
-			return this.renderToHtml(template, state, context);
+			const html = this.renderToHtml(template, state, context);
+
+			page.afterHandler?.(serverRequest);
+
+			return html;
 		};
 	}