fix: updating the playground example to latest lit syntax

Tony Sullivan · Tony Sullivan · commit 35673ec90391 · 2022-06-29T15:34:07.000-05:00
diff --git a/examples/integrations-playground/src/components/calc-add.js b/examples/integrations-playground/src/components/calc-add.js
@@ -1,8 +1,6 @@
 import { LitElement, html } from 'lit';
 
-export const tagName = 'calc-add';
-
-class CalcAdd extends LitElement {
+export class CalcAdd extends LitElement {
 	static get properties() {
 		return {
 			num: {
@@ -16,4 +14,4 @@ class CalcAdd extends LitElement {
 	}
 }
 
-customElements.define(tagName, CalcAdd);
+customElements.define('calc-add', CalcAdd);
diff --git a/examples/integrations-playground/src/components/my-counter.js b/examples/integrations-playground/src/components/my-counter.js
@@ -1,8 +1,6 @@
 import { LitElement, html } from 'lit';
 
-export const tagName = 'my-counter';
-
-class Counter extends LitElement {
+export class MyCounter extends LitElement {
 	static get properties() {
 		return {
 			count: {
@@ -31,4 +29,4 @@ class Counter extends LitElement {
 	}
 }
 
-customElements.define(tagName, Counter);
+customElements.define('my-counter', MyCounter);
diff --git a/examples/integrations-playground/src/pages/index.astro b/examples/integrations-playground/src/pages/index.astro
@@ -2,8 +2,8 @@
 import Lorem from '../components/Lorem.astro';
 import Link from '../components/Link.jsx';
 import SolidCounter from '../components/SolidCounter.jsx';
-import '../components/Test.js';
-import '../components/Counter.js';
+import { CalcAdd } from '../components/calc-add.js';
+import { MyCounter } from '../components/my-counter.js';
 ---
 
 <!DOCTYPE html>
@@ -18,11 +18,11 @@ import '../components/Counter.js';
       <strong>Party Mode!</strong>
       Colors changing = partytown is enabled
     </h2>
-		<my-counter client:load></my-counter>
+		<MyCounter client:load></MyCounter>
     <SolidCounter client:load></SolidCounter>
     <Link to="/foo" text="Go to Page 2" />
 		<Lorem />
-		<calc-add num={33}></calc-add>
+		<CalcAdd num={33}></CalcAdd>
     <script type="text/partytown">
       // Remove `type="text/partytown"` to see this block the page
       // and cause the page to become unresponsive

Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,6 @@`
`1`	`1`	`import { LitElement, html } from 'lit';`
`2`	`2`
`3`		`-export const tagName = 'calc-add';`
`4`		`-`
`5`		`-class CalcAdd extends LitElement {`
	`3`	`+export class CalcAdd extends LitElement {`
`6`	`4`	`static get properties() {`
`7`	`5`	`return {`
`8`	`6`	`num: {`
`@@ -16,4 +14,4 @@ class CalcAdd extends LitElement {`
`16`	`14`	`}`
`17`	`15`	`}`
`18`	`16`
`19`		`-customElements.define(tagName, CalcAdd);`
	`17`	`+customElements.define('calc-add', CalcAdd);`
Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,6 @@`
`1`	`1`	`import { LitElement, html } from 'lit';`
`2`	`2`
`3`		`-export const tagName = 'my-counter';`
`4`		`-`
`5`		`-class Counter extends LitElement {`
	`3`	`+export class MyCounter extends LitElement {`
`6`	`4`	`static get properties() {`
`7`	`5`	`return {`
`8`	`6`	`count: {`
`@@ -31,4 +29,4 @@ class Counter extends LitElement {`
`31`	`29`	`}`
`32`	`30`	`}`
`33`	`31`
`34`		`-customElements.define(tagName, Counter);`
	`32`	`+customElements.define('my-counter', MyCounter);`