Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[core/ssr] Add Node builds that don't explode (#3156)
### Background Before this PR, importing Lit with Node causes errors such as `window is not defined`. The only way to load Lit was to first ensure that the `dom-shim.js` module provided by the `@lit-labs/ssr` package was loaded, which defines `window` plus APIs like `HTMLElement` and `customElements`. This meant that using Lit in frameworks such as Next did not work out-of-the-box _even when only client-side rendering is needed_. ### This change After this PR, Lit can be imported from Node without errors, and custom elements can be defined as no-ops. This doesn't remove the need for loading the DOM shim shim when SSR is actually needed, but it does give us compatibility at least for client-side rendering in frameworks like Next, without the user needing to do anything special. This works by adding a Node-specific Rollup build and a `node` export condition to `lit-html` and `@lit/reactive-element`. Neither `lit-element` nor `lit` need a Node build, because only the underlying 2 libraries currently need Node-specific behavior. This only defines `customElements` as new globals. It does not define `window`, `HTMLElement`, or any other APIs. This way, we won't affect the behavior of libraries that detect whether they are in Node vs the browser by checking for a `window` global. For testing, I've added a `node-imports.ts` file to each package, and added a new `node:test` script which executes that module with Node. This confirms that Node doesn't crash on import. Fixes #3079 ### Size This actually slightly drops the size of the main `lit-html.js` and `reactive-element.js` production build files: | File | Old size (raw/gzip/brotli) | New size (raw/gzip/brotli) | | ------------------- | -------------- | -------------- | | lit-html.js | 8.68 / 3.45 / 3.13 | 8.02 / 3.38 / 3.07 | | reactive-element.js | 5.97 / 2.17 / 1.93 | 5.95 / 2.17 / 1.92 |
- Loading branch information
Showing
22 changed files
with
390 additions
and
42 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| 'lit': minor | ||
| 'lit-html': minor | ||
| '@lit/reactive-element': minor | ||
| --- | ||
|
|
||
| Lit and its underlying libraries can now be imported directly from Node without crashing, without the need to load the @lit-labs/ssr dom-shim library. Note that actually rendering from a Node context still requires the @lit-labs/ssr dom-shim, and the appropriate integration between @lit-labs/ssr and your framework/tool. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| /** | ||
| * @license | ||
| * Copyright 2022 Google LLC | ||
| * SPDX-License-Identifier: BSD-3-Clause | ||
| */ | ||
|
|
||
| // This file will be loaded by Node from the node:test script to verify that all | ||
| // exports of this package can be imported without crashing in Node. | ||
|
|
||
| import 'lit-element'; | ||
| import 'lit-element/experimental-hydrate-support.js'; | ||
| import 'lit-element/private-ssr-support.js'; | ||
| import 'lit-element/decorators.js'; | ||
| import 'lit-element/decorators/custom-element.js'; | ||
| import 'lit-element/decorators/event-options.js'; | ||
| import 'lit-element/decorators/state.js'; | ||
| import 'lit-element/decorators/property.js'; | ||
| import 'lit-element/decorators/query.js'; | ||
| import 'lit-element/decorators/query-all.js'; | ||
| import 'lit-element/decorators/query-assigned-elements.js'; | ||
| import 'lit-element/decorators/query-assigned-nodes.js'; | ||
| import 'lit-element/decorators/query-async.js'; | ||
|
|
||
| import {LitElement, html} from 'lit-element'; | ||
| import {customElement} from 'lit-element/decorators.js'; | ||
|
|
||
| @customElement('my-element') | ||
| export class MyElement extends LitElement { | ||
| override render() { | ||
| return html`Hello World`; | ||
| } | ||
| } | ||
|
|
||
| export class MyOtherElement extends LitElement { | ||
| override render() { | ||
| return html`Hello World`; | ||
| } | ||
| } | ||
| customElements.define('my-other-element', MyOtherElement); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,5 @@ | ||
| /development/ | ||
| /node/ | ||
| /version-stability-build/ | ||
| /directives/ | ||
| /node_modules/ | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.