@alepha/react 0.14.2 → 0.14.4

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/router/__tests__/page-head-browser.browser.spec.ts

@@ -0,0 +1,91 @@
+import { AlephaReactHead, BrowserHeadProvider, type Head } from "@alepha/react/head";
+import { Alepha } from "alepha";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { $page } from "../index.browser.ts";
+
+describe("$page head integration (browser)", () => {
+  let provider: BrowserHeadProvider;
+
+  class TestApp {
+    simplePage = $page({
+      path: "/",
+      head: {
+        title: "Simple Page",
+        bodyAttributes: { class: "simple-page" },
+      },
+      component: () => "Simple content",
+    });
+
+    complexPage = $page({
+      path: "/complex",
+      head: {
+        title: "Complex Page",
+        htmlAttributes: {
+          lang: "en",
+          "data-theme": "dark",
+        },
+        bodyAttributes: {
+          class: "complex-page",
+          style: "background: black;",
+        },
+        meta: [
+          { name: "description", content: "Complex test page" },
+          {
+            name: "viewport",
+            content: "width=device-width, initial-scale=1",
+          },
+        ],
+      },
+      component: () => "Complex content",
+    });
+  }
+
+  beforeEach(() => {
+    // Reset document state
+    document.title = "";
+    document.head.innerHTML = "";
+    document.body.removeAttribute("class");
+    document.body.removeAttribute("style");
+    document.documentElement.removeAttribute("lang");
+    document.documentElement.removeAttribute("class");
+    document.documentElement.removeAttribute("data-theme");
+  });
+
+  afterEach(() => {
+    document.body.querySelector("#root")?.remove();
+  });
+
+  it("should render simple page head configuration", async () => {
+    const alepha = Alepha.create().with(AlephaReactHead).with(TestApp);
+    await alepha.start();
+
+    expect(document.title).toBe("Simple Page");
+    expect(document.body.getAttribute("class")).toBe("simple-page");
+  });
+
+  it("should get current head state and match page configuration", async () => {
+    const alepha = Alepha.create().with(AlephaReactHead);
+    provider = alepha.inject(BrowserHeadProvider);
+    const app = alepha.inject(TestApp);
+    await alepha.start();
+
+    // Apply complex page head
+    const headConfig = app.complexPage.options.head as Head;
+    provider.renderHead(document, headConfig);
+
+    // Get current head state
+    const currentHead = provider.getHead(document);
+
+    expect(currentHead.title).toBe(headConfig.title);
+    expect(currentHead.htmlAttributes?.lang).toBe(
+      headConfig.htmlAttributes?.lang,
+    );
+    expect(currentHead.bodyAttributes?.class).toBe(
+      headConfig.bodyAttributes?.class,
+    );
+    expect(currentHead.meta).toContainEqual({
+      name: "description",
+      content: "Complex test page",
+    });
+  });
+});

package/src/router/__tests__/page-head.spec.ts

@@ -0,0 +1,44 @@
+import { Alepha } from "alepha";
+import { describe, it } from "vitest";
+import { $head, AlephaReactHead } from "@alepha/react/head";
+import { $page } from "../index.ts";
+
+class App {
+  head = $head({
+    htmlAttributes: { lang: "fr", "x-data-custom": "ok" },
+  });
+
+  hello = $page({
+    head: {
+      title: "Hello World",
+      bodyAttributes: { class: "hello-world" },
+      meta: [
+        { name: "description", content: "This is a test page." },
+        { name: "keywords", content: "test, alepha, react" },
+      ],
+    },
+    component: () => "",
+  });
+}
+
+const alepha = Alepha.create().with(AlephaReactHead);
+const a = alepha.inject(App);
+
+describe("PageHead", () => {
+  it("should render page with custom head and body attributes", async ({
+    expect,
+  }) => {
+    const result = await a.hello.render({ html: true, hydration: false });
+
+    // Check key parts of the HTML output (streaming adds newlines between sections)
+    expect(result.html).toContain('<!DOCTYPE html>');
+    expect(result.html).toContain('<html lang="fr" x-data-custom="ok">');
+    expect(result.html).toContain('<title>Hello World</title>');
+    expect(result.html).toContain('<meta name="description" content="This is a test page.">');
+    expect(result.html).toContain('<meta name="keywords" content="test, alepha, react">');
+    expect(result.html).toContain('<body class="hello-world">');
+    expect(result.html).toContain('<div id="root">');
+    expect(result.html).toContain('</body>');
+    expect(result.html).toContain('</html>');
+  });
+});

package/src/router/__tests__/seo-head.spec.ts

@@ -0,0 +1,121 @@
+import { Alepha } from "alepha";
+import { describe, it } from "vitest";
+import { $head, AlephaReactHead } from "@alepha/react/head";
+import { $page } from "../index.ts";
+
+class App {
+  head = $head({
+    title: "Alepha Framework",
+    description: "TypeScript framework made easy",
+    image: "https://alepha.dev/og-image.png",
+    url: "https://alepha.dev/",
+    siteName: "Alepha",
+    locale: "en_US",
+    type: "website",
+    imageWidth: 1200,
+    imageHeight: 630,
+    twitter: {
+      card: "summary_large_image",
+    },
+  });
+
+  home = $page({
+    component: () => "Home",
+  });
+}
+
+const alepha = Alepha.create().with(AlephaReactHead);
+const a = alepha.inject(App);
+
+describe("SEO Head", () => {
+  it("should render page with SEO meta tags", async ({ expect }) => {
+    const result = await a.home.render({ html: true, hydration: false });
+
+    // Should include description
+    expect(result.html).toContain(
+      '<meta name="description" content="TypeScript framework made easy">',
+    );
+
+    // Should include OpenGraph tags with property attribute
+    expect(result.html).toContain(
+      '<meta property="og:title" content="Alepha Framework">',
+    );
+    expect(result.html).toContain(
+      '<meta property="og:description" content="TypeScript framework made easy">',
+    );
+    expect(result.html).toContain(
+      '<meta property="og:image" content="https://alepha.dev/og-image.png">',
+    );
+    expect(result.html).toContain(
+      '<meta property="og:url" content="https://alepha.dev/">',
+    );
+    expect(result.html).toContain('<meta property="og:type" content="website">');
+    expect(result.html).toContain(
+      '<meta property="og:site_name" content="Alepha">',
+    );
+    expect(result.html).toContain(
+      '<meta property="og:locale" content="en_US">',
+    );
+    expect(result.html).toContain(
+      '<meta property="og:image:width" content="1200">',
+    );
+    expect(result.html).toContain(
+      '<meta property="og:image:height" content="630">',
+    );
+
+    // Should include Twitter Card tags with name attribute
+    expect(result.html).toContain(
+      '<meta name="twitter:card" content="summary_large_image">',
+    );
+    expect(result.html).toContain(
+      '<meta name="twitter:title" content="Alepha Framework">',
+    );
+    expect(result.html).toContain(
+      '<meta name="twitter:description" content="TypeScript framework made easy">',
+    );
+    expect(result.html).toContain(
+      '<meta name="twitter:image" content="https://alepha.dev/og-image.png">',
+    );
+
+    // Should include canonical link
+    expect(result.html).toContain(
+      '<link rel="canonical" href="https://alepha.dev/">',
+    );
+  });
+});
+
+class AppWithPageSeo {
+  head = $head({
+    title: "My Site",
+    titleSeparator: " | ",
+  });
+
+  blog = $page({
+    path: "/blog",
+    head: {
+      title: "Blog",
+      description: "Read our latest articles",
+      image: "https://example.com/blog-og.png",
+      type: "article",
+    },
+    component: () => "Blog",
+  });
+}
+
+const alepha2 = Alepha.create().with(AlephaReactHead);
+const app2 = alepha2.inject(AppWithPageSeo);
+
+describe("SEO Head on Page", () => {
+  it("should render page-level SEO", async ({ expect }) => {
+    const result = await app2.blog.render({ html: true, hydration: false });
+
+    expect(result.html).toContain("<title>Blog | My Site</title>");
+    expect(result.html).toContain(
+      '<meta name="description" content="Read our latest articles">',
+    );
+    expect(result.html).toContain('<meta property="og:type" content="article">');
+    expect(result.html).toContain(
+      '<meta property="og:image" content="https://example.com/blog-og.png">',
+    );
+  });
+});

package/src/router/atoms/ssrManifestAtom.ts

@@ -0,0 +1,60 @@
+import { $atom, t } from "alepha";
+
+/**
+ * Schema for the SSR manifest atom.
+ */
+export const ssrManifestAtomSchema = t.object({
+  /**
+   * Preload manifest mapping short keys to source paths.
+   * Generated by viteAlephaSsrPreload plugin at build time.
+   */
+  preload: t.optional(t.record(t.string(), t.string())),
+
+  /**
+   * SSR manifest mapping source files to their required chunks.
+   */
+  ssr: t.optional(t.record(t.string(), t.array(t.string()))),
+
+  /**
+   * Client manifest mapping source files to their output information.
+   */
+  client: t.optional(
+    t.record(
+      t.string(),
+      t.object({
+        file: t.string(),
+        src: t.optional(t.string()),
+        isEntry: t.optional(t.boolean()),
+        isDynamicEntry: t.optional(t.boolean()),
+        imports: t.optional(t.array(t.string())),
+        dynamicImports: t.optional(t.array(t.string())),
+        css: t.optional(t.array(t.string())),
+        assets: t.optional(t.array(t.string())),
+      }),
+    ),
+  ),
+});
+
+/**
+ * Type for the SSR manifest schema.
+ */
+export type SsrManifestAtomSchema = typeof ssrManifestAtomSchema;
+
+/**
+ * SSR Manifest atom containing all manifest data for SSR module preloading.
+ *
+ * This atom is populated at build time by embedding manifest data into the
+ * generated index.js. This approach is optimal for serverless deployments
+ * as it eliminates filesystem reads at runtime.
+ *
+ * The manifest includes:
+ * - preload: Maps short hash keys to source paths (from viteAlephaSsrPreload)
+ * - ssr: Maps source files to their required chunks
+ * - client: Maps source files to their output info including imports/css
+ */
+export const ssrManifestAtom = $atom({
+  name: "alepha.react.ssr.manifest",
+  description: "SSR manifest for module preloading",
+  schema: ssrManifestAtomSchema,
+  default: {},
+});