mnfst-render 0.5.5 → 0.5.7

package/manifest.render.mjs

@@ -150,11 +150,11 @@ async function waitForManifestRenderReady(page, { allLocales, currentLocale, tim
     )
     .catch((e) => ({ ok: false, reason: 'evaluate', message: String(e) }));
 
-  if (!result?.ok) {
-    const parts = [`prerender: render-ready wait incomplete (${result?.reason ?? 'unknown'})`];
-    if (result?.message) parts.push(result.message);
-    process.stdout.write(`${parts.join('; ')}\n`);
-  }
+  // Note: render-ready wait timeouts are silently tolerated.  Earlier versions
+  // logged a warning per path, but it fires on essentially every route in
+  // projects whose data plugins don't dispatch `manifest:render-ready` (i.e.
+  // most of them), drowning the terminal in noise.  The fallback timeout is
+  // intentional and benign — the DOM is still captured.
 }
 
 // --- Config ------------------------------------------------------------------
@@ -246,7 +246,11 @@ function resolveConfig() {
       : [],
     dryRun: !!cli.dryRun,
     debugPrerender: !!cli.debugPrerender,
-    pipelineTimeout: 25000,
+    // 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.  Lowered from 25000 — the earlier settle
+    // waits already give plugins enough time to finish.
+    pipelineTimeout: 6000,
   };
 }
 
@@ -1356,7 +1360,7 @@ function generateLocaleVariantHtml({
   html = stripEmptyInlineMaskStyles(html);
   html = stripResolvedXIconDirectives(html);
   // markPrerenderedManifestComponents must run BEFORE stripPrerenderHydrateMarkers so it can
-  // detect data-prerender-hydrate markers and skip components inside hydrate islands.
+  // detect data-hydrate markers and skip components inside hydrate islands.
   html = markPrerenderedManifestComponents(html);
 
   const fileSegments = pathToFileSegments(pathSeg ? '/' + pathSeg : '/');
@@ -2024,16 +2028,21 @@ async function runPrerender(config) {
         timeout: Math.min(timeout, 30000),
       });
 
+      // Belt-and-suspenders settle waits.  Each one is bounded short because
+      // the authoritative `manifest:render-ready` wait below is what we really
+      // rely on.  These earlier waits exist as fallbacks for projects whose
+      // data plugins don't dispatch the modern signal — but they shouldn't
+      // dominate per-path runtime when they DO time out.
       await Promise.race([
         page.evaluate(() => {
           return new Promise((resolve) => {
             const done = () => resolve();
-            const t = setTimeout(done, 6000);
+            const t = setTimeout(done, 1500); // was 6000
             window.addEventListener(
               'manifest:routing-ready',
               () => {
                 clearTimeout(t);
-                setTimeout(done, 2000);
+                setTimeout(done, 500); // was 2000
               },
               { once: true }
             );
@@ -2042,13 +2051,13 @@ async function runPrerender(config) {
         new Promise((_, rej) => setTimeout(() => rej(new Error('ready timeout')), timeout)),
       ]).catch(() => { });
 
-      // Ensure manifest.min.js (dynamic loader) has run and injected plugin scripts before snapshot.
-      // Static output still runs the loader and Alpine; we just capture the DOM after they've set up.
+      // Ensure the dynamic loader has injected at least one plugin script.
+      // In practice this happens within ~100ms; the 1500ms cap is generous.
       await page.evaluate(() => {
         return new Promise((resolve) => {
           const check = () => document.querySelectorAll('script[src*="manifest"]').length >= 2;
           if (check()) return resolve();
-          const deadline = Date.now() + 5000;
+          const deadline = Date.now() + 1500; // was 5000
           const t = setInterval(() => {
             if (check() || Date.now() >= deadline) {
               clearInterval(t);
@@ -2058,19 +2067,21 @@ async function runPrerender(config) {
         });
       }).catch(() => { });
 
-      await page.waitForNetworkIdle({ idleTime: 1500, timeout: 10000 }).catch(() => { });
+      // Network idle: shorter idle window + shorter cap.  Most plugin scripts
+      // and data fetches complete in under 2s on a healthy local server.
+      await page.waitForNetworkIdle({ idleTime: 800, timeout: 4000 }).catch(() => { });
 
+      // DOM stability: 300ms quiet window is plenty after networkIdle has
+      // already drained pending fetches.
       await page.evaluate(() => {
         return new Promise((resolve) => {
           const observer = new MutationObserver(() => {
             clearTimeout(stable);
-            stable = setTimeout(resolve, 800);
+            stable = setTimeout(finish, 300); // was 800
           });
           observer.observe(document.documentElement, { childList: true, subtree: true, characterData: true });
-          let stable = setTimeout(() => {
-            observer.disconnect();
-            resolve();
-          }, 800);
+          const finish = () => { observer.disconnect(); resolve(); };
+          let stable = setTimeout(finish, 300); // was 800
         });
       }).catch(() => { });
 
@@ -2239,13 +2250,36 @@ async function runPrerender(config) {
       });
 
       // Strip x-markdown from elements that already have baked content.
-      // The markdown plugin hides elements with opacity:0 on init, then re-fetches and re-renders.
-      // For prerendered pages the content is already baked — removing x-markdown prevents the
-      // runtime plugin from re-processing (and temporarily hiding) the static content.
+      // The markdown plugin hides elements with opacity:0 on init, then re-fetches
+      // and re-renders.  For prerendered pages the content is already baked —
+      // removing x-markdown prevents the runtime plugin from re-processing (and
+      // temporarily hiding) the static content.
+      //
+      // We ALSO clear any leftover `opacity: 0` inline style the plugin set
+      // before/while rendering.  On dynamic expressions that initially evaluate
+      // empty (e.g. article content keyed off `$route` before `$x.articles` has
+      // loaded), the plugin sets opacity to 0 and may never restore it to 1 if
+      // the effect re-fires with an empty value.  The end state in the
+      // serialized HTML has rendered content but opacity:0 — invisible in
+      // production.  Since we're also removing x-markdown (so the runtime
+      // plugin doesn't re-hide the element), leaving the inline style would
+      // permanently hide authored content.
       await page.evaluate(() => {
         document.querySelectorAll('[x-markdown]').forEach((el) => {
           if (!el.textContent.trim() && !el.innerHTML.trim()) return;
           el.removeAttribute('x-markdown');
+          // Clean up opacity-0 + transition inline styles the plugin left behind.
+          const style = el.getAttribute('style') || '';
+          if (style) {
+            const cleaned = style
+              .replace(/\bopacity\s*:\s*0(?:\.\d+)?\s*;?/gi, '')
+              .replace(/\btransition\s*:\s*opacity[^;]*;?/gi, '')
+              .replace(/;\s*;/g, ';')
+              .replace(/^\s*;\s*|\s*;\s*$/g, '')
+              .trim();
+            if (cleaned) el.setAttribute('style', cleaned);
+            else el.removeAttribute('style');
+          }
         });
       });
 
@@ -2404,7 +2438,7 @@ async function runPrerender(config) {
       // $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]')) {
+          if (tpl.hasAttribute('data-hydrate') || tpl.closest('[data-hydrate]')) {
             tpl.removeAttribute('data-prerender-collapsed');
             tpl.removeAttribute('data-prerender-static-generated');
             return;
@@ -2485,7 +2519,7 @@ async function runPrerender(config) {
       await page.evaluate(() => {
         const loopVarRx = /^\s*(?:\(\s*([A-Za-z_$][\w$]*)(?:\s*,\s*([A-Za-z_$][\w$]*))?\s*\)|([A-Za-z_$][\w$]*))\s+in\s+/;
         document.querySelectorAll('template[x-for][data-prerender-static-generated="1"]').forEach((tpl) => {
-          if (tpl.hasAttribute('data-prerender-hydrate') || tpl.closest('[data-prerender-hydrate]')) return;
+          if (tpl.hasAttribute('data-hydrate') || tpl.closest('[data-hydrate]')) return;
           const xFor = (tpl.getAttribute('x-for') || '').trim();
           const m = xFor.match(loopVarRx);
           const itemVar = m ? (m[1] || m[3] || '') : '';
@@ -2499,7 +2533,7 @@ async function runPrerender(config) {
             // Only process clones that contain data-hydrate descendants
             if (
               !n.hasAttribute('x-data') &&
-              (n.hasAttribute('data-prerender-hydrate') || n.querySelector('[data-prerender-hydrate]'))
+              (n.hasAttribute('data-hydrate') || n.querySelector('[data-hydrate]'))
             ) {
               try {
                 const A = window.Alpine;
@@ -2541,7 +2575,7 @@ async function runPrerender(config) {
           const nodes = [el, ...Array.from(el.querySelectorAll('*'))];
           for (const node of nodes) {
             // Skip elements inside data-hydrate islands — their bindings must remain live
-            if (node.hasAttribute('data-prerender-hydrate') || node.closest('[data-prerender-hydrate]')) continue;
+            if (node.hasAttribute('data-hydrate') || node.closest('[data-hydrate]')) continue;
             const attrs = node.attributes ? Array.from(node.attributes) : [];
             for (const attr of attrs) {
               if (!bindingAttrRegex.test(attr.name)) continue;
@@ -2579,7 +2613,7 @@ async function runPrerender(config) {
         };
 
         document.querySelectorAll('template[x-for]').forEach((tpl) => {
-          if (tpl.hasAttribute('data-prerender-hydrate') || tpl.closest('[data-prerender-hydrate]')) return;
+          if (tpl.hasAttribute('data-hydrate') || tpl.closest('[data-hydrate]')) return;
           const xFor = (tpl.getAttribute('x-for') || '').trim();
           const m = xFor.match(loopVarRegex);
           const itemVar = m ? (m[1] || m[3] || '') : '';
@@ -2608,7 +2642,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;
+            if (tpl.hasAttribute('data-hydrate') || tpl.closest('[data-hydrate]')) return;
             const parent = tpl.parentNode;
             if (!parent) {
               tpl.remove();

package/package.json

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