mnfst-render 0.5.36 → 0.5.38

package/manifest.render.mjs

@@ -2,7 +2,7 @@
 
 /* Manifest Render */
 
-import { readFileSync, readSync, mkdirSync, writeFileSync, existsSync, rmSync, statSync, readdirSync, cpSync, unlinkSync, renameSync } from 'node:fs';
+import { readFileSync, readSync, mkdirSync, writeFileSync, appendFileSync, existsSync, rmSync, statSync, readdirSync, cpSync, unlinkSync, renameSync } from 'node:fs';
 import { spawnSync } from 'node:child_process';
 import { join, resolve, dirname, relative, basename, sep } from 'node:path';
 import { createServer } from 'node:http';
@@ -282,6 +282,10 @@ function resolveConfig() {
       : [],
     dryRun: !!cli.dryRun,
     debugPrerender: !!cli.debugPrerender,
+    // render.icons: "lazy" strips prerender-inlined x-icon SVGs from the
+    // output — the icons plugin re-renders them at boot (decorative content;
+    // an icon-heavy nav duplicates kilobytes of identical SVG per link).
+    lazyIcons: pre.icons === 'lazy',
     // Cap on the manifest:render-ready wait.  When the data plugin dispatches
     // the event, we resolve immediately; when it doesn't (most projects), we
     // fall back to the timeout.  10s gives slow data plugin pipelines a
@@ -1127,6 +1131,18 @@ function stripRedundantImgSrcBindings(html) {
  */
 // Prerender inlined Iconify SVG under <i x-icon="iterator.icon">; clear x-icon value so Alpine does not evaluate
 // loop/item expressions while the attribute remains for CSS (e.g. inline layout that keys off [x-icon]).
+// render.icons: "lazy" — drop prerender-inlined icon SVGs from the output.
+// Each svg carries its resolved name (data-icon), which is written back into
+// the host's x-icon attribute as a static, scope-free value — so the icons
+// plugin re-renders it at boot even on baked clones whose expression attrs
+// were emptied. Only svg-as-first-child hosts match; anything else stays inline.
+function stripLazyIconSvgs(html) {
+  return html.replace(
+    /(x-icon\s*=\s*")[^"]*("[^>]*>\s*)<svg\b[^>]*\bdata-icon="([^"]+)"[^>]*>[\s\S]*?<\/svg>/gi,
+    (m, pre, post, name) => `${pre}${name}${post}`
+  );
+}
+
 function stripResolvedXIconDirectives(html) {
   return html.replace(/<i\b([^>]*)>([\s\S]*?)<\/i>/gi, (full, attrs, inner) => {
     if (isHydrateMarkedAttrs(attrs)) return full;
@@ -1593,6 +1609,7 @@ function generateLocaleVariantHtml({
   html = stripRedundantImgSrcBindings(html);
   html = stripEmptyInlineMaskStyles(html);
   html = stripResolvedXIconDirectives(html);
+  if (config.lazyIcons) html = stripLazyIconSvgs(html);
   // markPrerenderedManifestComponents must run BEFORE stripPrerenderHydrateMarkers so it can
   // detect data-hydrate markers and skip components inside hydrate islands.
   html = markPrerenderedManifestComponents(html);
@@ -1814,20 +1831,9 @@ function computeGlobalAssetSignature(rootDir) {
 async function waitForVisualSettle(page, { settleMs = 300, mdWaitMs = 5000, capMs = 8000 } = {}) {
   try {
     await page.evaluate(async ({ settleMs, mdWaitMs, capMs }) => {
-      // Preferred: the framework's own settled signal (loader ≥0.5.190).
-      if (window.__manifestReadyCoordinator) {
-        const start = Date.now();
-        while (!window.__manifestReady && Date.now() - start < capMs + 8000) {
-          await new Promise((r) => setTimeout(r, 100));
-        }
-        if (document.fonts?.ready) { try { await document.fonts.ready; } catch { /* best-effort */ } }
-        await new Promise((r) => {
-          const t = setTimeout(r, 250);
-          requestAnimationFrame(() => requestAnimationFrame(() => { clearTimeout(t); r(); }));
-        });
-        return;
-      }
-      // Fallback heuristic for older framework builds:
+      // The framework's boot signal (loader ≥0.5.190) gates the start, but it
+      // fires once per page — per-ROUTE work is tracked by the live markdown
+      // pending counter and the DOM heuristic below, so all three AND together.
       const state = () => {
         let styleLen = 0;
         for (const s of document.querySelectorAll('style')) styleLen += (s.textContent || '').length;
@@ -1838,14 +1844,59 @@ async function waitForVisualSettle(page, { settleMs = 300, mdWaitMs = 5000, capM
         const sig = `${mdEmpty}:${document.body?.innerText.length || 0}:${styleLen}:${document.fonts ? document.fonts.status : ''}`;
         return { sig, mdEmpty };
       };
+      // Alpine 3.x can strand already-flushed effects when a sibling effect
+      // creates state mid-flush — a route's x-if chain then never stamps until
+      // something re-queues it. Bumping the data store's version re-runs every
+      // store-reading effect: a no-op on settled pages, an unstick on stuck ones.
+      const nudge = () => {
+        try {
+          if (window.Alpine?.store) {
+            const s = window.Alpine.store('data');
+            if (s) window.Alpine.store('data', { ...s, _dataVersion: (s._dataVersion || 0) + 1 });
+          }
+        } catch { /* best-effort */ }
+      };
+      // Responsive/variant utilities (md:row, dark:bg-*) are compiled at
+      // runtime and the compiler throttles recompiles — a late-discovered
+      // variant class leaves the layout in its mobile/stacked state at capture.
+      // Hold while any variant class used in the DOM has no matching CSS rule.
+      const unresolvedVariants = () => {
+        try {
+          const used = new Set();
+          for (const el of document.querySelectorAll('[class*=":"]')) {
+            for (const c of el.classList) if (c.includes(':') && !c.startsWith('[')) used.add(c);
+            if (used.size > 300) break;
+          }
+          if (!used.size) return 0;
+          let selectors = '';
+          for (const sheet of document.styleSheets) {
+            try { for (const r of sheet.cssRules) if (r.selectorText) selectors += r.selectorText + '\n'; } catch { /* cross-origin */ }
+          }
+          let missing = 0;
+          for (const c of used) {
+            if (!selectors.includes('.' + CSS.escape(c))) missing++;
+          }
+          return missing;
+        } catch { return 0; }
+      };
       const start = Date.now();
       let last = state();
       let stableSince = Date.now();
+      let nudged = 0;
       while (Date.now() - start < capMs) {
         await new Promise((r) => setTimeout(r, 100));
+        const elapsed = Date.now() - start;
+        if ((nudged === 0 && elapsed > 300) || (nudged === 1 && elapsed > 2000)) { nudged++; nudge(); }
         const cur = state();
+        const bootPending = !!window.__manifestReadyCoordinator && !window.__manifestReady;
+        const inflight = (window.__manifestMarkdownPending || 0) > 0;
         const mdPending = cur.mdEmpty > 0 && Date.now() - start < mdWaitMs;
-        if (cur.sig !== last.sig || mdPending) {
+        const utilPending = (window.__manifestUtilitiesPending || 0) > 0
+          || (elapsed < mdWaitMs + 4000 && unresolvedVariants() > 0);
+        // A throttled compiler can DROP the request that would resolve them —
+        // a class mutation re-triggers its observer's schedule.
+        if (utilPending && elapsed % 500 < 100) document.body.classList.toggle('mnfst-og-nudge');
+        if (cur.sig !== last.sig || bootPending || inflight || mdPending || utilPending) {
           last = cur;
           stableSince = Date.now();
         } else if (Date.now() - stableSince >= settleMs) {
@@ -1953,13 +2004,31 @@ async function takeOgSnapshot(page, outputDir, pathSeg, globalAssetSignature, ca
     // body min-h-screen + flex grow) can otherwise screenshot as blank if
     // the compositor doesn't repaint between setViewport and screenshot.
     await page.evaluate(() => window.scrollTo(0, 0));
-    await page.screenshot({
+    // Throwaway shot first: it forces the compositor to produce a fresh frame,
+    // so the real capture below reflects the current DOM rather than a stale
+    // surface (headless pages can sit frames behind after heavy updates).
+    await page.screenshot({ type: 'png', clip: { x: 0, y: 0, width: 8, height: 8 }, captureBeyondViewport: false }).catch(() => { });
+    await new Promise((r) => setTimeout(r, 120));
+    const shoot = () => page.screenshot({
       path: filePath,
       type: 'png',
       clip: { x: 0, y: 0, width: 1200, height: 630 },
       omitBackground: false,
       captureBeyondViewport: false,
     });
+    await shoot();
+    // Residual-race retry: a text-heavy page yielding a shell-weight card
+    // means the main content missed the frame — settle again and reshoot.
+    for (let attempt = 0; attempt < 2; attempt++) {
+      let size = 0;
+      try { size = statSync(filePath).size; } catch { break; }
+      if (size >= 34 * 1024) break;
+      const textLen = await page.evaluate(() => document.body?.innerText.length || 0).catch(() => 0);
+      if (textLen < 2500) break;
+      await new Promise((r) => setTimeout(r, 1200));
+      await waitForVisualSettle(page, { settleMs: 400, capMs: 5000 });
+      await shoot();
+    }
     // Sanity check: a blank 1200×630 PNG (header only, white body) is ~8–10KB;
     // a content-rich page is 50KB+.  When the resulting file is suspiciously
     // small the snapshot is treated as failed and the renderer falls through
@@ -3322,6 +3391,24 @@ async function runPrerender(config) {
         const apply = () => {
           try {
             if (locale && typeof locale === 'string') document.documentElement.lang = locale;
+            // View transitions freeze a snapshot layer over the updated DOM in
+            // headless — OG screenshots then capture stale pre-route pixels.
+            // Router opt-out for SPA swaps, plus a late <style> so the reset's
+            // cross-document @view-transition{navigation:auto} is overridden
+            // (appended after stylesheets; last descriptor wins).
+            document.documentElement.setAttribute('data-no-view-transitions', '');
+            const killCrossDocVT = () => {
+              try {
+                const s = document.createElement('style');
+                s.textContent = '@view-transition { navigation: none }';
+                (document.head || document.documentElement).appendChild(s);
+              } catch { /* no-op */ }
+            };
+            if (document.readyState === 'loading') {
+              document.addEventListener('DOMContentLoaded', killCrossDocVT, { once: true });
+            } else {
+              killCrossDocVT();
+            }
           } catch {
             /* no-op */
           }
@@ -4391,6 +4478,16 @@ async function runPrerender(config) {
         });
       });
 
+      // (render.icons: "lazy" is applied on the serialized HTML string — see
+      // stripLazyIconSvgs. Doing it in the live DOM re-triggers the icons
+      // plugin's observer, which re-injects every svg before serialization.)
+
+      // x-virtual recomputes spacer geometry at boot; measured heights vary
+      // run to run — zero them so identical content serializes identically.
+      await page.evaluate(() => {
+        document.querySelectorAll('[data-virtual-spacer]').forEach((el) => { el.style.height = '0px'; });
+      });
+
       // Deterministic output: randomized CSS anchor-positioning names
       // (--dropdown-x7f2, --popover-…, --anchor-…) are regenerated per run and
       // made every render a phantom diff. Renumber them sequentially in DOM
@@ -4491,6 +4588,7 @@ async function runPrerender(config) {
       html = stripRedundantImgSrcBindings(html);
       html = stripEmptyInlineMaskStyles(html);
       html = stripResolvedXIconDirectives(html);
+      if (config.lazyIcons) html = stripLazyIconSvgs(html);
       html = markPrerenderedManifestComponents(html);
 
       // Prefix internal <a> links with the locale for non-default locales so
@@ -4734,9 +4832,18 @@ async function runPrerender(config) {
   if (bundleUtilities) {
     const utilMerged = mergeUtilityCssBlocks(utilityBlocks);
     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', routerBasePath || '');
+      // Append to prerender.tailwind.css when it exists — one render-blocking
+      // stylesheet instead of two, same cascade order (utilities last). The
+      // separate file remains only for projects without a Tailwind build.
+      const twPath = join(outputResolved, 'prerender.tailwind.css');
+      if (existsSync(twPath)) {
+        appendFileSync(twPath, `\n/* Manifest custom utilities */\n${utilMerged}\n`, 'utf8');
+        process.stdout.write('prerender: merged custom utilities into prerender.tailwind.css\n');
+      } else {
+        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', routerBasePath || '');
+      }
     }
   }
 

package/package.json

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