[Lit] add client:only functionality to Lit integration (#6111)

* [Lit] add `client:only` functionality to Lit integration

* add changeset

* update lit changeset to minor

.changeset/good-wolves-remain.md

@@ -0,0 +1,6 @@
+---
+'@astrojs/lit': minor
+'astro': patch
+---
+
+Implement client:only functionality in Lit and add lit to the client:only warning

packages/astro/e2e/fixtures/lit-component/src/components/ClientOnlyComponent.js

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

packages/astro/e2e/fixtures/lit-component/src/pages/index.astro

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

packages/astro/e2e/lit-component.test.js

@@ -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('/'));
 

packages/astro/src/runtime/server/render/component.ts

@@ -39,6 +39,7 @@ function guessRenderers(componentUrl?: string): string[] {
 				'@astrojs/solid-js',
 				'@astrojs/vue',
 				'@astrojs/svelte',
+				'@astrojs/lit',
 			];
 	}
 }

packages/integrations/lit/src/client.ts

@@ -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).
+ * Adds the appropriate slot attribute to each top-level node in the given HTML
-	const component = element.children[0] as HTMLElement;
+ * string.
-
+ *
-	// If there is no deferral of hydration, then all reactive properties are
+ * @example
-	// already serialzied as reflected attributes, or no reactive props were set
+ * addSlotAttrsToHtmlString('foo', '<div>bar</div><div>baz</div>');
-	if (!component || !component.hasAttribute('defer-hydration')) {
+ * // '<div slot="foo">bar</div><div slot="foo">baz</div>'
-		return;
+ *
-	}
+ * @param slotName Name of slot to apply to HTML string.
-
+ * @param html Stringified HTML that should be projected into the given slotname.
-	// Set properties on the LitElement instance for resuming hydration.
+ * @returns A stringified HTML string with the slot attribute applied to each top-level node.
-	for (let [name, value] of Object.entries(props)) {
+ */
-		// Check if reactive property or class property.
+const addSlotAttrsToHtmlString = (slotName: string, html: string) => {
-		if (name in Component.prototype) {
+	const templ = document.createElement('template');
-			(component as any)[name] = value;
+	templ.innerHTML = html;
-		}
+	Array.from(templ.content.children).forEach((node) => {
-	}
+		node.setAttribute('slot', slotName);
-
+	});
-	// Tell LitElement to resume hydration.
+	return templ.innerHTML;
-	component.removeAttribute('defer-hydration');
 };
+
+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');
+	};