npm - mnfst-render - Versions diffs - 0.5.26 → 0.5.27 - Mend

mnfst-render 0.5.26 → 0.5.27

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 +204 -36
package/package.json +1 -1

package/manifest.render.mjs CHANGED Viewed

@@ -254,6 +254,7 @@ function resolveConfig() {
     serve,
     output: resolve(root, cli.output ?? pre.output ?? 'website'),
     root,
+    manifest,
     routerBase: pre.routerBase ?? null,
     /** Logical path prefixes (after locale) that skip sticky locale prefix; see manifest:locale-route-exclude */
     localeRouteExclude: normalizeLocaleRouteExclude(
@@ -724,6 +725,18 @@ function stripDataTailwindAttr(html) {
   return html.replace(/\sdata-tailwind(?:=(["']).*?\1)?/gi, '');
 }
+/** Prepend `<!DOCTYPE html>` unless one is already present.
+ *
+ * The snapshot is captured via `document.documentElement.outerHTML`, which
+ * serializes only the <html> subtree and drops the document's doctype.
+ * Shipping that doctype-less HTML triggers quirks mode in browsers and is
+ * flagged by Lighthouse/PageSpeed.  Re-add it at write time so every emitted
+ * page (Puppeteer-rendered base pages and substituted locale variants) is in
+ * standards mode. */
+function ensureDoctype(html) {
+  return /^\s*<!doctype\b/i.test(html) ? html : `<!DOCTYPE html>\n${html}`;
+}
 /** Theme class de-bake + synchronous bootstrap.
  *
  * Puppeteer applies `<html class="light">` or `<html class="dark">` based on
@@ -1210,7 +1223,8 @@ function stripPrerenderBakedRadioCheckedForXModel(html) {
 // --- Canonical and hreflang (per-page injection) ---
-function buildCanonicalAndHreflang(pathSeg, locales, defaultLocale, base) {
+function buildCanonicalAndHreflang(pathSeg, locales, defaultLocale, base, opts = {}) {
+  const { skipCanonical = false } = opts;
   const baseClean = base.replace(/\/$/, '');
   const defaultLoc = defaultLocale || locales[0];
   const isDefaultLocalePrefixed =
@@ -1223,7 +1237,10 @@ function buildCanonicalAndHreflang(pathSeg, locales, defaultLocale, base) {
       : pathSeg;
   const canonicalHref = canonicalPath === '' ? `${baseClean}/` : `${baseClean}/${canonicalPath}`;
   const esc = (s) => String(s).replace(/&/g, '&amp;').replace(/"/g, '&quot;');
-  let out = `<link rel="canonical" href="${esc(canonicalHref)}">\n`;
+  // Skip the canonical <link> when the source head already declares one
+  // (first-wins, per seo-aeo.md); hreflang alternates are still emitted since
+  // those are framework-derived and rarely authored by hand.
+  let out = skipCanonical ? '' : `<link rel="canonical" href="${esc(canonicalHref)}">\n`;
   if (locales.length > 1) {
     const currentLocale = locales.find((l) => pathSeg === l || pathSeg.startsWith(l + '/')) || defaultLoc;
     const logicalRoute =
@@ -1581,7 +1598,8 @@ function generateLocaleVariantHtml({
   html = rewriteHtmlAssetPaths(html, fileSegments.length);
   const liveBase = config.liveUrl.replace(/\/$/, '');
-  const canonicalHreflang = buildCanonicalAndHreflang(pathSeg, locales, defaultLocale, liveBase);
+  const hasSourceCanonical = /<link\b[^>]*\brel=(["'])\s*canonical\s*\1/i.test(html);
+  const canonicalHreflang = buildCanonicalAndHreflang(pathSeg, locales, defaultLocale, liveBase, { skipCanonical: hasSourceCanonical });
   const ogLocale = buildOgLocale(pathSeg, locales, defaultLocale);
   const injectOgLocale = ogLocale && hasOtherOgMeta(html);
   if (injectOgLocale) html = stripOgLocaleFromHead(html);
@@ -2383,29 +2401,123 @@ function routeHtmlPath(outputDir, pathSeg) {
 }
 /**
- * Best-effort per-route lastmod date.  We pick the prerendered HTML file's
- * mtime — that file IS regenerated on every prerender, so it's no better than
- * "today" for unchanged content.  Fallback hierarchy: 1) source markdown if
- * discoverable under articles/<path>.md; 2) prerendered HTML mtime; 3) today.
+ * Collect filesystem paths for all local-file data sources declared in
+ * `manifest.json` that are relevant to the given locale. Caller stats them.
+ *
+ * Skips remote sources (URLs, Appwrite databases / storage) since they have
+ * no local mtime. Locale-keyed JSON/YAML sources include only the matching
+ * locale's file. Multilingual CSVs (`locales` key) include every listed file
+ * because any column edit can affect the routed page.
  */
-function routeLastModDate(rootDir, outputDir, pathSeg) {
-  // Try common source-file conventions first so the date reflects content
-  // changes rather than the prerender run.  Strip leading section prefix
-  // ("docs/", "blog/", "articles/") since markdown files typically live
-  // under articles/ keyed by the remaining path.
-  const stripPrefix = pathSeg.replace(/^(?:docs|blog|articles|posts|guides)\//, '');
+function collectDataSourceFiles(manifest, rootDir, effectiveLocale) {
+  const files = [];
+  const data = manifest?.data;
+  if (!data || typeof data !== 'object') return files;
+  const isLocaleKey = (key) =>
+    /^[a-z]{2,3}(?:-[A-Z][a-zA-Z]{1,7})?$/.test(key);
+  const localeMatches = (key) => {
+    if (!isLocaleKey(key)) return false;
+    if (effectiveLocale) return key === effectiveLocale;
+    // No locale context: include any locale-shaped key.
+    return true;
+  };
+  const isLocalPath = (s) => typeof s === 'string' && !/^https?:\/\//i.test(s);
+  const toAbs = (p) => join(rootDir, p.replace(/^\//, ''));
+  for (const value of Object.values(data)) {
+    // Plain string path → single locale-agnostic file.
+    if (isLocalPath(value)) {
+      files.push(toAbs(value));
+      continue;
+    }
+    if (!value || typeof value !== 'object') continue;
+    // Skip cloud / remote sources — they have no local file to stat.
+    if (value.url || value.appwriteDatabaseId || value.appwriteTableId || value.appwriteBucketId) continue;
+    for (const [key, v] of Object.entries(value)) {
+      // Multilingual CSV: { locales: "/p.csv" } or { locales: ["/a.csv", "/b.csv"] }
+      if (key === 'locales') {
+        if (isLocalPath(v)) files.push(toAbs(v));
+        else if (Array.isArray(v)) {
+          for (const p of v) if (isLocalPath(p)) files.push(toAbs(p));
+        }
+        continue;
+      }
+      // Colorpicker palette: { colorpicker: "/p.yaml" } or { colorpicker: { en: ..., fr: ... } }
+      if (key === 'colorpicker') {
+        if (isLocalPath(v)) files.push(toAbs(v));
+        else if (v && typeof v === 'object') {
+          for (const [k, p] of Object.entries(v)) {
+            if (localeMatches(k) && isLocalPath(p)) files.push(toAbs(p));
+          }
+        }
+        continue;
+      }
+      // Locale-keyed JSON/YAML: { en: "/p.en.json", fr: "/p.fr.json" }
+      if (localeMatches(key) && isLocalPath(v)) {
+        files.push(toAbs(v));
+      }
+    }
+  }
+  return files;
+}
+/**
+ * Best-effort per-route lastmod date. Takes the most recent mtime across:
+ *   1. Backing source-file conventions (markdown under articles/, pages/<path>.html)
+ *      so direct content edits are reflected.
+ *   2. Data-source files registered in `manifest.json` that are relevant to the
+ *      route's locale, so changes to JSON/YAML/CSV content driving the page
+ *      bump the date too (important for translated sites).
+ *
+ * Falls back to the prerendered HTML's own mtime only when nothing else is
+ * statable — the HTML mtime reflects rebuild time rather than content change
+ * time, so we prefer source/data mtimes when any exist.
+ */
+function routeLastModDate(rootDir, outputDir, pathSeg, manifest, localeList, defaultLocale) {
+  // Detect a locale prefix on the path (e.g. "fr/about" → locale "fr",
+  // unlocalized "about"). For unprefixed paths in a multi-locale site we
+  // fall back to the default locale when matching data-source locale keys.
+  let locale = null;
+  let unlocalizedPath = pathSeg;
+  if (Array.isArray(localeList) && localeList.length) {
+    const first = pathSeg.split('/')[0];
+    if (localeList.includes(first)) {
+      locale = first;
+      unlocalizedPath = pathSeg.slice(first.length + 1);
+    }
+  }
+  const effectiveLocale = locale || defaultLocale || null;
+  // Source-file candidates from common conventions, keyed on the unlocalized
+  // path (markdown files typically aren't per-locale duplicates).
+  const stripPrefix = unlocalizedPath.replace(/^(?:docs|blog|articles|posts|guides)\//, '');
   const candidates = [
     join(rootDir, 'articles', `${stripPrefix}.md`),
-    join(rootDir, 'articles', `${pathSeg}.md`),
-    join(rootDir, 'pages', `${pathSeg}.html`),
-    join(rootDir, `${pathSeg}.md`),
+    join(rootDir, 'articles', `${unlocalizedPath}.md`),
+    join(rootDir, 'pages', `${unlocalizedPath}.html`),
+    join(rootDir, `${unlocalizedPath}.md`),
   ];
+  // Add data-source files relevant to this locale.
+  if (manifest) {
+    candidates.push(...collectDataSourceFiles(manifest, rootDir, effectiveLocale));
+  }
+  // Take the max mtime across all source / data candidates.
+  let latest = null;
   for (const c of candidates) {
     try {
       const s = statSync(c);
-      if (s.isFile()) return s.mtime.toISOString().slice(0, 10);
+      if (s.isFile() && (!latest || s.mtime > latest)) latest = s.mtime;
     } catch { /* not found */ }
   }
+  if (latest) return latest.toISOString().slice(0, 10);
   // Fallback to the prerendered output mtime (always present).
   try {
     const out = routeHtmlPath(outputDir, pathSeg || '');
@@ -2420,6 +2532,7 @@ function writeSeoFiles(outputDir, pathList, liveUrl, locales, defaultLocale, ctx
   const localeList = Array.isArray(locales) ? locales : [];
   const multiLocale = localeList.length > 1;
   const rootDir = ctx.rootDir || '';
+  const manifest = ctx.manifest || null;
   writeFileSync(
     join(outputDir, 'robots.txt'),
@@ -2445,7 +2558,7 @@ Sitemap: ${base}/sitemap.xml
         body += `\n        <xhtml:link rel="alternate" hreflang="${escapeXmlText(hreflang)}" href="${escapeXmlText(href)}" />`;
       }
     }
-    const lastmod = routeLastModDate(rootDir, outputDir, pathSeg);
+    const lastmod = routeLastModDate(rootDir, outputDir, pathSeg, manifest, localeList, defaultLocale);
     body += `\n        <lastmod>${lastmod}</lastmod>
         <changefreq>monthly</changefreq>
         <priority>${path === '' ? '1.0' : '0.8'}</priority>`;
@@ -2716,6 +2829,42 @@ function copyProjectIntoDist(rootResolved, outputResolved) {
   COPY_EXCLUDE.delete(outputDirName);
 }
+/** Remove bare `@import "tailwindcss"` (and `tailwindcss/*` sub-imports) from
+ * CSS files copied into the output.
+ *
+ * Tailwind v4 conventions put `@import "tailwindcss";` at the top of a
+ * project's main CSS so the build tool pulls in the framework.  When that same
+ * file is also linked directly in the browser (as Manifest's
+ * `manifest.theme.css` convention does), the browser's native CSS loader
+ * resolves the bare specifier against the page origin and fetches
+ * `/tailwindcss` — which 404s to the SPA shell (text/html), tripping
+ * "Refused to apply style … is not a supported stylesheet MIME type" (flagged
+ * by PageSpeed Best Practices).  Manifest supplies Tailwind its own way
+ * (compiled `prerender.tailwind.css` for MPA, the Play-CDN style engine for
+ * SPA), so a raw import in a browser-served stylesheet is always redundant and
+ * harmful.  Strip it from the emitted copies only; source files are untouched. */
+function stripTailwindCssImportsFromOutput(outputDir) {
+  const importRx = /@import\s+(?:url\(\s*)?["']tailwindcss(?:\/[^"']*)?["']\s*\)?[^;\n]*;?[ \t]*\r?\n?/gi;
+  const walk = (dir) => {
+    for (const ent of readdirSync(dir, { withFileTypes: true })) {
+      if (ent.name.startsWith('.')) continue;
+      const p = join(dir, ent.name);
+      if (ent.isDirectory()) {
+        if (ent.name === 'node_modules') continue;
+        walk(p);
+      } else if (ent.name.endsWith('.css') && ent.name !== 'prerender.tailwind.css') {
+        try {
+          const css = readFileSync(p, 'utf8');
+          if (!/tailwindcss/i.test(css)) continue;
+          const next = css.replace(importRx, '');
+          if (next !== css) writeFileSync(p, next, 'utf8');
+        } catch { /* unreadable file — skip */ }
+      }
+    }
+  };
+  walk(outputDir);
+}
 // --- Main --------------------------------------------------------------------
 async function main() {
@@ -2819,6 +2968,14 @@ async function runPrerender(config) {
   }
   mkdirSync(outputResolved, { recursive: true });
   copyProjectIntoDist(rootResolved, outputResolved);
+  // Projects that use data-tailwind get their Tailwind from Manifest (compiled
+  // prerender.tailwind.css below, or the runtime style engine).  A leftover
+  // `@import "tailwindcss"` in a browser-linked stylesheet (e.g. the
+  // manifest.theme.css convention) would make the browser fetch /tailwindcss
+  // and fail; strip those imports from the copied CSS.
+  if (indexHtmlUsesTailwind(rootResolved)) {
+    stripTailwindCssImportsFromOutput(outputResolved);
+  }
   const pre = manifest.prerender ?? {};
   const bundleUtilities = pre.utilitiesBundle !== false;
@@ -3753,11 +3910,20 @@ async function runPrerender(config) {
       await page.evaluate(() => {
         const A = window.Alpine;
         const runBatch = typeof A?.mutateDom === 'function' ? (fn) => A.mutateDom(fn) : (fn) => fn();
-        const loopVarRegex = /^\s*(?:\(\s*([A-Za-z_$][\w$]*)(?:\s*,\s*([A-Za-z_$][\w$]*))?\s*\)|([A-Za-z_$][\w$]*))\s+in\s+/;
+        // Collect every loop-scope identifier from the x-for LHS, including
+        // destructuring forms — `item`, `(item, index)`, `[key, val]`,
+        // `{ a, b }`.  The old single/paren-only regex skipped destructured
+        // loops entirely, leaving bindings like x-text="file?.label" on baked
+        // clones; at runtime Alpine evaluated them outside the iteration scope
+        // and threw "file is not defined".
+        const extractLoopVars = (xForExpr) => {
+          const m = String(xForExpr || '').match(/^([\s\S]*?)\s+(?:in|of)\s+/);
+          return m ? (m[1].match(/[A-Za-z_$][\w$]*/g) || []) : [];
+        };
         // Include x-init: expanded clones still had x-init="getDescription(article)" etc.; Alpine then throws (article undefined).
         const bindingAttrRegex = /^(?:x-bind:|:|x-text|x-html|x-show|x-if|x-model|x-effect|x-init|x-icon|x-on:|@)/;
         const hasVar = (expr, varName) => varName && new RegExp(`\\b${varName}\\b`).test(expr || '');
-        const stripLoopBindings = (el, itemVar, indexVar) => {
+        const stripLoopBindings = (el, loopVars) => {
           const nodes = [el, ...Array.from(el.querySelectorAll('*'))];
           for (const node of nodes) {
             // Skip elements inside data-hydrate islands — their bindings must remain live
@@ -3766,7 +3932,7 @@ async function runPrerender(config) {
             for (const attr of attrs) {
               if (!bindingAttrRegex.test(attr.name)) continue;
               const expr = attr.value || '';
-              if (hasVar(expr, itemVar) || hasVar(expr, indexVar)) {
+              if (loopVars.some((v) => hasVar(expr, v))) {
                 const name = attr.name;
                 if (name === 'x-text' || name === 'x-html') {
                   if ((node.textContent || '').trim() || (node.innerHTML || '').trim()) {
@@ -3808,10 +3974,8 @@ async function runPrerender(config) {
           document.querySelectorAll('template[x-for]').forEach((tpl) => {
             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] || '') : '';
-            const indexVar = m ? (m[2] || '') : '';
-            if (!itemVar && !indexVar) return;
+            const loopVars = extractLoopVars(xFor);
+            if (!loopVars.length) return;
             const first = tpl.content?.firstElementChild;
             if (!first) return;
@@ -3820,7 +3984,7 @@ async function runPrerender(config) {
             let next = tpl.nextElementSibling;
             while (next) {
               if (next.tagName !== tag) break;
-              stripLoopBindings(next, itemVar, indexVar);
+              stripLoopBindings(next, loopVars);
               next = next.nextElementSibling;
             }
           });
@@ -3914,10 +4078,13 @@ async function runPrerender(config) {
       // Remove orphan x-for clones that still reference loop-scope vars (e.g. image/index)
       // outside their template scope. These throw Alpine errors in live static hosting.
       await page.evaluate(() => {
-        const loopVarRegex = /^\s*(?:\(\s*([A-Za-z_$][\w$]*)(?:\s*,\s*([A-Za-z_$][\w$]*))?\s*\)|([A-Za-z_$][\w$]*))\s+in\s+/;
+        const extractLoopVars = (xForExpr) => {
+          const m = String(xForExpr || '').match(/^([\s\S]*?)\s+(?:in|of)\s+/);
+          return m ? (m[1].match(/[A-Za-z_$][\w$]*/g) || []) : [];
+        };
         const bindingAttrRegex = /^(?:x-bind:|:|x-text|x-html|x-show|x-if|x-model|x-effect|x-init|x-icon|x-on:|@)/;
         const hasVar = (expr, varName) => varName && new RegExp(`\\b${varName}\\b`).test(expr || '');
-        const elementReferencesLoopScope = (el, itemVar, indexVar) => {
+        const elementReferencesLoopScope = (el, loopVars) => {
           if (!el) return false;
           const nodes = [el, ...Array.from(el.querySelectorAll('*'))];
           for (const node of nodes) {
@@ -3925,7 +4092,7 @@ async function runPrerender(config) {
             for (const attr of attrs) {
               if (!bindingAttrRegex.test(attr.name)) continue;
               const expr = attr.value || '';
-              if (hasVar(expr, itemVar) || hasVar(expr, indexVar)) return true;
+              if (loopVars.some((v) => hasVar(expr, v))) return true;
             }
           }
           return false;
@@ -3935,10 +4102,8 @@ async function runPrerender(config) {
         // Running this on all x-for templates can remove valid prerendered list items.
         document.querySelectorAll('template[x-for][data-prerender-collapsed="1"]').forEach((tpl) => {
           const xFor = (tpl.getAttribute('x-for') || '').trim();
-          const m = xFor.match(loopVarRegex);
-          const itemVar = m ? (m[1] || m[3] || '') : '';
-          const indexVar = m ? (m[2] || '') : '';
-          if (!itemVar && !indexVar) return;
+          const loopVars = extractLoopVars(xFor);
+          if (!loopVars.length) return;
           const first = tpl.content?.firstElementChild;
           if (!first) return;
@@ -3949,7 +4114,7 @@ async function runPrerender(config) {
             const sameTag = next.tagName === tag;
             if (!sameTag) break;
-            const referencesLoopScope = elementReferencesLoopScope(next, itemVar, indexVar);
+            const referencesLoopScope = elementReferencesLoopScope(next, loopVars);
             const toRemove = next;
             next = next.nextElementSibling;
@@ -4072,7 +4237,8 @@ async function runPrerender(config) {
       html = rewriteHtmlAssetPaths(html, fileSegments.length);
       const liveBase = config.liveUrl.replace(/\/$/, '');
-      const canonicalHreflang = buildCanonicalAndHreflang(is404 ? '' : pathSeg, locales, defaultLocale, liveBase);
+      const hasSourceCanonical = /<link\b[^>]*\brel=(["'])\s*canonical\s*\1/i.test(html);
+      const canonicalHreflang = buildCanonicalAndHreflang(is404 ? '' : pathSeg, locales, defaultLocale, liveBase, { skipCanonical: hasSourceCanonical });
       const ogLocale = buildOgLocale(is404 ? '' : pathSeg, locales, defaultLocale);
       const injectOgLocale = ogLocale && hasOtherOgMeta(html);
       if (injectOgLocale) html = stripOgLocaleFromHead(html);
@@ -4094,6 +4260,7 @@ async function runPrerender(config) {
       );
       // (Hydration contract was already injected into the raw HTML before
       // the Node.js post-processing pipeline ran, so it's already present.)
+      html = ensureDoctype(html);
       mkdirSync(outDir, { recursive: true });
       writeFileSync(outFile, html, 'utf8');
       pushDebug({
@@ -4276,7 +4443,7 @@ async function runPrerender(config) {
         const fileSegments = pathToFileSegments(pathSeg ? '/' + pathSeg : '/');
         const outDir = join(config.output, ...fileSegments);
         mkdirSync(outDir, { recursive: true });
-        writeFileSync(join(outDir, 'index.html'), html, 'utf8');
+        writeFileSync(join(outDir, 'index.html'), ensureDoctype(html), 'utf8');
       } catch (err) {
         failedPaths.push({ path: displayPath, message: err?.message ?? String(err) });
         process.stderr.write(`prerender: substitution failed ${displayPath}: ${failedPaths[failedPaths.length - 1].message}\n`);
@@ -4317,6 +4484,7 @@ async function runPrerender(config) {
     defaultLocale,
     {
       rootDir: config.root,
+      manifest: config.manifest,
       siteName: config.seo?.siteName,
       siteDescription: config.seo?.siteDescription,
     }

package/package.json CHANGED Viewed

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