meno-core 1.0.45 → 1.0.46

package/lib/server/astro/nodeToAstro.test.ts

@@ -638,6 +638,95 @@ describe('nodeToAstro', () => {
       expect(result).toContain('Fragment set:html');
       expect(result).toContain('<strong>bold</strong>');
     });
+
+    test('should prefer processedRawHtml map when raw slice matches', () => {
+      const rawSlice = '<p>See <a href="/about">our story</a></p>';
+      const processedSlice = '<p>See <a href="/fr/a-propos">our story</a></p>';
+      const ctx = createContext({
+        processedRawHtml: new Map([[rawSlice, processedSlice]]),
+      });
+      const result = nodeToAstro(`<!--MENO_RAW_HTML-->${rawSlice}`, ctx);
+      expect(result).toContain('Fragment set:html');
+      expect(result).toContain('href="/fr/a-propos"');
+      expect(result).not.toContain('href="/about"');
+    });
+
+    test('should fall back to raw slice when processedRawHtml is missing the entry', () => {
+      const ctx = createContext({
+        processedRawHtml: new Map(),
+      });
+      const result = nodeToAstro('<!--MENO_RAW_HTML--><em>raw</em>', ctx);
+      expect(result).toContain('Fragment set:html');
+      expect(result).toContain('<em>raw</em>');
+    });
+
+    test('should emit <picture> element from processedRawHtml when image is rewritten', () => {
+      const rawSlice = '<img src="foo.png">';
+      const processedSlice =
+        '<picture><source type="image/avif" srcset="foo.avif" sizes="100vw" /><img src="foo.png" width="100" height="100"></picture>';
+      const ctx = createContext({
+        processedRawHtml: new Map([[rawSlice, processedSlice]]),
+      });
+      const result = nodeToAstro(`<!--MENO_RAW_HTML-->${rawSlice}`, ctx);
+      expect(result).toContain('<picture>');
+      expect(result).toContain('image/avif');
+      expect(result).toContain('width="100"');
+    });
+
+    test('should inline expanded component markup from processedRawHtml', () => {
+      const rawSlice = '<div data-meno-component="Button" data-meno-props="{}"></div>';
+      const processedSlice = '<button class="btn">Click me</button>';
+      const ctx = createContext({
+        processedRawHtml: new Map([[rawSlice, processedSlice]]),
+      });
+      const result = nodeToAstro(`<!--MENO_RAW_HTML-->${rawSlice}`, ctx);
+      expect(result).toContain('<button class="btn">Click me</button>');
+      expect(result).not.toContain('data-meno-component');
+    });
+
+    test('should strip marker from component instance static string props', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'component',
+        component: 'SeoAudit',
+        props: { text2: '<!--MENO_RAW_HTML-->SEO<br>Audit Blueprint' },
+      } as unknown as ComponentNode;
+      const result = nodeToAstro(node, ctx);
+      expect(result).not.toContain('MENO_RAW_HTML');
+      // Attribute is HTML-entity encoded by escapeJSX; Astro decodes at runtime.
+      expect(result).toContain('text2="SEO&lt;br&gt;Audit Blueprint"');
+    });
+
+    test('should strip marker from i18n locale strings in component instance props', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'component',
+        component: 'SeoAudit',
+        props: {
+          text2: {
+            _i18n: true,
+            en: '<!--MENO_RAW_HTML--><p>EN</p>',
+            pl: '<!--MENO_RAW_HTML--><p>PL</p>',
+          },
+        },
+      } as unknown as ComponentNode;
+      const result = nodeToAstro(node, ctx);
+      expect(result).not.toContain('MENO_RAW_HTML');
+      expect(result).toContain('<p>EN</p>');
+      expect(result).toContain('<p>PL</p>');
+    });
+
+    test('should delegate i18n-resolved string with marker to Fragment set:html', () => {
+      const ctx = createContext({ locale: 'en' });
+      const node = {
+        _i18n: true,
+        en: '<!--MENO_RAW_HTML--><em>hello</em>',
+      } as unknown as ComponentNode;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('Fragment set:html');
+      expect(result).toContain('<em>hello</em>');
+      expect(result).not.toContain('MENO_RAW_HTML');
+    });
   });
 
   // =========================================================================
@@ -862,7 +951,7 @@ describe('nodeToAstro', () => {
       expect(result).toContain('alt="A photo"');
     });
 
-    test('should emit picture element when avif metadata is available', () => {
+    test('should emit <Picture> for static image type node with metadata', () => {
       const ctx = createContext({
         imageMetadataMap: new Map([
           ['/images/photo.jpg', {
@@ -879,10 +968,162 @@ describe('nodeToAstro', () => {
         alt: 'A photo',
       } as any;
       const result = nodeToAstro(node, ctx);
-      expect(result).toContain('<picture');
-      expect(result).toContain('image/avif');
-      expect(result).toContain('image/webp');
-      expect(result).toContain('</picture>');
+      expect(result).toContain('<Picture');
+      expect(result).toContain('src={imgPhoto}');
+      expect(result).toContain("formats={['avif','webp']}");
+      expect(result).toContain('widths={[500, 800, 1080, 1600, 2400]}');
+      expect(ctx.imageImports?.size ?? 0).toBeGreaterThan(0);
+      expect(ctx.imageImports?.get('imgPhoto')).toBe('../assets/images/photo.jpg');
+    });
+  });
+
+  // =========================================================================
+  // Static image → astro:assets <Picture>
+  // =========================================================================
+
+  describe('static image <Picture> emission', () => {
+    const staticMetadata = new Map([
+      ['/images/hero.jpg', {
+        width: 1920,
+        height: 1080,
+        srcset: '/images/hero-800.webp 800w',
+        avifSrcset: '/images/hero-800.avif 800w',
+      }],
+    ]);
+
+    test('static <img> emits <Picture> and records import', () => {
+      const ctx = createContext({ imageMetadataMap: staticMetadata as any });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        attributes: { src: '/images/hero.jpg', alt: 'Hero' },
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<Picture');
+      expect(result).toContain('src={imgHero}');
+      expect(result).toContain('alt="Hero"');
+      expect(ctx.imageImports?.size ?? 0).toBeGreaterThan(0);
+      expect(ctx.imageImports?.get('imgHero')).toBe('../assets/images/hero.jpg');
+    });
+
+    test('page at fileDepth 1 uses ../../ import prefix', () => {
+      const ctx = createContext({
+        imageMetadataMap: staticMetadata as any,
+        fileDepth: 1,
+      });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        attributes: { src: '/images/hero.jpg', alt: 'Hero' },
+      } as any;
+      nodeToAstro(node, ctx);
+      expect(ctx.imageImports?.get('imgHero')).toBe('../../assets/images/hero.jpg');
+    });
+
+    test('same image used twice dedupes to single import', () => {
+      const ctx = createContext({ imageMetadataMap: staticMetadata as any });
+      const nodes: ComponentNode[] = [
+        { type: 'node', tag: 'img', attributes: { src: '/images/hero.jpg', alt: 'A' } },
+        { type: 'node', tag: 'img', attributes: { src: '/images/hero.jpg', alt: 'B' } },
+      ] as any;
+      nodeToAstro(nodes, ctx);
+      expect(ctx.imageImports?.size).toBe(1);
+    });
+
+    test('CMS template src falls back to legacy <picture>/<img>', () => {
+      const ctx = createContext({
+        imageMetadataMap: staticMetadata as any,
+        cmsMode: true,
+        cmsEntryBinding: 'entry',
+      });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        attributes: { src: '{{cms.hero}}', alt: 'Hero' },
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).not.toContain('<Picture');
+      expect(result).toContain('<img');
+      expect(ctx.imageImports?.size ?? 0).toBe(0);
+    });
+
+    test('list item binding src falls back to legacy <img>', () => {
+      const ctx = createContext({
+        imageMetadataMap: staticMetadata as any,
+        listItemBinding: 'post',
+      });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        attributes: { src: '{{post.photo}}', alt: 'Photo' },
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).not.toContain('<Picture');
+      expect(result).toContain('<img');
+    });
+
+    test('remote URL src falls back to legacy <img>', () => {
+      const ctx = createContext({ imageMetadataMap: staticMetadata as any });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        attributes: { src: 'https://cdn.example.com/x.jpg', alt: 'Remote' },
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).not.toContain('<Picture');
+      expect(result).toContain('<img');
+    });
+
+    test('image not in metadata map falls back to legacy <img>', () => {
+      const ctx = createContext({ imageMetadataMap: staticMetadata as any });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        attributes: { src: '/images/unknown.jpg', alt: 'Unknown' },
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).not.toContain('<Picture');
+      expect(result).toContain('<img');
+      expect(ctx.imageImports?.size ?? 0).toBe(0);
+    });
+
+    test('blur hash puts blur on <picture> via pictureAttributes, no wrapper div', () => {
+      const ctx = createContext({
+        imageMetadataMap: new Map([
+          ['/images/hero.jpg', {
+            width: 1920,
+            height: 1080,
+            srcset: '/images/hero-800.webp 800w',
+            avifSrcset: '/images/hero-800.avif 800w',
+            blurHash: 'data:image/png;base64,blur',
+          }],
+        ]) as any,
+      });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        attributes: { src: '/images/hero.jpg', alt: 'Hero' },
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      // Blur lives on <picture> via pictureAttributes — no wrapper <div>
+      expect(result).not.toContain('<div');
+      expect(result).toContain('<Picture');
+      expect(result).toContain('pictureAttributes={{');
+      expect(result).toContain('background-image:url');
+      // onload clears the direct parent (<picture>), same as legacy path
+      expect(result).toContain("this.parentElement.style.backgroundImage=''");
+    });
+
+    test('static class attribute maps to pictureAttributes prop', () => {
+      const ctx = createContext({ imageMetadataMap: staticMetadata as any });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        style: { width: '100%' },
+        attributes: { src: '/images/hero.jpg', alt: 'Hero' },
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('pictureAttributes={{class:');
     });
   });
 
@@ -981,6 +1222,157 @@ describe('nodeToAstro', () => {
       expect(result).toContain('srcset=');
       expect(result).toContain('sizes=');
     });
+
+    test('should compute sizes from flat style width in px', () => {
+      const metadataMap = new Map();
+      metadataMap.set('/test.jpg', {
+        width: 1920,
+        height: 1080,
+        srcset: '/test-800.webp 800w',
+      });
+      const ctx = createContext({ imageMetadataMap: metadataMap as any });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        attributes: { src: '/test.jpg', alt: 'Test' },
+        style: { width: '444px' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      // With default breakpoints (mobile 540, tablet 1024) and a single base width
+      // of 444px, every breakpoint should resolve to 444px.
+      expect(result).toContain('sizes="(max-width: 540px) 444px, (max-width: 1024px) 444px, 444px"');
+      expect(result).not.toContain('sizes="100vw"');
+    });
+
+    test('should emit per-breakpoint sizes from responsive style widths', () => {
+      const metadataMap = new Map();
+      metadataMap.set('/test.jpg', {
+        width: 1920,
+        height: 1080,
+        srcset: '/test-800.webp 800w',
+      });
+      const ctx = createContext({ imageMetadataMap: metadataMap as any });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        attributes: { src: '/test.jpg', alt: 'Test' },
+        style: {
+          base: { width: '700px' },
+          tablet: { width: '500px' },
+          mobile: { width: '340px' },
+        },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain(
+        'sizes="(max-width: 540px) 340px, (max-width: 1024px) 500px, 700px"'
+      );
+    });
+
+    test('should fall back to 100vw when width is not a px value', () => {
+      const metadataMap = new Map();
+      metadataMap.set('/test.jpg', {
+        width: 1920,
+        height: 1080,
+        srcset: '/test-800.webp 800w',
+      });
+      const ctx = createContext({ imageMetadataMap: metadataMap as any });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        attributes: { src: '/test.jpg', alt: 'Test' },
+        style: { width: '100%' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('sizes="100vw"');
+    });
+
+    test('should honor explicit sizes attribute from node', () => {
+      const metadataMap = new Map();
+      metadataMap.set('/test.jpg', {
+        width: 1920,
+        height: 1080,
+        srcset: '/test-800.webp 800w',
+      });
+      const ctx = createContext({ imageMetadataMap: metadataMap as any });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        attributes: { src: '/test.jpg', alt: 'Test', sizes: '50vw' },
+        style: { width: '444px' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('sizes="50vw"');
+      expect(result).not.toContain('(max-width: 540px)');
+    });
+
+    test('should wrap webp img in <picture> with blur background when blurHash present', () => {
+      const metadataMap = new Map();
+      metadataMap.set('/test.jpg', {
+        width: 1920,
+        height: 1080,
+        srcset: '/test-800.webp 800w',
+        blurHash: 'data:image/webp;base64,AAA',
+      });
+      const ctx = createContext({ imageMetadataMap: metadataMap as any });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        attributes: { src: '/test.jpg', alt: 'Test' },
+        style: { width: '444px' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+
+      // Blur should be on the <picture> wrapper, not the <img>
+      expect(result).toContain('<picture');
+      expect(result).toContain('</picture>');
+      expect(result).toContain('background-image:url(data:image/webp;base64,AAA)');
+      // The <picture>'s style must carry the background, and the <img> must not.
+      const pictureLine = result.split('\n').find(l => l.includes('<picture'));
+      expect(pictureLine).toContain('background-image:url');
+      const imgLine = result.split('\n').find(l => l.includes('<img'));
+      expect(imgLine).not.toContain('background-image');
+      // The onload handler should clear the placeholder from the parent.
+      expect(result).toContain("this.parentElement.style.backgroundImage=''");
+      // Inner img must fill the wrapper.
+      expect(imgLine).toContain('class="block w-full h-full"');
+    });
+
+    test('should place blur on <picture> wrapper even when AVIF is present', () => {
+      const metadataMap = new Map();
+      metadataMap.set('/test.jpg', {
+        width: 1920,
+        height: 1080,
+        srcset: '/test-800.webp 800w',
+        avifSrcset: '/test-800.avif 800w',
+        blurHash: 'data:image/webp;base64,BBB',
+      });
+      const ctx = createContext({ imageMetadataMap: metadataMap as any });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        attributes: { src: '/test.jpg', alt: 'Test' },
+        style: { width: '444px', height: '268px', position: 'absolute' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<picture');
+      expect(result).toContain('type="image/avif"');
+      expect(result).toContain('type="image/webp"');
+      const pictureLine = result.split('\n').find(l => l.includes('<picture'));
+      expect(pictureLine).toContain('background-image:url(data:image/webp;base64,BBB)');
+      // Inner img should not carry an inline background-image anymore.
+      const imgLine = result.split('\n').find(l => l.includes('<img'));
+      expect(imgLine).not.toContain('background-image');
+      // Fill classes on inner img so it covers the picture's declared size.
+      expect(imgLine).toContain('block');
+      expect(imgLine).toContain('w-full');
+      expect(imgLine).toContain('h-full');
+    });
   });
 
   // =========================================================================