Version Packages

fix(cli): replace images to be responsive from the bottom up
chore: remove image hashes from tests
2026-03-21 15:54:57 +00:00 · 2021-06-21 16:25:40 +02:00 · 2021-06-21 16:20:48 +02:00 · 2021-06-21 15:56:41 +02:00
8 changed files with 80 additions and 37 deletions
--- a/packages/cli/CHANGELOG.md
+++ b/packages/cli/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @rocket/cli

+## 0.9.2
+
+### Patch Changes
+
+- 5330740: When replacing images with responsive picture tags do this from the bottom up so the initial dom parsing locations still hold true.
+
 ## 0.9.1

 ### Patch Changes
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@rocket/cli",
-  "version": "0.9.1",
+  "version": "0.9.2",
  "publishConfig": {
    "access": "public"
  },
--- a/packages/cli/src/eleventy-plugins/insertResponsiveImages.cjs
+++ b/packages/cli/src/eleventy-plugins/insertResponsiveImages.cjs
@@ -195,7 +195,7 @@ async function responsiveImages(images, { inputPath, outputDir, imagePresets = {

 function updateHtml(html, changes) {
  let newHtml = html;
-  for (const change of changes) {
+  for (const change of changes.reverse()) {
    newHtml = replaceBetween({
      html: newHtml,
      start: change.openStart,
--- a/packages/cli/test-helpers/index.js
+++ b/packages/cli/test-helpers/index.js
@@ -19,6 +19,7 @@ export function setFixtureDir(importMetaUrl) {
 * @property {boolean} stripStartEndWhitespace
 * @property {boolean} stripScripts
 * @property {boolean} formatHtml
+ * @property {boolean} replaceImageHashes
 * @property {start|build} type
 */

@@ -51,6 +52,7 @@ export async function readOutput(
    stripScripts = false,
    formatHtml = false,
    type = 'build',
+    replaceImageHashes = false,
  } = {},
 ) {
  if (!cli || !cli.config) {
@@ -70,6 +72,9 @@ export async function readOutput(
    const scriptCloseTagStart = text.indexOf('</script>', scriptOpenTagEnd) + 9;
    text = text.substring(0, scriptOpenTagEnd) + text.substring(scriptCloseTagStart);
  }
+  if (replaceImageHashes) {
+    text = text.replace(/\/images\/([a-z0-9]+)-/g, '/images/__HASH__-');
+  }
  if (formatHtml) {
    text = prettier.format(text, { parser: 'html', printWidth: 100 });
  }
--- a/packages/cli/test-node/RocketCli.e2e.test.js
+++ b/packages/cli/test-node/RocketCli.e2e.test.js
@@ -102,17 +102,17 @@ describe('RocketCli e2e', () => {
    );
    const assetHtml = await readStartOutput(cli, 'use-assets/index.html');
    expect(assetHtml).to.equal('<link rel="stylesheet" href="/_merged_assets/some.css">');
-    const imageHtml = await readStartOutput(cli, 'image/index.html');
+    const imageHtml = await readStartOutput(cli, 'image/index.html', { replaceImageHashes: true });
    expect(imageHtml).to.equal(
      [
        '<p>',
        '      <figure>',
        '        <picture>',
-        '<source type="image/avif" srcset="/images/dd502010-600.avif 600w, /images/dd502010-900.avif 900w" sizes="100vw">',
-        '<source type="image/jpeg" srcset="/images/dd502010-600.jpeg 600w, /images/dd502010-900.jpeg 900w" sizes="100vw">',
+        '<source type="image/avif" srcset="/images/__HASH__-600.avif 600w, /images/__HASH__-900.avif 900w" sizes="100vw">',
+        '<source type="image/jpeg" srcset="/images/__HASH__-600.jpeg 600w, /images/__HASH__-900.jpeg 900w" sizes="100vw">',
        '          <img',
        '            alt="My Image Alternative Text" rocket-image="responsive"',
-        '            src="/images/dd502010-600.jpeg"',
+        '            src="/images/__HASH__-600.jpeg"',
        '            ',
        '            ',
        '            width="600"',
@@ -143,16 +143,17 @@ describe('RocketCli e2e', () => {
    expect(assetHtml).to.equal(
      '<html><head><link rel="stylesheet" href="../41297ffa.css">\n\n</head><body>\n\n</body></html>',
    );
-    const imageHtml = await readBuildOutput(cli, 'image/index.html');
+    let imageHtml = await readBuildOutput(cli, 'image/index.html');
+    imageHtml = imageHtml.replace(/\.\.\/([a-z0-9]+)\./g, '../__HASH__.');
    expect(imageHtml).to.equal(
      [
        '<html><head>',
        '</head><body><p>',
        '      </p><figure>',
        '        <picture>',
-        '<source type="image/avif" srcset="../e64e2277.avif 600w, ../37453c88.avif 900w" sizes="100vw">',
-        '<source type="image/jpeg" srcset="../d0f18b5a.jpeg 600w, ../81998598.jpeg 900w" sizes="100vw">',
-        '          <img alt="My Image Alternative Text" rocket-image="responsive" src="../d0f18b5a.jpeg" width="600" height="316" loading="lazy" decoding="async">',
+        '<source type="image/avif" srcset="../__HASH__.avif 600w, ../__HASH__.avif 900w" sizes="100vw">',
+        '<source type="image/jpeg" srcset="../__HASH__.jpeg 600w, ../__HASH__.jpeg 900w" sizes="100vw">',
+        '          <img alt="My Image Alternative Text" rocket-image="responsive" src="../__HASH__.jpeg" width="600" height="316" loading="lazy" decoding="async">',
        '        </picture>',
        '      <figcaption>My Image Description</figcaption>',
        '</figure>',
--- a/packages/cli/test-node/RocketCli.images.test.js
+++ b/packages/cli/test-node/RocketCli.images.test.js
@@ -22,7 +22,10 @@ describe('RocketCli images', () => {
  describe('Images', () => {
    it('does render content images responsive', async () => {
      cli = await executeStart('e2e-fixtures/images/rocket.config.js');
-      const indexHtml = await readStartOutput(cli, 'index.html', { formatHtml: true });
+      const indexHtml = await readStartOutput(cli, 'index.html', {
+        formatHtml: true,
+        replaceImageHashes: true,
+      });
      expect(indexHtml).to.equal(
        [
          '<p>',
@@ -30,18 +33,18 @@ describe('RocketCli images', () => {
          '    <picture>',
          '      <source',
          '        type="image/avif"',
-          '        srcset="/images/d67643ad-600.avif 600w, /images/d67643ad-900.avif 900w"',
+          '        srcset="/images/__HASH__-600.avif 600w, /images/__HASH__-900.avif 900w"',
          '        sizes="100vw"',
          '      />',
          '      <source',
          '        type="image/jpeg"',
-          '        srcset="/images/d67643ad-600.jpeg 600w, /images/d67643ad-900.jpeg 900w"',
+          '        srcset="/images/__HASH__-600.jpeg 600w, /images/__HASH__-900.jpeg 900w"',
          '        sizes="100vw"',
          '      />',
          '      <img',
          '        alt="My Image Alternative Text"',
          '        rocket-image="responsive"',
-          '        src="/images/d67643ad-600.jpeg"',
+          '        src="/images/__HASH__-600.jpeg"',
          '        width="600"',
          '        height="316"',
          '        loading="lazy"',
@@ -57,47 +60,57 @@ describe('RocketCli images', () => {

    it('renders multiple images in the correct order', async () => {
      cli = await executeStart('e2e-fixtures/images/rocket.config.js');
-      const indexHtml = await readStartOutput(cli, 'two-images/index.html', { formatHtml: true });
+      const indexHtml = await readStartOutput(cli, 'two-images/index.html', {
+        formatHtml: true,
+        replaceImageHashes: true,
+      });
      expect(indexHtml).to.equal(
        [
+          '<h2 id="one">',
+          '  <a aria-hidden="true" tabindex="-1" href="#one"><span class="icon icon-link"></span></a>one',
+          '</h2>',
          '<p>',
          '  <picture>',
          '    <source',
          '      type="image/avif"',
-          '      srcset="/images/d67643ad-600.avif 600w, /images/d67643ad-900.avif 900w"',
+          '      srcset="/images/__HASH__-600.avif 600w, /images/__HASH__-900.avif 900w"',
          '      sizes="100vw"',
          '    />',
          '    <source',
          '      type="image/jpeg"',
-          '      srcset="/images/d67643ad-600.jpeg 600w, /images/d67643ad-900.jpeg 900w"',
+          '      srcset="/images/__HASH__-600.jpeg 600w, /images/__HASH__-900.jpeg 900w"',
          '      sizes="100vw"',
          '    />',
          '    <img',
          '      alt="one"',
          '      rocket-image="responsive"',
-          '      src="/images/d67643ad-600.jpeg"',
+          '      src="/images/__HASH__-600.jpeg"',
          '      width="600"',
          '      height="316"',
          '      loading="lazy"',
          '      decoding="async"',
          '    />',
          '  </picture>',
-          '',
+          '</p>',
+          '<h2 id="two">',
+          '  <a aria-hidden="true" tabindex="-1" href="#two"><span class="icon icon-link"></span></a>two',
+          '</h2>',
+          '<p>',
          '  <picture>',
          '    <source',
          '      type="image/avif"',
-          '      srcset="/images/d67643ad-600.avif 600w, /images/d67643ad-900.avif 900w"',
+          '      srcset="/images/__HASH__-600.avif 600w, /images/__HASH__-900.avif 900w"',
          '      sizes="100vw"',
          '    />',
          '    <source',
          '      type="image/jpeg"',
-          '      srcset="/images/d67643ad-600.jpeg 600w, /images/d67643ad-900.jpeg 900w"',
+          '      srcset="/images/__HASH__-600.jpeg 600w, /images/__HASH__-900.jpeg 900w"',
          '      sizes="100vw"',
          '    />',
          '    <img',
          '      alt="two"',
          '      rocket-image="responsive"',
-          '      src="/images/d67643ad-600.jpeg"',
+          '      src="/images/__HASH__-600.jpeg"',
          '      width="600"',
          '      height="316"',
          '      loading="lazy"',
@@ -111,7 +124,10 @@ describe('RocketCli images', () => {

    it('can configure those responsive images', async () => {
      cli = await executeStart('e2e-fixtures/images/small.rocket.config.js');
-      const indexHtml = await readStartOutput(cli, 'index.html', { formatHtml: true });
+      const indexHtml = await readStartOutput(cli, 'index.html', {
+        formatHtml: true,
+        replaceImageHashes: true,
+      });
      expect(indexHtml).to.equal(
        [
          '<p>',
@@ -119,18 +135,18 @@ describe('RocketCli images', () => {
          '    <picture>',
          '      <source',
          '        type="image/avif"',
-          '        srcset="/images/d67643ad-30.avif 30w, /images/d67643ad-60.avif 60w"',
+          '        srcset="/images/__HASH__-30.avif 30w, /images/__HASH__-60.avif 60w"',
          '        sizes="(min-width: 1024px) 30px, 60px"',
          '      />',
          '      <source',
          '        type="image/jpeg"',
-          '        srcset="/images/d67643ad-30.jpeg 30w, /images/d67643ad-60.jpeg 60w"',
+          '        srcset="/images/__HASH__-30.jpeg 30w, /images/__HASH__-60.jpeg 60w"',
          '        sizes="(min-width: 1024px) 30px, 60px"',
          '      />',
          '      <img',
          '        alt="My Image Alternative Text"',
          '        rocket-image="responsive"',
-          '        src="/images/d67643ad-30.jpeg"',
+          '        src="/images/__HASH__-30.jpeg"',
          '        width="30"',
          '        height="15"',
          '        loading="lazy"',
@@ -146,25 +162,28 @@ describe('RocketCli images', () => {

    it('will only render a figure & figcaption if there is a caption/title', async () => {
      cli = await executeStart('e2e-fixtures/images/small.rocket.config.js');
-      const indexHtml = await readStartOutput(cli, 'no-title/index.html', { formatHtml: true });
+      const indexHtml = await readStartOutput(cli, 'no-title/index.html', {
+        formatHtml: true,
+        replaceImageHashes: true,
+      });
      expect(indexHtml).to.equal(
        [
          '<p>',
          '  <picture>',
          '    <source',
          '      type="image/avif"',
-          '      srcset="/images/d67643ad-30.avif 30w, /images/d67643ad-60.avif 60w"',
+          '      srcset="/images/__HASH__-30.avif 30w, /images/__HASH__-60.avif 60w"',
          '      sizes="(min-width: 1024px) 30px, 60px"',
          '    />',
          '    <source',
          '      type="image/jpeg"',
-          '      srcset="/images/d67643ad-30.jpeg 30w, /images/d67643ad-60.jpeg 60w"',
+          '      srcset="/images/__HASH__-30.jpeg 30w, /images/__HASH__-60.jpeg 60w"',
          '      sizes="(min-width: 1024px) 30px, 60px"',
          '    />',
          '    <img',
          '      alt="My Image Alternative Text"',
          '      rocket-image="responsive"',
-          '      src="/images/d67643ad-30.jpeg"',
+          '      src="/images/__HASH__-30.jpeg"',
          '      width="30"',
          '      height="15"',
          '      loading="lazy"',
@@ -178,15 +197,18 @@ describe('RocketCli images', () => {

    it('will render an img with srcset and sizes if there is only one image format', async () => {
      cli = await executeStart('e2e-fixtures/images/single-format.rocket.config.js');
-      const indexHtml = await readStartOutput(cli, 'no-title/index.html', { formatHtml: true });
+      const indexHtml = await readStartOutput(cli, 'no-title/index.html', {
+        formatHtml: true,
+        replaceImageHashes: true,
+      });
      expect(indexHtml).to.equal(
        [
          '<p>',
          '  <img',
          '    alt="My Image Alternative Text"',
          '    rocket-image="responsive"',
-          '    src="/images/d67643ad-30.jpeg"',
-          '    srcset="/images/d67643ad-30.jpeg 30w, /images/d67643ad-60.jpeg 60w"',
+          '    src="/images/__HASH__-30.jpeg"',
+          '    srcset="/images/__HASH__-30.jpeg 30w, /images/__HASH__-60.jpeg 60w"',
          '    sizes="(min-width: 1024px) 30px, 60px"',
          '    width="30"',
          '    height="15"',
--- a/packages/cli/test-node/RocketCli.preset.test.js
+++ b/packages/cli/test-node/RocketCli.preset.test.js
@@ -108,15 +108,18 @@ describe('RocketCli preset', () => {
  it('a preset can provide an adjustImagePresets() function', async () => {
    cli = await executeStart('preset-fixtures/use-preset/rocket.config.js');

-    const indexHtml = await readStartOutput(cli, 'index.html', { formatHtml: true });
+    const indexHtml = await readStartOutput(cli, 'index.html', {
+      formatHtml: true,
+      replaceImageHashes: true,
+    });
    expect(indexHtml).to.equal(
      [
        '<p>',
        '  <img',
        '    alt="My Image Alternative Text"',
        '    rocket-image="responsive"',
-        '    src="/images/1f847765-30.jpeg"',
-        '    srcset="/images/1f847765-30.jpeg 30w, /images/1f847765-60.jpeg 60w"',
+        '    src="/images/__HASH__-30.jpeg"',
+        '    srcset="/images/__HASH__-30.jpeg 30w, /images/__HASH__-60.jpeg 60w"',
        '    sizes="30px"',
        '    width="30"',
        '    height="15"',
--- a/packages/cli/test-node/e2e-fixtures/images/docs/two-images.md
+++ b/packages/cli/test-node/e2e-fixtures/images/docs/two-images.md
@@ -2,4 +2,10 @@
 layout: layout-raw
 ---

-![one](./_assets/my-image.jpg)![two](./_assets/my-image.jpg)
+## one
+
+![one](./_assets/my-image.jpg)
+
+## two
+
+![two](./_assets/my-image.jpg)
Author	SHA1	Message	Date
github-actions[bot]	bcf8f4fe83	Version Packages	2021-06-21 16:25:40 +02:00
Thomas Allmer	5330740cb3	fix(cli): replace images to be responsive from the bottom up	2021-06-21 16:20:48 +02:00
Thomas Allmer	2edd61beaa	chore: remove image hashes from tests	2021-06-21 15:56:41 +02:00