@astrojs/lit
Advanced tools
Comparing version 1.3.0 to 2.0.0
# @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 @@ |
{ | ||
"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": { |
@@ -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 @@ |
@@ -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); | ||
}; |
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'; |
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, |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis 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 riskThis module accesses the network.
Found 1 instance in 1 package
40484
572
162
0
5
+ 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