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);
+```