Merge branch 'main' into next

Author: daKmoR

.gitignore

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

package.json

@@ -53,8 +53,8 @@
   "devDependencies": {
     "@changesets/cli": "^2.20.0",
     "@custom-elements-manifest/analyzer": "^0.4.12",
-    "@open-wc/testing": "^3.0.0",
     "@playwright/test": "^1.18.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",

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/mdjs-preview/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @mdjs/mdjs-preview
 
+## 0.5.7
+
+### Patch Changes
+
+- f4d83fe: add overridable `renderFunction` to mdjs-preview
+
 ## 0.5.6
 
 ### Patch Changes

packages/mdjs-preview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdjs/mdjs-preview",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "publishConfig": {
     "access": "public"
   },

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
@@ -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} */
@@ -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')) {

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/search/CHANGELOG.md

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

site/pages/30--tools/20--markdown-javascript/20--preview.rocket.md

@@ -253,3 +253,28 @@ 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);
+```

yarn.lock

@@ -1544,7 +1544,12 @@
     parse5 "^6.0.1"
     resolve "^1.10.1"
 
-"@lit/reactive-element@^1.0.0", "@lit/reactive-element@^1.1.0", "@lit/reactive-element@^1.3.0":
+"@lit/reactive-element@^1.0.0":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.0.2.tgz#daa7a7c7a6c63d735f0c9634de6b7dbd70a702ab"
+  integrity sha512-oz3d3MKjQ2tXynQgyaQaMpGTDNyNDeBdo6dXf1AbjTwhA1IRINHmA7kSaVYv9ttKweNkEoNqp9DqteDdgWzPEg==
+
+"@lit/reactive-element@^1.1.0", "@lit/reactive-element@^1.3.0":
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.3.4.tgz#c4492a54387f7b1020d498a348403229583d1c06"
   integrity sha512-I1wz4uxOA52zSBhKmv4KQWLJpCyvfpnDg+eQR6mjpRgV+Ldi14HLPpSUpJklZRldz0fFmGCC/kVmuc/3cPFqCg==
@@ -1635,7 +1640,7 @@
     lit "^2.0.0"
     lit-html "^2.0.0"
 
-"@open-wc/testing@^3.0.0":
+"@open-wc/testing@^3.1.2":
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/@open-wc/testing/-/testing-3.1.3.tgz#df569a7654bf42ff156b4a498e93789d82b56fdb"
   integrity sha512-7JXMVs02IqY/lhvBoc++MT9sVPQOVjFP9sapCtHz9PCDO3TGAVj1122eNyhhCiHsuG89wdk21GQILfAozfSeMA==
@@ -2590,6 +2595,11 @@
     portfinder "^1.0.28"
     source-map "^0.7.3"
 
+"@webcomponents/scoped-custom-element-registry@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@webcomponents/scoped-custom-element-registry/-/scoped-custom-element-registry-0.0.3.tgz#774591a886b0b0e4914717273ba53fd8d5657522"
+  integrity sha512-lpSzgDCGbM99dytb3+J3Suo4+Bk1E13MPnWB42JK8GwxSAxFz+tC7TTv2hhDSIE2IirGNKNKCf3m08ecu6eAsQ==
+
 "@webcomponents/shadycss@^1.11.0":
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/@webcomponents/shadycss/-/shadycss-1.11.0.tgz#73e289996c002d8be694cd3be0e83c46ad25e7e0"
@@ -5631,7 +5641,7 @@ lit-element@^2.0.1:
   dependencies:
     lit-html "^1.1.1"
 
-lit-element@^3.1.0, lit-element@^3.2.0:
+lit-element@^3.0.0, lit-element@^3.1.0, lit-element@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-3.2.2.tgz#d148ab6bf4c53a33f707a5168e087725499e5f2b"
   integrity sha512-6ZgxBR9KNroqKb6+htkyBwD90XGRiqKDHVrW/Eh0EZ+l+iC+u+v+w3/BA5NGi4nizAVHGYvQBHUDuSmLjPp7NQ==
@@ -5651,7 +5661,16 @@ lit-html@^2.0.0, lit-html@^2.1.0, lit-html@^2.2.0:
   dependencies:
     "@types/trusted-types" "^2.0.2"
 
-lit@^2.0.0, lit@^2.0.2, lit@^2.1.0, lit@^2.2.5:
+lit@^2.0.0, lit@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/lit/-/lit-2.0.2.tgz#5e6f422924e0732258629fb379556b6d23f7179c"
+  integrity sha512-hKA/1YaSB+P+DvKWuR2q1Xzy/iayhNrJ3aveD0OQ9CKn6wUjsdnF/7LavDOJsKP/K5jzW/kXsuduPgRvTFrFJw==
+  dependencies:
+    "@lit/reactive-element" "^1.0.0"
+    lit-element "^3.0.0"
+    lit-html "^2.0.0"
+
+lit@^2.1.0, lit@^2.2.5:
   version "2.2.8"
   resolved "https://registry.yarnpkg.com/lit/-/lit-2.2.8.tgz#26bdf560042aa3ec9b788f5d48119f7138b2dcc1"
   integrity sha512-QjeNbi/H9LVIHR+u0OqsL+hs62a16m02JlJHYN48HcBuXyiPYR8JvzsTp5dYYS81l+b9Emp3UaGo82EheV0pog==