meno-core 1.0.11 → 1.0.13

package/build-static.ts

@@ -32,6 +32,34 @@ function hashContent(content: string): string {
   return createHash('sha256').update(content).digest('hex').slice(0, 8);
 }
 
+/**
+ * Minify JavaScript code using Bun's built-in bundler
+ */
+async function minifyJS(code: string): Promise<string> {
+  const tempFile = join('/tmp', `meno-minify-${Date.now()}.js`);
+  try {
+    await writeFile(tempFile, code, 'utf-8');
+
+    const result = await Bun.build({
+      entrypoints: [tempFile],
+      minify: true,
+    });
+
+    if (result.success && result.outputs.length > 0) {
+      return await result.outputs[0].text();
+    }
+    // Fallback to original if minification fails
+    return code;
+  } finally {
+    // Clean up temp file
+    try {
+      rmSync(tempFile, { force: true });
+    } catch {
+      // Ignore cleanup errors
+    }
+  }
+}
+
 /**
  * Track JavaScript files to avoid duplicates
  * Maps content hash -> script path
@@ -43,7 +71,9 @@ const jsFileCache = new Map<string, string>();
  * Returns the path to reference in HTML
  */
 async function getScriptPath(jsContent: string, distDir: string): Promise<string> {
-  const hash = hashContent(jsContent);
+  // Minify JavaScript for production
+  const minified = await minifyJS(jsContent);
+  const hash = hashContent(minified);
 
   // Check if we already wrote this content
   if (jsFileCache.has(hash)) {
@@ -56,10 +86,10 @@ async function getScriptPath(jsContent: string, distDir: string): Promise<string
     mkdirSync(scriptsDir, { recursive: true });
   }
 
-  // Write script file
+  // Write minified script file
   const scriptPath = `/_scripts/${hash}.js`;
   const fullPath = join(distDir, '_scripts', `${hash}.js`);
-  await writeFile(fullPath, jsContent, 'utf-8');
+  await writeFile(fullPath, minified, 'utf-8');
 
   // Cache for reuse
   jsFileCache.set(hash, scriptPath);

package/lib/client/core/ComponentBuilder.ts

@@ -387,7 +387,7 @@ export class ComponentBuilder {
    * Filter internal props from node props
    */
   private filterInternalProps(nodeProps: Record<string, unknown>, tag: string | undefined): Record<string, unknown> {
-    const imageOnlyProps = ['src', 'alt', 'loading', 'width', 'height', 'sizes', 'srcset'];
+    const imageOnlyProps = ['src', 'alt', 'loading', 'width', 'height', 'sizes', 'srcset', 'fetchpriority', 'priority'];
     const internalProps = ['type', 'tag', 'component', 'props', 'children', 'html', 'style', ...imageOnlyProps];
     const props: Record<string, unknown> = {};
 

package/lib/server/ssr/attributeBuilder.ts

@@ -21,7 +21,7 @@ export function escapeHtml(unsafe: string): string {
 export function buildAttributes(props: Record<string, unknown>, exclude: string[] = []): string {
   const attrs: string[] = [];
   // Internal props that should never be rendered as HTML attributes
-  const internalProps = ['tag', 'component', 'props', 'children', 'src', 'alt', 'loading', 'width', 'height', 'sizes', 'srcset'];
+  const internalProps = ['tag', 'component', 'props', 'children', 'src', 'alt', 'loading', 'width', 'height', 'sizes', 'srcset', 'fetchpriority', 'priority'];
   const defaultExclude = [...internalProps, ...exclude];
 
   // Regex to detect unresolved template strings like {{link.target}}

package/lib/server/ssr/htmlGenerator.ts

@@ -164,8 +164,8 @@ export async function generateSSRHTML(
 
   if (allJavaScript) {
     if (extScriptPath) {
-      // CSP-compliant: reference external script file
-      componentScript = `\n  <script src="${extScriptPath}"></script>`;
+      // CSP-compliant: reference external script file (defer to avoid render-blocking)
+      componentScript = `\n  <script src="${extScriptPath}" defer></script>`;
       externalJavaScript = allJavaScript;
     } else if (returnSeparateJS) {
       // Return JS separately (for build-static to write to file)
@@ -235,12 +235,17 @@ export async function generateSSRHTML(
     : '';
   const iconTags = [faviconTag, 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 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  ' : ''}${fontPreloadTags ? fontPreloadTags + '\n  ' : ''}${rendered.meta}
+  ${iconTags ? iconTags + '\n  ' : ''}${scriptPreloadTag ? scriptPreloadTag + '\n  ' : ''}${fontPreloadTags ? fontPreloadTags + '\n  ' : ''}${rendered.meta}
   ${configInlineScript}${cmsInlineScript}<style>
     ${fontCSS ? fontCSS + '\n    ' : ''}${themeColorVariablesCSS ? themeColorVariablesCSS + '\n    ' : ''}* {
       margin: 0;

package/lib/server/ssr/imageMetadata.ts

@@ -28,9 +28,9 @@ export interface ImageMetadata {
 export type ImageMetadataMap = Map<string, ImageMetadata>;
 
 /**
- * Responsive image widths for variant detection
+ * Responsive image widths for variant detection (optimized for mobile 2x/3x DPR and desktop)
  */
-export const RESPONSIVE_WIDTHS = [500, 1000, 2000] as const;
+export const RESPONSIVE_WIDTHS = [500, 800, 1080, 1600, 2400] as const;
 
 /**
  * Default sizes attribute for responsive images

package/lib/server/ssr/ssrRenderer.ts

@@ -891,6 +891,8 @@ function renderImageElement(
   const alt = imgProps.alt as string | undefined;
   const loading = imgProps.loading as string | undefined;
   const sizes = imgProps.sizes as string | undefined;
+  const fetchpriority = imgProps.fetchpriority as string | undefined;
+  const priority = imgProps.priority as boolean | undefined;
   let width = imgProps.width as string | number | undefined;
   let height = imgProps.height as string | number | undefined;
 
@@ -910,7 +912,14 @@ function renderImageElement(
   let imgAttrs = '';
   if (src) imgAttrs += ` src="${escapeHtml(String(src))}"`;
   if (alt !== undefined) imgAttrs += ` alt="${escapeHtml(String(alt))}"`;
-  if (loading) imgAttrs += ` loading="${escapeHtml(String(loading))}"`;
+  // Handle priority: if true, set fetchpriority="high" and loading="eager" for LCP optimization
+  if (priority) {
+    imgAttrs += ' fetchpriority="high"';
+    imgAttrs += ' loading="eager"';
+  } else {
+    if (fetchpriority) imgAttrs += ` fetchpriority="${escapeHtml(String(fetchpriority))}"`;
+    if (loading) imgAttrs += ` loading="${escapeHtml(String(loading))}"`;
+  }
   if (width !== undefined) imgAttrs += ` width="${escapeHtml(String(width))}"`;
   if (height !== undefined) imgAttrs += ` height="${escapeHtml(String(height))}"`;
 

package/lib/server/ssrRenderer.test.ts

@@ -883,6 +883,66 @@ describe("SSR Renderer - Security (XSS Prevention)", () => {
     });
   });
 
+  describe("Image LCP optimization", () => {
+    test("should render fetchpriority attribute", async () => {
+      const pageData: JSONPage = {
+        root: {
+          type: "node",
+          tag: "img",
+          attributes: {
+            src: "/test.jpg",
+            alt: "test",
+            fetchpriority: "high"
+          }
+        } as any
+      };
+
+      const result = await renderPageSSR(pageData);
+
+      expect(result.html).toContain('fetchpriority="high"');
+    });
+
+    test("should render priority prop as fetchpriority=high and loading=eager", async () => {
+      const pageData: JSONPage = {
+        root: {
+          type: "node",
+          tag: "img",
+          attributes: {
+            src: "/test.jpg",
+            alt: "test",
+            priority: true
+          }
+        } as any
+      };
+
+      const result = await renderPageSSR(pageData);
+
+      expect(result.html).toContain('fetchpriority="high"');
+      expect(result.html).toContain('loading="eager"');
+    });
+
+    test("priority should override explicit loading=lazy", async () => {
+      const pageData: JSONPage = {
+        root: {
+          type: "node",
+          tag: "img",
+          attributes: {
+            src: "/test.jpg",
+            alt: "test",
+            priority: true,
+            loading: "lazy"
+          }
+        } as any
+      };
+
+      const result = await renderPageSSR(pageData);
+
+      // priority=true should set loading="eager", ignoring the lazy value
+      expect(result.html).toContain('loading="eager"');
+      expect(result.html).not.toContain('loading="lazy"');
+    });
+  });
+
   describe("Embed content sanitization", () => {
     test("should sanitize embed HTML with DOMPurify", async () => {
       const pageData: JSONPage = {

package/package.json

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