mnfst-render 0.3.7 → 0.3.9

package/manifest.render.mjs

@@ -252,6 +252,13 @@ function loadConfig(rootDir) {
   return manifest;
 }
 
+function normalizeLocaleRouteExclude(val) {
+  if (val == null) return [];
+  if (Array.isArray(val)) return val.map((s) => String(s).trim()).filter(Boolean);
+  if (typeof val === 'string') return val.split(',').map((s) => s.trim()).filter(Boolean);
+  return [];
+}
+
 function resolveConfig() {
   const cli = parseArgs();
   const cwd = process.cwd();
@@ -274,6 +281,10 @@ function resolveConfig() {
     output: resolve(root, cli.output ?? pre.output ?? 'website'),
     root,
     routerBase: pre.routerBase ?? null,
+    /** Logical path prefixes (after locale) that skip sticky locale prefix; see manifest:locale-route-exclude */
+    localeRouteExclude: normalizeLocaleRouteExclude(
+      pre.localeRouteExclude ?? pre.localeStickyExclude
+    ),
     locales: pre.locales,
     redirects: Array.isArray(pre.redirects) ? pre.redirects : [],
     wait: cli.wait ?? pre.wait ?? null,
@@ -853,19 +864,26 @@ function depthFromOutputRoot(outputDir, filePath) {
   return rel.split(sep).filter(Boolean).length;
 }
 
-/** Inject stylesheet link with correct relative href for static hosting (after prerender wrote files). */
-function postProcessInjectStylesheetLink(outputDir, filename) {
+/** Root-absolute path for prerender bundles (same URL from every page depth; supports manifest:router-base). */
+function buildRootAssetPath(routerBasePath, filename) {
+  const base = String(routerBasePath || '').replace(/^\/+|\/+$/g, '');
+  const name = String(filename || '').replace(/^\/+/, '');
+  const path = base ? `${base}/${name}` : name;
+  return '/' + path.replace(/\/{2,}/g, '/');
+}
+
+/** Inject stylesheet link with root-absolute href (avoids ../ resolving under locale segments like /en/page/). */
+function postProcessInjectStylesheetLink(outputDir, filename, routerBasePath) {
   const cssPath = join(outputDir, filename);
   if (!existsSync(cssPath)) return;
   const stat = statSync(cssPath);
   if (stat.size === 0) return;
 
+  const href = buildRootAssetPath(routerBasePath, filename);
+  const tag = `<link rel="stylesheet" href="${href}">`;
   const files = walkHtmlFiles(outputDir);
   for (const file of files) {
     let html = readFileSync(file, 'utf8');
-    const depth = depthFromOutputRoot(outputDir, file);
-    const prefix = depth ? '../'.repeat(depth) : '';
-    const tag = `<link rel="stylesheet" href="${prefix}${filename}">`;
     html = injectBeforeHeadClose(html, tag);
     writeFileSync(file, html, 'utf8');
   }
@@ -879,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).
@@ -888,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.
@@ -903,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;
@@ -942,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;
@@ -960,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
@@ -971,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 || '';
@@ -1007,6 +1040,10 @@ function stripEmptyInlineMaskStyles(html) {
 // All project assets are copied into output, so root-relative paths become relative within output.
 // Do NOT rewrite href on <a> tags (navigation links); only rewrite link/script/img so router gets clean paths.
 
+function isPrerenderBundleAssetPath(pathAfterSlash) {
+  return /(^|\/)prerender\.(tailwind|utilities)\.css$/.test(pathAfterSlash);
+}
+
 function rewriteHtmlAssetPaths(html, depthWithinOutput) {
   const prefix = depthWithinOutput > 0 ? '../'.repeat(depthWithinOutput) : '';
   if (!prefix) return html;
@@ -1016,9 +1053,10 @@ function rewriteHtmlAssetPaths(html, depthWithinOutput) {
     const tag = htmlBeforeMatch.slice(lastOpen + 1).match(/^(\w+)/);
     return tag && tag[1].toLowerCase() === 'a';
   }
-  let out = html.replace(/(\s(href|src)=["'])\/(?!\/)/g, (match, lead, attr, offset, fullString) => {
+  let out = html.replace(/(\s(href|src)=["'])\/(?!\/)([^'"]*)/g, (match, lead, _attr, rest, offset, fullString) => {
     if (isAnchorTag(fullString.slice(0, offset))) return match;
-    return lead + prefix;
+    if (isPrerenderBundleAssetPath(rest)) return match;
+    return lead + prefix + rest;
   });
   out = out.replace(/(\s(href|src)=["'])(\.\.\/)+/g, (match, lead, attr, dots, offset, fullString) => {
     if (isAnchorTag(fullString.slice(0, offset))) return match;
@@ -1027,6 +1065,17 @@ function rewriteHtmlAssetPaths(html, depthWithinOutput) {
   return out;
 }
 
+// Alpine x-data drives radio state; baked checked="" from the live DOM (e.g. yearly) fights monthly defaults.
+function stripPrerenderBakedRadioCheckedForXModel(html) {
+  return html.replace(/<input\b([^>]*)>/gi, (full, attrs) => {
+    if (!/\btype\s*=\s*["']radio["']/i.test(attrs)) return full;
+    if (!/\bx-model\s*=/i.test(attrs)) return full;
+    const next = attrs.replace(/\s+checked(?:\s*=\s*["'][^"']*["']|\s*=\s*[^\s>]+)?/gi, '');
+    if (next === attrs) return full;
+    return `<input${next}>`;
+  });
+}
+
 // --- Canonical and hreflang (per-page injection) ---
 
 function buildCanonicalAndHreflang(pathSeg, locales, defaultLocale, base) {
@@ -1761,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);
@@ -1883,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] || '') : '';
@@ -1911,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();
@@ -1983,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 {
@@ -2032,7 +2086,10 @@ async function runPrerender(config) {
         for (const b of extracted.blocks) utilityBlocks.push(b);
       }
       if (tailwindBuilt) {
-        html = injectBeforeHeadClose(html, '<link rel="stylesheet" href="/prerender.tailwind.css">');
+        html = injectBeforeHeadClose(
+          html,
+          `<link rel="stylesheet" href="${buildRootAssetPath(routerBasePath, 'prerender.tailwind.css')}">`
+        );
       }
       html = stripDuplicatedLoopDirectives(html);
       html = stripPrerenderedXDataDirectives(html);
@@ -2040,9 +2097,11 @@ async function runPrerender(config) {
       const xData = { manifest, content };
       html = resolveHeadXBindings(html, xData);
       html = stripPrerenderDynamicBindings(html);
+      html = stripPrerenderBakedRadioCheckedForXModel(html);
       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);
@@ -2050,9 +2109,17 @@ async function runPrerender(config) {
       const injectOgLocale = ogLocale && hasOtherOgMeta(html);
       if (injectOgLocale) html = stripOgLocaleFromHead(html);
       const baseMeta = routerBasePath !== null ? `<meta name="manifest:router-base" content="${String(routerBasePath).replace(/"/g, '&quot;')}">\n` : '';
+      const routeEx = config.localeRouteExclude || [];
+      const routeMeta =
+        routeEx.length > 0
+          ? `<meta name="manifest:locale-route-exclude" content="${JSON.stringify(routeEx).replace(/"/g, '&quot;')}">\n`
+          : '';
       const routeDepth = fileSegments.length;
       const prerenderedMeta = `<meta name="manifest:prerendered" content="1">\n`;
-      html = html.replace('</head>', `${canonicalHreflang}${injectOgLocale ? ogLocale : ''}${baseMeta}${prerenderedMeta}<meta name="manifest:router-base-depth" content="${routeDepth}">\n</head>`);
+      html = html.replace(
+        '</head>',
+        `${canonicalHreflang}${injectOgLocale ? ogLocale : ''}${routeMeta}${baseMeta}${prerenderedMeta}<meta name="manifest:router-base-depth" content="${routeDepth}">\n</head>`
+      );
       html = markPrerenderedManifestComponents(html);
       mkdirSync(outDir, { recursive: true });
       writeFileSync(outFile, html, 'utf8');
@@ -2113,7 +2180,7 @@ async function runPrerender(config) {
     if (utilMerged.trim()) {
       writeFileSync(join(outputResolved, 'prerender.utilities.css'), `${utilMerged}\n`, 'utf8');
       process.stdout.write('prerender: wrote prerender.utilities.css (Manifest custom utilities)\n');
-      postProcessInjectStylesheetLink(outputResolved, 'prerender.utilities.css');
+      postProcessInjectStylesheetLink(outputResolved, 'prerender.utilities.css', routerBasePath || '');
     }
   }
 

package/package.json

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