Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[labs/ssr] Make Lit components less explody in Node #3079

Closed
aomarks opened this issue Jun 23, 2022 · 2 comments · Fixed by #3156
Closed

[labs/ssr] Make Lit components less explody in Node #3079

aomarks opened this issue Jun 23, 2022 · 2 comments · Fixed by #3156
Assignees
@aomarks

Comments

@aomarks
Copy link
Member

aomarks commented Jun 23, 2022

No description provided.

@aomarks aomarks self-assigned this Jun 23, 2022
@augustjk
Copy link
Member

augustjk commented Jul 15, 2022 •
edited

Related #2524 #1213

@justinfagnani justinfagnani changed the title [ssr] Make Lit components less explody in Node [labs/ssr] Make Lit components less explody in Node Jul 17, 2022
@abdonrd
Copy link
Contributor

abdonrd commented Jul 18, 2022

Probably related #2259

@aomarks aomarks mentioned this issue Jul 20, 2022
Merged
aomarks added a commit that referenced this issue Aug 4, 2022
@aomarks
[core/ssr] Add Node builds that don't explode (#3156)
ae6f680 
### 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 |
@augustjk augustjk mentioned this issue Oct 27, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@aomarks aomarks

Labels
None yet
Projects
Lit Project Board
Archived in project
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[core/ssr] Add Node builds that don't explode lit/lit
3 participants
@aomarks @abdonrd @augustjk