Updates an error handler to expect updated @astrojs/lit behavior (#3766)

Tony Sullivan · web-flow · commit 51d5dc478993 · 2022-06-29T20:56:51.000Z
* fix: don't throw an error when the lit renderer doesn't provide a clientEntrypoint

* updating the framework-lit example to match new behavior

* fix: updating the playground example to latest lit syntax
diff --git a/examples/framework-lit/src/components/calc-add.js b/examples/framework-lit/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/framework-lit/src/components/my-counter.js b/examples/framework-lit/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/framework-lit/src/pages/index.astro b/examples/framework-lit/src/pages/index.astro
@@ -1,7 +1,7 @@
 ---
 import Lorem from '../components/Lorem.astro';
-import '../components/Test.js';
-import '../components/Counter.js';
+import { CalcAdd } from '../components/calc-add.js';
+import { MyCounter } from '../components/my-counter.js';
 ---
 
 <!DOCTYPE html>
@@ -12,8 +12,8 @@ import '../components/Counter.js';
 	</head>
 	<body>
 		<h1>Test app</h1>
-		<my-counter client:load></my-counter>
+		<MyCounter client:load></MyCounter>
 		<Lorem />
-		<calc-add num={33}></calc-add>
+		<CalcAdd num={33}></CalcAdd>
 	</body>
 </html>
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
diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts
@@ -358,7 +358,9 @@ If you're still stuck, please open an issue on GitHub or join us at https://astr
 		}
 	}
 
-	if (renderer && !renderer.clientEntrypoint && metadata.hydrate) {
+	// HACK! The lit renderer doesn't include a clientEntrypoint for custom elements, allow it
+	// to render here until we find a better way to recognize when a client entrypoint isn't required.
+	if (renderer && !renderer.clientEntrypoint && renderer.name !== '@astrojs/lit' && metadata.hydrate) {
 		throw new Error(
 			`${metadata.displayName} component has a \`client:${metadata.hydrate}\` directive, but no client entrypoint was provided by ${renderer.name}!`
 		);

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);`
Original file line number	Diff line number	Diff line change
`@@ -358,7 +358,9 @@ If you're still stuck, please open an issue on GitHub or join us at https://astr`
`358`	`358`	`}`
`359`	`359`	`}`
`360`	`360`
`361`		`- if (renderer && !renderer.clientEntrypoint && metadata.hydrate) {`
	`361`	`+ // HACK! The lit renderer doesn't include a clientEntrypoint for custom elements, allow it`
	`362`	`+ // to render here until we find a better way to recognize when a client entrypoint isn't required.`
	`363`	`+ if (renderer && !renderer.clientEntrypoint && renderer.name !== '@astrojs/lit' && metadata.hydrate) {`
`362`	`364`	`throw new Error(`
`363`	`365`	`${metadata.displayName} component has a \`client:${metadata.hydrate}\` directive, but no client entrypoint was provided by ${renderer.name}!`
`364`	`366`	`);`