@alepha/react 0.14.4 → 0.15.1

package/dist/websocket/index.d.ts

@@ -2,7 +2,6 @@ import { ChannelPrimitive, TWSObject } from "alepha/websocket";
 import { Static } from "alepha";
 
 //#region ../../src/websocket/hooks/useRoom.d.ts
-
 /**
  * UseRoom options
  */

package/dist/websocket/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/websocket/hooks/useRoom.tsx"],"sourcesContent":[],"mappings":";;;;;;;AASA;AACkB,UADD,cACC,CAAA,gBAAA,SAAA,EAAA,gBACA,SADA,CAAA,CAAA;EACA;;;EAUP,MAAA,EAAA,MAAA;EAKiB;;;EAuCH,OAAA,EA5Cd,gBA4Cc,CA5CG,OA4CH,EA5CY,OA4CZ,CAAA;EAMR;;;EAIC,OAAA,EAAA,CAAA,OAAA,EAjDG,MAiDH,CAjDU,OAiDV,CAAA,EAAA,GAAA,IAAA;EAAoB;;;AA4DtC;EAAwC,GAAA,CAAA,EAAA,MAAA;EAA2B;;;;EAGlD,aAAA,CAAA,EAAA,OAAA;EAAd;;;;;;;;;;;;;;;;;;;;;oBAzEiB;;;;;UAMH,8BAA8B;;;;kBAI7B,OAAO,aAAa;;;;;;;;;;;;;;;;UAoB5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAwCG,0BAA2B,2BAA2B,oBACxD,eAAe,SAAS,8BAEhC,cAAc"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/websocket/hooks/useRoom.tsx"],"mappings":";;;;;;AASA;UAAiB,cAAA,iBACC,SAAA,kBACA,SAAA;EAFa;;;EAO7B,MAAA;EAKmC;;;EAAnC,OAAA,EAAS,gBAAA,CAAiB,OAAA,EAAS,OAAA;EA4CjB;;;EAvClB,OAAA,GAAU,OAAA,EAAS,MAAA,CAAO,OAAA;EAhBV;;;;EAsBhB,GAAA;EAXS;;;;EAiBT,aAAA;EAZ0B;;;;EAkB1B,iBAAA;EAMA;;;;EAAA,oBAAA;EAeW;;;EAVX,SAAA;EAgB4B;;;EAX5B,YAAA;EAegB;;;EAVhB,OAAA,IAAW,KAAA,EAAO,KAAA;AAAA;;;;UAMH,aAAA,iBAA8B,SAAA;EAItB;;;EAAvB,IAAA,GAAO,OAAA,EAAS,MAAA,CAAO,OAAA,MAAa,OAAA;EAUpC;;;EALA,WAAA;EAoBA;;;EAfA,YAAA;EAkDW;;;EA7CX,OAAA;EA6CiE;;;EAxCjE,KAAA,GAAQ,KAAA;EA2CO;;;EAtCf,SAAA;EAmCsB;;;EA9BtB,UAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA8BW,OAAA,mBAA2B,SAAA,kBAA2B,SAAA,EACjE,OAAA,EAAS,cAAA,CAAe,OAAA,EAAS,OAAA,GACjC,IAAA,gBACC,aAAA,CAAc,OAAA"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@alepha/react",
   "description": "React components and hooks for building Alepha applications.",
   "author": "Nicolas Foures",
-  "version": "0.14.4",
+  "version": "0.15.1",
   "type": "module",
   "engines": {
     "node": ">=22.0.0"
@@ -20,19 +20,19 @@
     "react-dom": "^19"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.3.11",
+    "@biomejs/biome": "^2.3.12",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/react": "^16.3.1",
+    "@testing-library/react": "^16.3.2",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "alepha": "0.14.4",
+    "alepha": "0.15.1",
     "jsdom": "^27.4.0",
     "react": "^19.2.3",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.16"
+    "vitest": "^4.0.18"
   },
   "peerDependencies": {
-    "alepha": "0.14.4",
+    "alepha": "0.15.1",
     "react": "^19"
   },
   "scripts": {

package/src/auth/__tests__/$auth.spec.ts

@@ -1,188 +1,202 @@
 import { randomUUID } from "node:crypto";
 import { Alepha } from "alepha";
 import { DateTimeProvider } from "alepha/datetime";
-import { $realm } from "alepha/security";
-import { HttpClient, ServerProvider } from "alepha/server";
-import { $client } from "alepha/server/links";
-import { AlephaServerSecurity } from "alepha/server/security";
-import { describe, test } from "vitest";
+import { $issuer, AlephaSecurity } from "alepha/security";
+import { AlephaServer, HttpClient, ServerProvider } from "alepha/server";
 import {
   $auth,
   alephaServerAuthRoutes,
   type TokenResponse,
   tokenResponseSchema,
-  tokensSchema
+  tokensSchema,
 } from "alepha/server/auth";
-import { ReactAuth, ReactAuthProvider } from "../index.ts";
+import { $client } from "alepha/server/links";
+import { describe, test } from "vitest";
+import { ReactAuth, type ReactAuthProvider } from "../index.ts";
 
 describe("$auth", () => {
-    const user = {
-      id: randomUUID(),
-      name: "John Doe",
-      username: "john",
-      password: "***",
-      roles: ["admin"],
-    };
-
-    class App {
-      realm = $realm({
-        secret: "my-secret-key",
-        roles: [
-          {
-            name: "admin",
-            permissions: [{ name: "*" }],
-          },
-        ],
-      });
-
-      auth = $auth({
-        realm: this.realm,
-        credentials: {
-          account: () => user,
+  const user = {
+    id: randomUUID(),
+    name: "John Doe",
+    username: "john",
+    password: "***",
+    roles: ["admin"],
+  };
+
+  class App {
+    issuer = $issuer({
+      secret: "my-secret-key",
+      roles: [
+        {
+          name: "admin",
+          permissions: [{ name: "*" }],
         },
-      });
-
-      api = $client<ReactAuthProvider>();
-    }
-
-    const userinfo = (alepha: Alepha, token?: string) =>
-      alepha
-        .inject(HttpClient)
-        .fetch(
-          `${alepha.inject(ServerProvider).hostname}${alephaServerAuthRoutes.userinfo}`,
-          {
-            method: "GET",
-            headers: {
-              authorization: `Bearer ${token}`,
-            },
+      ],
+    });
+
+    auth = $auth({
+      issuer: this.issuer,
+      credentials: {
+        account: () => user,
+      },
+    });
+
+    api = $client<ReactAuthProvider>();
+  }
+
+  const userinfo = (alepha: Alepha, token?: string) =>
+    alepha
+      .inject(HttpClient)
+      .fetch(
+        `${alepha.inject(ServerProvider).hostname}${alephaServerAuthRoutes.userinfo}`,
+        {
+          method: "GET",
+          headers: {
+            authorization: `Bearer ${token}`,
           },
-        )
-        .then((it) => it.data);
-
-    const login = (alepha: Alepha) =>
-      alepha
-        .inject(HttpClient)
-        .fetch(
-          `${alepha.inject(ServerProvider).hostname}${alephaServerAuthRoutes.token}?provider=auth`,
-          {
-            method: "POST",
-            body: JSON.stringify({
-              username: user.username,
-              password: user.password,
-            }),
-            schema: {
-              response: tokenResponseSchema,
-            },
+        },
+      )
+      .then((it) => it.data);
+
+  const login = (alepha: Alepha) =>
+    alepha
+      .inject(HttpClient)
+      .fetch(
+        `${alepha.inject(ServerProvider).hostname}${alephaServerAuthRoutes.token}?provider=auth`,
+        {
+          method: "POST",
+          body: JSON.stringify({
+            username: user.username,
+            password: user.password,
+          }),
+          schema: {
+            response: tokenResponseSchema,
           },
-        );
-
-    const refresh = (alepha: Alepha, tokens: TokenResponse) =>
-      alepha
-        .inject(HttpClient)
-        .fetch(
-          `${alepha.inject(ServerProvider).hostname}${alephaServerAuthRoutes.refresh}?provider=auth`,
-          {
-            method: "POST",
-            body: JSON.stringify({
-              refresh_token: tokens.refresh_token!,
-              access_token: tokens.access_token,
-            }),
-            schema: {
-              response: tokensSchema,
-            },
+        },
+      );
+
+  const refresh = (alepha: Alepha, tokens: TokenResponse) =>
+    alepha
+      .inject(HttpClient)
+      .fetch(
+        `${alepha.inject(ServerProvider).hostname}${alephaServerAuthRoutes.refresh}?provider=auth`,
+        {
+          method: "POST",
+          body: JSON.stringify({
+            refresh_token: tokens.refresh_token!,
+            access_token: tokens.access_token,
+          }),
+          schema: {
+            response: tokensSchema,
           },
-        );
+        },
+      );
+
+  test("should login with credentials", async ({ expect }) => {
+    const alepha = Alepha.create()
+      .with(AlephaServer)
+      .with(AlephaSecurity)
+      .with(App);
+    const auth = alepha.inject(ReactAuth);
+    await alepha.start();
+
+    expect(auth.user).toBeUndefined();
+    await auth.login("auth", {
+      username: user.username,
+      password: user.password,
+      hostname: alepha.inject(ServerProvider).hostname,
+    });
+    expect(auth.user).toEqual({
+      id: user.id,
+      name: user.name,
+      roles: user.roles,
+      username: user.username,
+    });
+  });
 
-    test("should login with credentials", async ({ expect }) => {
-      const alepha = Alepha.create().with(App).with(AlephaServerSecurity);
-      const auth = alepha.inject(ReactAuth);
-      await alepha.start();
+  test("should get userinfo", async ({ expect }) => {
+    const alepha = Alepha.create()
+      .with(AlephaServer)
+      .with(AlephaSecurity)
+      .with(App);
+    await alepha.start();
 
-      expect(auth.user).toBeUndefined();
-      await auth.login("auth", {
-        username: user.username,
-        password: user.password,
-        hostname: alepha.inject(ServerProvider).hostname,
-      });
-      expect(auth.user).toEqual({
+    const { data: tokens } = await login(alepha);
+
+    expect(await userinfo(alepha, tokens.access_token)).toEqual({
+      user: {
         id: user.id,
         name: user.name,
         roles: user.roles,
         username: user.username,
-      });
-    });
-
-    test("should get userinfo", async ({ expect }) => {
-      const alepha = Alepha.create().with(App).with(AlephaServerSecurity);
-      await alepha.start();
-
-      const { data: tokens } = await login(alepha);
-
-      expect(await userinfo(alepha, tokens.access_token)).toEqual({
-        user: {
-          id: user.id,
-          name: user.name,
-          roles: user.roles,
-          username: user.username,
-          sessionId: expect.any(String),
-        },
-        api: {
-          prefix: "/api",
-          links: [],
-        },
-      });
+        sessionId: expect.any(String),
+      },
+      api: {
+        prefix: "/api",
+        links: [],
+      },
     });
+  });
 
-    test("should reject expired token", async ({ expect }) => {
-      const alepha = Alepha.create().with(App);
-      await alepha.start();
+  test("should reject expired token", async ({ expect }) => {
+    const alepha = Alepha.create()
+      .with(AlephaServer)
+      .with(AlephaSecurity)
+      .with(App);
+    await alepha.start();
 
-      const { data: tokens } = await login(alepha);
+    const { data: tokens } = await login(alepha);
 
-      await alepha.inject(DateTimeProvider).travel(1, "hour");
+    await alepha.inject(DateTimeProvider).travel(1, "hour");
 
-      expect(await userinfo(alepha, tokens.access_token)).toEqual({
-        api: {
-          prefix: "/api",
-          links: [],
-        },
-      });
+    expect(await userinfo(alepha, tokens.access_token)).toEqual({
+      api: {
+        prefix: "/api",
+        links: [],
+      },
     });
+  });
 
-    test("should refresh expired token", async ({ expect }) => {
-      const alepha = Alepha.create().with(App);
-      await alepha.start();
+  test("should refresh expired token", async ({ expect }) => {
+    const alepha = Alepha.create()
+      .with(AlephaServer)
+      .with(AlephaSecurity)
+      .with(App);
+    await alepha.start();
 
-      const { data: tokens } = await login(alepha);
+    const { data: tokens } = await login(alepha);
 
-      await alepha.inject(DateTimeProvider).travel(1, "hour");
+    await alepha.inject(DateTimeProvider).travel(1, "hour");
 
-      const { data: tokens2 } = await refresh(alepha, tokens);
+    const { data: tokens2 } = await refresh(alepha, tokens);
 
-      expect(await userinfo(alepha, tokens2.access_token)).toEqual({
-        user: {
-          id: user.id,
-          name: user.name,
-          roles: user.roles,
-          username: user.username,
-        },
-        api: {
-          prefix: "/api",
-          links: [],
-        },
-      });
+    expect(await userinfo(alepha, tokens2.access_token)).toEqual({
+      user: {
+        id: user.id,
+        name: user.name,
+        roles: user.roles,
+        username: user.username,
+      },
+      api: {
+        prefix: "/api",
+        links: [],
+      },
     });
+  });
 
-    test("should reject expired refresh token", async ({ expect }) => {
-      const alepha = Alepha.create().with(App);
-      await alepha.start();
+  test("should reject expired refresh token", async ({ expect }) => {
+    const alepha = Alepha.create()
+      .with(AlephaServer)
+      .with(AlephaSecurity)
+      .with(App);
+    await alepha.start();
 
-      const { data: tokens } = await login(alepha);
+    const { data: tokens } = await login(alepha);
 
-      await alepha.inject(DateTimeProvider).travel(40, "days");
+    await alepha.inject(DateTimeProvider).travel(40, "days");
 
-      await expect(refresh(alepha, tokens)).rejects.toThrowError(
-        "Failed to refresh access token using the refresh token (realm)",
-      );
-    });
+    await expect(refresh(alepha, tokens)).rejects.toThrowError(
+      "Failed to refresh access token using the refresh token (issuer)",
+    );
+  });
 });

package/src/auth/index.ts

@@ -1,10 +1,10 @@
 import { AlephaReact } from "@alepha/react";
 import { $module } from "alepha";
 import type { UserAccount } from "alepha/security";
-import { ReactAuthProvider } from "./providers/ReactAuthProvider.ts";
-import { ReactAuth } from "./services/ReactAuth.ts";
 import { $auth, AlephaServerAuth } from "alepha/server/auth";
 import { AlephaServerLinks } from "alepha/server/links";
+import { ReactAuthProvider } from "./providers/ReactAuthProvider.ts";
+import { ReactAuth } from "./services/ReactAuth.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
@@ -30,5 +30,11 @@ declare module "@alepha/react/router" {
 export const AlephaReactAuth = $module({
   name: "alepha.react.auth",
   primitives: [$auth],
-  services: [AlephaReact, AlephaServerLinks, AlephaServerAuth, ReactAuthProvider, ReactAuth],
+  services: [
+    AlephaReact,
+    AlephaServerLinks,
+    AlephaServerAuth,
+    ReactAuthProvider,
+    ReactAuth,
+  ],
 });

package/src/auth/services/ReactAuth.ts

@@ -3,7 +3,12 @@ import { $hook, $inject, Alepha } from "alepha";
 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 {
+  alephaServerAuthRoutes,
+  type Tokens,
+  tokenResponseSchema,
+  userinfoResponseSchema,
+} from "alepha/server/auth";
 import { LinkProvider } from "alepha/server/links";
 
 /**
@@ -46,9 +51,12 @@ export class ReactAuth {
   }
 
   public async ping() {
-    const { data } = await this.httpClient.fetch(alephaServerAuthRoutes.userinfo, {
-      schema: { response: userinfoResponseSchema },
-    });
+    const { data } = await this.httpClient.fetch(
+      alephaServerAuthRoutes.userinfo,
+      {
+        schema: { response: userinfoResponseSchema },
+      },
+    );
 
     this.alepha.store.set("alepha.server.request.apiLinks", data.api);
     this.alepha.store.set("alepha.server.request.user", data.user);
@@ -75,7 +83,9 @@ export class ReactAuth {
       [extra: string]: any;
     },
   ): Promise<Tokens> {
-    const realmParam = options.realm ? `&realm=${encodeURIComponent(options.realm)}` : "";
+    const realmParam = options.realm
+      ? `&realm=${encodeURIComponent(options.realm)}`
+      : "";
 
     if (options.username || options.password) {
       const { data } = await this.httpClient.fetch(

package/src/core/hooks/useAction.ts

@@ -1,3 +1,4 @@
+import type { Async } from "alepha";
 import {
   DateTimeProvider,
   type DurationLike,
@@ -13,7 +14,6 @@ import {
 } from "react";
 import { useAlepha } from "./useAlepha.ts";
 import { useInject } from "./useInject.ts";
-import type { Async } from "alepha";
 
 /**
  * Hook for handling async actions with automatic error handling and event emission.
@@ -207,7 +207,6 @@ export function useAction<Args extends any[], Result = void>(
           await options.onSuccess(result);
         }
 
-
         return result;
       } catch (err) {
         // Ignore abort errors

package/src/core/index.ts

@@ -2,17 +2,17 @@ import { $module } from "alepha";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
-export { default as ClientOnly } from "./components/ClientOnly.tsx";
 export type * from "./components/ClientOnly.tsx";
-export { default as ErrorBoundary } from "./components/ErrorBoundary.tsx";
+export { default as ClientOnly } from "./components/ClientOnly.tsx";
 export type * from "./components/ErrorBoundary.tsx";
-export * from "./contexts/AlephaProvider.tsx";
+export { default as ErrorBoundary } from "./components/ErrorBoundary.tsx";
 export * from "./contexts/AlephaContext.ts";
+export * from "./contexts/AlephaProvider.tsx";
 export * from "./hooks/useAction.ts";
 export * from "./hooks/useAlepha.ts";
+export * from "./hooks/useClient.ts";
 export * from "./hooks/useEvents.ts";
 export * from "./hooks/useInject.ts";
-export * from "./hooks/useClient.ts";
 export * from "./hooks/useStore.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------

package/src/form/errors/FormValidationError.ts

@@ -3,12 +3,10 @@ import { TypeBoxError } from "alepha";
 export class FormValidationError extends TypeBoxError {
   readonly name = "ValidationError";
 
-  constructor(
-    options: {
-      message: string;
-      path: string;
-    }
-  ) {
+  constructor(options: {
+    message: string;
+    path: string;
+  }) {
     super({
       message: options.message,
       instancePath: options.path,

package/src/form/hooks/useFormState.ts

@@ -1,7 +1,7 @@
 import { useAlepha } from "@alepha/react";
-import type { FormModel } from "../services/FormModel.ts";
 import { type TObject, TypeBoxError } from "alepha";
 import { useEffect, useState } from "react";
+import type { FormModel } from "../services/FormModel.ts";
 
 export interface UseFormStateReturn {
   loading: boolean;

package/src/form/index.ts

@@ -3,10 +3,10 @@ import { $module } from "alepha";
 // ---------------------------------------------------------------------------------------------------------------------
 
 export { default as FormState } from "./components/FormState.tsx";
+export * from "./errors/FormValidationError.ts";
 export * from "./hooks/useForm.ts";
 export * from "./hooks/useFormState.ts";
 export * from "./services/FormModel.ts";
-export * from "./errors/FormValidationError.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 

package/src/form/services/FormModel.ts

@@ -1,5 +1,12 @@
 import type { TArray } from "alepha";
-import { $inject, Alepha, type Static, t, type TObject, type TSchema, } from "alepha";
+import {
+  $inject,
+  Alepha,
+  type Static,
+  type TObject,
+  type TSchema,
+  t,
+} from "alepha";
 import { $logger } from "alepha/logger";
 import type { ChangeEvent, InputHTMLAttributes } from "react";
 
@@ -217,7 +224,6 @@ export class FormModel<T extends TObject> {
         }
 
         if (prop in schema.properties) {
-
           // // it's a nested object, create another proxy
           // if (t.schema.isObject(schema.properties[prop])) {
           //   return this.createProxyFromSchema(
@@ -284,13 +290,17 @@ export class FormModel<T extends TObject> {
         options.onChange(key, typedValue, context.store);
       }
 
-      this.alepha.events.emit("form:change", {
-        id: this.id,
-        path: path,
-        value: typedValue,
-      }, {
-        catch: true
-      });
+      this.alepha.events.emit(
+        "form:change",
+        {
+          id: this.id,
+          path: path,
+          value: typedValue,
+        },
+        {
+          catch: true,
+        },
+      );
 
       if (sync) {
         const inputElement = window.document.querySelector(
@@ -408,14 +418,10 @@ export class FormModel<T extends TObject> {
         set,
         form: this,
         required,
-        items: this.createProxyFromSchema(
-          options,
-          field,
-          {
-            parent: key,
-            store: context.store,
-          },
-        )
+        items: this.createProxyFromSchema(options, field, {
+          parent: key,
+          store: context.store,
+        }),
       } as ObjectInputField<any>;
     }
 
@@ -460,7 +466,8 @@ export class FormModel<T extends TObject> {
       // Handle string representations from Select components (Yes/No dropdown)
       if (input === "true") return true;
       if (input === "false") return false;
-      if (input === "" || input === null || input === undefined) return undefined;
+      if (input === "" || input === null || input === undefined)
+        return undefined;
       // Handle actual boolean values
       return !!input;
     }
@@ -520,12 +527,11 @@ export interface FormEventLike {
   stopPropagation?: () => void;
 }
 
-export type InputField<T extends TSchema> =
-  T extends TObject
-    ? ObjectInputField<T>
-    : T extends TArray<infer U>
-      ? ArrayInputField<U>
-      : BaseInputField;
+export type InputField<T extends TSchema> = T extends TObject
+  ? ObjectInputField<T>
+  : T extends TArray<infer U>
+    ? ArrayInputField<U>
+    : BaseInputField;
 
 export interface BaseInputField {
   path: string;
@@ -542,7 +548,7 @@ export interface ObjectInputField<T extends TObject> extends BaseInputField {
 }
 
 export interface ArrayInputField<T extends TSchema> extends BaseInputField {
-  items: Array<InputField<T>>
+  items: Array<InputField<T>>;
 }
 
 export type InputHTMLAttributesLike = Pick<

package/src/head/helpers/SeoExpander.ts

@@ -113,7 +113,8 @@ export class SeoExpander {
       meta.push({
         name: "twitter:card",
         content:
-          head.twitter?.card ?? (twitterImage ? "summary_large_image" : "summary"),
+          head.twitter?.card ??
+          (twitterImage ? "summary_large_image" : "summary"),
       });
     }
     if (head.url) {