mnfst-render 0.4.8 → 0.5.0

package/manifest.render.mjs

@@ -229,23 +229,18 @@ function resolveConfig() {
     locales: pre.locales,
     redirects: Array.isArray(pre.redirects) ? pre.redirects : [],
     wait: cli.wait ?? pre.wait ?? null,
-    waitAfterIdle: Math.max(0, cli.waitAfterIdle ?? pre.waitAfterIdle ?? 0),
+    waitAfterIdle: 0,
     concurrency: Math.max(1, cli.concurrency ?? pre.concurrency ?? Math.max(4, cpus().length - 1)),
-    /** Default: generate locale variant pages via Node.js text substitution rather than Puppeteer.
-     *  Set manifest.prerender.localeSubstitution=false to always use Puppeteer for every locale. */
-    localeSubstitution: pre.localeSubstitution !== false,
-    /** Locales to always render with Puppeteer even when localeSubstitution is enabled (e.g. RTL). */
-    localeSubstitutionExclude: Array.isArray(pre.localeSubstitutionExclude)
-      ? pre.localeSubstitutionExclude.map(String)
-      : [],
+    localeSubstitution: true,
+    localeSubstitutionExclude: [],
     /** Explicit locale-neutral paths to render in addition to those discovered automatically.
      *  Each entry is expanded to all locale variants (e.g. "legal/privacy" → "cs/legal/privacy", ...) */
     paths: Array.isArray(pre.paths)
       ? pre.paths.map((p) => String(p).replace(/^\/+|\/+$/g, '')).filter(Boolean)
       : [],
     dryRun: !!cli.dryRun,
-    debugPrerender: !!(cli.debugPrerender ?? pre.debugPrerender),
-    pipelineTimeout: Math.max(3000, Number(pre.pipelineTimeout) || 25000),
+    debugPrerender: !!cli.debugPrerender,
+    pipelineTimeout: 25000,
   };
 }
 
@@ -694,13 +689,11 @@ function promptContinueWithRuntimeTailwind(rootDir) {
 
 /**
  * Build a static Tailwind stylesheet via @tailwindcss/cli (v4+), scanning project sources.
- * Only runs when the project opts in (data-tailwind on manifest script) or manifest.prerender.tailwind === true.
+ * Only runs when the project uses data-tailwind on the manifest script tag (auto-detected).
+ * Set manifest.prerender.tailwindInput to a custom CSS entry file if needed.
  */
 function runTailwindCliForPrerender(rootDir, outputDir, pre) {
-  const explicit = pre?.tailwind;
-  if (explicit === false) return false;
-  const usesTailwind = explicit === true || indexHtmlUsesTailwind(rootDir);
-  if (!usesTailwind) return false;
+  if (!indexHtmlUsesTailwind(rootDir)) return false;
 
   const outCss = join(outputDir, 'prerender.tailwind.css');
   try {
@@ -708,7 +701,7 @@ function runTailwindCliForPrerender(rootDir, outputDir, pre) {
   } catch {
     const proceed = promptContinueWithRuntimeTailwind(rootDir);
     if (!proceed) {
-      throw new Error('prerender aborted: install tailwindcss/@tailwindcss/cli or disable prerender.tailwind.');
+      throw new Error('prerender aborted: install tailwindcss/@tailwindcss/cli or remove data-tailwind from your manifest script tag.');
     }
     process.stdout.write('prerender: continuing with runtime data-tailwind behavior.\n');
     return false;
@@ -726,15 +719,12 @@ function runTailwindCliForPrerender(rootDir, outputDir, pre) {
   }
 
   const outputBasename = basename(outputDir);
-  const defaultContent = [
+  const contentGlobs = [
     '**/*.html',
     '!**/node_modules/**',
     '!**/dist/**',
     `!**/${outputBasename}/**`,
   ];
-  const contentGlobs = Array.isArray(pre?.tailwindContent) && pre.tailwindContent.length > 0
-    ? pre.tailwindContent
-    : defaultContent;
 
   const args = [
     '--yes',
@@ -762,7 +752,7 @@ function runTailwindCliForPrerender(rootDir, outputDir, pre) {
     }
   }
   if (r.status !== 0) {
-    console.error('prerender: Tailwind CLI failed; install with `npm i -D tailwindcss @tailwindcss/cli` or fix tailwindInput/tailwindContent in manifest.prerender.');
+    console.error('prerender: Tailwind CLI failed; install with `npm i -D tailwindcss @tailwindcss/cli` or check tailwindInput in manifest.prerender.');
     if (r.stderr) console.error(r.stderr);
     if (r.stdout) console.error(r.stdout);
     return false;
@@ -957,6 +947,13 @@ function stripPrerenderHydrateMarkers(html) {
   return html.replace(/\sdata-prerender-hydrate(?:=(?:"[^"]*"|'[^']*'|[^\s>]+))?/gi, '');
 }
 
+// Remove the snapshot id attribute used by the hydrate restore phase.  These ids
+// only exist to let the post-Alpine restore step in Puppeteer find each snapshotted
+// element back; they have no purpose in the final output.
+function stripPrerenderHydrateSnapshotIds(html) {
+  return html.replace(/\sdata-manifest-hyd-id(?:=(?:"[^"]*"|'[^']*'|[^\s>]+))?/gi, '');
+}
+
 function markPrerenderedManifestComponents(html) {
   return html.replace(/<(x-[a-z][\w-]*)([^>]*)>/gi, (full, tag, attrs) => {
     const a = attrs || '';
@@ -1345,6 +1342,7 @@ function generateLocaleVariantHtml({
   // detect data-prerender-hydrate markers and skip components inside hydrate islands.
   html = markPrerenderedManifestComponents(html);
   html = stripPrerenderHydrateMarkers(html);
+  html = stripPrerenderHydrateSnapshotIds(html);
 
   const fileSegments = pathToFileSegments(pathSeg ? '/' + pathSeg : '/');
   html = rewriteHtmlAssetPaths(html, fileSegments.length);
@@ -1867,6 +1865,104 @@ async function runPrerender(config) {
         }
       }, currentLocale);
 
+      // Snapshot pristine source attributes of hydrate-target elements BEFORE Alpine
+      // touches them.  We do this by wrapping `Alpine.initTree` — Alpine calls this
+      // for the initial tree walk AND every time the components plugin lazy-loads a
+      // new <x-*> component.  Right before Alpine processes a subtree, we walk it
+      // and snapshot every hydrate target inside.  This is the exact moment the
+      // user's source HTML is sitting in the DOM with no Alpine mutations applied.
+      //
+      // The snapshots are restored in a later page.evaluate call after Alpine
+      // settles.  This is true hydration: Alpine never gets to bake state into
+      // hydrate elements, so every directive (`:class`, `:style`, `x-text`, custom
+      // plugin directives, etc.) works in the prerendered MPA exactly the way it
+      // does in the live SPA — no per-binding strip logic, no cloak band-aids, no
+      // edge cases to chase.
+      await page.evaluateOnNewDocument(() => {
+        const allSnapshots = [];
+        let nextId = 0;
+        const skipTags = new Set(['MAIN', 'BODY', 'HTML']);
+
+        const snapshotElement = (el) => {
+          if (!el || el.nodeType !== 1) return;
+          if (el.hasAttribute('data-manifest-hyd-id')) return; // already snapshotted
+          const id = '__manifest-hyd-' + nextId++;
+          el.setAttribute('data-manifest-hyd-id', id);
+          const attrs = {};
+          for (let i = 0; i < el.attributes.length; i++) {
+            const a = el.attributes[i];
+            if (a.name === 'data-manifest-hyd-id') continue;
+            attrs[a.name] = a.value;
+          }
+          allSnapshots.push({ id, attrs });
+        };
+
+        const snapshotElementAndDescendants = (el) => {
+          snapshotElement(el);
+          if (el && el.querySelectorAll) {
+            el.querySelectorAll('*').forEach(snapshotElement);
+          }
+        };
+
+        const snapshotSubtree = (root) => {
+          if (!root || root.nodeType !== 1) return;
+
+          // 1. Direct data-hydrate roots + descendants within this subtree.
+          const hydrateRoots = [];
+          if (root.matches && root.matches('[data-hydrate]')) hydrateRoots.push(root);
+          if (root.querySelectorAll) {
+            root.querySelectorAll('[data-hydrate]').forEach((el) => hydrateRoots.push(el));
+          }
+          hydrateRoots.forEach(snapshotElementAndDescendants);
+
+          // 2. x-theme elements (color mode plugin needs runtime click handler).
+          if (root.matches && root.matches('[x-theme]')) snapshotElementAndDescendants(root);
+          if (root.querySelectorAll) {
+            root.querySelectorAll('[x-theme]').forEach(snapshotElementAndDescendants);
+          }
+
+          // 3. Propagate from data-hydrate children to nearest LOCAL x-data ancestor
+          //    so the reactive controller, sibling event handlers (@click toggles
+          //    etc.) and all bindings inside the scope are preserved together.
+          //    Skip page-level scopes (main, body, [x-route]).
+          hydrateRoots.forEach((el) => {
+            let ancestor = el.parentElement;
+            while (ancestor && ancestor !== document.body) {
+              if (
+                ancestor.hasAttribute('x-data') &&
+                !skipTags.has(ancestor.tagName) &&
+                !ancestor.hasAttribute('x-route')
+              ) {
+                snapshotElementAndDescendants(ancestor);
+                break;
+              }
+              ancestor = ancestor.parentElement;
+            }
+          });
+
+          window.__manifestHydrateSnapshots = allSnapshots;
+        };
+
+        // Wrap Alpine.initTree once Alpine is available.  alpine:init fires before
+        // Alpine walks the tree for the first time, giving us the perfect insertion
+        // point.  After wrapping, every initTree call (initial walk + every lazy
+        // component load) snapshots its subtree before Alpine processes it.
+        let installed = false;
+        const installInterceptor = () => {
+          if (installed || !window.Alpine || typeof window.Alpine.initTree !== 'function') return;
+          installed = true;
+          const original = window.Alpine.initTree.bind(window.Alpine);
+          window.Alpine.initTree = function (root) {
+            try { snapshotSubtree(root || document.body); } catch (_) { /* graceful */ }
+            return original.apply(this, arguments);
+          };
+        };
+        if (typeof document !== 'undefined') {
+          document.addEventListener('alpine:init', installInterceptor);
+          document.addEventListener('alpine:initialized', installInterceptor);
+        }
+      });
+
       pushDebug({ path: displayPath, stage: 'start' });
       await page.goto(url, {
         waitUntil: 'domcontentloaded',
@@ -2087,11 +2183,39 @@ async function runPrerender(config) {
         });
       });
 
-      // Mark data-hydrate islands so static compile transforms skip them.
+      // 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.
+      await page.evaluate(() => {
+        document.querySelectorAll('[x-markdown]').forEach((el) => {
+          if (!el.textContent.trim() && !el.innerHTML.trim()) return;
+          el.removeAttribute('x-markdown');
+        });
+      });
+
+      // Restore hydrate-target elements to their pristine source attributes
+      // (snapshotted via evaluateOnNewDocument before Alpine ran).  This is true
+      // hydration: every Alpine binding (`:class`, `:style`, `:value`, `x-text`,
+      // `x-init`, custom plugin directives, …) is preserved exactly as authored,
+      // and Alpine processes them at runtime in the prerendered MPA the same way
+      // it would in the live SPA.  After restoring source attributes we re-add the
+      // `data-prerender-hydrate` marker so downstream Node.js stripping passes
+      // continue to skip these elements.
       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'));
+        const snapshots = window.__manifestHydrateSnapshots || [];
+        snapshots.forEach(({ id, attrs }) => {
+          const el = document.querySelector(`[data-manifest-hyd-id="${id}"]`);
+          if (!el) return;
+          // Wipe everything Alpine may have added or mutated.
+          Array.from(el.attributes).map((a) => a.name).forEach((name) => el.removeAttribute(name));
+          // Put the original source attributes back.
+          Object.entries(attrs).forEach(([name, value]) => {
+            el.setAttribute(name, value);
+          });
+          // Marker so downstream stripping (xfor processing, dynamic-binding strip,
+          // component pre-render marking, etc.) skips this element.
+          el.setAttribute('data-prerender-hydrate', '1');
         });
       });
 
@@ -2438,6 +2562,7 @@ async function runPrerender(config) {
       // detect data-prerender-hydrate markers and skip components inside hydrate islands.
       html = markPrerenderedManifestComponents(html);
       html = stripPrerenderHydrateMarkers(html);
+      html = stripPrerenderHydrateSnapshotIds(html);
       html = rewriteHtmlAssetPaths(html, fileSegments.length);
       const liveBase = config.liveUrl.replace(/\/$/, '');
       const canonicalHreflang = buildCanonicalAndHreflang(is404 ? '' : pathSeg, locales, defaultLocale, liveBase);

package/package.json

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