mnfst-render 0.2.5 → 0.2.7

package/manifest.render.mjs

@@ -39,6 +39,7 @@ function parseArgs() {
     if (args[i] === '--wait-after-idle' && args[i + 1]) { out.waitAfterIdle = parseInt(args[++i], 10); continue; }
     if (args[i] === '--concurrency' && args[i + 1]) { out.concurrency = parseInt(args[++i], 10); continue; }
     if (args[i] === '--dry-run') { out.dryRun = true; continue; }
+    if (args[i] === '--debug-prerender') { out.debugPrerender = true; continue; }
   }
   return out;
 }
@@ -86,6 +87,7 @@ function resolveConfig() {
     waitAfterIdle: Math.max(0, cli.waitAfterIdle ?? pre.waitAfterIdle ?? 0),
     concurrency: Math.max(1, cli.concurrency ?? pre.concurrency ?? 6),
     dryRun: !!cli.dryRun,
+    debugPrerender: !!(cli.debugPrerender ?? pre.debugPrerender),
   };
 }
 
@@ -729,6 +731,29 @@ function stripPrerenderDynamicBindings(html) {
   });
 }
 
+// Remove empty inline mask-image styles emitted before data resolves
+// (e.g. style="mask-image: url()"), while keeping any :style/x-bind:style bindings.
+function stripEmptyInlineMaskStyles(html) {
+  return html.replace(/<(\w+)([^>]*)>/g, (full, tag, attrs) => {
+    const styleMatch = attrs.match(/\sstyle=(["'])([\s\S]*?)\1/i);
+    if (!styleMatch) return full;
+    const quote = styleMatch[1];
+    const rawStyle = styleMatch[2] || '';
+    const cleaned = rawStyle
+      .replace(/\bmask-image\s*:\s*url\(\s*(?:''|""|)\s*\)\s*;?/gi, '')
+      .replace(/\b-webkit-mask-image\s*:\s*url\(\s*(?:''|""|)\s*\)\s*;?/gi, '')
+      .trim()
+      .replace(/^\s*;\s*|\s*;\s*$/g, '');
+
+    if (!cleaned) {
+      const newAttrs = attrs.replace(/\sstyle=(["'])[\s\S]*?\1/i, '');
+      return `<${tag}${newAttrs}>`;
+    }
+    const rebuilt = attrs.replace(/\sstyle=(["'])[\s\S]*?\1/i, ` style=${quote}${cleaned}${quote}`);
+    return `<${tag}${rebuilt}>`;
+  });
+}
+
 // --- Rewrite asset URLs: depth = segments from this HTML file up to output root (website). ----
 // 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.
@@ -1222,8 +1247,14 @@ async function runPrerender(config) {
   const concurrency = config.concurrency;
   const pathTotal = pathList.length;
   const failedPaths = [];
+  const debugRows = [];
   process.stdout.write(`Prerendering ${pathTotal} path(s)...\n`);
 
+  function pushDebug(row) {
+    if (!config.debugPrerender) return;
+    debugRows.push(row);
+  }
+
   async function processPath(pathSeg, pathIndex) {
     const is404 = pathSeg === NOT_FOUND_PATH;
     const pathname = is404 ? `/${NOT_FOUND_PATH}` : (pathSeg ? `/${pathSeg}` : '/');
@@ -1242,6 +1273,7 @@ async function runPrerender(config) {
 
     const page = await browser.newPage();
     try {
+      pushDebug({ path: displayPath, stage: 'start' });
       await page.goto(url, {
         waitUntil: 'domcontentloaded',
         timeout: Math.min(timeout, 30000),
@@ -1281,6 +1313,36 @@ async function runPrerender(config) {
         });
       }).catch(() => { });
 
+      if (config.debugPrerender) {
+        const before = await page.evaluate(() => {
+          const templates = Array.from(document.querySelectorAll('template[x-for]'));
+          const entries = templates.slice(0, 60).map((tpl) => {
+            const first = tpl.content?.firstElementChild;
+            const tag = first ? first.tagName : null;
+            const cls = first ? (first.getAttribute('class') || '') : '';
+            let cloneCount = 0;
+            let next = tpl.nextElementSibling;
+            while (next && (!tag || next.tagName === tag)) {
+              if (tag && (next.getAttribute('class') || '') !== cls) break;
+              cloneCount++;
+              next = next.nextElementSibling;
+            }
+            return {
+              xFor: (tpl.getAttribute('x-for') || '').slice(0, 140),
+              collapsed: tpl.getAttribute('data-prerender-collapsed') === '1',
+              staticGenerated: tpl.getAttribute('data-prerender-static-generated') === '1',
+              cloneCount,
+            };
+          });
+          return {
+            templateCount: templates.length,
+            nonCollapsedTemplateCount: templates.filter((t) => t.getAttribute('data-prerender-collapsed') !== '1').length,
+            entries,
+          };
+        }).catch(() => null);
+        pushDebug({ path: displayPath, stage: 'post-dom-settle', metrics: before });
+      }
+
       await page.waitForNetworkIdle({ idleTime: 1500, timeout: 10000 }).catch(() => { });
 
       await page.evaluate(() => {
@@ -1390,10 +1452,13 @@ async function runPrerender(config) {
             const first = tpl.content?.firstElementChild;
             if (first) {
               const tag = first.tagName;
+              const cls = first.getAttribute('class') || '';
               let next = tpl.nextElementSibling;
               let generatedCount = 0;
               while (next) {
                 if (next.tagName !== tag) break;
+                const sameClass = (next.getAttribute('class') || '') === cls;
+                if (!sameClass) break;
                 generatedCount++;
                 next = next.nextElementSibling;
               }
@@ -1491,7 +1556,35 @@ async function runPrerender(config) {
               if (!bindingAttrRegex.test(attr.name)) continue;
               const expr = attr.value || '';
               if (hasVar(expr, itemVar) || hasVar(expr, indexVar)) {
-                node.removeAttribute(attr.name);
+                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);
               }
             }
           }
@@ -1537,6 +1630,15 @@ async function runPrerender(config) {
       });
 
       let html = await page.evaluate(() => document.documentElement.outerHTML);
+      if (config.debugPrerender) {
+        const post = await page.evaluate(() => {
+          const templates = document.querySelectorAll('template[x-for]').length;
+          const links = document.querySelectorAll('a[href="#"]').length;
+          const hidden = document.querySelectorAll('[style*="display: none"]').length;
+          return { templateCountAfterCleanup: templates, hashHrefCount: links, displayNoneCount: hidden };
+        }).catch(() => null);
+        pushDebug({ path: displayPath, stage: 'pre-serialize', metrics: post });
+      }
       html = stripDevOnlyContent(html);
       html = stripInjectedPluginScripts(html);
       if (tailwindBuilt) {
@@ -1556,6 +1658,7 @@ async function runPrerender(config) {
       const xData = { manifest, content };
       html = resolveHeadXBindings(html, xData);
       html = stripPrerenderDynamicBindings(html);
+      html = stripEmptyInlineMaskStyles(html);
       html = rewriteHtmlAssetPaths(html, fileSegments.length);
       const liveBase = config.liveUrl.replace(/\/$/, '');
       const canonicalHreflang = buildCanonicalAndHreflang(is404 ? '' : pathSeg, locales, defaultLocale, liveBase);
@@ -1568,6 +1671,13 @@ async function runPrerender(config) {
       html = html.replace('</head>', `${canonicalHreflang}${injectOgLocale ? ogLocale : ''}${baseMeta}${prerenderedMeta}<meta name="manifest:router-base-depth" content="${routeDepth}">\n</head>`);
       mkdirSync(outDir, { recursive: true });
       writeFileSync(outFile, html, 'utf8');
+      pushDebug({
+        path: displayPath,
+        stage: 'wrote',
+        outFile,
+        htmlBytes: Buffer.byteLength(html, 'utf8'),
+        hasXForTemplate: html.includes('template x-for') || html.includes('template[x-for]'),
+      });
     } catch (err) {
       failedPaths.push({
         path: displayPath,
@@ -1602,6 +1712,17 @@ async function runPrerender(config) {
     throw new Error(`prerender failed for ${failedPaths.length}/${pathTotal} paths. Sample: ${sample}`);
   }
 
+  if (config.debugPrerender) {
+    const reportPath = join(outputResolved, 'prerender.debug.json');
+    writeFileSync(reportPath, JSON.stringify({
+      generatedAt: new Date().toISOString(),
+      totalPaths: pathTotal,
+      failedPaths,
+      rows: debugRows,
+    }, null, 2), 'utf8');
+    process.stdout.write(`prerender: debug report ${reportPath}\n`);
+  }
+
   if (bundleUtilities) {
     const utilMerged = mergeUtilityCssBlocks(utilityBlocks);
     if (utilMerged.trim()) {

package/package.json

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