@alepha/react 0.14.4 → 0.15.1

package/src/router/components/Link.tsx

@@ -14,8 +14,10 @@ const Link = (props: LinkProps) => {
   const router = useRouter();
 
   return createElement(
-    "a", { ...props, ...router.anchor(props.href) }, props.children
-  )
+    "a",
+    { ...props, ...router.anchor(props.href) },
+    props.children,
+  );
 };
 
 export default Link;

package/src/router/components/NestedView.tsx

@@ -1,11 +1,11 @@
+import { ErrorBoundary, useAlepha, useEvents } from "@alepha/react";
 import { memo, type ReactNode, use, useRef, useState } from "react";
-import type { ReactRouterState } from "../providers/ReactPageProvider.ts";
 import { RouterLayerContext } from "../contexts/RouterLayerContext.ts";
 import { Redirection } from "../errors/Redirection.ts";
 import { useRouterState } from "../hooks/useRouterState.ts";
 import type { PageAnimation } from "../primitives/$page.ts";
+import type { ReactRouterState } from "../providers/ReactPageProvider.ts";
 import ErrorViewer from "./ErrorViewer.tsx";
-import { ErrorBoundary, useAlepha, useEvents } from "@alepha/react";
 
 export interface NestedViewProps {
   children?: ReactNode;
@@ -152,18 +152,16 @@ const NestedView = (props: NestedViewProps) => {
   }
 
   const fallback = (error: Error) => {
-    const result = onError?.(error, state) ?? <ErrorViewer error={error} alepha={alepha}/>;
+    const result = onError?.(error, state) ?? (
+      <ErrorViewer error={error} alepha={alepha} />
+    );
     if (result instanceof Redirection) {
       return "Redirection inside ErrorBoundary is not allowed.";
     }
     return result as ReactNode;
-  }
+  };
 
-  return (
-    <ErrorBoundary fallback={fallback}>
-      {element}
-    </ErrorBoundary>
-  );
+  return <ErrorBoundary fallback={fallback}>{element}</ErrorBoundary>;
 };
 
 export default memo(NestedView);

package/src/router/components/NotFound.tsx

@@ -3,7 +3,7 @@ import type { CSSProperties } from "react";
 /**
  * Default 404 Not Found page component.
  */
- const NotFound = (props: { style?: CSSProperties }) => (
+const NotFound = (props: { style?: CSSProperties }) => (
   <div
     style={{
       width: "100%",
@@ -25,6 +25,6 @@ import type { CSSProperties } from "react";
       Page not found
     </div>
   </div>
-)
+);
 
 export default NotFound;

package/src/router/hooks/useQueryParams.ts

@@ -1,6 +1,6 @@
+import { useAlepha } from "@alepha/react";
 import type { Alepha, Static, TObject } from "alepha";
 import { useEffect, useState } from "react";
-import { useAlepha } from "@alepha/react";
 import { useRouter } from "./useRouter.ts";
 
 /**

package/src/router/hooks/useRouter.ts

@@ -1,5 +1,5 @@
-import { ReactRouter } from "../services/ReactRouter.ts";
 import { useInject } from "@alepha/react";
+import { ReactRouter } from "../services/ReactRouter.ts";
 
 /**
  * Use this hook to access the React Router instance.

package/src/router/hooks/useRouterState.ts

@@ -1,6 +1,6 @@
+import { useStore } from "@alepha/react";
 import { AlephaError } from "alepha";
 import type { ReactRouterState } from "../providers/ReactPageProvider.ts";
-import { useStore } from "@alepha/react";
 
 export const useRouterState = (): ReactRouterState => {
   const [state] = useStore("alepha.react.router.state");

package/src/router/index.browser.ts

@@ -1,22 +1,22 @@
+import { AlephaReact } from "@alepha/react";
 import { $module } from "alepha";
+import { AlephaDateTime } from "alepha/datetime";
+import { AlephaServer } from "alepha/server";
+import { AlephaServerLinks } from "alepha/server/links";
 import { $page } from "./primitives/$page.ts";
-import { ReactRouter } from "./services/ReactRouter.ts";
+import { ReactBrowserProvider } from "./providers/ReactBrowserProvider.ts";
 import { ReactBrowserRendererProvider } from "./providers/ReactBrowserRendererProvider.ts";
 import { ReactBrowserRouterProvider } from "./providers/ReactBrowserRouterProvider.ts";
-import { ReactPageService } from "./services/ReactPageService.ts";
 import { ReactPageProvider } from "./providers/ReactPageProvider.ts";
-import { ReactBrowserProvider } from "./providers/ReactBrowserProvider.ts";
-import { AlephaDateTime } from "alepha/datetime";
-import { AlephaServer } from "alepha/server";
-import { AlephaServerLinks } from "alepha/server/links";
-import { AlephaReact } from "@alepha/react";
+import { ReactPageService } from "./services/ReactPageService.ts";
+import { ReactRouter } from "./services/ReactRouter.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
 export * from "./index.shared.ts";
-export * from "./providers/ReactBrowserProvider.ts"
-export * from "./providers/ReactBrowserRouterProvider.ts"
-export * from "./providers/ReactBrowserRendererProvider.ts"
+export * from "./providers/ReactBrowserProvider.ts";
+export * from "./providers/ReactBrowserRendererProvider.ts";
+export * from "./providers/ReactBrowserRouterProvider.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
@@ -43,4 +43,3 @@ export const AlephaReactRouter = $module({
       .with(ReactBrowserRendererProvider)
       .with(ReactRouter),
 });
-

package/src/router/index.shared.ts

@@ -1,19 +1,19 @@
-export { default as ErrorViewer } from "./components/ErrorViewer.tsx";
 export type * from "./components/ErrorViewer.tsx";
+export { default as ErrorViewer } from "./components/ErrorViewer.tsx";
+export type * from "./components/Link.tsx";
 export { default as Link, type LinkProps } from "./components/Link.tsx";
-export type *  from "./components/Link.tsx";
+export type * from "./components/NestedView.tsx";
 export { default as NestedView } from "./components/NestedView.tsx";
-export type *  from "./components/NestedView.tsx";
-export { default as NotFound } from "./components/NotFound.tsx";
 export type * from "./components/NotFound.tsx";
+export { default as NotFound } from "./components/NotFound.tsx";
 export * from "./constants/PAGE_PRELOAD_KEY.ts";
 export * from "./contexts/RouterLayerContext.ts";
-export * from "./primitives/$page.ts";
 export * from "./errors/Redirection.ts";
 export * from "./hooks/useActive.ts";
 export * from "./hooks/useQueryParams.ts";
 export * from "./hooks/useRouter.ts";
 export * from "./hooks/useRouterState.ts";
-export * from "./services/ReactRouter.ts";
-export * from "./services/ReactPageService.ts"
+export * from "./primitives/$page.ts";
 export * from "./providers/ReactPageProvider.ts";
+export * from "./services/ReactPageService.ts";
+export * from "./services/ReactRouter.ts";

package/src/router/index.ts

@@ -1,25 +1,28 @@
 import { AlephaReact } from "@alepha/react";
 import { $module } from "alepha";
-import { $page, type PageAnimation } from "./primitives/$page.ts";
-import { ReactRouter } from "./services/ReactRouter.ts";
-import { ReactPageProvider, type ReactRouterState } from "./providers/ReactPageProvider.ts";
+import { AlephaDateTime } from "alepha/datetime";
 import { AlephaServer, type ServerRequest } from "alepha/server";
+import { AlephaServerCache } from "alepha/server/cache";
+import { AlephaServerLinks } from "alepha/server/links";
 import type { ReactNode } from "react";
+import { $page, type PageAnimation } from "./primitives/$page.ts";
 import type { ReactHydrationState } from "./providers/ReactBrowserProvider.ts";
+import {
+  ReactPageProvider,
+  type ReactRouterState,
+} from "./providers/ReactPageProvider.ts";
 import { ReactServerProvider } from "./providers/ReactServerProvider.ts";
 import { ReactServerTemplateProvider } from "./providers/ReactServerTemplateProvider.ts";
 import { SSRManifestProvider } from "./providers/SSRManifestProvider.ts";
 import { ReactPageServerService } from "./services/ReactPageServerService.ts";
-import { AlephaServerCache } from "alepha/server/cache";
-import { AlephaServerLinks } from "alepha/server/links";
 import { ReactPageService } from "./services/ReactPageService.ts";
-import { AlephaDateTime } from "alepha/datetime";
+import { ReactRouter } from "./services/ReactRouter.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
 export * from "./index.shared.ts";
-export * from "./providers/ReactPageProvider.ts";
 export * from "./providers/ReactBrowserProvider.ts";
+export * from "./providers/ReactPageProvider.ts";
 export * from "./providers/ReactServerProvider.ts";
 export * from "./providers/ReactServerTemplateProvider.ts";
 export * from "./providers/SSRManifestProvider.ts";

package/src/router/primitives/$page.browser.spec.tsx

@@ -1,9 +1,14 @@
 import { AlephaReact } from "@alepha/react";
-import { $page, NestedView, Redirection, ReactRouter } from "../index.browser.ts";
 import { waitFor } from "@testing-library/dom";
 import { Alepha, t } from "alepha";
 import { act } from "react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  $page,
+  NestedView,
+  ReactRouter,
+  Redirection,
+} from "../index.browser.ts";
 
 describe("$page browser tests", () => {
   let alepha: Alepha;

package/src/router/primitives/$page.spec.tsx

@@ -1,7 +1,13 @@
-import { $page, PagePrimitive, Redirection, NestedView, type ReactRouterState } from "../index.ts";
 import { Alepha, t } from "alepha";
 import type { FC } from "react";
 import { beforeEach, describe, test, vi } from "vitest";
+import {
+  $page,
+  NestedView,
+  PagePrimitive,
+  type ReactRouterState,
+  Redirection,
+} from "../index.ts";
 
 describe("$page primitive tests", () => {
   let alepha: Alepha;

package/src/router/primitives/$page.ts

@@ -1,22 +1,21 @@
+import type { ClientOnlyProps } from "@alepha/react";
+import type { Head } from "@alepha/react/head";
 import {
   $inject,
   type Async,
   createPrimitive,
-  Primitive,
   KIND,
+  Primitive,
   type Static,
   type TSchema,
 } from "alepha";
 import type { ServerRequest } from "alepha/server";
 import type { ServerRouteCache } from "alepha/server/cache";
 import type { FC, ReactNode } from "react";
+import { PAGE_PRELOAD_KEY } from "../constants/PAGE_PRELOAD_KEY.ts";
 import type { Redirection } from "../errors/Redirection.ts";
 import type { ReactRouterState } from "../providers/ReactPageProvider.ts";
 import { ReactPageService } from "../services/ReactPageService.ts";
-import type { ClientOnlyProps } from "@alepha/react";
-import type { Head } from "@alepha/react/head";
-import { PAGE_PRELOAD_KEY } from "../constants/PAGE_PRELOAD_KEY.ts";
-
 
 /**
  * Main primitive for defining a React route in the application.
@@ -113,10 +112,7 @@ export const $page = <
 >(
   options: PagePrimitiveOptions<TConfig, TProps, TPropsParent>,
 ): PagePrimitive<TConfig, TProps, TPropsParent> => {
-  return createPrimitive(
-    PagePrimitive<TConfig, TProps, TPropsParent>,
-    options,
-  );
+  return createPrimitive(PagePrimitive<TConfig, TProps, TPropsParent>, options);
 };
 
 // ---------------------------------------------------------------------------------------------------------------------

package/src/router/providers/ReactBrowserProvider.ts

@@ -1,15 +1,26 @@
-import { $atom, $env, $hook, $inject, $use, Alepha, type State, type Static, t, } from "alepha";
+import { BrowserHeadProvider } from "@alepha/react/head";
+import {
+  $atom,
+  $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, } from "./ReactPageProvider.ts";
 import type { RouterGoOptions } from "../services/ReactRouter.ts";
+import { ReactBrowserRouterProvider } from "./ReactBrowserRouterProvider.ts";
+import type {
+  PreviousLayerData,
+  ReactRouterState,
+} from "./ReactPageProvider.ts";
 
 export type { RouterGoOptions } from "../services/ReactRouter.ts";
 
-
 /**
  * React browser renderer configuration atom
  */
@@ -247,7 +258,7 @@ export class ReactBrowserProvider {
         // low budget, but works for now
         for (const [key, value] of Object.entries(hydration)) {
           if (key !== "layers") {
-            this.alepha.store.set(key as keyof State, value);
+            this.alepha.set(key as keyof State, value);
           }
         }
       }

package/src/router/providers/ReactBrowserRouterProvider.ts

@@ -1,8 +1,8 @@
+import { BrowserHeadProvider } from "@alepha/react/head";
 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,

package/src/router/providers/ReactPageProvider.ts

@@ -1,3 +1,5 @@
+import { AlephaContext, ClientOnly } from "@alepha/react";
+import type { Head } from "@alepha/react/head";
 import {
   $env,
   $hook,
@@ -10,7 +12,6 @@ import {
 } from "alepha";
 import { $logger } from "alepha/logger";
 import { createElement, type ReactNode, StrictMode } from "react";
-import { AlephaContext, ClientOnly } from "@alepha/react";
 import ErrorViewer from "../components/ErrorViewer.tsx";
 import NestedView from "../components/NestedView.tsx";
 import NotFoundPage from "../components/NotFound.tsx";
@@ -22,7 +23,6 @@ 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 }),
@@ -476,7 +476,8 @@ export class ReactPageProvider {
         value: {
           index,
           path,
-          onError: this.getErrorHandler(page) ?? ((error) => this.renderError(error)),
+          onError:
+            this.getErrorHandler(page) ?? ((error) => this.renderError(error)),
         },
       },
       element,

package/src/router/providers/ReactServerProvider.ts

@@ -1,15 +1,33 @@
 import { join } from "node:path";
-import { $atom, $env, $hook, $inject, $use, Alepha, AlephaError, type Static, t, } from "alepha";
+import { ServerHeadProvider } from "@alepha/react/head";
+import {
+  $atom,
+  $env,
+  $hook,
+  $inject,
+  $use,
+  Alepha,
+  AlephaError,
+  type Static,
+  t,
+} from "alepha";
 import { FileSystemProvider } from "alepha/file";
 import { $logger } from "alepha/logger";
-import { type ServerHandler, ServerRouterProvider, ServerTimingProvider, } from "alepha/server";
+import { type ServerHandler, ServerRouterProvider } from "alepha/server";
 import { ServerLinksProvider } from "alepha/server/links";
 import { ServerStaticProvider } from "alepha/server/static";
 import { renderToReadableStream } from "react-dom/server";
-import { ServerHeadProvider } from "@alepha/react/head";
 import { Redirection } from "../errors/Redirection.ts";
-import { $page, type PagePrimitiveRenderOptions, type PagePrimitiveRenderResult, } from "../primitives/$page.ts";
-import { type PageRoute, ReactPageProvider, type ReactRouterState, } from "./ReactPageProvider.ts";
+import {
+  $page,
+  type PagePrimitiveRenderOptions,
+  type PagePrimitiveRenderResult,
+} from "../primitives/$page.ts";
+import {
+  type PageRoute,
+  ReactPageProvider,
+  type ReactRouterState,
+} from "./ReactPageProvider.ts";
 import { ReactServerTemplateProvider } from "./ReactServerTemplateProvider.ts";
 import { SSRManifestProvider } from "./SSRManifestProvider.ts";
 
@@ -44,7 +62,6 @@ export class ReactServerProvider {
   protected readonly serverHeadProvider = $inject(ServerHeadProvider);
   protected readonly serverStaticProvider = $inject(ServerStaticProvider);
   protected readonly serverRouterProvider = $inject(ServerRouterProvider);
-  protected readonly serverTimingProvider = $inject(ServerTimingProvider);
   protected readonly ssrManifestProvider = $inject(SSRManifestProvider);
 
   /**
@@ -67,21 +84,11 @@ export class ReactServerProvider {
 
       this.alepha.store.set("alepha.react.server.ssr", ssrEnabled);
 
-      if (ssrEnabled) {
-        this.log.info("SSR streaming enabled");
-      }
-
-      // development mode
-      if (this.alepha.isViteDev()) {
-        await this.configureVite(ssrEnabled);
-        return;
-      }
-
       // production mode
       let root = "";
 
       // non-serverless mode only -> serve static files
-      if (!this.alepha.isServerless()) {
+      if (!this.alepha.isServerless() && !this.alepha.isViteDev()) {
         root = await this.getPublicDirectory();
         if (!root) {
           this.log.warn(
@@ -198,7 +205,7 @@ export class ReactServerProvider {
     if (parts.length > 0) {
       // Pass assets so they get stripped from original head content
       this.templateProvider.setEarlyHeadContent(
-        parts.join("\n") + "\n",
+        `${parts.join("\n")}\n`,
         assets,
       );
       this.log.debug("Early head content set", {
@@ -240,26 +247,6 @@ export class ReactServerProvider {
     });
   }
 
-  /**
-   * Configure Vite for SSR in development mode.
-   */
-  protected async configureVite(ssrEnabled: boolean) {
-    if (!ssrEnabled) {
-      // do nothing, vite will handle everything for us
-      return;
-    }
-
-    const url = `http://localhost:${this.alepha.env.SERVER_PORT ?? "5173"}`;
-
-    this.log.info("SSR (dev) OK", { url });
-
-    await this.registerPages(() =>
-      fetch(`${url}/index.html`)
-        .then((it) => it.text())
-        .catch(() => undefined),
-    );
-  }
-
   /**
    * Create the request handler for a page route.
    */
@@ -338,9 +325,9 @@ export class ReactServerProvider {
           const result = await this.renderPage(route, state);
 
           if (result.redirect) {
-            // Note: redirect happens after early head is sent, handled by stream
-            reply.redirect(result.redirect);
-            return null;
+            // Return redirect URL - template provider will inject meta refresh
+            // since HTTP headers have already been sent
+            return { redirect: result.redirect };
           }
 
           return { state, reactStream: result.reactStream! };
@@ -354,7 +341,8 @@ export class ReactServerProvider {
               });
               // Can't do redirect after streaming started - already handled above
             } else {
-              this.log.error("HTML stream error", error);
+              // disable logging here, it's noisy and duplicate
+              // this.log.error("HTML stream error", error);
             }
           },
         },
@@ -389,10 +377,7 @@ export class ReactServerProvider {
     state: ReactRouterState,
   ): Promise<{ redirect?: string; reactStream?: ReadableStream<Uint8Array> }> {
     // Resolve page layers (loaders)
-    this.serverTimingProvider.beginTiming("createLayers");
     const { redirect } = await this.pageApi.createLayers(route, state);
-    this.serverTimingProvider.endTiming("createLayers");
-
     if (redirect) {
       this.log.debug("Resolver resulted in redirection", { redirect });
       return { redirect };
@@ -409,7 +394,6 @@ export class ReactServerProvider {
     }
 
     // Render React to stream
-    this.serverTimingProvider.beginTiming("renderToStream");
 
     const element = this.pageApi.root(state);
     this.alepha.store.set("alepha.react.router.state", state);
@@ -421,13 +405,12 @@ export class ReactServerProvider {
             redirect: error.redirect,
           });
         } else {
-          this.log.error("Streaming render error", error);
+          // disable logging here, it's noisy and duplicate
+          // this.log.error("Streaming render error", error);
         }
       },
     });
 
-    this.serverTimingProvider.endTiming("renderToStream");
-
     return { reactStream };
   }
 
@@ -526,7 +509,6 @@ export class ReactServerProvider {
 
 type TemplateLoader = () => Promise<string | undefined>;
 
-
 // ---------------------------------------------------------------------------------------------------------------------
 
 const envSchema = t.object({