Version Packages

docs/_assets/body.css

@@ -0,0 +1,10 @@
+html {
+  --demo-background-color: #eee;
+  --demo-color: #222;
+}
+
+html[theme="dark"] body {
+  background: #333;
+  --demo-background-color: #888;
+  --demo-color: #eee;
+}

docs/_includes/_joiningBlocks/head/site.njk

@@ -7,3 +7,5 @@
   rel="stylesheet"
 />
 <meta name="twitter:creator" content="@modern_web_dev" />
+
+<link rel="stylesheet" href="{{ '/_assets/body.css' | asset | url }}" mdjs-use>

docs/docs/configuration/service-worker.md

@@ -0,0 +1,45 @@
+# Configuration >> Service Worker ||30
+
+Rocket does come with a default service worker that will
+
+- cache already visited pages
+- cache assets of visited pages (up to 100 files then it replaces older entries)
+- reload the page if a newer html page version is available on service worker activation
+
+## Adjusting the file name
+
+Changing the service worker file name can be quite a hassle so you can adjust generate file name via a config.
+
+👉 `rocket.config.js`
+
+```js
+export default {
+  serviceWorkerName: 'my-service-worker-name.js',
+};
+```
+
+## Meet the Service Worker
+
+The default service worker will work for many scenarios however your needs my vary.
+To enable different service worker strategies you can replace the default service worker code by providing a file at `_assets/service-worker.js`.
+This file will be auto transformed and generated in the root of the website using the defined `serviceWorkerName`.
+
+For inspiration, you can take a look at the default config.
+
+[https://github.com/modernweb-dev/rocket/blob/main/packages/cli/preset/\_assets/service-worker.js](https://github.com/modernweb-dev/rocket/blob/main/packages/cli/preset/_assets/service-worker.js)
+
+Be sure to check out [workbox](https://developers.google.com/web/tools/workbox) for more service worker magic.
+
+And if you wanna have a 30 minutes crash course we highly recommend the talk [Service Workers For The Rest Of Us](https://vimeo.com/362260166) by [Philip Walton](https://twitter.com/philwalton).
+
+## Registration
+
+The registration happens via another file that you can also overwrite at `_assets/scripts/registerServiceWorker.js`.
+
+Below you find the default implementation.
+
+<!-- prettier-ignore-start -->
+```js
+{{ '/_assets/scripts/registerServiceWorker.js' | asset | toAbsPath | inlineFilePath; }}
+```
+<!-- prettier-ignore-end -->

docs/docs/markdown-javascript/assets/demo-element.js

@@ -0,0 +1,69 @@
+class DemoElement extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    this.platform = 'the web';
+    this.language = 'en-US';
+    this.theme = 'light';
+
+    this.observer = new MutationObserver(this.updateData);
+  }
+
+  updateData = () => {
+    this.platform = document.documentElement.getAttribute('platform') || 'the web';
+    this.language = document.documentElement.getAttribute('data-lang') || 'en-US';
+    this.theme = document.documentElement.getAttribute('theme') || 'light';
+    this.requestUpdate();
+  };
+
+  connectedCallback() {
+    this.updateData();
+
+    this.observer.observe(document.documentElement, { attributes: true });
+  }
+
+  requestUpdate() {
+    this.shadowRoot.innerHTML = this.render();
+  }
+
+  render() {
+    return `
+      <style>
+        :host {
+          display: block;
+          background: var(--demo-background-color);
+          color: var(--demo-color);
+          padding: 10px;
+        }
+
+        :host[platform~="web"] {
+          border-bottom: 2px solid #333;
+        }
+
+        @media screen and (min-width: 640px) {
+          .about {
+            display: flex;
+          }
+          .about ul {
+            width: 50%;
+          }
+        }
+      </style>
+
+      <p>Hello I am DemoElement 👋</p>
+      <div class="about">
+        <ul>
+          <li>My purpose is to demonstrate how an element can adopt to different environments</li>
+          <li>I like <strong>${this.platform}</strong></li>
+        </ul>
+        <ul>
+          <li>My mother languages is <strong>${this.language}</strong></li>
+          <li>I feel very comfortable in the <strong>${this.theme}</strong></li>
+        </ul>
+      </div>
+    `;
+  }
+}
+
+customElements.define('demo-element', DemoElement);

docs/docs/markdown-javascript/overview.md

@@ -56,8 +56,8 @@ mdjs comes with some additional helpers you can choose to import:
 
 ````md
 ```js script
-import '@mdjs/mdjs-story/mdjs-story.js';
-import '@mdjs/mdjs-preview/mdjs-preview.js';
+import '@mdjs/mdjs-story/define';
+import '@mdjs/mdjs-preview/define';
 ```
 ````
 
@@ -65,8 +65,8 @@ Once loaded you can use them like so:
 
 ````md
 ```js script
-import '@mdjs/mdjs-story/mdjs-story.js';
-import '@mdjs/mdjs-preview/mdjs-preview.js';
+import '@mdjs/mdjs-story/define';
+import '@mdjs/mdjs-preview/define';
 ```
 ````
 
@@ -118,8 +118,8 @@ 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/mdjs-story.js';
-import '@mdjs/mdjs-preview/mdjs-preview.js';
+import '@mdjs/mdjs-story/define';
+import '@mdjs/mdjs-preview/define';
 import { html } from 'lit-html';
 ```
 
@@ -132,31 +132,6 @@ export const header = () => {
 
 ## Supported Systems
 
-### es-dev-server
-
-Preview your mdjs readme with live demos and auto reload.
-
-- Add to your `package.json`:
-
-  ```json
-  "scripts": {
-    "start": "es-dev-server",
-  }
-  ```
-
-- Create a `es-dev-server.config.js` in the root of your repository.
-
-  ```js
-  const { mdjsTransformer } = require('@mdjs/core');
-
-  module.exports = {
-    nodeResolve: true,
-    open: 'README.md',
-    watch: true,
-    responseTransformers: [mdjsTransformer],
-  };
-  ```
-
 ### Storybook
 
 Please check out [@open-wc/demoing-storybook](https://open-wc.org/demoing/) for a fully integrated setup.

docs/docs/markdown-javascript/preview.md

@@ -2,18 +2,165 @@
 
 You can showcase live running code by annotating a code block with `js preview-story`.
 
-````md
-```js preview-story
-import { html } from 'lit-html';
+## Features
 
-export const foo = () => html` <p>my html</p> `;
+- Shows components inside the page as they are
+- You can enable “Simulation Mode” to break them out
+- Simulation mode renders in an iframe to supporting media queries and isolated Simulation settings
+- Simulation Settings
+  - Style (windows, mac, android, iOS)
+  - Size (small, medium, large, Galaxy S5, iPhone X, iPad …)
+  - Automatic Height
+  - Theme (light, dark)
+  - Language (en, nl, …)
+- Settings are ”global” for all Simulators (e.g. changing one will change all)
+- Settings can be remembered for other pages / return visits
+
+```js script
+import { html } from 'lit-html';
+import './assets/demo-element.js';
+```
+
+## JavaScript Story
+
+````md
+```js script
+import { html } from 'lit-html';
+import './assets/demo-element.js';
+```
+
+```js preview-story
+export const foo = () => html`<demo-element></demo-element>`;
 ```
 ````
 
 will result in
 
 ```js preview-story
-import { html } from 'lit-html';
-
-export const foo = () => html` <p>my html</p> `;
+export const foo = () => html` <demo-element></demo-element> `;
+```
+
+## HTML Story
+
+````md
+```html preview-story
+<demo-element></demo-element>
+```
+````
+
+will result in
+
+```html preview-story
+<demo-element></demo-element>
+```
+
+## Setup Simulation Mode
+
+For simulation mode we need a dedicated html file that will be used as an iframe target while loading stories.
+
+The fastest way to create such a file is to use the `layout-simulator` layout.
+
+Create a file `docs/simulator.md` with the following content.
+
+```md
+---
+layout: layout-simulator
+eleventyExcludeFromCollections: true
+excludeFromSearch: true
+---
+```
+
+Once you have that you need to configure it for the story renderer by setting it in your `rocket.config.js`.
+
+```js
+export default {
+  setupUnifiedPlugins: [
+    adjustPluginOptions('mdjsSetupCode', {
+      simulationSettings: { simulatorUrl: '/simulator/' },
+    }),
+  ],
+};
+```
+
+<inline-notification type="tip">
+
+You can freely choose the path for the "simulator" by creating the md file in a different folder and adjusting the path in the config.
+
+</inline-notification>
+
+## Simulator states
+
+To simulate these stats that usually come from the device itself we put those infos on the document tag.
+
+We can simulate the following settings
+
+1. `platform`
+   Adopting styles and behavior depending on which device platform you are.
+   ```html
+   <html platform="web"></html>
+   <html platform="android"></html>
+   <html platform="ios"></html>
+   <!-- potentially later -->
+   <html platform="web-windows"></html>
+   <html platform="web-mac"></html>
+   ```
+2. `theme`
+   Adjust your styles based on a theme - light/dark are the default but you can add as many as you want.
+   ```html
+   <html theme="light"></html>
+   <html theme="dark"></html>
+   ```
+3. `language`
+   Best to relay on `data-lang` as `lang` often gets changes by translations services which may interfere with your translation loading system.
+   ```html
+   <html lang="en-US" data-lang="en-US"></html>
+   <html lang="de-DE" data-lang="de-DE"></html>
+   ```
+
+If you want to react to such document changes you can use an [MutationObserver](https://developer.mozilla.org/de/docs/Web/API/MutationObserver).
+
+For a vanilla web component it could look something like this:
+
+```js
+class DemoElement extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    this.platform = 'the web';
+    this.language = 'en-US';
+    this.theme = 'light';
+
+    this.observer = new MutationObserver(this.updateData);
+  }
+
+  updateData = () => {
+    this.platform = document.documentElement.getAttribute('platform') || 'the web';
+    this.language = document.documentElement.getAttribute('data-lang') || 'en-US';
+    this.theme = document.documentElement.getAttribute('theme') || 'light';
+    this.requestUpdate();
+  };
+
+  connectedCallback() {
+    this.updateData();
+
+    this.observer.observe(document.documentElement, { attributes: true });
+  }
+
+  requestUpdate() {
+    this.shadowRoot.innerHTML = this.render();
+  }
+
+  render() {
+    return `
+      ...
+    `;
+  }
+}
+
+customElements.define('demo-element', DemoElement);
+```
+
+```js script
+import '@rocket/launch/inline-notification/inline-notification.js';
 ```

docs/docs/markdown-javascript/story.md

@@ -2,10 +2,16 @@
 
 You can showcase live running code by annotating a code block with `js story`.
 
-````md
-```js story
+```js script
 import { html } from 'lit-html';
+```
 
+````md
+```js script
+import { html } from 'lit-html';
+```
+
+```js story
 export const foo = () => html` <p>my html</p> `;
 ```
 ````
@@ -13,7 +19,5 @@ export const foo = () => html` <p>my html</p> `;
 will result in
 
 ```js story
-import { html } from 'lit-html';
-
 export const foo = () => html` <p>my html</p> `;
 ```

docs/docs/tools/rollup-config.md

@@ -8,7 +8,6 @@ You write modern JavaScript using the latest browser features. Rollup will optim
 - Set HTML or JavaScript as input and/or output
 - Optimized for browsers which support modules
 - Loads polyfills using feature detection
-- Generates a service worker
 - Minifies JavaScript
 - Minifies lit-html templates
 

docs/guides/go-live/social-media.md

@@ -5,7 +5,7 @@ For that reason Rocket creates those automatically with the title, parent title,
 
 It will look like this but with your logo:
 
-<img src="{{ socialMediaImage }}" width="1200" height="630" alt="Social Media Image of this page" style="border: 1px solid #000" />
+<img src="{{ socialMediaImage | url }}" width="1200" height="630" alt="Social Media Image of this page" style="border: 1px solid #000" />
 
 There are multiple ways you can modify it.
 

docs/simulator.md

@@ -0,0 +1,5 @@
+---
+layout: layout-simulator
+eleventyExcludeFromCollections: true
+excludeFromSearch: true
+---

packages/building-rollup/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @rocket/building-rollup
 
+## 0.3.0
+
+### Minor Changes
+
+- 2724f07: Stop auto generating a service worker from a template. Setup your own and then bundle via `createServiceWorkerConfig`.
+
+## 0.2.0
+
+### Minor Changes
+
+- bad4686: Preserve attributes on script tags. Preserve export names.
+
 ## 0.1.3
 
 ### Patch Changes

packages/building-rollup/index.js

@@ -6,3 +6,7 @@
 export { createBasicConfig, createBasicMetaConfig } from './src/createBasicConfig.js';
 export { createSpaConfig, createSpaMetaConfig } from './src/createSpaConfig.js';
 export { createMpaConfig, createMpaMetaConfig } from './src/createMpaConfig.js';
+export {
+  createServiceWorkerConfig,
+  createServiceWorkerMetaConfig,
+} from './src/createServiceWorkerConfig.js';

packages/building-rollup/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket/building-rollup",
-  "version": "0.1.3",
+  "version": "0.3.0",
   "publishConfig": {
     "access": "public"
   },
@@ -13,8 +13,8 @@
   },
   "author": "Modern Web <hello@modern-web.dev> (https://modern-web.dev/)",
   "homepage": "https://rocket.modern-web.dev/docs/tools/building-rollup/",
-  "type": "module",
   "main": "./index.js",
+  "type": "module",
   "exports": {
     ".": "./index.js"
   },
@@ -55,11 +55,16 @@
     "@babel/preset-env": "^7.12.11",
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-node-resolve": "^11.0.1",
-    "@web/rollup-plugin-html": "^1.4.0",
+    "@rollup/plugin-replace": "^2.4.2",
+    "@web/rollup-plugin-html": "^1.6.0",
     "@web/rollup-plugin-import-meta-assets": "^1.0.4",
-    "@web/rollup-plugin-polyfills-loader": "^1.0.3",
+    "@web/rollup-plugin-polyfills-loader": "^1.1.0",
     "browserslist": "^4.16.1",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-workbox": "^6.1.0"
+    "workbox-broadcast-update": "^6.1.5",
+    "workbox-cacheable-response": "^6.1.5",
+    "workbox-expiration": "^6.1.5",
+    "workbox-routing": "^6.1.5",
+    "workbox-strategies": "^6.1.5"
   }
 }

packages/building-rollup/src/createBasicConfig.js

@@ -22,7 +22,7 @@ export function createBasicMetaConfig(userConfig = { output: {} }) {
   const assetName = `[${developmentMode ? 'name' : 'hash'}][extname]`;
 
   const config = {
-    preserveEntrySignatures: false,
+    preserveEntrySignatures: 'strict',
     treeshake: !developmentMode,
     setupPlugins: [],
     ...userConfig,

packages/building-rollup/src/createMpaConfig.js

@@ -15,10 +15,6 @@ export function createMpaMetaConfig(userConfig = { output: {}, setupPlugins: []
     adjustPluginOptions('html', {
       flattenOutput: false,
     }),
-    adjustPluginOptions('workbox', config => {
-      delete config.navigateFallback;
-      return config;
-    }),
     ...config.setupPlugins,
   ];
 

packages/building-rollup/src/createServiceWorkerConfig.js

@@ -0,0 +1,91 @@
+import resolve from '@rollup/plugin-node-resolve';
+import { terser } from 'rollup-plugin-terser';
+import babelPkg from '@rollup/plugin-babel';
+import replace from '@rollup/plugin-replace';
+
+import { metaConfigToRollupConfig } from 'plugins-manager';
+
+const { babel } = babelPkg;
+
+export function createServiceWorkerConfig(userConfig) {
+  const { config, metaPlugins } = createServiceWorkerMetaConfig(userConfig);
+  return metaConfigToRollupConfig(config, metaPlugins);
+}
+
+export function createServiceWorkerMetaConfig(userConfig = { output: {} }) {
+  const developmentMode =
+    typeof userConfig.developmentMode !== undefined
+      ? userConfig.developmentMode
+      : !!process.env.ROLLUP_WATCH;
+  delete userConfig.developmentMode;
+
+  const config = {
+    treeshake: !developmentMode,
+    setupPlugins: [],
+    ...userConfig,
+
+    output: {
+      format: 'iife',
+      file: 'service-worker.js',
+      ...userConfig.output,
+    },
+  };
+
+  let metaPlugins = [
+    {
+      name: 'node-resolve',
+      plugin: resolve,
+      options: {
+        moduleDirectories: ['node_modules', 'web_modules'],
+      },
+    },
+    {
+      name: 'replace',
+      plugin: replace,
+      options: {
+        'process.env.NODE_ENV': JSON.stringify(developmentMode ? 'development' : 'production'),
+      },
+    },
+    {
+      name: 'babel',
+      plugin: babel,
+      options: {
+        babelHelpers: 'bundled',
+        compact: true,
+        presets: [
+          [
+            '@babel/preset-env',
+            {
+              targets: [
+                'last 3 Chrome major versions',
+                'last 3 ChromeAndroid major versions',
+                'last 3 Firefox major versions',
+                'last 3 Edge major versions',
+                'last 3 Safari major versions',
+                'last 3 iOS major versions',
+              ],
+              useBuiltIns: false,
+              shippedProposals: true,
+              modules: false,
+              bugfixes: true,
+            },
+          ],
+        ],
+      },
+    },
+    {
+      name: 'terser',
+      plugin: terser,
+      options: {
+        mangle: {
+          toplevel: true,
+          properties: {
+            regex: /(^_|_$)/,
+          },
+        },
+      },
+    },
+  ];
+
+  return { config, metaPlugins, developmentMode };
+}

packages/building-rollup/src/createSpaConfig.js

@@ -1,6 +1,4 @@
-import path from 'path';
 import { rollupPluginHTML } from '@web/rollup-plugin-html';
-import { generateSW } from 'rollup-plugin-workbox';
 import { importMetaAssets } from '@web/rollup-plugin-import-meta-assets';
 import { polyfillsLoader } from '@web/rollup-plugin-polyfills-loader';
 import { metaConfigToRollupConfig } from 'plugins-manager';
@@ -37,31 +35,6 @@ export function createSpaMetaConfig(userConfig = { output: {} }) {
       options: {
         rootDir,
         absoluteBaseUrl,
-        injectServiceWorker: true,
-        serviceWorkerPath: path.join(config.output.dir, 'service-worker.js'),
-      },
-    },
-    {
-      name: 'workbox',
-      plugin: generateSW,
-      options: {
-        // Keep 'legacy-*.js' just for retro compatibility
-        globIgnores: ['polyfills/*.js', 'legacy-*.js', 'nomodule-*.js'],
-        navigateFallback: '/index.html',
-        // where to output the generated sw
-        swDest: path.join(config.output.dir, 'service-worker.js'),
-        // directory to match patterns against to be precached
-        globDirectory: path.join(config.output.dir),
-        // cache any html js and css by default
-        globPatterns: ['**/*.{html,js,css,webmanifest}', '**/*-search-index.json'],
-        skipWaiting: true,
-        clientsClaim: true,
-        runtimeCaching: [
-          {
-            urlPattern: 'polyfills/*.js',
-            handler: 'CacheFirst',
-          },
-        ],
       },
     },
     {

packages/building-rollup/test-node/createConfig.test.js

@@ -9,13 +9,13 @@ describe('plugin count', () => {
     expect(config.plugins.length).to.equal(3);
   });
 
-  it('createSpaConfig has 7 plugins', () => {
+  it('createSpaConfig has 6 plugins', () => {
     const config = createSpaConfig();
-    expect(config.plugins.length).to.equal(7);
+    expect(config.plugins.length).to.equal(6);
   });
 
-  it('createMpaConfig has 7 plugins', () => {
+  it('createMpaConfig has 6 plugins', () => {
     const config = createMpaConfig();
-    expect(config.plugins.length).to.equal(7);
+    expect(config.plugins.length).to.equal(6);
   });
 });

packages/building-rollup/test-node/createMpaConfig.test.js

@@ -26,10 +26,7 @@ async function execute(configString) {
   const config = (await import(configPath)).default;
   await buildAndWrite(config);
 
-  return async (
-    fileName,
-    { stripServiceWorker = false, stripToBody = false, stripStartEndWhitespace = true } = {},
-  ) => {
+  return async (fileName, { stripToBody = false, stripStartEndWhitespace = true } = {}) => {
     let text = await fs.promises.readFile(
       path.join(config.output.dir, fileName.split('/').join(path.sep)),
     );
@@ -39,11 +36,6 @@ async function execute(configString) {
       const bodyCloseTagStart = text.indexOf('</body>');
       text = text.substring(bodyOpenTagEnd, bodyCloseTagStart);
     }
-    if (stripServiceWorker) {
-      const scriptOpenTagEnd = text.indexOf('<script inject-service-worker');
-      const scriptCloseTagStart = text.indexOf('</script>', scriptOpenTagEnd) + 9;
-      text = text.substring(0, scriptOpenTagEnd) + text.substring(scriptCloseTagStart);
-    }
     if (stripStartEndWhitespace) {
       text = text.trim();
     }
@@ -57,25 +49,26 @@ describe('createMapConfig', () => {
 
     const indexHtml = await readOutput('index.html', {
       stripToBody: true,
-      stripServiceWorker: true,
     });
     expect(indexHtml).to.equal('<h1>Only static HTML content in index.html</h1>');
 
     const subHtmlIndexHtml = await readOutput('sub-html/index.html', {
       stripToBody: true,
-      stripServiceWorker: true,
     });
     expect(subHtmlIndexHtml).to.equal('<h1>Only static HTML content in sub-html/index.html</h1>');
 
     const subJsIndexHtml = await readOutput('sub-js/index.html', {
       stripToBody: true,
-      stripServiceWorker: true,
     });
     expect(subJsIndexHtml).to.equal(
       '<h1>Has js in sub-js/index.html</h1>\n\n\n<script type="module" src="../sub-js.js"></script>',
     );
 
-    const serviceWorkerJs = await readOutput('service-worker.js');
-    expect(serviceWorkerJs).to.include('Promise'); // not empty string might be enough...
+    const subJsAbsoluteIndexHtml = await readOutput('sub-js-absolute/index.html', {
+      stripToBody: true,
+    });
+    expect(subJsAbsoluteIndexHtml).to.equal(
+      '<h1>Has js in sub-js-absolute/index.html</h1>\n\n\n<script type="module" src="../sub-js-absolute.js"></script>',
+    );
   });
 });

packages/building-rollup/test-node/fixtures/mpa/sub-js-absolute/index.html

@@ -0,0 +1,2 @@
+<h1>Has js in sub-js-absolute/index.html</h1>
+<script type="module" src="/sub-js-absolute/sub-js-absolute.js"></script>

packages/check-html-links/CHANGELOG.md

@@ -1,5 +1,11 @@
 # check-html-links
 
+## 0.2.2
+
+### Patch Changes
+
+- 66c2d78: fix: windows path issue
+
 ## 0.2.1
 
 ### Patch Changes

packages/check-html-links/package.json

@@ -1,6 +1,6 @@
 {
   "name": "check-html-links",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "publishConfig": {
     "access": "public"
   },
@@ -13,11 +13,11 @@
   },
   "author": "Modern Web <hello@modern-web.dev> (https://modern-web.dev/)",
   "homepage": "https://rocket.modern-web.dev/docs/tools/check-html-links/",
+  "main": "./index.js",
   "bin": {
     "check-html-links": "src/cli.js"
   },
   "type": "module",
-  "main": "./index.js",
   "exports": {
     ".": "./index.js"
   },

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

@@ -6,6 +6,7 @@ import { createRequire } from 'module';
 
 import { listFiles } from './listFiles.js';
 import path from 'path';
+import slash from 'slash';
 
 /** @typedef {import('../types/main').Link} Link */
 /** @typedef {import('../types/main').LocalFile} LocalFile */
@@ -45,7 +46,7 @@ function extractReferences(htmlFilePath) {
     if (ev === SaxEventType.Attribute) {
       const data = /** @type {Attribute} */ (/** @type {any} */ (_data));
       const attributeName = data.name.toString();
-      const value = data.value.toString();
+      const value = slash(data.value.toString());
       const entry = {
         attribute: attributeName,
         value,

packages/cli/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @rocket/cli
 
+## 0.7.0
+
+### Minor Changes
+
+- 2724f07: The service worker no longer precaches all urls and assets. It now
+
+  - caches already visited pages
+  - caches assets of visited pages (up to 100 files then it replaces older entries)
+  - on service worker activation it will reload the page if a newer version is available
+
+### Patch Changes
+
+- Updated dependencies [2724f07]
+  - @rocket/building-rollup@0.3.0
+
+## 0.6.3
+
+### Patch Changes
+
+- 2b7f1ee: Add support for pathprefix
+- Updated dependencies [2b7f1ee]
+  - @rocket/eleventy-plugin-mdjs-unified@0.4.1
+
+## 0.6.2
+
+### Patch Changes
+
+- ed86ff2: Do not set `data-localize-lang` in the simulator iframe html tag
+- f4a0ab5: Pass document shadowRoot to iframe
+- c675820: fix: windows path issue avoid filtering of index section of collections
+
+## 0.6.1
+
+### Patch Changes
+
+- abc8a02: You can now use an absolute path for the rootDir
+- Updated dependencies [bad4686]
+- Updated dependencies [2267e72]
+  - @rocket/building-rollup@0.2.0
+  - @rocket/eleventy-plugin-mdjs-unified@0.4.0
+
 ## 0.6.0
 
 ### Minor Changes

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket/cli",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "publishConfig": {
     "access": "public"
   },
@@ -13,11 +13,11 @@
   },
   "author": "Modern Web <hello@modern-web.dev> (https://modern-web.dev/)",
   "homepage": "https://rocket.modern-web.dev/",
+  "main": "./index.cjs",
   "bin": {
     "rocket": "src/cli.js"
   },
   "type": "module",
-  "main": "./index.cjs",
   "exports": {
     ".": {
       "require": "./index.cjs",
@@ -57,9 +57,9 @@
   "dependencies": {
     "@11ty/eleventy": "^0.11.1",
     "@11ty/eleventy-img": "^0.7.4",
-    "@rocket/building-rollup": "^0.1.3",
+    "@rocket/building-rollup": "^0.3.0",
     "@rocket/core": "^0.1.2",
-    "@rocket/eleventy-plugin-mdjs-unified": "^0.3.1",
+    "@rocket/eleventy-plugin-mdjs-unified": "^0.4.1",
     "@rocket/eleventy-rocket-nav": "^0.3.0",
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-node-resolve": "^11.0.1",
@@ -67,13 +67,15 @@
     "@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.1",
+    "check-html-links": "^0.2.2",
     "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",
-    "utf8": "^3.0.0"
+    "slash": "^3.0.0",
+    "utf8": "^3.0.0",
+    "workbox-window": "^6.1.5"
   },
   "types": "dist-types/index.d.ts"
 }

packages/cli/preset/_assets/scripts/registerServiceWorker.js

@@ -0,0 +1,22 @@
+(async () => {
+  if ('serviceWorker' in navigator) {
+    const { Workbox } = await import('workbox-window');
+
+    const url = window.__rocketServiceWorkerUrl || '/service-worker.js';
+    const wb = new Workbox(url);
+    wb.addEventListener('message', event => {
+      if (event.data.type === 'CACHE_UPDATED') {
+        const { updatedURL } = event.data.payload;
+        console.log(`Reloading as a newer version of ${updatedURL} became available!`);
+        window.location.reload();
+      }
+    });
+    wb.register()
+      .then(function () {
+        console.log('ServiceWorker registered.');
+      })
+      .catch(function (err) {
+        console.log('ServiceWorker registration failed: ', err);
+      });
+  }
+})();

packages/cli/preset/_assets/service-worker.js

@@ -0,0 +1,29 @@
+import { registerRoute } from 'workbox-routing';
+import { CacheFirst, StaleWhileRevalidate } from 'workbox-strategies';
+import { BroadcastUpdatePlugin } from 'workbox-broadcast-update';
+import { ExpirationPlugin } from 'workbox-expiration';
+
+addEventListener('install', () => {
+  // eslint-disable-next-line no-undef
+  skipWaiting();
+});
+
+// addEventListener('activate', () => {
+//   console.log('activate');
+// });
+
+const cacheFirst = new CacheFirst({
+  cacheName: 'assets',
+  plugins: [
+    new ExpirationPlugin({
+      maxEntries: 100,
+    }),
+  ],
+});
+const staleWhileRevalidate = new StaleWhileRevalidate({
+  cacheName: 'pages',
+  plugins: [new BroadcastUpdatePlugin()],
+});
+
+registerRoute(/(\/|\.html)$/, staleWhileRevalidate);
+registerRoute(/\.(css|m?js|svg|woff2|png|jpg|gif|json|xml)$/, cacheFirst);

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

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

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

@@ -1,3 +0,0 @@
-<script>
-  {{ '_assets/_inline-scripts/serviceWorkerUpdate.js' | asset | toAbsPath | inlineFilePath | safe }}
-</script>

packages/cli/preset/_includes/_joiningBlocks/head/20-social-media.njk

@@ -1,7 +1,7 @@
 <meta property="og:site_name" content="{{ site.name }}"/>
 <meta property="og:type" content="website"/>
 
-<meta property="og:image" content="{{ socialMediaImage }}"/>
-<meta property="og:url" content="{{ page.url }}"/>
+<meta property="og:image" content="{{ socialMediaImage | url }}"/>
+<meta property="og:url" content="{{ page.url | url }}"/>
 
 <meta name="twitter:card" content="summary_large_image"/>

packages/cli/preset/_includes/layout-simulator.njk

@@ -0,0 +1,69 @@
+<html theme="light" platform="web" lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style type="text/css">
+      body {
+        margin: 0;
+        height: fit-content;
+      }
+      html[edge-distance] body {
+        padding: 8px;
+      }
+    </style>
+    <script type="module">
+      import { render } from 'lit-html';
+
+      async function onHashChange() {
+        const urlParts = new URLSearchParams(document.location.hash.substr(1));
+
+        if (urlParts.get('stylesheets')) {
+          for (const stylesheet of urlParts.getAll('stylesheets')) {
+            if (!document.querySelector(`link[rel="stylesheet"][href="${stylesheet}"]`)) {
+              const link = document.createElement('link');
+              link.rel = 'stylesheet';
+              link.href = stylesheet;
+              document.head.appendChild(link);
+            }
+          }
+        }
+        if (urlParts.get('theme')) {
+          document.documentElement.setAttribute('theme', urlParts.get('theme'));
+        }
+        if (urlParts.get('platform')) {
+          document.documentElement.setAttribute('platform', urlParts.get('platform'));
+        }
+        if (urlParts.get('language')) {
+          document.documentElement.setAttribute('lang', urlParts.get('language'));
+          document.documentElement.setAttribute('data-lang', urlParts.get('language'));
+        }
+        if (urlParts.get('story-key')) {
+          document.documentElement.setAttribute('story-key', urlParts.get('story-key'));
+        }
+        if (urlParts.get('edge-distance') === 'true') {
+          document.documentElement.setAttribute('edge-distance', '');
+        } else {
+          document.documentElement.removeAttribute('edge-distance');
+        }
+
+        const mod = await import(urlParts.get('story-file'));
+        render(mod[urlParts.get('story-key')]({ shadowRoot: document }), document.body);
+      }
+
+      window.addEventListener('hashchange', onHashChange, false);
+      onHashChange();
+
+      const observer = new ResizeObserver(() => {
+        const dimensions = document.body.getBoundingClientRect();
+        const data = {
+          action: 'mdjs-viewer-resize',
+          storyKey: document.documentElement.getAttribute('story-key'),
+          width: dimensions.width,
+          height: dimensions.height,
+        };
+        parent.postMessage(JSON.stringify(data), '*');
+      });
+      observer.observe(document.body);
+    </script>
+  </head>
+  <body></body>
+</html>

packages/cli/src/RocketBuild.js

@@ -3,9 +3,10 @@
 
 import { rollup } from 'rollup';
 import fs from 'fs-extra';
+import path from 'path';
 import { copy } from '@web/rollup-plugin-copy';
 
-import { createMpaConfig } from '@rocket/building-rollup';
+import { createMpaConfig, createServiceWorkerConfig } from '@rocket/building-rollup';
 import { addPlugin, adjustPluginOptions } from 'plugins-manager';
 
 /**
@@ -45,7 +46,7 @@ async function productionBuild(config) {
       dir: config.outputDir,
     },
     // custom
-    rootDir: config.outputDevDir,
+    rootDir: path.resolve(config.outputDevDir),
     absoluteBaseUrl: config.absoluteBaseUrl,
     setupPlugins: [
       ...defaultSetupPlugins,
@@ -55,6 +56,18 @@ async function productionBuild(config) {
   });
 
   await buildAndWrite(mpaConfig);
+
+  const serviceWorkerSourcePath = path.resolve('docs/_merged_assets/service-worker.js');
+  if (fs.existsSync(serviceWorkerSourcePath)) {
+    const serviceWorkerConfig = createServiceWorkerConfig({
+      input: serviceWorkerSourcePath,
+      output: {
+        file: path.join(path.resolve(config.outputDir), config.serviceWorkerName),
+      },
+    });
+
+    await buildAndWrite(serviceWorkerConfig);
+  }
 }
 
 export class RocketBuild {

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

@@ -1,5 +1,6 @@
 const path = require('path');
 const fs = require('fs');
+const slash = require('slash');
 const { readdirSync } = require('fs');
 
 function getDirectories(source) {
@@ -23,7 +24,7 @@ const rocketCollections = {
           let docs = [
             ...collection.getFilteredByGlob(`${_inputDirCwdRelative}/${section}/**/*.md`),
           ];
-          docs = docs.filter(page => page.inputPath !== `./${indexSection}`);
+          docs = docs.filter(page => page.inputPath !== `./${slash(indexSection)}`);
 
           return docs;
         });

packages/cli/src/normalizeConfig.js

@@ -40,6 +40,7 @@ export async function normalizeConfig(inConfig) {
     inputDir: 'docs',
     outputDir: '_site',
     outputDevDir: '_site-dev',
+    serviceWorkerName: 'service-worker.js',
     build: {},
     devServer: {},
 

packages/cli/test-helpers/index.js

@@ -15,7 +15,6 @@ export function setFixtureDir(importMetaUrl) {
 
 /**
  * @typedef {object} readOutputOptions
- * @property {boolean} stripServiceWorker
  * @property {boolean} stripToBody
  * @property {boolean} stripStartEndWhitespace
  * @property {boolean} stripScripts
@@ -47,7 +46,6 @@ export async function readOutput(
   cli,
   fileName,
   {
-    stripServiceWorker = false,
     stripToBody = false,
     stripStartEndWhitespace = true,
     stripScripts = false,
@@ -67,11 +65,6 @@ export async function readOutput(
     const bodyCloseTagStart = text.indexOf('</body>');
     text = text.substring(bodyOpenTagEnd, bodyCloseTagStart);
   }
-  if (stripServiceWorker) {
-    const scriptOpenTagEnd = text.indexOf('<script inject-service-worker');
-    const scriptCloseTagStart = text.indexOf('</script>', scriptOpenTagEnd) + 9;
-    text = text.substring(0, scriptOpenTagEnd) + text.substring(scriptCloseTagStart);
-  }
   if (stripScripts) {
     const scriptOpenTagEnd = text.indexOf('<script>');
     const scriptCloseTagStart = text.indexOf('</script>', scriptOpenTagEnd) + 9;

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

@@ -66,7 +66,6 @@ describe('RocketCli computedConfig', () => {
 
     const indexHtml = await readBuildOutput(cli, 'index.html', {
       stripToBody: true,
-      stripServiceWorker: true,
     });
     expect(indexHtml).to.equal('/_merged_assets/11ty-img/5893749-1200.png');
   });

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

@@ -75,9 +75,6 @@ describe('RocketCli e2e', () => {
     cli = await executeBuild('e2e-fixtures/rollup-plugin/devbuild-build.rocket.config.js');
     const inlineModule = await readBuildOutput(cli, 'e97af63d.js');
     expect(inlineModule).to.equal('var a={test:"data"};console.log(a);');
-
-    const swCode = await readBuildOutput(cli, 'my-service-worker.js');
-    expect(swCode).to.not.be.undefined;
   });
 
   it('can adjust the inputDir', async () => {
@@ -111,7 +108,6 @@ describe('RocketCli e2e', () => {
     cli = await executeBuild('e2e-fixtures/content/pathPrefix.rocket.config.js');
 
     const linkHtml = await readBuildOutput(cli, 'link/index.html', {
-      stripServiceWorker: true,
       stripToBody: true,
     });
     expect(linkHtml).to.equal(
@@ -119,9 +115,7 @@ describe('RocketCli e2e', () => {
         '\n',
       ),
     );
-    const assetHtml = await readBuildOutput(cli, 'use-assets/index.html', {
-      stripServiceWorker: true,
-    });
+    const assetHtml = await readBuildOutput(cli, 'use-assets/index.html');
     expect(assetHtml).to.equal(
       '<html><head><link rel="stylesheet" href="../41297ffa.css">\n\n</head><body>\n\n</body></html>',
     );

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

@@ -86,6 +86,12 @@ describe('RocketCli preset', () => {
         '    </div>',
         '',
         '    <footer id="main-footer"></footer>',
+        '',
+        '    <script',
+        '      type="module"',
+        '      inject-service-worker=""',
+        '      src="/_merged_assets/scripts/registerServiceWorker.js"',
+        '    ></script>',
         '  </body>',
         '</html>',
       ].join('\n'),

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

@@ -34,12 +34,7 @@ describe('RocketCli use cases', () => {
     expect(aboutHtml).to.equal(
       [
         '<p><code>about.md</code></p>',
-        '<script type="module">',
-        '  import { myData } from "../sub/assets/myData.js";',
-        '  import("../sub/assets/myData.js");',
-        '  const name = "myData";',
-        '  import(`../sub/assets/${name}.js`);',
-        '</script>',
+        '<script type="module" src="/about/__mdjs-stories.js" mdjs-setup></script>',
       ].join('\n'),
     );
 
@@ -47,12 +42,7 @@ describe('RocketCli use cases', () => {
     expect(subHtml).to.equal(
       [
         '<p><code>sub/index.md</code></p>',
-        '<script type="module">',
-        '  import { myData } from "./assets/myData.js";',
-        '  import("./assets/myData.js");',
-        '  const name = "myData";',
-        '  import(`./assets/${name}.js`);',
-        '</script>',
+        '<script type="module" src="/sub/__mdjs-stories.js" mdjs-setup></script>',
       ].join('\n'),
     );
 
@@ -62,12 +52,7 @@ describe('RocketCli use cases', () => {
     expect(subDetailsHtml).to.equal(
       [
         '<p><code>sub/details.md</code></p>',
-        '<script type="module">',
-        '  import { myData } from "../assets/myData.js";',
-        '  import("../assets/myData.js");',
-        '  const name = "myData";',
-        '  import(`../assets/${name}.js`);',
-        '</script>',
+        '<script type="module" src="/sub/details/__mdjs-stories.js" mdjs-setup></script>',
       ].join('\n'),
     );
 
@@ -75,12 +60,7 @@ describe('RocketCli use cases', () => {
     expect(indexHtml).to.equal(
       [
         '<p><code>index.md</code></p>',
-        '<script type="module">',
-        '  import { myData } from "./sub/assets/myData.js";',
-        '  import("./sub/assets/myData.js");',
-        '  const name = "myData";',
-        '  import(`./sub/assets/${name}.js`);',
-        '</script>',
+        '<script type="module" src="/__mdjs-stories.js" mdjs-setup></script>',
       ].join('\n'),
     );
   });

packages/cli/test-node/e2e-fixtures/rollup-plugin/devbuild-build.rocket.config.js

@@ -1,19 +1,11 @@
 // @ts-no-check
-import path from 'path';
-import { fileURLToPath } from 'url';
-
 import json from '@rollup/plugin-json';
 import { addPlugin, adjustPluginOptions } from 'plugins-manager';
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const outputDir = path.join(__dirname, '__output');
-
 /** @type {Partial<import("../../../types/main").RocketCliOptions>} */
 const config = {
   setupDevAndBuildPlugins: [addPlugin({ name: 'json', plugin: json, location: 'top' })],
-  setupBuildPlugins: [
-    adjustPluginOptions('workbox', { swDest: path.join(outputDir, 'my-service-worker.js') }),
-  ],
+  setupBuildPlugins: [adjustPluginOptions('html', { absoluteBaseUrl: 'https://test-me.com' })],
 };
 
 export default config;

packages/cli/test-node/helpers.js

@@ -31,12 +31,7 @@ export async function expectThrowsAsync(method, { errorMatch, errorMessage } = {
 export async function readOutput(
   cli,
   fileName,
-  {
-    stripServiceWorker = false,
-    stripToBody = false,
-    stripStartEndWhitespace = true,
-    type = 'build',
-  } = {},
+  { stripToBody = false, stripStartEndWhitespace = true, type = 'build' } = {},
 ) {
   const outputDir = type === 'build' ? cli.config.outputDir : cli.config.outputDevDir;
   let text = await fs.promises.readFile(path.join(outputDir, fileName));
@@ -46,11 +41,6 @@ export async function readOutput(
     const bodyCloseTagStart = text.indexOf('</body>');
     text = text.substring(bodyOpenTagEnd, bodyCloseTagStart);
   }
-  if (stripServiceWorker) {
-    const scriptOpenTagEnd = text.indexOf('<script inject-service-worker');
-    const scriptCloseTagStart = text.indexOf('</script>', scriptOpenTagEnd) + 9;
-    text = text.substring(0, scriptOpenTagEnd) + text.substring(scriptCloseTagStart);
-  }
   if (stripStartEndWhitespace) {
     text = text.trim();
   }

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

@@ -41,6 +41,7 @@ describe('normalizeConfig', () => {
       setupEleventyComputedConfig: [],
       setupCliPlugins: [],
       presets: [],
+      serviceWorkerName: 'service-worker.js',
       plugins: [
         { commands: ['start'] },
         { commands: ['build'] },
@@ -76,6 +77,7 @@ describe('normalizeConfig', () => {
       setupCliPlugins: [],
       setupEleventyComputedConfig: [],
       presets: [],
+      serviceWorkerName: 'service-worker.js',
       plugins: [
         { commands: ['start'] },
         { commands: ['build'] },
@@ -108,6 +110,7 @@ describe('normalizeConfig', () => {
       setupCliPlugins: [],
       setupEleventyComputedConfig: [],
       presets: [],
+      serviceWorkerName: 'service-worker.js',
       plugins: [
         { commands: ['start'] },
         { commands: ['build'] },
@@ -143,6 +146,7 @@ describe('normalizeConfig', () => {
       setupCliPlugins: [],
       setupEleventyComputedConfig: [],
       presets: [],
+      serviceWorkerName: 'service-worker.js',
       plugins: [
         { commands: ['start'] },
         { commands: ['build'] },

packages/cli/types/main.d.ts

@@ -20,6 +20,7 @@ interface RocketStartConfig {
 export interface RocketCliOptions {
   presets: Array<RocketPreset>;
   pathPrefix?: string;
+  serviceWorkerName?: string;
   inputDir: string;
   outputDir: string;
   emptyOutputDir?: boolean;

packages/core/package.json

@@ -13,8 +13,8 @@
   },
   "author": "Modern Web <hello@modern-web.dev> (https://modern-web.dev/)",
   "homepage": "https://rocket.modern-web.dev/",
-  "type": "module",
   "main": "./dist/title.cjs",
+  "type": "module",
   "exports": {
     "./title": {
       "require": "./dist/title.cjs",

packages/drawer/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @rocket/drawer
 
+## 0.1.3
+
+### Patch Changes
+
+- 0b64116: Update @lion dependencies
+
 ## 0.1.2
 
 ### Patch Changes

packages/drawer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket/drawer",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "publishConfig": {
     "access": "public"
   },
@@ -33,7 +33,7 @@
     "testing"
   ],
   "dependencies": {
-    "@lion/overlays": "^0.23.2",
+    "@lion/overlays": "^0.26.1",
     "lit-element": "^2.4.0"
   },
   "types": "dist-types/index.d.ts"

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

@@ -1,5 +1,26 @@
 # @rocket/eleventy-plugin-mdjs-unified
 
+## 0.4.1
+
+### Patch Changes
+
+- 2b7f1ee: Add support for pathprefix
+- Updated dependencies [2b7f1ee]
+  - @mdjs/core@0.7.1
+
+## 0.4.0
+
+### Minor Changes
+
+- 2267e72: Write the mdjs JavaScript code to a file and load it from there instead of an inline script
+
+### Patch Changes
+
+- Updated dependencies [a8e66d8]
+- Updated dependencies [fe6a929]
+- Updated dependencies [a8e66d8]
+  - @mdjs/core@0.7.0
+
 ## 0.3.1
 
 ### Patch Changes

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

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

packages/eleventy-plugin-mdjs-unified/src/eleventy-plugin-mdjs-unified.js

@@ -1,4 +1,7 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
+const path = require('path');
+const slash = require('slash');
+const fs = require('fs');
 const { mdjsProcess } = require('@mdjs/core');
 const visit = require('unist-util-visit');
 const { init, parse } = require('es-module-lexer');
@@ -7,7 +10,7 @@ const { init, parse } = require('es-module-lexer');
 const { parseTitle } = require('@rocket/core/title');
 
 /** @typedef {import('@mdjs/core').MdjsProcessPlugin} MdjsProcessPlugin */
-/** @typedef {import('../types/code').EleventPluginMdjsUnified} EleventPluginMdjsUnified */
+/** @typedef {import('../types/code').EleventyPluginMdjsUnified} EleventyPluginMdjsUnified */
 /** @typedef {import('../types/code').NodeChildren} NodeChildren */
 /** @typedef {import('../types/code').NodeElement} NodeElement */
 /** @typedef {import('unist').Node} Node */
@@ -93,7 +96,7 @@ async function processImports(source, inputPath) {
 }
 
 /**
- * @param {EleventPluginMdjsUnified} pluginOptions
+ * @param {EleventyPluginMdjsUnified} pluginOptions
  */
 function eleventyUnified(pluginOptions) {
   /**
@@ -119,8 +122,12 @@ function eleventyUnified(pluginOptions) {
       return plugins.map(plugin => {
         if (plugin.options) {
           plugin.options.page = eleventySettings.page;
+          plugin.options.rocketConfig = eleventySettings.rocketConfig;
         } else {
-          plugin.options = { page: eleventySettings.page };
+          plugin.options = {
+            page: eleventySettings.page,
+            rocketConfig: eleventySettings.rocketConfig,
+          };
         }
         return plugin;
       });
@@ -139,10 +146,23 @@ function eleventyUnified(pluginOptions) {
 
     let code = result.html;
     if (result.jsCode) {
+      const newFolder = path.dirname(eleventySettings.page.outputPath);
+      const newName = path.join(newFolder, '__mdjs-stories.js');
+      await fs.promises.mkdir(newFolder, { recursive: true });
+      await fs.promises.writeFile(newName, result.jsCode, 'utf8');
+
+      let scriptUrl = eleventySettings.page.url;
+      if (
+        eleventySettings.rocketConfig &&
+        eleventySettings.rocketConfig.command === 'build' &&
+        eleventySettings.rocketConfig.pathPrefix
+      ) {
+        scriptUrl = slash(
+          path.join(eleventySettings.rocketConfig.pathPrefix, eleventySettings.page.url),
+        );
+      }
       code += `
-        <script type="module">
-          ${result.jsCode}
-        </script>
+        <script type="module" src="${scriptUrl}__mdjs-stories.js" mdjs-setup></script>
       `;
     }
     return code;
@@ -157,15 +177,15 @@ function eleventyUnified(pluginOptions) {
 
 /**
  * @param {*} eleventyConfig
- * @param {EleventPluginMdjsUnified} [pluginOptions]
+ * @param {EleventyPluginMdjsUnified} [pluginOptions]
  */
 function configFunction(eleventyConfig, pluginOptions = {}) {
   eleventyConfig.setLibrary('md', eleventyUnified(pluginOptions));
 }
 
-const eleventPluginMdjsUnified = {
+const EleventyPluginMdjsUnified = {
   initArguments: {},
   configFunction,
 };
 
-module.exports = eleventPluginMdjsUnified;
+module.exports = EleventyPluginMdjsUnified;

packages/eleventy-plugin-mdjs-unified/test-node/eleventy-plugin-mdjs-unified.test.js

@@ -53,13 +53,12 @@ describe('eleventy-plugin-mdjs-unified', () => {
 
   it('renders markdown with javascript', async () => {
     const files = await renderEleventy('./test-node/fixtures/mdjs');
-    expect(files).to.deep.equal([
-      {
-        html:
-          '<h1 id="first"><a aria-hidden="true" tabindex="-1" href="#first"><span class="icon icon-link"></span></a>First</h1>\n<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">\'bar\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token punctuation">{</span> html <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'lit-html\'</span><span class="token punctuation">;</span>\n</code></pre>\n<mdjs-story mdjs-story-name="inline"></mdjs-story>\n<mdjs-preview mdjs-story-name="withBorder"></mdjs-preview>\n        <script type="module">\n          \nexport const inline = () => html` <p>main</p> `;\nexport const withBorder = () => html` <p>main</p> `;\nconst rootNode = document;\nconst stories = [{ key: \'inline\', story: inline, code: `<pre class="language-js"><code class="language-js"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token function-variable function">inline</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> html<span class="token template-string"><span class="token template-punctuation string">\\`</span><span class="token html language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>p</span><span class="token punctuation">></span></span>main<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>p</span><span class="token punctuation">></span></span> </span><span class="token template-punctuation string">\\`</span></span><span class="token punctuation">;</span>\n</code></pre>` }, { key: \'withBorder\', story: withBorder, code: `<pre class="language-js"><code class="language-js"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token function-variable function">withBorder</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> html<span class="token template-string"><span class="token template-punctuation string">\\`</span><span class="token html language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>p</span><span class="token punctuation">></span></span>main<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>p</span><span class="token punctuation">></span></span> </span><span class="token template-punctuation string">\\`</span></span><span class="token punctuation">;</span>\n</code></pre>` }];\nfor (const story of stories) {\n  const storyEl = rootNode.querySelector(`[mdjs-story-name="${story.key}"]`);\n  storyEl.codeHasHtml = true;\n  storyEl.story = story.story;\n  storyEl.code = story.code;\n};\nif (!customElements.get(\'mdjs-preview\')) { import(\'@mdjs/mdjs-preview/mdjs-preview.js\'); }\nif (!customElements.get(\'mdjs-story\')) { import(\'@mdjs/mdjs-story/mdjs-story.js\'); }\n        </script>\n      ',
-        name: 'first/index.html',
-      },
-    ]);
+
+    expect(files.length).to.equal(1);
+    expect(files[0].name).to.equal('first/index.html');
+
+    expect(files[0].html).to.include('<script type="module"');
+    expect(files[0].html).to.include('mdjs-setup>');
   });
 
   it('rewrites relative import pathes', async () => {
@@ -67,7 +66,7 @@ describe('eleventy-plugin-mdjs-unified', () => {
     expect(files).to.deep.equal([
       {
         html:
-          "<p>first</p>\n        <script type=\"module\">\n          import '../import-me.js';\nimport('../import-me-too.js');\n        </script>\n      ",
+          '<p>first</p>\n        <script type="module" src="/first/__mdjs-stories.js" mdjs-setup></script>\n      ',
         name: 'first/index.html',
       },
     ]);
@@ -78,7 +77,7 @@ describe('eleventy-plugin-mdjs-unified', () => {
     expect(files).to.deep.equal([
       {
         html:
-          "<p>first</p>\n        <script type=\"module\">\n          import '../../import-me.js';\nimport('../../import-me-too.js');\n        </script>\n      ",
+          '<p>first</p>\n        <script type="module" src="/subpage/first/__mdjs-stories.js" mdjs-setup></script>\n      ',
         name: 'subpage/first/index.html',
       },
     ]);
@@ -89,7 +88,7 @@ describe('eleventy-plugin-mdjs-unified', () => {
     expect(files).to.deep.equal([
       {
         html:
-          "<p>index</p>\n        <script type=\"module\">\n          import './import-me.js';\nimport('./import-me-too.js');\n        </script>\n      ",
+          '<p>index</p>\n        <script type="module" src="/__mdjs-stories.js" mdjs-setup></script>\n      ',
         name: 'index.html',
       },
     ]);

packages/eleventy-plugin-mdjs-unified/types/code.d.ts

@@ -3,7 +3,7 @@ import { Node } from 'unist';
 
 export const setupUnifiedPluginsFn: (plugins: MdjsProcessPlugin[]) => MdjsProcessPlugin[];
 
-export interface EleventPluginMdjsUnified {
+export interface EleventyPluginMdjsUnified {
   setupUnifiedPlugins?: setupUnifiedPluginsFn[];
 }
 

packages/launch/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @rocket/launch
 
+## 0.4.2
+
+### Patch Changes
+
+- 2b7f1ee: Add support for pathprefix
+
+## 0.4.1
+
+### Patch Changes
+
+- 81edf45: Reduce the amount of js files in the build by avoiding inline script tags
+
 ## 0.4.0
 
 ### Minor Changes

packages/launch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket/launch",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "publishConfig": {
     "access": "public"
   },
@@ -35,7 +35,7 @@
     "preset"
   ],
   "dependencies": {
-    "@rocket/drawer": "^0.1.2",
-    "@rocket/navigation": "^0.2.0"
+    "@rocket/drawer": "^0.1.3",
+    "@rocket/navigation": "^0.2.1"
   }
 }

packages/launch/preset/_includes/_joiningBlocks/bottom/10-init-navigation.njk

@@ -1,17 +1 @@
-{# 
-  src leads to the file not being included/executed? bug in rollup-plugin-html? 
-  <script type="module" src="{{ '/_assets/scripts/init-navigation.js' | asset }}"></script>
-#}
-<script type="module">
-  import '@rocket/navigation/rocket-navigation.js';
-  import '@rocket/drawer/rocket-drawer.js';
-  const drawer = document.querySelector('#sidebar');
-
-  // Toggle button
-  const triggers = document.querySelectorAll('[data-action="trigger-mobile-menu"]');
-  for (const trigger of [...triggers]) {
-    trigger.addEventListener('click', function () {
-      drawer.opened = true;
-    });
-  }
-</script>
+<script type="module" src="{{ '/_assets/scripts/init-navigation.js' | asset | url }}"></script>

packages/launch/preset/_includes/_joiningBlocks/head/30-social-media.njk

@@ -1,7 +1,7 @@
 <meta property="og:site_name" content="{{ site.name }}"/>
 <meta property="og:type" content="website"/>
 
-<meta property="og:image" content="{{ socialMediaImage }}"/>
-<meta property="og:url" content="{{ page.url }}"/>
+<meta property="og:image" content="{{ socialMediaImage  | url }}"/>
+<meta property="og:url" content="{{ page.url | url }}"/>
 
 <meta name="twitter:card" content="summary_large_image"/>

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

@@ -208,19 +208,13 @@ describe('RocketLaunch preset', () => {
         '      </div>',
         '    </footer>',
         '',
-        '    <script type="module">',
-        '      import "@rocket/navigation/rocket-navigation.js";',
-        '      import "@rocket/drawer/rocket-drawer.js";',
-        '      const drawer = document.querySelector("#sidebar");',
+        '    <script type="module" src="/_merged_assets/scripts/init-navigation.js"></script>',
         '',
-        '      // Toggle button',
-        `      const triggers = document.querySelectorAll('[data-action="trigger-mobile-menu"]');`,
-        '      for (const trigger of [...triggers]) {',
-        '        trigger.addEventListener("click", function () {',
-        '          drawer.opened = true;',
-        '        });',
-        '      }',
-        '    </script>',
+        '    <script',
+        '      type="module"',
+        '      inject-service-worker=""',
+        '      src="/_merged_assets/scripts/registerServiceWorker.js"',
+        '    ></script>',
         '  </body>',
         '</html>',
       ].join('\n'),
@@ -443,19 +437,13 @@ describe('RocketLaunch preset', () => {
         '      </div>',
         '    </footer>',
         '',
-        '    <script type="module">',
-        '      import "@rocket/navigation/rocket-navigation.js";',
-        '      import "@rocket/drawer/rocket-drawer.js";',
-        '      const drawer = document.querySelector("#sidebar");',
+        '    <script type="module" src="/_merged_assets/scripts/init-navigation.js"></script>',
         '',
-        '      // Toggle button',
-        `      const triggers = document.querySelectorAll('[data-action="trigger-mobile-menu"]');`,
-        '      for (const trigger of [...triggers]) {',
-        '        trigger.addEventListener("click", function () {',
-        '          drawer.opened = true;',
-        '        });',
-        '      }',
-        '    </script>',
+        '    <script',
+        '      type="module"',
+        '      inject-service-worker=""',
+        '      src="/_merged_assets/scripts/registerServiceWorker.js"',
+        '    ></script>',
         '  </body>',
         '</html>',
       ].join('\n'),

packages/mdjs-core/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Change Log
 
+## 0.7.1
+
+### Patch Changes
+
+- 2b7f1ee: Add support for pathprefix
+
+## 0.7.0
+
+### Minor Changes
+
+- a8e66d8: Extract building of the JavaScript setup code into a unified plugin called mdjsSetupCode
+- fe6a929: For the story preview keep the original code block around to get code highlighting from the main document. This enables styling and reduces the code complexity.
+
+### Patch Changes
+
+- a8e66d8: You can provide a highlightCode function to the mdjsSetupCode unified plugin
+- Updated dependencies [edb1abf]
+- Updated dependencies [604a80e]
+  - @mdjs/mdjs-preview@0.4.0
+  - @mdjs/mdjs-story@0.2.0
+
 ## 0.6.2
 
 ### Patch Changes

packages/mdjs-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdjs/core",
-  "version": "0.6.2",
+  "version": "0.7.1",
   "publishConfig": {
     "access": "public"
   },
@@ -43,8 +43,8 @@
     "remark"
   ],
   "dependencies": {
-    "@mdjs/mdjs-preview": "^0.3.2",
-    "@mdjs/mdjs-story": "^0.1.2",
+    "@mdjs/mdjs-preview": "^0.4.2",
+    "@mdjs/mdjs-story": "^0.2.0",
     "@types/unist": "^2.0.3",
     "es-module-lexer": "^0.3.26",
     "github-markdown-css": "^4.0.0",

packages/mdjs-core/src/mdjsProcess.js

@@ -18,6 +18,7 @@ const { executeSetupFunctions } = require('plugins-manager');
 
 const { mdjsParse } = require('./mdjsParse.js');
 const { mdjsStoryParse } = require('./mdjsStoryParse.js');
+const { mdjsSetupCode } = require('./mdjsSetupCode.js');
 
 /** @type {MdjsProcessPlugin[]} */
 const defaultMetaPlugins = [
@@ -25,6 +26,7 @@ const defaultMetaPlugins = [
   { name: 'gfm', plugin: gfm },
   { name: 'mdjsParse', plugin: mdjsParse },
   { name: 'mdjsStoryParse', plugin: mdjsStoryParse },
+  { name: 'mdjsSetupCode', plugin: mdjsSetupCode },
   // @ts-ignore
   { name: 'remark2rehype', plugin: remark2rehype, options: { allowDangerousHtml: true } },
   // @ts-ignore
@@ -50,29 +52,15 @@ const defaultMetaPlugins = [
  * @param {function[]} [options.setupUnifiedPlugins]
  * @param {MdjsProcessPlugin[]} [options.plugins] deprecated option use setupUnifiedPlugins instead
  */
-async function mdjsProcess(
-  mdjs,
-  { rootNodeQueryCode = 'document', setupUnifiedPlugins = [] } = {},
-) {
+async function mdjsProcess(mdjs, { setupUnifiedPlugins = [] } = {}) {
   const parser = unified();
 
   const metaPlugins = executeSetupFunctions(setupUnifiedPlugins, defaultMetaPlugins);
 
-  // @ts-ignore
-  for (const pluginObj of metaPlugins) {
-    parser.use(pluginObj.plugin, pluginObj.options);
-  }
-
-  /** @type {unknown} */
-  const parseResult = await parser.process(mdjs);
-  const result = /** @type {ParseResult} */ (parseResult);
-
-  const { stories, jsCode } = result.data;
-  let fullJsCode = jsCode;
-
-  if (stories && stories.length > 0) {
-    const storiesCode = stories.map(story => story.code).join('\n');
-
+  /**
+   * @param {string} code
+   */
+  async function highlightCode(code) {
     // @ts-ignore
     const codePlugins = metaPlugins.filter(pluginObj =>
       ['markdown', 'remark2rehype', 'rehypePrism', 'htmlStringify'].includes(pluginObj.name),
@@ -82,46 +70,30 @@ async function mdjsProcess(
     for (const pluginObj of codePlugins) {
       codeParser.use(pluginObj.plugin, pluginObj.options);
     }
-
-    const invokeStoriesCode = [];
-    for (const story of stories) {
-      let code = '';
-      switch (story.type) {
-        case 'html':
-          code = `\`\`\`html\n${story.code.split('`')[1]}\n\`\`\``;
-          break;
-        case 'js':
-          code = `\`\`\`js\n${story.code}\n\`\`\``;
-          break;
-        default:
-          break;
-      }
-      const codeResult = await codeParser.process(code);
-      const highlightedCode = /** @type {string} */ (codeResult.contents)
-        .replace(/`/g, '\\`')
-        .replace(/\$/g, '\\$');
-      invokeStoriesCode.push(
-        `{ key: '${story.key}', story: ${story.key}, code: \`${highlightedCode}\` }`,
-      );
-    }
-
-    fullJsCode = [
-      jsCode,
-      storiesCode,
-      `const rootNode = ${rootNodeQueryCode};`,
-      `const stories = [${invokeStoriesCode.join(', ')}];`,
-      `for (const story of stories) {`,
-      // eslint-disable-next-line no-template-curly-in-string
-      '  const storyEl = rootNode.querySelector(`[mdjs-story-name="${story.key}"]`);',
-      `  storyEl.codeHasHtml = true;`,
-      `  storyEl.story = story.story;`,
-      `  storyEl.code = story.code;`,
-      `};`,
-      `if (!customElements.get('mdjs-preview')) { import('@mdjs/mdjs-preview/mdjs-preview.js'); }`,
-      `if (!customElements.get('mdjs-story')) { import('@mdjs/mdjs-story/mdjs-story.js'); }`,
-    ].join('\n');
+    const codeResult = await codeParser.process(code);
+    return codeResult.contents;
   }
-  return { stories, jsCode: fullJsCode, html: result.contents };
+
+  // @ts-ignore
+  for (const pluginObj of metaPlugins) {
+    if (pluginObj.name === 'mdjsSetupCode') {
+      if (pluginObj.options && !pluginObj.options.highlightCode) {
+        pluginObj.options.highlightCode = highlightCode;
+      }
+      if (!pluginObj.options) {
+        pluginObj.options = { highlightCode };
+      }
+    }
+    parser.use(pluginObj.plugin, pluginObj.options);
+  }
+
+  /** @type {unknown} */
+  const parseResult = await parser.process(mdjs);
+  const result = /** @type {ParseResult} */ (parseResult);
+
+  const { stories, setupJsCode } = result.data;
+
+  return { stories, jsCode: setupJsCode, html: result.contents };
 }
 
 module.exports = {

packages/mdjs-core/src/mdjsSetupCode.js

@@ -0,0 +1,92 @@
+const path = require('path');
+const slash = require('slash');
+
+/** @typedef {import('vfile').VFileOptions} VFileOptions */
+/** @typedef {import('unist').Node} Node */
+/** @typedef {import('@mdjs/core/types/code').Story} Story */
+
+/**
+ * @typedef {Object} simulationSettings
+ * @property {string} [simulatorUrl]
+ */
+
+/**
+ * @typedef {Object} rocketConfig
+ * @property {string} [pathPrefix]
+ */
+
+/**
+ * @param {object} options
+ * @param {string} [options.rootNodeQueryCode]
+ * @param {simulationSettings} [options.simulationSettings]
+ * @param {rocketConfig} [options.rocketConfig]
+ * @returns
+ */
+function mdjsSetupCode({
+  rootNodeQueryCode = 'document',
+  simulationSettings = {},
+  rocketConfig = {},
+} = {}) {
+  if (rocketConfig && rocketConfig.pathPrefix) {
+    if (simulationSettings && simulationSettings.simulatorUrl) {
+      const { simulatorUrl } = simulationSettings;
+      if (simulatorUrl[0] === '/' && !simulatorUrl.startsWith(rocketConfig.pathPrefix)) {
+        simulationSettings.simulatorUrl = slash(
+          path.join(rocketConfig.pathPrefix, simulationSettings.simulatorUrl),
+        );
+      }
+    }
+  }
+
+  /**
+   * @param {Node} tree
+   * @param {VFileOptions} file
+   */
+  async function transformer(tree, file) {
+    const { stories, jsCode } = file.data;
+
+    file.data.setupJsCode = jsCode;
+
+    if (stories && stories.length > 0) {
+      const storiesCode = stories.map(/** @param {Story} story */ story => story.code).join('\n');
+
+      const invokeStoriesCode = [];
+      for (const story of stories) {
+        invokeStoriesCode.push(`{ key: '${story.key}', story: ${story.key} }`);
+      }
+
+      file.data.setupJsCode = [
+        '/** script code **/',
+        jsCode,
+        '/** stories code **/',
+        storiesCode,
+        '/** stories setup code **/',
+        `const rootNode = ${rootNodeQueryCode};`,
+        `const stories = [${invokeStoriesCode.join(', ')}];`,
+        'let needsMdjsElements = false;',
+        `for (const story of stories) {`,
+        // eslint-disable-next-line no-template-curly-in-string
+        '  const storyEl = rootNode.querySelector(`[mdjs-story-name="${story.key}"]`);',
+        '  if (storyEl) {',
+        `    storyEl.story = story.story;`,
+        `    storyEl.key = story.key;`,
+        `    needsMdjsElements = true;`,
+        `    Object.assign(storyEl, ${JSON.stringify(simulationSettings)});`,
+        '  }',
+        `};`,
+        'if (needsMdjsElements) {',
+        `  if (!customElements.get('mdjs-preview')) { import('@mdjs/mdjs-preview/define'); }`,
+        `  if (!customElements.get('mdjs-story')) { import('@mdjs/mdjs-story/define'); }`,
+        '}',
+      ].join('\n');
+    }
+
+    return tree;
+  }
+
+  return transformer;
+}
+
+module.exports = {
+  mdjsSetupCode,
+};

packages/mdjs-core/src/mdjsStoryParse.js

@@ -3,6 +3,7 @@
 /** @typedef {import('@mdjs/core/types/code').StoryTypes} StoryTypes */
 /** @typedef {(name: string) => string} TagFunction */
 /** @typedef {import('unist').Node} UnistNode */
+/** @typedef {import('unist').Parent} UnistParent */
 /** @typedef {import('vfile').VFileOptions} VFileOptions */
 
 const visit = require('unist-util-visit');
@@ -40,7 +41,7 @@ function defaultStoryTag(name) {
  * @param {string} name
  */
 function defaultPreviewStoryTag(name) {
-  return `<mdjs-preview mdjs-story-name="${name}"></mdjs-preview>`;
+  return `<mdjs-preview mdjs-story-name="${name}">[[CODE SLOT]]</mdjs-preview>`;
 }
 
 /**
@@ -55,14 +56,16 @@ function mdjsStoryParse({
 } = {}) {
   /** @type {Story[]} */
   const stories = [];
-  let index = 0;
+  let htmlIndex = 0;
 
   /* eslint-disable no-param-reassign */
 
   /**
    * @param {UnistNode} node
+   * @param {number} index
+   * @param {UnistParent} parent
    */
-  const nodeCodeVisitor = node => {
+  const nodeCodeVisitor = (node, index, parent) => {
     if (node.lang === 'js' && node.meta === 'story' && typeof node.value === 'string') {
       const storyData = extractStoryData(node.value);
       node.type = 'html';
@@ -71,30 +74,65 @@ function mdjsStoryParse({
     }
     if (node.lang === 'js' && node.meta === 'preview-story' && typeof node.value === 'string') {
       const storyData = extractStoryData(node.value);
-      node.type = 'html';
-      node.value = previewStoryTag(storyData.name);
+      const newValue = previewStoryTag(storyData.name);
+      if (newValue.includes('[[CODE SLOT]]')) {
+        const tagParts = newValue.split('[[CODE SLOT]]');
+        node = {
+          type: 'root',
+          children: [
+            { type: 'html', value: tagParts[0] },
+            { type: 'text', value: '\n\n' },
+            node,
+            { type: 'text', value: '\n\n' },
+            { type: 'html', value: tagParts[1] },
+          ],
+        };
+        parent.children.splice(index, 1, node);
+      } else {
+        node.type = 'html';
+        node.value = previewStoryTag(storyData.name);
+      }
+
       stories.push(storyData);
     }
 
     if (node.lang === 'html' && node.meta === 'story') {
       const storyData = extractStoryData(
-        `export const HtmlStory${index} = () => html\`${node.value}\`;`,
+        `export const HtmlStory${htmlIndex} = () => html\`${node.value}\`;`,
         { type: 'html' },
       );
       node.type = 'html';
       node.value = storyTag(storyData.name);
       stories.push(storyData);
-      index += 1;
+      htmlIndex += 1;
     }
     if (node.lang === 'html' && node.meta === 'preview-story') {
       const storyData = extractStoryData(
-        `export const HtmlStory${index} = () => html\`${node.value}\`;`,
+        `export const HtmlStory${htmlIndex} = () => html\`${node.value}\`;`,
         { type: 'html' },
       );
-      node.type = 'html';
-      node.value = previewStoryTag(storyData.name);
+
+      const newValue = previewStoryTag(storyData.name);
+      if (newValue.includes('[[CODE SLOT]]')) {
+        const tagParts = newValue.split('[[CODE SLOT]]');
+        node = {
+          type: 'root',
+          children: [
+            { type: 'html', value: tagParts[0] },
+            { type: 'text', value: '\n\n' },
+            node,
+            { type: 'text', value: '\n\n' },
+            { type: 'html', value: tagParts[1] },
+          ],
+        };
+        parent.children.splice(index, 1, node);
+      } else {
+        node.type = 'html';
+        node.value = previewStoryTag(storyData.name);
+      }
+
       stories.push(storyData);
-      index += 1;
+      htmlIndex += 1;
     }
   };
 

packages/mdjs-core/test-node/integration.test.js

@@ -45,7 +45,16 @@ describe('Integration', () => {
       '<pre><code class="language-js">const foo = 1;',
       '</code></pre>',
       '<mdjs-story mdjs-story-name="fooStory"></mdjs-story>',
-      '<mdjs-preview mdjs-story-name="fooPreviewStory"></mdjs-preview>',
+      '<mdjs-preview mdjs-story-name="fooPreviewStory">',
+      '',
+      '',
+      '',
+      '<pre><code class="language-js">export const fooPreviewStory = () => {}',
+      '</code></pre>',
+      '',
+      '',
+      '',
+      '</mdjs-preview>',
     ];
 
     const parser = unified()

packages/mdjs-core/test-node/mdJsProcess.test.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-template-curly-in-string */
 
 const chai = require('chai');
+const { adjustPluginOptions } = require('plugins-manager');
 const { mdjsProcess } = require('../src/mdjsProcess.js');
 
 const { expect } = chai;
@@ -28,27 +29,44 @@ describe('mdjsProcess', () => {
       '<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>',
       '</code></pre>',
       '<mdjs-story mdjs-story-name="fooStory"></mdjs-story>',
-      '<mdjs-preview mdjs-story-name="fooPreviewStory"></mdjs-preview>',
+      '<mdjs-preview mdjs-story-name="fooPreviewStory">',
+      '',
+      '',
+      '',
+      '<pre class="language-js"><code class="language-js"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token function-variable function">fooPreviewStory</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span>',
+      '</code></pre>',
+      '',
+      '',
+      '',
+      '</mdjs-preview>',
     ].join('\n');
     const expectedJsCode = [
+      '/** script code **/',
       'const bar = 2;',
+      '/** stories code **/',
       'export const fooStory = () => {}',
       'export const fooPreviewStory = () => {}',
+      '/** stories setup code **/',
       'const rootNode = document;',
-      `const stories = [{ key: 'fooStory', story: fooStory, code: \`<pre class="language-js"><code class="language-js"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token function-variable function">fooStory</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span>`,
-      `</code></pre>\` }, { key: 'fooPreviewStory', story: fooPreviewStory, code: \`<pre class="language-js"><code class="language-js"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token function-variable function">fooPreviewStory</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span>`,
-      `</code></pre>\` }];`,
+      `const stories = [{ key: 'fooStory', story: fooStory }, { key: 'fooPreviewStory', story: fooPreviewStory }];`,
+      'let needsMdjsElements = false;',
       'for (const story of stories) {',
       '  const storyEl = rootNode.querySelector(`[mdjs-story-name="${story.key}"]`);',
-      '  storyEl.codeHasHtml = true;',
-      '  storyEl.story = story.story;',
-      '  storyEl.code = story.code;',
+      '  if (storyEl) {',
+      '    storyEl.story = story.story;',
+      '    storyEl.key = story.key;',
+      '    needsMdjsElements = true;',
+      '    Object.assign(storyEl, {});',
+      '  }',
       '};',
-      `if (!customElements.get('mdjs-preview')) { import('@mdjs/mdjs-preview/mdjs-preview.js'); }`,
-      `if (!customElements.get('mdjs-story')) { import('@mdjs/mdjs-story/mdjs-story.js'); }`,
+      'if (needsMdjsElements) {',
+      `  if (!customElements.get('mdjs-preview')) { import('@mdjs/mdjs-preview/define'); }`,
+      `  if (!customElements.get('mdjs-story')) { import('@mdjs/mdjs-story/define'); }`,
+      '}',
     ].join('\n');
 
     const result = await mdjsProcess(input);
+
     expect(result.html).to.equal(expected);
     expect(result.jsCode).to.equal(expectedJsCode);
   });
@@ -150,4 +168,45 @@ describe('mdjsProcess', () => {
     const result = await mdjsProcess(input);
     expect(result.html.trim()).to.equal(expected);
   });
+
+  it('can adjust languages for story preview', async () => {
+    const input = [
+      'Intro',
+      '```js preview-story',
+      'export const fooPreviewStory = () => {}',
+      '```',
+    ].join('\n');
+
+    const expected = [
+      `/** script code **/`,
+      ``,
+      `/** stories code **/`,
+      `export const fooPreviewStory = () => {}`,
+      `/** stories setup code **/`,
+      `const rootNode = document;`,
+      `const stories = [{ key: 'fooPreviewStory', story: fooPreviewStory }];`,
+      `let needsMdjsElements = false;`,
+      `for (const story of stories) {`,
+      '  const storyEl = rootNode.querySelector(`[mdjs-story-name="${story.key}"]`);',
+      `  if (storyEl) {`,
+      `    storyEl.story = story.story;`,
+      `    storyEl.key = story.key;`,
+      `    needsMdjsElements = true;`,
+      '    Object.assign(storyEl, {"languages":[{"key":"en","name":"English"}]});',
+      `  }`,
+      `};`,
+      `if (needsMdjsElements) {`,
+      `  if (!customElements.get('mdjs-preview')) { import('@mdjs/mdjs-preview/define'); }`,
+      `  if (!customElements.get('mdjs-story')) { import('@mdjs/mdjs-story/define'); }`,
+      `}`,
+    ].join('\n');
+    const result = await mdjsProcess(input, {
+      setupUnifiedPlugins: [
+        adjustPluginOptions('mdjsSetupCode', {
+          simulationSettings: { languages: [{ key: 'en', name: 'English' }] },
+        }),
+      ],
+    });
+    expect(result.jsCode.trim()).to.equal(expected);
+  });
 });

packages/mdjs-core/test-node/mdjsParse.test.js

@@ -28,7 +28,7 @@ describe('mdjsParse', () => {
     expect(/** @type {MDJSVFileData} */ (result.data).jsCode).to.equal('const bar = 22;');
   });
 
-  // TODO: fix this bug
+  // TODO: fix this bug - maybe something in unified itself 🤔
   it.skip('handling only "js script" code blocks', async () => {
     const input = [
       //

packages/mdjs-core/test-node/mdjsStoryParse.test.js

@@ -37,9 +37,27 @@ describe('mdjsStoryParse', () => {
       '<pre><code class="language-js">const foo = 1;',
       '</code></pre>',
       '<mdjs-story mdjs-story-name="fooStory"></mdjs-story>',
-      '<mdjs-preview mdjs-story-name="fooPreviewStory"></mdjs-preview>',
+      '<mdjs-preview mdjs-story-name="fooPreviewStory">',
+      '',
+      '',
+      '',
+      '<pre><code class="language-js">export const fooPreviewStory = () => {}',
+      '</code></pre>',
+      '',
+      '',
+      '',
+      '</mdjs-preview>',
       '<mdjs-story mdjs-story-name="HtmlStory0"></mdjs-story>',
-      '<mdjs-preview mdjs-story-name="HtmlStory1"></mdjs-preview>',
+      '<mdjs-preview mdjs-story-name="HtmlStory1">',
+      '',
+      '',
+      '',
+      '<pre><code class="language-html">&#x3C;demo-el>&#x3C;/demo-el>',
+      '</code></pre>',
+      '',
+      '',
+      '',
+      '</mdjs-preview>',
       '',
     ].join('\n');
 

packages/mdjs-core/types/code.d.ts

@@ -25,6 +25,7 @@ export interface ParseResult {
   data: {
     stories: Story[];
     jsCode: string;
+    setupJsCode: string;
   };
 }
 

packages/mdjs-preview/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @mdjs/mdjs-preview
 
+## 0.4.2
+
+### Patch Changes
+
+- 72f631a: Improve customizations by hiding empty themes, platforms and adding parts to be styled.
+- 74dd8d1: Autoheight will not grow bigger than the current size height
+- 72f631a: Add a copy code button
+
+## 0.4.1
+
+### Patch Changes
+
+- 0f6709a: Make sure initial settings are taken from the element if nothing is yet stored
+
+## 0.4.0
+
+### Minor Changes
+
+- edb1abf: Reworking completely by
+
+  - slotting in the highlighted code
+  - open story in dedicated window
+  - enabling an simulation mode that can render the story in an iframe
+  - share settings between all simulators
+  - option to remember simulator settings
+  - force side effect import via `/define`
+
 ## 0.3.2
 
 ### Patch Changes

packages/mdjs-preview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdjs/mdjs-preview",
-  "version": "0.3.2",
+  "version": "0.4.2",
   "publishConfig": {
     "access": "public"
   },
@@ -17,7 +17,7 @@
   "type": "module",
   "exports": {
     ".": "./index.js",
-    "./mdjs-preview.js": "./mdjs-preview.js"
+    "./define": "./src/define/define.js"
   },
   "scripts": {
     "debug": "cd ../../ && npm run debug -- --group mdjs-preview",
@@ -32,8 +32,8 @@
     "src"
   ],
   "dependencies": {
-    "lit-element": "^2.4.0",
-    "lit-html": "^1.3.0"
+    "@lion/accordion": "^0.4.2",
+    "lit-element": "^2.4.0"
   },
   "types": "dist-types/index.d.ts"
 }

packages/mdjs-preview/src/MdJsPreview.js

@@ -1,5 +1,13 @@
 import { LitElement, html, css } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import '@lion/accordion/define';
+
+import {
+  subscribe,
+  unSubscribe,
+  saveToSharedStates,
+  applySharedStates,
+} from './mdjsViewerSharedStates.js';
+import { addResizeHandler } from './resizeHandler.js';
 
 /**
  * @typedef {object} StoryOptions
@@ -20,160 +28,801 @@ export class MdJsPreview extends LitElement {
       story: {
         attribute: false,
       },
-      code: {
+      key: {
         type: String,
       },
-      codeHasHtml: {
+      deviceMode: {
         type: Boolean,
-      },
-      showCode: {
-        type: Boolean,
-        attribute: 'show-code',
+        attribute: 'device-mode',
         reflect: true,
       },
+      sameSettings: { type: Boolean },
+      contentHeight: { type: Number },
+      simulatorUrl: { type: String },
+      // page settings
+      platform: { type: String },
+      platforms: { type: Array },
+      size: { type: String },
+      sizes: { type: Array },
+      theme: { type: String, reflect: true },
+      themes: { type: Array },
+      language: { type: String },
+      languages: { type: Array },
+      edgeDistance: { type: Boolean },
+      autoHeight: { type: Boolean },
+      rememberSettings: { type: Boolean },
+      __copyButtonText: { type: String },
     };
   }
 
-  toggleShowCode() {
-    this.showCode = !this.showCode;
-  }
-
   constructor() {
     super();
-    this.code = '';
     /** @type {LitHtmlStoryFn} */
     this.story = () => html` <p>Loading...</p> `;
-    this.codeHasHtml = false;
+    this.key = '';
+    this.contentHeight = 0;
+    this.simulatorUrl = '';
+    this.__supportsClipboard = 'clipboard' in navigator;
+    this.__copyButtonText = 'Copy Code';
+
+    this.theme = 'light';
+    /** @type {{ key: string, name: string }[]} */
+    this.themes = [
+      // { key: 'light', name: 'Light' },
+      // { key: 'dark', name: 'Dark' },
+    ];
+
+    this.language = 'en-US';
+    this.languages = [
+      { key: 'en', name: 'English' },
+      { key: 'en-US', name: 'English (United States)' },
+      { key: 'en-GB', name: 'English (United Kingdom)' },
+      { key: 'de', name: 'German' },
+      { key: 'es', name: 'Spanish' },
+      { key: 'fi', name: 'Finnish' },
+      { key: 'fr', name: 'French' },
+      { key: 'it', name: 'Italian' },
+      { key: 'nl', name: 'Dutch' },
+      { key: 'pl', name: 'Polish' },
+      { key: 'pt', name: 'Portuguese' },
+      { key: 'ro', name: 'Romanian' },
+      { key: 'sv', name: 'Swedish' },
+    ];
+
+    this.platform = 'web';
+
+    /** @type {{ key: string, name: string }[]} */
+    this.platforms = [
+      // { key: 'web', name: 'Web' },
+      // { key: 'web-windows', name: 'Windows' },
+      // { key: 'web-mac', name: 'Mac' },
+      // { key: 'android', name: 'Android' },
+      // { key: 'ios', name: 'iOS' },
+    ];
+
+    this.size = 'webSmall';
+    this.sizes = [
+      {
+        key: 'webSmall',
+        name: 'Small',
+        platform: 'web',
+        width: 360,
+        height: 640,
+        dpr: 1,
+      },
+      {
+        key: 'webMedium',
+        name: 'Medium',
+        platform: 'web',
+        width: 640,
+        height: 640,
+        dpr: 1,
+      },
+      {
+        key: 'webLarge',
+        name: 'Large',
+        platform: 'web',
+        width: 1024,
+        height: 640,
+        dpr: 1,
+      },
+      {
+        key: 'pixel2',
+        name: 'Pixel 2',
+        platform: 'android',
+        width: 411,
+        height: 731,
+        dpr: 2.6,
+      },
+      {
+        key: 'galaxyS5',
+        name: 'Galaxy S5',
+        platform: 'android',
+        width: 360,
+        height: 640,
+        dpr: 3,
+      },
+      {
+        key: 'iphoneX',
+        name: 'iPhone X',
+        platform: 'ios',
+        width: 375,
+        height: 812,
+        dpr: 3,
+      },
+      {
+        key: 'iPad',
+        name: 'iPad',
+        platform: 'ios',
+        width: 768,
+        height: 1024,
+        dpr: 2,
+      },
+    ];
+
+    this.deviceMode = false;
+    this.autoHeight = true;
+    this.edgeDistance = true;
+    this.sameSettings = true;
+    this.rememberSettings = false;
+
+    this.__firstRun = true;
+    this.__syncUp = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.sameSettings) {
+      applySharedStates(this);
+    }
+    addResizeHandler();
+  }
+
+  get baseUrl() {
+    return document.location.origin;
+  }
+
+  get deviceHeight() {
+    const maxHeight = this.sizeData?.height || 50;
+    if (this.autoHeight) {
+      return Math.min(this.contentHeight, maxHeight);
+    }
+    return maxHeight;
+  }
+
+  /**
+   * @param {string} platform
+   */
+  getSizesFor(platform) {
+    return this.sizes.filter(el => el.platform === platform);
+  }
+
+  get sizeData() {
+    return (
+      this.sizes.find(el => el.key === this.size) || { width: 50, height: 50, name: 'default' }
+    );
+  }
+
+  onSubscribe = () => {
+    this.__syncUp = false;
+    applySharedStates(this);
+    this.__syncUp = true;
+  };
+
+  /**
+   * @param {import('lit-element').PropertyValues} changeProps
+   */
+  update(changeProps) {
+    super.update(changeProps);
+    if (this.sameSettings && this.__syncUp) {
+      saveToSharedStates(this, this.onSubscribe);
+    }
+
+    if (changeProps.has('sameSettings')) {
+      if (this.sameSettings) {
+        subscribe(this.onSubscribe);
+      } else {
+        unSubscribe(this.onSubscribe);
+      }
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.sameSettings) {
+      unSubscribe(this.onSubscribe);
+    }
+  }
+
+  firstUpdated() {
+    this.__syncUp = true;
+  }
+
+  get iframeUrl() {
+    const mdjsSetupScript = /** @type {HTMLScriptElement} */ (document.querySelector(
+      'script[type=module][mdjs-setup]',
+    ));
+    if (!mdjsSetupScript) {
+      throw new Error('Could not find a <script type="module" src="..." mdjs-setup></script>');
+    }
+
+    const params = new URLSearchParams();
+    params.set('story-file', mdjsSetupScript.src);
+    params.set('story-key', this.key);
+    params.set('theme', this.theme);
+    params.set('platform', this.platform);
+    params.set('language', this.language);
+    params.set('edge-distance', this.edgeDistance.toString());
+
+    const links = /** @type {HTMLLinkElement[]} */ ([
+      ...document.querySelectorAll('link[mdjs-use]'),
+    ]);
+    for (const link of links) {
+      if (link.href) {
+        params.append('stylesheets', link.href);
+      }
+    }
+
+    return `${this.simulatorUrl}#?${params.toString()}`;
+  }
+
+  /**
+   * @param {string} platform
+   */
+  changePlatform(platform) {
+    this.platform = platform;
+    const sizes = this.getSizesFor(this.platform);
+    this.size = sizes[0].key;
+  }
+
+  async onCopy() {
+    if (this.textContent) {
+      await navigator.clipboard.writeText(this.textContent.trim());
+      this.__copyButtonText = 'Copied ✅';
+      setTimeout(() => {
+        this.__copyButtonText = 'Copy code';
+      }, 2000);
+    }
+  }
+
+  renderPlatforms() {
+    if (this.platforms.length) {
+      return html`
+        <h4>Platform</h4>
+        <div
+          class="segmented-control"
+          @change=${
+            /** @param {Event} ev */ ev => {
+              if (ev.target) {
+                this.changePlatform(/** @type {HTMLInputElement} */ (ev.target).value);
+              }
+            }
+          }
+        >
+          ${this.platforms.map(
+            platform => html`
+              <label class="${this.platform === platform.key ? 'selected' : ''}">
+                <span>${platform.name}</span>
+                <input
+                  type="radio"
+                  name="platform"
+                  value="${platform.key}"
+                  ?checked=${this.platform === platform.key}
+                />
+              </label>
+            `,
+          )}
+        </div>
+      `;
+    }
+  }
+
+  renderPlatform() {
+    if (this.platforms.length) {
+      return html`
+        <div>
+          <h3>Platform</h3>
+          ${this.renderPlatforms()}
+        </div>
+      `;
+    }
+  }
+
+  renderSizes() {
+    if (this.sizes.length) {
+      return html`
+        <h4>Size</h4>
+        <div
+          class="segmented-control"
+          @change=${
+            /** @param {Event} ev */ ev => {
+              if (ev.target) {
+                this.size = /** @type {HTMLInputElement} */ (ev.target).value;
+              }
+            }
+          }
+        >
+          ${this.getSizesFor(this.platform).map(
+            size => html`
+              <label class="${this.size === size.key ? 'selected' : ''}">
+                <span>${size.name}</span>
+                <input
+                  type="radio"
+                  name="size"
+                  value="${size.key}"
+                  .checked=${this.size === size.key}
+                />
+              </label>
+            `,
+          )}
+        </div>
+      `;
+    }
+  }
+
+  renderViewport() {
+    return html`
+      <div>
+        <h3>Viewport</h3>
+        ${this.renderSizes()} ${this.renderAutoHeight()}
+      </div>
+    `;
+  }
+
+  renderThemes() {
+    if (this.themes.length) {
+      return html`
+        <div
+          class="segmented-control"
+          @change=${
+            /** @param {Event} ev */ ev => {
+              if (ev.target) {
+                this.theme = /** @type {HTMLInputElement} */ (ev.target).value;
+              }
+            }
+          }
+        >
+          ${this.themes.map(
+            theme => html`
+              <label class="${this.theme === theme.key ? 'selected' : ''}">
+                <span>${theme.name}</span>
+                <input
+                  type="radio"
+                  name="theme"
+                  value="${theme.key}"
+                  ?checked=${this.theme === theme.key}
+                />
+              </label>
+            `,
+          )}
+        </div>
+      `;
+    }
+  }
+
+  renderVisual() {
+    return html`
+      <div>
+        <h3>Visual</h3>
+        ${this.renderThemes()} ${this.renderEdgeDistance()}
+      </div>
+    `;
+  }
+
+  renderLanguages() {
+    if (this.languages.length) {
+      return html`
+        <label>
+          Language
+          <select
+            @change=${
+              /** @param {Event} ev */ ev => {
+                if (ev.target) {
+                  this.language = /** @type {HTMLInputElement} */ (ev.target).value;
+                }
+              }
+            }
+          >
+            ${this.languages.map(
+              language => html`
+                <option value="${language.key}" ?selected=${this.language === language.key}>
+                  ${language.name}
+                </option>
+              `,
+            )}
+          </select>
+        </label>
+      `;
+    }
+  }
+
+  renderLocalization() {
+    return html`
+      <div>
+        <h3>Localization</h3>
+        ${this.renderLanguages()}
+      </div>
+    `;
+  }
+
+  renderEdgeDistance() {
+    return html`
+      <div>
+        <label class="${this.edgeDistance ? 'switch selected' : 'switch'}">
+          Apply distance to edge
+          <span part="switch-button"></span>
+
+          <input
+            type="checkbox"
+            ?checked=${this.edgeDistance}
+            @change=${
+              /** @param {Event} ev */ ev => {
+                if (ev.target) {
+                  this.edgeDistance = /** @type {HTMLInputElement} */ (ev.target).checked;
+                }
+              }
+            }
+          />
+        </label>
+      </div>
+    `;
+  }
+
+  renderAutoHeight() {
+    return html`
+      <div>
+        <label class="${this.autoHeight ? 'switch selected' : 'switch'}">
+          Fit height to content
+          <span part="switch-button"></span>
+          <input
+            type="checkbox"
+            ?checked=${this.autoHeight}
+            @change=${
+              /** @param {Event} ev */ ev => {
+                if (ev.target) {
+                  this.autoHeight = /** @type {HTMLInputElement} */ (ev.target).checked;
+                }
+              }
+            }
+          />
+        </label>
+      </div>
+    `;
+  }
+
+  renderSameSettings() {
+    return html`
+      <div>
+        <label class="${this.sameSettings ? 'switch selected' : 'switch'}">
+          Same settings for all simulations
+          <span part="switch-button"></span>
+          <input
+            type="checkbox"
+            ?checked=${this.sameSettings}
+            @change=${
+              /** @param {Event} ev */ ev => {
+                if (ev.target) {
+                  this.sameSettings = /** @type {HTMLInputElement} */ (ev.target).checked;
+                }
+              }
+            }
+          />
+        </label>
+      </div>
+    `;
+  }
+
+  renderRememberSettings() {
+    if (!this.sameSettings) {
+      return html``;
+    }
+    return html`
+      <div>
+        <label class="${this.rememberSettings ? 'switch selected' : 'switch'}">
+          Remember settings
+          <span part="switch-button"></span>
+          <input
+            type="checkbox"
+            ?checked=${this.rememberSettings}
+            @change=${
+              /** @param {Event} ev */ ev => {
+                if (ev.target) {
+                  this.rememberSettings = /** @type {HTMLInputElement} */ (ev.target).checked;
+                }
+              }
+            }
+          />
+        </label>
+      </div>
+    `;
+  }
+
+  renderSyncSettings() {
+    return html`
+      <div>
+        <h3>Global</h3>
+        ${this.renderSameSettings()} ${this.renderRememberSettings()}
+      </div>
+    `;
   }
 
   render() {
     return html`
       <div id="wrapper">
-        <div>${this.story({ shadowRoot: this.shadowRoot })}</div>
-        <button id="showCodeButton" @click=${this.toggleShowCode}>show code</button>
+        ${this.deviceMode === false
+          ? html`<div>${this.story({ shadowRoot: this.shadowRoot })}</div>`
+          : html`
+              <iframe
+                part="iframe"
+                csp=${`script-src ${document.location.origin} 'unsafe-inline'; connect-src ws://${document.location.host}/`}
+                .src=${this.iframeUrl}
+                style=${`width: ${this.sizeData.width}px; height: ${this.deviceHeight}px;`}
+              ></iframe>
+              <p part="frame-description" style=${`width: ${this.sizeData.width + 4}px;`}>
+                ${this.sizeData.name} - ${this.deviceHeight}x${this.sizeData.width}
+              </p>
+            `}
       </div>
-      ${this.codeHasHtml ? unsafeHTML(this.code) : html`<pre><code>${this.code}</code></pre>`}
+      <lion-accordion class="options">
+        ${this.deviceMode
+          ? html`
+              <h3 slot="invoker">
+                <button>Settings</button>
+              </h3>
+              <div slot="content">
+                <div class="settings-wrapper">
+                  ${this.renderPlatform()} ${this.renderViewport()} ${this.renderVisual()}
+                  ${this.renderLocalization()} ${this.renderSyncSettings()}
+                </div>
+              </div>
+            `
+          : ''}
+        <h3 slot="invoker">
+          <button>Code</button>
+        </h3>
+        <div slot="content">
+          <slot id="code-slot"></slot>
+          <button part="copy-button" @click="${this.onCopy}" ?hidden="${!this.__supportsClipboard}">
+            ${this.__copyButtonText}
+          </button>
+        </div>
+      </lion-accordion>
+      ${this.simulatorUrl
+        ? html`
+            <div class="controls">
+              <a href=${this.iframeUrl} target="_blank">Open simulation in new window</a>
+              <button
+                @click=${() => (this.deviceMode = !this.deviceMode)}
+                class="simulation-toggle"
+              >
+                ${this.deviceMode ? html`Disable` : html`Enable`} device simulation
+              </button>
+            </div>
+          `
+        : ''}
     `;
   }
 
   static get styles() {
     return css`
       :host {
-        border: 1px solid #ccc;
         display: block;
-        box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px;
+        padding-bottom: 10px;
       }
 
-      #showCodeButton {
-        position: absolute;
-        right: 5px;
-        bottom: 5px;
+      iframe {
+        border: 2px solid #4caf50;
+        background: #fff;
+      }
+
+      [part='copy-button'] {
+        border: 1px solid var(--primary-color, #3f51b5);
+        border-radius: 9px;
+        padding: 7px;
+        background: none;
+        font-weight: bold;
+        color: var(--primary-color, #3f51b5);
+        text-align: center;
         font-size: 12px;
-        line-height: 20px;
-        color: #24292e;
-        background-color: #eff3f6;
-        background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
+        line-height: 12px;
+        float: right;
+        margin-top: -10px;
+      }
+
+      [part='copy-button']:hover {
+        background-color: var(--primary-color, #3f51b5);
+        color: #fff;
+      }
+
+      .switch {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 10px;
+      }
+
+      .switch:focus-within [part='switch-button'] {
+        box-shadow: 0 0 0 1px hsl(0deg 0% 100% / 40%), 0 0 0 4px rgb(31 117 203 / 48%);
+      }
+
+      [part='switch-button'] {
         display: inline-block;
-        padding: 3px 12px;
-        white-space: nowrap;
-        vertical-align: middle;
-        cursor: pointer;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-        background-repeat: repeat-x;
-        background-position: -1px -1px;
-        background-size: 110% 110%;
-        border: 1px solid rgba(27, 31, 35, 0.2);
-        border-radius: 0.25em;
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        appearance: none;
-      }
-
-      #showCodeButton:hover {
-        background-color: #e6ebf1;
-        background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
-        background-position: -0.5em;
-        border-color: rgba(27, 31, 35, 0.35);
-        text-decoration: none;
-        background-repeat: repeat-x;
-      }
-
-      #wrapper {
+        width: 44px;
+        background: #808080;
+        height: 25px;
+        border-radius: 15px;
         position: relative;
+      }
+
+      [part='switch-button']::after {
+        content: ' ';
+        width: 18px;
+        height: 18px;
+        border-radius: 10px;
+        background: rgb(255, 255, 255);
+        display: block;
+        position: absolute;
+        top: 3px;
+        left: 4px;
+      }
+
+      .switch.selected [part='switch-button'] {
+        background: var(--primary-color, #008000);
+      }
+
+      .switch.selected [part='switch-button']::after {
+        left: auto;
+        right: 4px;
+      }
+
+      [part='frame-description'] {
+        margin: -5px 0 10px 0;
+        text-align: right;
+        font-size: 12px;
+        color: #333;
+      }
+
+      .settings-wrapper {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-gap: 20px 40px;
+        max-width: 650px;
+      }
+
+      @media (min-width: 640px) {
+        .settings-wrapper {
+          grid-template-columns: repeat(2, 1fr);
+        }
+      }
+
+      .settings-wrapper h3 {
+        margin: 10px 0;
+        font-size: 16px;
+      }
+
+      .options {
+        display: block;
+        padding: 15px 0;
+      }
+
+      .controls {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      .controls a {
+        color: var(--primary-color, #3f51b5);
+        font-size: 14px;
+        line-height: 37px;
+      }
+
+      .simulation-toggle {
+        border: 1px solid var(--primary-color, #3f51b5);
+        border-radius: 9px;
+        padding: 10px;
+        background: none;
+        font-weight: bold;
+        color: var(--primary-color, #3f51b5);
+        text-align: center;
+      }
+
+      .simulation-toggle:hover {
+        background-color: var(--primary-color, #3f51b5);
+        color: #fff;
+      }
+
+      h3[slot='invoker'] button {
+        font-size: 16px;
+        display: block;
+        position: relative;
+        padding: 10px;
+        border: none;
+        border-bottom: 1px solid #bbb;
+        width: 100%;
+        background: none;
+        text-align: left;
+        font-weight: bold;
+      }
+
+      h3[slot='invoker'] button::after {
+        content: '>';
+        right: 20px;
+        top: 10px;
+        position: absolute;
+        transform: rotate(90deg);
+      }
+
+      h3[slot='invoker'][expanded='true'] button::after {
+        transform: rotate(-90deg);
+      }
+
+      h3[slot='invoker'][expanded='true'] button {
+        border-bottom: none;
+      }
+
+      [slot='content'] {
+        border-bottom: 1px solid #bbb;
         padding: 10px;
       }
 
-      :host > pre {
-        display: none;
-        margin: 0;
-        padding: 16px;
-        overflow: auto;
-        font-size: 85%;
-        line-height: 1.45;
-        background-color: #f6f8fa;
-        border-radius: 3px;
+      h3[slot='invoker']:first-child button {
+        border-top: 1px solid #bbb;
       }
 
-      :host([show-code]) > pre {
+      h4 {
+        font-weight: normal;
+        font-size: 14px;
+        margin: 5px 0;
+      }
+
+      .segmented-control {
+        border: 1px solid var(--primary-color, #3f51b5);
+        border-radius: 18px;
+        display: inline-block;
+        font-size: 14px;
+        margin-bottom: 10px;
+      }
+
+      .segmented-control span {
+        padding: 5px 10px;
+        display: inline-block;
+        border-radius: 18px;
+        margin: 2px 0;
+      }
+
+      .segmented-control label:first-child span {
+        margin-left: 2px;
+      }
+
+      .segmented-control label:last-child span {
+        margin-right: 2px;
+      }
+
+      .segmented-control label.selected span {
+        background: var(--primary-color, #3f51b5);
+        color: #fff;
+      }
+
+      .segmented-control label:focus-within span {
+        box-shadow: 0 0 0 1px hsl(0deg 0% 100% / 40%), 0 0 0 4px rgb(31 117 203 / 48%);
+      }
+
+      .segmented-control input,
+      .switch input {
+        clip: rect(0 0 0 0);
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+      }
+
+      select {
         display: block;
-      }
-
-      code[class*='language-'],
-      pre[class*='language-'] {
-        color: #393a34;
-        font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
-        direction: ltr;
-        text-align: left;
-        white-space: pre;
-        word-spacing: normal;
-        word-break: normal;
-        tab-size: 4;
-        hyphens: none;
-        overflow: auto;
-        font-size: 85%;
-        line-height: 1.45;
-        background-color: #f6f8fa;
+        padding: 5px;
+        border: 1px solid #333;
         border-radius: 3px;
       }
-
-      .token.function,
-      .token.class-name {
-        color: #6f42c1;
-      }
-
-      .token.tag,
-      .token.selector,
-      .language-autohotkey .token.keyword {
-        color: #22863a;
-      }
-
-      .token.entity,
-      .token.url,
-      .token.symbol,
-      .token.number,
-      .token.boolean,
-      .token.variable,
-      .token.constant,
-      .token.property,
-      .token.inserted,
-      .token.punctuation,
-      .token.operator {
-        color: #005cc5;
-      }
-
-      .token.regex {
-        color: #032f62;
-      }
-
-      .token.atrule,
-      .token.keyword,
-      .token.attr-name,
-      .language-autohotkey .token.selector {
-        color: #d73a49;
-      }
     `;
   }
 }

packages/mdjs-preview/src/define/define.js

@@ -1,3 +1,3 @@
-import { MdJsPreview } from './src/MdJsPreview.js';
+import { MdJsPreview } from '../MdJsPreview.js';
 
 customElements.define('mdjs-preview', MdJsPreview);

packages/mdjs-preview/src/mdjsViewerSharedStates.js

@@ -0,0 +1,132 @@
+const _sharedStates = {
+  platform: 'web',
+  size: 'webSmall',
+  theme: 'light',
+  language: 'en',
+  autoHeight: true,
+  deviceMode: false,
+  rememberSettings: false,
+  edgeDistance: true,
+};
+
+/** @type {Function[]} */
+let subscribeFns = [];
+
+/**
+ * @param {Function} subscribeFn
+ */
+export function subscribe(subscribeFn) {
+  subscribeFns.push(subscribeFn);
+}
+
+/**
+ * @param {Function} subscribeFn
+ */
+export function unSubscribe(subscribeFn) {
+  subscribeFns = subscribeFns.filter(fn => fn !== subscribeFn);
+}
+
+function storeSettings() {
+  for (const _sharedStateKey of Object.keys(_sharedStates)) {
+    const sharedStateKey = /** @type {keyof _sharedStates} */ (_sharedStateKey);
+    if (_sharedStates.rememberSettings) {
+      localStorage.setItem(
+        `mdjsViewerSharedStates-${sharedStateKey}`,
+        _sharedStates[sharedStateKey].toString(),
+      );
+    } else {
+      localStorage.removeItem(`mdjsViewerSharedStates-${sharedStateKey}`);
+    }
+  }
+}
+
+let hasGlobalStateBeenSetBefore = false;
+
+function restoreSettings() {
+  for (const _sharedStateKey of Object.keys(_sharedStates)) {
+    const sharedStateKey = /** @type {keyof _sharedStates} */ (_sharedStateKey);
+    const restoredValue = localStorage.getItem(`mdjsViewerSharedStates-${sharedStateKey}`);
+    if (restoredValue !== null) {
+      switch (sharedStateKey) {
+        case 'autoHeight':
+        case 'deviceMode':
+        case 'rememberSettings':
+        case 'edgeDistance':
+          _sharedStates[sharedStateKey] = restoredValue === 'true' ? true : false;
+          break;
+        default:
+          _sharedStates[sharedStateKey] = restoredValue;
+      }
+      hasGlobalStateBeenSetBefore = true;
+    }
+  }
+}
+
+restoreSettings();
+
+/**
+ *
+ * @param {import('./MdJsPreview.js').MdJsPreview} target
+ */
+export function applySharedStates(target) {
+  if (hasGlobalStateBeenSetBefore) {
+    for (const _sharedStateKey of Object.keys(_sharedStates)) {
+      const sharedStateKey = /** @type {keyof _sharedStates} */ (_sharedStateKey);
+      switch (sharedStateKey) {
+        case 'autoHeight':
+        case 'deviceMode':
+        case 'rememberSettings':
+        case 'edgeDistance':
+          target[sharedStateKey] = _sharedStates[sharedStateKey];
+          break;
+        default:
+          target[sharedStateKey] = _sharedStates[sharedStateKey];
+      }
+    }
+  } else {
+    _saveToSharedStates(target);
+  }
+}
+
+/**
+ *
+ * @param {import('./MdJsPreview.js').MdJsPreview} target
+ */
+function _saveToSharedStates(target) {
+  let updated = false;
+  for (const _sharedStateKey of Object.keys(_sharedStates)) {
+    const sharedStateKey = /** @type {keyof _sharedStates} */ (_sharedStateKey);
+    if (_sharedStates[sharedStateKey] !== target[sharedStateKey]) {
+      switch (sharedStateKey) {
+        case 'autoHeight':
+        case 'deviceMode':
+        case 'rememberSettings':
+        case 'edgeDistance':
+          _sharedStates[sharedStateKey] = target[sharedStateKey];
+          break;
+        default:
+          _sharedStates[sharedStateKey] = target[sharedStateKey];
+      }
+      updated = true;
+      hasGlobalStateBeenSetBefore = true;
+    }
+  }
+  return updated;
+}
+
+/**
+ *
+ * @param {import('./MdJsPreview.js').MdJsPreview} target
+ * @param {Function} subscribedFn
+ */
+export function saveToSharedStates(target, subscribedFn) {
+  const updated = _saveToSharedStates(target);
+  if (updated) {
+    storeSettings();
+    for (const subscribeFn of subscribeFns) {
+      if (subscribeFn !== subscribedFn) {
+        subscribeFn();
+      }
+    }
+  }
+}

packages/mdjs-preview/src/resizeHandler.js

@@ -0,0 +1,19 @@
+let addedCount = 0;
+
+export function addResizeHandler() {
+  if (addedCount > 0) {
+    addedCount += 1;
+    return;
+  }
+  window.addEventListener('message', ev => {
+    const data = JSON.parse(ev.data);
+    if (data.action === 'mdjs-viewer-resize') {
+      const viewer = /** @type {import('./MdJsPreview.js').MdJsPreview} */ (document.body.querySelector(
+        `[mdjs-story-name="${data.storyKey}"]`,
+      ));
+      if (viewer) {
+        viewer.contentHeight = data.height;
+      }
+    }
+  });
+}

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

@@ -0,0 +1,38 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import '@mdjs/mdjs-preview/define';
+
+/** @typedef {import('@mdjs/mdjs-preview').MdJsPreview} MdJsPreview */
+
+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>
+    `);
+    expect(el.shadowRoot.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=${() => html`<p></p>`}></mdjs-preview>
+      </div>
+    `);
+    const [preview1, preview2] = /** @type {MdJsPreview[]} */ (el.children);
+    preview1.platform = 'web';
+    preview1.edgeDistance = true;
+    await preview1.updateComplete;
+    expect(preview1.platform).to.equal('web');
+    expect(preview2.platform).to.equal('web');
+    expect(preview1.edgeDistance).to.be.true;
+    expect(preview2.edgeDistance).to.be.true;
+
+    preview1.platform = 'android';
+    preview1.edgeDistance = false;
+    await preview1.updateComplete;
+    expect(preview1.platform).to.equal('android');
+    expect(preview2.platform).to.equal('android');
+    expect(preview1.edgeDistance).to.be.false;
+    expect(preview2.edgeDistance).to.be.false;
+  });
+});

packages/mdjs-story/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @mdjs/mdjs-story
 
+## 0.2.0
+
+### Minor Changes
+
+- 604a80e: Force `/define`Ï entrypoint via export map
+
 ## 0.1.2
 
 ### Patch Changes

packages/mdjs-story/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdjs/mdjs-story",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "publishConfig": {
     "access": "public"
   },
@@ -17,7 +17,7 @@
   "type": "module",
   "exports": {
     ".": "./index.js",
-    "./mdjs-story.js": "./mdjs-story.js"
+    "./define": "./src/define.js"
   },
   "scripts": {
     "debug": "cd ../../ && npm run debug -- --group mdjs-story",

packages/mdjs-story/src/define.js

@@ -1,3 +1,3 @@
-import { MdJsStory } from './src/MdJsStory.js';
+import { MdJsStory } from './MdJsStory.js';
 
 customElements.define('mdjs-story', MdJsStory);

packages/plugins-manager/package.json

@@ -13,8 +13,8 @@
   },
   "author": "Modern Web <hello@modern-web.dev> (https://modern-web.dev/)",
   "homepage": "https://rocket.modern-web.dev/docs/tools/plugins-manager/",
-  "type": "module",
   "main": "./dist/index.cjs",
+  "type": "module",
   "exports": {
     ".": {
       "require": "./dist/index.cjs",

packages/search/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @rocket/search
 
+## 0.3.5
+
+### Patch Changes
+
+- 2b7f1ee: Add support for pathprefix
+
+## 0.3.4
+
+### Patch Changes
+
+- 81edf45: Reduce the amount of js files in the build by avoiding inline script tags
+
+## 0.3.3
+
+### Patch Changes
+
+- 818caad: chore: generalize label & add alt when no img
+- 0b64116: Update @lion dependencies
+
 ## 0.3.2
 
 ### Patch Changes

packages/search/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket/search",
-  "version": "0.3.2",
+  "version": "0.3.5",
   "publishConfig": {
     "access": "public"
   },
@@ -13,8 +13,8 @@
   },
   "author": "Modern Web <hello@modern-web.dev> (https://modern-web.dev/)",
   "homepage": "https://rocket.modern-web.dev/docs/presets/search/",
-  "type": "module",
   "main": "./node.js",
+  "type": "module",
   "exports": {
     ".": "./node.js",
     "./node": "./node.js",
@@ -41,7 +41,7 @@
     "search"
   ],
   "dependencies": {
-    "@lion/combobox": "^0.1.20",
+    "@lion/combobox": "^0.5.1",
     "@open-wc/scoped-elements": "^1.3.2",
     "chalk": "^4.0.0",
     "minisearch": "^3.0.2",

packages/search/preset/_assets/scripts/define-rocket-search.js

@@ -0,0 +1 @@
+import '@rocket/search/rocket-search.js';

packages/search/preset/_includes/_joiningBlocks/header/25-search-input.njk

@@ -4,6 +4,4 @@
   </svg>
 </rocket-search>
 
-<script type="module">
-  import '@rocket/search/rocket-search.js';
-</script>
+<script type="module" src="{{ '/_assets/scripts/define-rocket-search.js' | asset | url }}"></script>

packages/search/src/RocketSearch.js

@@ -112,7 +112,7 @@ export class RocketSearch extends ScopedElementsMixin(LitElement) {
     return html`
       <rocket-search-combobox
         name="combo"
-        label="Rocket Search"
+        label="Search"
         @input=${ev => {
           this.search = ev.target.value;
         }}

packages/search/src/RocketSearchOption.js

@@ -103,7 +103,7 @@ export class RocketSearchOption extends LinkMixin(LionOption) {
 
   render() {
     return html`
-      <img class="icon" src=${getIcon(this.section)} />
+      <img class="icon" src=${getIcon(this.section)} alt=${this.section} />
       <div class="choice-field__label">
         <div class="title">${unsafeHTML(this.title)}</div>
         <div class="text">${unsafeHTML(this.text)}</div>

rocket.config.js

@@ -2,10 +2,31 @@ import { rocketLaunch } from '@rocket/launch';
 import { rocketBlog } from '@rocket/blog';
 import { rocketSearch } from '@rocket/search';
 import { absoluteBaseUrlNetlify } from '@rocket/core/helpers';
+import { adjustPluginOptions } from 'plugins-manager';
 
-export default {
+/** @type {Partial<import("./packages/cli/types/main").RocketCliOptions>} */
+const config = {
   presets: [rocketLaunch(), rocketBlog(), rocketSearch()],
   absoluteBaseUrl: absoluteBaseUrlNetlify('http://localhost:8080'),
+  setupUnifiedPlugins: [
+    adjustPluginOptions('mdjsSetupCode', {
+      simulationSettings: {
+        simulatorUrl: '/simulator/',
+        themes: [
+          { key: 'light', name: 'Light' },
+          { key: 'dark', name: 'Dark' },
+        ],
+        platforms: [
+          { key: 'web', name: 'Web' },
+          { key: 'android', name: 'Android' },
+          { key: 'ios', name: 'iOS' },
+        ],
+      },
+    }),
+  ],
+  // serviceWorkerName: 'sw.js',
 
   // emptyOutputDir: false,
 };
+
+export default config;

yarn.lock

@@ -81,7 +81,7 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.12.7.tgz#9329b4782a7d6bbd7eef57e11addf91ee3ef1e41"
   integrity sha512-YaxPMGs/XIWtYqrdEOZOCPsVWfEoriXopnsz3/i7apYPXQ3698UFhS6dVT1KN5qOsWmVgw/FOrmQgpRaZayGsw==
 
-"@babel/core@^7.11.1", "@babel/core@^7.12.10":
+"@babel/core@^7.12.10":
   version "7.12.10"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.10.tgz#b79a2e1b9f70ed3d84bbfb6d8c4ef825f606bccd"
   integrity sha512-eTAlQKq65zHfkHZV0sIVODCPGVgoo1HdBlbSLi9CqOzuZanMv2ihzY+4paiKr1mH+XmYESMAmJ/dpZ68eN6d8w==
@@ -758,7 +758,7 @@
     "@babel/helper-create-regexp-features-plugin" "^7.12.1"
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/preset-env@^7.11.0", "@babel/preset-env@^7.12.11":
+"@babel/preset-env@^7.12.11":
   version "7.12.11"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.12.11.tgz#55d5f7981487365c93dbbc84507b1c7215e857f9"
   integrity sha512-j8Tb+KKIXKYlDBQyIOy4BLxzv1NUOwlHfZ74rvW+Z0Gp4/cI2IMDPBWAgWceGcE7aep9oL/0K9mlzlMGxA8yNw==
@@ -841,7 +841,7 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/runtime@^7.10.4", "@babel/runtime@^7.11.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.10.4", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4":
   version "7.12.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
   integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
@@ -1096,97 +1096,66 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@hapi/address@^2.1.2":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
-  integrity sha512-QD1PhQk+s31P1ixsX0H0Suoupp3VMXzIVMSwobR3F3MSUO2YCV0B7xqLcUw/Bh8yuvd3LhpyqLQWTNcRmp6IdQ==
-
-"@hapi/formula@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@hapi/formula/-/formula-1.2.0.tgz#994649c7fea1a90b91a0a1e6d983523f680e10cd"
-  integrity sha512-UFbtbGPjstz0eWHb+ga/GM3Z9EzqKXFWIbSOFURU0A/Gku0Bky4bCk9/h//K2Xr3IrCfjFNhMm4jyZ5dbCewGA==
-
-"@hapi/hoek@^8.2.4", "@hapi/hoek@^8.3.0":
-  version "8.5.1"
-  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-8.5.1.tgz#fde96064ca446dec8c55a8c2f130957b070c6e06"
-  integrity sha512-yN7kbciD87WzLGc5539Tn0sApjyiGHAJgKvG9W8C7O+6c7qmoQMfVs0W4bX17eqz6C78QJqqFrtgdK5EWf6Qow==
-
-"@hapi/joi@^16.1.8":
-  version "16.1.8"
-  resolved "https://registry.yarnpkg.com/@hapi/joi/-/joi-16.1.8.tgz#84c1f126269489871ad4e2decc786e0adef06839"
-  integrity sha512-wAsVvTPe+FwSrsAurNt5vkg3zo+TblvC5Bb1zMVK6SJzZqw9UrJnexxR+76cpePmtUZKHAPxcQ2Bf7oVHyahhg==
+"@lion/accordion@^0.4.2":
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/@lion/accordion/-/accordion-0.4.2.tgz#efeb56360113a2b68e182ff29ef0932edd17df8c"
+  integrity sha512-xETjNmpBWYO1tYx2nBMq0I45UgydUJafZ4ft3szH3fQFjYWSBwjJjKsWxIhZSqX/IoTJzA0nNCdtbXoVEbSCLg==
   dependencies:
-    "@hapi/address" "^2.1.2"
-    "@hapi/formula" "^1.2.0"
-    "@hapi/hoek" "^8.2.4"
-    "@hapi/pinpoint" "^1.0.2"
-    "@hapi/topo" "^3.1.3"
+    "@lion/core" "0.16.0"
 
-"@hapi/pinpoint@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@hapi/pinpoint/-/pinpoint-1.0.2.tgz#025b7a36dbbf4d35bf1acd071c26b20ef41e0d13"
-  integrity sha512-dtXC/WkZBfC5vxscazuiJ6iq4j9oNx1SHknmIr8hofarpKUZKmlUVYVIhNVzIEgK5Wrc4GMHL5lZtt1uS2flmQ==
-
-"@hapi/topo@^3.1.3":
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/@hapi/topo/-/topo-3.1.6.tgz#68d935fa3eae7fdd5ab0d7f953f3205d8b2bfc29"
-  integrity sha512-tAag0jEcjwH+P2quUfipd7liWCNX2F8NvYjQp2wtInsZxnMlypdw0FtAOLxtvvkO+GSRRbmNi8m/5y42PQJYCQ==
+"@lion/combobox@^0.5.1":
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/@lion/combobox/-/combobox-0.5.1.tgz#6395d5c34f0935aee32034584a253c1a2c6fa717"
+  integrity sha512-sOpJLCH8pzZAOohrqVnlTjC7L93tavXugSV2SqhVsFFnSQIWXytaeL8eJPlVBrTrmcOpns6AQX2uyBbeY6ZTsg==
   dependencies:
-    "@hapi/hoek" "^8.3.0"
+    "@lion/core" "0.16.0"
+    "@lion/form-core" "0.11.0"
+    "@lion/listbox" "0.7.0"
+    "@lion/overlays" "0.26.1"
 
-"@lion/combobox@^0.1.20":
-  version "0.1.20"
-  resolved "https://registry.yarnpkg.com/@lion/combobox/-/combobox-0.1.20.tgz#9514c655171773a12f9c841187297f8791a029a6"
-  integrity sha512-Iw3BzZv7K36c2ReBDD76298VrNTPe7XElGAnr9/jzTH22eJdZD33DBXcY3D/tJlrhh02aC+4nTYxTww33lRqCA==
-  dependencies:
-    "@lion/core" "0.13.7"
-    "@lion/form-core" "0.7.0"
-    "@lion/listbox" "0.4.0"
-    "@lion/overlays" "0.23.2"
-
-"@lion/core@0.13.7":
-  version "0.13.7"
-  resolved "https://registry.yarnpkg.com/@lion/core/-/core-0.13.7.tgz#c49cff0c7199711c14d9758b8e340cd93aca2f8c"
-  integrity sha512-9KwCwd1DDM26wLEib30Lw/6Nexcz3o1SSxnBlOdLFE/akJhi9nZOK1YmlSefL0XosND8ngCa1DXn348W8B693w==
+"@lion/core@0.16.0":
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/@lion/core/-/core-0.16.0.tgz#c4c8ac81b8d5bece6d40d561a392382c7ae73533"
+  integrity sha512-/MB/G44fZtL+s8iX1GAnyjw+Drn+fROkA13BpTn808UrDMGQ+WW1oq67Wp9Hr+t34LB3ghH3tm7afniDMa1VCA==
   dependencies:
     "@open-wc/dedupe-mixin" "^1.2.18"
-    "@open-wc/scoped-elements" "^1.3.2"
+    "@open-wc/scoped-elements" "^1.3.3"
     lit-element "~2.4.0"
     lit-html "^1.3.0"
 
-"@lion/form-core@0.7.0":
+"@lion/form-core@0.11.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/form-core/-/form-core-0.7.0.tgz#0df2cefb62876dd62e2baa980129ed7bf790b3ae"
-  integrity sha512-5aWqKNQgJKgqJC6VIRNoGe5imz9w0thLEnPqWJ8y6vSru/BC114ZLefvmltK9FG21DPkPOCa+vm4PSjilaqh1w==
+  resolved "https://registry.yarnpkg.com/@lion/listbox/-/listbox-0.7.0.tgz#bd1d8cb25098387fd0ae1087f8dd641510f741f0"
+  integrity sha512-wHGqahRIjpTmMAvU/hDZyDGNhmjRj6FEYSWn7Z3ugE52D9a1PQd7HVc1cVVIRc71jC3w4n5ZYVeZChwR3N3fWw==
   dependencies:
-    "@lion/core" "0.13.7"
-    "@lion/localize" "0.15.4"
+    "@lion/core" "0.16.0"
+    "@lion/form-core" "0.11.0"
 
-"@lion/listbox@0.4.0":
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/@lion/listbox/-/listbox-0.4.0.tgz#429838fd75d40662b67e5a3f611bf3ea94b506de"
-  integrity sha512-bwVIlVX0cQoKKGf6HNqDmTH5JUM0TKAzZuHsrmLcsYG9V5bgMjfiLBXPNQxyy39WOwicPM8f2g+O5rRXBcsIYQ==
-  dependencies:
-    "@lion/core" "0.13.7"
-    "@lion/form-core" "0.7.0"
-
-"@lion/localize@0.15.4":
-  version "0.15.4"
-  resolved "https://registry.yarnpkg.com/@lion/localize/-/localize-0.15.4.tgz#b9ed5eb5b3a1304694314b4d6bbbcddc0b85f616"
-  integrity sha512-OP7Og/JXWl4Wm+AzLNKcCAoeft5eQfZlkvEFqOnRuGAXxotbxwk+yQB3kI/K7QvLURNQbv6mzwdDu2buhZdV9w==
+"@lion/localize@0.18.0":
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/@lion/localize/-/localize-0.18.0.tgz#beaf8c161feb58ecab670892c06e7b524527b7e8"
+  integrity sha512-+adOGlot4IItOy1udLKflZlO2fTKM7R0Ji7iZ5SEVG80XOZxC3RXjVM7mWSd5wqcCUe51j1P/tgKM3vDLF0RAw==
   dependencies:
     "@bundled-es-modules/message-format" "6.0.4"
-    "@lion/core" "0.13.7"
-    singleton-manager "1.2.1"
+    "@lion/core" "0.16.0"
+    singleton-manager "1.4.1"
 
-"@lion/overlays@0.23.2", "@lion/overlays@^0.23.2":
-  version "0.23.2"
-  resolved "https://registry.yarnpkg.com/@lion/overlays/-/overlays-0.23.2.tgz#cfdff6cb7ee4f46cdaa621574affbe2e9c374976"
-  integrity sha512-nKVSn37arx9+gdmlIj3gEkpJXGTnsUvbOEXcymLEFJBekvdYKCNWDe9bVBX/iTBBsgO0rQ9+eA5RskxwKPdraQ==
+"@lion/overlays@0.26.1", "@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==
   dependencies:
-    "@lion/core" "0.13.7"
+    "@lion/core" "0.16.0"
     "@popperjs/core" "^2.5.4"
-    singleton-manager "1.2.1"
+    singleton-manager "1.4.1"
 
 "@manypkg/find-root@^1.1.0":
   version "1.1.0"
@@ -1251,6 +1220,14 @@
     "@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"
+  integrity sha512-vFIQVYYjFw67odUE4JzZOpctnF7S/2DX+S+clrL3bQPql7HvEnV0wMFwOWUavQTuCJi0rfU8GTcNMiUybio+Yg==
+  dependencies:
+    "@open-wc/dedupe-mixin" "^1.3.0"
+    lit-html "^1.0.0"
+
 "@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"
@@ -1295,7 +1272,7 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.6.0.tgz#f022195afdfc942e088ee2101285a1d31c7d727f"
   integrity sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw==
 
-"@rollup/plugin-babel@^5.2.0", "@rollup/plugin-babel@^5.2.2":
+"@rollup/plugin-babel@^5.2.2":
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.2.2.tgz#e5623a01dd8e37e004ba87f2de218c611727d9b2"
   integrity sha512-MjmH7GvFT4TW8xFdIeFS3wqIX646y5tACdxkTO+khbHvS3ZcVJL6vkAHLw2wqPmkhwCfWHoNsp15VYNwW6JEJA==
@@ -1335,22 +1312,10 @@
     is-module "^1.0.0"
     resolve "^1.19.0"
 
-"@rollup/plugin-node-resolve@^9.0.0":
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-9.0.0.tgz#39bd0034ce9126b39c1699695f440b4b7d2b62e6"
-  integrity sha512-gPz+utFHLRrd41WMP13Jq5mqqzHL3OXrfj3/MkSyB6UBIcuNt9j60GCbarzMzdf1VHFpOxfQh/ez7wyadLMqkg==
-  dependencies:
-    "@rollup/pluginutils" "^3.1.0"
-    "@types/resolve" "1.17.1"
-    builtin-modules "^3.1.0"
-    deepmerge "^4.2.2"
-    is-module "^1.0.0"
-    resolve "^1.17.0"
-
-"@rollup/plugin-replace@^2.3.3", "@rollup/plugin-replace@^2.3.4":
-  version "2.3.4"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-2.3.4.tgz#7dd84c17755d62b509577f2db37eb524d7ca88ca"
-  integrity sha512-waBhMzyAtjCL1GwZes2jaE9MjuQ/DQF2BatH3fRivUF3z0JBFrU0U6iBNC/4WR+2rLKhaAhPWDNPYp4mI6RqdQ==
+"@rollup/plugin-replace@^2.4.2":
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-2.4.2.tgz#a2d539314fbc77c244858faa523012825068510a"
+  integrity sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==
   dependencies:
     "@rollup/pluginutils" "^3.1.0"
     magic-string "^0.25.7"
@@ -1400,14 +1365,6 @@
   resolved "https://registry.yarnpkg.com/@sinonjs/text-encoding/-/text-encoding-0.7.1.tgz#8da5c6530915653f3a1f38fd5f101d8c3f8079c5"
   integrity sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ==
 
-"@surma/rollup-plugin-off-main-thread@^1.4.1":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-1.4.2.tgz#e6786b6af5799f82f7ab3a82e53f6182d2b91a58"
-  integrity sha512-yBMPqmd1yEJo/280PAMkychuaALyQ9Lkb5q1ck3mjJrFuEobIfhnQ4J3mbvBoISmR3SWMWV+cGB/I0lCQee79A==
-  dependencies:
-    ejs "^2.6.1"
-    magic-string "^0.25.0"
-
 "@types/accepts@*":
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/@types/accepts/-/accepts-1.3.5.tgz#c34bec115cfc746e04fe5a059df4ce7e7b391575"
@@ -1856,25 +1813,32 @@
     "@types/parse5" "^5.0.3"
     parse5 "^6.0.1"
 
-"@web/polyfills-loader@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@web/polyfills-loader/-/polyfills-loader-1.0.1.tgz#cee51b6aa956a3c061c5018ce14424958b85946a"
-  integrity sha512-2c2UQpAYT2xSmo7mwf3RHsl9o7toB+dzVZbLEoDKCRhKX4T4jeiCSL828HrgHffckDI/PDIrsXtJ+SLvu4xGvg==
+"@web/parse5-utils@^1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@web/parse5-utils/-/parse5-utils-1.2.2.tgz#33eec93321eb07cf364651c131b980a7afd8c4d7"
+  integrity sha512-B68DoJ5qF8Cu3o7nDA2RQTCf9bslVz2b0WHTk3qir5YCbWfhnPEGhDOedOjbE8xDiHqgzI1zXQsJ2+655aluLA==
   dependencies:
-    "@babel/core" "^7.11.1"
+    "@types/parse5" "^5.0.3"
+    parse5 "^6.0.1"
+
+"@web/polyfills-loader@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@web/polyfills-loader/-/polyfills-loader-1.1.0.tgz#9df3da3d40159fce55c17cc370750052f62798bd"
+  integrity sha512-1bF1nhFG25isy6NbMhz9jVBCoXqrB1WzxkhT8Pyw9vKhXO+F83+TUWp0QeInsvvDVo0QPIeg+bVz6spRJrvfkg==
+  dependencies:
+    "@babel/core" "^7.12.10"
     "@web/parse5-utils" "^1.1.2"
     "@webcomponents/webcomponentsjs" "^2.5.0"
-    abortcontroller-polyfill "^1.4.0"
-    core-js-bundle "^3.6.0"
-    deepmerge "^4.2.2"
+    abortcontroller-polyfill "^1.5.0"
+    core-js-bundle "^3.8.1"
     dynamic-import-polyfill "^0.1.1"
-    intersection-observer "^0.11.0"
-    parse5 "^6.0.0"
-    regenerator-runtime "^0.13.3"
+    intersection-observer "^0.12.0"
+    parse5 "^6.0.1"
+    regenerator-runtime "^0.13.7"
     resize-observer-polyfill "^1.5.1"
-    systemjs "^6.7.1"
-    terser "^5.3.8"
-    whatwg-fetch "^3.0.0"
+    systemjs "^6.8.1"
+    terser "^5.5.1"
+    whatwg-fetch "^3.5.0"
 
 "@web/rollup-plugin-copy@^0.2.0":
   version "0.2.0"
@@ -1883,12 +1847,12 @@
   dependencies:
     glob "^7.0.0"
 
-"@web/rollup-plugin-html@^1.4.0":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@web/rollup-plugin-html/-/rollup-plugin-html-1.4.0.tgz#bf94d1ee525e5f41dc527bbff9f7e24973a82238"
-  integrity sha512-AYOeRuNsPXQmNpxlJRFLlfVMm4EazXcJEz0bbVd6wKQVcEBM71kRboGfupxhoIkDcVyThefw9gETcMZ4ntUcTw==
+"@web/rollup-plugin-html@^1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@web/rollup-plugin-html/-/rollup-plugin-html-1.6.0.tgz#fd3f406fd6d74a0cded581953a3146fe9f0454ad"
+  integrity sha512-m5xDI6ZhdAI2nfHwU3NXJ/dcDWghR+g/RrlAtIWYlj8NvXk/ZNqVVK1NbJrI/e5RlgDQ/+OycjmKgyAP9W1tWA==
   dependencies:
-    "@web/parse5-utils" "^1.1.2"
+    "@web/parse5-utils" "^1.2.2"
     glob "^7.1.6"
     parse5 "^6.0.1"
 
@@ -1901,12 +1865,12 @@
     estree-walker "^2.0.1"
     magic-string "^0.25.7"
 
-"@web/rollup-plugin-polyfills-loader@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@web/rollup-plugin-polyfills-loader/-/rollup-plugin-polyfills-loader-1.0.3.tgz#26b162c20cf22100117c154793d6be232cbb979b"
-  integrity sha512-9DkZy0x5F+axj3gDx36x5mxvqg9ugVIS85hCZT2uDEBJ1VBVdSG0pzI5R5zHaLAq/Xk88D999S0zLVRE7DKuHw==
+"@web/rollup-plugin-polyfills-loader@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@web/rollup-plugin-polyfills-loader/-/rollup-plugin-polyfills-loader-1.1.0.tgz#5d49c11c6e9874550d8bac2934d368e6437c9982"
+  integrity sha512-p3GtEKeeyRJa5S/sKWpIa3eg+fiPeYux+Z+r85kxyAw4FY+4AOts9vEeg1McEDjCZ/4V40X2vaPTi1alFBNrig==
   dependencies:
-    "@web/polyfills-loader" "^1.0.1"
+    "@web/polyfills-loader" "^1.1.0"
 
 "@web/test-runner-chrome@^0.9.0":
   version "0.9.0"
@@ -2010,10 +1974,10 @@ abbrev@1:
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
   integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
 
-abortcontroller-polyfill@^1.4.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/abortcontroller-polyfill/-/abortcontroller-polyfill-1.5.0.tgz#2c562f530869abbcf88d949a2b60d1d402e87a7c"
-  integrity sha512-O6Xk757Jb4o0LMzMOMdWvxpHWrQzruYBaUruFaIOfAQRnWFxfdXYobw12jrVHGtoXk6WiiyYzc0QWN9aL62HQA==
+abortcontroller-polyfill@^1.5.0:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.1.tgz#27084bac87d78a7224c8ee78135d05df430c2d2f"
+  integrity sha512-yml9NiDEH4M4p0G4AcPkg8AAa4mF3nfYF28VQxaokpO67j9H7gWgmsVWJ/f1Rn+PzsnDYvzJzWIQzCqDKRvWlA==
 
 accepts@^1.3.5, accepts@~1.3.4:
   version "1.3.7"
@@ -2986,11 +2950,6 @@ commander@^6.2.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
   integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
 
-common-tags@^1.8.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
-  integrity sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw==
-
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@@ -3133,10 +3092,10 @@ copyfiles@^2.4.1:
     untildify "^4.0.0"
     yargs "^16.1.0"
 
-core-js-bundle@^3.6.0:
-  version "3.8.1"
-  resolved "https://registry.yarnpkg.com/core-js-bundle/-/core-js-bundle-3.8.1.tgz#a4445eff5da56e316f68365ec89648be1027a808"
-  integrity sha512-bkulwU0ZPkG9aZ79JCRL5ltTSvxP9YsKfyZ6ZpGolJ8BEDGK3BFPPmQ2LlWSuhSshcIxIQzArCSXBYacyGf+aQ==
+core-js-bundle@^3.8.1:
+  version "3.10.2"
+  resolved "https://registry.yarnpkg.com/core-js-bundle/-/core-js-bundle-3.10.2.tgz#16734b2674373afa40f0533b985a1c9e87bd426f"
+  integrity sha512-cU/daFGOLWwtNAdXBksUl2HNqPOaM5g6bMxJ8doMw9PkshbWSzUweog2EEJsIlgmCCAFI0NLDBl4SD2TzZEevw==
 
 core-js-compat@^3.8.0:
   version "3.8.1"
@@ -3201,11 +3160,6 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
-crypto-random-string@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
-  integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
-
 csv-generate@^3.2.4:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/csv-generate/-/csv-generate-3.3.0.tgz#0e25658f1bb9806d94fec7b270896a35c7eedf1a"
@@ -3521,7 +3475,7 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
-ejs@^2.6.1, ejs@^2.7.4:
+ejs@^2.7.4:
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.7.4.tgz#48661287573dcc53e366c7a1ae52c3a120eec9ba"
   integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==
@@ -3952,7 +3906,7 @@ fast-glob@^3.1.1, fast-glob@^3.2.2:
     micromatch "^4.0.2"
     picomatch "^2.2.1"
 
-fast-json-stable-stringify@^2.0.0, fast-json-stable-stringify@^2.1.0:
+fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
   integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
@@ -4745,10 +4699,10 @@ inline-style-parser@0.1.1:
   resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1"
   integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==
 
-intersection-observer@^0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.11.0.tgz#f4ea067070326f68393ee161cc0a2ca4c0040c6f"
-  integrity sha512-KZArj2QVnmdud9zTpKf279m2bbGfG+4/kn16UU0NL3pTVl52ZHiJ9IRNSsnn6jaHrL9EGLFM5eWjTx2fz/+zoQ==
+intersection-observer@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.12.0.tgz#6c84628f67ce8698e5f9ccf857d97718745837aa"
+  integrity sha512-2Vkz8z46Dv401zTWudDGwO7KiGHNDkMv417T5ItcNYfmvHR/1qCTVBO9vwH8zZmQ0WkA/1ARwpysR9bsnop4NQ==
 
 ip@^1.1.5:
   version "1.1.5"
@@ -5541,7 +5495,7 @@ luxon@^1.24.1:
   resolved "https://registry.yarnpkg.com/luxon/-/luxon-1.25.0.tgz#d86219e90bc0102c0eb299d65b2f5e95efe1fe72"
   integrity sha512-hEgLurSH8kQRjY6i4YLey+mcKVAWXbDNlZRmM6AgWDJ1cY3atl8Ztf5wEY7VBReFbmGnwQPz7KYJblL8B2k0jQ==
 
-magic-string@^0.25.0, magic-string@^0.25.7:
+magic-string@^0.25.7:
   version "0.25.7"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
   integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
@@ -6714,11 +6668,6 @@ prettier@^2.2.1:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
   integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==
 
-pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.5.0.tgz#0cecda50a74a941589498011cf23275aa82b339e"
-  integrity sha512-p+T744ZyjjiaFlMUZZv6YPC5JrkNj8maRmPaQCWFJFplUAzpIUTRaTcS+7wmZtUoFXHtESJb23ISliaWyz3SHA==
-
 pretty-ms@^0.2.1:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/pretty-ms/-/pretty-ms-0.2.2.tgz#da879a682ff33a37011046f13d627f67c73b84f6"
@@ -7144,7 +7093,7 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
-regenerator-runtime@^0.13.3, regenerator-runtime@^0.13.4:
+regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7:
   version "0.13.7"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
   integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
@@ -7401,7 +7350,7 @@ rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
-rollup-plugin-terser@^7.0.0, rollup-plugin-terser@^7.0.2:
+rollup-plugin-terser@^7.0.2:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz#e8fbba4869981b2dc35ae7e8a502d5c6c04d324d"
   integrity sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==
@@ -7411,18 +7360,7 @@ rollup-plugin-terser@^7.0.0, rollup-plugin-terser@^7.0.2:
     serialize-javascript "^4.0.0"
     terser "^5.0.0"
 
-rollup-plugin-workbox@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-workbox/-/rollup-plugin-workbox-6.1.0.tgz#120cde36547769fc8cc45eae97a338c4017ed936"
-  integrity sha512-BqeEBj53fiqNLjiiyVvuBlic3Apg2Us1mpTkn3zgqaipJoAOC3soi+W9vrOQcm190lHLo9WNvi1wQg/M7olJHg==
-  dependencies:
-    "@rollup/plugin-node-resolve" "^11.0.1"
-    "@rollup/plugin-replace" "^2.3.4"
-    pretty-bytes "^5.4.1"
-    rollup-plugin-terser "^7.0.2"
-    workbox-build "^6.0.2"
-
-rollup@^2.25.0, rollup@^2.35.1:
+rollup@^2.35.1:
   version "2.35.1"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.35.1.tgz#e6bc8d10893556a638066f89e8c97f422d03968c"
   integrity sha512-q5KxEyWpprAIcainhVy6HfRttD9kutQpHbeqDTWnqAFNJotiojetK6uqmcydNMymBEtC4I8bCYR+J3mTMqeaUA==
@@ -7698,10 +7636,10 @@ simple-swizzle@^0.2.2:
   dependencies:
     is-arrayish "^0.3.1"
 
-singleton-manager@1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/singleton-manager/-/singleton-manager-1.2.1.tgz#9ad080707f0fe1be849e14994d3e7a2308d56f83"
-  integrity sha512-n+G7rHlANmJsi6Y6K7wV3wluO0oT1veSIL/vazbnG+nXfc4fB855JwsBXHccm1pCi7vNSh63PRGzoIfCBo3b+g==
+singleton-manager@1.4.1:
+  version "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:
   version "3.5.0"
@@ -7844,11 +7782,6 @@ source-map-support@^0.5.17, source-map-support@~0.5.19:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map-url@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
-  integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=
-
 source-map@^0.5.0, source-map@~0.5.1:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
@@ -8093,11 +8026,6 @@ strip-bom@^3.0.0:
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
   integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
 
-strip-comments@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/strip-comments/-/strip-comments-2.0.1.tgz#4ad11c3fbcac177a67a40ac224ca339ca1c1ba9b"
-  integrity sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw==
-
 strip-eof@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
@@ -8170,10 +8098,10 @@ symbol-observable@1.0.1:
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"
   integrity sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ=
 
-systemjs@^6.7.1:
-  version "6.8.2"
-  resolved "https://registry.yarnpkg.com/systemjs/-/systemjs-6.8.2.tgz#6200ce215ee5eb8d6c2815b9470c52015cb3c867"
-  integrity sha512-YknH4S+Xq7Rlwdnvyj4QKHWm5YQGPJnnkVXFQLC/Wl/O21nZ+NrV9IjwUQQ0Pl0Jh0Wgf91IeGzSHGELsv5kkA==
+systemjs@^6.8.1:
+  version "6.8.3"
+  resolved "https://registry.yarnpkg.com/systemjs/-/systemjs-6.8.3.tgz#67e27f49242e9d81c2b652b204ae54e8bfcc75a3"
+  integrity sha512-UcTY+FEA1B7e+bpJk1TI+a9Na6LG7wFEqW7ED16cLqLuQfI/9Ri0rsXm3tKlIgNoHyLHZycjdAOijzNbzelgwA==
 
 table-layout@^1.0.1:
   version "1.0.1"
@@ -8216,21 +8144,6 @@ tar-stream@^2.1.4:
     inherits "^2.0.3"
     readable-stream "^3.1.1"
 
-temp-dir@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-2.0.0.tgz#bde92b05bdfeb1516e804c9c00ad45177f31321e"
-  integrity sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==
-
-tempy@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/tempy/-/tempy-0.6.0.tgz#65e2c35abc06f1124a97f387b08303442bde59f3"
-  integrity sha512-G13vtMYPT/J8A4X2SjdtBTphZlrp1gKv6hZiOjw14RCWg6GbHuQBGtjlx75xLbYV/wEc0D7G5K4rxKP/cXk8Bw==
-  dependencies:
-    is-stream "^2.0.0"
-    temp-dir "^2.0.0"
-    type-fest "^0.16.0"
-    unique-string "^2.0.0"
-
 term-size@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/term-size/-/term-size-1.2.0.tgz#458b83887f288fc56d6fffbfad262e26638efa69"
@@ -8243,7 +8156,7 @@ 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@^5.0.0, terser@^5.3.8:
+terser@^5.0.0:
   version "5.5.1"
   resolved "https://registry.yarnpkg.com/terser/-/terser-5.5.1.tgz#540caa25139d6f496fdea056e414284886fb2289"
   integrity sha512-6VGWZNVP2KTUcltUQJ25TtNjx/XgdDsBDKGt8nN0MpydU36LmbPPcMBd2kmtZNNGVVDLg44k7GKeHHj+4zPIBQ==
@@ -8252,6 +8165,15 @@ terser@^5.0.0, terser@^5.3.8:
     source-map "~0.7.2"
     source-map-support "~0.5.19"
 
+terser@^5.5.1:
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.6.1.tgz#a48eeac5300c0a09b36854bf90d9c26fb201973c"
+  integrity sha512-yv9YLFQQ+3ZqgWCUk+pvNJwgUTdlIxUk1WTN+RnaFJe2L7ipG2csPT0ra2XRm7Cs8cxN7QXmK1rFzEwYEQkzXw==
+  dependencies:
+    commander "^2.20.0"
+    source-map "~0.7.2"
+    source-map-support "~0.5.19"
+
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
@@ -8424,11 +8346,6 @@ type-fest@^0.13.1:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.13.1.tgz#0172cb5bce80b0bd542ea348db50c7e21834d934"
   integrity sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==
 
-type-fest@^0.16.0:
-  version "0.16.0"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.16.0.tgz#3240b891a78b0deae910dbeb86553e552a148860"
-  integrity sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==
-
 type-fest@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.6.0.tgz#8d2a2370d3df886eb5c90ada1c5bf6188acf838b"
@@ -8550,13 +8467,6 @@ unified@^9.1.0, unified@^9.2.0:
     trough "^1.0.0"
     vfile "^4.0.0"
 
-unique-string@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-2.0.0.tgz#39c6451f81afb2749de2b233e3f7c5e8843bd89d"
-  integrity sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==
-  dependencies:
-    crypto-random-string "^2.0.0"
-
 unist-builder@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/unist-builder/-/unist-builder-2.0.3.tgz#77648711b5d86af0942f334397a33c5e91516436"
@@ -8652,11 +8562,6 @@ untildify@^4.0.0:
   resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
   integrity sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==
 
-upath@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
-  integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
-
 uri-js@^4.2.2:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.0.tgz#aa714261de793e8a82347a7bcc9ce74e86f28602"
@@ -8761,10 +8666,10 @@ webidl-conversions@^6.1.0:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-6.1.0.tgz#9111b4d7ea80acd40f5270d666621afa78b69514"
   integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==
 
-whatwg-fetch@^3.0.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.5.0.tgz#605a2cd0a7146e5db141e29d1c62ab84c0c4c868"
-  integrity sha512-jXkLtsR42xhXg7akoDKvKWE40eJeI+2KZqcp2h3NsOrRnDvtWX36KcKl30dy+hxECivdk2BVUHVNrPtoMBUx6A==
+whatwg-fetch@^3.5.0:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz#dced24f37f2624ed0281725d51d0e2e3fe677f8c"
+  integrity sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==
 
 whatwg-url@^8.4.0:
   version "8.4.0"
@@ -8857,160 +8762,52 @@ wordwrapjs@^4.0.0:
     reduce-flatten "^2.0.0"
     typical "^5.0.0"
 
-workbox-background-sync@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-6.0.2.tgz#9205f5ef7fbf68203b925bdc85bdaa31a34fbbe6"
-  integrity sha512-KQU2ntvbvFoBvCRm+EDpWAaykt4u/oaF5j3C6io0dZVWhFc/ZwgYDii8fb34LTenug3VPWQELdw9dNBCoP4b0w==
+workbox-broadcast-update@^6.1.5:
+  version "6.1.5"
+  resolved "https://registry.yarnpkg.com/workbox-broadcast-update/-/workbox-broadcast-update-6.1.5.tgz#49a2a4cc50c7b1cfe86bed6d8f15edf1891d1e79"
+  integrity sha512-zGrTTs+n4wHpYtqYMqBg6kl/x5j1UrczGCQnODSHTxIDV8GXLb/GtA1BCZdysNxpMmdVSeLmTcgIYAAqWFamrA==
   dependencies:
-    workbox-core "^6.0.2"
+    workbox-core "^6.1.5"
 
-workbox-broadcast-update@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/workbox-broadcast-update/-/workbox-broadcast-update-6.0.2.tgz#fc034277e631e4193dcee9f6b0a77e415b4ddefb"
-  integrity sha512-yCXYEln7nU8FkMDysYQPirpgFXtsdBtxruHbvZzRsxMHvAELf3j/o6Ufae1zjl8XanLF696sqSNxehpCGSD6tw==
+workbox-cacheable-response@^6.1.5:
+  version "6.1.5"
+  resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-6.1.5.tgz#2772e09a333cba47b0923ed91fd022416b69e75c"
+  integrity sha512-x8DC71lO/JCgiaJ194l9le8wc8lFPLgUpDkLhp2si7mXV6S/wZO+8Osvw1LLgYa8YYTWGbhbFhFTXIkEMknIIA==
   dependencies:
-    workbox-core "^6.0.2"
+    workbox-core "^6.1.5"
 
-workbox-build@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-6.0.2.tgz#a23eebd6556cf473fedda77c08421b2d093efc32"
-  integrity sha512-Dukbt+p62Yzb12SXAmycTYvHngJ8aRtXy3hymsC8B6gxTCZmCZ0u5JuKhu7lNLbDwDkYE78lhFvT9SF+MXFz5A==
+workbox-core@^6.1.5:
+  version "6.1.5"
+  resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-6.1.5.tgz#424ff600e2c5448b14ebd58b2f5ac8ed91b73fb9"
+  integrity sha512-9SOEle7YcJzg3njC0xMSmrPIiFjfsFm9WjwGd5enXmI8Lwk8wLdy63B0nzu5LXoibEmS9k+aWF8EzaKtOWjNSA==
+
+workbox-expiration@^6.1.5:
+  version "6.1.5"
+  resolved "https://registry.yarnpkg.com/workbox-expiration/-/workbox-expiration-6.1.5.tgz#a62a4ac953bb654aa969ede13507ca5bd154adc2"
+  integrity sha512-6cN+FVbh8fNq56LFKPMchGNKCJeyboHsDuGBqmhDUPvD4uDjsegQpDQzn52VaE0cpywbSIsDF/BSq9E9Yjh5oQ==
   dependencies:
-    "@babel/core" "^7.11.1"
-    "@babel/preset-env" "^7.11.0"
-    "@babel/runtime" "^7.11.2"
-    "@hapi/joi" "^16.1.8"
-    "@rollup/plugin-babel" "^5.2.0"
-    "@rollup/plugin-node-resolve" "^9.0.0"
-    "@rollup/plugin-replace" "^2.3.3"
-    "@surma/rollup-plugin-off-main-thread" "^1.4.1"
-    common-tags "^1.8.0"
-    fast-json-stable-stringify "^2.1.0"
-    fs-extra "^9.0.1"
-    glob "^7.1.6"
-    lodash "^4.17.20"
-    pretty-bytes "^5.3.0"
-    rollup "^2.25.0"
-    rollup-plugin-terser "^7.0.0"
-    source-map "^0.7.3"
-    source-map-url "^0.4.0"
-    stringify-object "^3.3.0"
-    strip-comments "^2.0.1"
-    tempy "^0.6.0"
-    upath "^1.2.0"
-    workbox-background-sync "^6.0.2"
-    workbox-broadcast-update "^6.0.2"
-    workbox-cacheable-response "^6.0.2"
-    workbox-core "^6.0.2"
-    workbox-expiration "^6.0.2"
-    workbox-google-analytics "^6.0.2"
-    workbox-navigation-preload "^6.0.2"
-    workbox-precaching "^6.0.2"
-    workbox-range-requests "^6.0.2"
-    workbox-recipes "^6.0.2"
-    workbox-routing "^6.0.2"
-    workbox-strategies "^6.0.2"
-    workbox-streams "^6.0.2"
-    workbox-sw "^6.0.2"
-    workbox-window "^6.0.2"
+    workbox-core "^6.1.5"
 
-workbox-cacheable-response@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-6.0.2.tgz#00b1133c4c846a2874f32ae14206c0636bacfd87"
-  integrity sha512-OrgFiYWkmFXDIbNRYSu+fchcfoZqyJ4yZbdc8WKUjr9v/MghKHfR9u7UI077xBkjno5J3YNpbwx73/no3HkrzA==
+workbox-routing@^6.1.5:
+  version "6.1.5"
+  resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-6.1.5.tgz#15884d6152dba03faef83f0b23331846d8b6ef8e"
+  integrity sha512-uC/Ctz+4GXGL42h1WxUNKxqKRik/38uS0NZ6VY/EHqL2F1ObLFqMHUZ4ZYvyQsKdyI82cxusvhJZHOrY0a2fIQ==
   dependencies:
-    workbox-core "^6.0.2"
+    workbox-core "^6.1.5"
 
-workbox-core@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-6.0.2.tgz#2f865cfe633890b4210fd6d6fdb049a6daed0914"
-  integrity sha512-Ksl6qeikGb+BOCILoCUJGxwlEQOeeqdpOnpOr9UDt3NtacPYbfYBmpYpKArw5DFWK+5geBsFqgUUlXThlCYfKQ==
-
-workbox-expiration@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/workbox-expiration/-/workbox-expiration-6.0.2.tgz#ac01e8d17f48daa31dc0872c09ee6f4d2cf28ccb"
-  integrity sha512-6+nbR18cklAdI3BPT675ytftXPwnVbXGR8mPWNWTJtl5y2urRYv56ZOJLD7FBFVkZ8EjWiRhNP/A0fkxgdKtWQ==
+workbox-strategies@^6.1.5:
+  version "6.1.5"
+  resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-6.1.5.tgz#2549a3e78f0eda371b760c4db21feb0d26143573"
+  integrity sha512-QhiOn9KT9YGBdbfWOmJT6pXZOIAxaVrs6J6AMYzRpkUegBTEcv36+ZhE/cfHoT0u2fxVtthHnskOQ/snEzaXQw==
   dependencies:
-    workbox-core "^6.0.2"
+    workbox-core "^6.1.5"
 
-workbox-google-analytics@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-6.0.2.tgz#7e3641adb30a3acb25006b244035631cf6f65019"
-  integrity sha512-xmYJurR1M6Pzc2SBM/E7AgwmBszhu/YYDzBnU+HJPZFLbTG97ASIJyTXV1vcczA/dNaS0miIf0cFqneozVlDRw==
+workbox-window@^6.1.5:
+  version "6.1.5"
+  resolved "https://registry.yarnpkg.com/workbox-window/-/workbox-window-6.1.5.tgz#017b22342e10c6df6b9672326b575ec950b6cd80"
+  integrity sha512-akL0X6mAegai2yypnq78RgfazeqvKbsllRtEI4dnbhPcRINEY1NmecFmsQk8SD+zWLK1gw5OdwAOX+zHSRVmeA==
   dependencies:
-    workbox-background-sync "^6.0.2"
-    workbox-core "^6.0.2"
-    workbox-routing "^6.0.2"
-    workbox-strategies "^6.0.2"
-
-workbox-navigation-preload@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-6.0.2.tgz#bfd9c61096be921b830153a3004b7212220748dc"
-  integrity sha512-7+ojLrjXmTFZBfGmUQIcBWB+xrFgXLMJGNQAtxT7Ta9A23rEWo8jqAgeuwAylebcORUlM+ztgYTV7eGp+AD+Yg==
-  dependencies:
-    workbox-core "^6.0.2"
-
-workbox-precaching@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-6.0.2.tgz#cb45f290b0604bef1d9fc96bf42df82385d54e54"
-  integrity sha512-sqKWL2emzmGnfJpna+9RjUkUiqQO++AKfwljCbgkHg8wBbVLy/rnui3eelKgAI7D8R31LJFfiZkY/kXmwkjtlQ==
-  dependencies:
-    workbox-core "^6.0.2"
-    workbox-routing "^6.0.2"
-    workbox-strategies "^6.0.2"
-
-workbox-range-requests@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/workbox-range-requests/-/workbox-range-requests-6.0.2.tgz#3b50cbe8ddaaed7e3bfaa2dfdcd6a22e02fe7770"
-  integrity sha512-qCrDbH9AzDbCErde71Nys2iNZO9I9M9Jgl/9/Q67dGQVwFsEq73SuIzS2DGIBKqtIdC5QUigC3d7XJONajclUQ==
-  dependencies:
-    workbox-core "^6.0.2"
-
-workbox-recipes@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/workbox-recipes/-/workbox-recipes-6.0.2.tgz#ad4b3f26a71a7396004c4f617af318f3fd072208"
-  integrity sha512-ewZIHO4jYE6bnEeUIYS6joQy3l+MydpOsVr2F6EpE8ps++z1ScbSdLtJU+yu6WuO3lH44HFZLeFxYQqYm50QAA==
-  dependencies:
-    workbox-cacheable-response "^6.0.2"
-    workbox-core "^6.0.2"
-    workbox-expiration "^6.0.2"
-    workbox-precaching "^6.0.2"
-    workbox-routing "^6.0.2"
-    workbox-strategies "^6.0.2"
-
-workbox-routing@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-6.0.2.tgz#8380bc322a2b1c44978df8ff6ae4e4d723f4e3f8"
-  integrity sha512-iQ9ch3fL1YpztDLfHNURaHQ0ispgPCdzWmZZhtSHUyy/+YkTlIiDVTbOQCIpHIrWlKQiim6X3K2ItIy1FW9+wA==
-  dependencies:
-    workbox-core "^6.0.2"
-
-workbox-strategies@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-6.0.2.tgz#f4383e2e5d46c1546e6e08048c9f5c9a7beb5137"
-  integrity sha512-HjLnYCVS60U7OKhl5NIq8NAQXrotJQRDakmIONnRlQIlP2If/kAiQSUP3QCHMq4EeXGiF+/CdlR1/bhYBHZzZg==
-  dependencies:
-    workbox-core "^6.0.2"
-
-workbox-streams@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/workbox-streams/-/workbox-streams-6.0.2.tgz#07c19025af309ad3475e737018a05ed538bffacd"
-  integrity sha512-bckftu/iMlg5LFXPZ6NX/FUc/w4illgxSuwtsZkQAO6Uen1EeegjfLyenO01/dwoyc3D/AlZepMdhv87XhE7HQ==
-  dependencies:
-    workbox-core "^6.0.2"
-    workbox-routing "^6.0.2"
-
-workbox-sw@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-6.0.2.tgz#cd1b8b02ceaaf1abe5804936158a87ec605d271e"
-  integrity sha512-EoOjbyy5bpoBoSqt2PIeDOZ/JJ41f+WJjb979PkfIUWw4F+F/w2uKJJrMA5fk+nWnVge83Fwy8nF3dWNsqOrdg==
-
-workbox-window@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/workbox-window/-/workbox-window-6.0.2.tgz#9b47fdb7c088aa4e8b7d0c6cfda17c8bfca6bf7f"
-  integrity sha512-I/X+qUh1AwN9x/MxFbXsPn7DA27BMtzkXo55w1tBD8V54fv8nUCeC5E4RpXt/mlgdSwBztnURCQTWsdhTrSUjg==
-  dependencies:
-    workbox-core "^6.0.2"
+    workbox-core "^6.1.5"
 
 workerpool@6.0.2:
   version "6.0.2"