npm - alabjs - Versions diffs - 0.2.2 → 0.2.4 - Mend

alabjs 0.2.2 → 0.2.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 (23) hide show

package/dist/cli.js +0 -0
package/dist/commands/dev.d.ts.map +1 -1
package/dist/commands/dev.js +49 -13
package/dist/commands/dev.js.map +1 -1
package/dist/components/Font.d.ts +8 -3
package/dist/components/Font.d.ts.map +1 -1
package/dist/components/Font.js +12 -2
package/dist/components/Font.js.map +1 -1
package/dist/components/Script.d.ts +19 -7
package/dist/components/Script.d.ts.map +1 -1
package/dist/components/Script.js +28 -1
package/dist/components/Script.js.map +1 -1
package/dist/ssr/html.d.ts +14 -0
package/dist/ssr/html.d.ts.map +1 -1
package/dist/ssr/html.js +48 -0
package/dist/ssr/html.js.map +1 -1
package/package.json +14 -14
package/src/commands/dev.ts +49 -13
package/src/components/Font.tsx +12 -2
package/src/components/Script.tsx +47 -6
package/src/ssr/html.ts +55 -0
package/src/types/plugins.d.ts +16 -0
package/tsconfig.tsbuildinfo +1 -1

package/src/components/Script.tsx CHANGED Viewed

@@ -1,8 +1,7 @@
-import { useEffect, type HTMLAttributes } from "react";
+import { useEffect, type HTMLAttributes, type ReactNode } from "react";
-export interface ScriptProps extends Omit<HTMLAttributes<HTMLScriptElement>, "src"> {
-  /** URL of the external script to load. */
-  src: string;
+/** Props shared by both external-src and inline-children variants. */
+interface ScriptBaseProps extends Omit<HTMLAttributes<HTMLScriptElement>, "src"> {
   /**
    * Loading strategy:
    * - `"beforeInteractive"` — injected into `<head>` during SSR; blocks page rendering.
@@ -13,12 +12,27 @@ export interface ScriptProps extends Omit<HTMLAttributes<HTMLScriptElement>, "sr
    *   Best for low-priority scripts like A/B testing, heatmaps, social embeds.
    */
   strategy?: "beforeInteractive" | "afterInteractive" | "lazyOnload";
-  /** Called once the script has loaded successfully. */
+  /** Called once the script has loaded successfully (external scripts only). */
   onLoad?: () => void;
-  /** Called if the script fails to load. */
+  /** Called if the script fails to load (external scripts only). */
   onError?: () => void;
 }
+/** External script variant — `src` is required and `children` must be absent. */
+interface ExternalScriptProps extends ScriptBaseProps {
+  /** URL of the external script to load. */
+  src: string;
+  children?: never;
+}
+/** Inline script variant — `children` contains the script body; `src` must be absent. */
+interface InlineScriptProps extends ScriptBaseProps {
+  src?: never;
+  children: ReactNode;
+}
+export type ScriptProps = ExternalScriptProps | InlineScriptProps;
 /**
  * Load a third-party script with strategy control.
  *
@@ -40,8 +54,35 @@ export function Script({
   strategy = "afterInteractive",
   onLoad,
   onError,
+  children,
   ...rest
 }: ScriptProps) {
+  // ── Inline script: render <script>{children}</script> directly ──────────────
+  // Inline scripts have no loading strategy — they are always rendered as-is.
+  // For SSR (beforeInteractive) they land in the HTML stream; for client
+  // renders they are injected once via useEffect.
+  if (!src) {
+    if (strategy === "beforeInteractive") {
+      if (typeof window !== "undefined") return null;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return <script {...(rest as any)}>{children}</script>;
+    }
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      const el = document.createElement("script");
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      if (typeof children === "string") el.textContent = children;
+      for (const [k, v] of Object.entries(rest)) {
+        if (typeof v === "string") el.setAttribute(k, v);
+      }
+      document.head.appendChild(el);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return null;
+  }
+  // ── External script ─────────────────────────────────────────────────────────
   // `beforeInteractive` is handled at SSR time by rendering a real <script> tag.
   // The component returns null on the client to avoid duplicate injection.
   if (strategy === "beforeInteractive") {

package/src/ssr/html.ts CHANGED Viewed

@@ -101,6 +101,61 @@ export function htmlShellAfter(opts: { nonce?: string | undefined }): string {
 </html>`;
 }
+/**
+ * Build just the alab `<meta>` tags used for client hydration.
+ * Used when the page component renders a full `<html>` document so the tags
+ * can be injected into the user-controlled `<head>` rather than the shell.
+ */
+export function buildAlabMetaTags(opts: Omit<HtmlShellOptions, "metadata" | "headExtra">): string {
+  const { routeFile, ssr, paramsJson, searchParamsJson, layoutsJson, loadingFile, buildId } = opts;
+  return [
+    `<meta name="alabjs-route" content="${escAttr(routeFile)}" />`,
+    `<meta name="alabjs-ssr" content="${ssr ? "true" : "false"}" />`,
+    `<meta name="alabjs-params" content="${escAttr(paramsJson)}" />`,
+    `<meta name="alabjs-search-params" content="${escAttr(searchParamsJson)}" />`,
+    layoutsJson ? `<meta name="alabjs-layouts" content="${escAttr(layoutsJson)}" />` : "",
+    loadingFile ? `<meta name="alabjs-loading" content="${escAttr(loadingFile)}" />` : "",
+    buildId ? `<meta name="alabjs-build-id" content="${escAttr(buildId)}" />` : "",
+    // Signal to the client bootstrap that it must use hydrateRoot(document, …)
+    // instead of mounting into <div id="alabjs-root">.
+    `<meta name="alabjs-full-document" content="true" />`,
+  ].filter(Boolean).join("\n    ");
+}
+/**
+ * Inject alab hydration meta tags and the client bootstrap script into a
+ * full-document SSR string (i.e. one whose root element is `<html>`).
+ *
+ * The meta tags are appended before `</head>` and the client script before
+ * `</body>`.  If neither marker is found the strings are appended verbatim.
+ */
+export function injectIntoFullDocument(
+  ssrHtml: string,
+  opts: Omit<HtmlShellOptions, "metadata" | "headExtra">,
+): string {
+  const metaTags = buildAlabMetaTags(opts);
+  const nonceAttr = opts.nonce ? ` nonce="${escAttr(opts.nonce)}"` : "";
+  const clientScript = `<script type="module" src="/@alabjs/client"${nonceAttr}></script>`;
+  let result = ssrHtml;
+  // Inject meta tags before </head> (case-insensitive).
+  if (/<\/head>/i.test(result)) {
+    result = result.replace(/<\/head>/i, `  ${metaTags}\n  </head>`);
+  } else {
+    result = metaTags + "\n" + result;
+  }
+  // Inject client bootstrap script before </body>.
+  if (/<\/body>/i.test(result)) {
+    result = result.replace(/<\/body>/i, `  ${clientScript}\n  </body>`);
+  } else {
+    result = result + "\n" + clientScript;
+  }
+  return result;
+}
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 function escHtml(s: string): string {

package/src/types/plugins.d.ts CHANGED Viewed

@@ -1,3 +1,19 @@
 declare module "alabjs-vite-plugin" {
   export function alabPlugin(options?: { mode?: "dev" | "build" }): import("vite").Plugin[];
 }
+// Augment ImportMeta so `import.meta.env.DEV` (injected by Vite at build time)
+// is recognised by TypeScript when compiling alabjs component source files.
+// Vite replaces `import.meta.env.DEV` with a literal boolean at bundle time;
+// this declaration just provides the compile-time type so TS does not error.
+interface ImportMeta {
+  readonly env: {
+    /** `true` in Vite dev server, `false` in production builds. */
+    readonly DEV: boolean;
+    readonly PROD: boolean;
+    readonly SSR: boolean;
+    readonly MODE: string;
+    readonly BASE_URL: string;
+    readonly [key: string]: unknown;
+  };
+}