mnfst-render 0.1.6 → 0.1.8

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, readSync, 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';
@@ -179,6 +180,15 @@ function conditionsToPaths(conditions) {
   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) {
@@ -288,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);
+      });
     }
   }
 
@@ -321,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));
   }
 
@@ -338,11 +369,13 @@ function discoverRoutes(manifest, rootDir) {
     if (existsSync(compPath)) {
       const html = readFileSync(compPath, 'utf8');
       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)];
@@ -399,6 +432,223 @@ 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);
+}
+
+function promptContinueWithRuntimeTailwind(rootDir) {
+  const installMsg = [
+    'prerender: tailwindcss package is not installed for this project.',
+    '',
+    'To enable static Tailwind CSS compilation, install:',
+    '  npm i -D tailwindcss @tailwindcss/cli',
+    '',
+    `Project: ${rootDir}`,
+    '',
+    'Continue prerender with runtime data-tailwind instead? [P]roceed/[E]nd (default: P): ',
+  ].join('\n');
+  process.stdout.write(`${installMsg}\n`);
+
+  if (!process.stdin.isTTY || !process.stdout.isTTY) {
+    process.stdout.write(
+      'prerender: non-interactive terminal detected; continuing with runtime data-tailwind behavior.\n'
+    );
+    return true;
+  }
+  const buf = Buffer.alloc(1);
+  let answer = '';
+  while (true) {
+    const n = readSync(0, buf, 0, 1, null);
+    if (n <= 0) break;
+    const ch = buf.toString('utf8', 0, n);
+    if (ch === '\n' || ch === '\r') break;
+    answer += ch;
+  }
+  const normalized = answer.trim().toLowerCase();
+  return normalized === '' || normalized === 'p' || normalized === 'proceed' || normalized === 'y' || normalized === 'yes';
+}
+
+/**
+ * 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');
+  try {
+    require.resolve('tailwindcss', { paths: [rootDir] });
+  } catch {
+    const proceed = promptContinueWithRuntimeTailwind(rootDir);
+    if (!proceed) {
+      throw new Error('prerender aborted: install tailwindcss/@tailwindcss/cli or disable prerender.tailwind.');
+    }
+    process.stdout.write('prerender: continuing with runtime data-tailwind behavior.\n');
+    return false;
+  }
+  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
@@ -820,6 +1070,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);
@@ -833,6 +1084,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) {
@@ -851,6 +1104,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('');
 
@@ -859,14 +1118,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}`);
     }
   }
@@ -895,6 +1155,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');
@@ -1131,6 +1396,17 @@ async function runPrerender(config) {
       let html = await page.evaluate(() => document.documentElement.outerHTML);
       html = stripDevOnlyContent(html);
       html = stripInjectedPluginScripts(html);
+      if (tailwindBuilt) {
+        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 =
@@ -1178,6 +1454,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),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mnfst-render",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "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"
   }
-}
+}