From 57382bb3d8d3759b5faa4c59cd16cba38c6362bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9E=D0=BB=D0=B5=D0=BA=D1=81=D0=B0=D0=BD=D0=B4=D1=80=20?= =?UTF-8?q?=D0=9A=D0=BE=D0=B7=D0=B0=D0=BA?= Date: Tue, 5 Sep 2023 15:11:21 +0300 Subject: [PATCH 1/4] feat(picture): support `sizes` attribute --- plugins/picture.ts | 26 ++++++++++++++++++++---- tests/__snapshots__/picture.test.ts.snap | 6 +++--- 2 files changed, 25 insertions(+), 7 deletions(-) diff --git a/plugins/picture.ts b/plugins/picture.ts index b101ffad..4b44a0ce 100644 --- a/plugins/picture.ts +++ b/plugins/picture.ts @@ -90,23 +90,35 @@ export default function (): Plugin { basePath: string, ) { const src = img.getAttribute("src") as string; + const sizes = img.getAttribute("sizes"); const sourceFormats = saveTransform(basePath, src, imagick); for (const sourceFormat of sourceFormats) { - const source = createSource(img.ownerDocument!, src, sourceFormat); + const source = createSource( + img.ownerDocument!, + src, + sourceFormat, + sizes, + ); picture.insertBefore(source, img); } } function handleImg(imagick: string, img: Element, basePath: string) { const src = img.getAttribute("src") as string; + const sizes = img.getAttribute("sizes"); const sourceFormats = saveTransform(basePath, src, imagick); const picture = img.ownerDocument!.createElement("picture"); img.replaceWith(picture); for (const sourceFormat of sourceFormats) { - const source = createSource(img.ownerDocument!, src, sourceFormat); + const source = createSource( + img.ownerDocument!, + src, + sourceFormat, + sizes, + ); picture.append(source); } @@ -194,19 +206,25 @@ function createSource( document: Document, src: string, srcFormat: SourceFormat, + sizes?: string | null | undefined, ) { const source = document.createElement("source"); - const { scales, format } = srcFormat; + const { scales, format, width } = srcFormat; const path = encodeURI(getPathAndExtension(src)[0]); const srcset: string[] = []; for (const [suffix, scale] of Object.entries(scales)) { - const scaleSuffix = scale === 1 ? "" : ` ${scale}x`; + const scaleSuffix = ` ${scale * width}w`; srcset.push(`${path}${suffix}.${format}${scaleSuffix}`); } source.setAttribute("srcset", srcset.join(", ")); source.setAttribute("type", typeByExtension(format)); + + if (sizes) { + source.setAttribute("sizes", sizes); + } + return source; } diff --git a/tests/__snapshots__/picture.test.ts.snap b/tests/__snapshots__/picture.test.ts.snap index 171d7189..0e9fc49d 100644 --- a/tests/__snapshots__/picture.test.ts.snap +++ b/tests/__snapshots__/picture.test.ts.snap @@ -113,16 +113,16 @@ snapshot[`imagick plugin 3`] = `
- +
- + - + ', From 1ce96c278de90e90129ae75fe30c885c298b83fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9E=D0=BB=D0=B5=D0=BA=D1=81=D0=B0=D0=BD=D0=B4=D1=80=20?= =?UTF-8?q?=D0=9A=D0=BE=D0=B7=D0=B0=D0=BA?= Date: Tue, 5 Sep 2023 16:38:04 +0300 Subject: [PATCH 2/4] test: rollback tests --- tests/__snapshots__/picture.test.ts.snap | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tests/__snapshots__/picture.test.ts.snap b/tests/__snapshots__/picture.test.ts.snap index 0e9fc49d..171d7189 100644 --- a/tests/__snapshots__/picture.test.ts.snap +++ b/tests/__snapshots__/picture.test.ts.snap @@ -113,16 +113,16 @@ snapshot[`imagick plugin 3`] = `
- +
- + - + ', From be04a86be9da4749be1833293ffb7a4b1d36c494 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9E=D0=BB=D0=B5=D0=BA=D1=81=D0=B0=D0=BD=D0=B4=D1=80=20?= =?UTF-8?q?=D0=9A=D0=BE=D0=B7=D0=B0=D0=BA?= Date: Tue, 5 Sep 2023 16:40:42 +0300 Subject: [PATCH 3/4] use width dimension descriptors only if `sizes` provided --- plugins/picture.ts | 2 +- tests/__snapshots__/picture.test.ts.snap | 48 ++++++++++++++++++++++++ tests/assets/picture/index.njk | 16 ++++++++ 3 files changed, 65 insertions(+), 1 deletion(-) diff --git a/plugins/picture.ts b/plugins/picture.ts index 4b44a0ce..261479da 100644 --- a/plugins/picture.ts +++ b/plugins/picture.ts @@ -214,7 +214,7 @@ function createSource( const srcset: string[] = []; for (const [suffix, scale] of Object.entries(scales)) { - const scaleSuffix = ` ${scale * width}w`; + const scaleSuffix = sizes ? ` ${scale * width}w` : scale === 1 ? "" : ` ${scale}x`; srcset.push(`${path}${suffix}.${format}${scaleSuffix}`); } diff --git a/tests/__snapshots__/picture.test.ts.snap b/tests/__snapshots__/picture.test.ts.snap index 171d7189..ed185d8c 100644 --- a/tests/__snapshots__/picture.test.ts.snap +++ b/tests/__snapshots__/picture.test.ts.snap @@ -112,6 +112,8 @@ snapshot[`imagick plugin 3`] = ` + +
@@ -125,6 +127,20 @@ snapshot[`imagick plugin 3`] = ` + +
+ +
+ + + + + + + + + + ', data: { children: ' @@ -134,6 +150,8 @@ snapshot[`imagick plugin 3`] = ` + +
@@ -145,6 +163,20 @@ snapshot[`imagick plugin 3`] = ` + + + +
+ +
+ + + + + + + + ', @@ -155,6 +187,8 @@ snapshot[`imagick plugin 3`] = ` + +
@@ -166,6 +200,20 @@ snapshot[`imagick plugin 3`] = ` + + + +
+ +
+ + + + + + + + ', diff --git a/tests/assets/picture/index.njk b/tests/assets/picture/index.njk index 71e85ee1..f2e498bb 100644 --- a/tests/assets/picture/index.njk +++ b/tests/assets/picture/index.njk @@ -5,6 +5,8 @@ + +
@@ -16,5 +18,19 @@ + + + +
+ +
+ + + + + + + + From c3433ab9a54d653b11d6dd19fbc39e6aa41a3ba6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9E=D0=BB=D0=B5=D0=BA=D1=81=D0=B0=D0=BD=D0=B4=D1=80=20?= =?UTF-8?q?=D0=9A=D0=BE=D0=B7=D0=B0=D0=BA?= Date: Tue, 5 Sep 2023 16:44:52 +0300 Subject: [PATCH 4/4] deno fmt --- plugins/picture.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/plugins/picture.ts b/plugins/picture.ts index 261479da..9dc3b106 100644 --- a/plugins/picture.ts +++ b/plugins/picture.ts @@ -214,7 +214,11 @@ function createSource( const srcset: string[] = []; for (const [suffix, scale] of Object.entries(scales)) { - const scaleSuffix = sizes ? ` ${scale * width}w` : scale === 1 ? "" : ` ${scale}x`; + const scaleSuffix = sizes + ? ` ${scale * width}w` + : scale === 1 + ? "" + : ` ${scale}x`; srcset.push(`${path}${suffix}.${format}${scaleSuffix}`); }