npm - mnfst-render - Versions diffs - 0.5.22 → 0.5.23 - Mend

mnfst-render 0.5.22 → 0.5.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/manifest.render.mjs +66 -5
package/package.json +1 -1

package/manifest.render.mjs CHANGED Viewed

@@ -671,6 +671,51 @@ function stripDataTailwindAttr(html) {
   return html.replace(/\sdata-tailwind(?:=(["']).*?\1)?/gi, '');
 }
+/** Theme class de-bake + synchronous bootstrap.
+ *
+ * Puppeteer applies `<html class="light">` or `<html class="dark">` based on
+ * the build host's system preference at prerender time.  Shipping that baked
+ * class to users in the OPPOSITE preference causes a visible flash on every
+ * page load (dark→light or light→dark) until the themes plugin re-evaluates.
+ *
+ * Fix: strip `light`/`dark` from the baked `<html class>` and inject a tiny
+ * synchronous `<script>` at the top of `<head>` that sets the correct class
+ * BEFORE the first paint — based on the user's `localStorage.theme` (their
+ * saved preference) or `prefers-color-scheme` (their system preference).
+ *
+ * The themes plugin (`manifest.themes.js`) still runs later for reactivity
+ * (Alpine bindings, click handlers, system-preference change listener), but
+ * the initial paint already has the correct class so there's no flash.
+ */
+function debakeThemeClass(html) {
+  // Strip `light`/`dark` from `<html class="...">`.  When the class attribute
+  // becomes empty, drop the attribute entirely (including its leading space)
+  // while preserving the rest of the `<html ...>` tag.  Bug-fixed twice — the
+  // earlier version's regex captured the entire `<html ... class="...` chunk
+  // so returning `''` for an empty cleaned class wiped the whole opening tag.
+  let out = html.replace(/<html\b([^>]*)>/i, (full, attrs) => {
+    const newAttrs = attrs.replace(/\sclass=(["'])([^"']*)\1/i, (_, q, classes) => {
+      const cleaned = classes
+        .split(/\s+/)
+        .filter((c) => c && c !== 'light' && c !== 'dark')
+        .join(' ')
+        .trim();
+      return cleaned ? ` class=${q}${cleaned}${q}` : '';
+    });
+    return `<html${newAttrs}>`;
+  });
+  // Inject the synchronous theme bootstrap as the FIRST element inside <head>
+  // so it runs before any CSS or other scripts.  Self-contained — reads
+  // localStorage + prefers-color-scheme and sets the class atomically.
+  const bootstrap = `<script>(function(){try{var t=localStorage.getItem('theme')||'system';var d=t==='dark'||(t==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);document.documentElement.classList.add(d?'dark':'light');}catch(e){document.documentElement.classList.add('light');}})();</script>`;
+  if (!out.includes('id="manifest-theme-bootstrap"')) {
+    // Tag the script for idempotency on rebuilds and easy debugging.
+    const tagged = bootstrap.replace('<script>', '<script id="manifest-theme-bootstrap">');
+    out = out.replace(/<head(\s[^>]*)?>/i, (m) => `${m}\n  ${tagged}`);
+  }
+  return out;
+}
 /** Manifest utilities plugin: <style id="utility-styles"> and <style id="utility-styles-critical"> */
 function extractUtilityStyleBlocks(html) {
   const blocks = [];
@@ -1448,6 +1493,7 @@ function generateLocaleVariantHtml({
   } else {
     html = stripDataTailwindAttr(html);
   }
+  html = debakeThemeClass(html);
   const pageUtilityBlocks = [];
   if (bundleUtilities) {
@@ -2488,7 +2534,7 @@ async function runPrerender(config) {
         // Runtime-only Alpine magics whose values change after the prerender
         // snapshot (e.g. via media query, route change, auth state).  Bindings
         // referencing these must re-evaluate in the live page.
-        const RUNTIME_MAGIC_RX = /\$(theme|locale|url|auth|search|query|toast)\b/;
+        const RUNTIME_MAGIC_RX = /(?<!['"])\$(theme|locale|url|auth|search|query|toast)\b/;
         const isDiffBindingAttr = (name) =>
           name === ':class' || name === 'x-bind:class' ||
@@ -2564,10 +2610,24 @@ async function runPrerender(config) {
                 // the element unstyled until Alpine + async data loads catch up.
                 // The baked value IS the correct initial render.
                 if (src === null) {
-                  const hasBinding =
-                    (name === 'style' && (':style' in source || 'x-bind:style' in source || 'x-show' in source)) ||
-                    (name === 'class' && (':class' in source || 'x-bind:class' in source));
-                  if (hasBinding) continue;
+                  // Keep baked `style` when an Alpine binding manages it.
+                  // The baked value (e.g. `mask-image: url(...)` from a `:style`
+                  // expression evaluating against $x data, or `display: none`
+                  // from `x-show`) is the correct initial render — nulling it
+                  // would flash the element while Alpine + async data catch up.
+                  // Alpine's :style/x-show handlers diff against the current
+                  // DOM correctly, so the baked value is safely toggled later.
+                  const skipStyleNull = name === 'style' &&
+                    (':style' in source || 'x-bind:style' in source || 'x-show' in source);
+                  if (skipStyleNull) continue;
+                  // NOTE: do NOT extend this skip to `class`.  Alpine's
+                  // `:class="cond ? 'foo' : ''"` (string-form) treats the
+                  // pre-existing className as the immutable baseline and only
+                  // ADDS classes on top — it cannot REMOVE a baked class.  If
+                  // the prerender baked `class="selected"` for the initial
+                  // tab, clicking other tabs would never strip `selected`
+                  // from the first one.  Always restoring class to null lets
+                  // Alpine manage it cleanly from a blank slate.
                 }
                 attrsOut[name] = src; // may be null (means "remove this attribute")
                 dirty = true;
@@ -2971,6 +3031,7 @@ async function runPrerender(config) {
       } else {
         html = stripDataTailwindAttr(html);
       }
+      html = debakeThemeClass(html);
       if (bundleUtilities) {
         const extracted = extractUtilityStyleBlocks(html);
         html = extracted.html;

package/package.json CHANGED Viewed

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