@alepha/react 0.14.4 → 0.15.1

package/src/head/hooks/useHead.spec.tsx

@@ -1,10 +1,10 @@
 import { AlephaContext } from "@alepha/react";
-import type { Head } from "../index.ts";
-import { useHead } from "../index.ts";
 import { render } from "@testing-library/react";
 import { Alepha } from "alepha";
 import { act, type ReactNode } from "react";
 import { beforeEach, describe, it, vi } from "vitest";
+import type { Head } from "../index.ts";
+import { useHead } from "../index.ts";
 
 /**
  * @vitest-environment jsdom

package/src/head/index.browser.ts

@@ -5,10 +5,10 @@ import { BrowserHeadProvider } from "./providers/BrowserHeadProvider.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
-export * from "./primitives/$head.ts";
+export * from "./helpers/SeoExpander.ts";
 export * from "./hooks/useHead.ts";
 export * from "./interfaces/Head.ts";
-export * from "./helpers/SeoExpander.ts";
+export * from "./primitives/$head.ts";
 export * from "./providers/BrowserHeadProvider.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------

package/src/head/index.ts

@@ -1,19 +1,19 @@
 import { AlephaReact } from "@alepha/react";
 import { $module } from "alepha";
+import { SeoExpander } from "./helpers/SeoExpander.ts";
 import { $head } from "./primitives/$head.ts";
 import { BrowserHeadProvider } from "./providers/BrowserHeadProvider.ts";
 import { HeadProvider } from "./providers/HeadProvider.ts";
-import { SeoExpander } from "./helpers/SeoExpander.ts";
 import { ServerHeadProvider } from "./providers/ServerHeadProvider.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
-export * from "./primitives/$head.ts";
+export * from "./helpers/SeoExpander.ts";
 export * from "./hooks/useHead.ts";
 export * from "./interfaces/Head.ts";
-export * from "./helpers/SeoExpander.ts";
-export * from "./providers/ServerHeadProvider.ts";
+export * from "./primitives/$head.ts";
 export * from "./providers/BrowserHeadProvider.ts";
+export * from "./providers/ServerHeadProvider.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 

package/src/head/interfaces/Head.ts

@@ -74,9 +74,21 @@ export interface SimpleHead {
   /** 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>>;
+  link?: Array<{
+    rel: string;
+    href: string;
+    type?: string;
+    as?: string;
+    crossorigin?: string;
+  }>;
+  /** Script tags - string for inline code, or object with attributes */
+  script?: Array<
+    | string
+    | (Record<string, string | boolean | undefined> & {
+        /** Inline JavaScript code */
+        content?: string;
+      })
+  >;
 }
 
 export interface HeadMeta {

package/src/head/primitives/$head.ts

@@ -1,4 +1,4 @@
-import { $inject, createPrimitive, Primitive, KIND } from "alepha";
+import { $inject, createPrimitive, KIND, Primitive } from "alepha";
 import type { Head } from "../interfaces/Head.ts";
 import { HeadProvider } from "../providers/HeadProvider.ts";
 
@@ -18,10 +18,7 @@ export type HeadPrimitiveOptions = Head | (() => Head);
 export class HeadPrimitive extends Primitive<HeadPrimitiveOptions> {
   protected readonly provider = $inject(HeadProvider);
   protected onInit() {
-    this.provider.global = [
-      ...(this.provider.global ?? []),
-      this.options,
-    ];
+    this.provider.global = [...(this.provider.global ?? []), this.options];
   }
 }
 

package/src/head/providers/BrowserHeadProvider.ts

@@ -116,10 +116,65 @@ export class BrowserHeadProvider {
           link = document.createElement("link");
           link.setAttribute("rel", rel);
           link.setAttribute("href", href);
+          if (it.type) {
+            link.setAttribute("type", it.type);
+          }
+          if (it.as) {
+            link.setAttribute("as", it.as);
+          }
+          if (it.crossorigin != null) {
+            link.setAttribute("crossorigin", "");
+          }
           document.head.appendChild(link);
         }
       }
     }
+
+    if (head.script) {
+      for (const it of head.script) {
+        this.renderScriptTag(document, it);
+      }
+    }
+  }
+
+  protected renderScriptTag(
+    document: Document,
+    script:
+      | string
+      | (Record<string, string | boolean | undefined> & { content?: string }),
+  ): void {
+    const el = document.createElement("script");
+
+    // Handle plain string as inline script
+    if (typeof script === "string") {
+      el.textContent = script;
+      document.head.appendChild(el);
+      return;
+    }
+
+    const { content, ...attrs } = script;
+
+    // For scripts with src, check if already exists
+    if (attrs.src) {
+      const existing = document.querySelector(`script[src="${attrs.src}"]`);
+      if (existing) {
+        return;
+      }
+    }
+
+    for (const [key, value] of Object.entries(attrs)) {
+      if (value === true) {
+        el.setAttribute(key, "");
+      } else if (value !== undefined && value !== false) {
+        el.setAttribute(key, String(value));
+      }
+    }
+
+    if (content) {
+      el.textContent = content;
+    }
+
+    document.head.appendChild(el);
   }
 
   protected renderMetaTag(document: Document, meta: HeadMeta): void {

package/src/head/providers/HeadProvider.ts

@@ -136,7 +136,10 @@ export class HeadProvider {
     }
 
     if (head.script) {
-      state.head.script = [...(state.head.script ?? []), ...(head.script ?? [])];
+      state.head.script = [
+        ...(state.head.script ?? []),
+        ...(head.script ?? []),
+      ];
     }
   }
 }

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

@@ -1,7 +1,7 @@
 import { Alepha } from "alepha";
 import { describe, test } from "vitest";
-import { $dictionary } from "../primitives/$dictionary.ts";
 import { AlephaReactI18n } from "../index.ts";
+import { $dictionary } from "../primitives/$dictionary.ts";
 import { I18nProvider } from "../providers/I18nProvider.ts";
 
 describe("I18n Integration Tests", () => {

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

@@ -1,10 +1,10 @@
 import { AlephaContext } from "@alepha/react";
-import { I18nProvider, Localize } from "../index.ts";
-import { Alepha, t } from "alepha";
+import { Alepha } from "alepha";
 import { DateTimeProvider } from "alepha/datetime";
 import type { ReactNode } from "react";
 import { renderToString } from "react-dom/server";
 import { describe, expect, it } from "vitest";
+import { I18nProvider, Localize } from "../index.ts";
 
 describe("<Localize/>", () => {
   const setup = () => {

package/src/i18n/hooks/useI18n.browser.spec.tsx

@@ -4,10 +4,10 @@ import { Alepha } from "alepha";
 import type { ReactNode } from "react";
 import { act } from "react";
 import { describe, test } from "vitest";
-import { $dictionary } from "../primitives/$dictionary.ts";
-import { useI18n } from "./useI18n.ts";
 import { AlephaReactI18n } from "../index.ts";
+import { $dictionary } from "../primitives/$dictionary.ts";
 import { I18nProvider } from "../providers/I18nProvider.ts";
+import { useI18n } from "./useI18n.ts";
 
 describe("useI18n hook", () => {
   const renderWithAlepha = (alepha: Alepha, element: ReactNode) => {

package/src/i18n/index.ts

@@ -6,8 +6,8 @@ import { I18nProvider } from "./providers/I18nProvider.ts";
 
 export type { LocalizeProps } from "./components/Localize.tsx";
 export { default as Localize } from "./components/Localize.tsx";
-export * from "./primitives/$dictionary.ts";
 export * from "./hooks/useI18n.ts";
+export * from "./primitives/$dictionary.ts";
 export * from "./providers/I18nProvider.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------

package/src/i18n/primitives/$dictionary.ts

@@ -1,4 +1,4 @@
-import { $inject, type Async, createPrimitive, Primitive, KIND } from "alepha";
+import { $inject, type Async, createPrimitive, KIND, Primitive } from "alepha";
 import { I18nProvider } from "../providers/I18nProvider.ts";
 
 /**

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

@@ -1,7 +1,7 @@
 import { Alepha } from "alepha";
 import { describe, test } from "vitest";
-import { $dictionary } from "../primitives/$dictionary.ts";
 import { AlephaReactI18n } from "../index.ts";
+import { $dictionary } from "../primitives/$dictionary.ts";
 import { I18nProvider } from "./I18nProvider.ts";
 
 describe("I18nProvider", () => {

package/src/i18n/providers/I18nProvider.ts

@@ -15,7 +15,7 @@ export class I18nProvider<
   protected cookie = $cookie({
     name: "lang",
     schema: t.text(),
-    ttl: [1, "year"]
+    ttl: [1, "year"],
   });
 
   public readonly registry: Array<{

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

@@ -1,4 +1,8 @@
-import { AlephaReactHead, BrowserHeadProvider, type Head } from "@alepha/react/head";
+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";

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

@@ -1,6 +1,6 @@
+import { $head, AlephaReactHead } from "@alepha/react/head";
 import { Alepha } from "alepha";
 import { describe, it } from "vitest";
-import { $head, AlephaReactHead } from "@alepha/react/head";
 import { $page } from "../index.ts";
 
 class App {
@@ -31,14 +31,18 @@ describe("PageHead", () => {
     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("<!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("<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>');
+    expect(result.html).toContain("</body>");
+    expect(result.html).toContain("</html>");
   });
 });

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

@@ -1,6 +1,6 @@
+import { $head, AlephaReactHead } from "@alepha/react/head";
 import { Alepha } from "alepha";
 import { describe, it } from "vitest";
-import { $head, AlephaReactHead } from "@alepha/react/head";
 import { $page } from "../index.ts";
 
 class App {
@@ -49,7 +49,9 @@ describe("SEO Head", () => {
     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:type" content="website">',
+    );
     expect(result.html).toContain(
       '<meta property="og:site_name" content="Alepha">',
     );
@@ -113,7 +115,9 @@ describe("SEO Head on Page", () => {
     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:type" content="article">',
+    );
     expect(result.html).toContain(
       '<meta property="og:image" content="https://example.com/blog-og.png">',
     );

package/src/router/atoms/ssrManifestAtom.ts

@@ -10,26 +10,18 @@ export const ssrManifestAtomSchema = t.object({
    */
   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.
+   * Only includes fields actually used for preloading.
    */
   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())),
       }),
     ),
   ),
@@ -49,8 +41,7 @@ export type SsrManifestAtomSchema = typeof ssrManifestAtomSchema;
  *
  * 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
+ * - client: Maps source files to their output info (file, imports, css)
  */
 export const ssrManifestAtom = $atom({
   name: "alepha.react.ssr.manifest",