dh-remixer-sdk 0.0.29-eafb9f2 → 0.0.29-eb18fb8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dh-remixer-sdk",
-  "version": "0.0.29-eafb9f2",
+  "version": "0.0.29-eb18fb8",
   "type": "module",
   "files": [
     "templates",
@@ -12,17 +12,19 @@
     "sdk-update": "./scripts/sdk-update/index.mjs"
   },
   "dependencies": {
+    "@sparticuz/chromium": "^131.0.1",
     "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",
+    "prettier": "^3.8.3",
     "sucrase": "3.35.0"
   },
   "devDependencies": {
-    "eslint-plugin-n": "17.24.0",
-    "globals": "17.4.0",
     "eslint": "9.0.0",
-    "eslint-plugin-import": "2.32.0"
+    "eslint-plugin-import": "2.32.0",
+    "eslint-plugin-n": "17.24.0",
+    "globals": "17.4.0"
   }
 }

package/scripts/sdk-update/index.mjs

@@ -49,6 +49,7 @@ async function main() {
   // Extract new files
   await Promise.all([
     ...Object.entries(extractionList).map(([fileName, target]) => {
+      console.log(`Extracting ${fileName}`);
       if (fileName.endsWith(".json")) {
         return extractJsonFile(fileName, target, templateType);
       }

package/scripts/ssg-helmet/extract-routes.mjs

@@ -48,7 +48,7 @@ export async function extractRoutesFromRouterFile(filePath) {
   const src = await fs.readFile(filePath, "utf8");
   let code = src;
   try {
-    code = transform(src, { transforms: ["typescript"] }).code;
+    code = transform(src, { transforms: ["typescript", "jsx"], jsxRuntime: "preserve" }).code;
   } catch {}
 
   const ast = Parser.parse(code, { ecmaVersion: "latest", sourceType: "module" });

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

@@ -1,7 +1,8 @@
 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 { injectMetadata } from "./inject-metadata-head.mjs";
+import { injectStylesHead } from "./inject-styles-head.mjs";
 import { ROOT_ROUTE, REMIXER_BUILD_DIR } from "./vars.mjs";
 
 async function writeFile(route, content) {
@@ -12,13 +13,9 @@ async function writeFile(route, content) {
 
 export async function writeHelmetFile(html, currentRoute, isIndexable) {
   const idxTag = isIndexable ? "indexable" : "not_indexable";
-  if (currentRoute === ROOT_ROUTE) {
-    await injectUnpackRedirectScript();
-    console.log(`[crawled][${idxTag}][edited] ${currentRoute}index.html`);
-    return;
-  }
 
-  const helmetHtml = buildRedirectHelmetHtml(html, currentRoute, isIndexable);
-  await writeFile(currentRoute, helmetHtml);
+  const metadataHtml = await injectMetadata(html, currentRoute, isIndexable);
+  const styledHtml = await injectStylesHead(metadataHtml);
+  await writeFile(currentRoute, styledHtml);
   console.log(`[crawled][${idxTag}][created] ${currentRoute}/index.html`);
 }

package/scripts/ssg-helmet/has-router.mjs

@@ -53,7 +53,7 @@ export function hasRouter(src) {
   // parse (TS -> JS) then AST scan; if we can't parse, assume false
   let code = src;
   try {
-    code = transform(src, { transforms: ["typescript"] }).code;
+    code = transform(src, { transforms: ["typescript", "jsx"], jsxRuntime: "preserve" }).code;
   } catch {}
 
   let ast;

package/scripts/ssg-helmet/index.mjs

@@ -18,6 +18,10 @@ import {
   TARGET_DOMAIN,
   REMIXER_BUILD_DIR,
 } from "./vars.mjs";
+import {
+  parseHtmlForContactInfo,
+  applyBusinessLdJson,
+} from "./parse-html-for-contact-info.mjs";
 
 /**
  * Handles:
@@ -30,40 +34,12 @@ async function main() {
   const visistedRoutes = [];
   let queuedRoutes = [ROOT_ROUTE];
   const reactRoutes = await getRoutes();
-  let sitemapRoutes = [ROOT_ROUTE, reactRoutes.find((i) => typeof i === "object")];
-
-  // 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));
-    }
-  }
+  let sitemapRoutes = [
+    ROOT_ROUTE,
+    reactRoutes.find((i) => typeof i === "object"),
+  ];
+
+  const prerenderer = await Prerenderer.create();
 
   while (queuedRoutes.length > 0) {
     const knownRoutes = [...queuedRoutes, ...visistedRoutes];
@@ -72,6 +48,7 @@ async function main() {
       queuedRoutes.map(async (currentRoute) => {
         const html = await prerenderer.prerenderPage(currentRoute);
         await writeHelmetFile(html, currentRoute, IS_INDEXABLE);
+        await parseHtmlForContactInfo(html);
         return populateRoutesFromHtml(html, sitemapRoutes);
       }),
     );
@@ -92,6 +69,8 @@ async function main() {
     }),
   );
 
+  await applyBusinessLdJson();
+
   const sitemapXml = buildSitemapXml(TARGET_DOMAIN, sitemapRoutes);
   await fs.writeFile(
     path.join(REMIXER_BUILD_DIR, "sitemap.xml"),
@@ -111,6 +90,11 @@ Sitemap: https://${TARGET_DOMAIN}/sitemap.xml
   );
   console.log("[created] robots.txt");
 
+  // Build succeeded: drop the hidden SPA-bootstrap sidecar so it never ships
+  // in the deployed output. (On a crash we skip this and leave it behind so a
+  // re-run can recover the clobbered index.html.)
+  await prerenderer.removeBootstrapBackup();
+
   await prerenderer.close();
 }
 

package/scripts/ssg-helmet/inject-metadata-head.mjs

@@ -0,0 +1,345 @@
+/**
+ * Simplified redirect-helmet builder:
+ * - Extracts metadata from prerenderedHtml (<title>, <meta>, <link>, <base>, ld+json)
+ * - Normalizes into a single "meta bag" with common SEO keys
+ * - Fills missing fields from available data (og/title/twitter propagation, canonical, og:url, etc.)
+ * - Preserves existing application/ld+json scripts; if none exist AND indexable, emits fallback WebPage JSON-LD
+ * - Forces robots to "noindex, follow" when isIndexable=false
+ * - Ensures <html lang="en">
+ * - Canonical is DOMAIN + route (3rd param), not window.location
+ * - Avoids double-escaping (&amp;amp;) by decoding extracted text before output
+ * - Ensures JSON-LD contains real characters (e.g. "&" not "&amp;")
+ */
+
+import * as prettier from "prettier";
+import { SINGLETON_LD_JSON_STATE, TARGET_DOMAIN } from "./vars.mjs";
+import path from "node:path";
+import fs from "node:fs/promises";
+
+const pick = (re, s) => s.match(re)?.[1] ?? "";
+
+const escapeAttr = (s) =>
+  String(s)
+    .replace(/&/g, "&amp;")
+    .replace(/"/g, "&quot;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+
+// Decode a few common HTML entities so we don't double-escape values
+// (We only use this on text we extracted from existing HTML.)
+const decodeHtml = (s) =>
+  String(s ?? "")
+    .replace(/&amp;/gi, "&")
+    .replace(/&quot;/gi, '"')
+    .replace(/&#39;/gi, "'")
+    .replace(/&lt;/gi, "<")
+    .replace(/&gt;/gi, ">");
+
+// Prevent JSON containing "</script>" from breaking the script tag
+export const safeJson = (obj) =>
+  JSON.stringify(obj).replace(/<\/script>/gi, "<\\/script>");
+
+const parseAttrs = (tag) => {
+  const attrs = {};
+  const re = /([^\s=/>]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s/>]+)))?/g;
+  let m;
+  while ((m = re.exec(tag))) {
+    const k = m[1].toLowerCase();
+    const v = m[2] ?? m[3] ?? m[4] ?? "";
+    attrs[k] = v;
+  }
+  return attrs;
+};
+
+const setFirst = (obj, k, v) => {
+  if (v == null) return;
+  const s = String(v).trim();
+  if (!s) return;
+  if (!obj[k]) obj[k] = s;
+};
+
+const setForce = (obj, k, v) => {
+  const s = String(v ?? "").trim();
+  if (!s) return;
+  obj[k] = s;
+};
+
+const normalizeDomain = (d) => {
+  const s = String(d || "").trim();
+  if (!s) return "";
+  if (/^https?:\/\//i.test(s)) return s.replace(/\/+$/, "");
+  return `https://${s.replace(/\/+$/, "")}`;
+};
+
+const normalizeRoute = (r) => {
+  let p = String(r || "/").trim();
+  if (!p) p = "/";
+  if (!p.startsWith("/")) p = "/" + p;
+  // strip query/hash, normalize trailing slash
+  p = p.split("?")[0].split("#")[0];
+  p = p.replace(/\/+$/, "") || "/";
+  return p;
+};
+
+const canonicalFromDomainRoute = (route) =>
+  normalizeDomain(TARGET_DOMAIN) + normalizeRoute(route);
+
+async function getType() {
+  const packageJsonPath = path.join("./package.json");
+  const content = await fs.readFile(packageJsonPath, "utf-8");
+
+  if (!content) {
+    return "WebPage";
+  }
+  const packageJsonData = JSON.parse(content);
+
+  if (packageJsonData.name === "remixer-ecommerce") {
+    return "OnlineStore";
+  }
+
+  return "WebPage";
+}
+
+export async function injectMetadata(
+  prerenderedHtml,
+  route = "/",
+  isIndexable = true,
+) {
+  if (typeof prerenderedHtml !== "string") {
+    throw new TypeError("prerenderedHtml must be a string");
+  }
+
+  // --- helpers --------------------------------------------------------------
+
+  // --- extract head ---------------------------------------------------------
+  const lang = "en";
+
+  const headInner = pick(/<head\b[^>]*>([\s\S]*?)<\/head>/i, prerenderedHtml);
+
+  // decode to avoid double-escape on output
+  const titleText = decodeHtml(
+    pick(/<title\b[^>]*>([\s\S]*?)<\/title>/i, headInner).trim(),
+  );
+
+  const metaTags = headInner.match(/<meta\b[^>]*>/gi) || [];
+  const linkTags = headInner.match(/<link\b[^>]*>/gi) || [];
+  const headScripts =
+    headInner.match(/<script\b[^>]*>[\s\S]*?<\/script>/gi) || [];
+  const ldJsonScripts = headScripts.filter((s) =>
+    /type\s*=\s*(['"])application\/ld\+json\1/i.test(s),
+  );
+
+  // The app bootstrap (module bundle + any inline boot scripts vite emitted).
+  // Preserving these lets the helmet page boot the live SPA: the prerendered
+  // HTML is the first paint / crawler view, then React mounts on top so the
+  // page is fully interactive and framer-motion animations actually run.
+  const bootstrapScripts = headScripts.filter(
+    (s) => !/type\s*=\s*(['"])application\/ld\+json\1/i.test(s),
+  );
+
+  // Preserve non-CSS, non-canonical links (modulepreload, icon, preconnect,
+  // dns-prefetch, ...). Stylesheets are dropped here because injectStylesHead
+  // re-emits them as <link rel="stylesheet"> tags built from the CSS files on
+  // disk; canonical is re-emitted from the meta bag below.
+  const preservedLinks = linkTags.filter((tag) => {
+    const rel = (parseAttrs(tag).rel || "").toLowerCase();
+    return rel !== "stylesheet" && rel !== "canonical";
+  });
+
+  // --- build meta bag -------------------------------------------------------
+  const meta = {
+    title: "",
+    description: "",
+    robots: "",
+    canonical: "",
+    charset: "",
+    viewport: "",
+    "theme-color": "",
+
+    "og:title": "",
+    "og:description": "",
+    "og:image": "",
+    "og:image:alt": "",
+    "og:type": "",
+    "og:url": "",
+    "og:site_name": "",
+    "og:locale": "",
+
+    "twitter:card": "",
+    "twitter:title": "",
+    "twitter:description": "",
+    "twitter:image": "",
+    "twitter:image:alt": "",
+    "twitter:site": "",
+    "twitter:creator": "",
+
+    "application-name": "",
+    "apple-mobile-web-app-title": "",
+    "apple-mobile-web-app-capable": "",
+    "apple-mobile-web-app-status-bar-style": "",
+    "format-detection": "",
+  };
+
+  setFirst(meta, "title", titleText);
+
+  // metas
+  for (const tag of metaTags) {
+    const attrs = parseAttrs(tag);
+
+    if (attrs.charset) {
+      setFirst(meta, "charset", decodeHtml(attrs.charset));
+    }
+
+    const name = (attrs.name || "").toLowerCase();
+    const prop = (attrs.property || "").toLowerCase();
+    const httpEquiv = (attrs["http-equiv"] || "").toLowerCase();
+    const content = decodeHtml(attrs.content ?? "");
+
+    if (name === "description") {
+      setFirst(meta, "description", content);
+    } else if (name === "robots") {
+      setFirst(meta, "robots", content);
+    } else if (name === "viewport") {
+      setFirst(meta, "viewport", content);
+    } else if (name === "theme-color") {
+      setFirst(meta, "'theme-color'", content);
+    } else if (name && name in meta) {
+      setFirst(meta, name, content);
+    }
+
+    if (prop && prop in meta) setFirst(meta, prop, content);
+
+    if (httpEquiv === "content-language") setFirst(meta, "og:locale", content);
+  }
+
+  // canonical from <link rel="canonical"...> if present in source
+  for (const tag of linkTags) {
+    const attrs = parseAttrs(tag);
+    const rel = (attrs.rel || "").toLowerCase();
+
+    // console.log(tag);
+
+    if (rel === "canonical" && attrs.href) {
+      setFirst(meta, "canonical", decodeHtml(attrs.href));
+    }
+  }
+
+  // --- fill fallbacks -------------------------------------------------------
+  setFirst(meta, "og:title", meta.title);
+  setFirst(meta, "og:description", meta.description);
+
+  // If canonical is set (or will be), use it for og:url
+  // (We'll set canonical later if missing.)
+  setFirst(meta, "twitter:title", meta["og:title"] || meta.title);
+  setFirst(
+    meta,
+    "twitter:description",
+    meta["og:description"] || meta.description,
+  );
+
+  // image propagation
+  setFirst(meta, "twitter:image", meta["og:image"]);
+  setFirst(meta, "twitter:image:alt", meta["og:image:alt"]);
+  setFirst(meta, "og:image:alt", meta["twitter:image:alt"]);
+
+  // twitter card default
+  setFirst(
+    meta,
+    "twitter:card",
+    meta["twitter:image"] ? "summary_large_image" : "summary",
+  );
+
+  // --- canonical: always DOMAIN + route unless source provided one ----------
+  if (!meta.canonical) {
+    meta.canonical = canonicalFromDomainRoute(route);
+  }
+
+  // --- og:url: set to canonical if missing ---------------------------------
+  if (!meta["og:url"]) {
+    meta["og:url"] = meta.canonical;
+  }
+
+  // --- enforce indexability -------------------------------------------------
+  if (!isIndexable) {
+    setForce(meta, "robots", "noindex, follow");
+  }
+
+  // --- emit tags ------------------------------------------------------------
+  const out = [];
+  for (const [tagName, value] of Object.entries(meta)) {
+    if (value.length === 0) {
+      continue;
+    }
+
+    if (tagName === "charset") {
+      out.push(`<meta charset="${escapeAttr(value || "utf-8")}" />`);
+      continue;
+    }
+
+    if (tagName === "canonical") {
+      out.push(`<link rel="canonical" href="${escapeAttr(meta.canonical)}" />`);
+      continue;
+    }
+
+    if (tagName === "title") {
+      out.push(`<title>${escapeAttr(meta.title)}</title>`);
+      continue;
+    }
+
+    out.push(`<meta property="${tagName}" content="${escapeAttr(value)}" />`);
+  }
+
+  // keep original link/base tags too (favicons, preconnect, modulepreload, ...)
+  // NOTE: kept as-is; they may already contain &amp; etc.
+  out.push(...preservedLinks);
+
+  if (ldJsonScripts.length) {
+    out.push(...ldJsonScripts);
+  } else {
+    const pageLdJson = {
+      ...SINGLETON_LD_JSON_STATE,
+      name: meta.title || undefined,
+      description: meta.description || undefined,
+      "@type": await getType(),
+    };
+
+    out.push(
+      `<script type="application/ld+json">${safeJson(pageLdJson)}</script>`,
+    );
+  }
+
+  out.push(
+    '<meta name="generator" content="Remixer (https://panel.dreamhost.com/ai-editor)">',
+  );
+
+  // App bootstrap last, so the SPA mounts on top of the prerendered content.
+  out.push(...bootstrapScripts);
+
+  const bodyTag = pick(/(<body\b[^>]*>)/i, prerenderedHtml) || "<body>";
+  const bodyInner = pick(/<body\b[^>]*>([\s\S]*?)<\/body>/i, prerenderedHtml);
+
+  const revealCleanupScript = `<script>(function(){var s=document.getElementById("ssg-helmet-reveal");if(!s)return;var r=document.getElementById("root");if(!r){s.remove();return;}var o=new MutationObserver(function(){s.remove();o.disconnect();});o.observe(r,{childList:true});})();</script>`;
+
+  const rawHtml = `<!doctype html>
+<html lang="${escapeAttr(lang)}">
+<head>
+${out.filter(Boolean).join("\n")}
+</head>
+${bodyTag}
+${bodyInner || ""}
+${revealCleanupScript}
+</body>
+</html>`;
+
+  try {
+    return await prettier.format(rawHtml, {
+      parser: "html",
+      printWidth: 120,
+    });
+  } catch (err) {
+    console.error(
+      `[ssg-helmet] [format ${route}] prettier failed, writing unformatted HTML: ${err.message}`,
+    );
+    return rawHtml;
+  }
+}

package/scripts/ssg-helmet/inject-styles-head.mjs

@@ -0,0 +1,38 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import { REMIXER_BUILD_DIR } from "./vars.mjs";
+
+async function findCssFiles(dir) {
+  const entries = await fs.readdir(dir, { withFileTypes: true });
+
+  const files = await Promise.all(
+    entries.map(async (entry) => {
+      const fullPath = path.join(dir, entry.name);
+
+      if (entry.isDirectory()) {
+        return findCssFiles(fullPath);
+      }
+
+      return entry.name.endsWith(".css") ? fullPath : null;
+    }),
+  );
+
+  return files.flat().filter(Boolean);
+}
+
+export async function injectStylesHead(metadataHtml) {
+  const cssFiles = await findCssFiles(REMIXER_BUILD_DIR);
+
+  // The build dir is served at "/", so a file on disk at
+  // REMIXER_BUILD_DIR/assets/x.css is fetched by the browser as /assets/x.css.
+  // Emit a stylesheet <link> per file rather than inlining the CSS.
+  const linkTags = cssFiles
+    .map((file) => {
+      const href =
+        "/" + path.relative(REMIXER_BUILD_DIR, file).split(path.sep).join("/");
+      return `<link rel="stylesheet" href="${href}" />`;
+    })
+    .join("\n");
+
+  return metadataHtml.replace("</head>", `\t${linkTags}\n\t</head>`);
+}