mnfst-render 0.2.9 → 0.3.0

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
@@ -1739,37 +1758,49 @@ 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.
+      // 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 +1813,44 @@ 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.
+      // 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(() => {
         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 +1863,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 +1885,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.0",
   "description": "Render Manifest sites to static HTML for SEO",
   "type": "module",
   "bin": {