mnfst-render 0.2.3 → 0.2.5

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');
   }
 }
@@ -1382,6 +1385,22 @@ async function runPrerender(config) {
           const forceCollapse = explicit || inferred;
           if (!forceCollapse) {
             tpl.removeAttribute('data-prerender-collapsed');
+            tpl.removeAttribute('data-prerender-static-generated');
+            // Static mode: if prerender produced concrete siblings, mark template for removal later.
+            const first = tpl.content?.firstElementChild;
+            if (first) {
+              const tag = first.tagName;
+              let next = tpl.nextElementSibling;
+              let generatedCount = 0;
+              while (next) {
+                if (next.tagName !== tag) break;
+                generatedCount++;
+                next = next.nextElementSibling;
+              }
+              if (generatedCount > 0) {
+                tpl.setAttribute('data-prerender-static-generated', '1');
+              }
+            }
             return; // keep prerendered list for SEO
           }
           tpl.setAttribute('data-prerender-collapsed', '1');
@@ -1402,6 +1421,14 @@ async function runPrerender(config) {
         });
       });
 
+      // Remove static x-for templates once static clones are generated.
+      // This prevents Alpine from rendering duplicate lists at runtime.
+      await page.evaluate(() => {
+        document.querySelectorAll('template[x-for][data-prerender-static-generated="1"]').forEach((tpl) => {
+          tpl.remove();
+        });
+      });
+
       // Remove orphan x-for clones that still reference loop-scope vars (e.g. image/index)
       // outside their template scope. These throw Alpine errors in live static hosting.
       await page.evaluate(() => {
@@ -1450,6 +1477,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(() => {
@@ -1481,7 +1548,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);

package/package.json

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