@astrojs/lit - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

CHANGELOG.md

 # @astrojs/lit
 
+## 1.1.2
+
+### Patch Changes
+
+- [#6080](https://github.com/withastro/astro/pull/6080) [`0db220415`](https://github.com/withastro/astro/commit/0db22041531d981a813a07f4c4e00cfb7ebddd51) Thanks [@e111077](https://github.com/e111077)! - Fixes Lit hydration not having the same reactive values as server (losing state upon hydration)
+
+- [#6055](https://github.com/withastro/astro/pull/6055) [`2567aa48b`](https://github.com/withastro/astro/commit/2567aa48bba8751cf7e10429555f1e85830c9169) Thanks [@e111077](https://github.com/e111077)! - Add forwards compatibility for streaming Declarative Shadow DOM
+
 ## 1.1.1
@@ -4,0 +12,0 @@

client-shim.js

@@ -11,5 +11,9 @@ async function polyfill() {
 const polyfillCheckEl = new DOMParser()
-	.parseFromString(`<p><template shadowroot="open"></template></p>`, 'text/html', {
-		includeShadowRoots: true,
-	})
+	.parseFromString(
+		`<p><template shadowroot="open" shadowrootmode="open"></template></p>`,
+		'text/html',
+		{
+			includeShadowRoots: true,
+		}
+	)
 	.querySelector('p');
@@ -16,0 +20,0 @@

client-shim.min.js

@@ -11,3 +11,3 @@ /** @license Copyright 2020 Google LLC (BSD-3-Clause) */
 		let t = document.createElement('div');
-		(t.innerHTML = '<div><template shadowroot="open"></template></div>'),
+		(t.innerHTML = '<div><template shadowroot="open" shadowrootmode="open"></template></div>'),
 			(d = !!t.firstElementChild.shadowRoot);
@@ -84,6 +84,10 @@ }
 var x = new DOMParser()
-	.parseFromString('<p><template shadowroot="open"></template></p>', 'text/html', {
-		includeShadowRoots: !0,
-	})
+	.parseFromString(
+		'<p><template shadowroot="open" shadowrootmode="open"></template></p>',
+		'text/html',
+		{
+			includeShadowRoots: !0,
+		}
+	)
 	.querySelector('p');
 (!x || !x.shadowRoot) && g();

dist/index.js

@@ -6,2 +6,3 @@ import { readFileSync } from "node:fs";
       include: [
+        "@astrojs/lit/dist/client.js",
         "@astrojs/lit/client-shim.js",
@@ -31,3 +32,4 @@ "@astrojs/lit/hydration-support.js",
           name: "@astrojs/lit",
-          serverEntrypoint: "@astrojs/lit/server.js"
+          serverEntrypoint: "@astrojs/lit/server.js",
+          clientEntrypoint: "@astrojs/lit/dist/client.js"
         });
@@ -34,0 +36,0 @@ updateConfig({

package.json

 {
   "name": "@astrojs/lit",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Use Lit components within Astro",
@@ -26,2 +26,3 @@ "type": "module",
     "./client-shim.js": "./client-shim.js",
+    "./dist/client.js": "./dist/client.js",
     "./hydration-support.js": "./hydration-support.js",
@@ -35,3 +36,3 @@ "./package.json": "./package.json"
   "devDependencies": {
-    "astro": "2.0.4",
+    "astro": "2.0.5",
     "astro-scripts": "0.0.10",
@@ -38,0 +39,0 @@ "chai": "^4.3.6",

server.js

@@ -39,6 +39,14 @@ import './server-shim.js';
 	const Ctr = getCustomElementConstructor(tagName);
+	let shouldDeferHydration = false;
+
 	if (attrs) {
 		for (let [name, value] of Object.entries(attrs)) {
-			// check if this is a reactive property
-			if (name in Ctr.prototype) {
+			const isReactiveProperty = name in Ctr.prototype;
+			const isReflectedReactiveProperty = Ctr.elementProperties.get(name)?.reflect;
+
+			// Only defer hydration if we are setting a reactive property that cannot
+			// be reflected / serialized as a property.
+			shouldDeferHydration ||= isReactiveProperty && !isReflectedReactiveProperty;
+
+			if (isReactiveProperty) {
 				instance.setProperty(name, value);
@@ -53,3 +61,3 @@ } else {
 
-	yield `<${tagName}`;
+	yield `<${tagName}${shouldDeferHydration ? ' defer-hydration' : ''}`;
 	yield* instance.renderAttributes();
@@ -59,3 +67,3 @@ yield `>`;
 	if (shadowContents !== undefined) {
-		yield '<template shadowroot="open">';
+		yield '<template shadowroot="open" shadowrootmode="open">';
 		yield* shadowContents;
@@ -62,0 +70,0 @@ yield '</template>';

src/index.ts

@@ -8,2 +8,3 @@ import type { AstroIntegration } from 'astro';
 			include: [
+				'@astrojs/lit/dist/client.js',
 				'@astrojs/lit/client-shim.js',
@@ -38,2 +39,3 @@ '@astrojs/lit/hydration-support.js',
 					serverEntrypoint: '@astrojs/lit/server.js',
+					clientEntrypoint: '@astrojs/lit/dist/client.js',
 				});
@@ -40,0 +42,0 @@ // Update the vite configuration.

test/server.test.js

@@ -41,3 +41,3 @@ import { expect } from 'chai';
 		expect(render).to.deep.equal({
-			html: `<${tagName}><template shadowroot="open"><!--lit-part--><!--/lit-part--></template></${tagName}>`,
+			html: `<${tagName}><template shadowroot="open" shadowrootmode="open"><!--lit-part--><!--/lit-part--></template></${tagName}>`,
 		});
@@ -44,0 +44,0 @@ });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

33398

increased by8.76%

Number of package files

19

increased by18.75%

Lines of code

468

increased by12.5%

No dependency changes