Version Packages

Bumps [node-fetch](https://github.com/node-fetch/node-fetch) from 2.6.1 to 2.6.7.
- [Release notes](https://github.com/node-fetch/node-fetch/releases)
- [Commits](https://github.com/node-fetch/node-fetch/compare/v2.6.1...v2.6.7)

---
updated-dependencies:
- dependency-name: node-fetch
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>

.gitignore

@@ -1,6 +1,7 @@
 ## editors
 /.idea
 /.vscode
+/.history
 
 ## system files
 .DS_Store

CONTRIBUTING.md

@@ -8,25 +8,25 @@ First, create a fork of the [modernweb-dev/rocket](https://github.com/modernweb-
 
 Next, clone our repository onto your computer.
 
-```sh
+```shell
 git clone git@github.com:modernweb-dev/rocket.git
 ```
 
 Once cloning is complete, change directory to the repository.
 
-```sh
+```shell
 cd rocket
 ```
 
 Now add your fork as a remote (replacing YOUR_USERNAME with your GitHub username).
 
-```sh
+```shell
 git remote add fork git@github.com:<YOUR_USERNAME>/rocket.git
 ```
 
 Create a new local branch.
 
-```sh
+```shell
 git checkout -b my-awesome-fix
 ```
 
@@ -34,7 +34,7 @@ git checkout -b my-awesome-fix
 
 Now that you have cloned the repository, ensure you have [yarn](https://classic.yarnpkg.com/lang/en/) installed, then run the following commands to set up the development environment.
 
-```sh
+```shell
 yarn install
 ```
 
@@ -69,7 +69,7 @@ This documents your intent to release, and allows you to specify a message that
 
 Run
 
-```sh
+```shell
 yarn changeset
 ```
 
@@ -92,7 +92,7 @@ Exceptions:
 Commit messages must follow the [conventional commit format](https://www.conventionalcommits.org/en/v1.0.0/)
 Modern-web uses package name as scope. So for example if you fix a _terrible bug_ in the package `@web/test-runner`, the commit message should look like this:
 
-```sh
+```shell
 fix(test-runner): fix terrible bug
 ```
 
@@ -100,7 +100,7 @@ fix(test-runner): fix terrible bug
 
 Now it's time to push your branch that contains your committed changes to your fork.
 
-```sh
+```shell
 git push -u fork my-awesome-fix
 ```
 

docs/blog/introducing-check-html-links.md

@@ -140,7 +140,7 @@ The features so far are:
 
 It checks your final HTML output so you need to execute it after your Static Site Generator.
 
-```
+```shell
 npx check-html-links _site
 ```
 

docs/docs/eleventy-plugins/mdjs-unified.md

@@ -4,7 +4,7 @@ Use mdjs in your Eleventy site.
 
 ## Setup
 
-```
+```shell
 npm install @rocket/eleventy-plugin-mdjs
 ```
 

docs/docs/markdown-javascript/preview.md

@@ -226,6 +226,31 @@ class DemoElement extends HTMLElement {
 customElements.define('demo-element', DemoElement);
 ```
 
+## Extending mdjs-preview
+
+It is possible to define a custom version of mdjs-preview in order to add functionality, change
+its appearance of make it run in 'hybrid mode' (accepting both lit1 and -2 TemplateResults).
+The example below shows how the latter can be achieved by providing a custom render function.
+Note that we define `mdjs-preview` as the custom element name. We need to make sure that this
+file is executed before the original mdjs-preview definition file is executed.
+
+```js
+import { MdJsPreview } from '@mdjs/mdjs-preview';
+import { render as render2 } from 'lit';
+import { isTemplateResult as isTemplateResult2 } from 'lit/directive-helpers.js';
+import { render as render1  } from 'lit-html';
+
+export class HybridLitMdjsPreview extends MdJsPreview {
+  renderStory(html, container, options) {
+    if (isTemplateResult2(html)) {
+      render2(html, container, options);
+    } else {
+      render1(html, container, options);
+    }
+  }
+customElements.define('mdjs-preview', HybridLitMdjsPreview);
+```
+
 ```js script
 import '@rocket/launch/inline-notification/inline-notification.js';
 ```

docs/docs/tools/check-html-links.md

@@ -22,7 +22,7 @@ Read the [Introducing Check HTMl Links - no more bad links](../../blog/introduci
 
 ## Installation
 
-```
+```shell
 npm i -D check-html-links
 ```
 

docs/docs/tools/plugins-manager.md

@@ -112,16 +112,13 @@ addPlugin(MyClass, { otherProp: 'new name' }); // ts error
 
 Many plugin systems require you to either execute a plugin function like in `rollup`.
 
-<!-- prettier-ignore-start -->
 ```js
 import json from '@rollup/plugin-json';
 
-/** @type {import('rocket/cli').RocketCliConfig} */
-export default ({
+export default /** @type {import('rocket/cli').RocketCliConfig} */ ({
   plugins: [json({ preferConst: true })],
 });
 ```
-<!-- prettier-ignore-end -->
 
 or add it in a special way like in `eleventy`
 
@@ -254,6 +251,18 @@ addPlugin(myPlugin, { myFlag: true }); // ts ok
 addPlugin(myPlugin, { notExisting: true }); // ts error
 ```
 
+Note: There is a "hidden" feature in addPlugin that if you attach a `wrapPlugin` property to the returning function it will call `wrapPlugin` on the plugin before adding it.
+
+```js
+// example auto wrap rollup plugins for @web/dev-server
+import { fromRollup } from '@web/dev-server-rollup';
+
+const userSetupFunctions = [addPlugin(json)].map(mod => {
+  mod.wrapPlugin = fromRollup;
+  return mod;
+});
+```
+
 ## Adjusting Plugin Options
 
 Adjusting options means to either

docs/guides/first-pages/manage-sidebar.md

@@ -23,7 +23,7 @@ Will be ordered as `First`, `Second`,
 
 Internally `# Foo >> Bar >> Baz ||20` gets converted to.
 
-```
+```yml
 ---
 title: Bar: Baz
 eleventyNavigation:

package.json

@@ -33,7 +33,6 @@
     "setup": "npm run setup:ts-configs && npm run build:packages",
     "setup:patches": "npx patch-package",
     "setup:ts-configs": "node scripts/generate-ts-configs.mjs",
-    "xprestart": "yarn analyze",
     "start": "node --trace-warnings packages/cli/src/cli.js start",
     "test": "yarn test:node && yarn test:web",
     "test:node": "mocha \"packages/*/test-node/**/*.test.{ts,js,mjs,cjs}\" --timeout 5000 --reporter dot --exit",
@@ -44,12 +43,13 @@
     "types:copy": "node scripts/workspaces-scripts-bin.mjs types:copy",
     "update-dependency": "node scripts/update-dependency.js",
     "update-esm-entrypoints": "node scripts/update-esm-entrypoints.mjs && yarn format",
-    "update-package-configs": "node scripts/update-package-configs.mjs && yarn format"
+    "update-package-configs": "node scripts/update-package-configs.mjs && yarn format",
+    "xprestart": "yarn analyze"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.12.0",
+    "@changesets/cli": "^2.20.0",
     "@custom-elements-manifest/analyzer": "^0.4.12",
-    "@open-wc/testing": "^3.0.0-next.1",
+    "@open-wc/testing": "^3.1.2",
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-typescript": "^8.1.0",
@@ -75,7 +75,7 @@
     "husky": "^4.3.7",
     "lint-staged": "^10.5.3",
     "mocha": "^8.2.1",
-    "node-fetch": "^2.6.1",
+    "node-fetch": "^2.6.7",
     "npm-run-all": "^4.1.5",
     "onchange": "^7.1.0",
     "prettier": "^2.2.1",
@@ -84,8 +84,6 @@
     "puppeteer": "^9.0.0",
     "remark-emoji": "^2.1.0",
     "rimraf": "^3.0.2",
-    "rocket-preset-code-tabs": "^0.2.6",
-    "rocket-preset-custom-elements-manifest": "^0.1.7",
     "rollup": "^2.36.1",
     "rollup-plugin-terser": "^7.0.2",
     "sinon": "^9.2.3",

packages/check-html-links/README.md

@@ -4,13 +4,13 @@ A fast checker for broken links/references in HTML.
 
 ## Installation
 
-```
+```shell
 npm i -D check-html-links
 ```
 
 ## Usage
 
-```
+```bash
 npx check-html-links _site
 ```
 

packages/cli/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @rocket/cli
 
+## 0.10.2
+
+### Patch Changes
+
+- 60310ab: Improve performance by initializing sax-wasm only once even when it is running in parallel
+- Updated dependencies [60310ab]
+  - @rocket/eleventy-rocket-nav@0.3.1
+
 ## 0.10.1
 
 ### Patch Changes

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket/cli",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "publishConfig": {
     "access": "public"
   },
@@ -60,7 +60,7 @@
     "@rocket/building-rollup": "^0.4.0",
     "@rocket/core": "^0.1.2",
     "@rocket/eleventy-plugin-mdjs-unified": "^0.6.0",
-    "@rocket/eleventy-rocket-nav": "^0.3.0",
+    "@rocket/eleventy-rocket-nav": "^0.3.1",
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-node-resolve": "^11.0.1",
     "@web/config-loader": "^0.1.3",

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

@@ -243,9 +243,9 @@ async function insertResponsiveImages(html) {
   const config = getComputedConfig();
 
   if (!isSetup) {
-    await parser.prepareWasm(saxWasmBuffer);
-    isSetup = true;
+    isSetup = parser.prepareWasm(saxWasmBuffer);
   }
+  await isSetup;
 
   const options = {
     inputPath: this.inputPath,

packages/drawer/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @rocket/drawer
 
+## 0.1.5
+
+### Patch Changes
+
+- 1f14105: Add export map which enables side effect import via `@rocket/drawer/define`
+
 ## 0.1.4
 
 ### Patch Changes

packages/drawer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket/drawer",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "publishConfig": {
     "access": "public"
   },
@@ -13,6 +13,11 @@
   },
   "author": "Modern Web <hello@modern-web.dev> (https://modern-web.dev/)",
   "main": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./rocket-drawer.js": "./rocket-drawer.js",
+    "./define": "./rocket-drawer.js"
+  },
   "scripts": {
     "dev": "web-dev-server --node-resolve --root-dir ../../ --open packages/drawer/ --watch",
     "rocket:build": "node src/build/cli.js -c demo/docs",

packages/drawer/src/RocketDrawer.js

@@ -13,6 +13,7 @@ function transitionend(el) {
   });
 }
 
+// @ts-expect-error
 export class RocketDrawer extends OverlayMixin(LitElement) {
   static get properties() {
     return {

packages/eleventy-rocket-nav/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @rocket/eleventy-rocket-nav
 
+## 0.3.1
+
+### Patch Changes
+
+- 60310ab: Improve performance by initializing sax-wasm only once even when it is running in parallel
+
 ## 0.3.0
 
 ### Minor Changes

packages/eleventy-rocket-nav/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket/eleventy-rocket-nav",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "publishConfig": {
     "access": "public"
   },

packages/eleventy-rocket-nav/src/addPageAnchors.js

@@ -97,6 +97,7 @@ function getHeadingsOfHtml(html) {
   return { headings, insertPoint };
 }
 
+/** @type {boolean | Promise<unknown>} */
 let isSetup = false;
 
 /**
@@ -104,9 +105,9 @@ let isSetup = false;
  */
 async function addPageAnchors(content) {
   if (!isSetup) {
-    await parser.prepareWasm(saxWasmBuffer);
-    isSetup = true;
+    isSetup = parser.prepareWasm(saxWasmBuffer);
   }
+  await isSetup;
 
   const { headings, insertPoint } = getHeadingsOfHtml(content);
   const pageAnchorsHtml = [];

packages/mdjs-core/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 0.9.4
+
+### Patch Changes
+
+- e6c3d27: Support `js client` as an alias to `js script`
+
+## 0.9.3
+
+### Patch Changes
+
+- 62637a8: Replaces `rehype-prism-template` with `rehype-prism` to get a newer version of prism with essential security updates
+
+## 0.9.2
+
+### Patch Changes
+
+- 97cb38c: Add missing slash dependency
+
 ## 0.9.1
 
 ### Patch Changes

packages/mdjs-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdjs/core",
-  "version": "0.9.1",
+  "version": "0.9.4",
   "publishConfig": {
     "access": "public"
   },
@@ -52,7 +52,7 @@
     "github-markdown-css": "^4.0.0",
     "plugins-manager": "^0.3.0",
     "rehype-autolink-headings": "^5.0.1",
-    "rehype-prism-template": "^0.4.1",
+    "rehype-prism": "^1.0.0",
     "rehype-raw": "^5.0.0",
     "rehype-slug": "^4.0.1",
     "rehype-stringify": "^8.0.0",
@@ -60,6 +60,7 @@
     "remark-gfm": "^1.0.0",
     "remark-parse": "^9.0.0",
     "remark-rehype": "^8.0.0",
+    "slash": "^3.0.0",
     "unified": "^9.2.0",
     "unist-util-remove": "^2.0.1",
     "unist-util-visit": "^2.0.3"

packages/mdjs-core/src/mdjsParse.js

@@ -16,6 +16,9 @@ function mdjsParse() {
       if (node.lang === 'js' && node.meta === 'script') {
         jsCode += node.value;
       }
+      if (node.lang === 'js' && node.meta === 'client') {
+        jsCode += node.value;
+      }
     });
     // we can only return/modify the tree but jsCode should not be part of the tree
     // so we attach it globally to the file.data
@@ -26,7 +29,9 @@ function mdjsParse() {
      * @param {Node} node
      */
     const removeFunction = node =>
-      node.type === 'code' && node.lang === 'js' && node.meta === 'script';
+      node.type === 'code' &&
+      node.lang === 'js' &&
+      (node.meta === 'script' || node.meta === 'client');
     remove(tree, removeFunction);
 
     return tree;

packages/mdjs-core/src/mdjsProcess.js

@@ -12,14 +12,16 @@ const raw = require('rehype-raw');
 const htmlStringify = require('rehype-stringify');
 const htmlSlug = require('rehype-slug');
 const htmlHeading = require('rehype-autolink-headings');
-const rehypePrism = require('rehype-prism-template');
 // @ts-ignore
 const { executeSetupFunctions } = require('plugins-manager');
+const loadLanguages = require('prismjs/components/');
 
 const { mdjsParse } = require('./mdjsParse.js');
 const { mdjsStoryParse } = require('./mdjsStoryParse.js');
 const { mdjsSetupCode } = require('./mdjsSetupCode.js');
 
+let prismLoaded = false;
+
 /** @type {MdjsProcessPlugin[]} */
 const defaultMetaPlugins = [
   { plugin: markdown, options: {} },
@@ -30,8 +32,6 @@ const defaultMetaPlugins = [
   // @ts-ignore
   { plugin: remark2rehype, options: { allowDangerousHtml: true } },
   // @ts-ignore
-  { plugin: rehypePrism, options: {} },
-  // @ts-ignore
   { plugin: raw, options: {} },
   // @ts-ignore
   { plugin: htmlSlug, options: {} },
@@ -54,6 +54,12 @@ const defaultMetaPlugins = [
  */
 async function mdjsProcess(mdjs, { setupUnifiedPlugins = [] } = {}) {
   const parser = unified();
+  if (!prismLoaded) {
+    prismLoaded = true;
+    const rehypePrism = (await import('rehype-prism/lib/src/index.js')).default;
+    loadLanguages(['md', 'shell', 'yml']);
+    defaultMetaPlugins.splice(6, 0, { plugin: rehypePrism, options: {} });
+  }
 
   const metaPlugins = executeSetupFunctions(setupUnifiedPlugins, defaultMetaPlugins);
 

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

@@ -35,7 +35,7 @@ describe('mdjsProcess', () => {
       '',
       '',
       '',
-      '<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>',
+      '<pre class="language-js"><code class="language-js"><span class="token keyword">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 operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span>',
       '</code></pre>',
       '',
       '',

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

@@ -28,6 +28,24 @@ describe('mdjsParse', () => {
     expect(/** @type {MDJSVFileData} */ (result.data).jsCode).to.equal('const bar = 22;');
   });
 
+  it('extracts "js client" code blocks', async () => {
+    const input = [
+      '## Intro',
+      '```js',
+      'const foo = 1;',
+      '```',
+      '```js client',
+      'const bar = 22;',
+      '```',
+    ].join('\n');
+    const parser = unified().use(markdown).use(mdjsParse).use(html, { sanitize: false });
+    const result = await parser.process(input);
+    expect(result.contents).to.equal(
+      '<h2>Intro</h2>\n<pre><code class="language-js">const foo = 1;\n</code></pre>\n',
+    );
+    expect(/** @type {MDJSVFileData} */ (result.data).jsCode).to.equal('const bar = 22;');
+  });
+
   // TODO: fix this bug - maybe something in unified itself 🤔
   it.skip('handling only "js script" code blocks', async () => {
     const input = [

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

@@ -28,12 +28,6 @@ declare module 'rehype-autolink-headings' {
   export = unified.Plugin;
 }
 
-declare module 'rehype-prism-template' {
-  import unified from 'unified';
-
-  export = unified.Plugin;
-}
-
 declare module 'unist-util-remove' {
   import unified from 'unified';
 

packages/mdjs-preview/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @mdjs/mdjs-preview
 
+## 0.5.7
+
+### Patch Changes
+
+- f4d83fe: add overridable `renderFunction` to mdjs-preview
+
+## 0.5.6
+
+### Patch Changes
+
+- e81b77f: Change theme attribute into preview-theme attribute to separate theme styling of the preview section and the full mdjs viewer.
+- 456b8e7: Add css variable to style border-color of the mdjs-viewer
+
 ## 0.5.5
 
 ### Patch Changes

packages/mdjs-preview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdjs/mdjs-preview",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "publishConfig": {
     "access": "public"
   },
@@ -20,8 +20,8 @@
     "./define": "./src/define/define.js"
   },
   "scripts": {
-    "prepublishOnly": "publish-docs --github-url https://github.com/modernweb-dev/rocket/ --git-root-dir ../../",
     "debug": "cd ../../ && npm run debug -- --group mdjs-preview",
+    "prepublishOnly": "publish-docs --github-url https://github.com/modernweb-dev/rocket/ --git-root-dir ../../",
     "test": "npm run test:web",
     "test:web": "cd ../../ && npm run test:web -- --group mdjs-preview"
   },

packages/mdjs-preview/src/MdJsPreview.js

@@ -10,6 +10,13 @@ import {
 } from './mdjsViewerSharedStates.js';
 import { addResizeHandler } from './resizeHandler.js';
 
+/**
+ * @typedef {{values: unknown[], strings:string[],processor:Function}} TemplateResult1
+ * @typedef {import('lit').TemplateResult} TemplateResult2
+ * @typedef {{templateFactory:any; eventContext: EventTarget }} RenderOptions1
+ * @typedef {import('lit').RenderOptions} RenderOptions2
+ */
+
 /**
  * @param {string} input
  * @param {'js'|'css'} type
@@ -61,7 +68,7 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) {
       platforms: { type: Array },
       size: { type: String },
       sizes: { type: Array },
-      theme: { type: String, reflect: true },
+      previewTheme: { type: String, reflect: true, attribute: 'preview-theme' },
       themes: { type: Array },
       language: { type: String },
       languages: { type: Array },
@@ -72,6 +79,46 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) {
     };
   }
 
+  /**
+   * By default, the render of lit2 is provided, which is compatible with TemplateResults of lit2.
+   * However, in contexts that need to run multiple versions of lit, it should be possible to
+   * provide a specific render function, like renderHybrid, that internally checks, based on the
+   * TemplateResult, whether the render function of lit 1 or 2 should called.
+   * Overriding the render function would look like:
+   *
+   * @protected
+   * @param {TemplateResult1|TemplateResult2|LitHtmlStoryFn} html Any value renderable by NodePart - typically a TemplateResult
+   * created by evaluating a template tag like `html` or `svg`.
+   * @param {HTMLElement} container A DOM parent to render to. The entire contents are either
+   * replaced, or efficiently updated if the same result type was previous
+   * rendered there.
+   * @param {Partial<RenderOptions2>} [options] RenderOptions for the entire render tree rendered to this
+   * container. Render options must *not* change between renders to the same
+   * container, as those changes will not effect previously rendered DOM.
+   *
+   * @example
+   * ```js
+   * import { MdJsPreview } from '@mdjs/mdjs-preview';
+   * import { render as render2 } from 'lit';
+   * import { isTemplateResult as isTemplateResult2 } from 'lit/directive-helpers.js';
+   * import { render as render1  } from 'lit-html';
+   *
+   * export class HybridLitMdjsPreview extends MdJsPreview {
+   *   renderStory(html, container, options) {
+   *     if (isTemplateResult2(html)) {
+   *       render2(html, container, options);
+   *     } else {
+   *       render1(html, container, options);
+   *     }
+   *   }
+   * }
+   * customElements.define('mdjs-preview', HybridLitMdjsPreview);
+   * ```
+   */
+  renderStory(html, container, options) {
+    render(html, container, options);
+  }
+
   constructor() {
     super();
     /** @type {LitHtmlStoryFn} */
@@ -82,7 +129,7 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) {
     this.__supportsClipboard = 'clipboard' in navigator;
     this.__copyButtonText = 'Copy Code';
 
-    this.theme = 'light';
+    this.previewTheme = 'light';
     /** @type {{ key: string, name: string }[]} */
     this.themes = [
       // { key: 'light', name: 'Light' },
@@ -257,7 +304,10 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) {
     }
 
     if (this.lightDomRenderTarget && changeProps.has('story')) {
-      render(this.story({ shadowRoot: this }), this.lightDomRenderTarget);
+      this.renderStory(
+        /** @type {LitHtmlStoryFn} */ (this.story({ shadowRoot: this })),
+        this.lightDomRenderTarget,
+      );
     }
 
     if (changeProps.has('platform') || changeProps.has('size')) {
@@ -286,7 +336,7 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) {
     const params = new URLSearchParams();
     params.set('story-file', sanitize(mdjsSetupScript.src, 'js'));
     params.set('story-key', this.key);
-    params.set('theme', this.theme);
+    params.set('theme', this.previewTheme);
     params.set('platform', this.platform);
     params.set('language', this.language);
     params.set('edge-distance', this.edgeDistance.toString());
@@ -439,20 +489,20 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) {
           @change=${
             /** @param {Event} ev */ ev => {
               if (ev.target) {
-                this.theme = /** @type {HTMLInputElement} */ (ev.target).value;
+                this.previewTheme = /** @type {HTMLInputElement} */ (ev.target).value;
               }
             }
           }
         >
           ${this.themes.map(
-            theme => html`
-              <label class="${this.theme === theme.key ? 'selected' : ''}">
-                <span>${theme.name}</span>
+            previewTheme => html`
+              <label class="${this.previewTheme === previewTheme.key ? 'selected' : ''}">
+                <span>${previewTheme.name}</span>
                 <input
                   type="radio"
                   name="theme"
-                  value="${theme.key}"
-                  ?checked=${this.theme === theme.key}
+                  value="${previewTheme.key}"
+                  ?checked=${this.previewTheme === previewTheme.key}
                 />
               </label>
             `,
@@ -686,11 +736,11 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) {
       }
 
       :host(:not([device-mode])) #wrapper {
-        border: 2px solid #4caf50;
+        border: 2px solid var(--primary-lines-color, #4caf50);
       }
 
       iframe {
-        border: 2px solid #4caf50;
+        border: 2px solid var(--primary-lines-color, #4caf50);
         background: #fff;
       }
 

packages/mdjs-preview/src/mdjsViewerSharedStates.js

@@ -1,7 +1,7 @@
 const _sharedStates = {
   platform: 'web',
   size: 'webSmall',
-  theme: 'light',
+  previewTheme: 'light',
   language: 'en',
   autoHeight: true,
   deviceMode: false,

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

@@ -0,0 +1,30 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { html as storyHtml } from '@mdjs/mdjs-preview';
+import { MdJsPreview } from '@mdjs/mdjs-preview';
+import { render as render2 } from 'lit';
+import { isTemplateResult as isTemplateResult2 } from 'lit/directive-helpers.js';
+
+/** @typedef {import('@mdjs/mdjs-preview').MdJsPreview} MdJsPreview */
+
+describe('mdjs-preview Subclasser', () => {
+  it('will expose a render function getter to override in extensions', async () => {
+    let isCalled = false;
+    class HybridLitMdjsPreview extends MdJsPreview {
+      renderStory(html, container, options) {
+        isCalled = true;
+        if (isTemplateResult2(html)) {
+          render2(html, container, options);
+        } else {
+          throw new Error('[mdjs-preview]: Only lit2 allowed');
+        }
+      }
+    }
+    customElements.define('mdjs-preview', HybridLitMdjsPreview);
+
+    const el = await fixture(html`
+      <mdjs-preview .story=${() => storyHtml`<p id="testing"></p>`}></mdjs-preview>
+    `);
+    expect(isCalled).to.be.true;
+    expect(el.querySelectorAll('#testing').length).to.equal(1);
+  });
+});

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

@@ -5,7 +5,7 @@ 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 () => {
+  it('will render the element into light dom by default', async () => {
     const el = await fixture(html`
       <mdjs-preview .story=${() => storyHtml`<p id="testing"></p>`}></mdjs-preview>
     `);

packages/plugins-manager/CHANGELOG.md

@@ -1,5 +1,11 @@
 # plugins-manager
 
+## 0.3.1
+
+### Patch Changes
+
+- 7e277cd: Add a "hidden" feature in addPlugin that if you attach a `wrapPlugin` property to the returning function it will call `wrapPlugin` on the plugin before adding it.
+
 ## 0.3.0
 
 ### Minor Changes

packages/plugins-manager/package.json

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

packages/plugins-manager/src/addPlugin.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 /**
  * @template {import('../types/main').Plugin} T
  * @param {T} plugin
@@ -12,6 +13,10 @@ export function addPlugin(plugin, options = {}, { how = 'after', location = 'bot
     if (plugins === undefined) {
       plugins = [];
     }
+
+    // @ts-ignore
+    const usePlugin = addPluginFn.wrapPlugin ? addPluginFn.wrapPlugin(plugin) : plugin;
+
     // only add if name is not already in the meta plugin list
     if (plugins.findIndex(pluginObj => pluginObj.plugin === plugin) === -1) {
       let index = -1;
@@ -40,7 +45,7 @@ export function addPlugin(plugin, options = {}, { how = 'after', location = 'bot
       }
 
       plugins.splice(index, 0, {
-        plugin,
+        plugin: usePlugin,
         options,
       });
     }

packages/plugins-manager/test-node/addPlugin.test.js

@@ -109,4 +109,18 @@ describe('addPlugin', () => {
     });
     expect(config.plugins).to.deep.equal(['-- newFirst last Plugin --']);
   });
+
+  it('[advanced] can add a `wrapPlugin` property to the function itself which will call it on the plugin on init', async () => {
+    function myWrapper(plugin) {
+      return () => 'wrapped' + plugin();
+    }
+
+    const config = applyPlugins({
+      setupPlugins: [addPlugin(insertPlugin)].map(mod => {
+        mod.wrapPlugin = myWrapper;
+        return mod;
+      }),
+    });
+    expect(config.plugins).to.deep.equal(['wrapped-- first last Plugin --']);
+  });
 });

packages/search/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @rocket/search
 
+## 0.6.0
+
+### Minor Changes
+
+- c2c9ecd: Update @lion dependencies
+
 ## 0.5.1
 
 ### Patch Changes

packages/search/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket/search",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "publishConfig": {
     "access": "public"
   },
@@ -42,9 +42,9 @@
     "search"
   ],
   "dependencies": {
-    "@lion/combobox": "^0.8.6",
-    "@lion/core": "^0.19.0",
-    "@lion/listbox": "^0.10.7",
+    "@lion/combobox": "^0.9.0",
+    "@lion/core": "^0.21.0",
+    "@lion/listbox": "^0.12.0",
     "@open-wc/scoped-elements": "^2.0.0",
     "chalk": "^4.0.0",
     "minisearch": "^3.0.2",