Merge pull request #191 from modernweb-dev/changeset-release/main

Version Packages

docs/_data/site.cjs

@@ -9,6 +9,11 @@ module.exports = async function () {
         name: 'GitHub',
         url: 'https://github.com/modernweb-dev/rocket',
       },
+      {
+        name: 'Slack',
+        url:
+          'https://join.slack.com/t/lit-and-friends/shared_invite/zt-llwznvsy-LZwT13R66gOgnrg12PUGqw',
+      },
     ],
     gitSiteUrl: 'https://github.com/modernweb-dev/rocket',
     gitBranch: 'main',

docs/_includes/_joiningBlocks/head/site.njk

@@ -1,11 +1,3 @@
-<link
-  href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap"
-  rel="stylesheet"
-/>
-<link
-  href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
-  rel="stylesheet"
-/>
 <meta name="twitter:creator" content="@modern_web_dev" />
 
 <link rel="stylesheet" href="{{ '/_assets/body.css' | asset | url }}" mdjs-use>

docs/docs/configuration/images.md

@@ -100,6 +100,82 @@ export default {
 };
 ```
 
+## Ignoring Images
+
+Files ending in `.svg` or that include `rocket-ignore.` will remain untouched.
+
+For example
+
+```md
+![Logo stays svg](logo.svg)
+![Ignore by file name](my-image.rocket-unresponsive.jpg)
+![My Image Alternative Text](my-image.jpeg)
+```
+
+becomes
+
+```html
+<img src="logo.svg" alt="Logo stays svg" rocket-image="responsive" />
+<img src="my-image.rocket-unresponsive.jpg" alt="Ignore by file name" rocket-image="responsive" />
+<picture>[...] </picture>
+```
+
+### Adjusting ignore function
+
+The default ignore function looks like this
+
+```js
+/**
+ * The default responsive ignore function will ignore files
+ * - ending in `.svg`
+ * - containing `rocket-unresponsive.`
+ *
+ * @param {object} opts
+ * @param {string} opts.src
+ * @param {string} opts.title
+ * @param {string} opts.alt
+ * @param {{name: string, value: string}[]} opts.attributes
+ * @returns {boolean}
+ */
+function ignore({ src }) {
+  return src.endsWith('svg') || src.includes('rocket-unresponsive.');
+}
+```
+
+and you can adjust it by setting it via the `imagePreset`.
+
+For this example we want to also ignore `.jpeg` files.
+
+👉 `rocket.config.js`
+
+```js
+export default {
+  imagePresets: {
+    responsive: {
+      // ...
+      ignore: ({ src }) =>
+        src.endsWith('.jpeg') || src.endsWith('svg') || src.includes('rocket-unresponsive.'),
+    },
+  },
+};
+```
+
+With that setting we get the following behavior
+
+```md
+![Logo stays svg](logo.svg)
+![Ignore by file name](my-image.rocket-unresponsive.jpg)
+![My Image Alternative Text](my-image.jpeg)
+```
+
+becomes
+
+```html
+<img src="logo.svg" alt="Logo stays svg" rocket-image="responsive" />
+<img src="my-image.rocket-unresponsive.jpg" alt="Ignore by file name" rocket-image="responsive" />
+<img src="my-image.jpeg" alt="My Image Alternative Text" rocket-image="responsive" />
+```
+
 ## Defining your own presets
 
 You can add your own image preset like so

docs/docs/configuration/overview.md

@@ -1,4 +1,4 @@
-# Configuration >> Overview ||10
+# Configuration >> Overview || 10
 
 The configuration file is `rocket.config.js` or `rocket.config.mjs`.
 
@@ -86,3 +86,15 @@ const config = {
 
 export default config;
 ```
+
+## Lifecycle
+
+You can hook into the rocket lifecycle by specifying a function for `before11ty`. This function runs before 11ty calls it's write method. If it is an async function, Rocket will await it's promise.
+
+```js
+export default {
+  async before11ty() {
+    await copyDataFiles();
+  },
+};
+```

docs/docs/markdown-javascript/overview.md

@@ -1,5 +1,11 @@
 # Markdown JavaScript >> Overview || 10
 
+```js script
+import '@mdjs/mdjs-story/define';
+import '@mdjs/mdjs-preview/define';
+import { html } from '@mdjs/mdjs-story';
+```
+
 Markdown JavaScript (mdjs) is a format that allows you to use JavaScript with Markdown, to create interactive demos. It does so by "annotating" JavaScript that should be executed in Markdown.
 
 To annotate we use a code block with `js script`.
@@ -63,13 +69,6 @@ import '@mdjs/mdjs-preview/define';
 
 Once loaded you can use them like so:
 
-````md
-```js script
-import '@mdjs/mdjs-story/define';
-import '@mdjs/mdjs-preview/define';
-```
-````
-
 ### Story
 
 The code snippet will actually get executed at that place and you will have a live demo
@@ -117,12 +116,6 @@ export const JsPreviewStory = () => html` <demo-wc-card>JS Preview Story</demo-w
 
 Here is a live example from [demo-wc-card](https://www.npmjs.com/package/demo-wc-card).
 
-```js script
-import '@mdjs/mdjs-story/define';
-import '@mdjs/mdjs-preview/define';
-import { html } from 'lit-html';
-```
-
 ```js preview-story
 import 'demo-wc-card/demo-wc-card.js';
 export const header = () => {

docs/docs/markdown-javascript/preview.md

@@ -17,7 +17,7 @@ You can showcase live running code by annotating a code block with `js preview-s
 - Settings can be remembered for other pages / return visits
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@mdjs/mdjs-preview';
 import './assets/demo-element.js';
 ```
 
@@ -25,7 +25,7 @@ import './assets/demo-element.js';
 
 ````md
 ```js script
-import { html } from 'lit-html';
+import { html } from '@mdjs/mdjs-preview';
 import './assets/demo-element.js';
 ```
 

docs/docs/markdown-javascript/story.md

@@ -3,12 +3,12 @@
 You can showcase live running code by annotating a code block with `js story`.
 
 ```js script
-import { html } from 'lit-html';
+import { html } from '@mdjs/mdjs-story';
 ```
 
 ````md
 ```js script
-import { html } from 'lit-html';
+import { html } from '@mdjs/mdjs-story';
 ```
 
 ```js story

docs/guides/configuration/getting-started.md

@@ -20,7 +20,7 @@ The Plugins Manager helps you register and execute your plugins across the vario
 
 ## Adding Remark/Unified Plugins
 
-If you want to a plugin to the Markdown processing you can use `setupUnifiedPlugins`.
+If you want to add a plugin to the Markdown processing you can use `setupUnifiedPlugins`.
 
 ```js
 import emoji from 'remark-emoji';

docs/guides/go-live/overview.md

@@ -9,7 +9,7 @@ Many servers are configured to handle this automatically and to serve a 404.html
 
 The [Rocket Launch preset](../../docs/presets/launch.md) ships a default 404 template you can use.
 
-To enable it, you need to create a 404.md and use the 404 layout.
+To enable it, you need to create a `404.md` and use the 404 layout.
 
 👉 `docs/404.md`
 
@@ -20,6 +20,10 @@ permalink: 404.html
 ---
 ```
 
+This results in a `404.html` page, which will do nothing by itself. But many hosting services like netlify or firebase, for example will redirect 404s to this `404.html` by default.
+
+If the hosting provider doesn't already do this, then you may be able to accomplish it via some settings for example by using a `.htaccess` file in case of an apache server.
+
 ## Add a Sitemap
 
 A sitemap can be used to inform search engines or services about the pages your site has.

docs/guides/presets/options.md

@@ -0,0 +1,11 @@
+# Presets >> Create your own > Options || 10
+
+Your preset can hook into the rocket lifecycle by specifying a function for `before11ty`. This function runs before 11ty calls it's write method. If it is an async function, Rocket will await it's promise.
+
+```js
+export default {
+  async before11ty() {
+    await copyDataFiles();
+  },
+};
+```

docs/guides/presets/using-templates.md

@@ -37,6 +37,14 @@ If you look into `docs/_merged_includes/_joiningBlocks/bottom/` you will see a f
 - `190-google-analytics.njk`
 - `my-script.njk`
 
+<inline-notification type="tip">
+
+File names without an order/number in front are considered with the order number `10 000` so the generally end up at the bottom. If you need something even below unordered items you can use numbers that are greater then `10 000`.
+
+_Note: For unordered files there is no guarantee of any order._
+
+</inline-notification>
+
 ## Controlling the order
 
 In the html `<head>` order is usually not that important but when adding script it does.
@@ -57,3 +65,7 @@ which brings the order to
 ## More information
 
 For more details please see the [Joining Blocks Docs](../../docs/presets/joining-blocks.md)
+
+```js script
+import '@rocket/launch/inline-notification/inline-notification.js';
+```

package.json

@@ -45,7 +45,7 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.12.0",
-    "@open-wc/testing": "^2.5.32",
+    "@open-wc/testing": "^3.0.0-next.1",
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-typescript": "^8.1.0",
@@ -82,7 +82,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "sinon": "^9.2.3",
     "ts-node": "^9.1.1",
-    "typescript": "^4.1.3"
+    "typescript": "^4.3.2"
   },
   "eslintConfig": {
     "parser": "@typescript-eslint/parser",

packages/blog/package.json

@@ -38,6 +38,6 @@
     "testing"
   ],
   "dependencies": {
-    "plugins-manager": "^0.2.1"
+    "plugins-manager": "^0.2.2"
   }
 }

packages/building-rollup/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @rocket/building-rollup
 
+## 0.3.1
+
+### Patch Changes
+
+- 60e85a1: Support `picture` tags by handling `source` tags with `srcset` attributes in the rollup asset gathering build phase.
+
 ## 0.3.0
 
 ### Minor Changes

packages/building-rollup/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket/building-rollup",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "publishConfig": {
     "access": "public"
   },
@@ -56,7 +56,7 @@
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-node-resolve": "^11.0.1",
     "@rollup/plugin-replace": "^2.4.2",
-    "@web/rollup-plugin-html": "^1.6.0",
+    "@web/rollup-plugin-html": "^1.8.0",
     "@web/rollup-plugin-import-meta-assets": "^1.0.4",
     "@web/rollup-plugin-polyfills-loader": "^1.1.0",
     "browserslist": "^4.16.1",

packages/check-html-links/CHANGELOG.md

@@ -1,5 +1,31 @@
 # check-html-links
 
+## 0.2.3
+
+### Patch Changes
+
+- 5043429: Ignore `<a href="tel:9999">` links
+- f08f926: Add missing `slash` dependency
+- a0e8edf: Ignore links containing not http schema urls like `sketch://`, `vscode://`, ...
+
+  ```html
+  <a href="sketch://add-library?url=https%3A%2F%2Fmyexample.com%2Fdesign%2Fui-kit.xml"></a>
+  <a href="vscode://file/c:/myProject/package.json:5:10"></a>
+  ```
+
+- 1949b1e: Ignore plain and html encoded mailto links
+
+  ```html
+  <!-- source -->
+  <a href="mailto:address@example.com">contact</a>
+
+  <!-- html encoded -->
+  <a
+    href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#97;&#100;&#100;&#114;&#101;&#115;&#115;&#64;&#101;&#120;&#97;&#109;&#112;&#108;&#101;&#46;&#99;&#111;&#109;"
+    >contact</a
+  >
+  ```
+
 ## 0.2.2
 
 ### Patch Changes

packages/check-html-links/package.json

@@ -1,6 +1,6 @@
 {
   "name": "check-html-links",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "publishConfig": {
     "access": "public"
   },
@@ -37,7 +37,8 @@
     "command-line-args": "^5.1.1",
     "glob": "^7.0.0",
     "minimatch": "^3.0.4",
-    "sax-wasm": "^2.0.0"
+    "sax-wasm": "^2.0.0",
+    "slash": "^3.0.0"
   },
   "devDependencies": {
     "@types/glob": "^7.0.0"

packages/check-html-links/src/validateFolder.js

@@ -182,6 +182,18 @@ function getValueAndAnchor(inValue) {
   };
 }
 
+/**
+ * @param {string} url
+ * @returns {boolean}
+ */
+function isNonHttpSchema(url) {
+  const found = url.match(/([a-z]+):/);
+  if (found) {
+    return found.length > 0;
+  }
+  return false;
+}
+
 /**
  *
  * @param {Link[]} links
@@ -207,8 +219,13 @@ async function resolveLinks(links, { htmlFilePath, rootDir, ignoreUsage }) {
 
     if (ignoreUsage(value)) {
       // ignore
-    } else if (value.includes('mailto:')) {
+    } else if (
+      value.startsWith('mailto:') ||
+      value.startsWith('mailto:') // = "mailto:" but html encoded
+    ) {
       // ignore for now - could add a check to validate if the email address is valid
+    } else if (value.startsWith('tel:')) {
+      // ignore for now - could add a check to validate if the phone number is valid
     } else if (valueFile === '' && anchor !== '') {
       addLocalFile(htmlFilePath, anchor, usageObj);
     } else if (value.startsWith('//') || value.startsWith('http')) {
@@ -219,6 +236,8 @@ async function resolveLinks(links, { htmlFilePath, rootDir, ignoreUsage }) {
       addLocalFile(filePath, anchor, usageObj);
     } else if (value === '' && anchor === '') {
       // no need to check it
+    } else if (isNonHttpSchema(value)) {
+      // not a schema we handle
     } else {
       const filePath = path.join(path.dirname(htmlFilePath), valueFile);
       addLocalFile(filePath, anchor, usageObj);

packages/check-html-links/test-node/fixtures/mailto/index.html

@@ -1 +1,3 @@
 <a href="mailto:foo@bar.com"></a>
+<!-- encoded mailto links -->
+<a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#97;&#100;&#100;&#114;&#101;&#115;&#115;&#64;&#101;&#120;&#97;&#109;&#112;&#108;&#101;&#46;&#99;&#111;&#109;"></a>

packages/check-html-links/test-node/fixtures/not-http-schema/index.html

@@ -0,0 +1,2 @@
+<a href="sketch://add-library?url=https%3A%2F%2Fmyexample.com%2Fdesign%2Fui-kit.xml"></a>
+<a href="vscode://file/c:/myProject/package.json:5:10"></a>

packages/check-html-links/test-node/fixtures/tel/index.html

@@ -0,0 +1 @@
+<a href="tel:99999"></a>

packages/check-html-links/test-node/validateFolder.test.js

@@ -183,6 +183,16 @@ describe('validateFolder', () => {
     expect(cleanup(errors)).to.deep.equal([]);
   });
 
+  it('ignores tel links', async () => {
+    const { errors, cleanup } = await execute('fixtures/tel');
+    expect(cleanup(errors)).to.deep.equal([]);
+  });
+
+  it('ignore not http schema urls', async () => {
+    const { errors, cleanup } = await execute('fixtures/not-http-schema');
+    expect(cleanup(errors)).to.deep.equal([]);
+  });
+
   it('ignoring a folder', async () => {
     const { errors, cleanup } = await execute('fixtures/internal-link-ignore', {
       ignoreLinkPatterns: ['./relative/*', './relative/**/*'],

packages/cli/CHANGELOG.md

@@ -1,5 +1,90 @@
 # @rocket/cli
 
+## 0.9.6
+
+### Patch Changes
+
+- bf99541: Adjust copy logic to
+
+  1. for `_assets/_static` copy over everything
+  2. for all other paths copy over everything except `*.html` and `*.md`
+
+- 579e8e7: Unordered joiningBlocks are now considered with the order number `10 000` and will generally be at the bottom.
+  You can use numbers `> 10 000` to place files even after unordered joiningBlocks.
+
+## 0.9.5
+
+### Patch Changes
+
+- 1b9559f: Adds `before11ty` hook to config and presets
+
+## 0.9.4
+
+### Patch Changes
+
+- 2b5c61d: Allow configuring the imagePreset ignore rules via the option `ignore`
+
+  ```js
+  export default {
+    imagePresets: {
+      responsive: {
+        // ...
+        ignore: ({ src }) =>
+          src.endsWith('.jpeg') || src.endsWith('svg') || src.includes('rocket-unresponsive.'),
+      },
+    },
+  };
+  ```
+
+- 2b5c61d: Do not generate responsive images for files ending in `.svg` or that include `rocket-ignore.`
+- ce0b00e: don't transform external images
+- 3b1a0cf: Allow to configure check-html-links
+
+  ```js
+  export default {
+    checkLinks: {
+      /* ... */
+    },
+  };
+  ```
+
+## 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
+
+- eae2007: Update to mdjs version that uses lit 2 and renders stories to light dom
+
+### Patch Changes
+
+- Updated dependencies [eae2007]
+  - @rocket/eleventy-plugin-mdjs-unified@0.5.0
+
+## 0.8.2
+
+### Patch Changes
+
+- 60e85a1: Support `picture` tags by handling `source` tags with `srcset` attributes in the rollup asset gathering build phase.
+- Updated dependencies [60e85a1]
+  - @rocket/building-rollup@0.3.1
+
 ## 0.8.1
 
 ### Patch Changes

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket/cli",
-  "version": "0.8.1",
+  "version": "0.9.6",
   "publishConfig": {
     "access": "public"
   },
@@ -57,9 +57,9 @@
   "dependencies": {
     "@11ty/eleventy": "^0.11.1",
     "@11ty/eleventy-img": "^0.9.0",
-    "@rocket/building-rollup": "^0.3.0",
+    "@rocket/building-rollup": "^0.3.1",
     "@rocket/core": "^0.1.2",
-    "@rocket/eleventy-plugin-mdjs-unified": "^0.4.1",
+    "@rocket/eleventy-plugin-mdjs-unified": "^0.5.0",
     "@rocket/eleventy-rocket-nav": "^0.3.0",
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-node-resolve": "^11.0.1",
@@ -67,12 +67,12 @@
     "@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",
     "micromatch": "^4.0.2",
-    "plugins-manager": "^0.2.1",
+    "plugins-manager": "^0.2.2",
     "slash": "^3.0.0",
     "utf8": "^3.0.0",
     "workbox-window": "^6.1.5"

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/preset/_includes/layout-simulator.njk

@@ -11,7 +11,7 @@
       }
     </style>
     <script type="module">
-      import { render } from 'lit-html';
+      import { render } from '@mdjs/mdjs-story';
 
       async function onHashChange() {
         const urlParts = new URLSearchParams(document.location.hash.substr(1));

packages/cli/src/RocketBuild.js

@@ -29,7 +29,7 @@ async function productionBuild(config) {
       name: 'copy',
       plugin: copy,
       options: {
-        patterns: ['!(*.md|*.html)*', '_merged_assets/_static/**/*.{png,gif,jpg,json,css,svg,ico}'],
+        patterns: ['!(*.md|*.html)*', '_merged_assets/_static/**/*'],
         rootDir: config.outputDevDir,
       },
     }),

packages/cli/src/RocketCli.js

@@ -31,6 +31,7 @@ export class RocketEleventy extends Eleventy {
 
   async write() {
     await this.__rocketCli.mergePresets();
+    for (const fn of this.__rocketCli.config.__before11tyFunctions) await fn();
     await super.write();
     await this.__rocketCli.update();
   }
@@ -120,7 +121,7 @@ export class RocketCli {
     for (const folder of ['_assets', '_data', '_includes']) {
       const to = path.join(this.config._inputDirCwdRelative, `_merged${folder}`);
       await fs.emptyDir(to);
-      for (const sourceDir of this.config._presetPathes) {
+      for (const sourceDir of this.config._presetPaths) {
         const from = path.join(sourceDir, folder);
         if (fs.existsSync(from)) {
           if (folder === '_includes') {

packages/cli/src/RocketLint.js

@@ -50,6 +50,7 @@ export class RocketLint {
 
     const checkLinks = new CheckHtmlLinksCli();
     checkLinks.setOptions({
+      ...this.config.checkLinks,
       rootDir: this.config.lintInputDir,
       printOnError: false,
       continueOnError: true,

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');
 
@@ -82,10 +83,20 @@ function getAttributes(data) {
 //   return classString ? classString.split(' ') : [];
 // }
 
+/**
+ *
+ * @param src {string} image src attribute value.
+ * @returns {boolean} true if src starts with https://, http:// or //
+ */
+
+function isExternalSrc(src) {
+  return /^(?:https?:)?\/\//.test(src);
+}
+
 /**
  * @param {string} html
  */
-function getImages(html) {
+function getImages(html, { imagePresets }) {
   /** @type {Heading[]} */
   const images = [];
   parser.eventHandler = (ev, _data) => {
@@ -99,16 +110,26 @@ function getImages(html) {
         const src = getAttribute(data, 'src');
         const title = getAttribute(data, 'title');
         const alt = getAttribute(data, 'alt');
+
         if (presetName) {
-          images.push({
+          const presetSettings = imagePresets[presetName];
-            presetName,
+          if (!presetSettings) {
-            attributes,
+            throw new Error(`Could not find imagePresets: { ${presetName}: {} }`);
-            src,
+          }
-            title,
+          const { ignore } = presetSettings;
-            alt,
+          const ignoreFn = typeof ignore === 'function' ? ignore : () => false;
-            openStart,
+
-            closeEnd,
+          if (!isExternalSrc(src) && !ignoreFn({ src, title, alt, attributes })) {
-          });
+            images.push({
+              presetName,
+              attributes,
+              src,
+              title,
+              alt,
+              openStart,
+              closeEnd,
+            });
+          }
         }
       }
     }
@@ -140,7 +161,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 +215,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,
@@ -231,7 +252,7 @@ async function insertResponsiveImages(html) {
     imagePresets: config.imagePresets,
   };
 
-  let images = getImages(html);
+  let images = getImages(html, options);
   images = resolveFilePath(images, options);
   images = await responsiveImages(images, options);
   const newHtml = updateHtml(html, images);

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

@@ -1,6 +1,10 @@
 const rocketCopy = {
-  configFunction: (eleventyConfig, { _inputDirCwdRelative, filesExtensionsToCopy }) => {
+  configFunction: (eleventyConfig, { _inputDirCwdRelative }) => {
-    eleventyConfig.addPassthroughCopy(`${_inputDirCwdRelative}/**/*.{${filesExtensionsToCopy}}`);
+    eleventyConfig.addPassthroughCopy(`${_inputDirCwdRelative}/!(*.md|*.html)*`);
+    eleventyConfig.addPassthroughCopy(
+      `${_inputDirCwdRelative}/!(_includes|_data|_assets|_merged_data|_merged_includes)*/**/!(*.md|*.html)*`,
+    );
+    eleventyConfig.addPassthroughCopy(`${_inputDirCwdRelative}/_merged_assets/_static/**/*`);
   },
 };
 

packages/cli/src/normalizeConfig.js

@@ -5,6 +5,7 @@
 /** @typedef {import('@web/dev-server').DevServerConfig} DevServerConfig */
 
 /** @typedef {import('../types/main').RocketCliOptions} RocketCliOptions */
+/** @typedef {import('../types/main').ImagePreset} ImagePreset */
 /** @typedef {import('../types/main').RocketPlugin} RocketPlugin */
 
 import path from 'path';
@@ -19,9 +20,25 @@ import { fileURLToPath } from 'url';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
+/**
+ * The default responsive ignore function will ignore files
+ * - ending in `.svg`
+ * - containing `rocket-unresponsive.`
+ *
+ * @param {object} opts
+ * @param {string} opts.src
+ * @param {string} opts.title
+ * @param {string} opts.alt
+ * @param {{name: string, value: string}[]} opts.attributes
+ * @returns {boolean}
+ */
+function ignore({ src }) {
+  return src.endsWith('svg') || src.includes('rocket-unresponsive.');
+}
+
 /**
  * @param {Partial<RocketCliOptions>} inConfig
- * @returns {Promise<RocketCliOptions>}
+ * @returns {Promise<RocketCliOptions & { __before11tyFunctions: RocketCliOptions['before11ty'][] }>}
  */
 export async function normalizeConfig(inConfig) {
   let config = {
@@ -45,11 +62,17 @@ export async function normalizeConfig(inConfig) {
     devServer: {},
 
     ...inConfig,
+
+    /** @type{RocketCliOptions['before11ty'][]} */
+    __before11tyFunctions: [],
+
+    /** @type{{[key: string]: ImagePreset}} */
     imagePresets: {
       responsive: {
         widths: [600, 900, 1640],
         formats: ['avif', 'jpeg'],
         sizes: '100vw',
+        ignore,
       },
     },
   };
@@ -104,9 +127,9 @@ export async function normalizeConfig(inConfig) {
   const _inputDirCwdRelative = path.join(_configDirCwdRelative, config.inputDir);
 
   // cli core preset is always first
-  config._presetPathes = [path.join(__dirname, '..', 'preset')];
+  config._presetPaths = [path.join(__dirname, '..', 'preset')];
   for (const preset of config.presets) {
-    config._presetPathes.push(preset.path);
+    config._presetPaths.push(preset.path);
 
     if (preset.adjustImagePresets) {
       config.imagePresets = preset.adjustImagePresets(config.imagePresets);
@@ -142,9 +165,13 @@ export async function normalizeConfig(inConfig) {
     if (preset.setupCliPlugins) {
       config.setupCliPlugins = [...config.setupCliPlugins, ...preset.setupCliPlugins];
     }
+
+    if (typeof preset.before11ty === 'function') {
+      config.__before11tyFunctions.push(preset.before11ty);
+    }
   }
   // add "local" preset
-  config._presetPathes.push(path.resolve(_inputDirCwdRelative));
+  config._presetPaths.push(path.resolve(_inputDirCwdRelative));
 
   /** @type {MetaPlugin[]} */
   let pluginsMeta = [
@@ -169,6 +196,10 @@ export async function normalizeConfig(inConfig) {
     plugins.push(pluginInst);
   }
 
+  if (typeof config.before11ty === 'function') {
+    config.__before11tyFunctions.push(config.before11ty);
+  }
+
   // TODO: check pathPrefix to NOT have a '/' at the end as it will mean it may get ignored by 11ty 🤷‍♂️
 
   return {

packages/cli/src/public/generateEleventyComputed.cjs

@@ -106,7 +106,7 @@ function socialMediaImagePlugin(args = {}) {
   };
 }
 
-function sortyByOrder(a, b) {
+function sortByOrder(a, b) {
   if (a.order > b.order) {
     return 1;
   }
@@ -127,20 +127,20 @@ async function dirToTree(sourcePath, extra = '') {
     if (entry.isDirectory()) {
       const value = await dirToTree(sourcePath, relativePath);
       unsortedEntries.push({
-        order: matches && matches.length > 0 ? parseInt(matches[1]) : 0,
+        order: matches && matches.length > 0 ? parseInt(matches[1]) : 10000,
         name: entry.name,
         value,
       });
     } else {
       unsortedEntries.push({
-        order: matches && matches.length > 0 ? parseInt(matches[1]) : 0,
+        order: matches && matches.length > 0 ? parseInt(matches[1]) : 10000,
         name: entry.name,
         value: relativePath,
       });
     }
   }
   const sortedTree = {};
-  for (const unsortedEntry of unsortedEntries.sort(sortyByOrder)) {
+  for (const unsortedEntry of unsortedEntries.sort(sortByOrder)) {
     sortedTree[unsortedEntry.name] = unsortedEntry.value;
   }
   return sortedTree;

packages/cli/src/shared/.eleventy.cjs

@@ -30,10 +30,7 @@ module.exports = function (eleventyConfig) {
     {
       name: 'rocket-copy',
       plugin: rocketCopy,
-      options: {
+      options: { _inputDirCwdRelative },
-        _inputDirCwdRelative,
-        filesExtensionsToCopy: 'png,gif,jpg,jpeg,svg,css,xml,json,js',
-      },
     },
     {
       name: 'eleventy-plugin-mdjs-unified',

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"',
@@ -53,51 +56,134 @@ describe('RocketCli images', () => {
           '</p>',
         ].join('\n'),
       );
-    });
 
-    it('renders multiple images in the correct order', async () => {
+      const keepSvgHtml = await readStartOutput(cli, 'ignores/index.html', {
-      cli = await executeStart('e2e-fixtures/images/rocket.config.js');
+        formatHtml: true,
-      const indexHtml = await readStartOutput(cli, 'two-images/index.html', { formatHtml: true });
+        replaceImageHashes: true,
-      expect(indexHtml).to.equal(
+      });
+
+      // ignores src="[...].svg" and src="[...]rocket-unresponsive.[...]"
+      expect(keepSvgHtml).to.equal(
         [
+          '<p>Ignore SVG</p>',
+          '<p><img src="../_assets/logo.svg" alt="Logo stays svg" rocket-image="responsive" /></p>',
+          '<p>Ignore if contains <code>rocket-unresponsive.</code></p>',
+          '<p>',
+          '  <img',
+          '    src="../_assets/my-image.rocket-unresponsive.jpg"',
+          '    alt="Logo stays svg"',
+          '    rocket-image="responsive"',
+          '  />',
+          '</p>',
+          '<p>Responsive</p>',
           '<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"',
+          '      alt="My Image Alternative Text"',
           '      rocket-image="responsive"',
-          '      src="/images/d67643ad-600.jpeg"',
+          '      src="/images/__HASH__-600.jpeg"',
           '      width="600"',
           '      height="316"',
           '      loading="lazy"',
           '      decoding="async"',
           '    />',
           '  </picture>',
-          '',
+          '</p>',
+        ].join('\n'),
+      );
+    });
+
+    it('can configure more patterns to ignore', async () => {
+      cli = await executeStart('e2e-fixtures/images/ignore-more.rocket.config.js');
+      const keepSvgHtml = await readStartOutput(cli, 'ignores/index.html', {
+        formatHtml: true,
+        replaceImageHashes: true,
+      });
+
+      // ignores src="[...].svg" and src="[...]rocket-unresponsive.[...]"
+      expect(keepSvgHtml).to.equal(
+        [
+          '<p>Ignore SVG</p>',
+          '<p><img src="../_assets/logo.svg" alt="Logo stays svg" rocket-image="responsive" /></p>',
+          '<p>Ignore if contains <code>rocket-unresponsive.</code></p>',
+          '<p>',
+          '  <img',
+          '    src="../_assets/my-image.rocket-unresponsive.jpg"',
+          '    alt="Logo stays svg"',
+          '    rocket-image="responsive"',
+          '  />',
+          '</p>',
+          '<p>Responsive</p>',
+          '<p>',
+          '  <img src="../_assets/my-image.jpeg" alt="My Image Alternative Text" rocket-image="responsive" />',
+          '</p>',
+        ].join('\n'),
+      );
+    });
+
+    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,
+        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/__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/__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="two"',
           '      rocket-image="responsive"',
-          '      src="/images/d67643ad-600.jpeg"',
+          '      src="/images/__HASH__-600.jpeg"',
           '      width="600"',
           '      height="316"',
           '      loading="lazy"',
@@ -111,7 +197,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 +208,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 +235,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 +270,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"',
+          '    src="/images/__HASH__-30.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"',
           '    width="30"',
           '    height="15"',

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

@@ -29,7 +29,13 @@ describe('RocketCli mergeTemplates', () => {
 
     const indexHtml = await readStartOutput(cli, 'index.html');
     expect(trimWhiteSpace(indexHtml)).to.equal(
-      ['<p>first</p>', '<p>second</p>', '<p>30-third</p>', '<p>100-last</p>'].join('\n'),
+      [
+        '<p>30-first</p>',
+        '<p>100-second</p>',
+        '<p>bar-third</p>',
+        '<p>foo-fourth</p>',
+        '<p>10100-last</p>',
+      ].join('\n'),
     );
   });
 

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"',
+        '    src="/images/__HASH__-30.jpeg"',
-        '    srcset="/images/1f847765-30.jpeg 30w, /images/1f847765-60.jpeg 60w"',
+        '    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('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/_assets/logo.svg

@@ -0,0 +1,33 @@
+<svg fill="#e63946" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 511.998 511.998" xml:space="preserve">
+   <g>
+  <path d="M98.649,430.256c-46.365,28.67-71.17,30.939-78.916,23.51c-7.75-7.433-6.519-32.307,20.182-79.832
+    c24.953-44.412,65.374-96.693,113.818-147.211l-11.279-10.817C93.124,267.348,51.871,320.751,26.291,366.279
+    c-19.228,34.22-37.848,79.134-17.375,98.766c5.84,5.6,13.599,7.935,22.484,7.935c22.269,0,51.606-14.677,75.469-29.432
+    c44.416-27.464,96.044-70.919,145.373-122.362l-11.279-10.817C192.517,360.888,141.976,403.464,98.649,430.256z"/>
+
+    <rect x="238.112" y="272.64" transform="matrix(-0.7218 -0.6921 0.6921 -0.7218 237.9094 656.5383)" width="25.589" height="15.628"/>
+
+    <rect x="268.895" y="302.163" transform="matrix(-0.7218 -0.6921 0.6921 -0.7218 270.4774 728.6761)" width="25.589" height="15.628"/>
+
+    <rect x="232.827" y="268.929" transform="matrix(-0.7218 -0.6921 0.6921 -0.7218 297.4719 673.0591)" width="102.364" height="15.628"/>
+  <path d="M500.916,41.287c-7.769,1.59-76.412,16.062-93.897,34.294l-50.728,52.899l-114.703-3.629l-39.198,40.876l79.28,40.569
+    l-21.755,22.687l72.848,69.858l21.755-22.687l43.857,77.51l39.197-40.876l-8.433-114.451l50.727-52.899
+    c17.485-18.234,29.067-87.422,30.331-95.251l1.801-11.169L500.916,41.287z M228.209,161.383l19.842-20.692l93.688,2.964
+    l-48.775,50.864L228.209,161.383z M401.632,327.686l-35.822-63.308l48.776-50.865l6.886,93.482L401.632,327.686z
+      M332.298,276.743l-50.287-48.223L412.89,92.037l50.288,48.223L332.298,276.743z M473.009,128.036l-48.316-46.334
+    c14.54-8.427,44.787-17.217,68.076-22.632C488.336,82.567,480.82,113.155,473.009,128.036z"/>
+
+    <rect x="302.369" y="231.988" transform="matrix(-0.7218 -0.6921 0.6921 -0.7218 384.0262 633.9694)" width="34.12" height="15.628"/>
+
+    <rect x="411.311" y="127.35" transform="matrix(-0.6921 0.7218 -0.7218 -0.6921 807.9747 -74.331)" width="17.061" height="15.628"/>
+
+    <rect x="394.288" y="145.087" transform="matrix(-0.7218 -0.6921 0.6921 -0.7218 586.0206 542.7934)" width="15.628" height="17.06"/>
+
+    <rect x="376.571" y="163.565" transform="matrix(-0.7218 -0.6921 0.6921 -0.7218 542.7271 562.3462)" width="15.628" height="17.06"/>
+
+    <rect x="161.111" y="185.158" transform="matrix(0.7071 0.7071 -0.7071 0.7071 192.1943 -60.3323)" width="15.628" height="33.35"/>
+
+    <rect x="184.683" y="172.695" transform="matrix(0.707 0.7072 -0.7072 0.707 182.4625 -83.9076)" width="15.628" height="11.118"/>
+    </g>
+</svg>

packages/cli/test-node/e2e-fixtures/images/docs/ignores.md

@@ -0,0 +1,15 @@
+---
+layout: layout-raw
+---
+
+Ignore SVG
+
+![Logo stays svg](./_assets/logo.svg)
+
+Ignore if contains `rocket-unresponsive.`
+
+![Logo stays svg](./_assets/my-image.rocket-unresponsive.jpg)
+
+Responsive
+
+![My Image Alternative Text](./_assets/my-image.jpeg)

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/images/ignore-more.rocket.config.js

@@ -0,0 +1,10 @@
+/** @type {Partial<import("../../../types/main").RocketCliOptions>} */
+const config = {
+  imagePresets: {
+    responsive: {
+      ignore: ({ src }) =>
+        src.endsWith('.jpeg') || src.endsWith('svg') || src.includes('rocket-unresponsive.'),
+    },
+  },
+};
+export default config;

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;

packages/cli/test-node/merge-templates-fixtures/order/docs/_includes/_joiningBlocks/layout/100-last.njk

@@ -1 +0,0 @@
-<p>100-last</p>

packages/cli/test-node/merge-templates-fixtures/order/docs/_includes/_joiningBlocks/layout/100-second.njk

@@ -0,0 +1 @@
+<p>100-second</p>

packages/cli/test-node/merge-templates-fixtures/order/docs/_includes/_joiningBlocks/layout/10100-last.njk

@@ -0,0 +1 @@
+<p>10100-last</p>

packages/cli/test-node/merge-templates-fixtures/order/docs/_includes/_joiningBlocks/layout/30-first.njk

@@ -0,0 +1 @@
+<p>30-first</p>

packages/cli/test-node/merge-templates-fixtures/order/docs/_includes/_joiningBlocks/layout/30-third.njk

@@ -1 +0,0 @@
-<p>30-third</p>

packages/cli/test-node/merge-templates-fixtures/order/docs/_includes/_joiningBlocks/layout/bar-third.njk

@@ -0,0 +1 @@
+<p>bar-third</p>

packages/cli/test-node/merge-templates-fixtures/order/docs/_includes/_joiningBlocks/layout/first.njk

@@ -1 +0,0 @@
-<p>first</p>

packages/cli/test-node/merge-templates-fixtures/order/docs/_includes/_joiningBlocks/layout/foo-fourth.njk

@@ -0,0 +1 @@
+<p>foo-fourth</p>

packages/cli/test-node/merge-templates-fixtures/order/docs/_includes/_joiningBlocks/layout/second.njk

@@ -1 +0,0 @@
-<p>second</p>

packages/cli/test-node/normalizeConfig.test.js

@@ -10,9 +10,10 @@ function cleanup(config) {
   const configNoPaths = { ...config };
   delete configNoPaths._inputDirCwdRelative;
   delete configNoPaths.configFile;
-  delete configNoPaths._presetPathes;
+  delete configNoPaths._presetPaths;
   delete configNoPaths.eleventy;
   delete configNoPaths.outputDevDir;
+  delete configNoPaths.imagePresets.responsive.ignore;
   return configNoPaths;
 }
 
@@ -23,11 +24,12 @@ describe('normalizeConfig', () => {
 
     // testing pathes is always a little more complicted 😅
     expect(config._inputDirCwdRelative).to.match(/empty\/docs$/);
-    expect(config._presetPathes[0]).to.match(/cli\/preset$/);
+    expect(config._presetPaths[0]).to.match(/cli\/preset$/);
-    expect(config._presetPathes[1]).to.match(/empty\/docs$/);
+    expect(config._presetPaths[1]).to.match(/empty\/docs$/);
     expect(config.outputDevDir).to.match(/_site-dev$/);
 
     expect(cleanup(config)).to.deep.equal({
+      __before11tyFunctions: [],
       command: 'help',
       createSocialMediaImages: true,
       devServer: {},
@@ -69,6 +71,7 @@ describe('normalizeConfig', () => {
     });
 
     expect(cleanup(config)).to.deep.equal({
+      __before11tyFunctions: [],
       command: 'help',
       createSocialMediaImages: true,
       devServer: {
@@ -109,6 +112,7 @@ describe('normalizeConfig', () => {
     });
 
     expect(cleanup(config)).to.deep.equal({
+      __before11tyFunctions: [],
       command: 'help',
       createSocialMediaImages: true,
       devServer: {
@@ -154,6 +158,7 @@ describe('normalizeConfig', () => {
     });
 
     expect(cleanup(config)).to.deep.equal({
+      __before11tyFunctions: [],
       command: 'help',
       createSocialMediaImages: true,
       devServer: {},

packages/cli/types/main.d.ts

@@ -1,23 +1,28 @@
 import { DevServerConfig } from '@web/dev-server';
+import { CheckHtmlLinksCliOptions } from 'check-html-links/dist-types/types/main';
 
 export interface RocketPreset {
   path: string;
 
+  adjustImagePresets?: (preset: { [key: string]: ImagePreset }) => { [key: string]: ImagePreset };
+
+  before11ty?: () => void | Promise<void>;
+
   // TODO: improve all setup functions
   setupUnifiedPlugins?: function[];
-  setupDevAndBuildPlugins: function[];
+  setupDevAndBuildPlugins?: function[];
-  setupBuildPlugins: function[];
+  setupBuildPlugins?: function[];
-  setupDevPlugins: function[];
+  setupDevPlugins?: function[];
-  setupCliPlugins: function[];
+  setupCliPlugins?: function[];
-  setupEleventyPlugins: function[];
+  setupEleventyPlugins?: function[];
-  setupEleventyComputedConfig: function[];
+  setupEleventyComputedConfig?: function[];
 }
 
 interface RocketStartConfig {
   createSocialMediaImages?: boolean;
 }
 
-type ImageFormat = 'avif' | 'webp' | 'jpg' | 'png' | 'svg';
+type ImageFormat = 'avif' | 'webp' | 'jpg' | 'jpeg' | 'png' | 'svg';
 
 interface ImagePreset {
   widths: number[];
@@ -26,44 +31,49 @@ interface ImagePreset {
 }
 
 export interface RocketCliOptions {
-  presets: Array<RocketPreset>;
+  presets?: Array<RocketPreset>;
   pathPrefix?: string;
   serviceWorkerName?: string;
-  inputDir: string;
+  inputDir?: string;
-  outputDir: string;
+  outputDir?: string;
   emptyOutputDir?: boolean;
   absoluteBaseUrl?: string;
-  watch: boolean;
+  watch?: boolean;
   createSocialMediaImages?: boolean;
-  imagePresets: {
+  imagePresets?: {
     [key: string]: ImagePreset;
   };
 
+  before11ty?: () => void | Promise<void>;
+
+  checkLinks?: Partial<CheckHtmlLinksCliOptions>;
+
   start?: RocketStartConfig;
 
   // TODO: improve all setup functions
   setupUnifiedPlugins?: function[];
-  setupDevAndBuildPlugins: function[];
+  setupDevAndBuildPlugins?: function[];
-  setupBuildPlugins: function[];
+  setupBuildPlugins?: function[];
-  setupDevPlugins: function[];
+  setupDevPlugins?: function[];
-  setupCliPlugins: function[];
+  setupCliPlugins?: function[];
-  setupEleventyPlugins: function[];
+  setupEleventyPlugins?: function[];
-  setupEleventyComputedConfig: function[];
+  setupEleventyComputedConfig?: function[];
 
   // advanced
-  devServer: DevServerConfig;
+  devServer?: DevServerConfig;
-  eleventy: function; // TODO: improve
+  eleventy?: (eleventyConfig: any) => void; // TODO: improve
-  plugins: RocketPlugin[];
+  plugins?: RocketPlugin[];
 
   // rarely used
-  command: string;
+  command?: string;
   configFile?: string;
-  outputDevDir: string;
+  outputDevDir?: string;
 
-  private _inputDirCwdRelative: string;
+  private _inputDirCwdRelative?: string;
-  private _presetPathes?: Array<string>;
+  private _presetPaths?: string[];
+  private __before11tyFunctions?: (() => void | Promise<void>)[];
 }
 
 export interface RocketPlugin {
-  commands: Array<string>;
+  commands: string[];
 }

packages/eleventy-plugin-mdjs-unified/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @rocket/eleventy-plugin-mdjs-unified
 
+## 0.5.0
+
+### Minor Changes
+
+- eae2007: Update to mdjs version that uses lit 2 and renders stories to light dom
+
 ## 0.4.1
 
 ### Patch Changes

packages/eleventy-plugin-mdjs-unified/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket/eleventy-plugin-mdjs-unified",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "publishConfig": {
     "access": "public"
   },
@@ -31,7 +31,7 @@
     "mdjs"
   ],
   "dependencies": {
-    "@mdjs/core": "^0.7.1",
+    "@mdjs/core": "^0.8.0",
     "es-module-lexer": "^0.3.26",
     "unist-util-visit": "^2.0.3"
   },

packages/launch/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @rocket/launch
 
+## 0.5.2
+
+### Patch Changes
+
+- 9e3c2f5: Only show the help & feedback link if a site.helpUrl is defined
+- 9625b94: Remove footer urls to pages that users would need to create
+- 1f79d7a: Add font-family CSS variables
+
+  - `--primary-font-family` for body text
+  - `--secondary-font-family` for emphasis (e.g. call-to-action)
+  - `--heading-font-family` for headings (defaults to `--primary-font-family`)
+  - `--monospace-font-family` for code blocks
+
+## 0.5.1
+
+### Patch Changes
+
+- cf44221: Adds a Slack invite to social links
+- f5d349e: add used fonts from google fonts
+
 ## 0.5.0
 
 ### Minor Changes

packages/launch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket/launch",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "publishConfig": {
     "access": "public"
   },

packages/launch/preset/_assets/brand-logos/slack.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 123 123" fill="currentColor">
+  <title>Slack</title>
+  <path stroke="none" stroke-width="1" stroke-dasharray="none" stroke-linecap="butt" stroke-dashoffset="0" stroke-linejoin="miter" stroke-miterlimit="4" fill-rule="nonzero"
+    d="M26.4 78.2c0 7.1-5.8 12.9-12.9 12.9S.6 85.3.6 78.2c0-7.1 5.8-12.9 12.9-12.9h12.9v12.9zm6.5 0c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9v32.3c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V78.2zm12.9-51.8c-7.1 0-12.9-5.8-12.9-12.9S38.7.6 45.8.6s12.9 5.8 12.9 12.9v12.9H45.8zm0 6.5c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H13.5C6.4 58.7.6 52.9.6 45.8s5.8-12.9 12.9-12.9h32.3zM97.6 45.8c0-7.1 5.8-12.9 12.9-12.9 7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H97.6V45.8zm-6.5 0c0 7.1-5.8 12.9-12.9 12.9-7.1 0-12.9-5.8-12.9-12.9V13.5C65.3 6.4 71.1.6 78.2.6c7.1 0 12.9 5.8 12.9 12.9v32.3zM78.2 97.6c7.1 0 12.9 5.8 12.9 12.9 0 7.1-5.8 12.9-12.9 12.9-7.1 0-12.9-5.8-12.9-12.9V97.6h12.9zm0-6.5c-7.1 0-12.9-5.8-12.9-12.9 0-7.1 5.8-12.9 12.9-12.9h32.3c7.1 0 12.9 5.8 12.9 12.9 0 7.1-5.8 12.9-12.9 12.9H78.2z"/>
+</svg>

packages/launch/preset/_assets/layout.css

@@ -7,7 +7,7 @@
 
 body {
   margin: 0;
-  font-family: 'Open Sans', sans-serif;
+  font-family: var(--primary-font-family);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-size: 16px;
@@ -213,6 +213,14 @@ body[layout^='layout-home'] #main-header a:hover {
     margin-right: 50px;
   }
 
+  #main-header .content-area > .social-link {
+    margin-right: 15px;
+  }
+
+  #main-header .content-area > *:last-child {
+    margin-right: 0;
+  }
+
   #main-header .search {
     order: 1;
   }
@@ -426,11 +434,13 @@ li.current > ul > li.anchor {
 
 /* for blog detail page */
 rocket-navigation h3 {
+  font-family: var(--heading-font-family, var(--primary-font-family));
   font-size: 16px;
   margin: 0 0 7px 0;
 }
 
 .sidebar-tags h3 {
+  font-family: var(--heading-font-family, var(--primary-font-family));
   margin-top: 30px;
 }
 
@@ -533,7 +543,7 @@ main > * {
   display: inline-block;
   text-align: center;
   text-transform: uppercase;
-  font-family: 'Montserrat', sans-serif;
+  font-family: var(--secondary-font-family);
   font-size: 16px;
   font-weight: bold;
   vertical-align: middle;

packages/launch/preset/_assets/markdown.css

@@ -1,6 +1,7 @@
 @font-face {
   font-family: octicons-link;
-  src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAZwABAAAAAACFQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEU0lHAAAGaAAAAAgAAAAIAAAAAUdTVUIAAAZcAAAACgAAAAoAAQAAT1MvMgAAAyQAAABJAAAAYFYEU3RjbWFwAAADcAAAAEUAAACAAJThvmN2dCAAAATkAAAABAAAAAQAAAAAZnBnbQAAA7gAAACyAAABCUM+8IhnYXNwAAAGTAAAABAAAAAQABoAI2dseWYAAAFsAAABPAAAAZwcEq9taGVhZAAAAsgAAAA0AAAANgh4a91oaGVhAAADCAAAABoAAAAkCA8DRGhtdHgAAAL8AAAADAAAAAwGAACfbG9jYQAAAsAAAAAIAAAACABiATBtYXhwAAACqAAAABgAAAAgAA8ASm5hbWUAAAToAAABQgAAAlXu73sOcG9zdAAABiwAAAAeAAAAME3QpOBwcmVwAAAEbAAAAHYAAAB/aFGpk3jaTY6xa8JAGMW/O62BDi0tJLYQincXEypYIiGJjSgHniQ6umTsUEyLm5BV6NDBP8Tpts6F0v+k/0an2i+itHDw3v2+9+DBKTzsJNnWJNTgHEy4BgG3EMI9DCEDOGEXzDADU5hBKMIgNPZqoD3SilVaXZCER3/I7AtxEJLtzzuZfI+VVkprxTlXShWKb3TBecG11rwoNlmmn1P2WYcJczl32etSpKnziC7lQyWe1smVPy/Lt7Kc+0vWY/gAgIIEqAN9we0pwKXreiMasxvabDQMM4riO+qxM2ogwDGOZTXxwxDiycQIcoYFBLj5K3EIaSctAq2kTYiw+ymhce7vwM9jSqO8JyVd5RH9gyTt2+J/yUmYlIR0s04n6+7Vm1ozezUeLEaUjhaDSuXHwVRgvLJn1tQ7xiuVv/ocTRF42mNgZGBgYGbwZOBiAAFGJBIMAAizAFoAAABiAGIAznjaY2BkYGAA4in8zwXi+W2+MjCzMIDApSwvXzC97Z4Ig8N/BxYGZgcgl52BCSQKAA3jCV8CAABfAAAAAAQAAEB42mNgZGBg4f3vACQZQABIMjKgAmYAKEgBXgAAeNpjYGY6wTiBgZWBg2kmUxoDA4MPhGZMYzBi1AHygVLYQUCaawqDA4PChxhmh/8ODDEsvAwHgMKMIDnGL0x7gJQCAwMAJd4MFwAAAHjaY2BgYGaA4DAGRgYQkAHyGMF8NgYrIM3JIAGVYYDT+AEjAwuDFpBmA9KMDEwMCh9i/v8H8sH0/4dQc1iAmAkALaUKLgAAAHjaTY9LDsIgEIbtgqHUPpDi3gPoBVyRTmTddOmqTXThEXqrob2gQ1FjwpDvfwCBdmdXC5AVKFu3e5MfNFJ29KTQT48Ob9/lqYwOGZxeUelN2U2R6+cArgtCJpauW7UQBqnFkUsjAY/kOU1cP+DAgvxwn1chZDwUbd6CFimGXwzwF6tPbFIcjEl+vvmM/byA48e6tWrKArm4ZJlCbdsrxksL1AwWn/yBSJKpYbq8AXaaTb8AAHja28jAwOC00ZrBeQNDQOWO//sdBBgYGRiYWYAEELEwMTE4uzo5Zzo5b2BxdnFOcALxNjA6b2ByTswC8jYwg0VlNuoCTWAMqNzMzsoK1rEhNqByEyerg5PMJlYuVueETKcd/89uBpnpvIEVomeHLoMsAAe1Id4AAAAAAAB42oWQT07CQBTGv0JBhagk7HQzKxca2sJCE1hDt4QF+9JOS0nbaaYDCQfwCJ7Au3AHj+LO13FMmm6cl7785vven0kBjHCBhfpYuNa5Ph1c0e2Xu3jEvWG7UdPDLZ4N92nOm+EBXuAbHmIMSRMs+4aUEd4Nd3CHD8NdvOLTsA2GL8M9PODbcL+hD7C1xoaHeLJSEao0FEW14ckxC+TU8TxvsY6X0eLPmRhry2WVioLpkrbp84LLQPGI7c6sOiUzpWIWS5GzlSgUzzLBSikOPFTOXqly7rqx0Z1Q5BAIoZBSFihQYQOOBEdkCOgXTOHA07HAGjGWiIjaPZNW13/+lm6S9FT7rLHFJ6fQbkATOG1j2OFMucKJJsxIVfQORl+9Jyda6Sl1dUYhSCm1dyClfoeDve4qMYdLEbfqHf3O/AdDumsjAAB42mNgYoAAZQYjBmyAGYQZmdhL8zLdDEydARfoAqIAAAABAAMABwAKABMAB///AA8AAQAAAAAAAAAAAAAAAAABAAAAAA==)
+  src:
+    url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAZwABAAAAAACFQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEU0lHAAAGaAAAAAgAAAAIAAAAAUdTVUIAAAZcAAAACgAAAAoAAQAAT1MvMgAAAyQAAABJAAAAYFYEU3RjbWFwAAADcAAAAEUAAACAAJThvmN2dCAAAATkAAAABAAAAAQAAAAAZnBnbQAAA7gAAACyAAABCUM+8IhnYXNwAAAGTAAAABAAAAAQABoAI2dseWYAAAFsAAABPAAAAZwcEq9taGVhZAAAAsgAAAA0AAAANgh4a91oaGVhAAADCAAAABoAAAAkCA8DRGhtdHgAAAL8AAAADAAAAAwGAACfbG9jYQAAAsAAAAAIAAAACABiATBtYXhwAAACqAAAABgAAAAgAA8ASm5hbWUAAAToAAABQgAAAlXu73sOcG9zdAAABiwAAAAeAAAAME3QpOBwcmVwAAAEbAAAAHYAAAB/aFGpk3jaTY6xa8JAGMW/O62BDi0tJLYQincXEypYIiGJjSgHniQ6umTsUEyLm5BV6NDBP8Tpts6F0v+k/0an2i+itHDw3v2+9+DBKTzsJNnWJNTgHEy4BgG3EMI9DCEDOGEXzDADU5hBKMIgNPZqoD3SilVaXZCER3/I7AtxEJLtzzuZfI+VVkprxTlXShWKb3TBecG11rwoNlmmn1P2WYcJczl32etSpKnziC7lQyWe1smVPy/Lt7Kc+0vWY/gAgIIEqAN9we0pwKXreiMasxvabDQMM4riO+qxM2ogwDGOZTXxwxDiycQIcoYFBLj5K3EIaSctAq2kTYiw+ymhce7vwM9jSqO8JyVd5RH9gyTt2+J/yUmYlIR0s04n6+7Vm1ozezUeLEaUjhaDSuXHwVRgvLJn1tQ7xiuVv/ocTRF42mNgZGBgYGbwZOBiAAFGJBIMAAizAFoAAABiAGIAznjaY2BkYGAA4in8zwXi+W2+MjCzMIDApSwvXzC97Z4Ig8N/BxYGZgcgl52BCSQKAA3jCV8CAABfAAAAAAQAAEB42mNgZGBg4f3vACQZQABIMjKgAmYAKEgBXgAAeNpjYGY6wTiBgZWBg2kmUxoDA4MPhGZMYzBi1AHygVLYQUCaawqDA4PChxhmh/8ODDEsvAwHgMKMIDnGL0x7gJQCAwMAJd4MFwAAAHjaY2BgYGaA4DAGRgYQkAHyGMF8NgYrIM3JIAGVYYDT+AEjAwuDFpBmA9KMDEwMCh9i/v8H8sH0/4dQc1iAmAkALaUKLgAAAHjaTY9LDsIgEIbtgqHUPpDi3gPoBVyRTmTddOmqTXThEXqrob2gQ1FjwpDvfwCBdmdXC5AVKFu3e5MfNFJ29KTQT48Ob9/lqYwOGZxeUelN2U2R6+cArgtCJpauW7UQBqnFkUsjAY/kOU1cP+DAgvxwn1chZDwUbd6CFimGXwzwF6tPbFIcjEl+vvmM/byA48e6tWrKArm4ZJlCbdsrxksL1AwWn/yBSJKpYbq8AXaaTb8AAHja28jAwOC00ZrBeQNDQOWO//sdBBgYGRiYWYAEELEwMTE4uzo5Zzo5b2BxdnFOcALxNjA6b2ByTswC8jYwg0VlNuoCTWAMqNzMzsoK1rEhNqByEyerg5PMJlYuVueETKcd/89uBpnpvIEVomeHLoMsAAe1Id4AAAAAAAB42oWQT07CQBTGv0JBhagk7HQzKxca2sJCE1hDt4QF+9JOS0nbaaYDCQfwCJ7Au3AHj+LO13FMmm6cl7785vven0kBjHCBhfpYuNa5Ph1c0e2Xu3jEvWG7UdPDLZ4N92nOm+EBXuAbHmIMSRMs+4aUEd4Nd3CHD8NdvOLTsA2GL8M9PODbcL+hD7C1xoaHeLJSEao0FEW14ckxC+TU8TxvsY6X0eLPmRhry2WVioLpkrbp84LLQPGI7c6sOiUzpWIWS5GzlSgUzzLBSikOPFTOXqly7rqx0Z1Q5BAIoZBSFihQYQOOBEdkCOgXTOHA07HAGjGWiIjaPZNW13/+lm6S9FT7rLHFJ6fQbkATOG1j2OFMucKJJsxIVfQORl+9Jyda6Sl1dUYhSCm1dyClfoeDve4qMYdLEbfqHf3O/AdDumsjAAB42mNgYoAAZQYjBmyAGYQZmdhL8zLdDEydARfoAqIAAAABAAMABwAKABMAB///AA8AAQAAAAAAAAAAAAAAAAABAAAAAA==)
     format('woff');
 }
 
@@ -61,7 +62,7 @@
   -webkit-text-size-adjust: 100%;
   color: var(--markdown-body, --page-background);
   line-height: 1.5;
-  font-family: 'Open Sans', sans-serif;
+  font-family: var(--primary-font-family);
   font-size: 16px;
   line-height: 1.5;
   word-wrap: break-word;
@@ -188,6 +189,7 @@
 .markdown-body h4,
 .markdown-body h5,
 .markdown-body h6 {
+  font-family: var(--heading-font-family, var(--primary-font-family));
   margin-bottom: 0;
   margin-top: 0;
 }
@@ -265,7 +267,7 @@
 
 .markdown-body code,
 .markdown-body pre {
-  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
+  font-family: var(--monospace-font-family);
   font-size: 12px;
 }
 
@@ -555,57 +557,75 @@ pre[class*='language-'] {
 .token.atrule {
   color: var(--markdown-syntax-atrule-color, #d73a49);
 }
+
 .token.attr-name {
   color: var(--markdown-syntax-attr-name-color, #d73a49);
 }
+
 .token.boolean {
   color: var(--markdown-syntax-boolean-color, #005cc5);
 }
+
 .token.class-name {
   color: var(--markdown-syntax-class-name-color, #6f42c1);
 }
+
 .token.constant {
   color: var(--markdown-syntax-constant-color, #005cc5);
 }
+
 .token.entity {
   color: var(--markdown-syntax-entity-color, #005cc5);
 }
+
 .token.function {
   color: var(--markdown-syntax-function-color, #6f42c1);
 }
+
 .token.inserted {
   color: var(--markdown-syntax-inserted-color, #005cc5);
 }
+
 .token.keyword {
   color: var(--markdown-syntax-keyword-color, #d73a49);
 }
+
 .token.number {
   color: var(--markdown-syntax-number-color, #005cc5);
 }
+
 .token.operator {
   color: var(--markdown-syntax-operator-color, #005cc5);
 }
+
 .token.property {
   color: var(--markdown-syntax-property-color, #005cc5);
 }
+
 .token.punctuation {
   color: var(--markdown-syntax-punctuation-color, #005cc5);
 }
+
 .token.regex {
   color: var(--markdown-syntax-regex-color, #032f62);
 }
+
 .token.selector {
   color: var(--markdown-syntax-selector-color, #22863a);
 }
+
 .token.symbol {
   color: var(--markdown-syntax-symbol-color, #005cc5);
 }
+
 .token.tag {
   color: var(--markdown-syntax-tag-color, #22863a);
 }
+
 .token.url {
   color: var(--markdown-syntax-url-color, #005cc5);
 }
+
 .token.variable {
   color: var(--markdown-syntax-variable-color, #005cc5);
 }
@@ -613,6 +633,7 @@ pre[class*='language-'] {
 .language-autohotkey .token.selector {
   color: var(--markdown-syntax-hotkey-selector-color, #d73a49);
 }
+
 .language-autohotkey .token.keyword {
   color: var(--markdown-syntax-keyword-color, #22863a);
 }

packages/launch/preset/_assets/variables.css

@@ -14,7 +14,11 @@ html {
   --page-background: white;
   --footer-background: rgba(0, 0, 0, 0.1);
 
+  /* typography */
   --text-color: black;
+  --primary-font-family: 'Open Sans', sans-serif;
+  --secondary-font-family: 'Montserrat', sans-serif;
+  --monospace-font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace;
 }
 
 html.dark {
@@ -32,8 +36,10 @@ html.dark {
   --page-background: #333;
   --footer-background: #4f4f4f;
 
+  /* typography */
   --text-color: white;
 
+  /* markdown */
   --markdown-octicon-link: white;
   --markdown-syntax-background-color: #a0a0a0;
   --markdown-link-color: #fb7881;

packages/launch/preset/_data/footer.json

@@ -2,10 +2,6 @@
   {
     "name": "Discover",
     "children": [
-      {
-        "text": "Blog",
-        "href": "/blog/"
-      },
       {
         "text": "Help and Feedback",
         "href": "https://github.com/modernweb-dev/rocket/issues"
@@ -23,19 +19,11 @@
         "text": "Twitter",
         "href": "https://twitter.com/modern_web_dev"
       },
-      {
-        "text": "Slack",
-        "href": "/about/slack/"
-      }
     ]
   },
   {
     "name": "Support",
     "children": [
-      {
-        "text": "Sponsor",
-        "href": "/about/sponsor/"
-      },
       {
         "text": "Contribute",
         "href": "https://github.com/modernweb-dev/rocket/blob/master/CONTRIBUTING.md"

packages/launch/preset/_data/site.cjs

@@ -9,6 +9,11 @@ module.exports = function () {
         name: 'GitHub',
         url: 'https://github.com/modernweb-dev/rocket',
       },
+      {
+        name: 'Slack',
+        url:
+          'https://join.slack.com/t/lit-and-friends/shared_invite/zt-llwznvsy-LZwT13R66gOgnrg12PUGqw',
+      },
     ],
     gitSiteUrl: 'https://github.com/modernweb-dev/rocket',
     gitBranch: 'master',

packages/launch/preset/_includes/_joiningBlocks/head/40-stylesheets-fonts.njk

@@ -0,0 +1,10 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
+
+<link
+  href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&amp;display=optional"
+  rel="stylesheet"
+/>
+<link
+  href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&amp;display=optional"
+  rel="stylesheet"
+/>

packages/launch/preset/_includes/_joiningBlocks/header/30-collection-header.njk

@@ -1,6 +1,6 @@
 {%- for entry in collections.header %}
   <a href="{{ entry.url | url }}" class="
           {% if entry.url == page.url %} current {% endif %}
-          {% if (page.url.search(entry.url) !== -1) and (page.url !== '/') %} active {% endif %}
+          {% if page.url and page.url.search and (page.url.search(entry.url) !== -1) and (page.url !== '/') %} active {% endif %}
         ">{{ entry.data.eleventyNavigation.key }}</a>
 {%- endfor %}

packages/launch/preset/_includes/partials/mobile-sidebar-bottom.njk

@@ -1,6 +1,6 @@
 <div class="sidebar-bottom">
-  <hr>
+  <hr/> {% include 'partials/_shared/darkSwitch.njk' %}
-  {% include 'partials/_shared/darkSwitch.njk' %}
+  {% if site.helpUrl %}
-
+    <a href="{{ site.helpUrl | url }}">Help and Feedback</a>
-  <a href="{{ site.helpUrl | url }}">Help and Feedback</a>
+  {% endif %}
 </div>

packages/launch/test-node/RocketLaunch.preset.test.js

@@ -83,6 +83,17 @@ describe('RocketLaunch preset', () => {
         '',
         '    <meta name="twitter:card" content="summary_large_image" />',
         '',
+        '    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />',
+        '',
+        '    <link',
+        '      href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&amp;display=optional"',
+        '      rel="stylesheet"',
+        '    />',
+        '    <link',
+        '      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&amp;display=optional"',
+        '      rel="stylesheet"',
+        '    />',
+        '',
         '    <link rel="stylesheet" href="/_merged_assets/variables.css" />',
         '    <link rel="stylesheet" href="/_merged_assets/layout.css" />',
         '    <link rel="stylesheet" href="/_merged_assets/markdown.css" />',
@@ -138,6 +149,30 @@ describe('RocketLaunch preset', () => {
         '            ></path>',
         '          </svg>',
         '        </a>',
+        '        <a',
+        '          class="social-link"',
+        '          href="https://join.slack.com/t/lit-and-friends/shared_invite/zt-llwznvsy-LZwT13R66gOgnrg12PUGqw"',
+        '          aria-label="Rocket on Slack"',
+        '          rel="noopener noreferrer"',
+        '          target="_blank"',
+        '        >',
+        '          <span class="sr-only">Slack</span>',
+        '',
+        '          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 123 123" fill="currentColor">',
+        '            <title>Slack</title>',
+        '            <path',
+        '              stroke="none"',
+        '              stroke-width="1"',
+        '              stroke-dasharray="none"',
+        '              stroke-linecap="butt"',
+        '              stroke-dashoffset="0"',
+        '              stroke-linejoin="miter"',
+        '              stroke-miterlimit="4"',
+        '              fill-rule="nonzero"',
+        '              d="M26.4 78.2c0 7.1-5.8 12.9-12.9 12.9S.6 85.3.6 78.2c0-7.1 5.8-12.9 12.9-12.9h12.9v12.9zm6.5 0c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9v32.3c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V78.2zm12.9-51.8c-7.1 0-12.9-5.8-12.9-12.9S38.7.6 45.8.6s12.9 5.8 12.9 12.9v12.9H45.8zm0 6.5c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H13.5C6.4 58.7.6 52.9.6 45.8s5.8-12.9 12.9-12.9h32.3zM97.6 45.8c0-7.1 5.8-12.9 12.9-12.9 7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H97.6V45.8zm-6.5 0c0 7.1-5.8 12.9-12.9 12.9-7.1 0-12.9-5.8-12.9-12.9V13.5C65.3 6.4 71.1.6 78.2.6c7.1 0 12.9 5.8 12.9 12.9v32.3zM78.2 97.6c7.1 0 12.9 5.8 12.9 12.9 0 7.1-5.8 12.9-12.9 12.9-7.1 0-12.9-5.8-12.9-12.9V97.6h12.9zm0-6.5c-7.1 0-12.9-5.8-12.9-12.9 0-7.1 5.8-12.9 12.9-12.9h32.3c7.1 0 12.9 5.8 12.9 12.9 0 7.1-5.8 12.9-12.9 12.9H78.2z"',
+        '            />',
+        '          </svg>',
+        '        </a>',
         '      </div>',
         '    </header>',
         '',
@@ -285,6 +320,17 @@ describe('RocketLaunch preset', () => {
         '',
         '    <meta name="twitter:card" content="summary_large_image" />',
         '',
+        '    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />',
+        '',
+        '    <link',
+        '      href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&amp;display=optional"',
+        '      rel="stylesheet"',
+        '    />',
+        '    <link',
+        '      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&amp;display=optional"',
+        '      rel="stylesheet"',
+        '    />',
+        '',
         '    <link rel="stylesheet" href="/_merged_assets/variables.css" />',
         '    <link rel="stylesheet" href="/_merged_assets/layout.css" />',
         '    <link rel="stylesheet" href="/_merged_assets/markdown.css" />',
@@ -340,6 +386,30 @@ describe('RocketLaunch preset', () => {
         '            ></path>',
         '          </svg>',
         '        </a>',
+        '        <a',
+        '          class="social-link"',
+        '          href="https://join.slack.com/t/lit-and-friends/shared_invite/zt-llwznvsy-LZwT13R66gOgnrg12PUGqw"',
+        '          aria-label="Rocket on Slack"',
+        '          rel="noopener noreferrer"',
+        '          target="_blank"',
+        '        >',
+        '          <span class="sr-only">Slack</span>',
+        '',
+        '          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 123 123" fill="currentColor">',
+        '            <title>Slack</title>',
+        '            <path',
+        '              stroke="none"',
+        '              stroke-width="1"',
+        '              stroke-dasharray="none"',
+        '              stroke-linecap="butt"',
+        '              stroke-dashoffset="0"',
+        '              stroke-linejoin="miter"',
+        '              stroke-miterlimit="4"',
+        '              fill-rule="nonzero"',
+        '              d="M26.4 78.2c0 7.1-5.8 12.9-12.9 12.9S.6 85.3.6 78.2c0-7.1 5.8-12.9 12.9-12.9h12.9v12.9zm6.5 0c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9v32.3c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V78.2zm12.9-51.8c-7.1 0-12.9-5.8-12.9-12.9S38.7.6 45.8.6s12.9 5.8 12.9 12.9v12.9H45.8zm0 6.5c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H13.5C6.4 58.7.6 52.9.6 45.8s5.8-12.9 12.9-12.9h32.3zM97.6 45.8c0-7.1 5.8-12.9 12.9-12.9 7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H97.6V45.8zm-6.5 0c0 7.1-5.8 12.9-12.9 12.9-7.1 0-12.9-5.8-12.9-12.9V13.5C65.3 6.4 71.1.6 78.2.6c7.1 0 12.9 5.8 12.9 12.9v32.3zM78.2 97.6c7.1 0 12.9 5.8 12.9 12.9 0 7.1-5.8 12.9-12.9 12.9-7.1 0-12.9-5.8-12.9-12.9V97.6h12.9zm0-6.5c-7.1 0-12.9-5.8-12.9-12.9 0-7.1 5.8-12.9 12.9-12.9h32.3c7.1 0 12.9 5.8 12.9 12.9 0 7.1-5.8 12.9-12.9 12.9H78.2z"',
+        '            />',
+        '          </svg>',
+        '        </a>',
         '      </div>',
         '    </header>',
         '',

packages/mdjs-core/CHANGELOG.md

@@ -1,5 +1,56 @@
 # Change Log
 
+## 0.8.0
+
+### Minor Changes
+
+- 814b5d2: **BREAKING CHANGE** Stories of `story` and `preview-story` are now rendered to light dom instead of shadow dom to allow usage of a scoped registry for the internal dom
+
+  ```js
+  export const story = html`
+    <p>my story</p>
+  `;
+  ```
+
+  ```html
+  <!-- before -->
+  <mdjs-story>
+    #shadow-root (open)
+    <p>my story</p>
+  </mdjs-story>
+
+  <!-- after -->
+  <mdjs-story>
+    <p>my story</p>
+  </mdjs-story>
+  ```
+
+- e1e96ac: **BREAKING CHANGE** The default renderer for `story` and `preview-story` updated to [lit](https://lit.dev/) 2
+
+  If your main lit-html version is 1.x be sure to import html for your story rendering from `@mdjs/mdjs-preview`.
+
+  ````md
+  ```js script
+  import { html } from '@mdjs/mdjs-preview';
+  ```
+
+  ```js preview-story
+  export const foo = () =>
+    html`
+      <demo-element></demo-element>
+    `;
+  ```
+  ````
+
+### Patch Changes
+
+- Updated dependencies [e1e96ac]
+- Updated dependencies [814b5d2]
+- Updated dependencies [814b5d2]
+- Updated dependencies [e1e96ac]
+  - @mdjs/mdjs-preview@0.5.0
+  - @mdjs/mdjs-story@0.3.0
+
 ## 0.7.2
 
 ### Patch Changes

packages/mdjs-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdjs/core",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "publishConfig": {
     "access": "public"
   },
@@ -44,12 +44,12 @@
     "remark"
   ],
   "dependencies": {
-    "@mdjs/mdjs-preview": "^0.4.2",
+    "@mdjs/mdjs-preview": "^0.5.0",
-    "@mdjs/mdjs-story": "^0.2.0",
+    "@mdjs/mdjs-story": "^0.3.0",
     "@types/unist": "^2.0.3",
     "es-module-lexer": "^0.3.26",
     "github-markdown-css": "^4.0.0",
-    "plugins-manager": "^0.2.1",
+    "plugins-manager": "^0.2.2",
     "rehype-autolink-headings": "^5.0.1",
     "rehype-prism-template": "^0.4.1",
     "rehype-raw": "^5.0.0",

packages/mdjs-preview/CHANGELOG.md

@@ -1,5 +1,61 @@
 # @mdjs/mdjs-preview
 
+## 0.5.0
+
+### Minor Changes
+
+- e1e96ac: **BREAKING CHANGE** Update to [lit](https://lit.dev/) 2
+
+  If your main lit-html version is 1.x be sure to import html for your story rendering from `@mdjs/mdjs-preview`.
+
+  ````md
+  ```js script
+  import { html } from '@mdjs/mdjs-preview';
+  ```
+
+  ```js preview-story
+  export const foo = () =>
+    html`
+      <demo-element></demo-element>
+    `;
+  ```
+  ````
+
+- 814b5d2: **BREAKING CHANGE** Render stories to light dom
+
+  ```js
+  export const story = html`
+    <p>my story</p>
+  `;
+  ```
+
+  ```html
+  <!-- before -->
+  <mdjs-preview>
+    #shadow-root (open)
+      <div id="wrapper">
+        <div>
+          <p>my story</p>
+        </div>
+      </div>
+      <!-- more internal dom -->
+
+    <code><!-- ... --></code>
+  </mdjs-preview>
+
+  <!-- after -->
+  <mdjs-preview>
+    #shadow-root (open)
+      <div id="wrapper">
+      <!-- more internal dom -->
+
+    <code><!-- ... --></code>
+    <div slot="story">
+      <p>my story</p>
+    </div>
+  </mdjs-preview>
+  ```
+
 ## 0.4.2
 
 ### Patch Changes

packages/mdjs-preview/index.js

@@ -1 +1,62 @@
 export { MdJsPreview } from './src/MdJsPreview.js';
+
+// reexport used lit to ensure users can sync html & rendering
+export {
+  html,
+  CSSResult,
+  adoptStyles,
+  css,
+  getCompatibleStyle,
+  supportsAdoptingStyleSheets,
+  unsafeCSS,
+  UpdatingElement,
+  notEqual,
+  ReactiveElement,
+  svg,
+  noChange,
+  nothing,
+  render,
+  LitElement,
+  defaultConverter,
+} from 'lit';
+
+export {
+  customElement,
+  property,
+  state,
+  eventOptions,
+  query,
+  queryAll,
+  queryAsync,
+  queryAssignedNodes,
+} from 'lit/decorators.js';
+
+export { directive, Directive } from 'lit/directive.js';
+
+export { AsyncDirective } from 'lit/async-directive.js';
+
+export {
+  isPrimitive,
+  TemplateResultType,
+  isTemplateResult,
+  isDirectiveResult,
+  getDirectiveClass,
+  isSingleExpression,
+  insertPart,
+  setChildPartValue,
+  setCommittedValue,
+  getCommittedValue,
+  removePart,
+  clearPart,
+} from 'lit/directive-helpers.js';
+
+export { asyncAppend } from 'lit/directives/async-append.js';
+export { asyncReplace } from 'lit/directives/async-replace.js';
+export { cache } from 'lit/directives/cache.js';
+export { classMap } from 'lit/directives/class-map.js';
+export { guard } from 'lit/directives/guard.js';
+export { ifDefined } from 'lit/directives/if-defined.js';
+export { repeat } from 'lit/directives/repeat.js';
+export { styleMap } from 'lit/directives/style-map.js';
+export { unsafeHTML } from 'lit/directives/unsafe-html.js';
+export { until } from 'lit/directives/until.js';

packages/mdjs-preview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdjs/mdjs-preview",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "publishConfig": {
     "access": "public"
   },
@@ -22,7 +22,6 @@
   "scripts": {
     "debug": "cd ../../ && npm run debug -- --group mdjs-preview",
     "test": "npm run test:web",
-    "test:watch": "onchange 'src/**/*.{js,cjs}' 'test-node/**/*.js' -- npm run test:node",
     "test:web": "cd ../../ && npm run test:web -- --group mdjs-preview"
   },
   "files": [
@@ -33,7 +32,7 @@
   ],
   "dependencies": {
     "@lion/accordion": "^0.4.2",
-    "lit-element": "^2.4.0"
+    "lit": "^2.0.0-rc.2"
   },
   "types": "dist-types/index.d.ts"
 }

packages/mdjs-preview/src/MdJsPreview.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css, nothing, render } from 'lit';
 import '@lion/accordion/define';
 
 import {
@@ -11,7 +11,7 @@ import { addResizeHandler } from './resizeHandler.js';
 
 /**
  * @typedef {object} StoryOptions
- * @property {ShadowRoot | null} StoryOptions.shadowRoot
+ * @property {HTMLElement | null} StoryOptions.shadowRoot
  */
 
 /** @typedef {(options?: StoryOptions) => ReturnType<LitElement['render']>} LitHtmlStoryFn */
@@ -172,6 +172,11 @@ export class MdJsPreview extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
+    if (!this.lightDomRenderTarget) {
+      this.lightDomRenderTarget = document.createElement('div');
+      this.lightDomRenderTarget.setAttribute('slot', 'story');
+      this.appendChild(this.lightDomRenderTarget);
+    }
     if (this.sameSettings) {
       applySharedStates(this);
     }
@@ -225,6 +230,10 @@ export class MdJsPreview extends LitElement {
         unSubscribe(this.onSubscribe);
       }
     }
+
+    if (this.lightDomRenderTarget && changeProps.has('story')) {
+      render(this.story({ shadowRoot: this }), this.lightDomRenderTarget);
+    }
   }
 
   disconnectedCallback() {
@@ -549,9 +558,9 @@ export class MdJsPreview extends LitElement {
   render() {
     return html`
       <div id="wrapper">
-        ${this.deviceMode === false
+        <slot name="story"></slot>
-          ? html`<div>${this.story({ shadowRoot: this.shadowRoot })}</div>`
+        ${this.deviceMode === true
-          : html`
+          ? html`
               <iframe
                 part="iframe"
                 csp=${`script-src ${document.location.origin} 'unsafe-inline'; connect-src ws://${document.location.host}/`}
@@ -561,7 +570,8 @@ export class MdJsPreview extends LitElement {
               <p part="frame-description" style=${`width: ${this.sizeData.width + 4}px;`}>
                 ${this.sizeData.name} - ${this.deviceHeight}x${this.sizeData.width}
               </p>
-            `}
+            `
+          : nothing}
       </div>
       <lion-accordion class="options">
         ${this.deviceMode
@@ -610,6 +620,10 @@ export class MdJsPreview extends LitElement {
         padding-bottom: 10px;
       }
 
+      :host([device-mode]) slot[name='story'] {
+        display: none;
+      }
+
       iframe {
         border: 2px solid #4caf50;
         background: #fff;

packages/mdjs-preview/test-web/mdjs-preview.test.js

@@ -1,4 +1,5 @@
 import { expect, fixture, html } from '@open-wc/testing';
+import { html as storyHtml } from '@mdjs/mdjs-preview';
 import '@mdjs/mdjs-preview/define';
 
 /** @typedef {import('@mdjs/mdjs-preview').MdJsPreview} MdJsPreview */
@@ -6,16 +7,16 @@ import '@mdjs/mdjs-preview/define';
 describe('mdjs-preview', () => {
   it('will render the element into the shadow root by default', async () => {
     const el = await fixture(html`
-      <mdjs-preview .story=${() => html`<p id="testing"></p>`}></mdjs-preview>
+      <mdjs-preview .story=${() => storyHtml`<p id="testing"></p>`}></mdjs-preview>
     `);
-    expect(el.shadowRoot.querySelectorAll('#testing').length).to.equal(1);
+    expect(el.querySelectorAll('#testing').length).to.equal(1);
   });
 
   it('sync simulator states between instances', async () => {
     const el = await fixture(html`
       <div>
-        <mdjs-preview .story=${() => html`<p></p>`}></mdjs-preview>
+        <mdjs-preview .story=${() => storyHtml`<p></p>`}></mdjs-preview>
-        <mdjs-preview .story=${() => html`<p></p>`}></mdjs-preview>
+        <mdjs-preview .story=${() => storyHtml`<p></p>`}></mdjs-preview>
       </div>
     `);
     const [preview1, preview2] = /** @type {MdJsPreview[]} */ (el.children);

packages/mdjs-story/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @mdjs/mdjs-story
 
+## 0.3.0
+
+### Minor Changes
+
+- 814b5d2: **BREAKING CHANGE** Render stories to light dom
+
+  ```js
+  export const story = html`
+    <p>my story</p>
+  `;
+  ```
+
+  ```html
+  <!-- before -->
+  <mdjs-story>
+    #shadow-root (open)
+    <p>my story</p>
+  </mdjs-story>
+
+  <!-- after -->
+  <mdjs-story>
+    <p>my story</p>
+  </mdjs-story>
+  ```
+
+- e1e96ac: **BREAKING CHANGE** Update to [lit](https://lit.dev/) 2
+
+  If your main lit-html version is 1.x be sure to import html for your story rendering from `@mdjs/mdjs-story`.
+
+  ````md
+  ```js script
+  import { html } from '@mdjs/mdjs-story';
+  ```
+
+  ```js story
+  export const foo = () =>
+    html`
+      <demo-element></demo-element>
+    `;
+  ```
+  ````
+
 ## 0.2.0
 
 ### Minor Changes

packages/mdjs-story/index.js

@@ -1 +1,62 @@
 export { MdJsStory } from './src/MdJsStory.js';
+
+// reexport used lit to ensure users can sync html & rendering
+export {
+  html,
+  CSSResult,
+  adoptStyles,
+  css,
+  getCompatibleStyle,
+  supportsAdoptingStyleSheets,
+  unsafeCSS,
+  UpdatingElement,
+  notEqual,
+  ReactiveElement,
+  svg,
+  noChange,
+  nothing,
+  render,
+  LitElement,
+  defaultConverter,
+} from 'lit';
+
+export {
+  customElement,
+  property,
+  state,
+  eventOptions,
+  query,
+  queryAll,
+  queryAsync,
+  queryAssignedNodes,
+} from 'lit/decorators.js';
+
+export { directive, Directive } from 'lit/directive.js';
+
+export { AsyncDirective } from 'lit/async-directive.js';
+
+export {
+  isPrimitive,
+  TemplateResultType,
+  isTemplateResult,
+  isDirectiveResult,
+  getDirectiveClass,
+  isSingleExpression,
+  insertPart,
+  setChildPartValue,
+  setCommittedValue,
+  getCommittedValue,
+  removePart,
+  clearPart,
+} from 'lit/directive-helpers.js';
+
+export { asyncAppend } from 'lit/directives/async-append.js';
+export { asyncReplace } from 'lit/directives/async-replace.js';
+export { cache } from 'lit/directives/cache.js';
+export { classMap } from 'lit/directives/class-map.js';
+export { guard } from 'lit/directives/guard.js';
+export { ifDefined } from 'lit/directives/if-defined.js';
+export { repeat } from 'lit/directives/repeat.js';
+export { styleMap } from 'lit/directives/style-map.js';
+export { unsafeHTML } from 'lit/directives/unsafe-html.js';
+export { until } from 'lit/directives/until.js';

packages/mdjs-story/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdjs/mdjs-story",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "publishConfig": {
     "access": "public"
   },
@@ -22,7 +22,6 @@
   "scripts": {
     "debug": "cd ../../ && npm run debug -- --group mdjs-story",
     "test": "npm run test:web",
-    "test:watch": "onchange 'src/**/*.{js,cjs}' 'test-node/**/*.js' -- npm run test:node",
     "test:web": "cd ../../ && npm run test:web -- --group mdjs-story"
   },
   "files": [
@@ -32,7 +31,7 @@
     "src"
   ],
   "dependencies": {
-    "lit-element": "^2.4.0"
+    "lit": "^2.0.0-rc.2"
   },
   "types": "dist-types/index.d.ts"
 }

packages/mdjs-story/src/MdJsStory.js

@@ -1,8 +1,8 @@
-import { LitElement, html } from 'lit-element';
+import { LitElement, html } from 'lit';
 
 /**
  * @typedef {object} StoryOptions
- * @property {ShadowRoot | null} StoryOptions.shadowRoot
+ * @property {HTMLElement | null} StoryOptions.shadowRoot
  */
 
 /** @typedef {(options?: StoryOptions) => ReturnType<LitElement['render']>} LitHtmlStoryFn */
@@ -28,7 +28,11 @@ export class MdJsStory extends LitElement {
     this.story = () => html`<p>Loading...</p>`;
   }
 
+  createRenderRoot() {
+    return this;
+  }
+
   render() {
-    return this.story({ shadowRoot: this.shadowRoot });
+    return this.story({ shadowRoot: this });
   }
 }

packages/mdjs-story/test-web/mdjs-story.test.js

@@ -0,0 +1,15 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { html as storyHtml } from '@mdjs/mdjs-story';
+
+import '@mdjs/mdjs-story/define';
+
+/** @typedef {import('@mdjs/mdjs-preview').MdJsPreview} MdJsPreview */
+
+describe('mdjs-story', () => {
+  it('will render the element into the light dom by default', async () => {
+    const el = await fixture(html`
+      <mdjs-story .story=${() => storyHtml`<p id="testing"></p>`}></mdjs-story>
+    `);
+    expect(el.querySelectorAll('#testing').length).to.equal(1);
+  });
+});

packages/plugins-manager/CHANGELOG.md

@@ -1,5 +1,11 @@
 # plugins-manager
 
+## 0.2.2
+
+### Patch Changes
+
+- 56fdb0c: Optional parameters are now also define as optional in types
+
 ## 0.2.1
 
 ### Patch Changes

packages/plugins-manager/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plugins-manager",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "publishConfig": {
     "access": "public"
   },

packages/search/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @rocket/search
 
+## 0.4.0
+
+### Minor Changes
+
+- 6cabdba: BREAKING: upgraded search to lit version 2
+
 ## 0.3.5
 
 ### Patch Changes

packages/search/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket/search",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "publishConfig": {
     "access": "public"
   },
@@ -41,11 +41,13 @@
     "search"
   ],
   "dependencies": {
-    "@lion/combobox": "^0.5.1",
+    "@lion/combobox": "^0.8.0",
-    "@open-wc/scoped-elements": "^1.3.2",
+    "@lion/core": "^0.18.0",
+    "@lion/listbox": "^0.10.1",
+    "@open-wc/scoped-elements": "^2.0.0-next.3",
     "chalk": "^4.0.0",
     "minisearch": "^3.0.2",
-    "plugins-manager": "^0.2.1",
+    "plugins-manager": "^0.2.2",
     "sax-wasm": "^2.0.0"
   }
 }

packages/search/src/RocketSearch.js

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import { html, LitElement, css } from 'lit-element';
+import { html, LitElement, css, repeat } from '@lion/core';
 import MiniSearch from 'minisearch';
-import { repeat } from 'lit-html/directives/repeat.js';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { RocketSearchCombobox } from './RocketSearchCombobox.js';
 import { RocketSearchOption } from './RocketSearchOption.js';
@@ -94,7 +93,7 @@ export class RocketSearch extends ScopedElementsMixin(LitElement) {
   }
 
   get combobox() {
-    return this.shadowRoot?.children[0];
+    return this.shadowRoot.querySelector('rocket-search-combobox');
   }
 
   /** @param {import('lit-element').PropertyValues } changedProperties */

packages/search/test-web/rocket-search.test.js

@@ -1,4 +1,5 @@
-import { expect, fixture as _fixture, html } from '@open-wc/testing';
+import { expect, fixture as _fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
 import { setViewport } from '@web/test-runner-commands';
 import { stubMethod } from 'hanbi';
 

rocket.config.js

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

yarn.lock

@@ -1096,6 +1096,13 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@esm-bundle/chai@^4.3.4":
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/@esm-bundle/chai/-/chai-4.3.4.tgz#74ed4a0794b3a9f9517ff235744ac6f4be0d34dc"
+  integrity sha512-6Tx35wWiNw7X0nLY9RMx8v3EL8SacCFW+eEZOE9Hc+XxmU5HFE2AFEg+GehUZpiyDGwVvPH75ckGlqC7coIPnA==
+  dependencies:
+    "@types/chai" "^4.2.12"
+
 "@lion/accordion@^0.4.2":
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/@lion/accordion/-/accordion-0.4.2.tgz#efeb56360113a2b68e182ff29ef0932edd17df8c"
@@ -1103,15 +1110,15 @@
   dependencies:
     "@lion/core" "0.16.0"
 
-"@lion/combobox@^0.5.1":
+"@lion/combobox@^0.8.0":
-  version "0.5.1"
+  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@lion/combobox/-/combobox-0.5.1.tgz#6395d5c34f0935aee32034584a253c1a2c6fa717"
+  resolved "https://registry.yarnpkg.com/@lion/combobox/-/combobox-0.8.0.tgz#ef60cfcfa55b659033900615efb207dd80708320"
-  integrity sha512-sOpJLCH8pzZAOohrqVnlTjC7L93tavXugSV2SqhVsFFnSQIWXytaeL8eJPlVBrTrmcOpns6AQX2uyBbeY6ZTsg==
+  integrity sha512-qjudhZ/UAbvPjJavWT/VZt9t76Xa0MFaqRnmX7Ga0acJhm29vtMi4r5BqniF/JfCucXz5ya3oFYNqxkOQcWReA==
   dependencies:
-    "@lion/core" "0.16.0"
+    "@lion/core" "0.18.0"
-    "@lion/form-core" "0.11.0"
+    "@lion/form-core" "0.14.1"
-    "@lion/listbox" "0.7.0"
+    "@lion/listbox" "0.10.1"
-    "@lion/overlays" "0.26.1"
+    "@lion/overlays" "0.28.1"
 
 "@lion/core@0.16.0":
   version "0.16.0"
@@ -1123,32 +1130,50 @@
     lit-element "~2.4.0"
     lit-html "^1.3.0"
 
-"@lion/form-core@0.11.0":
+"@lion/core@0.18.0", "@lion/core@^0.18.0":
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/@lion/form-core/-/form-core-0.11.0.tgz#83985baba62e11082b42ea84f3683f72a8f36fcf"
-  integrity sha512-opDXzTtVHJlRo+BLSI0dtSjbIz7PsJL80wnU8WAK3S+WNH5z2S37OBCoVvOVpXRpoqGAj5L/BmaJnHZeo6pPYw==
-  dependencies:
-    "@lion/core" "0.16.0"
-    "@lion/localize" "0.18.0"
-
-"@lion/listbox@0.7.0":
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/@lion/listbox/-/listbox-0.7.0.tgz#bd1d8cb25098387fd0ae1087f8dd641510f741f0"
-  integrity sha512-wHGqahRIjpTmMAvU/hDZyDGNhmjRj6FEYSWn7Z3ugE52D9a1PQd7HVc1cVVIRc71jC3w4n5ZYVeZChwR3N3fWw==
-  dependencies:
-    "@lion/core" "0.16.0"
-    "@lion/form-core" "0.11.0"
-
-"@lion/localize@0.18.0":
   version "0.18.0"
-  resolved "https://registry.yarnpkg.com/@lion/localize/-/localize-0.18.0.tgz#beaf8c161feb58ecab670892c06e7b524527b7e8"
+  resolved "https://registry.yarnpkg.com/@lion/core/-/core-0.18.0.tgz#475b872407829ab7860f50ff771c2e5ee957b204"
-  integrity sha512-+adOGlot4IItOy1udLKflZlO2fTKM7R0Ji7iZ5SEVG80XOZxC3RXjVM7mWSd5wqcCUe51j1P/tgKM3vDLF0RAw==
+  integrity sha512-tfSKvd/YvGY8JPqb3Nv4TV85nzgeXOxXfnnNVpAGGC0yoRK9jKR4FvRdqDROenbPsfPOVz9+uL/2fd+GJl6qKg==
+  dependencies:
+    "@open-wc/dedupe-mixin" "^1.2.18"
+    "@open-wc/scoped-elements" "^2.0.0-next.3"
+    lit "^2.0.0-rc.2"
+
+"@lion/form-core@0.14.1":
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/@lion/form-core/-/form-core-0.14.1.tgz#404e047e32ea56ae5318db6444809cf83089d5f3"
+  integrity sha512-WQQASer/vv0dyaxdp4nK2M+SqosCdk2JIyvShMmo9aqsTtUlKfyof/JszHj1e5pkydGHqC4x7ehN3gx4UiDk2g==
+  dependencies:
+    "@lion/core" "0.18.0"
+    "@lion/localize" "0.20.1"
+
+"@lion/listbox@0.10.1", "@lion/listbox@^0.10.1":
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/@lion/listbox/-/listbox-0.10.1.tgz#c6a6e4cebc4f76386c1261faf582c46e58f41a37"
+  integrity sha512-WrQ1/BiaEo3TBAQgFuRxqHTYlhLD4BZxp73Itlf9ooH6p/NlRsYKlppPfzWmhtoc7uJRbc9PDoo2krxvMFKxfA==
+  dependencies:
+    "@lion/core" "0.18.0"
+    "@lion/form-core" "0.14.1"
+
+"@lion/localize@0.20.1":
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/@lion/localize/-/localize-0.20.1.tgz#92b3e795b1cec1cffeac8e54ed9a19ad6fc934fc"
+  integrity sha512-su55r7wsNAYUl0s5J2ySv6KThIKAXt76nA/6OkCFGTS5e4LClCenqvK6jrhpGQKZ29I4OW4XQMFXTu/XlaKNMQ==
   dependencies:
     "@bundled-es-modules/message-format" "6.0.4"
-    "@lion/core" "0.16.0"
+    "@lion/core" "0.18.0"
-    singleton-manager "1.4.1"
+    singleton-manager "1.4.2"
 
-"@lion/overlays@0.26.1", "@lion/overlays@^0.26.1":
+"@lion/overlays@0.28.1":
+  version "0.28.1"
+  resolved "https://registry.yarnpkg.com/@lion/overlays/-/overlays-0.28.1.tgz#08f0d781a45208c7beef2730c66f42b571d49ab8"
+  integrity sha512-MiEkGtPIUHewGqay3VI++S6UXcTrSLt2Or0RxYFZfS64PIPMRPmKKsyW8xiouuKXWGV7vafP7apAauP8CxaY+g==
+  dependencies:
+    "@lion/core" "0.18.0"
+    "@popperjs/core" "^2.5.4"
+    singleton-manager "1.4.2"
+
+"@lion/overlays@^0.26.1":
   version "0.26.1"
   resolved "https://registry.yarnpkg.com/@lion/overlays/-/overlays-0.26.1.tgz#d1bfa4f5f97108982afa7b409ba4300f8b2d2ba5"
   integrity sha512-1FvphbR/yTQ1WtcB1gNuH772i9qAydQkI6NwibIw8QeOGXisA+6SChv2OHS7CijlpDJnDxNyX44LGdDM1/Pd8A==
@@ -1157,6 +1182,11 @@
     "@popperjs/core" "^2.5.4"
     singleton-manager "1.4.1"
 
+"@lit/reactive-element@^1.0.0-rc.1", "@lit/reactive-element@^1.0.0-rc.2":
+  version "1.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.0.0-rc.2.tgz#f24dba16ea571a08dca70f1783bd2ca5ec8de3ee"
+  integrity sha512-cujeIl5Ei8FC7UHf4/4Q3bRJOtdTe1vpJV/JEBYCggedmQ+2P8A2oz7eE+Vxi6OJ4nc0X+KZxXnBoH4QrEbmEQ==
+
 "@manypkg/find-root@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@manypkg/find-root/-/find-root-1.1.0.tgz#a62d8ed1cd7e7d4c11d9d52a8397460b5d4ad29f"
@@ -1212,14 +1242,6 @@
   resolved "https://registry.yarnpkg.com/@open-wc/dedupe-mixin/-/dedupe-mixin-1.3.0.tgz#0df5d438285fc3482838786ee81895318f0ff778"
   integrity sha512-UfdK1MPnR6T7f3svzzYBfu3qBkkZ/KsPhcpc3JYhsUY4hbpwNF9wEQtD4Z+/mRqMTJrKg++YSxIxE0FBhY3RIw==
 
-"@open-wc/scoped-elements@^1.2.4", "@open-wc/scoped-elements@^1.3.2":
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/@open-wc/scoped-elements/-/scoped-elements-1.3.2.tgz#6ae54c49731bbe8c3e0b5383c989f983dcdfacf5"
-  integrity sha512-DoP3XA8r03tGx+IrlJwP/voLuDFkyS56kvwhmXIhpESo7M5jMt5e0zScNrawj7EMe4b5gDaJjorx2Jza8FLaLw==
-  dependencies:
-    "@open-wc/dedupe-mixin" "^1.3.0"
-    lit-html "^1.0.0"
-
 "@open-wc/scoped-elements@^1.3.3":
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/@open-wc/scoped-elements/-/scoped-elements-1.3.3.tgz#fe008aef4d74fb00c553c900602960638fc1c7b0"
@@ -1228,6 +1250,24 @@
     "@open-wc/dedupe-mixin" "^1.3.0"
     lit-html "^1.0.0"
 
+"@open-wc/scoped-elements@^2.0.0-next.0":
+  version "2.0.0-next.3"
+  resolved "https://registry.yarnpkg.com/@open-wc/scoped-elements/-/scoped-elements-2.0.0-next.3.tgz#adbd9d6fddc67158fd11ffe78c5e11aefdaaf8af"
+  integrity sha512-9dT+0ea/RKO3s2m5H+U8gwG7m1jE89JhgWKI6FnkG4pE9xMx8KACoLZZcUfogVjb6/vKaIeoCj6Mqm+2HiqCeQ==
+  dependencies:
+    "@lit/reactive-element" "^1.0.0-rc.1"
+    "@open-wc/dedupe-mixin" "^1.3.0"
+    "@webcomponents/scoped-custom-element-registry" "0.0.1"
+
+"@open-wc/scoped-elements@^2.0.0-next.3":
+  version "2.0.0-next.4"
+  resolved "https://registry.yarnpkg.com/@open-wc/scoped-elements/-/scoped-elements-2.0.0-next.4.tgz#d8294358e3e8ad2ba44200ab805549fde49245f6"
+  integrity sha512-BMd5n5BHLi3FBhwhPbBuN7pZdi8I1CIQn10aKLZtg9aplVhN2BG1rwr0ANebXJ6fdq8m1PE1wQAaCXYCcEBTEQ==
+  dependencies:
+    "@lit/reactive-element" "^1.0.0-rc.1"
+    "@open-wc/dedupe-mixin" "^1.3.0"
+    "@webcomponents/scoped-custom-element-registry" "0.0.2"
+
 "@open-wc/semantic-dom-diff@^0.13.16":
   version "0.13.21"
   resolved "https://registry.yarnpkg.com/@open-wc/semantic-dom-diff/-/semantic-dom-diff-0.13.21.tgz#718b9ec5f9a98935fc775e577ad094ae8d8b7dea"
@@ -1240,32 +1280,29 @@
   dependencies:
     "@types/chai" "^4.2.11"
 
-"@open-wc/testing-helpers@^1.8.12":
+"@open-wc/testing-helpers@^2.0.0-next.0":
-  version "1.8.12"
+  version "2.0.0-next.0"
-  resolved "https://registry.yarnpkg.com/@open-wc/testing-helpers/-/testing-helpers-1.8.12.tgz#449865689b0283c117326c1e0975834406bb0855"
+  resolved "https://registry.yarnpkg.com/@open-wc/testing-helpers/-/testing-helpers-2.0.0-next.0.tgz#ece19e1c22ff91ae5f6ff2fae199719b7a7bfce7"
-  integrity sha512-+4exEHYvnFqI1RGDDIKFHPZ7Ws5NK1epvEku3zLaOYN3zc+huX19SndNc5+X++v8A+quN/iXbHlh80ROyNaYDA==
+  integrity sha512-94TL8IK05w1JyN8xt7t+vQBQYPdPy/JSJbWJ/ytvStou085SoDN6p1xCPh1PNhjm9LALc60nWM8qb2J2YRT8QA==
   dependencies:
-    "@open-wc/scoped-elements" "^1.2.4"
+    "@open-wc/scoped-elements" "^2.0.0-next.0"
-    lit-element "^2.2.1"
+    lit "^2.0.0-rc.1"
-    lit-html "^1.0.0"
 
-"@open-wc/testing@^2.5.32":
+"@open-wc/testing@^3.0.0-next.1":
-  version "2.5.32"
+  version "3.0.0-next.1"
-  resolved "https://registry.yarnpkg.com/@open-wc/testing/-/testing-2.5.32.tgz#8bbb65773f650deff06b06277df8cdacd4d6806f"
+  resolved "https://registry.yarnpkg.com/@open-wc/testing/-/testing-3.0.0-next.1.tgz#c5c08093439450ed2c871ad18a7ccef787ea15f4"
-  integrity sha512-vl8VwTG3CVLwLcd1mpts8D9xPptc6xPL/9AHEbQxX1IQsFBEiFQdARSp1+V/i7gK2+peXeotqrZ5NvoHxl/lLw==
+  integrity sha512-dDgbqIgNTizSugrya6iSh9s3VS2xsZ3HURFpRVTlKGbEE7OYrRHcBBe73DiSWLRPeYyagVZsOshTUPfTBGamwQ==
   dependencies:
+    "@esm-bundle/chai" "^4.3.4"
     "@open-wc/chai-dom-equals" "^0.12.36"
     "@open-wc/semantic-dom-diff" "^0.19.3"
-    "@open-wc/testing-helpers" "^1.8.12"
+    "@open-wc/testing-helpers" "^2.0.0-next.0"
     "@types/chai" "^4.2.11"
     "@types/chai-dom" "^0.0.9"
-    "@types/mocha" "^5.0.0"
+    "@types/mocha" "^5.2.7"
     "@types/sinon-chai" "^3.2.3"
-    chai "^4.2.0"
     chai-a11y-axe "^1.3.1"
-    chai-dom "^1.8.1"
     mocha "^6.2.2"
-    sinon-chai "^3.3.0"
 
 "@popperjs/core@^2.5.4":
   version "2.6.0"
@@ -1404,6 +1441,11 @@
   resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.2.14.tgz#44d2dd0b5de6185089375d976b4ec5caf6861193"
   integrity sha512-G+ITQPXkwTrslfG5L/BksmbLUA0M1iybEsmCWPqzSxsRRhJZimBKJkoMi8fr/CPygPTj4zO5pJH7I2/cm9M7SQ==
 
+"@types/chai@^4.2.12":
+  version "4.2.18"
+  resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.2.18.tgz#0c8e298dbff8205e2266606c1ea5fbdba29b46e4"
+  integrity sha512-rS27+EkB/RE1Iz3u0XtVL5q36MGDWbgYe7zWiodyKNUnthxY0rukK5V36eiUCtCisB7NN8zKYH6DO2M37qxFEQ==
+
 "@types/command-line-args@^5.0.0":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@types/command-line-args/-/command-line-args-5.0.0.tgz#484e704d20dbb8754a8f091eee45cdd22bcff28c"
@@ -1550,7 +1592,7 @@
   resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.1.tgz#283f669ff76d7b8260df8ab7a4262cc83d988256"
   integrity sha512-fZQQafSREFyuZcdWFAExYjBiCL7AUCdgsk80iO0q4yihYYdcIiH28CcuPTGFgLOCC8RlW49GSQxdHwZP+I7CNg==
 
-"@types/mocha@^5.0.0":
+"@types/mocha@^5.2.7":
   version "5.2.7"
   resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-5.2.7.tgz#315d570ccb56c53452ff8638738df60726d5b6ea"
   integrity sha512-NYrtPht0wGzhwe9+/idPaBB+TqkY9AhTvOLMkThm0IoEfLaiVQZwBwyJ5puCkO3AUCWrmcoePjp2mbFocKy4SQ==
@@ -1640,6 +1682,11 @@
   resolved "https://registry.yarnpkg.com/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-6.0.2.tgz#3a84cf5ec3249439015e14049bd3161419bf9eae"
   integrity sha512-dIPoZ3g5gcx9zZEszaxLSVTvMReD3xxyyDnQUjA6IYDG9Ba2AV0otMPs+77sG9ojB4Qr2N2Vk5RnKeuA0X/0bg==
 
+"@types/trusted-types@^1.0.1":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-1.0.6.tgz#569b8a08121d3203398290d602d84d73c8dcf5da"
+  integrity sha512-230RC8sFeHoT6sSUlRO6a8cAnclO06eeiq1QDfiv2FGCLWFvvERWgwIQD4FWqD9A69BN7Lzee4OXwoMVnnsWDw==
+
 "@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2", "@types/unist@^2.0.3":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"
@@ -1847,13 +1894,14 @@
   dependencies:
     glob "^7.0.0"
 
-"@web/rollup-plugin-html@^1.6.0":
+"@web/rollup-plugin-html@^1.8.0":
-  version "1.6.0"
+  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/@web/rollup-plugin-html/-/rollup-plugin-html-1.6.0.tgz#fd3f406fd6d74a0cded581953a3146fe9f0454ad"
+  resolved "https://registry.yarnpkg.com/@web/rollup-plugin-html/-/rollup-plugin-html-1.8.0.tgz#6be12acca2158f7aa105f1d6767ac8a95d5f02fc"
-  integrity sha512-m5xDI6ZhdAI2nfHwU3NXJ/dcDWghR+g/RrlAtIWYlj8NvXk/ZNqVVK1NbJrI/e5RlgDQ/+OycjmKgyAP9W1tWA==
+  integrity sha512-aVOPpbnpXsIt0G3vVvtUz2ioKP9zUKmbE6wcTcFD/ncxM72JzTsUmIQAITGaoZMFjAwhKBEPYBbySDJJF/MvAg==
   dependencies:
     "@web/parse5-utils" "^1.2.2"
     glob "^7.1.6"
+    html-minifier-terser "^5.1.1"
     parse5 "^6.0.1"
 
 "@web/rollup-plugin-import-meta-assets@^1.0.4":
@@ -1959,6 +2007,16 @@
     portfinder "^1.0.28"
     source-map "^0.7.3"
 
+"@webcomponents/scoped-custom-element-registry@0.0.1":
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/@webcomponents/scoped-custom-element-registry/-/scoped-custom-element-registry-0.0.1.tgz#196365260a019f87bddbded154ab09faf0e666fc"
+  integrity sha512-ef5/v4U2vCxrnSMpo41LSWTjBOXCQ4JOt4+Y6PaSd8ympYioPhOP6E1tKmIk2ppwLSjCKbTyYf7ocHvwDat7bA==
+
+"@webcomponents/scoped-custom-element-registry@0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@webcomponents/scoped-custom-element-registry/-/scoped-custom-element-registry-0.0.2.tgz#c863d163cb39c60063808e5ae23e06a1766fbe5f"
+  integrity sha512-lKCoZfKoE3FHvmmj2ytaLBB8Grxp4HaxfSzaGlIZN6xXnOILfpCO0PFJkAxanefLGJWMho4kRY5PhgxWFhmSOw==
+
 "@webcomponents/webcomponentsjs@^2.5.0":
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/@webcomponents/webcomponentsjs/-/webcomponentsjs-2.5.0.tgz#61b27785a6ad5bfd68fa018201fe418b118cb38d"
@@ -2558,6 +2616,14 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
+camel-case@^4.1.1:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-4.1.2.tgz#9728072a954f805228225a6deea6b38461e1bd5a"
+  integrity sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==
+  dependencies:
+    pascal-case "^3.1.2"
+    tslib "^2.0.3"
+
 camelcase-keys@^6.2.2:
   version "6.2.2"
   resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-6.2.2.tgz#5e755d6ba51aa223ec7d3d52f25778210f9dc3c0"
@@ -2587,15 +2653,10 @@ camelcase@^6.0.0, camelcase@^6.2.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
   integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
 
-caniuse-lite@^1.0.30001165:
+caniuse-lite@^1.0.30001165, caniuse-lite@^1.0.30001173:
-  version "1.0.30001170"
+  version "1.0.30001239"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001170.tgz#0088bfecc6a14694969e391cc29d7eb6362ca6a7"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001239.tgz"
-  integrity sha512-Dd4d/+0tsK0UNLrZs3CvNukqalnVTRrxb5mcQm8rHL49t7V5ZaTygwXkrq+FB+dVDf++4ri8eJnFEJAB8332PA==
+  integrity sha512-cyBkXJDMeI4wthy8xJ2FvDU6+0dtcZSJW3voUF8+e9f1bBeuvyZfc3PNbkOETyhbR+dGCPzn9E7MA3iwzusOhQ==
-
-caniuse-lite@^1.0.30001173:
-  version "1.0.30001174"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001174.tgz#0f2aca2153fd88ceb07a2bb982fc2acb787623c4"
-  integrity sha512-tqClL/4ThQq6cfFXH3oJL4rifFBeM6gTkphjao5kgwMaW9yn0tKgQLAEfKzDwj6HQWCB/aWo8kTFlSvIN8geEA==
 
 ccount@^1.0.0:
   version "1.1.0"
@@ -2617,11 +2678,6 @@ chai-a11y-axe@^1.3.1:
   dependencies:
     axe-core "^4.0.2"
 
-chai-dom@^1.8.1:
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/chai-dom/-/chai-dom-1.8.2.tgz#e06353baeafa8fddaaabda96a67f859c111a3c7c"
-  integrity sha512-kk2SnCuJliouO5M58OjA7M8VXN338WAxHOm+LbpjeL09pJgRpXugSC5aj8uwFm/6Lmpcdtq7hf+DldTdBm5/Sw==
-
 chai@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/chai/-/chai-4.2.0.tgz#760aa72cf20e3795e84b12877ce0e83737aa29e5"
@@ -2753,7 +2809,7 @@ ci-info@^2.0.0:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
   integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
 
-clean-css@^4.1.11:
+clean-css@^4.1.11, clean-css@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
   integrity sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==
@@ -2935,6 +2991,11 @@ commander@^2.19.0, commander@^2.2.0, commander@^2.20.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
+commander@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
 commander@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
@@ -3434,6 +3495,14 @@ doctypes@^1.1.0:
   resolved "https://registry.yarnpkg.com/doctypes/-/doctypes-1.1.0.tgz#ea80b106a87538774e8a3a4a5afe293de489e0a9"
   integrity sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk=
 
+dot-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
+  integrity sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+
 dynamic-import-polyfill@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/dynamic-import-polyfill/-/dynamic-import-polyfill-0.1.1.tgz#e1f9eb1876ee242bd56572f8ed4df768e143083f"
@@ -4491,7 +4560,7 @@ hastscript@^6.0.0:
     property-information "^5.0.0"
     space-separated-tokens "^1.0.0"
 
-he@1.2.0:
+he@1.2.0, he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
@@ -4506,6 +4575,19 @@ html-escaper@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
+html-minifier-terser@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#922e96f1f3bb60832c2634b79884096389b1f054"
+  integrity sha512-ZPr5MNObqnV/T9akshPKbVgyOqLmy+Bxo7juKCfTfnjNniTAMdy4hz21YQqoofMBJD2kdREaqPPdThoR78Tgxg==
+  dependencies:
+    camel-case "^4.1.1"
+    clean-css "^4.2.3"
+    commander "^4.1.1"
+    he "^1.2.0"
+    param-case "^3.0.3"
+    relateurl "^0.2.7"
+    terser "^4.6.3"
+
 html-void-elements@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-1.0.5.tgz#ce9159494e86d95e45795b166c2021c2cfca4483"
@@ -5335,18 +5417,42 @@ listr2@^3.2.2:
     rxjs "^6.6.3"
     through "^2.3.8"
 
-lit-element@^2.0.1, lit-element@^2.2.1, lit-element@^2.4.0, lit-element@~2.4.0:
+lit-element@^2.0.1, lit-element@^2.4.0, lit-element@~2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-2.4.0.tgz#b22607a037a8fc08f5a80736dddf7f3f5d401452"
   integrity sha512-pBGLglxyhq/Prk2H91nA0KByq/hx/wssJBQFiYqXhGDvEnY31PRGYf1RglVzyLeRysu0IHm2K0P196uLLWmwFg==
   dependencies:
     lit-html "^1.1.1"
 
+lit-element@^3.0.0-rc.2:
+  version "3.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-3.0.0-rc.2.tgz#883d0b6fd7b846226d360699d1b713da5fc7e1b7"
+  integrity sha512-2Z7DabJ3b5K+p5073vFjMODoaWqy5PIaI4y6ADKm+fCGc8OnX9fU9dMoUEBZjFpd/bEFR9PBp050tUtBnT9XTQ==
+  dependencies:
+    "@lit/reactive-element" "^1.0.0-rc.2"
+    lit-html "^2.0.0-rc.3"
+
 lit-html@^1.0.0, lit-html@^1.1.1, lit-html@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.3.0.tgz#c80f3cc5793a6dea6c07172be90a70ab20e56034"
   integrity sha512-0Q1bwmaFH9O14vycPHw8C/IeHMk/uSDldVLIefu/kfbTBGIc44KGH6A8p1bDfxUfHdc8q6Ct7kQklWoHgr4t1Q==
 
+lit-html@^2.0.0-rc.3:
+  version "2.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-2.0.0-rc.3.tgz#1c216e548630e18d3093d97f4e29563abce659af"
+  integrity sha512-Y6P8LlAyQuqvzq6l/Nc4z5/P5M/rVLYKQIRxcNwSuGajK0g4kbcBFQqZmgvqKG+ak+dHZjfm2HUw9TF5N/pkCw==
+  dependencies:
+    "@types/trusted-types" "^1.0.1"
+
+lit@^2.0.0-rc.1, lit@^2.0.0-rc.2:
+  version "2.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/lit/-/lit-2.0.0-rc.2.tgz#724a2d621aa098001d73bf7106f3a72b7b5948ef"
+  integrity sha512-BOCuoJR04WaTV8UqTKk09cNcQA10Aq2LCcBOiHuF7TzWH5RNDsbCBP5QM9sLBSotGTXbDug/gFO08jq6TbyEtw==
+  dependencies:
+    "@lit/reactive-element" "^1.0.0-rc.2"
+    lit-element "^3.0.0-rc.2"
+    lit-html "^2.0.0-rc.3"
+
 load-json-file@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
@@ -5468,6 +5574,13 @@ longest@^1.0.1:
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
   integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=
 
+lower-case@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
+  integrity sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==
+  dependencies:
+    tslib "^2.0.3"
+
 lru-cache@^4.0.1, lru-cache@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
@@ -5989,6 +6102,14 @@ nise@^4.0.4:
     just-extend "^4.0.2"
     path-to-regexp "^1.7.0"
 
+no-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"
+  integrity sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==
+  dependencies:
+    lower-case "^2.0.2"
+    tslib "^2.0.3"
+
 node-abi@^2.21.0:
   version "2.26.0"
   resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-2.26.0.tgz#355d5d4bc603e856f74197adbf3f5117a396ba40"
@@ -6335,6 +6456,14 @@ p-try@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
+param-case@^3.0.3:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-3.0.4.tgz#7d17fe4aa12bde34d4a77d91acfb6219caad01c5"
+  integrity sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==
+  dependencies:
+    dot-case "^3.0.4"
+    tslib "^2.0.3"
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -6432,6 +6561,14 @@ parseurl@^1.3.2, parseurl@~1.3.2:
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
   integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
 
+pascal-case@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-3.1.2.tgz#b48e0ef2b98e205e7c1dae747d0b1508237660eb"
+  integrity sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+
 path-exists@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
@@ -7166,6 +7303,11 @@ rehype-stringify@^8.0.0:
   dependencies:
     hast-util-to-html "^7.1.1"
 
+relateurl@^0.2.7:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
+  integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
+
 remark-autolink-headings@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/remark-autolink-headings/-/remark-autolink-headings-6.0.1.tgz#074470b8ec7714a0f06fa151e293152bf9723df9"
@@ -7624,10 +7766,10 @@ singleton-manager@1.4.1:
   resolved "https://registry.yarnpkg.com/singleton-manager/-/singleton-manager-1.4.1.tgz#0a9cd1db2b26e5cbc4ecdc20d5a16f284b36aabb"
   integrity sha512-HOvKT/WcHvl2cLYGqmO6MaC2J4wAA82LntGwtLn6avnTq15UDLCnSRVXedmglVooLbQGVsQJ+dQz2sKz+2GUZA==
 
-sinon-chai@^3.3.0:
+singleton-manager@1.4.2:
-  version "3.5.0"
+  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/sinon-chai/-/sinon-chai-3.5.0.tgz#c9a78304b0e15befe57ef68e8a85a00553f5c60e"
+  resolved "https://registry.yarnpkg.com/singleton-manager/-/singleton-manager-1.4.2.tgz#4649acafca3eccf987d828ab16369ee59c4a22a5"
-  integrity sha512-IifbusYiQBpUxxFJkR3wTU68xzBN0+bxCScEaKMjBvAQERg6FnTTc1F17rseLb1tjmkJ23730AXpFI0c47FgAg==
+  integrity sha512-3/K7K61TiN0+tw32HRC3AZQBacN0Ky/NmHEnhofFPEFROqZ5T6BXK45Z94OQsvuFD2euOVOU40XDNeTal63Baw==
 
 sinon@^9.2.3:
   version "9.2.3"
@@ -7757,7 +7899,7 @@ socket.io@2.1.1:
     socket.io-client "2.1.1"
     socket.io-parser "~3.2.0"
 
-source-map-support@^0.5.17, source-map-support@~0.5.19:
+source-map-support@^0.5.17, source-map-support@~0.5.12, source-map-support@~0.5.19:
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
   integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
@@ -7770,7 +7912,7 @@ source-map@^0.5.0, source-map@~0.5.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0:
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@@ -8139,6 +8281,15 @@ term-size@^2.1.0:
   resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.2.1.tgz#2a6a54840432c2fb6320fea0f415531e90189f54"
   integrity sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==
 
+terser@^4.6.3:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
+  integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
+  dependencies:
+    commander "^2.20.0"
+    source-map "~0.6.1"
+    source-map-support "~0.5.12"
+
 terser@^5.0.0:
   version "5.5.1"
   resolved "https://registry.yarnpkg.com/terser/-/terser-5.5.1.tgz#540caa25139d6f496fdea056e414284886fb2289"
@@ -8276,6 +8427,11 @@ tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+tslib@^2.0.3:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.2.0.tgz#fb2c475977e35e241311ede2693cee1ec6698f5c"
+  integrity sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==
+
 tsscmp@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/tsscmp/-/tsscmp-1.0.6.tgz#85b99583ac3589ec4bfef825b5000aa911d605eb"
@@ -8347,10 +8503,10 @@ type-is@^1.6.16:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
-typescript@^4.1.3:
+typescript@^4.3.2:
-  version "4.1.3"
+  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.3.tgz#519d582bd94cba0cf8934c7d8e8467e473f53bb7"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.2.tgz#399ab18aac45802d6f2498de5054fcbbe716a805"
-  integrity sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg==
+  integrity sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw==
 
 typical@^4.0.0:
   version "4.0.0"