meno-core 1.0.16 → 1.0.19

package/bin/cli.ts

@@ -7,6 +7,7 @@
 import { resolve, join } from 'path';
 import { existsSync, mkdirSync, writeFileSync, cpSync, readFileSync } from 'fs';
 import { setProjectRoot } from '../lib/server/projectContext';
+import { generateBuildErrorPage, type BuildErrorsData } from '../lib/server/ssr/buildErrorOverlay';
 
 const args = process.argv.slice(2);
 const command = args[0];
@@ -105,6 +106,21 @@ async function startStaticServer(distPath: string) {
       const url = new URL(req.url);
       let pathname = url.pathname;
 
+      // Check for build errors and show overlay (except for _errors.json itself)
+      if (pathname !== '/_errors.json') {
+        const errorsPath = join(distPath, '_errors.json');
+        if (existsSync(errorsPath)) {
+          try {
+            const errorsData: BuildErrorsData = JSON.parse(readFileSync(errorsPath, 'utf-8'));
+            return new Response(generateBuildErrorPage(errorsData), {
+              headers: { 'Content-Type': 'text/html; charset=utf-8' },
+            });
+          } catch {
+            // If we can't parse errors file, continue normally
+          }
+        }
+      }
+
       // Default to index.html for root
       if (pathname === '/') {
         pathname = '/index.html';
@@ -191,7 +207,8 @@ async function runBuild(isDev: boolean = false) {
   console.log(`📁 Building project: ${projectRoot}${isDev ? ' (dev mode - including drafts)' : ''}`);
 
   // Import and run build
-  await import('../build-static.ts');
+  const { buildStaticPages } = await import('../build-static.ts');
+  await buildStaticPages();
 }
 
 async function runServe() {

package/build-static.ts

@@ -4,9 +4,10 @@
  * CSP-compliant: Extracts JavaScript to external files
  */
 
-import { existsSync, readdirSync, mkdirSync, rmSync, statSync, copyFileSync } from "fs";
-import { writeFile } from "fs/promises";
+import { existsSync, readdirSync, mkdirSync, rmSync, statSync, copyFileSync, unlinkSync, writeFileSync } from "fs";
+import { writeFile, readFile } from "fs/promises";
 import { join } from "path";
+import type { BuildError, BuildErrorsData } from "./lib/server/ssr/buildErrorOverlay";
 import { createHash } from "crypto";
 import {
   loadJSONFile,
@@ -17,6 +18,8 @@ import {
 } from "./lib/server/jsonLoader";
 import { generateSSRHTML } from "./lib/server/ssrRenderer";
 import type { SSRHTMLResult } from "./lib/server/ssr/htmlGenerator";
+import { prepareClientData, type ClientDataCollection } from "./lib/server/ssr/clientDataInjector";
+import { clearJSValidationCache, getJSValidationErrors } from "./lib/server/ssr/jsCollector";
 import { projectPaths } from "./lib/server/projectContext";
 import { loadProjectConfig } from "./lib/shared/fontLoader";
 import { FileSystemCMSProvider } from "./lib/server/providers/fileSystemCMSProvider";
@@ -24,6 +27,12 @@ import { CMSService } from "./lib/server/services/cmsService";
 import { isI18nValue, resolveI18nValue } from "./lib/shared/i18n";
 import type { ComponentDefinition, JSONPage, CMSSchema, CMSItem, I18nConfig } from "./lib/shared/types";
 import type { SlugMap } from "./lib/shared/slugTranslator";
+import { buildItemUrl } from "./lib/shared/itemTemplateUtils";
+
+/**
+ * Collect build errors for error overlay
+ */
+const buildErrors: BuildError[] = [];
 
 /**
  * Generate short hash from content for file naming
@@ -32,24 +41,91 @@ function hashContent(content: string): string {
   return createHash('sha256').update(content).digest('hex').slice(0, 8);
 }
 
+/**
+ * Format a Bun build log entry to a readable string
+ */
+function formatBunLog(log: any): string {
+  const parts: string[] = [];
+
+  // Try to get position info
+  if (log.position) {
+    const pos = log.position;
+    if (pos.file) parts.push(`File: ${pos.file}`);
+    if (pos.line !== undefined) parts.push(`Line ${pos.line}:${pos.column || 0}`);
+    if (pos.lineText) parts.push(`  ${pos.lineText}`);
+  }
+
+  // Get the message
+  if (log.message) {
+    parts.push(log.message);
+  } else if (log.text) {
+    parts.push(log.text);
+  }
+
+  // If we couldn't extract anything useful, stringify the whole thing
+  if (parts.length === 0) {
+    try {
+      return JSON.stringify(log, null, 2);
+    } catch {
+      return String(log);
+    }
+  }
+
+  return parts.join('\n');
+}
+
 /**
  * Minify JavaScript code using Bun's built-in bundler
+ * Throws on error instead of silently failing
  */
 async function minifyJS(code: string): Promise<string> {
   const tempFile = join('/tmp', `meno-minify-${Date.now()}.js`);
   try {
     await writeFile(tempFile, code, 'utf-8');
 
+    // Use throw: true to get detailed error information
     const result = await Bun.build({
       entrypoints: [tempFile],
       minify: true,
+      throw: true, // This makes Bun throw with detailed error info
     });
 
-    if (result.success && result.outputs.length > 0) {
+    if (result.outputs.length > 0) {
       return await result.outputs[0].text();
     }
-    // Fallback to original if minification fails
-    return code;
+
+    throw new Error('JavaScript minification produced no output');
+  } catch (err: any) {
+    // Re-throw with formatted message that includes all details
+    let details = '';
+
+    // Bun's BuildError has a logs array with detailed info
+    if (err.logs && Array.isArray(err.logs)) {
+      details = err.logs.map((log: any) => {
+        const parts: string[] = [];
+        if (log.position?.line) {
+          parts.push(`Line ${log.position.line}:${log.position.column || 0}`);
+        }
+        if (log.position?.lineText) {
+          parts.push(log.position.lineText);
+        }
+        if (log.message) {
+          parts.push(log.message);
+        }
+        return parts.length > 0 ? parts.join('\n') : String(log);
+      }).join('\n\n');
+    }
+
+    // If no logs, try Bun.inspect for full error details
+    if (!details) {
+      try {
+        details = Bun.inspect(err);
+      } catch {
+        details = err.stack || err.message || String(err);
+      }
+    }
+
+    throw new Error(`JavaScript minification failed:\n${details}`);
   } finally {
     // Clean up temp file
     try {
@@ -284,6 +360,29 @@ function buildCMSItemPath(
   return urlPattern.replace('{{slug}}', String(slug));
 }
 
+/**
+ * Generate static JSON data files for collections with 'static' strategy
+ * Output: /data/{collection}/index.json
+ */
+async function generateStaticDataFiles(
+  staticCollections: Map<string, ClientDataCollection>,
+  distDir: string
+): Promise<void> {
+  if (staticCollections.size === 0) return;
+
+  console.log(`\n📦 Generating static data files...`);
+
+  for (const [collectionId, data] of staticCollections) {
+    const dataDir = join(distDir, 'data', collectionId);
+    if (!existsSync(dataDir)) {
+      mkdirSync(dataDir, { recursive: true });
+    }
+    const jsonPath = join(dataDir, 'index.json');
+    await writeFile(jsonPath, JSON.stringify(data.items), 'utf-8');
+    console.log(`   ✅ /data/${collectionId}/index.json (${data.items.length} items)`);
+  }
+}
+
 /**
  * Build CMS templates from pages/templates/ directory
  */
@@ -295,6 +394,7 @@ async function buildCMSTemplates(
   distDir: string,
   cmsService: CMSService,
   generatedUrls: Set<string>,
+  staticCollections: Map<string, ClientDataCollection>,
   siteUrl?: string
 ): Promise<{ success: number; errors: number }> {
   let successCount = 0;
@@ -344,12 +444,32 @@ async function buildCMSTemplates(
 
       console.log(`   Found ${items.length} item(s)`);
 
+      // Prepare client data if clientData is enabled
+      let clientDataCollections: Map<string, ClientDataCollection> | undefined;
+      if (cmsSchema.clientData?.enabled) {
+        const clientData = prepareClientData(cmsSchema.id, items, cmsSchema.clientData);
+        if (clientData) {
+          if (clientData.strategy === 'inline') {
+            // Inline data embedded in HTML
+            clientDataCollections = new Map([[cmsSchema.id, clientData]]);
+            console.log(`   📦 Client data (inline): ${clientData.items.length} items (${clientData.config.fields?.length || 'all'} fields)`);
+          } else if (clientData.strategy === 'static') {
+            // Static data written to separate file
+            staticCollections.set(cmsSchema.id, clientData);
+            console.log(`   📦 Client data (static): ${clientData.items.length} items → /data/${cmsSchema.id}/index.json`);
+          }
+        }
+      }
+
       for (const item of items) {
         for (const localeConfig of i18nConfig.locales) {
           const locale = localeConfig.code;
           const baseUrl = siteUrl || "";
           const itemPath = buildCMSItemPath(cmsSchema.urlPattern, item, cmsSchema.slugField, locale, i18nConfig);
 
+          // Create CMS item with computed _url for {{cms._url}} template access
+          const itemWithUrl: CMSItem = { ...item, _url: itemPath };
+
           // Generate HTML with JS returned separately (CSP-compliant)
           const result = await generateSSRHTML({
             pageData,
@@ -359,9 +479,11 @@ async function buildCMSTemplates(
             useBuiltBundle: true,
             locale,
             slugMappings,
-            cmsContext: { cms: item },
+            cmsContext: { cms: itemWithUrl },
             cmsService,
-            returnSeparateJS: true
+            returnSeparateJS: true,
+            pageLibraries: pageData.meta?.libraries,
+            clientDataCollections,
           }) as SSRHTMLResult;
 
           // If there's JavaScript, write to external file and update HTML
@@ -388,8 +510,57 @@ async function buildCMSTemplates(
           successCount++;
         }
       }
-    } catch (error) {
+    } catch (error: any) {
+      // Capture full error with as much detail as possible
+      let errorMessage: string;
+
+      if (error instanceof Error) {
+        // Check for AggregateError (multiple errors)
+        if ('errors' in error && Array.isArray(error.errors)) {
+          errorMessage = error.errors.map((e: any) => e.stack || e.message || String(e)).join('\n\n');
+        }
+        // Check for cause chain
+        else if (error.cause) {
+          const causeMsg = error.cause instanceof Error
+            ? (error.cause.stack || error.cause.message)
+            : String(error.cause);
+          errorMessage = `${error.stack || error.message}\n\nCaused by:\n${causeMsg}`;
+        }
+        // Bun's BuildMessage has logs array
+        else if ('logs' in error && Array.isArray(error.logs)) {
+          errorMessage = error.logs.map(formatBunLog).join('\n\n');
+        }
+        else {
+          errorMessage = error.stack || error.message;
+        }
+      } else if (typeof error === 'object' && error !== null) {
+        // Bun BuildOutput has logs
+        if (error.logs && Array.isArray(error.logs)) {
+          errorMessage = error.logs.map(formatBunLog).join('\n\n');
+        } else {
+          errorMessage = String(error);
+        }
+      } else {
+        errorMessage = String(error);
+      }
+
+      // If we still just have "Bundle failed", try to get more from Bun.inspect
+      if (errorMessage === 'Bundle failed' || errorMessage.includes('Bundle failed\n')) {
+        try {
+          // Bun.inspect gives the same output as console.log
+          const inspected = Bun.inspect(error);
+          if (inspected && inspected !== '[object Object]' && inspected.length > errorMessage.length) {
+            errorMessage = inspected;
+          }
+        } catch {}
+      }
+
       console.error(`❌ Error processing ${file}:`, error);
+      buildErrors.push({
+        file: `pages/templates/${file}`,
+        message: errorMessage,
+        type: errorMessage.includes('minification') || errorMessage.includes('minify') ? 'minify' : 'cms',
+      });
       errorCount++;
     }
   }
@@ -400,9 +571,17 @@ async function buildCMSTemplates(
 /**
  * Main build function
  */
-async function buildStaticPages(): Promise<void> {
+export async function buildStaticPages(): Promise<void> {
   console.log("🏗️  Building static HTML files...\n");
 
+  // Clear previous build errors and JS validation cache
+  buildErrors.length = 0;
+  clearJSValidationCache();
+
+  // Reset configService to ensure it loads from the correct project directory
+  const { configService } = await import("./lib/server/services/configService");
+  configService.reset();
+
   // Load project config first
   const projectConfig = await loadProjectConfig();
   const siteUrl = (projectConfig as { siteUrl?: string }).siteUrl?.replace(/\/$/, ''); // Remove trailing slash
@@ -417,13 +596,29 @@ async function buildStaticPages(): Promise<void> {
   // Clean dist directory (removes editor files, old HTML)
   cleanDist();
 
+  // Clear the JS file cache since cleanDist() removed _scripts/
+  // Without this, cached entries would skip file creation on subsequent builds
+  jsFileCache.clear();
+
   // Copy fonts, images, icons, and functions directories to dist
   console.log("📦 Copying assets...");
   const distDir = projectPaths.dist();
+
+  // Delete old _errors.json if it exists (start fresh)
+  const errorsPath = join(distDir, '_errors.json');
+  if (existsSync(errorsPath)) {
+    unlinkSync(errorsPath);
+  }
   copyDirectory(projectPaths.fonts(), join(distDir, "fonts"));
   copyDirectory(projectPaths.images(), join(distDir, "images"));
   copyDirectory(projectPaths.icons(), join(distDir, "icons"));
 
+  // Copy libraries folder (downloaded external JS/CSS files)
+  const librariesDir = join(projectPaths.project, "libraries");
+  if (existsSync(librariesDir)) {
+    copyDirectory(librariesDir, join(distDir, "libraries"));
+  }
+
   // Copy functions folder for Cloudflare Pages
   const functionsDir = projectPaths.functions();
   if (existsSync(functionsDir)) {
@@ -452,6 +647,35 @@ async function buildStaticPages(): Promise<void> {
     }
   }
 
+  // Generate _headers from CSP config if no custom _headers file exists
+  if (!hostingFiles.includes('_headers')) {
+    await configService.load();
+    const cspConfig = configService.getCSP();
+    if (cspConfig && Object.keys(cspConfig).length > 0) {
+      const extraScripts = cspConfig.scriptSrc?.join(' ') || '';
+      const extraStyles = cspConfig.styleSrc?.join(' ') || '';
+      const extraConnect = cspConfig.connectSrc?.join(' ') || '';
+      const extraFrames = cspConfig.frameSrc?.join(' ') || '';
+      const extraFonts = cspConfig.fontSrc?.join(' ') || '';
+      const extraImgs = cspConfig.imgSrc?.join(' ') || '';
+
+      const cspDirectives = [
+        "default-src 'self'",
+        `script-src 'self' 'unsafe-inline' https://f.vimeocdn.com https://player.vimeo.com https://www.youtube.com https://s.ytimg.com ${extraScripts}`.trim(),
+        `style-src 'self' 'unsafe-inline' https://f.vimeocdn.com ${extraStyles}`.trim(),
+        `img-src 'self' data: https: ${extraImgs}`.trim(),
+        `connect-src 'self' https://vimeo.com https://*.vimeocdn.com ${extraConnect}`.trim(),
+        `frame-src https://player.vimeo.com https://vimeo.com https://www.youtube.com https://www.youtube-nocookie.com ${extraFrames}`.trim(),
+        `font-src 'self' data: ${extraFonts}`.trim(),
+        "media-src 'self' https: blob:"
+      ].join('; ');
+
+      const headersContent = `/*\n  Content-Security-Policy: ${cspDirectives}\n`;
+      writeFileSync(join(distDir, '_headers'), headersContent);
+      hostingFiles.push('_headers (generated from csp config)');
+    }
+  }
+
   // Copy .well-known directory if exists
   const wellKnownDir = join(projectPaths.project, '.well-known');
   if (existsSync(wellKnownDir)) {
@@ -558,7 +782,8 @@ async function buildStaticPages(): Promise<void> {
           locale,
           slugMappings,
           cmsService,
-          returnSeparateJS: true
+          returnSeparateJS: true,
+          pageLibraries: pageData.meta?.libraries,
         }) as SSRHTMLResult;
 
         // If there's JavaScript, write to external file and update HTML
@@ -578,6 +803,11 @@ async function buildStaticPages(): Promise<void> {
           mkdirSync(outputDir, { recursive: true });
         }
 
+        // Debug: show end of HTML
+        if (urlPath === '/') {
+          console.log('[DEBUG] Last 500 chars of HTML:', finalHtml.slice(-500));
+        }
+
         await writeFile(outputPath, finalHtml, "utf-8");
 
         generatedUrls.add(urlPath);
@@ -585,14 +815,64 @@ async function buildStaticPages(): Promise<void> {
         successCount++;
       }
 
-    } catch (error) {
+    } catch (error: any) {
+      // Capture full error with as much detail as possible
+      let errorMessage: string;
+
+      if (error instanceof Error) {
+        // Check for AggregateError (multiple errors)
+        if ('errors' in error && Array.isArray(error.errors)) {
+          errorMessage = error.errors.map((e: any) => e.stack || e.message || String(e)).join('\n\n');
+        }
+        // Check for cause chain
+        else if (error.cause) {
+          const causeMsg = error.cause instanceof Error
+            ? (error.cause.stack || error.cause.message)
+            : String(error.cause);
+          errorMessage = `${error.stack || error.message}\n\nCaused by:\n${causeMsg}`;
+        }
+        // Bun's BuildMessage has logs array
+        else if ('logs' in error && Array.isArray(error.logs)) {
+          errorMessage = error.logs.map(formatBunLog).join('\n\n');
+        }
+        else {
+          errorMessage = error.stack || error.message;
+        }
+      } else if (typeof error === 'object' && error !== null) {
+        // Bun BuildOutput has logs
+        if (error.logs && Array.isArray(error.logs)) {
+          errorMessage = error.logs.map(formatBunLog).join('\n\n');
+        } else {
+          errorMessage = String(error);
+        }
+      } else {
+        errorMessage = String(error);
+      }
+
+      // If we still just have "Bundle failed", try to get more from Bun.inspect
+      if (errorMessage === 'Bundle failed' || errorMessage.includes('Bundle failed\n')) {
+        try {
+          // Bun.inspect gives the same output as console.log
+          const inspected = Bun.inspect(error);
+          if (inspected && inspected !== '[object Object]' && inspected.length > errorMessage.length) {
+            errorMessage = inspected;
+          }
+        } catch {}
+      }
+
       console.error(`❌ Error building ${basePath}:`, error);
+      buildErrors.push({
+        file: `pages/${file}`,
+        message: errorMessage,
+        type: errorMessage.includes('minification') || errorMessage.includes('minify') ? 'minify' : 'render',
+      });
       errorCount++;
     }
   }
 
   // Build CMS templates from pages/templates/
   const templatesDir = join(pagesDir, 'templates');
+  const staticCollections = new Map<string, ClientDataCollection>();
   const cmsResult = await buildCMSTemplates(
     templatesDir,
     globalComponents,
@@ -601,11 +881,15 @@ async function buildStaticPages(): Promise<void> {
     distDir,
     cmsService,
     generatedUrls,
+    staticCollections,
     siteUrl
   );
   successCount += cmsResult.success;
   errorCount += cmsResult.errors;
 
+  // Generate static data files for collections with 'static' strategy
+  await generateStaticDataFiles(staticCollections, distDir);
+
   // Generate SEO files (robots.txt and sitemap.xml)
   if (siteUrl) {
     await generateRobotsTxt(siteUrl, distDir);
@@ -626,6 +910,9 @@ async function buildStaticPages(): Promise<void> {
   console.log(`   - fonts/ (Custom fonts)`);
   console.log(`   - images/ (Image assets)`);
   console.log(`   - icons/ (Favicon and icons)`);
+  if (staticCollections.size > 0) {
+    console.log(`   - data/ (CMS collection data for client filtering)`);
+  }
   if (existsSync(functionsDir)) {
     console.log(`   - functions/ (Cloudflare Pages Functions)`);
   }
@@ -633,11 +920,44 @@ async function buildStaticPages(): Promise<void> {
     console.log(`   - robots.txt, sitemap.xml (SEO)`);
   }
   console.log(`   - No React, no client-router ✓`);
+
+  // Collect component JS validation errors
+  const jsErrors = getJSValidationErrors();
+  for (const { component, error } of jsErrors) {
+    buildErrors.push({
+      file: `components/${component}`,
+      message: error,
+      type: 'minify',
+    });
+  }
+
+  // Write build errors to _errors.json for static server overlay
+  if (buildErrors.length > 0) {
+    // Deduplicate errors by message (same error may occur on multiple pages)
+    const seenMessages = new Set<string>();
+    const uniqueErrors = buildErrors.filter(err => {
+      if (seenMessages.has(err.message)) return false;
+      seenMessages.add(err.message);
+      return true;
+    });
+
+    const errorsData: BuildErrorsData = {
+      errors: uniqueErrors,
+      timestamp: Date.now(),
+    };
+    await writeFile(errorsPath, JSON.stringify(errorsData, null, 2), 'utf-8');
+    const countMsg = uniqueErrors.length === buildErrors.length
+      ? `${uniqueErrors.length} error${uniqueErrors.length === 1 ? '' : 's'}`
+      : `${uniqueErrors.length} unique error${uniqueErrors.length === 1 ? '' : 's'} (affected ${buildErrors.length} files)`;
+    console.log(`\n⚠️  Build errors written to dist/_errors.json (${countMsg})`);
+  }
 }
 
-// Run build
-buildStaticPages().catch((error) => {
-  console.error("❌ Build failed:", error);
-  process.exit(1);
-});
+// Run build only when executed directly (CLI), not when imported as a module
+if (import.meta.main) {
+  await buildStaticPages().catch((error) => {
+    console.error("❌ Build failed:", error);
+    process.exit(1);
+  });
+}
 

package/lib/client/ClientInitializer.ts

@@ -10,6 +10,7 @@ import { StyleInjector } from "./styles/StyleInjector";
 import { ScriptExecutor } from "./scripts/ScriptExecutor";
 import { PrefetchService } from "./services/PrefetchService";
 import { elementRegistry } from "./elementRegistry";
+import { setGlobalTemplateContext } from "../shared/globalTemplateContext";
 import type { PrefetchConfig } from "../shared/types/prefetch";
 
 /**
@@ -56,6 +57,9 @@ function isInEditorIframe(): boolean {
  * Initialize core client services
  */
 export function initializeClient(options: ClientInitOptions = {}): ClientServices {
+  // Set editor mode when running inside editor iframe (disables video autoplay, etc.)
+  setGlobalTemplateContext({ isEditorMode: isInEditorIframe() });
+
   const componentRegistry = globalComponentRegistry;
 
   const prefetchService = new PrefetchService({