@alepha/react 0.14.1 → 0.14.3

package/src/i18n/__tests__/integration.spec.tsx

@@ -0,0 +1,239 @@
+import { Alepha } from "alepha";
+import { describe, test } from "vitest";
+import { $dictionary } from "../primitives/$dictionary.ts";
+import { AlephaReactI18n } from "../index.ts";
+import { I18nProvider } from "../providers/I18nProvider.ts";
+
+describe("I18n Integration Tests", () => {
+  test("should lazy load dictionaries on server start", async ({ expect }) => {
+    let enLoaded = false;
+    let frLoaded = false;
+
+    class App {
+      en = $dictionary({
+        lazy: async () => {
+          enLoaded = true;
+          return { default: { hello: "Hello" } };
+        },
+      });
+
+      fr = $dictionary({
+        lazy: async () => {
+          frLoaded = true;
+          return { default: { hello: "Bonjour" } };
+        },
+      });
+    }
+
+    const alepha = Alepha.create().with(AlephaReactI18n);
+    const app = alepha.inject(App);
+
+    expect(enLoaded).toBe(false);
+    expect(frLoaded).toBe(false);
+
+    await alepha.start();
+
+    expect(enLoaded).toBe(true);
+    expect(frLoaded).toBe(true);
+  });
+
+  test("should share I18nProvider instance across application", async ({
+    expect,
+  }) => {
+    class App {
+      en = $dictionary({
+        lazy: async () => ({ default: { key: "value" } }),
+      });
+    }
+
+    const alepha = Alepha.create().with(AlephaReactI18n);
+    const app = alepha.inject(App);
+
+    const i18n1 = alepha.inject(I18nProvider);
+    const i18n2 = alepha.inject(I18nProvider);
+
+    expect(i18n1).toBe(i18n2);
+    expect(i18n1.registry).toBe(i18n2.registry);
+  });
+
+  test("should support multiple dictionary registrations", async ({
+    expect,
+  }) => {
+    class App {
+      en = $dictionary({
+        lazy: async () => ({
+          default: {
+            "app.title": "My Application",
+            "app.subtitle": "Built with Alepha",
+            "auth.login": "Log In",
+            "auth.logout": "Log Out",
+          },
+        }),
+      });
+
+      fr = $dictionary({
+        lazy: async () => ({
+          default: {
+            "app.title": "Mon Application",
+            "app.subtitle": "Construit avec Alepha",
+            "auth.login": "Se connecter",
+            "auth.logout": "Se déconnecter",
+          },
+        }),
+      });
+    }
+
+    const alepha = Alepha.create().with(AlephaReactI18n);
+    const app = alepha.inject(App);
+    const i18n = alepha.inject(I18nProvider);
+
+    await alepha.start();
+
+    // Test English
+    expect(i18n.tr("app.title")).toBe("My Application");
+    expect(i18n.tr("app.subtitle")).toBe("Built with Alepha");
+    expect(i18n.tr("auth.login")).toBe("Log In");
+    expect(i18n.tr("auth.logout")).toBe("Log Out");
+
+    // Switch to French
+    await i18n.setLang("fr");
+
+    expect(i18n.tr("app.title")).toBe("Mon Application");
+    expect(i18n.tr("app.subtitle")).toBe("Construit avec Alepha");
+    expect(i18n.tr("auth.login")).toBe("Se connecter");
+    expect(i18n.tr("auth.logout")).toBe("Se déconnecter");
+  });
+
+  test("should handle translation with complex interpolation across languages", async ({
+    expect,
+  }) => {
+    class App {
+      en = $dictionary({
+        lazy: async () => ({
+          default: {
+            notification: "$1 sent you $2 message(s) about $3",
+          },
+        }),
+      });
+
+      fr = $dictionary({
+        lazy: async () => ({
+          default: {
+            notification: "$1 vous a envoyé $2 message(s) à propos de $3",
+          },
+        }),
+      });
+
+      es = $dictionary({
+        lazy: async () => ({
+          default: {
+            notification: "$1 te envió $2 mensaje(s) sobre $3",
+          },
+        }),
+      });
+    }
+
+    const alepha = Alepha.create().with(AlephaReactI18n);
+    const app = alepha.inject(App);
+    const i18n = alepha.inject(I18nProvider);
+
+    await alepha.start();
+
+    const args = ["John", "3", "your project"];
+
+    expect(i18n.tr("notification", { args })).toBe(
+      "John sent you 3 message(s) about your project",
+    );
+
+    await i18n.setLang("fr");
+    expect(i18n.tr("notification", { args })).toBe(
+      "John vous a envoyé 3 message(s) à propos de your project",
+    );
+
+    await i18n.setLang("es");
+    expect(i18n.tr("notification", { args })).toBe(
+      "John te envió 3 mensaje(s) sobre your project",
+    );
+  });
+
+  test("should properly cleanup on stop", async ({ expect }) => {
+    class App {
+      en = $dictionary({
+        lazy: async () => ({ default: { test: "Test" } }),
+      });
+    }
+
+    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({ test: "Test" });
+
+    await alepha.stop();
+    // Registry should still exist after stop
+    expect(i18n.registry).toBeDefined();
+  });
+
+  test("should work with empty language fallback chain", async ({ expect }) => {
+    class App {
+      en = $dictionary({
+        lazy: async () => ({ default: { only_en: "Only in English" } }),
+      });
+
+      fr = $dictionary({
+        lazy: async () => ({ default: { only_fr: "Seulement en français" } }),
+      });
+    }
+
+    const alepha = Alepha.create().with(AlephaReactI18n);
+    const app = alepha.inject(App);
+    const i18n = alepha.inject(I18nProvider);
+
+    await alepha.start();
+
+    // In English, can't find French-only key
+    expect(i18n.tr("only_fr")).toBe("only_fr");
+    expect(i18n.tr("only_en")).toBe("Only in English");
+
+    // In French, falls back to English for English-only key
+    await i18n.setLang("fr");
+    expect(i18n.tr("only_fr")).toBe("Seulement en français");
+    expect(i18n.tr("only_en")).toBe("Only in English");
+  });
+
+  test("should handle rapid language switches", async ({ expect }) => {
+    class App {
+      en = $dictionary({
+        lazy: async () => ({ default: { status: "Active" } }),
+      });
+
+      fr = $dictionary({
+        lazy: async () => ({ default: { status: "Actif" } }),
+      });
+
+      de = $dictionary({
+        lazy: async () => ({ default: { status: "Aktiv" } }),
+      });
+    }
+
+    const alepha = Alepha.create().with(AlephaReactI18n);
+    const app = alepha.inject(App);
+    const i18n = alepha.inject(I18nProvider);
+
+    await alepha.start();
+
+    // Rapidly switch languages
+    await i18n.setLang("fr");
+    expect(i18n.tr("status")).toBe("Actif");
+
+    await i18n.setLang("de");
+    expect(i18n.tr("status")).toBe("Aktiv");
+
+    await i18n.setLang("en");
+    expect(i18n.tr("status")).toBe("Active");
+
+    await i18n.setLang("fr");
+    expect(i18n.tr("status")).toBe("Actif");
+  });
+});

package/src/i18n/components/Localize.spec.tsx

@@ -0,0 +1,357 @@
+import { AlephaContext } from "@alepha/react";
+import { I18nProvider, Localize } from "../index.ts";
+import { Alepha, t } from "alepha";
+import { DateTimeProvider } from "alepha/datetime";
+import type { ReactNode } from "react";
+import { renderToString } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+describe("<Localize/>", () => {
+  const setup = () => {
+    const alepha = Alepha.create();
+    return {
+      i18n: alepha.inject(I18nProvider),
+      dateTime: alepha.inject(DateTimeProvider),
+      alepha,
+      render: (children: ReactNode) =>
+        renderToString(
+          <AlephaContext value={alepha}>{children}</AlephaContext>,
+        ),
+    };
+  };
+
+  it("should format date", () => {
+    const { render, i18n } = setup();
+    const date = new Date("2024-09-23T23:45:00Z");
+    expect(render(<Localize value={date} />)).toBe("9/24/2024");
+    i18n.setLang("fr");
+    expect(render(<Localize value={date} />)).toBe("24/09/2024");
+  });
+
+  it("should format number", () => {
+    const { render, i18n } = setup();
+    const number = 1234567.89;
+    expect(render(<Localize value={number} />)).toBe("1,234,567.89");
+    i18n.setLang("de");
+    expect(render(<Localize value={number} />)).toBe("1.234.567,89");
+    i18n.setLang("fr");
+    expect(render(<Localize value={number} />)).toBe("1\u202f234\u202f567,89");
+  });
+
+  // it("should format typebox error", async () => {
+  //   const { render, i18n, alepha } = setup();
+  //   const boom = async () => alepha.codec.decode(t.number(), "..");
+  //   const error = await boom().catch((err) => err);
+  //   expect(render(<Localize value={error} />)).toBe("must be number");
+  //   await i18n.setLang("fr");
+  //   expect(render(<Localize value={error} />)).toBe("doit être number");
+  // });
+
+  describe("number formatting options", () => {
+    it("should format currency", () => {
+      const { render } = setup();
+      const number = 1234.56;
+      expect(
+        render(
+          <Localize
+            value={number}
+            number={{ style: "currency", currency: "USD" }}
+          />,
+        ),
+      ).toBe("$1,234.56");
+    });
+
+    it("should format currency with locale", () => {
+      const { render, i18n } = setup();
+      const number = 1234.56;
+      i18n.setLang("fr");
+      expect(
+        render(
+          <Localize
+            value={number}
+            number={{ style: "currency", currency: "EUR" }}
+          />,
+        ),
+      ).toBe("1\u202f234,56\u00a0€");
+    });
+
+    it("should format percentage", () => {
+      const { render } = setup();
+      const number = 0.1234;
+      expect(
+        render(<Localize value={number} number={{ style: "percent" }} />),
+      ).toBe("12%");
+    });
+
+    it("should format with minimum fraction digits", () => {
+      const { render } = setup();
+      const number = 10;
+      expect(
+        render(
+          <Localize value={number} number={{ minimumFractionDigits: 2 }} />,
+        ),
+      ).toBe("10.00");
+    });
+
+    it("should format with maximum fraction digits", () => {
+      const { render } = setup();
+      const number = 10.123456;
+      expect(
+        render(
+          <Localize value={number} number={{ maximumFractionDigits: 2 }} />,
+        ),
+      ).toBe("10.12");
+    });
+
+    it("should format with notation", () => {
+      const { render } = setup();
+      const number = 1000000;
+      expect(
+        render(<Localize value={number} number={{ notation: "compact" }} />),
+      ).toBe("1M");
+    });
+  });
+
+  describe("date formatting options", () => {
+    it("should format with dayjs format string - LLL", () => {
+      const { render, i18n, dateTime } = setup();
+      const date = dateTime.utc("2024-09-24T00:45:00Z").toDate();
+      const formatted = render(<Localize value={date} date="LLL" />);
+      // Format depends on local timezone, so just check it contains the key parts
+      expect(formatted).toContain("September");
+      expect(formatted).toContain("2024");
+      i18n.setLang("fr");
+      const frFormatted = render(<Localize value={date} date="LLL" />);
+      expect(frFormatted).toContain("septembre");
+      expect(frFormatted).toContain("2024");
+    });
+
+    it("should format with dayjs format string - YYYY-MM-DD", () => {
+      const { render } = setup();
+      const date = new Date("2024-09-23T23:45:00Z");
+      expect(render(<Localize value={date} date="YYYY-MM-DD" />)).toBe(
+        "2024-09-24",
+      );
+    });
+
+    it("should format with dayjs format string - dddd, MMMM D YYYY", () => {
+      const { render } = setup();
+      const date = new Date("2024-09-23T23:45:00Z");
+      expect(render(<Localize value={date} date="dddd, MMMM D YYYY" />)).toBe(
+        "Tuesday, September 24 2024",
+      );
+    });
+
+    it("should format with fromNow for Date", () => {
+      const { render, dateTime } = setup();
+      dateTime.pause();
+      const date = dateTime.now().subtract(2, "hour").toDate();
+      const result = render(<Localize value={date} date="fromNow" />);
+      expect(result).toBe("2 hours ago");
+    });
+
+    it("should format with fromNow for DateTime", () => {
+      const { render, dateTime } = setup();
+      dateTime.pause();
+      const date = dateTime.now().subtract(3, "day");
+      const result = render(<Localize value={date} date="fromNow" />);
+      expect(result).toBe("3 days ago");
+    });
+
+    it("should format DateTime with dayjs format string", () => {
+      const { render, dateTime } = setup();
+      const date = dateTime.of("2024-09-23T23:45:00Z");
+      expect(render(<Localize value={date} date="YYYY-MM-DD" />)).toBe(
+        "2024-09-24",
+      );
+    });
+
+    it("should format with Intl.DateTimeFormatOptions", () => {
+      const { render } = setup();
+      const date = new Date("2024-09-23T23:45:00Z");
+      expect(
+        render(
+          <Localize
+            value={date}
+            date={{
+              weekday: "long",
+              year: "numeric",
+              month: "long",
+              day: "numeric",
+            }}
+          />,
+        ),
+      ).toBe("Tuesday, September 24, 2024");
+    });
+
+    it("should format with Intl.DateTimeFormatOptions and locale", () => {
+      const { render, i18n } = setup();
+      const date = new Date("2024-09-23T23:45:00Z");
+      i18n.setLang("fr");
+      expect(
+        render(
+          <Localize
+            value={date}
+            date={{
+              weekday: "long",
+              year: "numeric",
+              month: "long",
+              day: "numeric",
+            }}
+          />,
+        ),
+      ).toBe("mardi 24 septembre 2024");
+    });
+
+    it("should format DateTime with Intl.DateTimeFormatOptions", () => {
+      const { render, dateTime } = setup();
+      const date = dateTime.utc("2024-09-24T00:45:00Z");
+      const formatted = render(
+        <Localize
+          value={date}
+          date={{
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: true,
+          }}
+        />,
+      );
+      // Format depends on local timezone, so just verify it contains time parts
+      expect(formatted).toMatch(/\d{1,2}:\d{2}\s(AM|PM)/);
+    });
+  });
+
+  describe("string date parsing", () => {
+    it("should parse string date when dateOptions is provided", () => {
+      const { render } = setup();
+      const dateString = "2024-09-24T12:00:00Z";
+      expect(render(<Localize value={dateString} date="YYYY-MM-DD" />)).toBe(
+        "2024-09-24",
+      );
+    });
+
+    it("should parse string date with format options", () => {
+      const { render } = setup();
+      const dateString = "2024-09-24T12:00:00Z";
+      expect(render(<Localize value={dateString} date="LLL" />)).toContain(
+        "September",
+      );
+    });
+
+    it("should parse string date with timezone", () => {
+      const { render } = setup();
+      const dateString = "2024-09-24T12:00:00Z";
+      expect(
+        render(
+          <Localize
+            value={dateString}
+            timezone="America/New_York"
+            date="YYYY-MM-DD HH:mm"
+          />,
+        ),
+      ).toBe("2024-09-24 08:00");
+    });
+
+    it("should return string as-is when no dateOptions provided", () => {
+      const { render } = setup();
+      const dateString = "2024-09-24T12:00:00Z";
+      expect(render(<Localize value={dateString} />)).toBe(dateString);
+    });
+  });
+
+  describe("timezone formatting", () => {
+    it("should format Date with timezone using Intl", () => {
+      const { render } = setup();
+      const date = new Date("2024-09-24T12:00:00Z");
+      expect(
+        render(<Localize value={date} timezone="America/New_York" />),
+      ).toBe("9/24/2024");
+    });
+
+    it("should format Date with timezone and dateOptions", () => {
+      const { render } = setup();
+      const date = new Date("2024-09-24T12:00:00Z");
+      expect(
+        render(
+          <Localize
+            value={date}
+            timezone="America/New_York"
+            date={{
+              hour: "2-digit",
+              minute: "2-digit",
+              hour12: true,
+              timeZoneName: "short",
+            }}
+          />,
+        ),
+      ).toContain("EDT");
+    });
+
+    it("should format Date with timezone using dayjs format", () => {
+      const { render } = setup();
+      const date = new Date("2024-09-24T12:00:00Z");
+      const formatted = render(
+        <Localize
+          value={date}
+          timezone="America/New_York"
+          date="YYYY-MM-DD HH:mm"
+        />,
+      );
+      expect(formatted).toBe("2024-09-24 08:00");
+    });
+
+    it("should format DateTime with timezone using dayjs format", () => {
+      const { render, dateTime } = setup();
+      const date = dateTime.utc("2024-09-24T12:00:00Z");
+      const formatted = render(
+        <Localize
+          value={date}
+          timezone="Europe/Paris"
+          date="YYYY-MM-DD HH:mm"
+        />,
+      );
+      expect(formatted).toBe("2024-09-24 14:00");
+    });
+
+    it("should format DateTime with timezone and Intl options", () => {
+      const { render, dateTime } = setup();
+      const date = dateTime.utc("2024-09-24T12:00:00Z");
+      const formatted = render(
+        <Localize
+          value={date}
+          timezone="Asia/Tokyo"
+          date={{
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: false,
+          }}
+        />,
+      );
+      expect(formatted).toBe("21:00");
+    });
+
+    it("should format DateTime with timezone using LLL format", () => {
+      const { render, dateTime } = setup();
+      const date = dateTime.utc("2024-09-24T12:00:00Z");
+      const formatted = render(
+        <Localize value={date} timezone="America/Los_Angeles" date="LLL" />,
+      );
+      expect(formatted).toContain("September");
+      expect(formatted).toContain("2024");
+      expect(formatted).toContain("5:00 AM");
+    });
+
+    it("should respect locale and timezone together", () => {
+      const { render, i18n, dateTime } = setup();
+      const date = dateTime.utc("2024-09-24T12:00:00Z");
+      i18n.setLang("fr");
+      const formatted = render(
+        <Localize value={date} timezone="Europe/Paris" date="LLL" />,
+      );
+      console.log(formatted);
+      expect(formatted).toContain("septembre");
+      expect(formatted).toContain("2024");
+      expect(formatted).toContain("14:00");
+    });
+  });
+});