npm - @alepha/react - Versions diffs - 0.14.1 → 0.14.3 - Mend

@alepha/react 0.14.1 → 0.14.3

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 (86) hide show

package/dist/auth/index.browser.js +1488 -4
package/dist/auth/index.browser.js.map +1 -1
package/dist/auth/index.d.ts +2 -2
package/dist/auth/index.js +1827 -4
package/dist/auth/index.js.map +1 -1
package/dist/core/index.d.ts +58 -937
package/dist/core/index.d.ts.map +1 -1
package/dist/core/index.js +139 -2014
package/dist/core/index.js.map +1 -1
package/dist/form/index.d.ts.map +1 -1
package/dist/form/index.js +6 -1
package/dist/form/index.js.map +1 -1
package/dist/head/index.browser.js +3 -1
package/dist/head/index.browser.js.map +1 -1
package/dist/head/index.d.ts +552 -8
package/dist/head/index.d.ts.map +1 -1
package/dist/head/index.js +17 -2
package/dist/head/index.js.map +1 -1
package/dist/{core → router}/index.browser.js +126 -516
package/dist/router/index.browser.js.map +1 -0
package/dist/router/index.d.ts +1334 -0
package/dist/router/index.d.ts.map +1 -0
package/dist/router/index.js +1939 -0
package/dist/router/index.js.map +1 -0
package/package.json +12 -6
package/src/auth/__tests__/$auth.spec.ts +188 -0
package/src/auth/index.ts +1 -1
package/src/auth/services/ReactAuth.ts +1 -1
package/src/core/__tests__/Router.spec.tsx +169 -0
package/src/core/components/ClientOnly.tsx +14 -0
package/src/core/components/ErrorBoundary.tsx +3 -2
package/src/core/contexts/AlephaContext.ts +3 -0
package/src/core/contexts/AlephaProvider.tsx +2 -1
package/src/core/hooks/useAction.browser.spec.tsx +569 -0
package/src/core/hooks/useAction.ts +11 -0
package/src/core/index.ts +13 -102
package/src/form/hooks/useForm.browser.spec.tsx +366 -0
package/src/form/services/FormModel.ts +5 -0
package/src/head/__tests__/expandSeo.spec.ts +203 -0
package/src/head/__tests__/page-head.spec.ts +39 -0
package/src/head/__tests__/seo-head.spec.ts +121 -0
package/src/head/hooks/useHead.spec.tsx +288 -0
package/src/head/index.ts +18 -8
package/src/head/interfaces/Head.ts +3 -0
package/src/head/providers/BrowserHeadProvider.browser.spec.ts +271 -0
package/src/head/providers/HeadProvider.ts +6 -1
package/src/head/providers/ServerHeadProvider.spec.ts +163 -0
package/src/head/providers/ServerHeadProvider.ts +20 -0
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/{core → router}/components/ErrorViewer.tsx +2 -0
package/src/router/components/Link.tsx +21 -0
package/src/{core → router}/components/NestedView.tsx +3 -5
package/src/router/components/NotFound.tsx +30 -0
package/src/router/errors/Redirection.ts +28 -0
package/src/{core → router}/hooks/useActive.ts +6 -2
package/src/{core → router}/hooks/useQueryParams.ts +2 -2
package/src/{core → router}/hooks/useRouter.ts +1 -1
package/src/{core → router}/hooks/useRouterState.ts +1 -1
package/src/{core → router}/index.browser.ts +14 -12
package/src/{core/index.shared-router.ts → router/index.shared.ts} +6 -3
package/src/router/index.ts +125 -0
package/src/router/primitives/$page.browser.spec.tsx +702 -0
package/src/router/primitives/$page.spec.tsx +702 -0
package/src/{core → router}/primitives/$page.ts +1 -1
package/src/{core → router}/providers/ReactBrowserProvider.ts +3 -13
package/src/{core → router}/providers/ReactBrowserRendererProvider.ts +3 -0
package/src/{core → router}/providers/ReactBrowserRouterProvider.ts +3 -0
package/src/{core → router}/providers/ReactPageProvider.ts +5 -3
package/src/router/providers/ReactServerProvider.spec.tsx +316 -0
package/src/{core → router}/providers/ReactServerProvider.ts +12 -30
package/src/{core → router}/services/ReactPageServerService.ts +3 -0
package/src/{core → router}/services/ReactPageService.ts +5 -5
package/src/{core → router}/services/ReactRouter.ts +26 -5
package/dist/core/index.browser.js.map +0 -1
package/dist/core/index.native.js +0 -403
package/dist/core/index.native.js.map +0 -1
package/src/core/components/Link.tsx +0 -18
package/src/core/components/NotFound.tsx +0 -27
package/src/core/errors/Redirection.ts +0 -13
package/src/core/hooks/useSchema.ts +0 -88
package/src/core/index.native.ts +0 -21
package/src/core/index.shared.ts +0 -9
/package/src/{core → router}/contexts/RouterLayerContext.ts +0 -0

package/src/head/index.ts CHANGED Viewed

@@ -1,14 +1,15 @@
-import {
-  AlephaReact,
-  type PageConfigSchema,
-  type TPropsDefault,
-  type TPropsParentDefault,
-} from "@alepha/react";
+import { AlephaReact } from "@alepha/react";
+import type {
+  PageConfigSchema,
+  TPropsDefault,
+  TPropsParentDefault,
+} from "@alepha/react/router";
 import { $module } from "alepha";
 import { $head } from "./primitives/$head.ts";
 import type { Head } from "./interfaces/Head.ts";
 import { ServerHeadProvider } from "./providers/ServerHeadProvider.ts";
 import { HeadProvider } from "./providers/HeadProvider.ts";
+import { SeoExpander } from "./helpers/SeoExpander.ts";
 // ---------------------------------------------------------------------------------------------------------------------
@@ -20,7 +21,8 @@ export * from "./providers/ServerHeadProvider.ts";
 // ---------------------------------------------------------------------------------------------------------------------
-declare module "@alepha/react" {
+// Augment PagePrimitiveOptions in router module
+declare module "@alepha/react/router" {
   interface PagePrimitiveOptions<
     TConfig extends PageConfigSchema = PageConfigSchema,
     TProps extends object = TPropsDefault,
@@ -28,7 +30,10 @@ declare module "@alepha/react" {
   > {
     head?: Head | ((props: TProps, previous?: Head) => Head);
   }
+}
+// Augment ReactRouterState in router module
+declare module "@alepha/react/router" {
   interface ReactRouterState {
     head: Head;
   }
@@ -39,11 +44,16 @@ declare module "@alepha/react" {
 /**
  * Fill `<head>` server & client side.
  *
+ * Generate SEO-friendly meta tags and titles for your React application using AlephaReactHead module.
+ *
+ * This module provides services and primitives to manage the document head both on the server and client side,
+ * ensuring that your application is optimized for search engines and social media sharing.
+ *
  * @see {@link ServerHeadProvider}
  * @module alepha.react.head
  */
 export const AlephaReactHead = $module({
   name: "alepha.react.head",
   primitives: [$head],
-  services: [AlephaReact, ServerHeadProvider, HeadProvider],
+  services: [AlephaReact, ServerHeadProvider, HeadProvider, SeoExpander],
 });

package/src/head/interfaces/Head.ts CHANGED Viewed

@@ -73,7 +73,10 @@ export interface SimpleHead {
   bodyAttributes?: Record<string, string>;
   /** Meta tags - supports both name and property attributes */
   meta?: Array<HeadMeta>;
+  /** Link tags (e.g., stylesheets, preload, canonical) */
   link?: Array<{ rel: string; href: string }>;
+  /** Script tags - any valid script attributes (src, type, async, defer, etc.) */
+  script?: Array<Record<string, string | boolean>>;
 }
 export interface HeadMeta {

package/src/head/providers/BrowserHeadProvider.browser.spec.ts ADDED Viewed

@@ -0,0 +1,271 @@
+import { $page } from "@alepha/react/router";
+import { Alepha } from "alepha";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { AlephaReactHead } from "../index.browser.ts";
+import type { Head } from "../interfaces/Head.ts";
+import { BrowserHeadProvider } from "./BrowserHeadProvider.ts";
+describe("BrowserHeadProvider", () => {
+  let alepha: Alepha;
+  let provider: BrowserHeadProvider;
+  beforeEach(async () => {
+    alepha = Alepha.create();
+    provider = alepha.inject(BrowserHeadProvider);
+    // Reset document state
+    document.title = "";
+    document.head.innerHTML = "";
+    document.body.removeAttribute("class");
+    document.body.removeAttribute("style");
+    document.documentElement.removeAttribute("lang");
+    document.documentElement.removeAttribute("class");
+  });
+  describe("getHead", () => {
+    it("should return current document head state", () => {
+      document.title = "Test Title";
+      document.body.setAttribute("class", "test-class");
+      document.documentElement.setAttribute("lang", "en");
+      const meta = document.createElement("meta");
+      meta.setAttribute("name", "description");
+      meta.setAttribute("content", "Test description");
+      document.head.appendChild(meta);
+      const head = provider.getHead(document);
+      expect(head.title).toBe("Test Title");
+      expect(head.bodyAttributes?.class).toBe("test-class");
+      expect(head.htmlAttributes?.lang).toBe("en");
+      expect(head.meta).toContainEqual({
+        name: "description",
+        content: "Test description",
+      });
+    });
+    it("should handle empty document state", () => {
+      const head = provider.getHead(document);
+      expect(head.title).toBe("");
+      expect(head.bodyAttributes).toEqual({});
+      expect(head.htmlAttributes).toEqual({});
+      expect(head.meta).toEqual([]);
+    });
+  });
+  describe("renderHead", () => {
+    it("should set document title", () => {
+      const head: Head = { title: "New Title" };
+      provider.renderHead(document, head);
+      expect(document.title).toBe("New Title");
+    });
+    it("should set body attributes", () => {
+      const head: Head = {
+        bodyAttributes: {
+          class: "new-class",
+          style: "background: blue;",
+        },
+      };
+      provider.renderHead(document, head);
+      expect(document.body.getAttribute("class")).toBe("new-class");
+      expect(document.body.getAttribute("style")).toBe("background: blue;");
+    });
+    it("should remove body attributes when value is falsy", () => {
+      document.body.setAttribute("class", "old-class");
+      const head: Head = {
+        bodyAttributes: {
+          class: "",
+        },
+      };
+      provider.renderHead(document, head);
+      expect(document.body.hasAttribute("class")).toBe(false);
+    });
+    it("should set html attributes", () => {
+      const head: Head = {
+        htmlAttributes: {
+          lang: "fr",
+          dir: "ltr",
+        },
+      };
+      provider.renderHead(document, head);
+      expect(document.documentElement.getAttribute("lang")).toBe("fr");
+      expect(document.documentElement.getAttribute("dir")).toBe("ltr");
+    });
+    it("should remove html attributes when value is falsy", () => {
+      document.documentElement.setAttribute("lang", "en");
+      const head: Head = {
+        htmlAttributes: {
+          lang: "",
+        },
+      };
+      provider.renderHead(document, head);
+      expect(document.documentElement.hasAttribute("lang")).toBe(false);
+    });
+    it("should create new meta tags", () => {
+      const head: Head = {
+        meta: [
+          { name: "description", content: "Test description" },
+          { name: "keywords", content: "test, browser" },
+        ],
+      };
+      provider.renderHead(document, head);
+      const descriptionMeta = document.querySelector(
+        'meta[name="description"]',
+      );
+      const keywordsMeta = document.querySelector('meta[name="keywords"]');
+      expect(descriptionMeta?.getAttribute("content")).toBe("Test description");
+      expect(keywordsMeta?.getAttribute("content")).toBe("test, browser");
+    });
+    it("should update existing meta tags", () => {
+      // Pre-populate with existing meta tag
+      const existingMeta = document.createElement("meta");
+      existingMeta.setAttribute("name", "description");
+      existingMeta.setAttribute("content", "Old description");
+      document.head.appendChild(existingMeta);
+      const head: Head = {
+        meta: [{ name: "description", content: "New description" }],
+      };
+      provider.renderHead(document, head);
+      const descriptionMeta = document.querySelector(
+        'meta[name="description"]',
+      );
+      expect(descriptionMeta?.getAttribute("content")).toBe("New description");
+      expect(
+        document.querySelectorAll('meta[name="description"]'),
+      ).toHaveLength(1);
+    });
+    it("should handle complete head object", () => {
+      const head: Head = {
+        title: "Complete Test",
+        htmlAttributes: {
+          lang: "es",
+          class: "theme-dark",
+        },
+        bodyAttributes: {
+          class: "page-test",
+          "data-theme": "dark",
+        },
+        meta: [
+          { name: "description", content: "Complete test page" },
+          { name: "author", content: "Test Author" },
+        ],
+      };
+      provider.renderHead(document, head);
+      expect(document.title).toBe("Complete Test");
+      expect(document.documentElement.getAttribute("lang")).toBe("es");
+      expect(document.documentElement.getAttribute("class")).toBe("theme-dark");
+      expect(document.body.getAttribute("class")).toBe("page-test");
+      expect(document.body.getAttribute("data-theme")).toBe("dark");
+      const descriptionMeta = document.querySelector(
+        'meta[name="description"]',
+      );
+      const authorMeta = document.querySelector('meta[name="author"]');
+      expect(descriptionMeta?.getAttribute("content")).toBe(
+        "Complete test page",
+      );
+      expect(authorMeta?.getAttribute("content")).toBe("Test Author");
+    });
+  });
+  describe("$page integration", () => {
+    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",
+      });
+    }
+    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);
+      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/head/providers/HeadProvider.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { PageRoute, ReactRouterState } from "@alepha/react";
+import type { PageRoute, ReactRouterState } from "@alepha/react/router";
 import { $inject } from "alepha";
 import { SeoExpander } from "../helpers/SeoExpander.ts";
 import type { Head } from "../interfaces/Head.ts";
@@ -33,6 +33,7 @@ export class HeadProvider {
       ...head,
       meta: [...(state.head.meta ?? []), ...meta, ...(head.meta ?? [])],
       link: [...(state.head.link ?? []), ...link, ...(head.link ?? [])],
+      script: [...(state.head.script ?? []), ...(head.script ?? [])],
     };
   }
@@ -90,5 +91,9 @@ export class HeadProvider {
     if (head.link) {
       state.head.link = [...(state.head.link ?? []), ...(head.link ?? [])];
     }
+    if (head.script) {
+      state.head.script = [...(state.head.script ?? []), ...(head.script ?? [])];
+    }
   }
 }

package/src/head/providers/ServerHeadProvider.spec.ts ADDED Viewed

@@ -0,0 +1,163 @@
+import { Alepha } from "alepha";
+import { describe, it } from "vitest";
+import { ServerHeadProvider } from "./ServerHeadProvider.ts";
+const alepha = Alepha.create();
+const serverHeadProvider = alepha.inject(ServerHeadProvider);
+describe("ServerHeadProvider", () => {
+  it("should render head with custom attributes and meta tags", ({
+    expect,
+  }) => {
+    const template = `
+	<!DOCTYPE html>
+	<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<title>Test</title>
+	</head>
+	<body>
+	</body>
+	</html>
+	`;
+    const head = {
+      title: "Test Title",
+      htmlAttributes: { lang: "fr", style: "color: red;" },
+      bodyAttributes: { class: "test-class" },
+      meta: [
+        { name: "description", content: "Test description" },
+        { name: "keywords", content: "test, example" },
+      ],
+    };
+    const expectedOutput = `
+	<!DOCTYPE html>
+	<html lang="fr" style="color: red;">
+	<head>
+		<meta charset="UTF-8">
+		<title>Test Title</title>
+		<meta name="description" content="Test description">
+		<meta name="keywords" content="test, example">
+	</head>
+	<body class="test-class">
+	</body>
+	</html>
+	`
+      .trim()
+      .replace(/\s+/g, " ");
+    expect(
+      serverHeadProvider.renderHead(template, head).replace(/\s+/g, " "),
+    ).toBe(expectedOutput);
+  });
+  it("should render script tags with src attribute", ({ expect }) => {
+    const template = `<!DOCTYPE html><html><head></head><body></body></html>`;
+    const head = {
+      script: [{ src: "https://example.com/script.js" }],
+    };
+    const result = serverHeadProvider.renderHead(template, head);
+    expect(result).toContain(
+      '<script src="https://example.com/script.js"></script>',
+    );
+  });
+  it("should render script tags with async and defer as boolean attributes", ({
+    expect,
+  }) => {
+    const template = `<!DOCTYPE html><html><head></head><body></body></html>`;
+    const head = {
+      script: [
+        { src: "https://example.com/async.js", async: true } as Record<
+          string,
+          string | boolean
+        >,
+        { src: "https://example.com/defer.js", defer: true } as Record<
+          string,
+          string | boolean
+        >,
+      ],
+    };
+    const result = serverHeadProvider.renderHead(template, head);
+    expect(result).toContain(
+      '<script src="https://example.com/async.js" async></script>',
+    );
+    expect(result).toContain(
+      '<script src="https://example.com/defer.js" defer></script>',
+    );
+  });
+  it("should render script tags with type and crossorigin attributes", ({
+    expect,
+  }) => {
+    const template = `<!DOCTYPE html><html><head></head><body></body></html>`;
+    const head = {
+      script: [
+        {
+          src: "https://example.com/module.js",
+          type: "module",
+          crossorigin: "anonymous",
+        },
+      ],
+    };
+    const result = serverHeadProvider.renderHead(template, head);
+    expect(result).toContain('type="module"');
+    expect(result).toContain('crossorigin="anonymous"');
+  });
+  it("should render multiple script tags", ({ expect }) => {
+    const template = `<!DOCTYPE html><html><head></head><body></body></html>`;
+    type ScriptAttrs = Record<string, string | boolean>;
+    const head = {
+      script: [
+        { src: "https://example.com/first.js" } as ScriptAttrs,
+        { src: "https://example.com/second.js", defer: true } as ScriptAttrs,
+        { src: "https://example.com/third.js", type: "module" } as ScriptAttrs,
+      ],
+    };
+    const result = serverHeadProvider.renderHead(template, head);
+    expect(result).toContain(
+      '<script src="https://example.com/first.js"></script>',
+    );
+    expect(result).toContain(
+      '<script src="https://example.com/second.js" defer></script>',
+    );
+    expect(result).toContain('src="https://example.com/third.js"');
+    expect(result).toContain('type="module"');
+  });
+  it("should not render script attributes with false value", ({ expect }) => {
+    const template = `<!DOCTYPE html><html><head></head><body></body></html>`;
+    const head = {
+      script: [{ src: "https://example.com/script.js", defer: false }],
+    };
+    const result = serverHeadProvider.renderHead(template, head);
+    expect(result).toContain(
+      '<script src="https://example.com/script.js"></script>',
+    );
+    expect(result).not.toContain("defer");
+  });
+  it("should escape HTML in script attributes", ({ expect }) => {
+    const template = `<!DOCTYPE html><html><head></head><body></body></html>`;
+    const head = {
+      script: [{ src: 'https://example.com/script.js?a=1&b="2"' }],
+    };
+    const result = serverHeadProvider.renderHead(template, head);
+    expect(result).toContain("&amp;");
+    expect(result).toContain("&quot;");
+  });
+});

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

@@ -68,6 +68,12 @@ export class ServerHeadProvider {
       }
     }
+    if (head.script) {
+      for (const script of head.script) {
+        headContent += this.renderScriptTag(script);
+      }
+    }
     // Inject into <head>...</head>
     result = result.replace(
       /<head([^>]*)>(.*?)<\/head>/is,
@@ -124,4 +130,18 @@ export class ServerHeadProvider {
     }
     return "";
   }
+  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`;
+  }
 }