mirror of
https://github.com/withastro/astro.git
synced 2024-12-16 21:46:22 -05:00
[Lit] add client:only
functionality to Lit integration (#6111)
* [Lit] add `client:only` functionality to Lit integration * add changeset * update lit changeset to minor
This commit is contained in:
parent
327a76c3db
commit
ec38a8921f
6 changed files with 116 additions and 20 deletions
6
.changeset/good-wolves-remain.md
Normal file
6
.changeset/good-wolves-remain.md
Normal file
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
'@astrojs/lit': minor
|
||||
'astro': patch
|
||||
---
|
||||
|
||||
Implement client:only functionality in Lit and add lit to the client:only warning
|
|
@ -0,0 +1,9 @@
|
|||
import { LitElement, html } from 'lit';
|
||||
|
||||
export default class ClientOnlyComponent extends LitElement {
|
||||
render() {
|
||||
return html`<slot><div class="defaultContent"> Shadow dom default content should not be visible</div></slot><slot name="foo"></slot><slot name="bar"></slot></div>`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('client-only-component', ClientOnlyComponent);
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
import MyCounter from '../components/Counter.js';
|
||||
import NonDeferredCounter from '../components/NonDeferredCounter.js';
|
||||
import ClientOnlyComponent from '../components/ClientOnlyComponent.js';
|
||||
|
||||
const someProps = {
|
||||
count: 10,
|
||||
|
@ -26,5 +27,12 @@ const someProps = {
|
|||
<MyCounter id="client-visible" {...someProps} client:visible>
|
||||
<h1>Hello, client:visible!</h1>
|
||||
</MyCounter>
|
||||
|
||||
<ClientOnlyComponent id="client-only" client:only="lit">
|
||||
Frame<span class="default">work </span>
|
||||
<span slot="foo" class="foo1">client:only</span>
|
||||
<span slot="foo" class="foo2"> component</span>
|
||||
<span slot="quux"> Should not be visible</span>
|
||||
</ClientOnlyComponent>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -106,6 +106,27 @@ test.describe('Lit components', () => {
|
|||
await expect(count, 'count incremented by 1').toHaveText('Count: 11');
|
||||
});
|
||||
|
||||
test('client:only', async ({ page, astro }) => {
|
||||
await page.goto(astro.resolveUrl('/'));
|
||||
|
||||
const label = page.locator('#client-only');
|
||||
await expect(label, 'component is visible').toBeVisible();
|
||||
|
||||
// Light DOM reconstructed correctly (slots are rendered alphabetically) and shadow dom content rendered
|
||||
await expect(label, 'slotted text is in DOM').toHaveText('Framework client:only component Should not be visible Shadow dom default content should not be visible');
|
||||
|
||||
// Projected content should be visible
|
||||
await expect(page.locator('#client-only .default'), 'slotted element is visible').toBeVisible();
|
||||
await expect(page.locator('#client-only .foo1'), 'slotted element is visible').toBeVisible();
|
||||
await expect(page.locator('#client-only .foo2'), 'slotted element is visible').toBeVisible();
|
||||
|
||||
// Non-projected content should not be visible
|
||||
await expect(page.locator('#client-only [slot="quux"]'), 'element without slot is not visible').toBeHidden();
|
||||
|
||||
// Default slot content should not be visible
|
||||
await expect(page.locator('#client-only .defaultContent'), 'element without slot is not visible').toBeHidden();
|
||||
});
|
||||
|
||||
t.skip('HMR', async ({ page, astro }) => {
|
||||
await page.goto(astro.resolveUrl('/'));
|
||||
|
||||
|
|
|
@ -39,6 +39,7 @@ function guessRenderers(componentUrl?: string): string[] {
|
|||
'@astrojs/solid-js',
|
||||
'@astrojs/vue',
|
||||
'@astrojs/svelte',
|
||||
'@astrojs/lit',
|
||||
];
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,21 +1,72 @@
|
|||
export default (element: HTMLElement) => async (Component: any, props: Record<string, any>) => {
|
||||
// Get the LitElement element instance (may or may not be upgraded).
|
||||
const component = element.children[0] as HTMLElement;
|
||||
|
||||
// If there is no deferral of hydration, then all reactive properties are
|
||||
// already serialzied as reflected attributes, or no reactive props were set
|
||||
if (!component || !component.hasAttribute('defer-hydration')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Set properties on the LitElement instance for resuming hydration.
|
||||
for (let [name, value] of Object.entries(props)) {
|
||||
// Check if reactive property or class property.
|
||||
if (name in Component.prototype) {
|
||||
(component as any)[name] = value;
|
||||
}
|
||||
}
|
||||
|
||||
// Tell LitElement to resume hydration.
|
||||
component.removeAttribute('defer-hydration');
|
||||
/**
|
||||
* Adds the appropriate slot attribute to each top-level node in the given HTML
|
||||
* string.
|
||||
*
|
||||
* @example
|
||||
* addSlotAttrsToHtmlString('foo', '<div>bar</div><div>baz</div>');
|
||||
* // '<div slot="foo">bar</div><div slot="foo">baz</div>'
|
||||
*
|
||||
* @param slotName Name of slot to apply to HTML string.
|
||||
* @param html Stringified HTML that should be projected into the given slotname.
|
||||
* @returns A stringified HTML string with the slot attribute applied to each top-level node.
|
||||
*/
|
||||
const addSlotAttrsToHtmlString = (slotName: string, html: string) => {
|
||||
const templ = document.createElement('template');
|
||||
templ.innerHTML = html;
|
||||
Array.from(templ.content.children).forEach((node) => {
|
||||
node.setAttribute('slot', slotName);
|
||||
});
|
||||
return templ.innerHTML;
|
||||
};
|
||||
|
||||
export default (element: HTMLElement) =>
|
||||
async (
|
||||
Component: any,
|
||||
props: Record<string, any>,
|
||||
{ default: defaultChildren, ...slotted }: { default: string; [slotName: string]: string }
|
||||
) => {
|
||||
// Get the LitElement element instance.
|
||||
let component = element.children[0];
|
||||
// Check if hydration model is client:only
|
||||
const isClientOnly = element.getAttribute('client') === 'only';
|
||||
|
||||
// We need to attach the element and it's children to the DOM since it's not
|
||||
// SSR'd.
|
||||
if (isClientOnly) {
|
||||
component = new Component();
|
||||
|
||||
const otherSlottedChildren = Object.entries(slotted)
|
||||
.map(([slotName, htmlStr]) => addSlotAttrsToHtmlString(slotName, htmlStr))
|
||||
.join('');
|
||||
|
||||
// defaultChildren can actually be undefined, but TS will complain if we
|
||||
// type it as so, make sure we don't render undefined.
|
||||
component.innerHTML = `${defaultChildren ?? ''}${otherSlottedChildren}`;
|
||||
element.appendChild(component);
|
||||
|
||||
// Set props bound to non-reactive properties as attributes.
|
||||
for (let [name, value] of Object.entries(props)) {
|
||||
if (!(name in Component.prototype)) {
|
||||
component.setAttribute(name, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If there is no deferral of hydration, then all reactive properties are
|
||||
// already serialzied as reflected attributes, or no reactive props were set
|
||||
// Alternatively, if hydration is client:only proceed to set props.
|
||||
if (!component || !(component.hasAttribute('defer-hydration') || isClientOnly)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Set properties on the LitElement instance for resuming hydration.
|
||||
for (let [name, value] of Object.entries(props)) {
|
||||
// Check if reactive property or class property.
|
||||
if (name in Component.prototype) {
|
||||
(component as any)[name] = value;
|
||||
}
|
||||
}
|
||||
|
||||
// Tell LitElement to resume hydration.
|
||||
component.removeAttribute('defer-hydration');
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue