[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

1 files changed, 25 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');
+	};