[Lit] Fix hydration not having the same reactive values as server

.changeset/nine-tomatoes-itch.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/lit': major
+---
+
+Serialize Lit JSX bindings in HTML for hydration

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

@@ -2,7 +2,7 @@
 import MyCounter from '../components/Counter.js';
 
 const someProps = {
-	count: 0,
+	count: 10,
 };
 ---
 

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

@@ -2,7 +2,7 @@
 import MyCounter from '../components/Counter.js';
 
 const someProps = {
-	count: 0,
+	count: 10,
 };
 ---
 

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

@@ -2,7 +2,7 @@
 import MyCounter from '../components/Counter.js';
 
 const someProps = {
-	count: 0,
+	count: 10,
 };
 ---
 

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

@@ -32,12 +32,12 @@ test.describe('Lit components', () => {
 			await expect(counter).toHaveCount(1);
 
 			const count = counter.locator('p');
-			await expect(count, 'initial count is 0').toHaveText('Count: 0');
+			await expect(count, 'initial count is 10').toHaveText('Count: 10');
 
 			const inc = counter.locator('button');
 			await inc.click();
 
-			await expect(count, 'count incremented by 1').toHaveText('Count: 1');
+			await expect(count, 'count incremented by 1').toHaveText('Count: 11');
 		});
 
 		t('client:load', async ({ page, astro }) => {
@@ -47,12 +47,12 @@ test.describe('Lit components', () => {
 			await expect(counter, 'component is visible').toBeVisible();
 
 			const count = counter.locator('p');
-			await expect(count, 'initial count is 0').toHaveText('Count: 0');
+			await expect(count, 'initial count is 10').toHaveText('Count: 10');
 
 			const inc = counter.locator('button');
 			await inc.click();
 
-			await expect(count, 'count incremented by 1').toHaveText('Count: 1');
+			await expect(count, 'count incremented by 1').toHaveText('Count: 11');
 		});
 
 		t('client:visible', async ({ page, astro }) => {
@@ -64,12 +64,12 @@ test.describe('Lit components', () => {
 			await expect(counter, 'component is visible').toBeVisible();
 
 			const count = counter.locator('p');
-			await expect(count, 'initial count is 0').toHaveText('Count: 0');
+			await expect(count, 'initial count is 10').toHaveText('Count: 10');
 
 			const inc = counter.locator('button');
 			await inc.click();
 
-			await expect(count, 'count incremented by 1').toHaveText('Count: 1');
+			await expect(count, 'count incremented by 1').toHaveText('Count: 11');
 		});
 
 		t('client:media', async ({ page, astro }) => {
@@ -79,18 +79,18 @@ test.describe('Lit components', () => {
 			await expect(counter, 'component is visible').toBeVisible();
 
 			const count = counter.locator('p');
-			await expect(count, 'initial count is 0').toHaveText('Count: 0');
+			await expect(count, 'initial count is 10').toHaveText('Count: 10');
 
 			const inc = counter.locator('button');
 			await inc.click();
 
-			await expect(count, 'component not hydrated yet').toHaveText('Count: 0');
+			await expect(count, 'component not hydrated yet').toHaveText('Count: 10');
 
 			// Reset the viewport to hydrate the component (max-width: 50rem)
 			await page.setViewportSize({ width: 414, height: 1124 });
 
 			await inc.click();
-			await expect(count, 'count incremented by 1').toHaveText('Count: 1');
+			await expect(count, 'count incremented by 1').toHaveText('Count: 11');
 		});
 
 		t.skip('HMR', async ({ page, astro }) => {

packages/integrations/lit/package.json

@@ -23,6 +23,7 @@
     ".": "./dist/index.js",
     "./server.js": "./server.js",
     "./client-shim.js": "./client-shim.js",
+    "./dist/client.js": "./dist/client.js",
     "./hydration-support.js": "./hydration-support.js",
     "./package.json": "./package.json"
   },

packages/integrations/lit/server.js

@@ -49,7 +49,7 @@ function* render(Component, attrs, slots) {
 
 	instance.connectedCallback();
 
-	yield `<${tagName}`;
+	yield `<${tagName} defer-hydration`;
 	yield* instance.renderAttributes();
 	yield `>`;
 	const shadowContents = instance.renderShadow({});

packages/integrations/lit/src/client.ts

@@ -0,0 +1,22 @@
+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 (!component) {
+			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');
+	};

packages/integrations/lit/src/index.ts

@@ -5,6 +5,7 @@ function getViteConfiguration() {
 	return {
 		optimizeDeps: {
 			include: [
+				'@astrojs/lit/dist/client.js',
 				'@astrojs/lit/client-shim.js',
 				'@astrojs/lit/hydration-support.js',
 				'@webcomponents/template-shadowroot/template-shadowroot.js',
@@ -34,6 +35,7 @@ export default function (): AstroIntegration {
 				addRenderer({
 					name: '@astrojs/lit',
 					serverEntrypoint: '@astrojs/lit/server.js',
+					clientEntrypoint: '@astrojs/lit/dist/client.js',
 				});
 				// Update the vite configuration.
 				updateConfig({

packages/integrations/lit/test/server.test.js

@@ -38,7 +38,7 @@ describe('renderToStaticMarkup', () => {
 		customElements.define(tagName, class extends LitElement {});
 		const render = await renderToStaticMarkup(tagName);
 		expect(render).to.deep.equal({
-			html: `<${tagName}><template shadowroot="open"><!--lit-part--><!--/lit-part--></template></${tagName}>`,
+			html: `<${tagName} defer-hydration><template shadowroot="open"><!--lit-part--><!--/lit-part--></template></${tagName}>`,
 		});
 	});