mnfst-render 0.3.8 → 0.4.0

package/manifest.render.mjs

@@ -897,6 +897,10 @@ function stripDuplicatedLoopDirectives(html) {
   return html;
 }
 
+function isHydrateMarkedAttrs(attrsStr) {
+  return /\sdata-prerender-hydrate(?:\s*=|[\s>])/i.test(attrsStr || '');
+}
+
 // --- Strip x-text and x-html that reference $x when static/SEO (content already in snapshot).
 //    Do NOT strip when expression is user-driven: $route(, $search, $query. Those stay so Alpine can update.
 //    Same rule for :attr in stripPrerenderDynamicBindings: bindings with $x are kept (content stays for SEO).
@@ -906,9 +910,13 @@ function stripPrerenderedXDataDirectives(html) {
     if (expr.includes('$search') || expr.includes('$query')) return false;
     return true;
   }
-  let out = html.replace(/\s+x-text="([^"]*\$x[^"]*)"/g, (match, expr) => (isStatic(expr) ? '' : match));
-  out = out.replace(/\s+x-html="([^"]*\$x[^"]*)"/g, (match, expr) => (isStatic(expr) ? '' : match));
-  return out;
+  return html.replace(/<(\w+)([^>]*)>/g, (full, tag, attrs) => {
+    if (isHydrateMarkedAttrs(attrs)) return full;
+    let outAttrs = attrs;
+    outAttrs = outAttrs.replace(/\s+x-text="([^"]*\$x[^"]*)"/g, (match, expr) => (isStatic(expr) ? '' : match));
+    outAttrs = outAttrs.replace(/\s+x-html="([^"]*\$x[^"]*)"/g, (match, expr) => (isStatic(expr) ? '' : match));
+    return `<${tag}${outAttrs}>`;
+  });
 }
 
 // --- Don't bake Alpine-only state into the snapshot; only $x-driven content should be prerendered.
@@ -921,6 +929,7 @@ function stripPrerenderedXDataDirectives(html) {
 function stripPrerenderDynamicBindings(html) {
   return html.replace(/<(\w+)([^>]*)>/g, (match, tagName, attrsStr) => {
     if (tagName.toLowerCase() === 'script') return match;
+    if (isHydrateMarkedAttrs(attrsStr)) return match;
     const isAnchor = tagName.toLowerCase() === 'a';
     const isImg = tagName.toLowerCase() === 'img';
     let workAttrs = attrsStr;
@@ -960,6 +969,7 @@ function stripPrerenderDynamicBindings(html) {
 // Drop :src / x-bind:src when img already has a baked src= (x-for / iterator expressions break hydrate).
 function stripRedundantImgSrcBindings(html) {
   return html.replace(/<img\b([^>]*)>/gi, (full, attrs) => {
+    if (isHydrateMarkedAttrs(attrs)) return full;
     const srcM = attrs.match(/\ssrc=(["'])([\s\S]*?)\1/i);
     if (!srcM || !String(srcM[2] || '').trim()) return full;
     if (!/\s:src\s*=|\sx-bind:src\s*=/i.test(attrs)) return full;
@@ -978,6 +988,7 @@ function stripRedundantImgSrcBindings(html) {
 // loop/item expressions while the attribute remains for CSS (e.g. inline layout that keys off [x-icon]).
 function stripResolvedXIconDirectives(html) {
   return html.replace(/<i\b([^>]*)>([\s\S]*?)<\/i>/gi, (full, attrs, inner) => {
+    if (isHydrateMarkedAttrs(attrs)) return full;
     if (!/\sx-icon\s*=/i.test(attrs)) return full;
     if (!/<svg\b/i.test(inner) || !/\bdata-icon\s*=/i.test(inner)) return full;
     const cleaned = attrs
@@ -989,6 +1000,10 @@ function stripResolvedXIconDirectives(html) {
   });
 }
 
+function stripPrerenderHydrateMarkers(html) {
+  return html.replace(/\sdata-prerender-hydrate(?:=(?:"[^"]*"|'[^']*'|[^\s>]+))?/gi, '');
+}
+
 function markPrerenderedManifestComponents(html) {
   return html.replace(/<(x-[a-z][\w-]*)([^>]*)>/gi, (full, tag, attrs) => {
     const a = attrs || '';
@@ -1385,7 +1400,7 @@ function startStaticServer(rootDir) {
 // --- Copy project into output so website is self-contained (e.g. for Appwrite). ---
 const COPY_EXCLUDE = new Set([
   'node_modules', '.git', 'package.json', 'package-lock.json',
-  'index.html', 'prerender.mjs', 'prerender.js',
+  'index.html', 'prerender.mjs', 'prerender.js', '_redirects',
 ]);
 
 function copyProjectIntoDist(rootResolved, outputResolved) {
@@ -1795,15 +1810,27 @@ async function runPrerender(config) {
         });
       });
 
+      // Mark data-hydrate islands so static compile transforms skip them.
+      await page.evaluate(() => {
+        document.querySelectorAll('[data-hydrate]').forEach((root) => {
+          root.setAttribute('data-prerender-hydrate', '1');
+          root.querySelectorAll('*').forEach((el) => el.setAttribute('data-prerender-hydrate', '1'));
+        });
+      });
+
       // x-for lists: keep static lists in the HTML for SEO; collapse only dynamic lists so Alpine re-renders.
-      // Explicit: data-dynamic or data-prerender="dynamic"|"skip". Inferred: x-for uses $search/$query,
+      // Explicit: data-prerender="dynamic"|"skip". Inferred: x-for uses $search/$query,
       // $url, $auth, or iterates over getter names (filtered*, results, searchResults). See docs prerender + local.data.
       await page.evaluate(() => {
         document.querySelectorAll('template[x-for]').forEach((tpl) => {
+          if (tpl.hasAttribute('data-prerender-hydrate') || tpl.closest('[data-prerender-hydrate]')) {
+            tpl.removeAttribute('data-prerender-collapsed');
+            tpl.removeAttribute('data-prerender-static-generated');
+            return;
+          }
           const xFor = (tpl.getAttribute('x-for') || '').trim();
           const prerender = (tpl.getAttribute('data-prerender') || '').toLowerCase();
-          const hasDataDynamic = tpl.hasAttribute('data-dynamic');
-          const explicit = hasDataDynamic || prerender === 'dynamic' || prerender === 'skip';
+          const explicit = prerender === 'dynamic' || prerender === 'skip';
           const inferred = xFor.includes('$search') || xFor.includes('$query') ||
             xFor.includes('$url') || xFor.includes('$auth') ||
             /\bin\s+(filtered\w*|results|searchResults)\b/.test(xFor);
@@ -1917,6 +1944,7 @@ async function runPrerender(config) {
         };
 
         document.querySelectorAll('template[x-for]').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(loopVarRegex);
           const itemVar = m ? (m[1] || m[3] || '') : '';
@@ -1945,6 +1973,7 @@ async function runPrerender(config) {
         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) => {
+            if (tpl.hasAttribute('data-prerender-hydrate') || tpl.closest('[data-prerender-hydrate]')) return;
             const parent = tpl.parentNode;
             if (!parent) {
               tpl.remove();
@@ -2017,15 +2046,6 @@ async function runPrerender(config) {
         });
       });
 
-      // Remove elements marked data-dynamic (so they are not in static HTML; client will render them).
-      // Skip <template> since we only collapse those above; other elements and their subtree are removed.
-      await page.evaluate(() => {
-        const toRemove = Array.from(document.querySelectorAll('[data-dynamic]')).filter((el) => el.tagName !== 'TEMPLATE');
-        const depth = (el) => { let d = 0; let n = el; while (n && n !== document.body) { d++; n = n.parentElement; } return d; };
-        toRemove.sort((a, b) => depth(a) - depth(b));
-        toRemove.forEach((el) => { if (document.contains(el)) el.remove(); });
-      });
-
       const visibilityNormalizedPath = logicalPathToVisibilityNormalizedPath(pathSeg, locales);
       await page.evaluate((np) => {
         try {
@@ -2081,6 +2101,7 @@ async function runPrerender(config) {
       html = stripRedundantImgSrcBindings(html);
       html = stripEmptyInlineMaskStyles(html);
       html = stripResolvedXIconDirectives(html);
+      html = stripPrerenderHydrateMarkers(html);
       html = rewriteHtmlAssetPaths(html, fileSegments.length);
       const liveBase = config.liveUrl.replace(/\/$/, '');
       const canonicalHreflang = buildCanonicalAndHreflang(is404 ? '' : pathSeg, locales, defaultLocale, liveBase);

package/package.json

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