mnfst-render 0.2.8 → 0.3.0

package/manifest.render.mjs

@@ -77,133 +77,128 @@ async function flushAlpineEffects(page) {
 }
 
 /**
- * After locale + route sync, wait until (1) Manifest fires manifest:components-processed for that pass
- * (component swapping finished) and (2) no Alpine data _*_state is still loading / _localeChanging.
- * Listener is registered before dispatch so the initial page load event is ignored.
+ * 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
+ * subscribes to manifest:route-change if window.ManifestRouting already exists at initialize() time;
+ * when the router loads after components, that listener is never registered and no second
+ * manifest:components-processed fires.
  */
 async function waitForManifestPrerenderPipeline(page, { allLocales, currentLocale, timeoutMs }) {
   const result = await page
     .evaluate(
-      ({ localeList, loc, ms }) => {
-        return new Promise((resolve) => {
-          const deadline = Date.now() + ms;
-          let dispatched = false;
-          let sawComponents = false;
-          let poll = 0;
+      async ({ localeList, loc, ms }) => {
+        const sleep = (n) => new Promise((r) => setTimeout(r, n));
+        const deadline = Date.now() + ms;
+
+        const checkData = () => {
+          try {
+            const Alpine = window.Alpine;
+            if (!Alpine?.store) return true;
+            const d = Alpine.store('data');
+            if (!d) return true;
+            if (d._localeChanging) return false;
+            for (const k of Object.keys(d)) {
+              if (!k.startsWith('_') || !k.endsWith('_state')) continue;
+              const s = d[k];
+              if (s && typeof s === 'object' && s.loading) return false;
+            }
+            return true;
+          } catch {
+            return true;
+          }
+        };
 
-          const checkData = () => {
+        try {
+          const locales = Array.isArray(localeList) ? localeList : [];
+          if (loc && typeof loc === 'string') {
             try {
-              const Alpine = window.Alpine;
-              if (!Alpine?.store) return true;
-              const d = Alpine.store('data');
-              if (!d) return true;
-              if (d._localeChanging) return false;
-              for (const k of Object.keys(d)) {
-                if (!k.startsWith('_') || !k.endsWith('_state')) continue;
-                const s = d[k];
-                if (s && typeof s === 'object' && s.loading) return false;
-              }
-              return true;
+              document.documentElement.lang = loc;
             } catch {
-              return true;
+              /* no-op */
             }
-          };
-
-          const skipComponentsWait = () =>
-            !window.__manifestComponentsInitialized || !window.ManifestComponentsSwapping;
-
-          const cleanup = () => {
-            if (poll) clearInterval(poll);
-            window.removeEventListener('manifest:components-processed', onComponents);
-          };
-
-          const tryFinish = () => {
-            if (!dispatched) return;
-            if (skipComponentsWait()) {
-              sawComponents = true;
+          }
+          const store = typeof Alpine !== 'undefined' && Alpine.store ? Alpine.store('locale') : null;
+          if (store) {
+            if (!Array.isArray(store.available) || store.available.length === 0) {
+              store.available = locales.slice();
+            } else {
+              store.available = Array.from(new Set([...store.available, ...locales]));
             }
-            if (sawComponents && checkData()) {
-              cleanup();
-              resolve({ ok: true });
+            if (loc && typeof loc === 'string') {
+              store.current = loc;
             }
-          };
+          }
 
-          function onComponents() {
-            if (!dispatched) return;
-            sawComponents = true;
-            tryFinish();
+          if (loc && typeof loc === 'string') {
+            window.dispatchEvent(new CustomEvent('localechange', { detail: { locale: loc } }));
           }
 
-          window.addEventListener('manifest:components-processed', onComponents);
-
-          poll = setInterval(() => {
-            if (Date.now() > deadline) {
-              cleanup();
-              resolve({
-                ok: false,
-                reason: 'timeout',
-                sawComponents,
-                dataOk: checkData(),
-                skippedComponents: skipComponentsWait(),
-              });
-              return;
-            }
-            tryFinish();
-          }, 50);
+          const rawRoute = window.ManifestRoutingNavigation?.getCurrentRoute?.() ?? window.location.pathname;
+          const clean = String(rawRoute || '/').replace(/^\/+|\/+$/g, '');
+          const parts = clean ? clean.split('/') : [];
+          const logical =
+            parts.length > 0 && locales.includes(parts[0])
+              ? '/' + parts.slice(1).join('/')
+              : clean
+                ? '/' + clean
+                : '/';
+          const to = logical === '//' ? '/' : logical;
+          const normalizedPath =
+            typeof to === 'string' && to !== '/' ? to.replace(/^\/|\/$/g, '') : '/';
+
+          window.dispatchEvent(
+            new CustomEvent('manifest:route-change', {
+              detail: {
+                from: to,
+                to,
+                normalizedPath,
+              },
+            })
+          );
+          window.dispatchEvent(new PopStateEvent('popstate'));
 
-          try {
-            const locales = Array.isArray(localeList) ? localeList : [];
-            if (loc && typeof loc === 'string') {
-              try {
-                document.documentElement.lang = loc;
-              } catch {
-                /* no-op */
-              }
-            }
-            const store = typeof Alpine !== 'undefined' && Alpine.store ? Alpine.store('locale') : null;
-            if (store) {
-              if (!Array.isArray(store.available) || store.available.length === 0) {
-                store.available = locales.slice();
-              } else {
-                store.available = Array.from(new Set([...store.available, ...locales]));
-              }
-              if (loc && typeof loc === 'string') {
-                store.current = loc;
-              }
+          if (window.ManifestComponentsSwapping?.processAll) {
+            try {
+              await window.ManifestComponentsSwapping.processAll(normalizedPath);
+            } catch (e) {
+              return { ok: false, reason: 'processAll-error', message: String(e?.message || e) };
             }
+          }
 
-            if (loc && typeof loc === 'string') {
-              window.dispatchEvent(new CustomEvent('localechange', { detail: { locale: loc } }));
+          while (Date.now() < deadline) {
+            if (checkData()) {
+              return { ok: true };
             }
-
-            const rawRoute = window.ManifestRoutingNavigation?.getCurrentRoute?.() ?? window.location.pathname;
-            const clean = String(rawRoute || '/').replace(/^\/+|\/+$/g, '');
-            const parts = clean ? clean.split('/') : [];
-            const logical =
-              parts.length > 0 && locales.includes(parts[0])
-                ? '/' + parts.slice(1).join('/')
-                : clean
-                  ? '/' + clean
-                  : '/';
-            const to = logical === '//' ? '/' : logical;
-
-            dispatched = true;
-            window.dispatchEvent(
-              new CustomEvent('manifest:route-change', {
-                detail: {
-                  from: to,
-                  to,
-                  normalizedPath: typeof to === 'string' && to !== '/' ? to.replace(/^\/|\/$/g, '') : '/',
-                },
-              })
-            );
-            window.dispatchEvent(new PopStateEvent('popstate'));
-            tryFinish();
-          } catch (err) {
-            cleanup();
-            resolve({ ok: false, reason: 'error', message: String(err?.message || err) });
+            await sleep(50);
           }
-        });
+          return {
+            ok: false,
+            reason: 'timeout',
+            dataOk: checkData(),
+            hadSwapping: !!window.ManifestComponentsSwapping?.processAll,
+          };
+        } catch (err) {
+          return { ok: false, reason: 'error', message: String(err?.message || err) };
+        }
       },
       {
         localeList: allLocales,
@@ -216,7 +211,7 @@ async function waitForManifestPrerenderPipeline(page, { allLocales, currentLocal
   if (!result?.ok) {
     const parts = [`prerender: pipeline wait incomplete (${result?.reason ?? 'unknown'})`];
     if (result?.dataOk === false) parts.push('data still loading');
-    if (result?.sawComponents === false && !result?.skippedComponents) parts.push('no manifest:components-processed');
+    if (result?.message) parts.push(result.message);
     process.stdout.write(`${parts.join('; ')}\n`);
   }
 }
@@ -1763,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] || '') : '';
@@ -1806,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] || '') : '';
@@ -1880,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;
           }
         });
       });
@@ -1896,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.8",
+  "version": "0.3.0",
   "description": "Render Manifest sites to static HTML for SEO",
   "type": "module",
   "bin": {