mnfst-render 0.4.4 → 0.4.6

package/manifest.render.mjs

@@ -2153,6 +2153,48 @@ async function runPrerender(config) {
         pushDebug({ path: displayPath, stage: 'post-xfor-mark', metrics: afterMark });
       }
 
+      // For static x-for clones that contain data-hydrate elements, inject the loop-scope
+      // variable as x-data on the clone element itself. This ensures that after the loop
+      // template is removed, data-hydrate bindings referencing loop variables (e.g.
+      // plan?.price?.[currency]?.[frequency]) continue to work at runtime via the injected scope.
+      // The parent Alpine scope (e.g. <main x-data="{ currency, frequency }") remains accessible.
+      await page.evaluate(() => {
+        const loopVarRx = /^\s*(?:\(\s*([A-Za-z_$][\w$]*)(?:\s*,\s*([A-Za-z_$][\w$]*))?\s*\)|([A-Za-z_$][\w$]*))\s+in\s+/;
+        document.querySelectorAll('template[x-for][data-prerender-static-generated="1"]').forEach((tpl) => {
+          if (tpl.hasAttribute('data-prerender-hydrate') || tpl.closest('[data-prerender-hydrate]')) return;
+          const xFor = (tpl.getAttribute('x-for') || '').trim();
+          const m = xFor.match(loopVarRx);
+          const itemVar = m ? (m[1] || m[3] || '') : '';
+          if (!itemVar) return;
+          const first = tpl.content && tpl.content.firstElementChild;
+          if (!first) return;
+          const tag = first.tagName;
+          const cls = first.getAttribute('class') || '';
+          let n = tpl.nextElementSibling;
+          while (n && n.tagName === tag && (n.getAttribute('class') || '') === cls) {
+            // Only process clones that contain data-hydrate descendants
+            if (
+              !n.hasAttribute('x-data') &&
+              (n.hasAttribute('data-prerender-hydrate') || n.querySelector('[data-prerender-hydrate]'))
+            ) {
+              try {
+                const A = window.Alpine;
+                if (A && typeof A.$data === 'function') {
+                  const scope = A.$data(n);
+                  if (scope && Object.prototype.hasOwnProperty.call(scope, itemVar)) {
+                    const raw = scope[itemVar];
+                    // Serialize only own-enumerable properties to avoid circular refs / proxies
+                    const snapshot = JSON.parse(JSON.stringify(raw));
+                    n.setAttribute('x-data', JSON.stringify({ [itemVar]: snapshot }));
+                  }
+                }
+              } catch { /* serialisation failed — leave binding as-is */ }
+            }
+            n = n.nextElementSibling;
+          }
+        });
+      });
+
       // 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.)

package/package.json

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