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.

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

[core/ssr] Add Node builds that don't explode #3156

Merged
merged 14 commits into from Aug 4, 2022
Merged
7 changes: 7 additions & 0 deletions .changeset/tall-mirrors-notice.md
@@ -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.
2 changes: 2 additions & 0 deletions .eslintignore
Expand Up @@ -62,6 +62,7 @@ packages/lit-element/polyfill-support.*
packages/lit-element/private-ssr-support.*

packages/lit-html/development/
packages/lit-html/node/
packages/lit-html/version-stability-build/
packages/lit-html/directives/
packages/lit-html/node_modules/
Expand Down Expand Up @@ -118,6 +119,7 @@ packages/localize-tools/testdata/*/output/

packages/reactive-element/decorators/
packages/reactive-element/development/
packages/reactive-element/node/
packages/reactive-element/test/
packages/reactive-element/css-tag.*
packages/reactive-element/decorators.*
Expand Down
2 changes: 2 additions & 0 deletions .prettierignore
Expand Up @@ -62,6 +62,7 @@ packages/lit-element/polyfill-support.*
packages/lit-element/private-ssr-support.*

packages/lit-html/development/
packages/lit-html/node/
packages/lit-html/version-stability-build/
packages/lit-html/directives/
packages/lit-html/node_modules/
Expand Down Expand Up @@ -104,6 +105,7 @@ packages/localize-tools/testdata/*/output/

packages/reactive-element/decorators/
packages/reactive-element/development/
packages/reactive-element/node/
packages/reactive-element/test/
packages/reactive-element/css-tag.*
packages/reactive-element/decorators.*
Expand Down
13 changes: 12 additions & 1 deletion packages/lit-element/package.json
Expand Up @@ -104,7 +104,8 @@
"prepublishOnly": "npm run check-version",
"test": "wireit",
"test:dev": "wireit",
"test:prod": "wireit"
"test:prod": "wireit",
"test:node": "wireit"
},
"wireit": {
"build": {
Expand Down Expand Up @@ -198,6 +199,7 @@
"dependencies": [
"test:dev",
"test:prod",
"test:node",
"check-version"
]
},
Expand All @@ -219,6 +221,15 @@
],
"files": [],
"output": []
},
"test:node": {
"command": "node development/test/node-imports.js",
"dependencies": [
"build:ts",
"build:rollup"
],
"files": [],
"output": []
}
},
"files": [
Expand Down
32 changes: 32 additions & 0 deletions packages/lit-element/src/test/node-imports.ts
@@ -0,0 +1,32 @@
/**
* @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')
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make sense to include a version that doesn't use the decorator as well?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

export class MyElement extends LitElement {
override render() {
return html`Hello World`;
}
}
1 change: 1 addition & 0 deletions packages/lit-html/.gitignore
@@ -1,4 +1,5 @@
/development/
/node/
/version-stability-build/
/directives/
/node_modules/
Expand Down
47 changes: 44 additions & 3 deletions packages/lit-html/package.json
Expand Up @@ -15,141 +15,169 @@
"exports": {
".": {
"types": "./development/lit-html.d.ts",
"node": "./node/lit-html.js",
"development": "./development/lit-html.js",
"default": "./lit-html.js"
},
"./async-directive.js": {
"types": "./development/async-directive.d.ts",
"node": "./node/async-directive.js",
"development": "./development/async-directive.js",
"default": "./async-directive.js"
},
"./directive-helpers.js": {
"types": "./development/directive-helpers.d.ts",
"node": "./node/directive-helpers.js",
"development": "./development/directive-helpers.js",
"default": "./directive-helpers.js"
},
"./directive.js": {
"types": "./development/directive.d.ts",
"node": "./node/directive.js",
"development": "./development/directive.js",
"default": "./directive.js"
},
"./directives/async-append.js": {
"types": "./development/directives/async-append.d.ts",
"node": "./node/directives/async-append.js",
"development": "./development/directives/async-append.js",
"default": "./directives/async-append.js"
},
"./directives/async-replace.js": {
"types": "./development/directives/async-replace.d.ts",
"node": "./node/directives/async-replace.js",
"development": "./development/directives/async-replace.js",
"default": "./directives/async-replace.js"
},
"./directives/cache.js": {
"types": "./development/directives/cache.d.ts",
"node": "./node/directives/cache.js",
"development": "./development/directives/cache.js",
"default": "./directives/cache.js"
},
"./directives/choose.js": {
"types": "./development/directives/choose.d.ts",
"node": "./node/directives/choose.js",
"development": "./development/directives/choose.js",
"default": "./directives/choose.js"
},
"./directives/class-map.js": {
"types": "./development/directives/class-map.d.ts",
"node": "./node/directives/class-map.js",
"development": "./development/directives/class-map.js",
"default": "./directives/class-map.js"
},
"./directives/guard.js": {
"types": "./development/directives/guard.d.ts",
"node": "./node/directives/guard.js",
"development": "./development/directives/guard.js",
"default": "./directives/guard.js"
},
"./directives/if-defined.js": {
"types": "./development/directives/if-defined.d.ts",
"node": "./node/directives/if-defined.js",
"development": "./development/directives/if-defined.js",
"default": "./directives/if-defined.js"
},
"./directives/join.js": {
"types": "./development/directives/join.d.ts",
"node": "./node/directives/join.js",
"development": "./development/directives/join.js",
"default": "./directives/join.js"
},
"./directives/keyed.js": {
"types": "./development/directives/keyed.d.ts",
"node": "./node/directives/keyed.js",
"development": "./development/directives/keyed.js",
"default": "./directives/keyed.js"
},
"./directives/live.js": {
"types": "./development/directives/live.d.ts",
"node": "./node/directives/live.js",
"development": "./development/directives/live.js",
"default": "./directives/live.js"
},
"./directives/map.js": {
"types": "./development/directives/map.d.ts",
"node": "./node/directives/map.js",
"development": "./development/directives/map.js",
"default": "./directives/map.js"
},
"./directives/range.js": {
"types": "./development/directives/range.d.ts",
"node": "./node/directives/range.js",
"development": "./development/directives/range.js",
"default": "./directives/range.js"
},
"./directives/ref.js": {
"types": "./development/directives/ref.d.ts",
"node": "./node/directives/ref.js",
"development": "./development/directives/ref.js",
"default": "./directives/ref.js"
},
"./directives/repeat.js": {
"types": "./development/directives/repeat.d.ts",
"node": "./node/directives/repeat.js",
"development": "./development/directives/repeat.js",
"default": "./directives/repeat.js"
},
"./directives/style-map.js": {
"types": "./development/directives/style-map.d.ts",
"node": "./node/directives/style-map.js",
"development": "./development/directives/style-map.js",
"default": "./directives/style-map.js"
},
"./directives/template-content.js": {
"types": "./development/directives/template-content.d.ts",
"node": "./node/directives/template-content.js",
"development": "./development/directives/template-content.js",
"default": "./directives/template-content.js"
},
"./directives/unsafe-html.js": {
"types": "./development/directives/unsafe-html.d.ts",
"node": "./node/directives/unsafe-html.js",
"development": "./development/directives/unsafe-html.js",
"default": "./directives/unsafe-html.js"
},
"./directives/unsafe-svg.js": {
"types": "./development/directives/unsafe-svg.d.ts",
"node": "./node/directives/unsafe-svg.js",
"development": "./development/directives/unsafe-svg.js",
"default": "./directives/unsafe-svg.js"
},
"./directives/until.js": {
"types": "./development/directives/until.d.ts",
"node": "./node/directives/until.js",
"development": "./development/directives/until.js",
"default": "./directives/until.js"
},
"./directives/when.js": {
"types": "./development/directives/when.d.ts",
"node": "./node/directives/when.js",
"development": "./development/directives/when.js",
"default": "./directives/when.js"
},
"./experimental-hydrate.js": {
"types": "./development/experimental-hydrate.d.ts",
"node": "./node/experimental-hydrate.js",
"development": "./development/experimental-hydrate.js",
"default": "./experimental-hydrate.js"
},
"./polyfill-support.js": {
"types": "./development/polyfill-support.d.ts",
"node": "./node/polyfill-support.js",
"development": "./development/polyfill-support.js",
"default": "./polyfill-support.js"
},
"./private-ssr-support.js": {
"types": "./development/private-ssr-support.d.ts",
"node": "./node/private-ssr-support.js",
"development": "./development/private-ssr-support.js",
"default": "./private-ssr-support.js"
},
"./static.js": {
"types": "./development/static.d.ts",
"node": "./node/static.js",
"development": "./development/static.js",
"default": "./static.js"
}
Expand All @@ -165,7 +193,8 @@
"prepublishOnly": "npm run check-version",
"test": "wireit",
"test:dev": "wireit",
"test:prod": "wireit"
"test:prod": "wireit",
"test:node": "wireit"
},
"files": [
"/async-directive.{d.ts,d.ts.map,js,js.map}",
Expand All @@ -178,7 +207,8 @@
"/static.{d.ts,d.ts.map,js,js.map}",
"/development/",
"!/development/test/",
"/directives/"
"/directives/",
"/node/"
],
"wireit": {
"build": {
Expand Down Expand Up @@ -240,7 +270,8 @@
"test/*_test.html",
"development/test/*_test.html",
"test/polyfill-support/*_test.html",
"development/test/polyfill-support/*_test.html"
"development/test/polyfill-support/*_test.html",
"node/"
]
},
"build:version-stability-test": {
Expand Down Expand Up @@ -281,6 +312,7 @@
"dependencies": [
"test:dev",
"test:prod",
"test:node",
"check-version"
]
},
Expand All @@ -303,6 +335,15 @@
],
"files": [],
"output": []
},
"test:node": {
"command": "node development/test/node-imports.js",
"dependencies": [
"build:ts",
"build:rollup"
],
"files": [],
"output": []
}
},
"dependencies": {
Expand Down
1 change: 1 addition & 0 deletions packages/lit-html/rollup.config.js
Expand Up @@ -45,6 +45,7 @@ export const defaultConfig = (options = {}) =>
file: 'polyfill-support',
},
],
nodeBuild: true,
...options,
});

Expand Down