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

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

Browse source 
* 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
This commit is contained in:
Tony Sullivan 2022-06-29 20:56:51 +00:00 committed by GitHub
parent e667477103
commit 51d5dc4789
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 19 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
examples/framework-lit/src/components/Test.js → examples/framework-lit/src/components/calc-add.js
View file

@ -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);

6
examples/framework-lit/src/components/Counter.js → examples/framework-lit/src/components/my-counter.js
View file

@ -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);

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

@ -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>

6
examples/integrations-playground/src/components/Test.js → examples/integrations-playground/src/components/calc-add.js
View file

@ -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);

6
examples/integrations-playground/src/components/Counter.js → examples/integrations-playground/src/components/my-counter.js
View file

@ -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);

8
examples/integrations-playground/src/pages/index.astro
View file

@ -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

4
packages/astro/src/runtime/server/index.ts
View file

@ -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}!`
);