Bumps Eleventy Image to v6.0.0

saneef · saneef · commit 0adac559485b · 2025-04-16T19:29:10.000+05:30
Updates code to accommadet new shape of object returned by `generateObject()`
diff --git a/lib/img2picture.js b/lib/img2picture.js
@@ -134,7 +134,10 @@ function generatePicture(metadata, attrs, options) {
     return tagObjectToHTML(tagsObject);
   }
 
-  return `<picture ${objectToHTMLAttributes(pictureAttrs)}>${tagsObject.picture
+  // '@children' is internally used in Eleventy Image
+  // https://github.com/11ty/eleventy-img/blob/092ad7a03caa08e2704690e88255da182a3acb1d/src/generate-html.js#L5
+  const children = tagsObject?.picture?.["@children"];
+  return `<picture ${objectToHTMLAttributes(pictureAttrs)}>${children
     .map(tagObjectToHTML)
     .join("")}</picture>`;
 }
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
   "author": "Saneef Ansari <hello@saneef.com> (https://saneef.com/)",
   "license": "MIT",
   "dependencies": {
-    "@11ty/eleventy-img": "^5.0.0",
+    "@11ty/eleventy-img": "^6.0.2",
     "cheerio": "^1.0.0-rc.12",
     "debug": "^4.3.4",
     "entities": "^4.5.0"
diff --git a/tests/snapshots/svgs.js.md b/tests/snapshots/svgs.js.md
@@ -4,20 +4,26 @@ The actual snapshot is saved in `svgs.js.snap`.
 
 Generated by [AVA](https://avajs.dev).
 
-## Optimizes SVG image, generates AVIF, WebP, SVG, JPEG formats, and puts them in <picture>
+## Optimizes SVG image, generates AVIF, WebP, SVG formats, and puts them in <picture>
 
 > Snapshot 1
 
-    '<html><head></head><body><picture><source type="image/avif" srcset="/images/Ghostscript_Tiger-150w.avif 150w, /images/Ghostscript_Tiger-300w.avif 300w, /images/Ghostscript_Tiger-900w.svg 900w" sizes="100vw"><source type="image/webp" srcset="/images/Ghostscript_Tiger-150w.webp 150w, /images/Ghostscript_Tiger-900w.svg 900w" sizes="100vw"><source type="image/svg+xml" srcset="/images/Ghostscript_Tiger-900w.svg 900w" sizes="100vw"><img alt="Ghostscript Tiger" loading="lazy" decoding="async" src="/images/Ghostscript_Tiger-150w.jpeg" width="900" height="900" srcset="/images/Ghostscript_Tiger-150w.jpeg 150w, /images/Ghostscript_Tiger-900w.svg 900w" sizes="100vw"></picture></body></html>'
+    '<html><head></head><body><picture><source type="image/avif" srcset="/images/Ghostscript_Tiger-150w.avif 150w, /images/Ghostscript_Tiger-300w.avif 300w, /images/Ghostscript_Tiger-900w.svg 900w" sizes="100vw"><source type="image/webp" srcset="/images/Ghostscript_Tiger-150w.webp 150w, /images/Ghostscript_Tiger-900w.svg 900w" sizes="100vw"><img alt="Ghostscript Tiger" loading="lazy" decoding="async" src="/images/Ghostscript_Tiger-900w.svg" width="900" height="900"></picture></body></html>'
 
 ## Optimizes SVG image to other formats when `svgShortCircuit: false`
 
 > Snapshot 1
 
-    '<html><head></head><body><picture><source type="image/svg+xml" srcset="/images/Ghostscript_Tiger-900w.svg 900w" sizes="100vw"><source type="image/avif" srcset="/images/Ghostscript_Tiger-150w.avif 150w, /images/Ghostscript_Tiger-300w.avif 300w, /images/Ghostscript_Tiger-450w.avif 450w, /images/Ghostscript_Tiger-600w.avif 600w, /images/Ghostscript_Tiger-750w.avif 750w, /images/Ghostscript_Tiger-900w.avif 900w, /images/Ghostscript_Tiger-1050w.avif 1050w, /images/Ghostscript_Tiger-1200w.avif 1200w, /images/Ghostscript_Tiger-1350w.avif 1350w" sizes="100vw"><source type="image/webp" srcset="/images/Ghostscript_Tiger-150w.webp 150w, /images/Ghostscript_Tiger-300w.webp 300w, /images/Ghostscript_Tiger-450w.webp 450w, /images/Ghostscript_Tiger-600w.webp 600w, /images/Ghostscript_Tiger-750w.webp 750w, /images/Ghostscript_Tiger-900w.webp 900w, /images/Ghostscript_Tiger-1050w.webp 1050w, /images/Ghostscript_Tiger-1200w.webp 1200w, /images/Ghostscript_Tiger-1350w.webp 1350w" sizes="100vw"><img alt="Ghostscript Tiger" loading="lazy" decoding="async" src="/images/Ghostscript_Tiger-150w.jpeg" width="1350" height="1350" srcset="/images/Ghostscript_Tiger-150w.jpeg 150w, /images/Ghostscript_Tiger-300w.jpeg 300w, /images/Ghostscript_Tiger-450w.jpeg 450w, /images/Ghostscript_Tiger-600w.jpeg 600w, /images/Ghostscript_Tiger-750w.jpeg 750w, /images/Ghostscript_Tiger-900w.jpeg 900w, /images/Ghostscript_Tiger-1050w.jpeg 1050w, /images/Ghostscript_Tiger-1200w.jpeg 1200w, /images/Ghostscript_Tiger-1350w.jpeg 1350w" sizes="100vw"></picture></body></html>'
+    '<html><head></head><body><picture><source type="image/avif" srcset="/images/Ghostscript_Tiger-150w.avif 150w, /images/Ghostscript_Tiger-300w.avif 300w, /images/Ghostscript_Tiger-450w.avif 450w, /images/Ghostscript_Tiger-600w.avif 600w, /images/Ghostscript_Tiger-750w.avif 750w, /images/Ghostscript_Tiger-900w.avif 900w, /images/Ghostscript_Tiger-1050w.avif 1050w, /images/Ghostscript_Tiger-1200w.avif 1200w, /images/Ghostscript_Tiger-1350w.avif 1350w" sizes="100vw"><source type="image/webp" srcset="/images/Ghostscript_Tiger-150w.webp 150w, /images/Ghostscript_Tiger-300w.webp 300w, /images/Ghostscript_Tiger-450w.webp 450w, /images/Ghostscript_Tiger-600w.webp 600w, /images/Ghostscript_Tiger-750w.webp 750w, /images/Ghostscript_Tiger-900w.webp 900w, /images/Ghostscript_Tiger-1050w.webp 1050w, /images/Ghostscript_Tiger-1200w.webp 1200w, /images/Ghostscript_Tiger-1350w.webp 1350w" sizes="100vw"><img alt="Ghostscript Tiger" loading="lazy" decoding="async" src="/images/Ghostscript_Tiger-900w.svg" width="900" height="900"></picture></body></html>'
 
 ## Process SVG image and skip to other formats when `svgShortCircuit: true`
 
 > Snapshot 1
 
     '<html><head></head><body><img alt="Ghostscript Tiger" loading="lazy" decoding="async" src="/images/Ghostscript_Tiger-900w.svg" width="900" height="900"></body></html>'
+
+## Optimizes SVG image, generates AVIF, WebP, SVG, JPEG formats, and puts them in <picture>
+
+> Snapshot 1
+
+    '<html><head></head><body><picture><source type="image/avif" srcset="/images/Ghostscript_Tiger-150w.avif 150w, /images/Ghostscript_Tiger-300w.avif 300w, /images/Ghostscript_Tiger-900w.svg 900w" sizes="100vw"><source type="image/webp" srcset="/images/Ghostscript_Tiger-150w.webp 150w, /images/Ghostscript_Tiger-900w.svg 900w" sizes="100vw"><img alt="Ghostscript Tiger" loading="lazy" decoding="async" src="/images/Ghostscript_Tiger-900w.svg" width="900" height="900"></picture></body></html>'
diff --git a/tests/snapshots/svgs.js.snap b/tests/snapshots/svgs.js.snap
diff --git a/tests/svgs.js b/tests/svgs.js
@@ -21,7 +21,7 @@ const baseOptions = {
   formats: ["avif", "webp", "svg", "jpeg"],
 };
 
-test("Optimizes SVG image, generates AVIF, WebP, SVG, JPEG formats, and puts them in <picture>", async (t) => {
+test("Optimizes SVG image, generates AVIF, WebP, SVG formats, and puts them in <picture>", async (t) => {
   const input =
     '<img src="/images/Ghostscript_Tiger.svg" alt="Ghostscript Tiger">';
   const outputPath = "file.html";
@@ -38,10 +38,10 @@ test("Optimizes SVG image, generates AVIF, WebP, SVG, JPEG formats, and puts the
   t.true(existsSync(svgFilePath));
 
   const { width: smallestImgWidth } = imageSize(
-    path.join(imagesOutputDir, "Ghostscript_Tiger-150w.jpeg"),
+    path.join(imagesOutputDir, "Ghostscript_Tiger-150w.webp"),
   );
   const { width: largestImgWidth } = imageSize(
-    path.join(imagesOutputDir, "Ghostscript_Tiger-1350w.jpeg"),
+    path.join(imagesOutputDir, "Ghostscript_Tiger-1350w.webp"),
   );
 
   t.is(smallestImgWidth, 150);

Original file line number	Diff line number	Diff line change
`@@ -134,7 +134,10 @@ function generatePicture(metadata, attrs, options) {`
`134`	`134`	`return tagObjectToHTML(tagsObject);`
`135`	`135`	`}`
`136`	`136`
`137`		- return `<picture ${objectToHTMLAttributes(pictureAttrs)}>${tagsObject.picture
	`137`	`+ // '@children' is internally used in Eleventy Image`
	`138`	`+ // https://github.com/11ty/eleventy-img/blob/092ad7a03caa08e2704690e88255da182a3acb1d/src/generate-html.js#L5`
	`139`	`+ const children = tagsObject?.picture?.["@children"];`
	`140`	+ return `<picture ${objectToHTMLAttributes(pictureAttrs)}>${children
`138`	`141`	`.map(tagObjectToHTML)`
`139`	`142`	.join("")}</picture>`;
`140`	`143`	`}`