meno-core 1.0.53 → 1.1.0

package/lib/server/ssr/htmlGenerator.ts

@@ -13,13 +13,22 @@ import { generateFontCSS, generateFontPreloadTags, loadProjectConfig } from '../
 import { colorService } from '../services/ColorService';
 import { generateThemeColorVariablesCSS, generateVariablesCSS } from '../cssGenerator';
 import { variableService } from '../services/VariableService';
-import { generateUtilityCSS, extractUtilityClassesFromHTML, generateAllInteractiveCSS } from '../../shared/cssGeneration';
+import {
+  generateUtilityCSS,
+  extractUtilityClassesFromHTML,
+  generateAllInteractiveCSS,
+} from '../../shared/cssGeneration';
 import { rewriteViewportUnits } from '../../shared/viewportUnits';
 import { printMissingStyleWarnings } from '../validateStyleCoverage';
 import { formHandlerScript, needsFormHandler } from '../../client/scripts/formHandler';
 import { menoFilterScript, needsMenoFilter } from '../../client/meno-filter/script.generated';
 import { generateAllInlineDataScripts, prepareClientData, type ClientDataCollection } from './clientDataInjector';
-import { mergeLibraries, generateLibraryTags, collectComponentLibraries, filterLibrariesByContext } from '../../shared/libraryLoader';
+import {
+  mergeLibraries,
+  generateLibraryTags,
+  collectComponentLibraries,
+  filterLibrariesByContext,
+} from '../../shared/libraryLoader';
 import { escapeHtml } from './attributeBuilder';
 import { renderPageSSR, type PreloadImage } from './ssrRenderer';
 import type { CMSContext } from './cmsSSRProcessor';
@@ -34,7 +43,10 @@ function generateImagePreloadTags(preloadImages: PreloadImage[]): string {
   if (preloadImages.length === 0) return '';
 
   return preloadImages
-    .map(img => `<link rel="preload" as="image" type="${img.type}" imagesrcset="${escapeHtml(img.srcset)}" imagesizes="${escapeHtml(img.sizes)}" fetchpriority="high">`)
+    .map(
+      (img) =>
+        `<link rel="preload" as="image" type="${img.type}" imagesrcset="${escapeHtml(img.srcset)}" imagesizes="${escapeHtml(img.sizes)}" fetchpriority="high">`,
+    )
     .join('\n  ');
 }
 
@@ -45,29 +57,31 @@ function generateImagePreloadTags(preloadImages: PreloadImage[]): string {
 function minifyCSS(code: string): string {
   if (!code.trim()) return code;
 
-  return code
-    // Remove CSS comments
-    .replace(/\/\*[\s\S]*?\*\//g, '')
-    // Remove whitespace around block / declaration delimiters and selector
-    // combinators. We deliberately exclude `+` and `-` from this set: they
-    // are selector combinators (e.g. `a + b`, but `~` is also rare; siblings)
-    // AND arithmetic operators inside `calc()` / `clamp()` / `min()` / `max()`,
-    // where they REQUIRE surrounding spaces. Stripping there produces invalid
-    // CSS like `padding-top: clamp(.5*16px,((.5 - .5)/(90 - 20))*16px+(...))`,
-    // which the browser silently drops, collapsing paddings/margins to 0.
-    // The cost of leaving spaces around `+` selectors is a few extra bytes;
-    // the cost of stripping them is broken layout.
-    .replace(/\s*([{};:,>~])\s*/g, '$1')
-    // Collapse multiple spaces/newlines into single space
-    .replace(/\s+/g, ' ')
-    // Remove space after opening brace
-    .replace(/\{\s+/g, '{')
-    // Remove space before closing brace
-    .replace(/\s+\}/g, '}')
-    // Remove trailing semicolons before closing braces
-    .replace(/;}/g, '}')
-    // Remove leading/trailing whitespace
-    .trim();
+  return (
+    code
+      // Remove CSS comments
+      .replace(/\/\*[\s\S]*?\*\//g, '')
+      // Remove whitespace around block / declaration delimiters and selector
+      // combinators. We deliberately exclude `+` and `-` from this set: they
+      // are selector combinators (e.g. `a + b`, but `~` is also rare; siblings)
+      // AND arithmetic operators inside `calc()` / `clamp()` / `min()` / `max()`,
+      // where they REQUIRE surrounding spaces. Stripping there produces invalid
+      // CSS like `padding-top: clamp(.5*16px,((.5 - .5)/(90 - 20))*16px+(...))`,
+      // which the browser silently drops, collapsing paddings/margins to 0.
+      // The cost of leaving spaces around `+` selectors is a few extra bytes;
+      // the cost of stripping them is broken layout.
+      .replace(/\s*([{};:,>~])\s*/g, '$1')
+      // Collapse multiple spaces/newlines into single space
+      .replace(/\s+/g, ' ')
+      // Remove space after opening brace
+      .replace(/\{\s+/g, '{')
+      // Remove space before closing brace
+      .replace(/\s+\}/g, '}')
+      // Remove trailing semicolons before closing braces
+      .replace(/;}/g, '}')
+      // Remove leading/trailing whitespace
+      .trim()
+  );
 }
 
 /**
@@ -172,22 +186,20 @@ export async function generateSSRHTML(
   slugMappings?: SlugMap[],
   cmsContext?: CMSContext,
   cmsService?: CMSService,
-  externalScriptPath?: string
+  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 }
+  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>;
+export async function generateSSRHTML(options: GenerateSSRHTMLOptions & { returnSeparateJS?: false }): Promise<string>;
 
 /**
  * Generate complete HTML document with SSR content
@@ -202,7 +214,7 @@ export async function generateSSRHTML(
   slugMappings?: SlugMap[],
   cmsContext?: CMSContext,
   cmsService?: CMSService,
-  externalScriptPath?: string
+  externalScriptPath?: string,
 ): Promise<string | SSRHTMLResult> {
   // Handle options object vs legacy positional args
   let options: GenerateSSRHTMLOptions & { returnSeparateJS?: boolean };
@@ -255,16 +267,26 @@ export async function generateSSRHTML(
   // on injectEditorAttrs — set ONLY when the request comes from the editor preview iframe
   // via the studio's /__static__/ proxy (which sends an `x-meno-editor` header).
   // Direct hits to the SSR preview server (e.g., http://localhost:8082/) get clean output.
-  const rendered = await renderPageSSR(pageData, components, path, base, loc, undefined, slugs, cms, cmsServ, isProductionBuild, injectEditorAttrs);
+  const rendered = await renderPageSSR(
+    pageData,
+    components,
+    path,
+    base,
+    loc,
+    undefined,
+    slugs,
+    cms,
+    cmsServ,
+    isProductionBuild,
+    injectEditorAttrs,
+  );
 
   // Auto-inject data for nested collections (detected during SSR)
   // This enables client-side hydration for nested cms-list placeholders
   let finalClientDataCollections = clientDataCollections;
   if (rendered.neededCollections.size > 0 && cmsServ) {
     // Create a mutable copy if we need to add collections
-    finalClientDataCollections = clientDataCollections
-      ? new Map(clientDataCollections)
-      : new Map();
+    finalClientDataCollections = clientDataCollections ? new Map(clientDataCollections) : new Map();
 
     for (const collectionId of rendered.neededCollections) {
       // Skip if already provided
@@ -273,9 +295,7 @@ export async function generateSSRHTML(
       // Get schema to check if clientData is enabled
       const schema = cmsServ.getSchema(collectionId);
       if (!schema?.clientData?.enabled) {
-        console.warn(
-          `[SSR] Nested collection "${collectionId}" needs clientData.enabled for client-side hydration`
-        );
+        console.warn(`[SSR] Nested collection "${collectionId}" needs clientData.enabled for client-side hydration`);
         continue;
       }
 
@@ -322,31 +342,33 @@ export async function generateSSRHTML(
   const seenJS = new Set<string>();
   const seenCSS = new Set<string>();
   const mergedLibraries = {
-    js: (mergedRaw.js || []).filter(lib => {
+    js: (mergedRaw.js || []).filter((lib) => {
       if (seenJS.has(lib.url)) return false;
       seenJS.add(lib.url);
       return true;
     }),
-    css: (mergedRaw.css || []).filter(lib => {
+    css: (mergedRaw.css || []).filter((lib) => {
       if (seenCSS.has(lib.url)) return false;
       seenCSS.add(lib.url);
       return true;
     }),
   };
-  const libraryContext = isEditor ? 'editor' : (useBundled && !injectLiveReload ? 'build' : 'preview');
+  const libraryContext = isEditor ? 'editor' : useBundled && !injectLiveReload ? 'build' : 'preview';
   const filteredLibraries = filterLibrariesByContext(mergedLibraries, libraryContext);
 
   // Cache-bust local library URLs in dev/preview to avoid stale browser cache
   const devMode = !useBundled || injectLiveReload;
   const bustCache = devMode ? `?v=${Date.now()}` : '';
-  const finalLibraries = bustCache ? {
-    js: (filteredLibraries.js || []).map(lib =>
-      lib.url.startsWith('/') ? { ...lib, url: lib.url + bustCache } : lib
-    ),
-    css: (filteredLibraries.css || []).map(lib =>
-      lib.url.startsWith('/') ? { ...lib, url: lib.url + bustCache } : lib
-    ),
-  } : filteredLibraries;
+  const finalLibraries = bustCache
+    ? {
+        js: (filteredLibraries.js || []).map((lib) =>
+          lib.url.startsWith('/') ? { ...lib, url: lib.url + bustCache } : lib,
+        ),
+        css: (filteredLibraries.css || []).map((lib) =>
+          lib.url.startsWith('/') ? { ...lib, url: lib.url + bustCache } : lib,
+        ),
+      }
+    : filteredLibraries;
 
   // Read local CSS files for inline embedding
   const inlineContents = new Map<string, string>();
@@ -355,7 +377,7 @@ export async function generateSSRHTML(
     const shouldInline = css.inline !== false && css.url.startsWith('/');
     if (shouldInline) {
       try {
-        const cleanUrl = css.url.split('?')[0]; // Strip cache-bust query param
+        const cleanUrl = css.url.split('?')[0] ?? css.url; // Strip cache-bust query param
         const filePath = resolveProjectPath(cleanUrl.slice(1));
         const content = await readTextFile(filePath);
         inlineContents.set(css.url, content);
@@ -375,12 +397,15 @@ export async function generateSSRHTML(
   // Collect all JavaScript (component JS + form handler + meno filter if needed)
   const needsForm = needsFormHandler(rendered.html);
   // Include MenoFilter if: inline clientData exists OR page has cms-list nodes (for static strategy)
-  const needsFilter = (finalClientDataCollections && finalClientDataCollections.size > 0) || needsMenoFilter(rendered.html);
+  const needsFilter =
+    (finalClientDataCollections && finalClientDataCollections.size > 0) || needsMenoFilter(rendered.html);
   const allJavaScript = [
     rendered.javascript || '',
     needsForm ? formHandlerScript : '',
-    needsFilter ? menoFilterScript : ''
-  ].filter(Boolean).join('\n\n');
+    needsFilter ? menoFilterScript : '',
+  ]
+    .filter(Boolean)
+    .join('\n\n');
 
   // Determine script output based on mode
   let componentScript = '';
@@ -426,12 +451,23 @@ export async function generateSSRHTML(
   const variablesConfig = await variableService.loadConfig();
   const variablesCSS = generateVariablesCSS(variablesConfig, breakpointConfig, responsiveScalesConfig);
   const remConversionConfig = configService.getRemConversion();
-  const utilityCSS = generateUtilityCSS(usedUtilityClasses, breakpointConfig, responsiveScalesConfig, remConversionConfig);
+  const utilityCSS = generateUtilityCSS(
+    usedUtilityClasses,
+    breakpointConfig,
+    responsiveScalesConfig,
+    remConversionConfig,
+  );
 
   // Generate interactive styles CSS from map collected during render
-  const interactiveCSS = rendered.interactiveStylesMap.size > 0
-    ? generateAllInteractiveCSS(rendered.interactiveStylesMap, breakpointConfig, remConversionConfig, responsiveScalesConfig)
-    : '';
+  const interactiveCSS =
+    rendered.interactiveStylesMap.size > 0
+      ? generateAllInteractiveCSS(
+          rendered.interactiveStylesMap,
+          breakpointConfig,
+          remConversionConfig,
+          responsiveScalesConfig,
+        )
+      : '';
 
   // Print warnings for any unmapped styles found during build
   printMissingStyleWarnings(false);
@@ -469,18 +505,20 @@ picture {
   display: inline-block;
   vertical-align: top;
   line-height: 0;
+}
+/* line-height:0 above kills the inline-block descender gap (inline SVG/icon
+   embeds), but line-height inherits — so block rich-text inside an <Embed>
+   (CMS content: <p>/<li>/…) would collapse its text lines onto each other.
+   Restore a normal line-height on the embed's children. Astro play renders
+   rich-text bare (no .oem), which is why it looked correct only there. */
+.oem > * {
+  line-height: normal;
 }`;
 
   // Combine all CSS
-  const combinedCSS = [
-    fontCSS,
-    themeColorVariablesCSS,
-    variablesCSS,
-    baseCSS,
-    componentCSS,
-    utilityCSS,
-    interactiveCSS
-  ].filter(Boolean).join('\n');
+  const combinedCSS = [fontCSS, themeColorVariablesCSS, variablesCSS, baseCSS, componentCSS, utilityCSS, interactiveCSS]
+    .filter(Boolean)
+    .join('\n');
 
   // Rewrite vh/vw to calc(var(--design-vh, 1vh) * N) so the studio's design
   // canvas can pin viewport units to a stable height (avoids the
@@ -497,24 +535,27 @@ picture {
   const menoConfig = prefetchConfig.enabled ? { prefetch: prefetchConfig } : {};
   // 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${nonceAttr}>window.__MENO_CONFIG__=${JSON.stringify(menoConfig)}</script>\n  `
-    : '';
+  const configInlineScript =
+    hasConfig && !extScriptPath && !returnSeparateJS
+      ? `<script${nonceAttr}>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;
+    externalJavaScript = `window.__MENO_CONFIG__=${JSON.stringify(menoConfig)};\n\n${externalJavaScript}`;
   }
 
   // CMS context script - needed when a client-side Router is present (dev mode or studio preview)
   // Production builds are pure HTML with no client routing, so excluded
-  const cmsInlineScript = cmsTemplatePath && cms && (!useBundled || injectLiveReload)
-    ? `<script${nonceAttr}>window.__MENO_CMS__=${JSON.stringify({ item: cms.cms, templatePath: cmsTemplatePath })}</script>\n  `
-    : '';
+  const cmsInlineScript =
+    cmsTemplatePath && cms && (!useBundled || injectLiveReload)
+      ? `<script${nonceAttr}>window.__MENO_CMS__=${JSON.stringify({ item: cms.cms, templatePath: cmsTemplatePath })}</script>\n  `
+      : '';
 
   // Client data scripts - inline JSON for MenoFilter (production builds only)
-  const clientDataScripts = finalClientDataCollections && finalClientDataCollections.size > 0
-    ? generateAllInlineDataScripts(finalClientDataCollections) + '\n  '
-    : '';
+  const clientDataScripts =
+    finalClientDataCollections && finalClientDataCollections.size > 0
+      ? `${generateAllInlineDataScripts(finalClientDataCollections)}\n  `
+      : '';
 
   // Generate favicon and apple touch icon link tags.
   // When a dark-mode favicon is configured alongside the default, scope the
@@ -534,17 +575,13 @@ picture {
   const iconTags = [faviconTag, faviconDarkTag, appleTouchIconTag].filter(Boolean).join('\n  ');
 
   // Script preload tag - eliminates critical request chain by discovering script early
-  const scriptPreloadTag = extScriptPath
-    ? `<link rel="preload" href="${extScriptPath}" as="script">`
-    : '';
+  const scriptPreloadTag = extScriptPath ? `<link rel="preload" href="${extScriptPath}" as="script">` : '';
 
   // Image preload tags for high-priority images (LCP optimization)
   const imagePreloadTags = generateImagePreloadTags(rendered.preloadImages);
 
   // Live reload script for on-demand SSR preview mode (in-place DOM update, no white flash)
-  const wsUrl = serverPort
-    ? `'ws://localhost:${serverPort}/hmr'`
-    : `location.origin.replace('http','ws')+'/hmr'`;
+  const wsUrl = serverPort ? `'ws://localhost:${serverPort}/hmr'` : `location.origin.replace('http','ws')+'/hmr'`;
   // True hot reload for the studio's static preview iframe.
   //
   // The central question on every edit is: did the EDITOR change page
@@ -617,23 +654,21 @@ picture {
     : '';
 
   // In production, output minified CSS on single line; in dev, preserve formatting
-  const styleContent = useBundled
-    ? finalCSS
-    : `\n    ${combinedCSS.split('\n').join('\n    ')}\n  `;
+  const styleContent = useBundled ? finalCSS : `\n    ${combinedCSS.split('\n').join('\n    ')}\n  `;
 
   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">
-  ${cspNonce ? `<meta name="csp-nonce" content="${cspNonce}">\n  ` : ''}${iconTags ? iconTags + '\n  ' : ''}${scriptPreloadTag ? scriptPreloadTag + '\n  ' : ''}${imagePreloadTags ? imagePreloadTags + '\n  ' : ''}${fontPreloadTags ? fontPreloadTags + '\n  ' : ''}${libraryTags.headCSS ? libraryTags.headCSS + '\n  ' : ''}${libraryTags.headJS ? libraryTags.headJS + '\n  ' : ''}${rendered.meta}
-  ${configInlineScript}${cmsInlineScript}${clientDataScripts}<style id="meno-styles"${nonceAttr}>${styleContent}</style>${mergedCustomCode.head ? '\n  ' + mergedCustomCode.head : ''}
+  ${cspNonce ? `<meta name="csp-nonce" content="${cspNonce}">\n  ` : ''}${iconTags ? `${iconTags}\n  ` : ''}${scriptPreloadTag ? `${scriptPreloadTag}\n  ` : ''}${imagePreloadTags ? `${imagePreloadTags}\n  ` : ''}${fontPreloadTags ? `${fontPreloadTags}\n  ` : ''}${libraryTags.headCSS ? `${libraryTags.headCSS}\n  ` : ''}${libraryTags.headJS ? `${libraryTags.headJS}\n  ` : ''}${rendered.meta}
+  ${configInlineScript}${cmsInlineScript}${clientDataScripts}<style id="meno-styles"${nonceAttr}>${styleContent}</style>${mergedCustomCode.head ? `\n  ${mergedCustomCode.head}` : ''}
 </head>
-<body>${mergedCustomCode.bodyStart ? '\n  ' + mergedCustomCode.bodyStart : ''}
+<body>${mergedCustomCode.bodyStart ? `\n  ${mergedCustomCode.bodyStart}` : ''}
   <div id="root">
     ${rendered.html}
   </div>
-  ${clientScript}${componentScript}${libraryTags.bodyEndJS ? '\n  ' + libraryTags.bodyEndJS : ''}${liveReloadScript ? '\n  ' + liveReloadScript : ''}${scrollHandlerScript ? '\n  ' + scrollHandlerScript : ''}${mergedCustomCode.bodyEnd ? '\n  ' + mergedCustomCode.bodyEnd : ''}
+  ${clientScript}${componentScript}${libraryTags.bodyEndJS ? `\n  ${libraryTags.bodyEndJS}` : ''}${liveReloadScript ? `\n  ${liveReloadScript}` : ''}${scrollHandlerScript ? `\n  ${scrollHandlerScript}` : ''}${mergedCustomCode.bodyEnd ? `\n  ${mergedCustomCode.bodyEnd}` : ''}
 </body>
 </html>`;
 
@@ -641,7 +676,7 @@ picture {
   if (returnSeparateJS) {
     return {
       html: htmlDocument,
-      javascript: externalJavaScript
+      javascript: externalJavaScript,
     };
   }
 

package/lib/server/ssr/imageMetadata.test.ts

@@ -20,7 +20,9 @@ describe('extractImgSrc', () => {
 });
 
 describe('rewriteRichTextImages', () => {
-  function buildMap(entries: Record<string, { srcset: string; avifSrcset?: string; width?: number; height?: number }>): ImageMetadataMap {
+  function buildMap(
+    entries: Record<string, { srcset: string; avifSrcset?: string; width?: number; height?: number }>,
+  ): ImageMetadataMap {
     const map = new Map() as ImageMetadataMap;
     for (const [key, value] of Object.entries(entries)) {
       map.set(key, value);

package/lib/server/ssr/imageMetadata.ts

@@ -4,7 +4,7 @@
  */
 
 import { projectPaths } from '../projectContext';
-import * as path from 'path';
+import * as path from 'node:path';
 import { escapeHtml } from './attributeBuilder';
 import { readTextFile, fileExists } from '../runtime';
 
@@ -58,14 +58,17 @@ export async function buildImageMetadataMap(): Promise<ImageMetadataMap> {
     const manifestContent = await readTextFile(manifestPath);
     const manifest = JSON.parse(manifestContent) as {
       version: number;
-      images: Record<string, {
-        filename: string;
-        width: number;
-        height: number;
-        blurHash: string;
-        formats: { avif: boolean; webp: boolean };
-        variants: { width: number; webpFilename: string; avifFilename: string }[];
-      }>;
+      images: Record<
+        string,
+        {
+          filename: string;
+          width: number;
+          height: number;
+          blurHash: string;
+          formats: { avif: boolean; webp: boolean };
+          variants: { width: number; webpFilename: string; avifFilename: string }[];
+        }
+      >;
     };
 
     // Build metadata for each image
@@ -78,13 +81,9 @@ export async function buildImageMetadataMap(): Promise<ImageMetadataMap> {
 
       // Add variants
       for (const variant of entry.variants) {
-        webpSrcsetParts.push(
-          `/images/${encodeURIComponent(variant.webpFilename)} ${variant.width}w`
-        );
+        webpSrcsetParts.push(`/images/${encodeURIComponent(variant.webpFilename)} ${variant.width}w`);
         if (variant.avifFilename) {
-          avifSrcsetParts.push(
-            `/images/${encodeURIComponent(variant.avifFilename)} ${variant.width}w`
-          );
+          avifSrcsetParts.push(`/images/${encodeURIComponent(variant.avifFilename)} ${variant.width}w`);
         }
       }
 
@@ -133,7 +132,7 @@ export async function buildImageMetadataMap(): Promise<ImageMetadataMap> {
  */
 export function extractImgSrc(imgTag: string): string | null {
   const match = imgTag.match(/src=["']([^"']+)["']/i);
-  return match ? match[1] : null;
+  return match ? (match[1] ?? null) : null;
 }
 
 /**
@@ -141,7 +140,11 @@ export function extractImgSrc(imgTag: string): string | null {
  * Only rewrites images that exist in the metadata map (project images with generated variants).
  * External/unrecognized images are left unchanged.
  */
-export function rewriteRichTextImages(html: string, metadataMap: ImageMetadataMap, imageFormat?: 'webp' | 'avif'): string {
+export function rewriteRichTextImages(
+  html: string,
+  metadataMap: ImageMetadataMap,
+  imageFormat?: 'webp' | 'avif',
+): string {
   return html.replace(/<img\b([^>]*)\/?>/gi, (fullMatch, innerAttrs: string) => {
     const src = extractImgSrc(fullMatch);
     if (!src) return fullMatch;
@@ -166,17 +169,20 @@ export function rewriteRichTextImages(html: string, metadataMap: ImageMetadataMa
 
     // Render as <picture> with AVIF + WebP sources when AVIF is available and format allows
     if (metadata.avifSrcset && imageFormat !== 'webp') {
-      return `<picture>` +
+      return (
+        `<picture>` +
         `<source type="image/avif" srcset="${escapeHtml(metadata.avifSrcset)}" sizes="${escapeHtml(sizes)}" />` +
         `<source type="image/webp" srcset="${escapeHtml(metadata.srcset)}" sizes="${escapeHtml(sizes)}" />` +
         enhancedTag +
-        `</picture>`;
+        `</picture>`
+      );
     }
 
     // WebP only: add srcset and sizes to existing <img>
     if (metadata.srcset) {
-      enhancedTag = enhancedTag.replace(/<img\b/i,
-        `<img srcset="${escapeHtml(metadata.srcset)}" sizes="${escapeHtml(sizes)}"`
+      enhancedTag = enhancedTag.replace(
+        /<img\b/i,
+        `<img srcset="${escapeHtml(metadata.srcset)}" sizes="${escapeHtml(sizes)}"`,
       );
     }
 

package/lib/server/ssr/jsCollector.test.ts

@@ -67,9 +67,9 @@ describe('jsCollector', () => {
 
       const errors = getJSValidationErrors();
       expect(errors).toHaveLength(1);
-      expect(errors[0].component).toBe('myBadComp');
-      expect(typeof errors[0].error).toBe('string');
-      expect(errors[0].error.length).toBeGreaterThan(0);
+      expect(errors[0]!.component).toBe('myBadComp');
+      expect(typeof errors[0]!.error).toBe('string');
+      expect(errors[0]!.error.length).toBeGreaterThan(0);
     });
   });
 
@@ -154,10 +154,7 @@ describe('jsCollector', () => {
       const globalComp = makeComponent({ javascript: 'console.log("global");' });
       const pageComp = makeComponent({ javascript: 'console.log("page");' });
 
-      const result = await collectComponentJavaScript(
-        { header: globalComp },
-        { footer: pageComp }
-      );
+      const result = await collectComponentJavaScript({ header: globalComp }, { footer: pageComp });
 
       expect(result).toContain('// Component: header');
       expect(result).toContain('console.log("global");');
@@ -169,10 +166,7 @@ describe('jsCollector', () => {
       const globalComp = makeComponent({ javascript: 'console.log("global version");' });
       const pageComp = makeComponent({ javascript: 'console.log("page version");' });
 
-      const result = await collectComponentJavaScript(
-        { shared: globalComp },
-        { shared: pageComp }
-      );
+      const result = await collectComponentJavaScript({ shared: globalComp }, { shared: pageComp });
 
       expect(result).toContain('console.log("global version");');
       expect(result).not.toContain('console.log("page version");');
@@ -187,11 +181,7 @@ describe('jsCollector', () => {
       const badComp = makeComponent({ javascript: '%%%INVALID%%%' });
       const goodComp = makeComponent({ javascript: 'console.log("valid");' });
 
-      const result = await collectComponentJavaScript(
-        { bad: badComp, good: goodComp },
-        {},
-        onError
-      );
+      const result = await collectComponentJavaScript({ bad: badComp, good: goodComp }, {}, onError);
 
       // The bad component should be skipped
       expect(result).not.toContain('%%%INVALID%%%');
@@ -200,8 +190,8 @@ describe('jsCollector', () => {
 
       // onError should have been called for the bad component
       expect(errors).toHaveLength(1);
-      expect(errors[0].name).toBe('bad');
-      expect(errors[0].error.length).toBeGreaterThan(0);
+      expect(errors[0]!.name).toBe('bad');
+      expect(errors[0]!.error.length).toBeGreaterThan(0);
     });
 
     test('should use validation cache on repeated calls for same component', async () => {

package/lib/server/ssr/jsCollector.ts

@@ -34,13 +34,8 @@ const DEFINE_VARS_RUNTIME = `(function() {
 /**
  * Generate destructure statement for defineVars
  */
-function generateDestructure(
-  defineVars: true | string[],
-  interfaceDef?: Record<string, unknown>
-): string {
-  const vars = defineVars === true
-    ? Object.keys(interfaceDef || {})
-    : defineVars;
+function generateDestructure(defineVars: true | string[], interfaceDef?: Record<string, unknown>): string {
+  const vars = defineVars === true ? Object.keys(interfaceDef || {}) : defineVars;
   if (vars.length === 0) return '';
   return `var {${vars.join(', ')}} = props;`;
 }
@@ -89,7 +84,7 @@ export function getJSValidationErrors(): Array<{ component: string; error: strin
 export async function collectComponentJavaScript(
   globalComponents: Record<string, ComponentDefinition> = {},
   pageComponents: Record<string, ComponentDefinition> = {},
-  onError?: JSErrorCallback
+  onError?: JSErrorCallback,
 ): Promise<string> {
   const jsCodeBlocks: string[] = [];
   let hasDefineVars = false;