@alepha/react 0.14.1 → 0.14.3

package/src/i18n/providers/I18nProvider.spec.ts

@@ -0,0 +1,389 @@
+import { Alepha } from "alepha";
+import { describe, test } from "vitest";
+import { $dictionary } from "../primitives/$dictionary.ts";
+import { AlephaReactI18n } from "../index.ts";
+import { I18nProvider } from "./I18nProvider.ts";
+
+describe("I18nProvider", () => {
+  test("should register dictionaries on initialization", async ({ expect }) => {
+    class App {
+      en = $dictionary({
+        lazy: async () => ({ default: { hello: "Hello" } }),
+      });
+
+      fr = $dictionary({
+        lazy: async () => ({ default: { hello: "Bonjour" } }),
+      });
+    }
+
+    const alepha = Alepha.create().with(AlephaReactI18n);
+    const app = alepha.inject(App);
+    const i18n = alepha.inject(I18nProvider);
+
+    expect(i18n.registry).toHaveLength(2);
+    expect(i18n.registry[0].lang).toBe("en");
+    expect(i18n.registry[1].lang).toBe("fr");
+  });
+
+  test("should load all translations on server start", async ({ expect }) => {
+    class App {
+      en = $dictionary({
+        lazy: async () => ({ default: { hello: "Hello", world: "World" } }),
+      });
+
+      fr = $dictionary({
+        lazy: async () => ({ default: { hello: "Bonjour", world: "Monde" } }),
+      });
+    }
+
+    const alepha = Alepha.create().with(AlephaReactI18n);
+    const app = alepha.inject(App);
+    const i18n = alepha.inject(I18nProvider);
+
+    await alepha.start();
+
+    expect(i18n.registry[0].translations).toEqual({
+      hello: "Hello",
+      world: "World",
+    });
+    expect(i18n.registry[1].translations).toEqual({
+      hello: "Bonjour",
+      world: "Monde",
+    });
+  });
+
+  test("should default to fallback language", async ({ expect }) => {
+    class App {
+      en = $dictionary({
+        lazy: async () => ({ default: { hello: "Hello" } }),
+      });
+    }
+
+    const alepha = Alepha.create().with(AlephaReactI18n);
+    const app = alepha.inject(App);
+    const i18n = alepha.inject(I18nProvider);
+
+    expect(i18n.lang).toBe("en");
+  });
+
+  test("should translate keys in current language", async ({ expect }) => {
+    class App {
+      en = $dictionary({
+        lazy: async () => ({ default: { greeting: "Hello, World!" } }),
+      });
+
+      fr = $dictionary({
+        lazy: async () => ({ default: { greeting: "Bonjour, Monde!" } }),
+      });
+    }
+
+    const alepha = Alepha.create().with(AlephaReactI18n);
+    const app = alepha.inject(App);
+    const i18n = alepha.inject(I18nProvider);
+
+    await alepha.start();
+
+    expect(i18n.tr("greeting")).toBe("Hello, World!");
+
+    await i18n.setLang("fr");
+    expect(i18n.tr("greeting")).toBe("Bonjour, Monde!");
+  });
+
+  test("should fallback to fallback language when key missing", async ({
+    expect,
+  }) => {
+    class App {
+      en = $dictionary({
+        lazy: async () => ({
+          default: { hello: "Hello", world: "World" },
+        }),
+      });
+
+      fr = $dictionary({
+        lazy: async () => ({ default: { hello: "Bonjour" } }),
+      });
+    }
+
+    const alepha = Alepha.create().with(AlephaReactI18n);
+    const app = alepha.inject(App);
+    const i18n = alepha.inject(I18nProvider);
+
+    await alepha.start();
+    await i18n.setLang("fr");
+
+    expect(i18n.tr("hello")).toBe("Bonjour");
+    expect(i18n.tr("world")).toBe("World"); // Falls back to English
+  });
+
+  test("should return key when translation not found", async ({ expect }) => {
+    class App {
+      en = $dictionary({
+        lazy: async () => ({ default: { hello: "Hello" } }),
+      });
+    }
+
+    const alepha = Alepha.create().with(AlephaReactI18n);
+    const app = alepha.inject(App);
+    const i18n = alepha.inject(I18nProvider);
+
+    await alepha.start();
+
+    expect(i18n.tr("missing.key")).toBe("missing.key");
+  });
+
+  test("should support default option when key missing", async ({ expect }) => {
+    class App {
+      en = $dictionary({
+        lazy: async () => ({ default: { hello: "Hello" } }),
+      });
+    }
+
+    const alepha = Alepha.create().with(AlephaReactI18n);
+    const app = alepha.inject(App);
+    const i18n = alepha.inject(I18nProvider);
+
+    await alepha.start();
+
+    expect(i18n.tr("missing", { default: "Default Text" })).toBe(
+      "Default Text",
+    );
+  });
+
+  test("should support variable interpolation", async ({ expect }) => {
+    class App {
+      en = $dictionary({
+        lazy: async () => ({
+          default: { greeting: "Hello, $1! You have $2 messages." },
+        }),
+      });
+    }
+
+    const alepha = Alepha.create().with(AlephaReactI18n);
+    const app = alepha.inject(App);
+    const i18n = alepha.inject(I18nProvider);
+
+    await alepha.start();
+
+    expect(i18n.tr("greeting", { args: ["John", "5"] })).toBe(
+      "Hello, John! You have 5 messages.",
+    );
+  });
+
+  test("should list all available languages", async ({ expect }) => {
+    class App {
+      en = $dictionary({
+        lazy: async () => ({ default: { hello: "Hello" } }),
+      });
+
+      fr = $dictionary({
+        lazy: async () => ({ default: { hello: "Bonjour" } }),
+      });
+
+      de = $dictionary({
+        lazy: async () => ({ default: { hello: "Hallo" } }),
+      });
+    }
+
+    const alepha = Alepha.create().with(AlephaReactI18n);
+    const app = alepha.inject(App);
+    const i18n = alepha.inject(I18nProvider);
+
+    const languages = i18n.languages;
+    expect(languages).toContain("en");
+    expect(languages).toContain("fr");
+    expect(languages).toContain("de");
+    expect(languages).toHaveLength(3);
+  });
+
+  test("should support custom language codes", async ({ expect }) => {
+    class App {
+      enUS = $dictionary({
+        lang: "en-US",
+        lazy: async () => ({ default: { color: "color" } }),
+      });
+
+      enGB = $dictionary({
+        lang: "en-GB",
+        lazy: async () => ({ default: { color: "colour" } }),
+      });
+    }
+
+    const alepha = Alepha.create().with(AlephaReactI18n);
+    const app = alepha.inject(App);
+    const i18n = alepha.inject(I18nProvider);
+
+    await alepha.start();
+
+    expect(i18n.registry[0].lang).toBe("en-US");
+    expect(i18n.registry[1].lang).toBe("en-GB");
+  });
+
+  test("should support custom dictionary names", async ({ expect }) => {
+    class App {
+      english = $dictionary({
+        name: "custom-en",
+        lang: "en",
+        lazy: async () => ({ default: { hello: "Hello" } }),
+      });
+    }
+
+    const alepha = Alepha.create().with(AlephaReactI18n);
+    const app = alepha.inject(App);
+    const i18n = alepha.inject(I18nProvider);
+
+    expect(i18n.registry[0].name).toBe("custom-en");
+  });
+
+  test("should update state when language changes", async ({ expect }) => {
+    class App {
+      en = $dictionary({
+        lazy: async () => ({ default: { hello: "Hello" } }),
+      });
+
+      fr = $dictionary({
+        lazy: async () => ({ default: { hello: "Bonjour" } }),
+      });
+    }
+
+    const alepha = Alepha.create().with(AlephaReactI18n);
+    const app = alepha.inject(App);
+    const i18n = alepha.inject(I18nProvider);
+
+    await alepha.start();
+
+    // State is set lazily, so we should set a language first
+    await i18n.setLang("en");
+    expect(alepha.store.get("alepha.react.i18n.lang")).toBe("en");
+
+    await i18n.setLang("fr");
+    expect(alepha.store.get("alepha.react.i18n.lang")).toBe("fr");
+  });
+
+  test("should have number formatter for current language", async ({
+    expect,
+  }) => {
+    class App {
+      en = $dictionary({
+        lazy: async () => ({ default: {} }),
+      });
+    }
+
+    const alepha = Alepha.create().with(AlephaReactI18n);
+    const app = alepha.inject(App);
+    const i18n = alepha.inject(I18nProvider);
+
+    await alepha.start();
+
+    expect(i18n.numberFormat).toBeDefined();
+    expect(i18n.numberFormat.format).toBeTypeOf("function");
+  });
+
+  test("should handle multiple translations with same key across dictionaries", async ({
+    expect,
+  }) => {
+    class App {
+      en = $dictionary({
+        lazy: async () => ({
+          default: {
+            app: "Application",
+            settings: "Settings",
+          },
+        }),
+      });
+
+      fr = $dictionary({
+        lazy: async () => ({
+          default: {
+            app: "Programme",
+            settings: "Paramètres",
+          },
+        }),
+      });
+
+      es = $dictionary({
+        lazy: async () => ({
+          default: {
+            app: "Aplicación",
+            settings: "Configuración",
+          },
+        }),
+      });
+    }
+
+    const alepha = Alepha.create().with(AlephaReactI18n);
+    const app = alepha.inject(App);
+    const i18n = alepha.inject(I18nProvider);
+
+    await alepha.start();
+
+    expect(i18n.tr("app")).toBe("Application");
+    expect(i18n.tr("settings")).toBe("Settings");
+
+    await i18n.setLang("fr");
+    expect(i18n.tr("app")).toBe("Programme");
+    expect(i18n.tr("settings")).toBe("Paramètres");
+
+    await i18n.setLang("es");
+    expect(i18n.tr("app")).toBe("Aplicación");
+    expect(i18n.tr("settings")).toBe("Configuración");
+  });
+
+  test("should handle empty dictionaries", async ({ expect }) => {
+    class App {
+      en = $dictionary({
+        lazy: async () => ({ default: {} }),
+      });
+    }
+
+    const alepha = Alepha.create().with(AlephaReactI18n);
+    const app = alepha.inject(App);
+    const i18n = alepha.inject(I18nProvider);
+
+    await alepha.start();
+
+    expect(i18n.tr("anything")).toBe("anything");
+  });
+
+  test("should handle complex interpolation patterns", async ({ expect }) => {
+    class App {
+      en = $dictionary({
+        lazy: async () => ({
+          default: {
+            complex: "User $1 has $2 followers and follows $3 people",
+          },
+        }),
+      });
+    }
+
+    const alepha = Alepha.create().with(AlephaReactI18n);
+    const app = alepha.inject(App);
+    const i18n = alepha.inject(I18nProvider);
+
+    await alepha.start();
+
+    expect(i18n.tr("complex", { args: ["Alice", "1000", "500"] })).toBe(
+      "User Alice has 1000 followers and follows 500 people",
+    );
+  });
+
+  test("should handle partial interpolation args", async ({ expect }) => {
+    class App {
+      en = $dictionary({
+        lazy: async () => ({
+          default: { message: "Hello $1, you have $2 messages and $3 alerts" },
+        }),
+      });
+    }
+
+    const alepha = Alepha.create().with(AlephaReactI18n);
+    const app = alepha.inject(App);
+    const i18n = alepha.inject(I18nProvider);
+
+    await alepha.start();
+
+    // Provide fewer args than placeholders
+    expect(i18n.tr("message", { args: ["Bob"] })).toBe(
+      "Hello Bob, you have $2 messages and $3 alerts",
+    );
+  });
+});

package/src/{core → router}/components/ErrorViewer.tsx

@@ -47,6 +47,8 @@ const ErrorViewer = ({ error, alepha }: ErrorViewerProps) => {
 
 export default ErrorViewer;
 
+// ---------------------------------------------------------------------------------------------------------------------
+
 /**
  * Parse stack trace string into structured frames
  */

package/src/router/components/Link.tsx

@@ -0,0 +1,21 @@
+import { type AnchorHTMLAttributes, createElement } from "react";
+import { useRouter } from "../hooks/useRouter.ts";
+
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  href: string;
+}
+
+/**
+ * Link component for client-side navigation.
+ *
+ * It's a simple wrapper around an anchor (`<a>`) element using the `useRouter` hook.
+ */
+const Link = (props: LinkProps) => {
+  const router = useRouter();
+
+  return createElement(
+    "a", { ...props, ...router.anchor(props.href) }, props.children
+  )
+};
+
+export default Link;

package/src/{core → router}/components/NestedView.tsx

@@ -1,13 +1,11 @@
 import { memo, type ReactNode, use, useRef, useState } from "react";
+import type { ReactRouterState } from "../providers/ReactPageProvider.ts";
 import { RouterLayerContext } from "../contexts/RouterLayerContext.ts";
-import type { ErrorHandler, PageAnimation } from "../primitives/$page.ts";
 import { Redirection } from "../errors/Redirection.ts";
-import { useEvents } from "../hooks/useEvents.ts";
 import { useRouterState } from "../hooks/useRouterState.ts";
-import type { ReactRouterState } from "../providers/ReactPageProvider.ts";
-import ErrorBoundary from "./ErrorBoundary.tsx";
+import type { PageAnimation } from "../primitives/$page.ts";
 import ErrorViewer from "./ErrorViewer.tsx";
-import { useAlepha } from "../hooks/useAlepha.ts";
+import { ErrorBoundary, useAlepha, useEvents } from "@alepha/react";
 
 export interface NestedViewProps {
   children?: ReactNode;

package/src/router/components/NotFound.tsx

@@ -0,0 +1,30 @@
+import type { CSSProperties } from "react";
+
+/**
+ * Default 404 Not Found page component.
+ */
+ const NotFound = (props: { style?: CSSProperties }) => (
+  <div
+    style={{
+      width: "100%",
+      minHeight: "90vh",
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      textAlign: "center",
+      fontFamily:
+        'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+      padding: "2rem",
+      ...props.style,
+    }}
+  >
+    <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>
+)
+
+export default NotFound;

package/src/router/errors/Redirection.ts

@@ -0,0 +1,28 @@
+import { AlephaError } from "alepha";
+
+/**
+ * Used for Redirection during the page loading.
+ *
+ * Depends on the context, it can be thrown or just returned.
+ *
+ * @example
+ * ```ts
+ * import { Redirection } from "@alepha/react";
+ *
+ * const MyPage = $page({
+ *   resolve: async () => {
+ *    if (needRedirect) {
+ *      throw new Redirection("/new-path");
+ *    }
+ *   },
+ * });
+ * ```
+ */
+export class Redirection extends AlephaError {
+  public readonly redirect: string;
+
+  constructor(redirect: string) {
+    super("Redirection");
+    this.redirect = redirect;
+  }
+}

package/src/{core → router}/hooks/useActive.ts

@@ -8,11 +8,15 @@ export interface UseActiveOptions {
   startWith?: boolean;
 }
 
+/**
+ * Hook to determine if a given route is active and to provide anchor props for navigation.
+ * This hook refreshes on router state changes.
+ */
 export const useActive = (args: string | UseActiveOptions): UseActiveHook => {
+  useRouterState();
+
   const router = useRouter();
   const [isPending, setPending] = useState(false);
-  const state = useRouterState();
-  const current = state.url.pathname;
 
   const options: UseActiveOptions =
     typeof args === "string" ? { href: args } : { ...args, href: args.href };

package/src/{core → router}/hooks/useQueryParams.ts

@@ -1,10 +1,10 @@
 import type { Alepha, Static, TObject } from "alepha";
 import { useEffect, useState } from "react";
-import { useAlepha } from "./useAlepha.ts";
+import { useAlepha } from "@alepha/react";
 import { useRouter } from "./useRouter.ts";
 
 /**
- * Not well tested. Use with caution.
+ * Hook to manage query parameters in the URL using a defined schema.
  */
 export const useQueryParams = <T extends TObject>(
   schema: T,

package/src/{core → router}/hooks/useRouter.ts

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

package/src/{core → router}/hooks/useRouterState.ts

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

package/src/{core → router}/index.browser.ts

@@ -1,27 +1,27 @@
 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 { ReactBrowserProvider } from "./providers/ReactBrowserProvider.ts";
+import { ReactRouter } from "./services/ReactRouter.ts";
 import { ReactBrowserRendererProvider } from "./providers/ReactBrowserRendererProvider.ts";
 import { ReactBrowserRouterProvider } from "./providers/ReactBrowserRouterProvider.ts";
-import { ReactPageProvider } from "./providers/ReactPageProvider.ts";
 import { ReactPageService } from "./services/ReactPageService.ts";
-import { ReactRouter } from "./services/ReactRouter.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";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
 export * from "./index.shared.ts";
-export * from "./index.shared-router.ts";
-export * from "./providers/ReactBrowserProvider.ts";
-export * from "./providers/ReactBrowserRouterProvider.ts";
-export * from "./providers/ReactPageProvider.ts";
+export * from "./providers/ReactBrowserProvider.ts"
+export * from "./providers/ReactBrowserRouterProvider.ts"
+export * from "./providers/ReactBrowserRendererProvider.ts"
 
 // ---------------------------------------------------------------------------------------------------------------------
 
-export const AlephaReact = $module({
-  name: "alepha.react",
+export const AlephaReactRouter = $module({
+  name: "alepha.react.router",
   primitives: [$page],
   services: [
     ReactPageProvider,
@@ -33,6 +33,7 @@ export const AlephaReact = $module({
   ],
   register: (alepha) =>
     alepha
+      .with(AlephaReact)
       .with(AlephaDateTime)
       .with(AlephaServer)
       .with(AlephaServerLinks)
@@ -42,3 +43,4 @@ export const AlephaReact = $module({
       .with(ReactBrowserRendererProvider)
       .with(ReactRouter),
 });
+

package/src/{core/index.shared-router.ts → router/index.shared.ts}

@@ -1,9 +1,11 @@
-export { default as ClientOnly } from "./components/ClientOnly.tsx";
-export { default as ErrorBoundary } from "./components/ErrorBoundary.tsx";
 export { default as ErrorViewer } from "./components/ErrorViewer.tsx";
+export type * from "./components/ErrorViewer.tsx";
 export { default as Link, type LinkProps } from "./components/Link.tsx";
+export type *  from "./components/Link.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 * from "./contexts/RouterLayerContext.ts";
 export * from "./primitives/$page.ts";
 export * from "./errors/Redirection.ts";
@@ -11,5 +13,6 @@ export * from "./hooks/useActive.ts";
 export * from "./hooks/useQueryParams.ts";
 export * from "./hooks/useRouter.ts";
 export * from "./hooks/useRouterState.ts";
-export * from "./hooks/useSchema.ts";
 export * from "./services/ReactRouter.ts";
+export * from "./services/ReactPageService.ts"
+export * from "./providers/ReactPageProvider.ts";