npm - @alepha/react - Versions diffs - 0.14.2 → 0.14.4 - Mend

@alepha/react 0.14.2 → 0.14.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/dist/auth/index.browser.js +29 -14
package/dist/auth/index.browser.js.map +1 -1
package/dist/auth/index.js +960 -195
package/dist/auth/index.js.map +1 -1
package/dist/core/index.d.ts +4 -0
package/dist/core/index.d.ts.map +1 -1
package/dist/core/index.js +7 -4
package/dist/core/index.js.map +1 -1
package/dist/head/index.browser.js +59 -19
package/dist/head/index.browser.js.map +1 -1
package/dist/head/index.d.ts +99 -560
package/dist/head/index.d.ts.map +1 -1
package/dist/head/index.js +92 -87
package/dist/head/index.js.map +1 -1
package/dist/router/index.browser.js +30 -15
package/dist/router/index.browser.js.map +1 -1
package/dist/router/index.d.ts +616 -192
package/dist/router/index.d.ts.map +1 -1
package/dist/router/index.js +961 -196
package/dist/router/index.js.map +1 -1
package/package.json +4 -4
package/src/auth/__tests__/$auth.spec.ts +188 -0
package/src/core/__tests__/Router.spec.tsx +169 -0
package/src/core/hooks/useAction.browser.spec.tsx +569 -0
package/src/core/hooks/useAction.ts +11 -0
package/src/form/hooks/useForm.browser.spec.tsx +366 -0
package/src/head/helpers/SeoExpander.spec.ts +203 -0
package/src/head/hooks/useHead.spec.tsx +288 -0
package/src/head/index.ts +11 -28
package/src/head/providers/BrowserHeadProvider.browser.spec.ts +196 -0
package/src/head/providers/BrowserHeadProvider.ts +25 -19
package/src/head/providers/HeadProvider.ts +76 -10
package/src/head/providers/ServerHeadProvider.ts +22 -138
package/src/i18n/__tests__/integration.spec.tsx +239 -0
package/src/i18n/components/Localize.spec.tsx +357 -0
package/src/i18n/hooks/useI18n.browser.spec.tsx +438 -0
package/src/i18n/providers/I18nProvider.spec.ts +389 -0
package/src/router/__tests__/page-head-browser.browser.spec.ts +91 -0
package/src/router/__tests__/page-head.spec.ts +44 -0
package/src/router/__tests__/seo-head.spec.ts +121 -0
package/src/router/atoms/ssrManifestAtom.ts +60 -0
package/src/router/constants/PAGE_PRELOAD_KEY.ts +6 -0
package/src/router/errors/Redirection.ts +1 -1
package/src/router/index.shared.ts +1 -0
package/src/router/index.ts +16 -2
package/src/router/primitives/$page.browser.spec.tsx +702 -0
package/src/router/primitives/$page.spec.tsx +702 -0
package/src/router/primitives/$page.ts +46 -10
package/src/router/providers/ReactBrowserProvider.ts +14 -29
package/src/router/providers/ReactBrowserRouterProvider.ts +5 -0
package/src/router/providers/ReactPageProvider.ts +11 -4
package/src/router/providers/ReactServerProvider.spec.tsx +316 -0
package/src/router/providers/ReactServerProvider.ts +331 -315
package/src/router/providers/ReactServerTemplateProvider.ts +775 -0
package/src/router/providers/SSRManifestProvider.ts +365 -0
package/src/router/services/ReactPageServerService.ts +5 -3
package/src/router/services/ReactRouter.ts +3 -3

package/src/head/providers/HeadProvider.ts CHANGED Viewed

@@ -1,14 +1,54 @@
-import type { PageRoute, ReactRouterState } from "@alepha/react/router";
 import { $inject } from "alepha";
+import { $logger } from "alepha/logger";
 import { SeoExpander } from "../helpers/SeoExpander.ts";
 import type { Head } from "../interfaces/Head.ts";
+/**
+ * Provides methods to fill and merge head information into the application state.
+ *
+ * Used both on server and client side to manage document head.
+ *
+ * @see {@link SeoExpander}
+ * @see {@link ServerHeadProvider}
+ * @see {@link BrowserHeadProvider}
+ */
 export class HeadProvider {
+  protected readonly log = $logger();
   protected readonly seoExpander = $inject(SeoExpander);
   public global?: Array<Head | (() => Head)> = [];
-  public fillHead(state: ReactRouterState) {
+  /**
+   * Track if we've warned about page-level htmlAttributes to avoid spam.
+   */
+  protected warnedAboutHtmlAttributes = false;
+  /**
+   * Resolve global head configuration (from $head primitives only).
+   *
+   * This is used to get htmlAttributes early, before page loaders run.
+   * Only htmlAttributes from global $head are allowed; page-level htmlAttributes
+   * are ignored for early streaming optimization.
+   *
+   * @returns Merged global head with htmlAttributes
+   */
+  public resolveGlobalHead(): Head {
+    const head: Head = {};
+    for (const h of this.global ?? []) {
+      const resolved = typeof h === "function" ? h() : h;
+      if (resolved.htmlAttributes) {
+        head.htmlAttributes = {
+          ...head.htmlAttributes,
+          ...resolved.htmlAttributes,
+        };
+      }
+    }
+    return head;
+  }
+  public fillHead(state: HeadState) {
     state.head = {
       ...state.head,
     };
@@ -25,7 +65,7 @@ export class HeadProvider {
     }
   }
-  protected mergeHead(state: ReactRouterState, head: Head): void {
+  protected mergeHead(state: HeadState, head: Head): void {
     // Expand SEO fields into meta tags
     const { meta, link } = this.seoExpander.expand(head);
     state.head = {
@@ -38,8 +78,8 @@ export class HeadProvider {
   }
   protected fillHeadByPage(
-    page: PageRoute,
-    state: ReactRouterState,
+    page: HeadRoute,
+    state: HeadState,
     props: Record<string, any>,
   ): void {
     if (!page.head) {
@@ -70,11 +110,14 @@ export class HeadProvider {
       state.head.titleSeparator = head.titleSeparator;
     }
-    if (head.htmlAttributes) {
-      state.head.htmlAttributes = {
-        ...state.head.htmlAttributes,
-        ...head.htmlAttributes,
-      };
+    // htmlAttributes from pages are ignored for early streaming optimization.
+    // Only global $head can set htmlAttributes.
+    if (head.htmlAttributes && !this.warnedAboutHtmlAttributes) {
+      this.warnedAboutHtmlAttributes = true;
+      this.log.warn(
+        "Page-level htmlAttributes are ignored. Use global $head() for htmlAttributes instead, " +
+          "as they are sent before page loaders run for early streaming optimization.",
+      );
     }
     if (head.bodyAttributes) {
@@ -97,3 +140,26 @@ export class HeadProvider {
     }
   }
 }
+// ---------------------------------------------------------------------------------------------------------------------
+/**
+ * Minimal route interface for head processing.
+ * Avoids circular dependency with @alepha/react/router.
+ */
+interface HeadRoute {
+  head?: Head | ((props: Record<string, any>, previous?: Head) => Head);
+}
+/**
+ * Minimal state interface for head processing.
+ * Avoids circular dependency with @alepha/react/router.
+ */
+interface HeadState {
+  head: Head;
+  layers: Array<{
+    route?: HeadRoute;
+    props?: Record<string, any>;
+    error?: Error;
+  }>;
+}

package/src/head/providers/ServerHeadProvider.ts CHANGED Viewed

@@ -1,147 +1,31 @@
-import { $hook, $inject } from "alepha";
-import { ServerTimingProvider } from "alepha/server";
-import type { HeadMeta, SimpleHead } from "../interfaces/Head.ts";
+import { $inject } from "alepha";
+import type { Head, SimpleHead } from "../interfaces/Head.ts";
 import { HeadProvider } from "./HeadProvider.ts";
+/**
+ * Server-side head provider that fills head content from route configurations.
+ *
+ * Used by ReactServerProvider to collect title, meta tags, and other head
+ * elements which are then rendered by ReactServerTemplateProvider.
+ */
 export class ServerHeadProvider {
   protected readonly headProvider = $inject(HeadProvider);
-  protected readonly serverTimingProvider = $inject(ServerTimingProvider);
-  protected readonly onServerRenderEnd = $hook({
-    on: "react:server:render:end",
-    handler: async (ev) => {
-      this.serverTimingProvider.beginTiming("renderHead");
-      this.headProvider.fillHead(ev.state);
-      if (ev.state.head) {
-        ev.html = this.renderHead(ev.html, ev.state.head);
-      }
-      this.serverTimingProvider.endTiming("renderHead");
-    },
-  });
-  public renderHead(template: string, head: SimpleHead): string {
-    let result = template;
-    // Inject htmlAttributes
-    const htmlAttributes = head.htmlAttributes;
-    if (htmlAttributes) {
-      result = result.replace(
-        /<html([^>]*)>/i,
-        (_, existingAttrs) =>
-          `<html${this.mergeAttributes(existingAttrs, htmlAttributes)}>`,
-      );
-    }
-    // Inject bodyAttributes
-    const bodyAttributes = head.bodyAttributes;
-    if (bodyAttributes) {
-      result = result.replace(
-        /<body([^>]*)>/i,
-        (_, existingAttrs) =>
-          `<body${this.mergeAttributes(existingAttrs, bodyAttributes)}>`,
-      );
-    }
-    // Build head content
-    let headContent = "";
-    const title = head.title;
-    if (title) {
-      if (template.includes("<title>")) {
-        result = result.replace(
-          /<title>(.*?)<\/title>/i,
-          () => `<title>${this.escapeHtml(title)}</title>`,
-        );
-      } else {
-        headContent += `<title>${this.escapeHtml(title)}</title>\n`;
-      }
-    }
-    if (head.meta) {
-      for (const meta of head.meta) {
-        headContent += this.renderMetaTag(meta);
-      }
-    }
-    if (head.link) {
-      for (const link of head.link) {
-        headContent += `<link rel="${this.escapeHtml(link.rel)}" href="${this.escapeHtml(link.href)}">\n`;
-      }
-    }
-    if (head.script) {
-      for (const script of head.script) {
-        headContent += this.renderScriptTag(script);
-      }
-    }
-    // Inject into <head>...</head>
-    result = result.replace(
-      /<head([^>]*)>(.*?)<\/head>/is,
-      (_, existingAttrs, existingHead) =>
-        `<head${existingAttrs}>${existingHead}${headContent}</head>`,
-    );
-    return result.trim();
-  }
-  protected mergeAttributes(
-    existing: string,
-    attrs: Record<string, string>,
-  ): string {
-    const existingAttrs = this.parseAttributes(existing);
-    const merged = { ...existingAttrs, ...attrs };
-    return Object.entries(merged)
-      .map(([k, v]) => ` ${k}="${this.escapeHtml(v)}"`)
-      .join("");
-  }
-  protected parseAttributes(attrStr: string): Record<string, string> {
-    attrStr = attrStr.replaceAll("'", '"');
-    const attrs: Record<string, string> = {};
-    const attrRegex = /([^\s=]+)(?:="([^"]*)")?/g;
-    let match: RegExpExecArray | null = attrRegex.exec(attrStr);
-    while (match) {
-      attrs[match[1]] = match[2] ?? "";
-      match = attrRegex.exec(attrStr);
-    }
-    return attrs;
-  }
-  protected escapeHtml(str: string): string {
-    return str
-      .replace(/&/g, "&amp;")
-      .replace(/</g, "&lt;")
-      .replace(/>/g, "&gt;")
-      .replace(/"/g, "&quot;")
-      .replace(/'/g, "&#039;");
-  }
-  protected renderMetaTag(meta: HeadMeta): string {
-    // OpenGraph tags use property attribute
-    if (meta.property) {
-      return `<meta property="${this.escapeHtml(meta.property)}" content="${this.escapeHtml(meta.content)}">\n`;
-    }
-    // Standard meta tags use name attribute
-    if (meta.name) {
-      return `<meta name="${this.escapeHtml(meta.name)}" content="${this.escapeHtml(meta.content)}">\n`;
-    }
-    return "";
+  /**
+   * Resolve global head configuration (htmlAttributes only).
+   *
+   * Used for early streaming optimization - htmlAttributes can be sent
+   * before page loaders run since they come from global $head only.
+   */
+  public resolveGlobalHead(): Head {
+    return this.headProvider.resolveGlobalHead();
   }
-  protected renderScriptTag(script: Record<string, string | boolean>): string {
-    const attrs = Object.entries(script)
-      .filter(([, value]) => value !== false)
-      .map(([key, value]) => {
-        // Boolean attributes - render without value if true
-        if (value === true) {
-          return key;
-        }
-        return `${key}="${this.escapeHtml(String(value))}"`;
-      })
-      .join(" ");
-    return `<script ${attrs}></script>\n`;
+  /**
+   * Fill head state from route configurations.
+   * Delegates to HeadProvider to merge head data from all route layers.
+   */
+  public fillHead(state: { head: SimpleHead; layers: Array<any> }): void {
+    this.headProvider.fillHead(state as any);
   }
 }

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

@@ -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");
+  });
+});