@astrojs/lit - npm Package Compare versions

Comparing version 1.3.0 to 2.0.0

CHANGELOG.md

 # @astrojs/lit
 
+## 2.0.0
+
+### Major Changes
+
+- [#6681](https://github.com/withastro/astro/pull/6681) [`4b077318f`](https://github.com/withastro/astro/commit/4b077318fbc21c4350cc21c380d96b54d302759c) Thanks [@e111077](https://github.com/e111077)! - Update to use `@lit-labs/ssr@^3`
+  **[BREAKING]** DOM shim required for Lit SSR has been greatly reduced. `window`, `document`, and other objects are no longer available in global. Most SSR-ready component code should not be affected but, if so, they can be fixed with optional chaining or by using the `isServer` environment checker from the `lit` package. See [lit.dev docs on authoring components for SSR].(https://lit.dev/docs/ssr/authoring/#browser-only-code)
+  **[BREAKING]** Adds compatibility with `lit@2.7.0` hydration behavior. Do not update if you're using `lit@2.6.1` or lower.
+  Includes support for template[shadowrootmode] support.
+
 ## 1.3.0
@@ -4,0 +13,0 @@

package.json

 {
   "name": "@astrojs/lit",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "description": "Use Lit components within Astro",
@@ -31,11 +31,12 @@ "type": "module",
   "dependencies": {
-    "@lit-labs/ssr": "^2.2.0",
+    "@lit-labs/ssr": "^3.1.0",
+    "@lit-labs/ssr-dom-shim": "^1.1.0",
     "parse5": "^7.1.2"
   },
   "devDependencies": {
-    "astro": "2.1.0",
+    "astro": "2.1.9",
     "astro-scripts": "0.0.14",
     "chai": "^4.3.6",
     "cheerio": "^1.0.0-rc.11",
-    "lit": "^2.2.5",
+    "lit": "^2.7.0",
     "mocha": "^9.2.2",
@@ -45,4 +46,4 @@ "sass": "^1.52.2"
   "peerDependencies": {
-    "@webcomponents/template-shadowroot": "^0.1.0",
-    "lit": "^2.1.3"
+    "@webcomponents/template-shadowroot": "^0.2.1",
+    "lit": "^2.7.0"
   },
@@ -49,0 +50,0 @@ "scripts": {

README.md

@@ -144,2 +144,10 @@ # @astrojs/lit 🔥
 
+### Strict package managers
+
+When using a [strict package manager](https://pnpm.io/pnpm-vs-npm#npms-flat-tree) like `pnpm`, you may get an error such as `ReferenceError: module is not defined` when running your site. To fix this, hoist Lit dependencies with an `.npmrc` file:
+
+```ini title=".npmrc"
+public-hoist-pattern[]=*lit* 
+```
+
 ### Limitations
@@ -146,0 +154,0 @@

server-shim.js

@@ -1,20 +0,35 @@
-import { installWindowOnGlobal } from '@lit-labs/ssr/lib/dom-shim.js';
+import { customElements as litCE, HTMLElement as litShimHTMLElement } from '@lit-labs/ssr-dom-shim';
 
-if (typeof fetch === 'function') {
-	const _fetch = fetch;
-	installWindowOnGlobal();
-	globalThis.fetch = window.fetch = _fetch;
-} else {
-	installWindowOnGlobal();
+// Something at build time injects document.currentScript = undefined instead of
+// document.currentScript = null. This causes Sass build to fail because it
+// seems to be expecting `=== null`. This set to `undefined` doesn't seem to be
+// caused by Lit and only happens at build / test time, but not in dev or
+// preview time.
+if (globalThis.document) {
+	document.currentScript = null;
 }
 
-window.global = window;
-document.getElementsByTagName = () => [];
-// See https://github.com/lit/lit/issues/2393
-document.currentScript = null;
+if (globalThis.HTMLElement) {
+	// Seems Astro's Element shim does nothing when `.setAttribute` is called
+	// and subsequently `.getAttribute` is called. Causes Lit to not SSR attrs
+	globalThis.HTMLElement = litShimHTMLElement;
+}
 
-const ceDefine = customElements.define;
+// Astro seems to have a DOM shim and the only real difference that we need out
+// of the Lit DOM shim is that the Lit DOM shim reads
+// `HTMLElement.observedAttributes` which is meant to trigger
+// `ReactiveElement.finalize()`. So this is the only thing we will re-shim since
+// Lit will try to respect other global DOM shims.
+globalThis.customElements = litCE;
+
+const litCeDefine = customElements.define;
+
+// We need to patch customElements.define to keep track of the tagName on the
+// class itself so that we can transform JSX custom element class definintion to
+// a DSD string on the server, because there is no way to get the tagName from a
+// CE class otherwise. Not an issue on client:only because the browser supports
+// appending a class instance directly to the DOM.
 customElements.define = function (tagName, Ctr) {
 	Ctr[Symbol.for('tagName')] = tagName;
-	return ceDefine.call(this, tagName, Ctr);
+	return litCeDefine.call(this, tagName, Ctr);
 };

server.js

 import './server-shim.js';
-import '@lit-labs/ssr/lib/render-lit-html.js';
 import { LitElementRenderer } from '@lit-labs/ssr/lib/lit-element-renderer.js';
@@ -4,0 +3,0 @@ import * as parse5 from 'parse5';

test/server.test.js

 import { expect } from 'chai';
+import { LitElement, html } from 'lit';
+// Must come after lit import because @lit/reactive-element defines
+// globalThis.customElements which the server shim expects to be defined.
 import server from '../server.js';
-import { LitElement, html } from 'lit';
 import * as cheerio from 'cheerio';
@@ -15,2 +17,6 @@
 		const tagName = 'non-lit-component';
+		// Lit no longer shims HTMLElement globally, so we need to do it ourselves.
+		if (!globalThis.HTMLElement) {
+			globalThis.HTMLElement = class {};
+		}
 		customElements.define(tagName, class TestComponent extends HTMLElement {});
@@ -89,3 +95,3 @@ expect(await check(tagName)).to.equal(false);
 	it('should render DSD attributes based on shadowRootOptions', async () => {
-		const tagName = 'lit-component';
+		const tagName = 'shadow-root-options-component';
 		customElements.define(
@@ -92,0 +98,0 @@ tagName,

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

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

40484

increased by6.87%

Lines of code

572

increased by3.25%

Number of lines in readme file

162

increased by5.19%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Added@lit-labs/ssr-dom-shim@^1.1.0

• + Added@lit-labs/ssr@3.2.2(transitive)

• + Added@parse5/tools@0.3.0(transitive)

• + Added@webcomponents/template-shadowroot@0.2.1(transitive)

• - Removed@lit-labs/ssr@2.3.0(transitive)

• - Removed@parse5/tools@0.1.0(transitive)

• - Removed@webcomponents/template-shadowroot@0.1.0(transitive)

• Updated@lit-labs/ssr@^3.1.0