michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Allows using the constructor for lit elements

Browse source
This commit is contained in:
unknown 2022-06-17 14:59:24 -04:00
parent 6fa286812a
commit b21c9576e8
7 changed files with 23 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/unlucky-hairs-camp.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/lit': minor
---
Allows using the Constructor for rendering components

2
packages/astro/test/fixtures/lit-element/src/components/my-element.js vendored
View file

@ -1,7 +1,5 @@
import { LitElement, html } from 'lit';
export const tagName = 'my-element';
export class MyElement extends LitElement {
static properties = {
bool: {type: Boolean},

6
packages/astro/test/fixtures/lit-element/src/pages/index.astro vendored
View file

@ -1,5 +1,5 @@
---
import '../components/my-element.js';
import {MyElement} from '../components/my-element.js';
---
<html>
@ -7,12 +7,12 @@ import '../components/my-element.js';
<title>LitElements</title>
</head>
<body>
<my-element
<MyElement
foo="bar"
str-attr={'initialized'}
bool={false}
obj={{data: 1}}
reflectedStrProp={'initialized reflected'}>
</my-element>
</MyElement>
</body>
</html>

14
packages/astro/test/lit-element.test.js
View file

@ -21,7 +21,7 @@ describe('LitElement test', function () {
await fixture.build();
});
it('Renders a custom element by tag name', async () => {
it('Renders a custom element by Constructor', async () => {
// @lit-labs/ssr/ requires Node 13.9 or higher
if (NODE_VERSION < 13.9) {
return;
@ -61,16 +61,4 @@ describe('LitElement test', function () {
expect($('my-element').attr('reflected-str')).to.equal('default reflected string');
expect($('my-element').attr('reflected-str-prop')).to.equal('initialized reflected');
});
// Skipped because not supported by Lit
it.skip('Renders a custom element by the constructor', async () => {
const html = await fixture.fetch('/ctr/index.html');
const $ = cheerio.load(html);
// test 1: attributes rendered
expect($('my-element').attr('foo')).to.equal('bar');
// test 2: shadow rendered
expect($('my-element').html()).to.include(`<div>Testing...</div>`);
});
});

6
packages/integrations/lit/server-shim.js
View file

@ -5,3 +5,9 @@ window.global = window;
document.getElementsByTagName = () => [];
// See https://github.com/lit/lit/issues/2393
document.currentScript = null;
const ceDefine = customElements.define;
customElements.define = function(tagName, Ctr) {
Ctr[Symbol.for('tagName')] = tagName;
return ceDefine.call(this, tagName, Ctr);
}

8
packages/integrations/lit/server.js
View file

@ -9,6 +9,8 @@ function isCustomElementTag(name) {
function getCustomElementConstructor(name) {
if (typeof customElements !== 'undefined' && isCustomElementTag(name)) {
return customElements.get(name) || null;
} else if(typeof name === 'function') {
return name;
}
return null;
}
@ -24,7 +26,11 @@ async function check(Component, _props, _children) {
return !!(await isLitElement(Component));
}
function* render(tagName, attrs, children) {
function* render(Component, attrs, children) {
let tagName = Component;
if(typeof tagName !== 'string') {
tagName = Component[Symbol.for('tagName')];
}
const instance = new LitElementRenderer(tagName);
// LitElementRenderer creates a new element instance, so copy over.

1
packages/integrations/lit/src/index.ts
View file

@ -18,6 +18,7 @@ function getViteConfiguration() {
'@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',
'@astrojs/lit/server.js'
],
},
};