@alepha/react 0.13.1 → 0.13.3

package/package.json

@@ -2,7 +2,7 @@
   "name": "@alepha/react",
   "description": "React components and hooks for building Alepha applications.",
   "author": "Nicolas Foures",
-  "version": "0.13.1",
+  "version": "0.13.3",
   "type": "module",
   "engines": {
     "node": ">=22.0.0"
@@ -18,20 +18,20 @@
   "bin": "./dist/index.js",
   "dependencies": {
     "@vitejs/plugin-react": "^5.1.1",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.1"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "alepha": "0.13.1",
+    "alepha": "0.13.3",
     "jsdom": "^27.2.0",
-    "react": "^19.2.0",
-    "vitest": "^4.0.14"
+    "react": "^19.2.1",
+    "vitest": "^4.0.15"
   },
   "peerDependencies": {
-    "alepha": "0.13.1",
+    "alepha": "0.13.3",
     "react": "^19.2.0"
   },
   "scripts": {
@@ -56,30 +56,39 @@
   "exports": {
     "./auth": {
       "types": "./dist/auth/index.js",
+      "react-native": "./dist/auth/index.browser.js",
       "browser": "./dist/auth/index.browser.js",
-      "import": "./dist/auth/index.js"
+      "import": "./dist/auth/index.js",
+      "default": "./dist/auth/index.js"
     },
     ".": {
       "types": "./dist/core/index.js",
+      "react-native": "./dist/core/index.native.js",
       "browser": "./dist/core/index.browser.js",
-      "import": "./dist/core/index.js"
+      "import": "./dist/core/index.js",
+      "default": "./dist/core/index.js"
     },
     "./form": {
       "types": "./dist/form/index.js",
-      "import": "./dist/form/index.js"
+      "import": "./dist/form/index.js",
+      "default": "./dist/form/index.js"
     },
     "./head": {
       "types": "./dist/head/index.js",
+      "react-native": "./dist/head/index.browser.js",
       "browser": "./dist/head/index.browser.js",
-      "import": "./dist/head/index.js"
+      "import": "./dist/head/index.js",
+      "default": "./dist/head/index.js"
     },
     "./i18n": {
       "types": "./dist/i18n/index.js",
-      "import": "./dist/i18n/index.js"
+      "import": "./dist/i18n/index.js",
+      "default": "./dist/i18n/index.js"
     },
     "./websocket": {
       "types": "./dist/websocket/index.js",
-      "import": "./dist/websocket/index.js"
+      "import": "./dist/websocket/index.js",
+      "default": "./dist/websocket/index.js"
     }
   },
   "module": "./dist/index.js"

package/src/auth/index.ts

@@ -29,6 +29,6 @@ declare module "@alepha/react" {
  */
 export const AlephaReactAuth = $module({
   name: "alepha.react.auth",
-  descriptors: [$auth],
+  primitives: [$auth],
   services: [AlephaReact, AlephaServerLinks, AlephaServerAuth, ReactAuthProvider, ReactAuth],
 });

package/src/auth/providers/ReactAuthProvider.ts

@@ -8,7 +8,7 @@ export class ReactAuthProvider {
     handler: async ({ request, state }) => {
       if (request?.user) {
         const { token, realm, ...user } = request.user; // do not send token and realm to the client
-        this.alepha.state.set("alepha.server.request.user", user); // for hydration, browser, etc...
+        this.alepha.store.set("alepha.server.request.user", user); // for hydration, browser, etc...
         state.user = user;
       }
     },

package/src/auth/services/ReactAuth.ts

@@ -4,6 +4,7 @@ import { $logger } from "alepha/logger";
 import type { UserAccountToken } from "alepha/security";
 import { HttpClient } from "alepha/server";
 import { alephaServerAuthRoutes, tokenResponseSchema, type Tokens, userinfoResponseSchema } from "alepha/server/auth";
+import { LinkProvider } from "alepha/server/links";
 
 /**
  * Browser, SSR friendly, service to handle authentication.
@@ -12,6 +13,7 @@ export class ReactAuth {
   protected readonly log = $logger();
   protected readonly alepha = $inject(Alepha);
   protected readonly httpClient = $inject(HttpClient);
+  protected readonly linkProvider = $inject(LinkProvider);
 
   protected readonly onBeginTransition = $hook({
     on: "react:transition:begin",
@@ -40,7 +42,7 @@ export class ReactAuth {
    * Alias for `alepha.state.get("user")`
    */
   public get user(): UserAccountToken | undefined {
-    return this.alepha.state.get("alepha.server.request.user");
+    return this.alepha.store.get("alepha.server.request.user");
   }
 
   public async ping() {
@@ -48,12 +50,20 @@ export class ReactAuth {
       schema: { response: userinfoResponseSchema },
     });
 
-    this.alepha.state.set("alepha.server.request.apiLinks", data.api);
-    this.alepha.state.set("alepha.server.request.user", data.user);
+    this.alepha.store.set("alepha.server.request.apiLinks", data.api);
+    this.alepha.store.set("alepha.server.request.user", data.user);
 
     return data.user;
   }
 
+  public can(action: string): boolean {
+    if (!this.user) {
+      return false;
+    }
+
+    return this.linkProvider.can(action);
+  }
+
   public async login(
     provider: string,
     options: {
@@ -78,8 +88,8 @@ export class ReactAuth {
         },
       );
 
-      this.alepha.state.set("alepha.server.request.apiLinks", data.api);
-      this.alepha.state.set("alepha.server.request.user", data.user);
+      this.alepha.store.set("alepha.server.request.apiLinks", data.api);
+      this.alepha.store.set("alepha.server.request.user", data.user);
 
       return data;
     }

package/src/core/components/NestedView.tsx

@@ -1,6 +1,6 @@
 import { memo, type ReactNode, use, useRef, useState } from "react";
 import { RouterLayerContext } from "../contexts/RouterLayerContext.ts";
-import type { PageAnimation } from "../descriptors/$page.ts";
+import type { PageAnimation } from "../primitives/$page.ts";
 import { Redirection } from "../errors/Redirection.ts";
 import { useEvents } from "../hooks/useEvents.ts";
 import { useRouterState } from "../hooks/useRouterState.ts";
@@ -50,7 +50,11 @@ const NestedView = (props: NestedViewProps) => {
       "react:transition:begin": async ({ previous, state }) => {
         // --------- Animations Begin ---------
         const layer = previous.layers[index];
-        if (`${state.url.pathname}/`.startsWith(`${layer?.path}/`)) {
+        if (!layer) {
+          return;
+        }
+
+        if (`${state.url.pathname}/`.startsWith(`${layer.path}/`)) {
           return;
         }
 

package/src/core/components/NotFound.tsx

@@ -4,20 +4,24 @@ export default function NotFoundPage(props: { style?: CSSProperties }) {
   return (
     <div
       style={{
-        height: "100vh",
+        width: "100%",
+        minHeight: "90vh",
+        boxSizing: "border-box",
         display: "flex",
         flexDirection: "column",
         justifyContent: "center",
         alignItems: "center",
         textAlign: "center",
-        fontFamily: "sans-serif",
-        padding: "1rem",
+        fontFamily:
+          'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+        padding: "2rem",
         ...props.style,
       }}
     >
-      <h1 style={{ fontSize: "1rem", marginBottom: "0.5rem" }}>
-        404 - This page does not exist
-      </h1>
+      <div style={{ fontSize: "6rem", fontWeight: 200, lineHeight: 1 }}>404</div>
+      <div style={{ fontSize: "0.875rem", marginTop: "1rem", opacity: 0.6 }}>
+        Page not found
+      </div>
     </div>
   );
 }

package/src/core/hooks/useStore.ts

@@ -18,12 +18,12 @@ function useStore(target: any, defaultValue?: any): any {
   const alepha = useAlepha();
 
   useMemo(() => {
-    if (defaultValue != null && alepha.state.get(target) == null) {
-      alepha.state.set(target, defaultValue);
+    if (defaultValue != null && alepha.store.get(target) == null) {
+      alepha.store.set(target, defaultValue);
     }
   }, [defaultValue]);
 
-  const [state, setState] = useState(alepha.state.get(target));
+  const [state, setState] = useState(alepha.store.get(target));
 
   useEffect(() => {
     if (!alepha.isBrowser()) {
@@ -42,7 +42,7 @@ function useStore(target: any, defaultValue?: any): any {
   return [
     state,
     (value: any) => {
-      alepha.state.set(target, value);
+      alepha.store.set(target, value);
     },
   ] as const;
 }

package/src/core/index.browser.ts

@@ -2,7 +2,7 @@ import { $module } from "alepha";
 import { AlephaDateTime } from "alepha/datetime";
 import { AlephaServer } from "alepha/server";
 import { AlephaServerLinks } from "alepha/server/links";
-import { $page } from "./descriptors/$page.ts";
+import { $page } from "./primitives/$page.ts";
 import { ReactBrowserProvider } from "./providers/ReactBrowserProvider.ts";
 import { ReactBrowserRendererProvider } from "./providers/ReactBrowserRendererProvider.ts";
 import { ReactBrowserRouterProvider } from "./providers/ReactBrowserRouterProvider.ts";
@@ -22,7 +22,7 @@ export * from "./providers/ReactPageProvider.ts";
 
 export const AlephaReact = $module({
   name: "alepha.react",
-  descriptors: [$page],
+  primitives: [$page],
   services: [
     ReactPageProvider,
     ReactBrowserRouterProvider,

package/src/core/index.native.ts

@@ -10,7 +10,7 @@ export * from "./index.shared.ts";
 
 export const AlephaReact = $module({
   name: "alepha.react",
-  descriptors: [],
+  primitives: [],
   services: [
 
   ],

package/src/core/index.shared-router.ts

@@ -5,7 +5,7 @@ export { default as Link, type LinkProps } from "./components/Link.tsx";
 export { default as NestedView } from "./components/NestedView.tsx";
 export { default as NotFound } from "./components/NotFound.tsx";
 export * from "./contexts/RouterLayerContext.ts";
-export * from "./descriptors/$page.ts";
+export * from "./primitives/$page.ts";
 export * from "./errors/Redirection.ts";
 export * from "./hooks/useActive.ts";
 export * from "./hooks/useQueryParams.ts";

package/src/core/index.ts

@@ -4,7 +4,7 @@ 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 "./descriptors/$page.ts";
+import { $page, type PageAnimation } from "./primitives/$page.ts";
 import type { ReactHydrationState } from "./providers/ReactBrowserProvider.ts";
 import {
   ReactPageProvider,
@@ -128,7 +128,7 @@ declare module "alepha" {
 /**
  * Provides full-stack React development with declarative routing, server-side rendering, and client-side hydration.
  *
- * The React module enables building modern React applications using the `$page` descriptor on class properties.
+ * The React module enables building modern React applications using the `$page` primitive on class properties.
  * It delivers seamless server-side rendering, automatic code splitting, and client-side navigation with full
  * type safety and schema validation for route parameters and data.
  *
@@ -137,7 +137,7 @@ declare module "alepha" {
  */
 export const AlephaReact = $module({
   name: "alepha.react",
-  descriptors: [$page],
+  primitives: [$page],
   services: [
     ReactServerProvider,
     ReactPageProvider,

package/src/core/{descriptors → primitives}/$page.ts

@@ -1,8 +1,8 @@
 import {
   $inject,
   type Async,
-  createDescriptor,
-  Descriptor,
+  createPrimitive,
+  Primitive,
   KIND,
   type Static,
   type TSchema,
@@ -16,9 +16,9 @@ import type { ReactRouterState } from "../providers/ReactPageProvider.ts";
 import { ReactPageService } from "../services/ReactPageService.ts";
 
 /**
- * Main descriptor for defining a React route in the application.
+ * Main primitive for defining a React route in the application.
  *
- * The $page descriptor is the core building block for creating type-safe, SSR-enabled React routes.
+ * The $page primitive is the core building block for creating type-safe, SSR-enabled React routes.
  * It provides a declarative way to define pages with powerful features:
  *
  * **Routing & Navigation**
@@ -108,17 +108,17 @@ export const $page = <
   TProps extends object = TPropsDefault,
   TPropsParent extends object = TPropsParentDefault,
 >(
-  options: PageDescriptorOptions<TConfig, TProps, TPropsParent>,
-): PageDescriptor<TConfig, TProps, TPropsParent> => {
-  return createDescriptor(
-    PageDescriptor<TConfig, TProps, TPropsParent>,
+  options: PagePrimitiveOptions<TConfig, TProps, TPropsParent>,
+): PagePrimitive<TConfig, TProps, TPropsParent> => {
+  return createPrimitive(
+    PagePrimitive<TConfig, TProps, TPropsParent>,
     options,
   );
 };
 
 // ---------------------------------------------------------------------------------------------------------------------
 
-export interface PageDescriptorOptions<
+export interface PagePrimitiveOptions<
   TConfig extends PageConfigSchema = PageConfigSchema,
   TProps extends object = TPropsDefault,
   TPropsParent extends object = TPropsParentDefault,
@@ -126,7 +126,7 @@ export interface PageDescriptorOptions<
   /**
    * Identifier name for the page. Must be unique.
    *
-   * @default Descriptor key
+   * @default Primitive key
    */
   name?: string;
 
@@ -182,12 +182,12 @@ export interface PageDescriptorOptions<
    * Attach child pages to create nested routes.
    * This will make the page a parent route.
    */
-  children?: Array<PageDescriptor> | (() => Array<PageDescriptor>);
+  children?: Array<PagePrimitive> | (() => Array<PagePrimitive>);
 
   /**
    * Define a parent page for nested routing.
    */
-  parent?: PageDescriptor<PageConfigSchema, TPropsParent, any>;
+  parent?: PagePrimitive<PageConfigSchema, TPropsParent, any>;
 
   can?: () => boolean;
 
@@ -312,11 +312,11 @@ export type ErrorHandler = (
   state: ReactRouterState,
 ) => ReactNode | Redirection | undefined;
 
-export class PageDescriptor<
+export class PagePrimitive<
   TConfig extends PageConfigSchema = PageConfigSchema,
   TProps extends object = TPropsDefault,
   TPropsParent extends object = TPropsParentDefault,
-> extends Descriptor<PageDescriptorOptions<TConfig, TProps, TPropsParent>> {
+> extends Primitive<PagePrimitiveOptions<TConfig, TProps, TPropsParent>> {
   protected readonly reactPageService = $inject(ReactPageService);
 
   protected onInit() {
@@ -341,12 +341,12 @@ export class PageDescriptor<
    * Only valid for server-side rendering, it will throw an error if called on the client-side.
    */
   public async render(
-    options?: PageDescriptorRenderOptions,
-  ): Promise<PageDescriptorRenderResult> {
+    options?: PagePrimitiveRenderOptions,
+  ): Promise<PagePrimitiveRenderResult> {
     return this.reactPageService.render(this.name, options);
   }
 
-  public async fetch(options?: PageDescriptorRenderOptions): Promise<{
+  public async fetch(options?: PagePrimitiveRenderOptions): Promise<{
     html: string;
     response: Response;
   }> {
@@ -364,7 +364,7 @@ export class PageDescriptor<
   }
 }
 
-$page[KIND] = PageDescriptor;
+$page[KIND] = PagePrimitive;
 
 // ---------------------------------------------------------------------------------------------------------------------
 
@@ -377,7 +377,7 @@ export type TPropsDefault = any;
 
 export type TPropsParentDefault = {};
 
-export interface PageDescriptorRenderOptions {
+export interface PagePrimitiveRenderOptions {
   params?: Record<string, string>;
   query?: Record<string, string>;
 
@@ -391,7 +391,7 @@ export interface PageDescriptorRenderOptions {
   hydration?: boolean;
 }
 
-export interface PageDescriptorRenderResult {
+export interface PagePrimitiveRenderResult {
   html: string;
   state: ReactRouterState;
   redirect?: string;

package/src/core/providers/ReactBrowserProvider.ts

@@ -84,7 +84,7 @@ export class ReactBrowserProvider {
   };
 
   public get state(): ReactRouterState {
-    return this.alepha.state.get("alepha.react.router.state")!;
+    return this.alepha.store.get("alepha.react.router.state")!;
   }
 
   /**
@@ -262,7 +262,7 @@ export class ReactBrowserProvider {
         // low budget, but works for now
         for (const [key, value] of Object.entries(hydration)) {
           if (key !== "layers") {
-            this.alepha.state.set(key as keyof State, value);
+            this.alepha.store.set(key as keyof State, value);
           }
         }
       }

package/src/core/providers/ReactBrowserRouterProvider.ts

@@ -63,7 +63,7 @@ export class ReactBrowserRouterProvider extends RouterProvider<BrowserRoute> {
       type: "transition",
     });
     await this.alepha.events.emit("react:transition:begin", {
-      previous: this.alepha.state.get("alepha.react.router.state")!,
+      previous: this.alepha.store.get("alepha.react.router.state")!,
       state,
     });
 
@@ -77,6 +77,7 @@ export class ReactBrowserRouterProvider extends RouterProvider<BrowserRoute> {
         }
       }
 
+      state.name = route?.page.name;
       state.query = query;
       state.params = params ?? {};
 
@@ -135,7 +136,7 @@ export class ReactBrowserRouterProvider extends RouterProvider<BrowserRoute> {
       }
     }
 
-    this.alepha.state.set("alepha.react.router.state", state);
+    this.alepha.store.set("alepha.react.router.state", state);
 
     await this.alepha.events.emit("react:action:end", {
       type: "transition",

package/src/core/providers/ReactPageProvider.ts

@@ -19,9 +19,9 @@ import { RouterLayerContext } from "../contexts/RouterLayerContext.ts";
 import {
   $page,
   type ErrorHandler,
-  type PageDescriptor,
-  type PageDescriptorOptions,
-} from "../descriptors/$page.ts";
+  type PagePrimitive,
+  type PagePrimitiveOptions,
+} from "../primitives/$page.ts";
 import { Redirection } from "../errors/Redirection.ts";
 
 const envSchema = t.object({
@@ -42,12 +42,14 @@ export class ReactPageProvider {
     return this.pages;
   }
 
-  public getConcretePages(): PageRoute[] {
-    const pages: PageRoute[] = [];
+  public getConcretePages(): ConcretePageRoute[] {
+    const pages: ConcretePageRoute[] = [];
     for (const page of this.pages) {
       if (page.children && page.children.length > 0) {
         continue;
       }
+
+      // check if the page has dynamic params
       const fullPath = this.pathname(page.name);
       if (fullPath.includes(":") || fullPath.includes("*")) {
         if (typeof page.static === "object") {
@@ -60,6 +62,7 @@ export class ReactPageProvider {
                 pages.push({
                   ...page,
                   name: params[Object.keys(params)[0]],
+                  staticName: page.name,
                   path,
                   ...entry,
                 });
@@ -70,6 +73,7 @@ export class ReactPageProvider {
 
         continue;
       }
+
       pages.push(page);
     }
     return pages;
@@ -481,9 +485,9 @@ export class ReactPageProvider {
     on: "configure",
     handler: () => {
       let hasNotFoundHandler = false;
-      const pages = this.alepha.descriptors($page);
+      const pages = this.alepha.primitives($page);
 
-      const hasParent = (it: PageDescriptor) => {
+      const hasParent = (it: PagePrimitive) => {
         if (it.options.parent) {
           return true;
         }
@@ -529,8 +533,8 @@ export class ReactPageProvider {
   });
 
   protected map(
-    pages: Array<PageDescriptor>,
-    target: PageDescriptor,
+    pages: Array<PagePrimitive>,
+    target: PagePrimitive,
   ): PageRouteEntry {
     const children = target.options.children
       ? Array.isArray(target.options.children)
@@ -538,7 +542,7 @@ export class ReactPageProvider {
         : target.options.children()
       : [];
 
-    const getChildrenFromParent = (it: PageDescriptor): PageDescriptor[] => {
+    const getChildrenFromParent = (it: PagePrimitive): PagePrimitive[] => {
       const children = [];
       for (const page of pages) {
         if (page.options.parent === it) {
@@ -613,10 +617,20 @@ export const isPageRoute = (it: any): it is PageRoute => {
 };
 
 export interface PageRouteEntry
-  extends Omit<PageDescriptorOptions, "children" | "parent"> {
+  extends Omit<PagePrimitiveOptions, "children" | "parent"> {
   children?: PageRouteEntry[];
 }
 
+export interface ConcretePageRoute extends PageRoute {
+  /**
+   * When exported, static routes can be split into multiple pages with different params.
+   * We replace 'name' by the new name for each static entry, and old 'name' becomes 'staticName'.
+   */
+  staticName?: string;
+
+  params?: Record<string, string>;
+}
+
 export interface PageRoute extends PageRouteEntry {
   type: "page";
   name: string;
@@ -680,6 +694,9 @@ export interface ReactRouterState {
    * Optional meta information associated with the current page.
    */
   meta: Record<string, any>;
+
+  //
+  name?: string;
 }
 
 export interface RouterStackItem {