mnfst-render 0.2.2 → 0.2.4

package/manifest.render.mjs

@@ -482,11 +482,15 @@ function extractUtilityStyleBlocks(html) {
   return { html: out, blocks };
 }
 
-function injectAfterHeadOpen(html, snippet) {
+function injectBeforeHeadClose(html, snippet) {
   if (!snippet) return html;
   const hrefMatch = snippet.match(/href=["']([^"']+)["']/);
-  if (hrefMatch && html.includes(hrefMatch[1])) return html;
-  return html.replace(/<head([^>]*)>/i, `<head$1>\n${snippet}\n`);
+  const href = hrefMatch ? hrefMatch[1] : null;
+  let out = html;
+  if (href) {
+    out = out.replace(new RegExp(`\\s*<link[^>]*href=["']${href.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}["'][^>]*>\\s*`, 'gi'), '\n');
+  }
+  return out.replace(/<\/head>/i, `${snippet}\n</head>`);
 }
 
 function indexHtmlUsesTailwind(rootDir) {
@@ -663,11 +667,10 @@ function postProcessInjectStylesheetLink(outputDir, filename) {
   const files = walkHtmlFiles(outputDir);
   for (const file of files) {
     let html = readFileSync(file, 'utf8');
-    if (html.includes(filename)) continue;
     const depth = depthFromOutputRoot(outputDir, file);
     const prefix = depth ? '../'.repeat(depth) : '';
     const tag = `<link rel="stylesheet" href="${prefix}${filename}">`;
-    html = injectAfterHeadOpen(html, tag);
+    html = injectBeforeHeadClose(html, tag);
     writeFileSync(file, html, 'utf8');
   }
 }
@@ -1218,6 +1221,7 @@ async function runPrerender(config) {
   const timeout = config.wait ?? 15000;
   const concurrency = config.concurrency;
   const pathTotal = pathList.length;
+  const failedPaths = [];
   process.stdout.write(`Prerendering ${pathTotal} path(s)...\n`);
 
   async function processPath(pathSeg, pathIndex) {
@@ -1331,7 +1335,7 @@ async function runPrerender(config) {
           // no-op
         }
       }, { allLocales: locales, currentLocale }).catch(() => { });
-      await page.waitForTimeout(60).catch(() => { });
+      await new Promise((resolve) => setTimeout(resolve, 60));
 
       // Optional extra delay so in-page async (e.g. fetch() in x-init for client logos) can complete before snapshot.
       if (config.waitAfterIdle > 0) {
@@ -1449,6 +1453,46 @@ async function runPrerender(config) {
         });
       });
 
+      // For static clones kept from x-for templates, remove loop-scope bindings (card/title/etc)
+      // so Alpine doesn't re-evaluate them outside template scope in production.
+      await page.evaluate(() => {
+        const loopVarRegex = /^\s*(?:\(\s*([A-Za-z_$][\w$]*)(?:\s*,\s*([A-Za-z_$][\w$]*))?\s*\)|([A-Za-z_$][\w$]*))\s+in\s+/;
+        const bindingAttrRegex = /^(?:x-bind:|:|x-text|x-html|x-show|x-if|x-model|x-effect|x-on:|@)/;
+        const hasVar = (expr, varName) => varName && new RegExp(`\\b${varName}\\b`).test(expr || '');
+        const stripLoopBindings = (el, itemVar, indexVar) => {
+          const nodes = [el, ...Array.from(el.querySelectorAll('*'))];
+          for (const node of nodes) {
+            const attrs = node.attributes ? Array.from(node.attributes) : [];
+            for (const attr of attrs) {
+              if (!bindingAttrRegex.test(attr.name)) continue;
+              const expr = attr.value || '';
+              if (hasVar(expr, itemVar) || hasVar(expr, indexVar)) {
+                node.removeAttribute(attr.name);
+              }
+            }
+          }
+        };
+
+        document.querySelectorAll('template[x-for]').forEach((tpl) => {
+          const xFor = (tpl.getAttribute('x-for') || '').trim();
+          const m = xFor.match(loopVarRegex);
+          const itemVar = m ? (m[1] || m[3] || '') : '';
+          const indexVar = m ? (m[2] || '') : '';
+          if (!itemVar && !indexVar) return;
+
+          const first = tpl.content?.firstElementChild;
+          if (!first) return;
+          const tag = first.tagName;
+
+          let next = tpl.nextElementSibling;
+          while (next) {
+            if (next.tagName !== tag) break;
+            stripLoopBindings(next, itemVar, indexVar);
+            next = next.nextElementSibling;
+          }
+        });
+      });
+
       // Remove elements marked data-dynamic (so they are not in static HTML; client will render them).
       // Skip <template> since we only collapse those above; other elements and their subtree are removed.
       await page.evaluate(() => {
@@ -1480,7 +1524,7 @@ async function runPrerender(config) {
         for (const b of extracted.blocks) utilityBlocks.push(b);
       }
       if (tailwindBuilt) {
-        html = injectAfterHeadOpen(html, '<link rel="stylesheet" href="/prerender.tailwind.css">');
+        html = injectBeforeHeadClose(html, '<link rel="stylesheet" href="/prerender.tailwind.css">');
       }
       html = stripDuplicatedLoopDirectives(html);
       html = stripPrerenderedXDataDirectives(html);
@@ -1501,7 +1545,13 @@ async function runPrerender(config) {
       mkdirSync(outDir, { recursive: true });
       writeFileSync(outFile, html, 'utf8');
     } catch (err) {
-      // path failed (swallowed to allow other paths to complete)
+      failedPaths.push({
+        path: displayPath,
+        message: err && err.message ? err.message : String(err)
+      });
+      if (failedPaths.length <= 10) {
+        process.stderr.write(`prerender: failed ${displayPath}: ${failedPaths[failedPaths.length - 1].message}\n`);
+      }
     } finally {
       await page.close();
     }
@@ -1523,6 +1573,11 @@ async function runPrerender(config) {
     await browser.close();
   }
 
+  if (failedPaths.length > 0) {
+    const sample = failedPaths.slice(0, 5).map((f) => `${f.path}: ${f.message}`).join(' | ');
+    throw new Error(`prerender failed for ${failedPaths.length}/${pathTotal} paths. Sample: ${sample}`);
+  }
+
   if (bundleUtilities) {
     const utilMerged = mergeUtilityCssBlocks(utilityBlocks);
     if (utilMerged.trim()) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mnfst-render",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Render Manifest sites to static HTML for SEO",
   "type": "module",
   "bin": {