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

chore: update Lit example to remove manual tagName export

Browse source
This commit is contained in:
Nate Moore 2021-11-01 12:46:12 -05:00
parent 5d96f98564
commit 1d1f389c55
5 changed files with 22 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
examples/framework-lit/src/components/Counter.js
View file

@ -1,7 +1,5 @@
import { LitElement, html } from 'lit'; import { LitElement, html } from 'lit';
export const tagName = 'my-counter';
class Counter extends LitElement { class Counter extends LitElement {
static get properties() { static get properties() {
return { return {
@ -31,4 +29,4 @@ class Counter extends LitElement {
} }
} }
customElements.define(tagName, Counter); customElements.define('my-counter', Counter);

14
examples/framework-lit/src/components/Greeting.ts Normal file
View file

@ -0,0 +1,14 @@
import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';
@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
static styles = css`p { color: blue }`;
@property()
name = 'Somebody';
render() {
return html`<p>Hello, ${this.name}!</p>`;
}
}

3
examples/framework-lit/src/components/Test.js
View file

@ -1,7 +1,5 @@
import { LitElement, html } from 'lit'; import { LitElement, html } from 'lit';
export const tagName = 'calc-add';
class CalcAdd extends LitElement { class CalcAdd extends LitElement {
static get properties() { static get properties() {
return { return {
@ -16,4 +14,5 @@ class CalcAdd extends LitElement {
} }
} }
const tagName = 'calc-add'
customElements.define(tagName, CalcAdd); customElements.define(tagName, CalcAdd);

2
examples/framework-lit/src/pages/index.astro
View file

@ -2,6 +2,7 @@
import Lorem from '../components/Lorem.astro'; import Lorem from '../components/Lorem.astro';
import '../components/Test.js'; import '../components/Test.js';
import '../components/Counter.js'; import '../components/Counter.js';
import '../components/Greeting.ts';
--- ---
<!doctype html> <!doctype html>
@ -15,5 +16,6 @@ import '../components/Counter.js';
<my-counter client:load /> <my-counter client:load />
<Lorem /> <Lorem />
<calc-add num={33} /> <calc-add num={33} />
<simple-greeting name="World" />
</body> </body>
</html> </html>

5
examples/framework-lit/tsconfig.json
View file

@ -1,3 +1,6 @@
{ {
"moduleResolution": "node" "moduleResolution": "node",
"compilerOptions": {
"experimentalDecorators": true
}
} }