[Lit] Fix hydration not having the same reactive values as server (#6080)

* Fix lit hydration not having the same reactive values

* add changeset

* add clientEntrypoint to package exports

* update tests

* add changeset

* only add defer-hydration when strictly necessary

* remove second changest

* fix test typos

2 files changed, 27 insertions, 0 deletions

diff --git a/packages/integrations/lit/src/client.ts b/packages/integrations/lit/src/client.ts
new file mode 100644
index 000000000..00f126e34
--- /dev/null
+++ b/packages/integrations/lit/src/client.ts
@@ -0,0 +1,25 @@
+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');
+	};
diff --git a/packages/integrations/lit/src/index.ts b/packages/integrations/lit/src/index.ts
index 5b428ef8d..de6d5b0f9 100644
--- a/packages/integrations/lit/src/index.ts
+++ b/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({