mnfst-render 0.3.1 → 0.3.3

package/manifest.render.mjs

@@ -895,25 +895,37 @@ function stripPrerenderedXDataDirectives(html) {
 
 // --- Don't bake Alpine-only state into the snapshot; only $x-driven content should be prerendered.
 //    For any :attr or x-bind:attr whose expression does NOT contain $x, remove the literal attr from the tag
-//    so Alpine re-evaluates on load. Bindings that use $x are left as-is (content stays for SEO).
+//    so Alpine re-evaluates on load. Bindings that use $x are left as-is (content stays for SEO), except
+//    :style / x-bind:style with $x: those must be removed when a baked inline style exists, or Alpine will
+//    overwrite prerendered values (e.g. mask-image) on hydrate when $x is briefly empty in production.
 //    Use (?<!:) so we only strip literal attr=, not :attr= (e.g. class= not :class=).
 //    Never touch <script> tags (loader + injected plugins must be preserved; static HTML still runs them).
 function stripPrerenderDynamicBindings(html) {
   return html.replace(/<(\w+)([^>]*)>/g, (match, tagName, attrsStr) => {
     if (tagName.toLowerCase() === 'script') return match;
     const isAnchor = tagName.toLowerCase() === 'a';
+    let workAttrs = attrsStr;
+    workAttrs = workAttrs.replace(/\s+:style=(?:"([^"]*)"|'([^']*)')/gi, (sub, d, s) => {
+      const val = (d !== undefined ? d : s) || '';
+      return val.indexOf('$x') !== -1 ? '' : sub;
+    });
+    workAttrs = workAttrs.replace(/\s+x-bind:style=(?:"([^"]*)"|'([^']*)')/gi, (sub, d, s) => {
+      const val = (d !== undefined ? d : s) || '';
+      return val.indexOf('$x') !== -1 ? '' : sub;
+    });
+
     const toStrip = new Set();
     const bindingRegex = /(?:^|\s)(?::|x-bind:)(\w+)=(?:"([^"]*)"|'([^']*)')/g;
     let m;
-    while ((m = bindingRegex.exec(attrsStr)) !== null) {
+    while ((m = bindingRegex.exec(workAttrs)) !== null) {
       const attrName = (m[1] || '').toLowerCase();
       // Keep href on anchors so prerendered static navigation stays valid.
       if (attrName === 'class' || attrName === 'style' || (isAnchor && attrName === 'href')) continue;
       const val = (m[2] !== undefined ? m[2] : m[3]) || '';
       if (val.indexOf('$x') === -1) toStrip.add(attrName);
     }
-    if (toStrip.size === 0) return match;
-    let newAttrs = attrsStr;
+    if (toStrip.size === 0 && workAttrs === attrsStr) return match;
+    let newAttrs = workAttrs;
     for (const attr of toStrip) {
       const esc = attr.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
       newAttrs = newAttrs.replace(new RegExp(`\\s*(?<!:)${esc}="[^"]*"`, 'gi'), '');
@@ -1785,7 +1797,8 @@ async function runPrerender(config) {
       // 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:|@)/;
+        // Include x-init: expanded clones still had x-init="getDescription(article)" etc.; Alpine then throws (article undefined).
+        const bindingAttrRegex = /^(?:x-bind:|:|x-text|x-html|x-show|x-if|x-model|x-effect|x-init|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('*'))];
@@ -1879,7 +1892,7 @@ async function runPrerender(config) {
       // 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 bindingAttrRegex = /^(?:x-bind:|:|x-text|x-html|x-show|x-if|x-model|x-effect|x-init|x-on:|@)/;
         const hasVar = (expr, varName) => varName && new RegExp(`\\b${varName}\\b`).test(expr || '');
         const elementReferencesLoopScope = (el, itemVar, indexVar) => {
           if (!el) return false;

package/package.json

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