dh-remixer-sdk 0.0.23 → 0.0.24-10fa10f

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dh-remixer-sdk",
-  "version": "0.0.23",
+  "version": "0.0.24-10fa10f",
   "type": "module",
   "files": [
     "templates",
@@ -12,11 +12,18 @@
     "sdk-update": "./scripts/sdk-update/index.mjs"
   },
   "dependencies": {
-    "chrome-launcher": "^1.2.1",
-    "chrome-remote-interface": "^0.34.0",
-    "estree-walker": "^3.0.3",
-    "acorn": "^8.14.0",
-    "acorn-jsx": "^5.3.2",
-    "sucrase": "^3.35.0"
+    "acorn": "8.14.0",
+    "acorn-jsx": "5.3.2",
+    "chrome-launcher": "1.2.1",
+    "chrome-remote-interface": "0.34.0",
+    "estree-walker": "3.0.3",
+    "sucrase": "3.35.0",
+    "@sparticuz/chromium": "143.0.4"
+  },
+  "devDependencies": {
+    "eslint-plugin-n": "17.24.0",
+    "globals": "17.4.0",
+    "eslint": "9.0.0",
+    "eslint-plugin-import": "2.32.0"
   }
 }

package/scripts/ssg-helmet/fs-utils.mjs

@@ -2,18 +2,18 @@ import fs from "node:fs/promises";
 import path from "path";
 import { injectUnpackRedirectScript } from "./inject-unpack-redirect.mjs";
 import { buildRedirectHelmetHtml } from "./build-helmet-html.mjs";
-import { ROOT, WRITE_TARGET } from "./vars.mjs";
+import { ROOT_ROUTE, REMIXER_BUILD_DIR } from "./vars.mjs";
 
 async function writeFile(route, content) {
-  const productOut = path.join(WRITE_TARGET, route, "index.html");
+  const productOut = path.join(REMIXER_BUILD_DIR, route, "index.html");
   await fs.mkdir(path.dirname(productOut), { recursive: true });
   await fs.writeFile(productOut, content, "utf8");
 }
 
 export async function writeHelmetFile(html, currentRoute, isIndexable) {
   const idxTag = isIndexable ? "indexable" : "not_indexable";
-  if (currentRoute === ROOT) {
-    await injectUnpackRedirectScript("out");
+  if (currentRoute === ROOT_ROUTE) {
+    await injectUnpackRedirectScript();
     console.log(`[crawled][${idxTag}][edited] ${currentRoute}index.html`);
     return;
   }

package/scripts/ssg-helmet/index.mjs

@@ -12,11 +12,11 @@ import {
 import { buildSitemapXml } from "./build-sitemap-xml.mjs";
 import { writeHelmetFile } from "./fs-utils.mjs";
 import {
-  ROOT,
+  ROOT_ROUTE,
   IS_INDEXABLE,
   IS_NOT_INDEXABLE,
   TARGET_DOMAIN,
-  WRITE_TARGET,
+  REMIXER_BUILD_DIR,
 } from "./vars.mjs";
 
 /**
@@ -28,11 +28,42 @@ import {
 
 async function main() {
   const visistedRoutes = [];
-  let queuedRoutes = [ROOT];
+  let queuedRoutes = [ROOT_ROUTE];
   const reactRoutes = await getRoutes();
-  let sitemapRoutes = [ROOT, reactRoutes.find((i) => typeof i === "object")];
+  let sitemapRoutes = [ROOT_ROUTE, reactRoutes.find((i) => typeof i === "object")];
 
-  const prerenderer = await Prerenderer.create();
+  // Retry logic with proper cleanup on failure
+  let prerenderer = null;
+  const maxRetries = 3;
+  for (let attempt = 1; attempt <= maxRetries; attempt++) {
+    try {
+      console.log(`[ssg-helmet] Creating Prerenderer (attempt ${attempt}/${maxRetries})...`);
+      prerenderer = await Prerenderer.create();
+      console.log(`[ssg-helmet] Prerenderer created successfully`);
+      break;
+    } catch (err) {
+      console.error(`[ssg-helmet] Prerenderer.create() failed on attempt ${attempt}:`, err.message);
+      
+      // Clean up any partially-created prerenderer
+      if (prerenderer) {
+        try {
+          await prerenderer.close();
+        } catch (closeErr) {
+          console.error(`[ssg-helmet] Error during cleanup:`, closeErr.message);
+        }
+        prerenderer = null;
+      }
+      
+      if (attempt === maxRetries) {
+        throw new Error(`Failed to create Prerenderer after ${maxRetries} attempts: ${err.message}`);
+      }
+      
+      // Exponential backoff: 2s, 4s
+      const delay = attempt * 2000;
+      console.log(`[ssg-helmet] Retrying in ${delay}ms...`);
+      await new Promise(resolve => setTimeout(resolve, delay));
+    }
+  }
 
   while (queuedRoutes.length > 0) {
     const knownRoutes = [...queuedRoutes, ...visistedRoutes];
@@ -63,7 +94,7 @@ async function main() {
 
   const sitemapXml = buildSitemapXml(TARGET_DOMAIN, sitemapRoutes);
   await fs.writeFile(
-    path.join(WRITE_TARGET, "sitemap.xml"),
+    path.join(REMIXER_BUILD_DIR, "sitemap.xml"),
     sitemapXml,
     "utf8",
   );

package/scripts/ssg-helmet/inject-unpack-redirect.mjs

@@ -1,18 +1,9 @@
 import fs from "node:fs/promises";
 import path from "node:path";
-import { UNPACK_SCRIPT_MARKER } from "./vars.mjs";
-
-/**
- * Reads out/index.html and injects an "unpack ?p=...&q=..." bootstrap script
- * that rewrites the URL back to the original SPA route BEFORE the app loads.
- *
- * - Idempotent: won't inject twice (uses a marker).
- * - Injects before </head> if present, otherwise before </body>, otherwise appends.
- *
- * @param {string} outDir - your build output directory (e.g. "out")
- */
-export async function injectUnpackRedirectScript(outDir) {
-  const indexPath = path.join(outDir, "index.html");
+import { REMIXER_BUILD_DIR, UNPACK_SCRIPT_MARKER } from "./vars.mjs";
+
+export async function injectUnpackRedirectScript() {
+  const indexPath = path.join(REMIXER_BUILD_DIR, "index.html");
   let html = await fs.readFile(indexPath, "utf8");
 
   if (html.includes(UNPACK_SCRIPT_MARKER)) return; // already injected

package/scripts/ssg-helmet/prerenderer.mjs

@@ -2,9 +2,12 @@ import http from "node:http";
 import fs from "node:fs/promises";
 import path from "node:path";
 import { URL } from "node:url";
+import { setTimeout } from "node:timers/promises";
 
+import { spawn } from "node:child_process";
 import * as chromeLauncher from "chrome-launcher";
 import CDP from "chrome-remote-interface";
+import { REMIXER_BUILD_DIR } from "./vars.mjs";
 
 export class Prerenderer {
   static async create() {
@@ -13,69 +16,75 @@ export class Prerenderer {
     return instance;
   }
 
+  #renderQueue = Promise.resolve();
+
   async prerenderPage(route = "/") {
+    return (this.#renderQueue = this.#renderQueue.then(() =>
+      this.#renderPage(route),
+    ));
+  }
+
+  async #renderPage(route) {
     const r = this.#normalize(route);
+    const { Page, Runtime } = this.#client;
+
+    // Navigate
+    await Page.navigate({ url: `${this.#origin}${r}` });
+    await Page.loadEventFired();
+
+    // Wait for Helmet (non-fatal)
+    await Runtime.evaluate({
+      expression: `
+        (async function () {
+          const deadline = Date.now() + 15000;
+          while (Date.now() < deadline) {
+            if (document.head && document.head.querySelector('[data-react-helmet="true"]')) return true;
+            await new Promise(r => setTimeout(r, 50));
+          }
+          return false;
+        })()
+      `,
+      awaitPromise: true,
+      returnByValue: true,
+    });
 
-    // Create a fresh tab (CDP target) for isolation + parallelism
-    const target = await CDP.New({ port: this.#cdpPort });
-    const client = await CDP({ port: this.#cdpPort, target });
+    await Runtime.evaluate({
+      expression: `new Promise(r => setTimeout(r, 100))`,
+      awaitPromise: true,
+      returnByValue: true,
+    });
 
-    const { Page, Runtime } = client;
+    // Snapshot
+    const { result } = await Runtime.evaluate({
+      expression: "document.documentElement.outerHTML",
+      returnByValue: true,
+    });
 
-    try {
-      await Page.enable();
-      await Runtime.enable();
-
-      // Navigate
-      await Page.navigate({ url: `${this.#origin}${r}` });
-      await Page.loadEventFired(); // roughly equivalent to domcontentloaded+load
-
-      // Wait for Helmet (non-fatal)
-      await Runtime.evaluate({
-        expression: `
-          (async function () {
-            const deadline = Date.now() + 15000;
-            while (Date.now() < deadline) {
-              if (document.head && document.head.querySelector('[data-react-helmet="true"]')) return true;
-              await new Promise(r => setTimeout(r, 50));
-            }
-            return false;
-          })()
-        `,
-        awaitPromise: true,
-        returnByValue: true,
-      });
-
-      // Small settle (like your 100ms)
-      await Runtime.evaluate({
-        expression: `new Promise(r => setTimeout(r, 100))`,
-        awaitPromise: true,
-        returnByValue: true,
-      });
-
-      // Snapshot
-      const { result } = await Runtime.evaluate({
-        expression: "document.documentElement.outerHTML",
-        returnByValue: true,
-      });
-
-      return result.value;
-    } finally {
-      await client.close().catch(() => {});
-      await CDP.Close({ port: this.#cdpPort, id: target.id }).catch(() => {});
-    }
+    return result.value;
   }
 
   async close() {
-    // stop chromium
+    if (this.#client) {
+      await this.#client.close().catch(() => {});
+      this.#client = null;
+    }
+
     if (this.#chrome) {
       try {
-        await this.#chrome.kill();
+        if (typeof this.#chrome.kill === "function") {
+          await this.#chrome.kill();
+        }
       } catch {}
       this.#chrome = null;
     }
 
-    // stop server
+    if (this.#chromeProcess) {
+      try {
+        this.#chromeProcess.kill("SIGKILL");
+      } catch {}
+      this.#chromeProcess = null;
+    }
+
     if (this.#server) {
       await new Promise((res) => this.#server.close(res));
       this.#server = null;
@@ -85,8 +94,31 @@ export class Prerenderer {
   // ================= PRIVATE =================
 
   constructor() {
-    this.#outDir = path.resolve("./out");
-    this.#indexPath = path.join(this.#outDir, "index.html");
+    this.#indexPath = path.join(REMIXER_BUILD_DIR, "index.html");
+  }
+
+  async #verifyCDPReady() {
+    const maxAttempts = 20;
+    const delayMs = 500;
+
+    for (let attempt = 1; attempt <= maxAttempts; attempt++) {
+      try {
+        await CDP.List({ port: this.#cdpPort });
+        if (attempt > 1) {
+          console.log(`[ssg-helmet] CDP ready after ${attempt} attempts`);
+        }
+        return;
+      } catch (error) {
+        console.log(`[ssg-helmet] CDP verification attempt ${attempt}/${maxAttempts} failed: ${error.message}`);
+        if (attempt === maxAttempts) {
+          throw new Error(
+            `Chrome CDP not ready after ${maxAttempts * delayMs}ms. ` +
+            `Chrome may have crashed. Error: ${error.message}`
+          );
+        }
+        await setTimeout(delayMs);
+      }
+    }
   }
 
   async #init() {
@@ -94,8 +126,97 @@ export class Prerenderer {
 
     await this.#startServer();
 
+    // In Lambda (CHROME_BIN set), spawn Chrome directly to capture stderr.
+    // Locally, use chrome-launcher for convenience.
+    if (process.env.CHROME_BIN) {
+      await this.#launchDirect();
+    } else {
+      await this.#launchWithChromeLauncher();
+    }
+
+    console.log(`[ssg-helmet] Chrome process launched on port ${this.#cdpPort}, verifying CDP readiness...`);
+    await this.#verifyCDPReady();
+    console.log(`[ssg-helmet] Chrome CDP ready`);
+
+    // Connect to the default tab
+    const targets = await CDP.List({ port: this.#cdpPort });
+    const pageTarget = targets.find((t) => t.type === "page");
+    if (!pageTarget) throw new Error("No default page target found in Chrome");
+
+    this.#client = await CDP({ port: this.#cdpPort, target: pageTarget });
+    await this.#client.Page.enable();
+    await this.#client.Runtime.enable();
+    console.log(`[ssg-helmet] Connected to default tab`);
+  }
+
+  async #launchDirect() {
+    const chromeBin = process.env.CHROME_BIN;
+    const debugPort = 9222 + Math.floor(Math.random() * 10000);
+
+    // Log Chrome version first
+    try {
+      const ver = spawn(chromeBin, ["--version"], { stdio: ["ignore", "pipe", "pipe"] });
+      let out = "";
+      ver.stdout.on("data", (d) => (out += d));
+      await new Promise((res) => ver.on("close", res));
+      console.log(`[ssg-helmet] Chrome version: ${out.trim()}`);
+    } catch {}
+
+    const defaultFlags = [
+      "--headless",
+      "--no-sandbox",
+      "--disable-setuid-sandbox",
+      "--disable-gpu",
+      "--disable-dev-shm-usage",
+      "--no-zygote",
+      "--disable-background-networking",
+      "--disable-extensions",
+      "--disable-background-timer-throttling",
+      "--disable-backgrounding-occluded-windows",
+      "--disable-renderer-backgrounding",
+    ];
+
+    const chromeFlags = process.env.CHROME_FLAGS
+      ? ["--headless=new", ...process.env.CHROME_FLAGS.split(",").map((f) => f.trim())]
+      : defaultFlags;
+
+    const allArgs = [
+      ...chromeFlags,
+      "--user-data-dir=/tmp/chrome-data",
+      `--remote-debugging-port=${debugPort}`,
+      "--remote-debugging-address=127.0.0.1",
+      "about:blank",
+    ];
+
+    console.log(`[ssg-helmet] Spawning ${chromeBin} on port ${debugPort}`);
+    console.log(`[ssg-helmet] Args: ${allArgs.join(" ")}`);
+
+    this.#chromeProcess = spawn(chromeBin, allArgs, {
+      stdio: ["ignore", "pipe", "pipe"],
+      env: {
+        ...process.env,
+        HOME: "/tmp",
+        XDG_CACHE_HOME: "/tmp/.cache",
+        XDG_CONFIG_HOME: "/tmp/.config",
+        FONTCONFIG_CACHE: "/tmp/fontconfig-cache",
+      },
+    });
+
+    let stderrBuf = "";
+    this.#chromeProcess.stderr.on("data", (d) => {
+      stderrBuf += d.toString();
+    });
+    this.#chromeProcess.on("exit", (code, signal) => {
+      console.log(`[ssg-helmet] Chrome exited: code=${code}, signal=${signal}`);
+      if (stderrBuf) console.log(`[ssg-helmet] Chrome stderr:\n${stderrBuf.slice(0, 4000)}`);
+    });
+
+    this.#cdpPort = debugPort;
+  }
+
+  async #launchWithChromeLauncher() {
     const defaultFlags = [
-      "--headless=new",
+      "--headless",
       "--no-sandbox",
       "--disable-gpu",
       "--disable-dev-shm-usage",
@@ -104,9 +225,11 @@ export class Prerenderer {
     ];
 
     const chromeFlags = process.env.CHROME_FLAGS
-      ? ["--headless=new", ...process.env.CHROME_FLAGS.split(",").map(f => f.trim())]
+      ? ["--headless", ...process.env.CHROME_FLAGS.split(",").map((f) => f.trim())]
       : defaultFlags;
 
+    console.log(`[ssg-helmet] Launching Chrome with flags:`, chromeFlags);
+
     this.#chrome = await chromeLauncher.launch({
       chromePath: process.env.CHROME_BIN || undefined,
       chromeFlags,
@@ -133,7 +256,7 @@ export class Prerenderer {
         return res.end("Bad Request");
       }
 
-      const filePath = path.join(this.#outDir, safe);
+      const filePath = path.join(REMIXER_BUILD_DIR, safe);
 
       try {
         const stat = await fs.stat(filePath);
@@ -183,9 +306,10 @@ export class Prerenderer {
 
   #server;
   #origin;
-  #outDir;
   #indexPath;
 
+  #client;
   #chrome;
+  #chromeProcess;
   #cdpPort;
 }

package/scripts/ssg-helmet/vars.mjs

@@ -1,8 +1,13 @@
-export const OUT = path.resolve("./out");
-export const WRITE_TARGET = path.resolve("./");
-export const IS_INDEXABLE = true;
-export const IS_NOT_INDEXABLE = false;
-export const ROOT = "/";
+import path from "node:path";
+
+export const REMIXER_BUILD_DIR =
+  process.env.REMIXER_BUILD_DIR || path.resolve("./out");
+export const REMIXER_SOURCE_DIR =
+  process.env.REMIXER_SOURCE_DIR || path.resolve("./");
 export const TARGET_DOMAIN =
   process.env.NEXT_PUBLIC_DOMAIN || "https://example.com";
+
+export const ROOT_ROUTE = "/";
+export const IS_INDEXABLE = true;
+export const IS_NOT_INDEXABLE = false;
 export const UNPACK_SCRIPT_MARKER = "redirect-helmet-unpack-p-v1";

package/templates/base/package.json

@@ -26,12 +26,6 @@
     "@types/node": "22.19.1",
     "@vitejs/plugin-react": "5.1.1",
     "typescript": "5.8.3",
-    "vite": "6.4.1",
-    "chrome-launcher": "1.2.1",
-    "chrome-remote-interface": "0.34.0",
-    "acorn": "^8.16.0",
-    "acorn-jsx": "^5.3.2",
-    "sucrase": "^3.35.1",
-    "estree-walker": "^3.0.3"
+    "vite": "6.4.1"
   }
 }