mnfst-render 0.1.5 → 0.1.7

package/manifest.render.mjs

@@ -2,8 +2,9 @@
 
 /* Manifest Render */
 
-import { readFileSync, mkdirSync, writeFileSync, existsSync, rmSync, statSync, readdirSync, cpSync } from 'node:fs';
-import { join, resolve, dirname, relative, basename } from 'node:path';
+import { readFileSync, mkdirSync, writeFileSync, existsSync, rmSync, statSync, readdirSync, cpSync, unlinkSync } from 'node:fs';
+import { spawnSync } from 'node:child_process';
+import { join, resolve, dirname, relative, basename, sep } from 'node:path';
 import { createServer } from 'node:http';
 import { createRequire } from 'node:module';
 import { fileURLToPath } from 'node:url';
@@ -144,20 +145,50 @@ function extractXRouteConditions(html) {
   return conditions;
 }
 
+function normalizeRouteCondition(cond) {
+  const raw = String(cond || '').trim();
+  if (!raw) return { kind: 'all', path: '' };
+  if (raw.startsWith('!')) {
+    const omitted = raw.slice(1).trim();
+    if (!omitted || omitted === '*') return { kind: 'not-found', path: '' }; // !*
+    return { kind: 'omit', path: omitted };
+  }
+  if (raw === '*') return { kind: 'all', path: '' };
+  const withoutExact = raw.startsWith('=') ? raw.slice(1) : raw;
+  const trimmed = withoutExact.replace(/^\/+|\/+$/g, '');
+  if (!trimmed) return { kind: 'root', path: '' };
+  if (trimmed.endsWith('/*')) {
+    const base = trimmed.slice(0, -2).replace(/^\/+|\/+$/g, '');
+    return base ? { kind: 'wildcard-prefix', path: base } : { kind: 'all', path: '' };
+  }
+  if (trimmed.includes('*')) return { kind: 'unsupported-pattern', path: trimmed };
+  return { kind: 'path', path: trimmed };
+}
+
 function conditionsToPaths(conditions) {
   const paths = new Set();
   paths.add('/');
   for (const c of conditions) {
-    if (c === '/' || c === '') continue;
-    if (c.startsWith('/')) {
-      paths.add(c === '/' ? '/' : c.replace(/^\//, '').replace(/\/$/, '') || '/');
-    } else {
-      paths.add('/' + c.replace(/\/$/, ''));
-    }
+    const parsed = normalizeRouteCondition(c);
+    // Discovery rules aligned with router docs:
+    // - "*" and omitted routes do not define concrete paths.
+    // - "!*" is handled separately via explicit NOT_FOUND path.
+    // - "about/*" does not include "/about" by itself; concrete children come from data paths.
+    if (parsed.kind === 'path') paths.add('/' + parsed.path);
+    else if (parsed.kind === 'root') paths.add('/');
   }
   return paths;
 }
 
+function getWildcardBasesFromConditions(conditions) {
+  const bases = new Set();
+  for (const c of conditions) {
+    const parsed = normalizeRouteCondition(c);
+    if (parsed.kind === 'wildcard-prefix' && parsed.path) bases.add(parsed.path);
+  }
+  return [...bases];
+}
+
 // --- Discovery: data-driven paths (docs-style YAML group/items[].path) ------
 
 function parseYamlPaths(filePath) {
@@ -177,6 +208,13 @@ function parseYamlPaths(filePath) {
       const segment = pathMatch[1].trim();
       paths.push(`${currentGroup}/${segment}`);
     }
+    const genericPathMatch = line.match(/^\s*(?:-\s*)?(?:path|slug):\s*["']?([^"'\n#]+)["']?/);
+    if (genericPathMatch) {
+      const v = genericPathMatch[1].trim().replace(/^\/+|\/+$/g, '');
+      if (v && !v.includes('*') && !/\.[a-z0-9]+$/i.test(v)) {
+        paths.push(v);
+      }
+    }
   }
   return paths;
 }
@@ -260,20 +298,38 @@ function parseCsvPaths(filePath) {
   return paths;
 }
 
-function discoverDataPaths(manifest, rootDir) {
+function discoverDataPaths(manifest, rootDir, wildcardBases = [], locales = []) {
   const paths = new Set();
   const data = manifest.data;
   if (!data || typeof data !== 'object') return paths;
+  const localeSet = new Set((locales || []).map((l) => String(l).toLowerCase()));
+
+  function shouldIncludeDataPath(rawPath) {
+    const p = String(rawPath || '').replace(/^\/+|\/+$/g, '');
+    if (!p || p.includes('#') || p.includes('?') || p.includes('*')) return false;
+    if (wildcardBases.length === 0) return true;
+    const segs = p.split('/');
+    const rest = segs.length > 1 && localeSet.has(segs[0].toLowerCase()) ? segs.slice(1).join('/') : p;
+    return wildcardBases.some((base) => rest.startsWith(base + '/'));
+  }
 
   function addFilePaths(value) {
     if (typeof value !== 'string' || !value.startsWith('/')) return;
     const filePath = join(rootDir, value.slice(1));
     if (filePath.endsWith('.yaml') || filePath.endsWith('.yml')) {
-      parseYamlPaths(filePath).forEach((p) => paths.add('/' + p));
+      parseYamlPaths(filePath).forEach((p) => {
+        if (shouldIncludeDataPath(p)) paths.add('/' + p);
+      });
     } else if (filePath.endsWith('.json')) {
-      parseJsonPaths(filePath).forEach((p) => paths.add(p.startsWith('/') ? p : '/' + p));
+      parseJsonPaths(filePath).forEach((p) => {
+        const normalized = p.startsWith('/') ? p.slice(1) : p;
+        if (shouldIncludeDataPath(normalized)) paths.add('/' + normalized);
+      });
     } else if (filePath.endsWith('.csv')) {
-      parseCsvPaths(filePath).forEach((p) => paths.add(p.startsWith('/') ? p : '/' + p));
+      parseCsvPaths(filePath).forEach((p) => {
+        const normalized = p.startsWith('/') ? p.slice(1) : p;
+        if (shouldIncludeDataPath(normalized)) paths.add('/' + normalized);
+      });
     }
   }
 
@@ -293,11 +349,14 @@ function discoverDataPaths(manifest, rootDir) {
 function discoverRoutes(manifest, rootDir) {
   const pathSet = new Set();
   pathSet.add('/');
+  const allConditions = new Set();
+  const locales = discoverLocales(manifest, rootDir);
 
   const indexPath = join(rootDir, 'index.html');
   if (existsSync(indexPath)) {
     const indexHtml = readFileSync(indexPath, 'utf8');
     const conditions = extractXRouteConditions(indexHtml);
+    conditions.forEach((c) => allConditions.add(c));
     conditionsToPaths(conditions).forEach((p) => pathSet.add(p));
   }
 
@@ -309,14 +368,14 @@ function discoverRoutes(manifest, rootDir) {
     const compPath = join(rootDir, rel);
     if (existsSync(compPath)) {
       const html = readFileSync(compPath, 'utf8');
-      extractXRouteConditions(html).forEach((c) => {
-        if (c.startsWith('/')) pathSet.add(c === '/' ? '/' : c.replace(/^\//, '').replace(/\/$/, '') || '/');
-        else if (c) pathSet.add('/' + c);
-      });
+      const conditions = extractXRouteConditions(html);
+      conditions.forEach((c) => allConditions.add(c));
+      conditionsToPaths(conditions).forEach((p) => pathSet.add(p));
     }
   }
 
-  discoverDataPaths(manifest, rootDir).forEach((p) => pathSet.add(p));
+  const wildcardBases = getWildcardBasesFromConditions(allConditions);
+  discoverDataPaths(manifest, rootDir, wildcardBases, locales).forEach((p) => pathSet.add(p));
 
   const arr = [...pathSet].map((p) => (p === '/' ? '' : p.replace(/^\//, '').replace(/\/$/, '') || ''));
   return arr.includes('') ? arr : ['', ...arr.filter(Boolean)];
@@ -329,6 +388,29 @@ function pathToFileSegments(pathname) {
   return normalized ? normalized.split('/') : [];
 }
 
+function validatePrerenderedOutput(outputDir, pathList) {
+  const invalidPathTokens = pathList.filter((p) => /(^|\/)[*=]/.test(p) || p.includes('/*') || p.includes('*'));
+  if (invalidPathTokens.length > 0) {
+    throw new Error(`prerender validation failed: invalid discovered route token(s): ${invalidPathTokens.join(', ')}`);
+  }
+
+  const badFolders = [];
+  function walk(dir, rel = '') {
+    const entries = readdirSync(dir, { withFileTypes: true });
+    for (const ent of entries) {
+      if (!ent.isDirectory()) continue;
+      const seg = ent.name;
+      const nextRel = rel ? `${rel}/${seg}` : seg;
+      if (seg.includes('*') || seg.startsWith('=')) badFolders.push(nextRel);
+      walk(join(dir, seg), nextRel);
+    }
+  }
+  if (existsSync(outputDir)) walk(outputDir, '');
+  if (badFolders.length > 0) {
+    throw new Error(`prerender validation failed: invalid output folder(s): ${badFolders.join(', ')}`);
+  }
+}
+
 // --- Strip dev-only injected content (e.g. browser-sync) so dist works under any server -
 
 function stripDevOnlyContent(html) {
@@ -350,6 +432,181 @@ function stripInjectedPluginScripts(html) {
   return out;
 }
 
+function stripRuntimeTailwindArtifacts(html) {
+  let out = html.replace(/\sdata-tailwind(?:=(["']).*?\1)?/gi, '');
+  // Remove PlayCDN-injected runtime Tailwind stylesheet from snapshots.
+  out = out.replace(/<style>\s*\/\*!\s*tailwindcss[\s\S]*?<\/style>/gi, '');
+  return out;
+}
+
+/** Manifest utilities plugin: <style id="utility-styles"> and <style id="utility-styles-critical"> */
+function extractUtilityStyleBlocks(html) {
+  const blocks = [];
+  let out = html.replace(
+    /<style[^>]*\bid=["']utility-styles-critical["'][^>]*>([\s\S]*?)<\/style>/gi,
+    (_, css) => {
+      const t = (css || '').trim();
+      if (t) blocks.push({ kind: 'critical', css: t });
+      return '';
+    }
+  );
+  out = out.replace(/<style[^>]*\bid=["']utility-styles["'][^>]*>([\s\S]*?)<\/style>/gi, (_, css) => {
+    const t = (css || '').trim();
+    if (t) blocks.push({ kind: 'main', css: t });
+    return '';
+  });
+  return { html: out, blocks };
+}
+
+function injectAfterHeadOpen(html, snippet) {
+  if (!snippet) return html;
+  const hrefMatch = snippet.match(/href=["']([^"']+)["']/);
+  if (hrefMatch && html.includes(hrefMatch[1])) return html;
+  return html.replace(/<head([^>]*)>/i, `<head$1>\n${snippet}\n`);
+}
+
+function indexHtmlUsesTailwind(rootDir) {
+  const indexPath = join(rootDir, 'index.html');
+  if (!existsSync(indexPath)) return false;
+  const html = readFileSync(indexPath, 'utf8');
+  return /\sdata-tailwind(?:=(["']).*?\1)?/i.test(html) && /<script[^>]*manifest\.min\.js/i.test(html);
+}
+
+/**
+ * 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.
+ */
+function runTailwindCliForPrerender(rootDir, outputDir, pre) {
+  const explicit = pre?.tailwind;
+  if (explicit === false) return false;
+  const usesTailwind = explicit === true || indexHtmlUsesTailwind(rootDir);
+  if (!usesTailwind) return false;
+
+  const outCss = join(outputDir, 'prerender.tailwind.css');
+  let inputPath = null;
+  let createdTempInput = false;
+  const userInput = pre?.tailwindInput;
+  if (typeof userInput === 'string' && userInput.trim()) {
+    inputPath = resolve(rootDir, userInput.trim());
+  }
+  if (!inputPath || !existsSync(inputPath)) {
+    inputPath = join(rootDir, '.mnfst-prerender-tailwind-input.css');
+    writeFileSync(inputPath, '@import "tailwindcss";\n', 'utf8');
+    createdTempInput = true;
+  }
+
+  const outputBasename = basename(outputDir);
+  const defaultContent = [
+    '**/*.html',
+    '**/*.{js,mjs,css}',
+    '**/*.json',
+    '!**/node_modules/**',
+    `!**/${outputBasename}/**`,
+  ];
+  const contentGlobs = Array.isArray(pre?.tailwindContent) && pre.tailwindContent.length > 0
+    ? pre.tailwindContent
+    : defaultContent;
+
+  const args = [
+    '--yes',
+    '@tailwindcss/cli@4',
+    '-i',
+    inputPath,
+    '-o',
+    outCss,
+  ];
+  for (const g of contentGlobs) {
+    args.push('--content', g);
+  }
+
+  process.stdout.write('prerender: compiling Tailwind CSS (this may take a minute)...\n');
+  const r = spawnSync('npx', args, {
+    cwd: rootDir,
+    encoding: 'utf8',
+    shell: process.platform === 'win32',
+  });
+  if (createdTempInput) {
+    try {
+      unlinkSync(inputPath);
+    } catch {
+      // ignore
+    }
+  }
+  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.');
+    if (r.stderr) console.error(r.stderr);
+    if (r.stdout) console.error(r.stdout);
+    return false;
+  }
+  if (!existsSync(outCss)) {
+    console.error('prerender: Tailwind CLI did not produce prerender.tailwind.css');
+    return false;
+  }
+  process.stdout.write(`prerender: wrote ${relative(rootDir, outCss)}\n`);
+  return true;
+}
+
+function mergeUtilityCssBlocks(allBlocks) {
+  const critical = [];
+  const main = [];
+  const seenC = new Set();
+  const seenM = new Set();
+  for (const b of allBlocks) {
+    if (b.kind === 'critical') {
+      if (!seenC.has(b.css)) {
+        seenC.add(b.css);
+        critical.push(b.css);
+      }
+    } else {
+      if (!seenM.has(b.css)) {
+        seenM.add(b.css);
+        main.push(b.css);
+      }
+    }
+  }
+  const parts = [];
+  if (critical.length) parts.push('/* manifest utilities: critical */\n', critical.join('\n\n'));
+  if (main.length) parts.push('/* manifest utilities */\n', main.join('\n\n'));
+  return parts.join('\n');
+}
+
+function walkHtmlFiles(dir, out = []) {
+  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;
+      walkHtmlFiles(p, out);
+    } else if (ent.name.endsWith('.html')) out.push(p);
+  }
+  return out;
+}
+
+function depthFromOutputRoot(outputDir, filePath) {
+  const rel = relative(outputDir, dirname(filePath));
+  if (!rel || rel === '.') return 0;
+  return rel.split(sep).filter(Boolean).length;
+}
+
+/** Inject stylesheet link with correct relative href for static hosting (after prerender wrote files). */
+function postProcessInjectStylesheetLink(outputDir, filename) {
+  const cssPath = join(outputDir, filename);
+  if (!existsSync(cssPath)) return;
+  const stat = statSync(cssPath);
+  if (stat.size === 0) return;
+
+  const files = walkHtmlFiles(outputDir);
+  for (const file of files) {
+    let html = readFileSync(file, 'utf8');
+    if (html.includes(filename)) continue;
+    const depth = depthFromOutputRoot(outputDir, file);
+    const prefix = depth ? '../'.repeat(depth) : '';
+    const tag = `<link rel="stylesheet" href="${prefix}${filename}">`;
+    html = injectAfterHeadOpen(html, tag);
+    writeFileSync(file, html, 'utf8');
+  }
+}
+
 // --- (Removed) We used to strip x-text containing product. / feature. to avoid wrong-scope errors
 //    on duplicated x-for output, but that also stripped legitimate loop body bindings (e.g. product
 //    search results), breaking reactivity. If "product/feature is not defined" appears again, fix
@@ -771,6 +1028,7 @@ function copyProjectIntoDist(rootResolved, outputResolved) {
 
 async function main() {
   const config = resolveConfig();
+  const startedAt = Date.now();
   let staticServer = null;
   if (config.serve) {
     const { server, url } = await startStaticServer(config.root);
@@ -784,6 +1042,8 @@ async function main() {
       await new Promise((res) => staticServer.close(res));
     }
   }
+  const secs = ((Date.now() - startedAt) / 1000).toFixed(1);
+  process.stdout.write(`prerender: total time ${secs}s\n`);
 }
 
 async function runPrerender(config) {
@@ -802,6 +1062,12 @@ async function runPrerender(config) {
 
   const defaultLocale = locales[0] ?? null;
   const routeSegments = discoverRoutes(manifest, config.root);
+  const localeSet = new Set(locales.map((l) => String(l).toLowerCase()));
+  const localeNeutralSegments = routeSegments.filter((seg) => {
+    if (!seg) return true;
+    const first = seg.split('/')[0].toLowerCase();
+    return !localeSet.has(first);
+  });
   const paths = new Set();
   paths.add('');
 
@@ -810,14 +1076,15 @@ async function runPrerender(config) {
   }
   for (const locale of locales.slice(1)) {
     paths.add(locale);
-    for (const seg of routeSegments) {
+    for (const seg of localeNeutralSegments) {
+      if (!seg) continue;
       paths.add(`${locale}/${seg}`);
     }
   }
   // Default locale also under its slug (e.g. /en/, /en/page-1) so linking is symmetric; canonical points to root
   if (defaultLocale) {
     paths.add(defaultLocale);
-    for (const seg of routeSegments) {
+    for (const seg of localeNeutralSegments) {
       if (seg !== '') paths.add(`${defaultLocale}/${seg}`);
     }
   }
@@ -846,6 +1113,11 @@ async function runPrerender(config) {
   mkdirSync(outputResolved, { recursive: true });
   copyProjectIntoDist(rootResolved, outputResolved);
 
+  const pre = manifest.prerender ?? {};
+  const bundleUtilities = pre.utilitiesBundle !== false;
+  const tailwindBuilt = runTailwindCliForPrerender(rootResolved, outputResolved, pre);
+  const utilityBlocks = [];
+
   let browser;
   try {
     const chromium = await importFromProject('@sparticuz/chromium');
@@ -990,7 +1262,11 @@ async function runPrerender(config) {
             xFor.includes('$url') || xFor.includes('$auth') ||
             /\bin\s+(filtered\w*|results|searchResults)\b/.test(xFor);
           const forceCollapse = explicit || inferred;
-          if (!forceCollapse) return; // keep prerendered list for SEO
+          if (!forceCollapse) {
+            tpl.removeAttribute('data-prerender-collapsed');
+            return; // keep prerendered list for SEO
+          }
+          tpl.setAttribute('data-prerender-collapsed', '1');
           const first = tpl.content?.firstElementChild;
           if (!first) return;
           const tag = first.tagName;
@@ -1028,7 +1304,9 @@ async function runPrerender(config) {
           return false;
         };
 
-        document.querySelectorAll('template[x-for]').forEach((tpl) => {
+        // Only clean up templates we intentionally collapsed above.
+        // 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] || '') : '';
@@ -1076,6 +1354,15 @@ async function runPrerender(config) {
       let html = await page.evaluate(() => document.documentElement.outerHTML);
       html = stripDevOnlyContent(html);
       html = stripInjectedPluginScripts(html);
+      html = stripRuntimeTailwindArtifacts(html);
+      if (bundleUtilities) {
+        const extracted = extractUtilityStyleBlocks(html);
+        html = extracted.html;
+        for (const b of extracted.blocks) utilityBlocks.push(b);
+      }
+      if (tailwindBuilt) {
+        html = injectAfterHeadOpen(html, '<link rel="stylesheet" href="/prerender.tailwind.css">');
+      }
       html = stripDuplicatedLoopDirectives(html);
       html = stripPrerenderedXDataDirectives(html);
       const currentLocale =
@@ -1123,6 +1410,15 @@ async function runPrerender(config) {
     await browser.close();
   }
 
+  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');
+    }
+  }
+
   writeSeoFiles(
     config.output,
     pathList.filter((p) => p !== NOT_FOUND_PATH),
@@ -1130,6 +1426,7 @@ async function runPrerender(config) {
     locales,
     defaultLocale
   );
+  validatePrerenderedOutput(config.output, pathList.filter((p) => p !== NOT_FOUND_PATH));
 
   if (config.redirects.length > 0) {
     const lines = config.redirects.map((r) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mnfst-render",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Render Manifest sites to static HTML for SEO",
   "type": "module",
   "bin": {
@@ -32,4 +32,4 @@
     "url": "git+https://github.com/andrewmatlock/Manifest.git",
     "directory": "packages/render"
   }
-}
+}