diff --git a/examples/framework-lit/src/components/Counter.js b/examples/framework-lit/src/components/Counter.js index c901096d5..063d338e4 100644 --- a/examples/framework-lit/src/components/Counter.js +++ b/examples/framework-lit/src/components/Counter.js @@ -6,8 +6,8 @@ class Counter extends LitElement { static get properties() { return { count: { - type: Number - } + type: Number, + }, }; } @@ -31,4 +31,4 @@ class Counter extends LitElement { } } -customElements.define(tagName, Counter); \ No newline at end of file +customElements.define(tagName, Counter); diff --git a/examples/framework-lit/src/components/Test.js b/examples/framework-lit/src/components/Test.js index 75d592871..182755c79 100644 --- a/examples/framework-lit/src/components/Test.js +++ b/examples/framework-lit/src/components/Test.js @@ -6,16 +6,14 @@ class CalcAdd extends LitElement { static get properties() { return { num: { - type: Number - } + type: Number, + }, }; } render() { - return html` -
Number: ${this.num}
- `; + return html`
Number: ${this.num}
`; } } -customElements.define(tagName, CalcAdd); \ No newline at end of file +customElements.define(tagName, CalcAdd); diff --git a/packages/astro/test/lit-element.test.js b/packages/astro/test/lit-element.test.js index 9f5d142ad..d976eb67b 100644 --- a/packages/astro/test/lit-element.test.js +++ b/packages/astro/test/lit-element.test.js @@ -32,7 +32,7 @@ LitElement.skip('Renders a custom element by the constructor', async ({ runtime LitElement.after(() => { const globals = Object.keys(globalThis.window); globals.splice(globals.indexOf('global'), 1); - for(let name of globals) { + for (let name of globals) { delete globalThis[name]; } }); diff --git a/packages/renderers/renderer-lit/client-shim.js b/packages/renderers/renderer-lit/client-shim.js index 8dd75826f..3f4788fc1 100644 --- a/packages/renderers/renderer-lit/client-shim.js +++ b/packages/renderers/renderer-lit/client-shim.js @@ -3,7 +3,11 @@ async function polyfill() { hydrateShadowRoots(document.body); } -if(!(new DOMParser().parseFromString(`

`, 'text/html', { - includeShadowRoots: true -}).querySelector('p')?.shadowRoot)) - polyfill(); \ No newline at end of file +if ( + !new DOMParser() + .parseFromString(`

`, 'text/html', { + includeShadowRoots: true, + }) + .querySelector('p')?.shadowRoot +) + polyfill(); diff --git a/packages/renderers/renderer-lit/index.js b/packages/renderers/renderer-lit/index.js index 38b59a6f7..ed22952e1 100644 --- a/packages/renderers/renderer-lit/index.js +++ b/packages/renderers/renderer-lit/index.js @@ -1,19 +1,8 @@ export default { name: '@astrojs/renderer-lit', server: './server.js', - external: [ - '@lit-labs/ssr/lib/install-global-dom-shim.js', - '@lit-labs/ssr/lib/render-lit-html.js', - '@lit-labs/ssr/lib/lit-element-renderer.js' - ], - polyfills: [ - './client-shim.js' - ], - hydrationPolyfills: [ - 'lit/experimental-hydrate-support.js' - ], - knownEntrypoints: [ - '@astrojs/renderer-lit/client-shim.js', - '@webcomponents/template-shadowroot/template-shadowroot.js' - ] + external: ['@lit-labs/ssr/lib/install-global-dom-shim.js', '@lit-labs/ssr/lib/render-lit-html.js', '@lit-labs/ssr/lib/lit-element-renderer.js'], + polyfills: ['./client-shim.js'], + hydrationPolyfills: ['lit/experimental-hydrate-support.js'], + knownEntrypoints: ['@astrojs/renderer-lit/client-shim.js', '@webcomponents/template-shadowroot/template-shadowroot.js'], }; diff --git a/packages/renderers/renderer-lit/server-shim.js b/packages/renderers/renderer-lit/server-shim.js index 89de78117..cac25bec7 100644 --- a/packages/renderers/renderer-lit/server-shim.js +++ b/packages/renderers/renderer-lit/server-shim.js @@ -1,2 +1,2 @@ import '@lit-labs/ssr/lib/install-global-dom-shim.js'; -document.getElementsByTagName = () => []; \ No newline at end of file +document.getElementsByTagName = () => []; diff --git a/packages/renderers/renderer-lit/server.js b/packages/renderers/renderer-lit/server.js index 83e1d51b4..6ccb2da9b 100644 --- a/packages/renderers/renderer-lit/server.js +++ b/packages/renderers/renderer-lit/server.js @@ -7,7 +7,7 @@ function isCustomElementTag(name) { } function getCustomElementConstructor(name) { - if(typeof customElements !== 'undefined' && isCustomElementTag(name)) { + if (typeof customElements !== 'undefined' && isCustomElementTag(name)) { return customElements.get(name) || null; } return null; @@ -24,11 +24,11 @@ async function check(Component, _props, _children) { return !!(await isLitElement(Component)); } -function * render(tagName, attrs, children) { +function* render(tagName, attrs, children) { const instance = new LitElementRenderer(tagName); // LitElementRenderer creates a new element instance, so copy over. - for(let [name, value] of Object.entries(attrs)) { + for (let [name, value] of Object.entries(attrs)) { instance.setAttribute(name, value); } @@ -49,16 +49,16 @@ async function renderToStaticMarkup(Component, props, children) { let tagName = Component; let out = ''; - for(let chunk of render(tagName, props, children)) { + for (let chunk of render(tagName, props, children)) { out += chunk; } return { - html: out + html: out, }; } export default { check, - renderToStaticMarkup + renderToStaticMarkup, };