Version Packages

packages/cli/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @rocket/cli
 
+## 0.9.3
+
+### Patch Changes
+
+- 795a361: The server worker url should respect a set pathPrefix.
+
+## 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
+
+- 43a7ca1: Responsive images need to respect a set pathPrefix
+
 ## 0.9.0
 
 ### Minor Changes

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket/cli",
-  "version": "0.9.0",
+  "version": "0.9.3",
   "publishConfig": {
     "access": "public"
   },
@@ -67,7 +67,7 @@
     "@web/dev-server": "^0.1.4",
     "@web/dev-server-rollup": "^0.3.2",
     "@web/rollup-plugin-copy": "^0.2.0",
-    "check-html-links": "^0.2.2",
+    "check-html-links": "^0.2.3",
     "command-line-args": "^5.1.1",
     "command-line-usage": "^6.1.1",
     "fs-extra": "^9.0.1",

packages/cli/preset/_includes/_joiningBlocks/bottom/180-register-service-worker.njk

@@ -1,5 +1,7 @@
+{% set rocketServiceWorkerUrl = '/' + rocketConfig.serviceWorkerName %}
+
 <script>
-  window.__rocketServiceWorkerUrl = '/{{ rocketConfig.serviceWorkerName }}';
+  window.__rocketServiceWorkerUrl = '{{ rocketServiceWorkerUrl | url }}';
 </script>
 
 <script type="module" inject-service-worker="" src="{{ '/_assets/scripts/registerServiceWorker.js' | asset | url }}"></script>

packages/cli/src/eleventy-plugins/insertResponsiveImages.cjs

@@ -2,6 +2,7 @@
 const fs = require('fs');
 const path = require('path');
 const EleventyImage = require('@11ty/eleventy-img');
+const urlFilter = require('@11ty/eleventy/src/Filters/Url.js');
 const { SaxEventType, SAXParser } = require('sax-wasm');
 const { getComputedConfig } = require('../public/computedConfig.cjs');
 
@@ -140,7 +141,7 @@ async function responsiveImages(images, { inputPath, outputDir, imagePresets = {
 
     const metadata = await EleventyImage(filePath, {
       outputDir: path.join(outputDir, 'images'),
-      urlPath: '/images/',
+      urlPath: urlFilter('/images/'),
       ...presetSettings,
     });
     const lowsrc = metadata.jpeg[0];
@@ -194,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,

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 });
   }

packages/cli/test-node/RocketCli.e2e.test.js

@@ -102,6 +102,30 @@ 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', { replaceImageHashes: true });
+    expect(imageHtml).to.equal(
+      [
+        '<p>',
+        '      <figure>',
+        '        <picture>',
+        '<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/__HASH__-600.jpeg"',
+        '            ',
+        '            ',
+        '            width="600"',
+        '            height="316"',
+        '            loading="lazy"',
+        '            decoding="async"',
+        '          />',
+        '        </picture>',
+        '      <figcaption>My Image Description</figcaption>',
+        '</figure>',
+        '    </p>',
+      ].join('\n'),
+    );
   });
 
   it('can add a pathPrefix that will be used in the build command', async () => {
@@ -119,6 +143,26 @@ describe('RocketCli e2e', () => {
     expect(assetHtml).to.equal(
       '<html><head><link rel="stylesheet" href="../41297ffa.css">\n\n</head><body>\n\n</body></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="../__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>',
+        '    <p></p>',
+        '',
+        '',
+        '</body></html>',
+      ].join('\n'),
+    );
   });
 
   it('smoke test for link checking', async () => {

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"',

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"',

packages/cli/test-node/RocketCli.service-worker.test.js

@@ -0,0 +1,66 @@
+import chai from 'chai';
+import chalk from 'chalk';
+import { executeBuild, readStartOutput, setFixtureDir } from '@rocket/cli/test-helpers';
+
+const { expect } = chai;
+
+function getInjectServiceWorker(text) {
+  const scriptOpenTagStart = text.indexOf('<script type="module" inject-service-worker=""');
+  const scriptCloseTagEnd = text.indexOf('</script>', scriptOpenTagStart) + 9;
+  text = text.substring(scriptOpenTagStart, scriptCloseTagEnd);
+  return text;
+}
+
+function getServiceWorkerUrl(text) {
+  const matches = text.match(/window\.__rocketServiceWorkerUrl = '(.*?)';/);
+  return matches[1];
+}
+
+describe('RocketCli e2e', () => {
+  let cli;
+
+  before(() => {
+    // ignore colors in tests as most CIs won't support it
+    chalk.level = 0;
+    setFixtureDir(import.meta.url);
+  });
+
+  afterEach(async () => {
+    if (cli?.cleanup) {
+      await cli.cleanup();
+    }
+  });
+
+  it.only('will add a script to inject the service worker', async () => {
+    cli = await executeBuild('e2e-fixtures/service-worker/rocket.config.js');
+    const indexHtml = await readStartOutput(cli, 'index.html');
+    const indexInject = getInjectServiceWorker(indexHtml);
+    expect(indexInject).to.equal(
+      '<script type="module" inject-service-worker="" src="/_merged_assets/scripts/registerServiceWorker.js"></script>',
+    );
+    expect(getServiceWorkerUrl(indexHtml)).to.equal('/service-worker.js');
+    const subHtml = await readStartOutput(cli, 'sub/index.html');
+    const subInject = getInjectServiceWorker(subHtml);
+    expect(subInject).to.equal(
+      '<script type="module" inject-service-worker="" src="/_merged_assets/scripts/registerServiceWorker.js"></script>',
+    );
+    expect(getServiceWorkerUrl(subHtml)).to.equal('/service-worker.js');
+  });
+
+  // TODO: find a way to run these test either by forcing pathPrefix in start or skipping asset gathering for build or ...
+  it.skip('will add a script to inject the service worker', async () => {
+    cli = await executeBuild('e2e-fixtures/service-worker/pathPrefix.rocket.config.js');
+    const indexHtml = await readStartOutput(cli, 'index.html');
+    const indexInject = getInjectServiceWorker(indexHtml);
+    expect(indexInject).to.equal(
+      '<script type="module" inject-service-worker="" src="/my-prefix-folder/_merged_assets/scripts/registerServiceWorker.js"></script>',
+    );
+    expect(getServiceWorkerUrl(indexHtml)).to.equal('/my-prefix-folder/service-worker.js');
+    const subHtml = await readStartOutput(cli, 'sub/index.html');
+    const subInject = getInjectServiceWorker(subHtml);
+    expect(subInject).to.equal(
+      '<script type="module" inject-service-worker="" src="/my-prefix-folder/_merged_assets/scripts/registerServiceWorker.js"></script>',
+    );
+    expect(getServiceWorkerUrl(subHtml)).to.equal('/my-prefix-folder/service-worker.js');
+  });
+});

packages/cli/test-node/e2e-fixtures/content/docs/image.md

@@ -0,0 +1,5 @@
+---
+layout: layout-raw
+---
+
+![My Image Alternative Text](./_assets/my-image.jpg 'My Image Description')

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)

packages/cli/test-node/e2e-fixtures/service-worker/docs/.eleventyignore

@@ -0,0 +1 @@
+**/*.njk

packages/cli/test-node/e2e-fixtures/service-worker/docs/_data/socialMediaImage.cjs

@@ -0,0 +1 @@
+module.exports = 'https://example.com';

packages/cli/test-node/e2e-fixtures/service-worker/docs/index.md

@@ -0,0 +1,5 @@
+---
+layout: layout-default
+---
+
+Content inside `docs/index.md`

packages/cli/test-node/e2e-fixtures/service-worker/docs/sub.md

@@ -0,0 +1,5 @@
+---
+layout: layout-default
+---
+
+Content inside `docs/sub.md`

packages/cli/test-node/e2e-fixtures/service-worker/pathPrefix.rocket.config.js

@@ -0,0 +1,6 @@
+/** @type {Partial<import("../../../types/main").RocketCliOptions>} */
+const config = {
+  pathPrefix: '/my-prefix-folder/',
+};
+
+export default config;

packages/cli/test-node/e2e-fixtures/service-worker/rocket.config.js

@@ -0,0 +1,3 @@
+/** @type {Partial<import("../../../types/main").RocketCliOptions>} */
+const config = {};
+export default config;

rocket.config.js

@@ -25,6 +25,7 @@ const config = {
     }),
   ],
   // serviceWorkerName: 'sw.js',
+  // pathPrefix: '/_site/',
 
   // emptyOutputDir: false,
 };