meno-core 1.0.5 → 1.0.6

package/build-static.ts

@@ -1,11 +1,13 @@
 /**
  * Static Site Generation Build Script
  * Pre-generates HTML files for all pages at build time
+ * CSP-compliant: Extracts JavaScript to external files
  */
 
 import { existsSync, readdirSync, mkdirSync, rmSync, statSync, copyFileSync } from "fs";
 import { writeFile } from "fs/promises";
 import { join } from "path";
+import { createHash } from "crypto";
 import {
   loadJSONFile,
   loadComponentDirectory,
@@ -14,6 +16,7 @@ import {
   loadI18nConfig
 } from "./lib/server/jsonLoader";
 import { generateSSRHTML } from "./lib/server/ssrRenderer";
+import type { SSRHTMLResult } from "./lib/server/ssr/htmlGenerator";
 import { projectPaths } from "./lib/server/projectContext";
 import { loadProjectConfig } from "./lib/shared/fontLoader";
 import { FileSystemCMSProvider } from "./lib/server/providers/fileSystemCMSProvider";
@@ -22,6 +25,48 @@ 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";
 
+/**
+ * Generate short hash from content for file naming
+ */
+function hashContent(content: string): string {
+  return createHash('sha256').update(content).digest('hex').slice(0, 8);
+}
+
+/**
+ * Track JavaScript files to avoid duplicates
+ * Maps content hash -> script path
+ */
+const jsFileCache = new Map<string, string>();
+
+/**
+ * Get or create script file path for given JS content
+ * Returns the path to reference in HTML
+ */
+async function getScriptPath(jsContent: string, distDir: string): Promise<string> {
+  const hash = hashContent(jsContent);
+
+  // Check if we already wrote this content
+  if (jsFileCache.has(hash)) {
+    return jsFileCache.get(hash)!;
+  }
+
+  // Create scripts directory if needed
+  const scriptsDir = join(distDir, '_scripts');
+  if (!existsSync(scriptsDir)) {
+    mkdirSync(scriptsDir, { recursive: true });
+  }
+
+  // Write script file
+  const scriptPath = `/_scripts/${hash}.js`;
+  const fullPath = join(distDir, '_scripts', `${hash}.js`);
+  await writeFile(fullPath, jsContent, 'utf-8');
+
+  // Cache for reuse
+  jsFileCache.set(hash, scriptPath);
+
+  return scriptPath;
+}
+
 /**
  * Recursively copy directory contents
  */
@@ -235,17 +280,26 @@ async function buildCMSTemplates(
           const baseUrl = "";
           const itemPath = buildCMSItemPath(cmsSchema.urlPattern, item, cmsSchema.slugField, locale, i18nConfig);
 
-          const html = await generateSSRHTML(
+          // Generate HTML with JS returned separately (CSP-compliant)
+          const result = await generateSSRHTML({
             pageData,
             globalComponents,
-            itemPath,
+            pagePath: itemPath,
             baseUrl,
-            true,
+            useBuiltBundle: true,
             locale,
             slugMappings,
-            { cms: item },
-            cmsService
-          );
+            cmsContext: { cms: item },
+            cmsService,
+            returnSeparateJS: true
+          }) as SSRHTMLResult;
+
+          // If there's JavaScript, write to external file and update HTML
+          let finalHtml = result.html;
+          if (result.javascript) {
+            const scriptPath = await getScriptPath(result.javascript, distDir);
+            finalHtml = finalHtml.replace('</body>', `  <script src="${scriptPath}"></script>\n</body>`);
+          }
 
           const outputPath = locale === i18nConfig.defaultLocale
             ? `${distDir}${itemPath}.html`
@@ -256,7 +310,7 @@ async function buildCMSTemplates(
             mkdirSync(outputDir, { recursive: true });
           }
 
-          await writeFile(outputPath, html, 'utf-8');
+          await writeFile(outputPath, finalHtml, 'utf-8');
 
           const displayPath = locale === i18nConfig.defaultLocale ? itemPath : `/${locale}${itemPath}`;
           console.log(`   ✅ ${displayPath}`);
@@ -397,7 +451,26 @@ async function buildStaticPages(): Promise<void> {
         // Build the URL path that will be used for this locale
         const urlPath = getDisplayPath(basePath, locale, i18nConfig.defaultLocale, slugs);
 
-        const html = await generateSSRHTML(pageData, globalComponents, urlPath, baseUrl, true, locale, slugMappings, undefined, cmsService);
+        // Generate HTML with JS returned separately (CSP-compliant)
+        const result = await generateSSRHTML({
+          pageData,
+          globalComponents,
+          pagePath: urlPath,
+          baseUrl,
+          useBuiltBundle: true,
+          locale,
+          slugMappings,
+          cmsService,
+          returnSeparateJS: true
+        }) as SSRHTMLResult;
+
+        // If there's JavaScript, write to external file and update HTML
+        let finalHtml = result.html;
+        if (result.javascript) {
+          const scriptPath = await getScriptPath(result.javascript, distDir);
+          // Insert script reference before </body>
+          finalHtml = finalHtml.replace('</body>', `  <script src="${scriptPath}"></script>\n</body>`);
+        }
 
         // Determine locale-specific output path with translated slug
         const outputPath = getLocalizedOutputPath(basePath, locale, i18nConfig.defaultLocale, distDir, slugs);
@@ -408,7 +481,7 @@ async function buildStaticPages(): Promise<void> {
           mkdirSync(outputDir, { recursive: true });
         }
 
-        await writeFile(outputPath, html, "utf-8");
+        await writeFile(outputPath, finalHtml, "utf-8");
 
         console.log(`✅ Built: ${urlPath} → ${outputPath}`);
         successCount++;

package/lib/client/scripts/ScriptExecutor.test.ts

@@ -445,8 +445,8 @@ describe("ScriptExecutor", () => {
       componentRegistry.register("DynamicComponent", componentDef2);
 
       // Register multiple instances of dynamic component
-      const mockElement1 = originalDocument.createElement("div");
-      const mockElement2 = originalDocument.createElement("div");
+      const mockElement1 = document.createElement("div");
+      const mockElement2 = document.createElement("div");
       elementRegistry.register([0], mockElement1, "DynamicComponent", true, {
         id: "1",
       });
@@ -456,9 +456,9 @@ describe("ScriptExecutor", () => {
 
       scriptExecutor.execute();
 
-      // StaticComponent: 1 script tag (no templates)
-      // DynamicComponent: 2 script tags (with templates, 2 instances)
-      expect(injectedScripts.size).toBe(3);
+      // StaticComponent: 1 execution (no templates)
+      // DynamicComponent: 2 executions (with templates, 2 instances)
+      expect(executedCode.length).toBe(3);
     });
   });
 });

package/lib/server/ssr/htmlGenerator.ts

@@ -1,6 +1,7 @@
 /**
  * HTML document generation for SSR
  * Generates complete HTML documents with SSR content
+ * Supports CSP-compliant external scripts for static builds
  */
 
 import type { ComponentDefinition, JSONPage } from '../../shared/types';
@@ -18,10 +19,80 @@ import { renderPageSSR } from './ssrRenderer';
 import type { CMSContext } from './cmsSSRProcessor';
 
 /**
- * Generate complete HTML document with SSR content
+ * Result of SSR HTML generation with separate JS for CSP compliance
+ */
+export interface SSRHTMLResult {
+  /** Complete HTML document */
+  html: string;
+  /** JavaScript code to be written to external file (for CSP compliance) */
+  javascript: string | null;
+}
+
+/**
+ * Options for SSR HTML generation
+ */
+export interface GenerateSSRHTMLOptions {
+  /** Page data to render */
+  pageData: JSONPage;
+  /** Global component definitions */
+  globalComponents?: Record<string, ComponentDefinition>;
+  /** URL path for the page */
+  pagePath?: string;
+  /** Base URL for assets */
+  baseUrl?: string;
+  /** Use built bundle (production) vs dev server */
+  useBuiltBundle?: boolean;
+  /** Locale for i18n */
+  locale?: string;
+  /** Slug mappings for locale switching */
+  slugMappings?: SlugMap[];
+  /** CMS context for template rendering */
+  cmsContext?: CMSContext;
+  /** CMS service for CMSList queries */
+  cmsService?: CMSService;
+  /**
+   * Path to external scripts file (for CSP compliance).
+   * When provided, JS is NOT inlined but referenced via this path.
+   * Example: "/_scripts/abc123.js"
+   */
+  externalScriptPath?: string;
+}
+
+/**
+ * Generate complete HTML document with SSR content (legacy positional args)
  */
 export async function generateSSRHTML(
   pageData: JSONPage,
+  globalComponents?: Record<string, ComponentDefinition>,
+  pagePath?: string,
+  baseUrl?: string,
+  useBuiltBundle?: boolean,
+  locale?: string,
+  slugMappings?: SlugMap[],
+  cmsContext?: CMSContext,
+  cmsService?: CMSService,
+  externalScriptPath?: string
+): Promise<string>;
+
+/**
+ * Generate complete HTML document with SSR content (options object, returns separate JS for CSP)
+ */
+export async function generateSSRHTML(
+  options: GenerateSSRHTMLOptions & { returnSeparateJS: true }
+): Promise<SSRHTMLResult>;
+
+/**
+ * Generate complete HTML document with SSR content (options object)
+ */
+export async function generateSSRHTML(
+  options: GenerateSSRHTMLOptions & { returnSeparateJS?: false }
+): Promise<string>;
+
+/**
+ * Generate complete HTML document with SSR content
+ */
+export async function generateSSRHTML(
+  pageDataOrOptions: JSONPage | (GenerateSSRHTMLOptions & { returnSeparateJS?: boolean }),
   globalComponents: Record<string, ComponentDefinition> = {},
   pagePath: string = '/',
   baseUrl: string = '',
@@ -29,28 +100,75 @@ export async function generateSSRHTML(
   locale?: string,
   slugMappings?: SlugMap[],
   cmsContext?: CMSContext,
-  cmsService?: CMSService
-): Promise<string> {
-  const rendered = await renderPageSSR(pageData, globalComponents, pagePath, baseUrl, locale, undefined, slugMappings, cmsContext, cmsService);
+  cmsService?: CMSService,
+  externalScriptPath?: string
+): Promise<string | SSRHTMLResult> {
+  // Handle options object vs legacy positional args
+  let options: GenerateSSRHTMLOptions & { returnSeparateJS?: boolean };
+
+  if ('pageData' in pageDataOrOptions) {
+    options = pageDataOrOptions;
+  } else {
+    options = {
+      pageData: pageDataOrOptions,
+      globalComponents,
+      pagePath,
+      baseUrl,
+      useBuiltBundle,
+      locale,
+      slugMappings,
+      cmsContext,
+      cmsService,
+      externalScriptPath,
+    };
+  }
+
+  const {
+    pageData,
+    globalComponents: components = {},
+    pagePath: path = '/',
+    baseUrl: base = '',
+    useBuiltBundle: useBundled = false,
+    locale: loc,
+    slugMappings: slugs,
+    cmsContext: cms,
+    cmsService: cmsServ,
+    externalScriptPath: extScriptPath,
+    returnSeparateJS = false,
+  } = options;
+  const rendered = await renderPageSSR(pageData, components, path, base, loc, undefined, slugs, cms, cmsServ);
 
   // Use built bundle in production, dev server in development
-  const clientScript = useBuiltBundle
+  const clientScript = useBundled
     ? '' // No client router in static build (true static HTML)
     : '<script type="module" src="/client-router.tsx"></script>'; // Dev server (development)
 
-  // Render component JavaScript if any
-  // Escape </script> sequences to prevent premature script tag closure
-  const escapedJavaScript = rendered.javascript
-    ? rendered.javascript.replace(/<\/script>/gi, '<\\/script>')
-    : '';
-  const componentScript = escapedJavaScript
-    ? `\n  <script>\n${escapedJavaScript}\n  </script>`
-    : '';
+  // Collect all JavaScript (component JS + form handler if needed)
+  const needsForm = needsFormHandler(rendered.html);
+  const allJavaScript = [
+    rendered.javascript || '',
+    needsForm ? formHandlerScript : ''
+  ].filter(Boolean).join('\n\n');
 
-  // Add form handler script if page contains fetch-handled forms
-  const formScript = needsFormHandler(rendered.html)
-    ? `\n  <script>\n${formHandlerScript}\n  </script>`
-    : '';
+  // Determine script output based on mode
+  let componentScript = '';
+  let externalJavaScript: string | null = null;
+
+  if (allJavaScript) {
+    if (extScriptPath) {
+      // CSP-compliant: reference external script file
+      componentScript = `\n  <script src="${extScriptPath}"></script>`;
+      externalJavaScript = allJavaScript;
+    } else if (returnSeparateJS) {
+      // Return JS separately (for build-static to write to file)
+      externalJavaScript = allJavaScript;
+    } else {
+      // Legacy inline mode (dev server)
+      // Escape </script> sequences to prevent premature script tag closure
+      const escapedJavaScript = allJavaScript.replace(/<\/script>/gi, '<\\/script>');
+      componentScript = `\n  <script>\n${escapedJavaScript}\n  </script>`;
+    }
+  }
 
   // Generate font CSS from project config
   const fontCSS = generateFontCSS();
@@ -83,9 +201,15 @@ export async function generateSSRHTML(
   const prefetchConfig = await loadPrefetchConfig();
   // Only include non-default values to minimize payload
   const menoConfig = prefetchConfig.enabled ? { prefetch: prefetchConfig } : {};
-  const configScript = Object.keys(menoConfig).length > 0
+  // Config script - inline for dev, include in external JS for static build
+  const hasConfig = Object.keys(menoConfig).length > 0;
+  const configInlineScript = hasConfig && !extScriptPath && !returnSeparateJS
     ? `<script>window.__MENO_CONFIG__=${JSON.stringify(menoConfig)}</script>\n  `
     : '';
+  // Add config to external JS if using external scripts
+  if (hasConfig && externalJavaScript !== null) {
+    externalJavaScript = `window.__MENO_CONFIG__=${JSON.stringify(menoConfig)};\n\n` + externalJavaScript;
+  }
 
   // Generate favicon and apple touch icon link tags
   const faviconTag = iconsConfig.favicon
@@ -96,13 +220,13 @@ export async function generateSSRHTML(
     : '';
   const iconTags = [faviconTag, appleTouchIconTag].filter(Boolean).join('\n  ');
 
-  return `<!DOCTYPE html>
+  const htmlDocument = `<!DOCTYPE html>
 <html lang="${rendered.locale}" theme="${themeConfig.default}">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   ${iconTags ? iconTags + '\n  ' : ''}${rendered.meta}
-  ${configScript}<style>
+  ${configInlineScript}<style>
     ${fontCSS ? fontCSS + '\n    ' : ''}${themeColorVariablesCSS ? themeColorVariablesCSS + '\n    ' : ''}* {
       margin: 0;
       padding: 0;
@@ -141,7 +265,17 @@ export async function generateSSRHTML(
   <div id="root">
     ${rendered.html}
   </div>
-  ${clientScript}${componentScript}${formScript}
+  ${clientScript}${componentScript}
 </body>
 </html>`;
+
+  // Return based on mode
+  if (returnSeparateJS) {
+    return {
+      html: htmlDocument,
+      javascript: externalJavaScript
+    };
+  }
+
+  return htmlDocument;
 }

package/lib/server/ssr/index.ts

@@ -17,6 +17,7 @@
 export { renderPageSSR, extractPageMeta, generateMetaTags } from './ssrRenderer';
 export type { CMSContext, PageMeta } from './ssrRenderer';
 export { generateSSRHTML } from './htmlGenerator';
+export type { SSRHTMLResult, GenerateSSRHTMLOptions } from './htmlGenerator';
 
 // Attribute utilities
 export { escapeHtml, buildAttributes, styleToString } from './attributeBuilder';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meno-core",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "type": "module",
   "bin": {
     "meno": "./bin/cli.ts"