mnfst-render 0.2.6 → 0.2.8

package/manifest.render.mjs

@@ -23,6 +23,204 @@ async function importFromProject(moduleName) {
   }
 }
 
+/**
+ * localechange reloads localized sources asynchronously; waitForNetworkIdle can finish before
+ * Alpine.store('data') updates. Without this, x-for / $modify('items') lists often snapshot empty.
+ */
+async function waitForAlpineDataStoresSettled(page, timeoutMs = 12000) {
+  const interval = 100;
+  const deadline = Date.now() + timeoutMs;
+  while (Date.now() < deadline) {
+    const ok = await page
+      .evaluate(() => {
+        try {
+          const Alpine = window.Alpine;
+          if (!Alpine?.store) return true;
+          const d = Alpine.store('data');
+          if (!d) return true;
+          if (d._localeChanging) return false;
+          for (const k of Object.keys(d)) {
+            if (!k.startsWith('_') || !k.endsWith('_state')) continue;
+            const s = d[k];
+            if (s && typeof s === 'object' && s.loading) return false;
+          }
+          return true;
+        } catch {
+          return true;
+        }
+      })
+      .catch(() => true);
+    if (ok) return;
+    await new Promise((r) => setTimeout(r, interval));
+  }
+}
+
+async function flushAlpineEffects(page) {
+  await page
+    .evaluate(() => {
+      return new Promise((resolve) => {
+        try {
+          if (typeof Alpine !== 'undefined' && typeof Alpine.nextTick === 'function') {
+            Alpine.nextTick(() => {
+              if (typeof Alpine.nextTick === 'function') Alpine.nextTick(resolve);
+              else resolve();
+            });
+          } else {
+            queueMicrotask(resolve);
+          }
+        } catch {
+          resolve();
+        }
+      });
+    })
+    .catch(() => {});
+}
+
+/**
+ * After locale + route sync, wait until (1) Manifest fires manifest:components-processed for that pass
+ * (component swapping finished) and (2) no Alpine data _*_state is still loading / _localeChanging.
+ * Listener is registered before dispatch so the initial page load event is ignored.
+ */
+async function waitForManifestPrerenderPipeline(page, { allLocales, currentLocale, timeoutMs }) {
+  const result = await page
+    .evaluate(
+      ({ localeList, loc, ms }) => {
+        return new Promise((resolve) => {
+          const deadline = Date.now() + ms;
+          let dispatched = false;
+          let sawComponents = false;
+          let poll = 0;
+
+          const checkData = () => {
+            try {
+              const Alpine = window.Alpine;
+              if (!Alpine?.store) return true;
+              const d = Alpine.store('data');
+              if (!d) return true;
+              if (d._localeChanging) return false;
+              for (const k of Object.keys(d)) {
+                if (!k.startsWith('_') || !k.endsWith('_state')) continue;
+                const s = d[k];
+                if (s && typeof s === 'object' && s.loading) return false;
+              }
+              return true;
+            } catch {
+              return true;
+            }
+          };
+
+          const skipComponentsWait = () =>
+            !window.__manifestComponentsInitialized || !window.ManifestComponentsSwapping;
+
+          const cleanup = () => {
+            if (poll) clearInterval(poll);
+            window.removeEventListener('manifest:components-processed', onComponents);
+          };
+
+          const tryFinish = () => {
+            if (!dispatched) return;
+            if (skipComponentsWait()) {
+              sawComponents = true;
+            }
+            if (sawComponents && checkData()) {
+              cleanup();
+              resolve({ ok: true });
+            }
+          };
+
+          function onComponents() {
+            if (!dispatched) return;
+            sawComponents = true;
+            tryFinish();
+          }
+
+          window.addEventListener('manifest:components-processed', onComponents);
+
+          poll = setInterval(() => {
+            if (Date.now() > deadline) {
+              cleanup();
+              resolve({
+                ok: false,
+                reason: 'timeout',
+                sawComponents,
+                dataOk: checkData(),
+                skippedComponents: skipComponentsWait(),
+              });
+              return;
+            }
+            tryFinish();
+          }, 50);
+
+          try {
+            const locales = Array.isArray(localeList) ? localeList : [];
+            if (loc && typeof loc === 'string') {
+              try {
+                document.documentElement.lang = loc;
+              } catch {
+                /* no-op */
+              }
+            }
+            const store = typeof Alpine !== 'undefined' && Alpine.store ? Alpine.store('locale') : null;
+            if (store) {
+              if (!Array.isArray(store.available) || store.available.length === 0) {
+                store.available = locales.slice();
+              } else {
+                store.available = Array.from(new Set([...store.available, ...locales]));
+              }
+              if (loc && typeof loc === 'string') {
+                store.current = loc;
+              }
+            }
+
+            if (loc && typeof loc === 'string') {
+              window.dispatchEvent(new CustomEvent('localechange', { detail: { locale: loc } }));
+            }
+
+            const rawRoute = window.ManifestRoutingNavigation?.getCurrentRoute?.() ?? window.location.pathname;
+            const clean = String(rawRoute || '/').replace(/^\/+|\/+$/g, '');
+            const parts = clean ? clean.split('/') : [];
+            const logical =
+              parts.length > 0 && locales.includes(parts[0])
+                ? '/' + parts.slice(1).join('/')
+                : clean
+                  ? '/' + clean
+                  : '/';
+            const to = logical === '//' ? '/' : logical;
+
+            dispatched = true;
+            window.dispatchEvent(
+              new CustomEvent('manifest:route-change', {
+                detail: {
+                  from: to,
+                  to,
+                  normalizedPath: typeof to === 'string' && to !== '/' ? to.replace(/^\/|\/$/g, '') : '/',
+                },
+              })
+            );
+            window.dispatchEvent(new PopStateEvent('popstate'));
+            tryFinish();
+          } catch (err) {
+            cleanup();
+            resolve({ ok: false, reason: 'error', message: String(err?.message || err) });
+          }
+        });
+      },
+      {
+        localeList: allLocales,
+        loc: currentLocale,
+        ms: timeoutMs,
+      }
+    )
+    .catch((e) => ({ ok: false, reason: 'evaluate', message: String(e) }));
+
+  if (!result?.ok) {
+    const parts = [`prerender: pipeline wait incomplete (${result?.reason ?? 'unknown'})`];
+    if (result?.dataOk === false) parts.push('data still loading');
+    if (result?.sawComponents === false && !result?.skippedComponents) parts.push('no manifest:components-processed');
+    process.stdout.write(`${parts.join('; ')}\n`);
+  }
+}
+
 // --- Config ------------------------------------------------------------------
 
 function parseArgs() {
@@ -39,6 +237,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 +285,8 @@ 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),
+    pipelineTimeout: Math.max(3000, Number(pre.pipelineTimeout) || 25000),
   };
 }
 
@@ -729,6 +930,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 +1446,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 +1472,26 @@ async function runPrerender(config) {
 
     const page = await browser.newPage();
     try {
+      // Align <html lang> with the URL being prerendered before any app script runs.
+      // initializeDataSourcesPlugin picks locale from document.documentElement.lang first; a mismatch
+      // (e.g. headless default vs /en/...) leaves $x.* empty while x-route sections still render.
+      await page.evaluateOnNewDocument((locale) => {
+        const apply = () => {
+          try {
+            if (locale && typeof locale === 'string') document.documentElement.lang = locale;
+          } catch {
+            /* no-op */
+          }
+        };
+        if (typeof document !== 'undefined') {
+          if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', apply, { once: true });
+          }
+          apply();
+        }
+      }, currentLocale);
+
+      pushDebug({ path: displayPath, stage: 'start' });
       await page.goto(url, {
         waitUntil: 'domcontentloaded',
         timeout: Math.min(timeout, 30000),
@@ -1297,45 +1547,134 @@ async function runPrerender(config) {
         });
       }).catch(() => { });
 
-      // Ensure $route-dependent expressions are recalculated after locale/data stores settle.
-      // This helps localized dynamic pages (e.g. /ko/articles/slug) compute prev/next links correctly.
-      await page.evaluate(({ allLocales, currentLocale }) => {
-        try {
-          const localeList = Array.isArray(allLocales) ? allLocales : [];
-          const store = (typeof Alpine !== 'undefined' && Alpine.store) ? Alpine.store('locale') : null;
-          if (store) {
-            if (!Array.isArray(store.available) || store.available.length === 0) {
-              store.available = localeList.slice();
-            } else {
-              const merged = Array.from(new Set([...store.available, ...localeList]));
-              store.available = merged;
+      // Locale + route sync, then wait for manifest:components-processed (swapping) and settled data stores
+      // before snapshot. Listener is installed inside the page before dispatch (see waitForManifestPrerenderPipeline).
+      await waitForManifestPrerenderPipeline(page, {
+        allLocales: locales,
+        currentLocale,
+        timeoutMs: config.pipelineTimeout,
+      });
+
+      await page.waitForNetworkIdle({ idleTime: 800, timeout: 12000 }).catch(() => { });
+      await waitForAlpineDataStoresSettled(page, 10000);
+      await flushAlpineEffects(page);
+
+      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;
             }
-            if (currentLocale && typeof currentLocale === 'string') {
-              store.current = currentLocale;
+            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,
+            };
+          });
+
+          const listDiagnostics = {
+            htmlLang: '',
+            localeCurrent: null,
+            dataLocaleChanging: null,
+            dataStates: {},
+            topLevelArrayLengths: {},
+            nestedContentCards: null,
+            emptyStaticXFors: [],
+          };
+
+          try {
+            listDiagnostics.htmlLang = document.documentElement.lang || '';
+            const Alpine = window.Alpine;
+            if (Alpine?.store) {
+              const loc = Alpine.store('locale');
+              listDiagnostics.localeCurrent = loc?.current ?? null;
+              const d = Alpine.store('data');
+              if (d) {
+                listDiagnostics.dataLocaleChanging = !!d._localeChanging;
+                for (const k of Object.keys(d)) {
+                  if (k.startsWith('_') && k.endsWith('_state')) {
+                    const short = k.slice(1, -'_state'.length);
+                    const s = d[k];
+                    if (s && typeof s === 'object') {
+                      listDiagnostics.dataStates[short] = {
+                        loading: !!s.loading,
+                        ready: !!s.ready,
+                        hasError: s.error != null,
+                      };
+                    }
+                  } else if (!k.startsWith('_') && Array.isArray(d[k])) {
+                    listDiagnostics.topLevelArrayLengths[k] = d[k].length;
+                  }
+                }
+                try {
+                  const cards = d.content?.home?.differentiators?.cards;
+                  if (Array.isArray(cards)) listDiagnostics.nestedContentCards = cards.length;
+                  else if (cards && typeof cards === 'object') listDiagnostics.nestedContentCards = Object.keys(cards).length;
+                  else listDiagnostics.nestedContentCards = cards == null ? null : 'non-iterable';
+                } catch {
+                  listDiagnostics.nestedContentCards = 'error';
+                }
+              }
             }
+          } catch (e) {
+            listDiagnostics.probeError = String(e?.message || e);
           }
 
-          const rawRoute = window.ManifestRoutingNavigation?.getCurrentRoute?.() ?? window.location.pathname;
-          const clean = String(rawRoute || '/').replace(/^\/+|\/+$/g, '');
-          const parts = clean ? clean.split('/') : [];
-          const logical = parts.length > 0 && localeList.includes(parts[0])
-            ? '/' + parts.slice(1).join('/')
-            : (clean ? '/' + clean : '/');
-          const to = logical === '//' ? '/' : logical;
-
-          window.dispatchEvent(new CustomEvent('manifest:route-change', {
-            detail: {
-              from: to,
-              to,
-              normalizedPath: (typeof to === 'string' && to !== '/') ? to.replace(/^\/|\/$/g, '') : '/'
+          for (const tpl of templates) {
+            if (tpl.getAttribute('data-prerender-collapsed') === '1') continue;
+            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;
             }
-          }));
-          window.dispatchEvent(new PopStateEvent('popstate'));
-        } catch {
-          // no-op
-        }
-      }, { allLocales: locales, currentLocale }).catch(() => { });
-      await new Promise((resolve) => setTimeout(resolve, 60));
+            if (cloneCount > 0) continue;
+            const routeAnc = tpl.closest('[x-route]');
+            let hiddenReason = null;
+            let el = tpl.parentElement;
+            while (el) {
+              if (el.hasAttribute('hidden')) {
+                hiddenReason = 'ancestor-hidden';
+                break;
+              }
+              const st = el.getAttribute('style') || '';
+              if (/\bdisplay\s*:\s*none\b/i.test(st)) {
+                hiddenReason = 'ancestor-display-none';
+                break;
+              }
+              el = el.parentElement;
+            }
+            const itemsHost = tpl.closest('[items]');
+            listDiagnostics.emptyStaticXFors.push({
+              xFor: (tpl.getAttribute('x-for') || '').slice(0, 160),
+              nearestXRoute: routeAnc ? (routeAnc.getAttribute('x-route') || '').slice(0, 100) : null,
+              hiddenReason,
+              hostItemsAttr: itemsHost ? (itemsHost.getAttribute('items') || '').slice(0, 120) : null,
+            });
+          }
+
+          return {
+            templateCount: templates.length,
+            nonCollapsedTemplateCount: templates.filter((t) => t.getAttribute('data-prerender-collapsed') !== '1').length,
+            entries,
+            listDiagnostics,
+          };
+        }).catch(() => null);
+        pushDebug({ path: displayPath, stage: 'post-dom-settle', metrics: before });
+      }
 
       // Optional extra delay so in-page async (e.g. fetch() in x-init for client logos) can complete before snapshot.
       if (config.waitAfterIdle > 0) {
@@ -1568,6 +1907,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) {
@@ -1587,6 +1935,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);
@@ -1599,6 +1948,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,
@@ -1633,6 +1989,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.6",
+  "version": "0.2.8",
   "description": "Render Manifest sites to static HTML for SEO",
   "type": "module",
   "bin": {