diff --git a/docs/docs/markdown-javascript/preview.md b/docs/docs/markdown-javascript/preview.md index 1af0fb7d..2173a400 100644 --- a/docs/docs/markdown-javascript/preview.md +++ b/docs/docs/markdown-javascript/preview.md @@ -241,14 +241,12 @@ import { isTemplateResult as isTemplateResult2 } from 'lit/directive-helpers.js' import { render as render1 } from 'lit-html'; export class HybridLitMdjsPreview extends MdJsPreview { - get renderFunction() { - return function renderHybrid(html, container, options) { - if (isTemplateResult2(html)) { - render2(html, container, options); - } else { - render1(html, container, options); - } - }; + renderStory(html, container, options) { + if (isTemplateResult2(html)) { + render2(html, container, options); + } else { + render1(html, container, options); + } } customElements.define('mdjs-preview', HybridLitMdjsPreview); ``` diff --git a/packages/mdjs-preview/src/MdJsPreview.js b/packages/mdjs-preview/src/MdJsPreview.js index 8b951140..64fdb039 100644 --- a/packages/mdjs-preview/src/MdJsPreview.js +++ b/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 @@ -79,6 +86,16 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) { * 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} [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'; @@ -87,21 +104,19 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) { * import { render as render1 } from 'lit-html'; * * export class HybridLitMdjsPreview extends MdJsPreview { - * get renderFunction() { - * return function renderHybrid(html, container, options) { - * if (isTemplateResult2(html)) { - * render2(html, container, options); - * } else { - * render1(html, container, options); - * } - * }; + * renderStory(html, container, options) { + * if (isTemplateResult2(html)) { + * render2(html, container, options); + * } else { + * render1(html, container, options); + * } * } * } * customElements.define('mdjs-preview', HybridLitMdjsPreview); * ``` */ - get renderFunction() { - return render; + renderStory(html, container, options) { + render(html, container, options); } constructor() { @@ -289,7 +304,10 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) { } if (this.lightDomRenderTarget && changeProps.has('story')) { - this.renderFunction(this.story({ shadowRoot: this }), this.lightDomRenderTarget); + this.renderStory( + /** @type {LitHtmlStoryFn} */ (this.story({ shadowRoot: this })), + this.lightDomRenderTarget, + ); } if (changeProps.has('platform') || changeProps.has('size')) { diff --git a/packages/mdjs-preview/test-web/mdjs-preview.subclasser.test.js b/packages/mdjs-preview/test-web/mdjs-preview.subclasser.test.js index 21ebd43e..770a3409 100644 --- a/packages/mdjs-preview/test-web/mdjs-preview.subclasser.test.js +++ b/packages/mdjs-preview/test-web/mdjs-preview.subclasser.test.js @@ -10,15 +10,13 @@ describe('mdjs-preview Subclasser', () => { it('will expose a render function getter to override in extensions', async () => { let isCalled = false; class HybridLitMdjsPreview extends MdJsPreview { - get renderFunction() { - return function renderStrict(html, container, options) { - isCalled = true; - if (isTemplateResult2(html)) { - render2(html, container, options); - } else { - throw new Error('[mdjs-preview]: Only lit2 allowed'); - } - }; + 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);