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'; import { LitElement, html } from 'lit';
export const tagName = 'calc-add'; export class CalcAdd extends LitElement {
class CalcAdd extends LitElement {
static get properties() { static get properties() {
return { return {
num: { 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'; import { LitElement, html } from 'lit';
export const tagName = 'my-counter'; export class MyCounter extends LitElement {
class Counter extends LitElement {
static get properties() { static get properties() {
return { return {
count: { 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 Lorem from '../components/Lorem.astro';
import '../components/Test.js'; import { CalcAdd } from '../components/calc-add.js';
import '../components/Counter.js'; import { MyCounter } from '../components/my-counter.js';
--- ---
<!DOCTYPE html> <!DOCTYPE html>
@ -12,8 +12,8 @@ import '../components/Counter.js';
</head> </head>
<body> <body>
<h1>Test app</h1> <h1>Test app</h1>
<my-counter client:load></my-counter> <MyCounter client:load></MyCounter>
<Lorem /> <Lorem />
<calc-add num={33}></calc-add> <CalcAdd num={33}></CalcAdd>
</body> </body>
</html> </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'; import { LitElement, html } from 'lit';
export const tagName = 'calc-add'; export class CalcAdd extends LitElement {
class CalcAdd extends LitElement {
static get properties() { static get properties() {
return { return {
num: { 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'; import { LitElement, html } from 'lit';
export const tagName = 'my-counter'; export class MyCounter extends LitElement {
class Counter extends LitElement {
static get properties() { static get properties() {
return { return {
count: { 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 Lorem from '../components/Lorem.astro';
import Link from '../components/Link.jsx'; import Link from '../components/Link.jsx';
import SolidCounter from '../components/SolidCounter.jsx'; import SolidCounter from '../components/SolidCounter.jsx';
import '../components/Test.js'; import { CalcAdd } from '../components/calc-add.js';
import '../components/Counter.js'; import { MyCounter } from '../components/my-counter.js';
--- ---
<!DOCTYPE html> <!DOCTYPE html>
@ -18,11 +18,11 @@ import '../components/Counter.js';
<strong>Party Mode!</strong> <strong>Party Mode!</strong>
Colors changing = partytown is enabled Colors changing = partytown is enabled
</h2> </h2>
<my-counter client:load></my-counter> <MyCounter client:load></MyCounter>
<SolidCounter client:load></SolidCounter> <SolidCounter client:load></SolidCounter>
<Link to="/foo" text="Go to Page 2" /> <Link to="/foo" text="Go to Page 2" />
<Lorem /> <Lorem />
<calc-add num={33}></calc-add> <CalcAdd num={33}></CalcAdd>
<script type="text/partytown"> <script type="text/partytown">
// Remove `type="text/partytown"` to see this block the page // Remove `type="text/partytown"` to see this block the page
// and cause the page to become unresponsive // 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( throw new Error(
`${metadata.displayName} component has a \`client:${metadata.hydrate}\` directive, but no client entrypoint was provided by ${renderer.name}!` `${metadata.displayName} component has a \`client:${metadata.hydrate}\` directive, but no client entrypoint was provided by ${renderer.name}!`
); );