mnfst-render 0.2.9 → 0.3.1

package/manifest.render.mjs

@@ -76,6 +76,25 @@ async function flushAlpineEffects(page) {
     .catch(() => {});
 }
 
+/**
+ * Same logical path → normalizedPath as waitForManifestPrerenderPipeline and
+ * manifest.router.visibility initialize (matchesCondition first argument).
+ */
+function logicalPathToVisibilityNormalizedPath(pathSeg, locales) {
+  const pathname = pathSeg ? `/${pathSeg}` : '/';
+  const clean = String(pathname || '/').replace(/^\/+|\/+$/g, '');
+  const parts = clean ? clean.split('/') : [];
+  const localeList = Array.isArray(locales) ? locales : [];
+  const logical =
+    parts.length > 0 && localeList.includes(parts[0])
+      ? `/${parts.slice(1).join('/')}`
+      : clean
+        ? `/${clean}`
+        : '/';
+  const to = logical === '//' ? '/' : logical;
+  return typeof to === 'string' && to !== '/' ? to.replace(/^\/|\/$/g, '') : '/';
+}
+
 /**
  * After locale + route sync: run component swapping explicitly, then wait until Alpine data stores
  * are settled. We call ManifestComponentsSwapping.processAll() directly because swapping only
@@ -1645,6 +1664,8 @@ async function runPrerender(config) {
           return {
             templateCount: templates.length,
             nonCollapsedTemplateCount: templates.filter((t) => t.getAttribute('data-prerender-collapsed') !== '1').length,
+            hint:
+              'entries.staticGenerated is read before the x-for mark pass and is always false; use stage post-xfor-mark for data-prerender-static-generated.',
             entries,
             listDiagnostics,
           };
@@ -1739,37 +1760,69 @@ 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();
-        });
-      });
+      if (config.debugPrerender) {
+        const afterMark = await page.evaluate(() => {
+          const rows = [];
+          for (const tpl of document.querySelectorAll('template[x-for]')) {
+            rows.push({
+              xFor: (tpl.getAttribute('x-for') || '').slice(0, 140),
+              collapsed: tpl.getAttribute('data-prerender-collapsed') === '1',
+              staticGenerated: tpl.getAttribute('data-prerender-static-generated') === '1',
+            });
+          }
+          return {
+            templateCount: rows.length,
+            staticMarkedCount: rows.filter((r) => r.staticGenerated).length,
+            collapsedCount: rows.filter((r) => r.collapsed).length,
+            entries: rows.slice(0, 60),
+          };
+        }).catch(() => null);
+        pushDebug({ path: displayPath, stage: 'post-xfor-mark', metrics: afterMark });
+      }
 
-      // 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.
+      // Strip loop-scope bindings from x-for clones while <template> nodes still exist.
+      // (If we remove static templates first, querySelectorAll('template[x-for]') misses them and clones
+      // keep x-text/x-bind referencing card/item — Alpine then mutates or errors on the static HTML.)
       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 elementReferencesLoopScope = (el, itemVar, indexVar) => {
-          if (!el) return false;
+        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)) return true;
+              if (hasVar(expr, itemVar) || hasVar(expr, indexVar)) {
+                const name = attr.name;
+                if (name === 'x-text' || name === 'x-html') {
+                  if ((node.textContent || '').trim() || (node.innerHTML || '').trim()) {
+                    node.removeAttribute(name);
+                  }
+                  continue;
+                }
+                if (name === 'x-show' || name === 'x-if') {
+                  node.removeAttribute(name);
+                  continue;
+                }
+                let boundAttr = '';
+                if (name.startsWith(':')) boundAttr = name.slice(1);
+                else if (name.startsWith('x-bind:')) boundAttr = name.slice('x-bind:'.length);
+                if (boundAttr) {
+                  const concrete = node.getAttribute(boundAttr);
+                  if (concrete != null && String(concrete).trim() !== '') {
+                    node.removeAttribute(name);
+                  }
+                  continue;
+                }
+                node.removeAttribute(name);
+              }
             }
           }
-          return false;
         };
 
-        // Only clean up templates we intentionally collapsed above.
-        // Running this on all x-for templates can remove valid prerendered list items.
-        document.querySelectorAll('template[x-for][data-prerender-collapsed="1"]').forEach((tpl) => {
+        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] || '') : '';
@@ -1782,68 +1835,69 @@ async function runPrerender(config) {
 
           let next = tpl.nextElementSibling;
           while (next) {
-            const sameTag = next.tagName === tag;
-            if (!sameTag) break;
-
-            const referencesLoopScope = elementReferencesLoopScope(next, itemVar, indexVar);
-
-            const toRemove = next;
+            if (next.tagName !== tag) break;
+            stripLoopBindings(next, itemVar, indexVar);
             next = next.nextElementSibling;
-            if (referencesLoopScope) toRemove.remove();
-            else break;
           }
         });
       });
 
-      // 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.
+      // Remove static x-for templates once static clones are generated.
+      // Alpine registers a cleanup on <template x-for> that removes every node in _x_lookup when the
+      // template is detached — so tpl.remove() alone deletes all sibling clones (empty grids in output).
+      // Replace each clone with a deep cloneNode first so teardown targets detached nodes; copies stay in DOM.
+      await page.evaluate(() => {
+        const A = window.Alpine;
+        const runBatch = typeof A?.mutateDom === 'function' ? (fn) => A.mutateDom(fn) : (fn) => fn();
+        runBatch(() => {
+          document.querySelectorAll('template[x-for][data-prerender-static-generated="1"]').forEach((tpl) => {
+            const parent = tpl.parentNode;
+            if (!parent) {
+              tpl.remove();
+              return;
+            }
+            const first = tpl.content?.firstElementChild;
+            if (!first) {
+              tpl.remove();
+              return;
+            }
+            const tag = first.tagName;
+            const cls = first.getAttribute('class') || '';
+            let n = tpl.nextElementSibling;
+            while (n && n.tagName === tag) {
+              if ((n.getAttribute('class') || '') !== cls) break;
+              const next = n.nextElementSibling;
+              n.replaceWith(n.cloneNode(true));
+              n = next;
+            }
+            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(() => {
         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 elementReferencesLoopScope = (el, itemVar, indexVar) => {
+          if (!el) return false;
           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)) {
-                const name = attr.name;
-                // Remove text/html bindings only when static content already exists.
-                if (name === 'x-text' || name === 'x-html') {
-                  if ((node.textContent || '').trim() || (node.innerHTML || '').trim()) {
-                    node.removeAttribute(name);
-                  }
-                  continue;
-                }
-
-                // Remove x-show/x-if if they reference loop vars; cloned node is now static.
-                if (name === 'x-show' || name === 'x-if') {
-                  node.removeAttribute(name);
-                  continue;
-                }
-
-                // For :attr / x-bind:attr, only remove binding if a concrete attr is present.
-                let boundAttr = '';
-                if (name.startsWith(':')) boundAttr = name.slice(1);
-                else if (name.startsWith('x-bind:')) boundAttr = name.slice('x-bind:'.length);
-                if (boundAttr) {
-                  const concrete = node.getAttribute(boundAttr);
-                  if (concrete != null && String(concrete).trim() !== '') {
-                    node.removeAttribute(name);
-                  }
-                  continue;
-                }
-
-                // Event/other loop-scoped bindings are unsafe on static clones.
-                node.removeAttribute(name);
-              }
+              if (hasVar(expr, itemVar) || hasVar(expr, indexVar)) return true;
             }
           }
+          return false;
         };
 
-        document.querySelectorAll('template[x-for]').forEach((tpl) => {
+        // Only clean up templates we intentionally collapsed above.
+        // Running this on all x-for templates can remove valid prerendered list items.
+        document.querySelectorAll('template[x-for][data-prerender-collapsed="1"]').forEach((tpl) => {
           const xFor = (tpl.getAttribute('x-for') || '').trim();
           const m = xFor.match(loopVarRegex);
           const itemVar = m ? (m[1] || m[3] || '') : '';
@@ -1856,9 +1910,15 @@ async function runPrerender(config) {
 
           let next = tpl.nextElementSibling;
           while (next) {
-            if (next.tagName !== tag) break;
-            stripLoopBindings(next, itemVar, indexVar);
+            const sameTag = next.tagName === tag;
+            if (!sameTag) break;
+
+            const referencesLoopScope = elementReferencesLoopScope(next, itemVar, indexVar);
+
+            const toRemove = next;
             next = next.nextElementSibling;
+            if (referencesLoopScope) toRemove.remove();
+            else break;
           }
         });
       });
@@ -1872,6 +1932,15 @@ async function runPrerender(config) {
         toRemove.forEach((el) => { if (document.contains(el)) el.remove(); });
       });
 
+      const visibilityNormalizedPath = logicalPathToVisibilityNormalizedPath(pathSeg, locales);
+      await page.evaluate((np) => {
+        try {
+          window.ManifestRoutingVisibility?.processRouteVisibility?.(np);
+        } catch {
+          /* no-op */
+        }
+      }, visibilityNormalizedPath);
+
       // Remove route-hidden content ([x-route] with inline style display:none) so each prerendered page contains only that route's HTML.
       await page.evaluate(() => {
         const reDisplayNone = /\bdisplay\s*:\s*none\b/i;

package/package.json

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