From 21313077669c19b3d631a50825b8a01dae1dd0d4 Mon Sep 17 00:00:00 2001 From: Augustine Kim Date: Thu, 29 Sep 2022 15:59:55 -0700 Subject: [PATCH] [lit-html] Add `isServer` environment checker module (#3318) Adds an `isServer` variable export to `lit` and `lit-html/is-server.js` which will be `true` in Node and `false` in the browser. This can be used when authoring components to change behavior based on whether or not the component is executing in an SSR context. --- .changeset/eight-hairs-run.md | 6 +++++ .eslintignore | 1 + .prettierignore | 1 + packages/lit-html/.gitignore | 1 + packages/lit-html/package.json | 8 +++++++ packages/lit-html/rollup.config.js | 1 + packages/lit-html/src/is-server.ts | 24 ++++++++++++++++++++ packages/lit-html/src/test/is-server_test.ts | 14 ++++++++++++ packages/lit-html/src/test/node-imports.ts | 4 ++++ packages/lit/src/index.ts | 1 + packages/lit/src/test/node-imports.ts | 4 ++++ 11 files changed, 65 insertions(+) create mode 100644 .changeset/eight-hairs-run.md create mode 100644 packages/lit-html/src/is-server.ts create mode 100644 packages/lit-html/src/test/is-server_test.ts diff --git a/.changeset/eight-hairs-run.md b/.changeset/eight-hairs-run.md new file mode 100644 index 0000000000..1c91943bdd --- /dev/null +++ b/.changeset/eight-hairs-run.md @@ -0,0 +1,6 @@ +--- +'lit': minor +'lit-html': minor +--- + +Adds an `isServer` variable export to `lit` and `lit-html/is-server.js` which will be `true` in Node and `false` in the browser. This can be used when authoring components to change behavior based on whether or not the component is executing in an SSR context. diff --git a/.eslintignore b/.eslintignore index 7c51e12262..80b03fdee2 100644 --- a/.eslintignore +++ b/.eslintignore @@ -75,6 +75,7 @@ packages/lit-html/async-directive.* packages/lit-html/polyfill-support.* packages/lit-html/private-ssr-support.* packages/lit-html/static.* +packages/lit-html/is-server.* packages/lit-starter-js/node_modules/* packages/lit-starter-js/docs/* diff --git a/.prettierignore b/.prettierignore index 1371f4b5d5..48ce8cf643 100644 --- a/.prettierignore +++ b/.prettierignore @@ -75,6 +75,7 @@ packages/lit-html/async-directive.* packages/lit-html/polyfill-support.* packages/lit-html/private-ssr-support.* packages/lit-html/static.* +packages/lit-html/is-server.* packages/lit-starter-js/node_modules/ packages/lit-starter-js/**/custom-elements.json diff --git a/packages/lit-html/.gitignore b/packages/lit-html/.gitignore index 843b4373d0..f3be24dbde 100644 --- a/packages/lit-html/.gitignore +++ b/packages/lit-html/.gitignore @@ -12,3 +12,4 @@ /polyfill-support.* /private-ssr-support.* /static.* +/is-server.* diff --git a/packages/lit-html/package.json b/packages/lit-html/package.json index 6f53ef2a10..aa8cd20918 100644 --- a/packages/lit-html/package.json +++ b/packages/lit-html/package.json @@ -180,6 +180,12 @@ "node": "./node/static.js", "development": "./development/static.js", "default": "./static.js" + }, + "./is-server.js": { + "types": "./development/is-server.d.ts", + "node": "./node/is-server.js", + "development": "./development/is-server.js", + "default": "./is-server.js" } }, "scripts": { @@ -205,6 +211,7 @@ "/polyfill-support.{d.ts,d.ts.map,js,js.map}", "/private-ssr-support.{d.ts,d.ts.map,js,js.map}", "/static.{d.ts,d.ts.map,js,js.map}", + "/is-server.{d.ts,d.ts.map,js,js.map}", "/development/", "!/development/test/", "/directives/", @@ -266,6 +273,7 @@ "polyfill-support.js{,.map}", "private-ssr-support.js{,.map}", "static.js{,.map}", + "is-server.js{,.map}", "directives/*.js{,.map}", "test/*_test.html", "development/test/*_test.html", diff --git a/packages/lit-html/rollup.config.js b/packages/lit-html/rollup.config.js index 1efc527298..bab8c9bada 100644 --- a/packages/lit-html/rollup.config.js +++ b/packages/lit-html/rollup.config.js @@ -39,6 +39,7 @@ export const defaultConfig = (options = {}) => 'experimental-hydrate', 'private-ssr-support', 'polyfill-support', + 'is-server', ], bundled: [ { diff --git a/packages/lit-html/src/is-server.ts b/packages/lit-html/src/is-server.ts new file mode 100644 index 0000000000..0513962a91 --- /dev/null +++ b/packages/lit-html/src/is-server.ts @@ -0,0 +1,24 @@ +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ + +/** + * @fileoverview + * + * This file exports a boolean const whose value will depend on what environment + * the module is being imported from. + */ + +const NODE_MODE = false; + +/** + * A boolean that will be `true` in server environments like Node, and `false` + * in browser environments. Note that your server environment or toolchain must + * support the `"node"` export condition for this to be `true`. + * + * This can be used when authoring components to change behavior based on + * whether or not the component is executing in an SSR context. + */ +export const isServer = NODE_MODE; diff --git a/packages/lit-html/src/test/is-server_test.ts b/packages/lit-html/src/test/is-server_test.ts new file mode 100644 index 0000000000..915dd6ca2f --- /dev/null +++ b/packages/lit-html/src/test/is-server_test.ts @@ -0,0 +1,14 @@ +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ + +import {isServer} from 'lit-html/is-server.js'; +import {assert} from '@esm-bundle/chai'; + +suite('is-server', () => { + test('isServer is false', () => { + assert.strictEqual(isServer, false); + }); +}); diff --git a/packages/lit-html/src/test/node-imports.ts b/packages/lit-html/src/test/node-imports.ts index 2c3c953516..2a986c0acc 100644 --- a/packages/lit-html/src/test/node-imports.ts +++ b/packages/lit-html/src/test/node-imports.ts @@ -35,3 +35,7 @@ import 'lit-html/static.js'; import 'lit-html/experimental-hydrate.js'; import 'lit-html/private-ssr-support.js'; import 'lit-html/polyfill-support.js'; + +import assert from 'node:assert/strict'; +import {isServer} from 'lit-html/is-server.js'; +assert.strictEqual(isServer, true, 'Expected isServer to be true'); diff --git a/packages/lit/src/index.ts b/packages/lit/src/index.ts index f6b8dee0f9..4030c802e5 100644 --- a/packages/lit/src/index.ts +++ b/packages/lit/src/index.ts @@ -11,3 +11,4 @@ import '@lit/reactive-element'; import 'lit-html'; export * from 'lit-element/lit-element.js'; +export * from 'lit-html/is-server.js'; diff --git a/packages/lit/src/test/node-imports.ts b/packages/lit/src/test/node-imports.ts index d443a495d1..37157ecde6 100644 --- a/packages/lit/src/test/node-imports.ts +++ b/packages/lit/src/test/node-imports.ts @@ -45,3 +45,7 @@ import 'lit/html.js'; import 'lit/experimental-hydrate-support.js'; import 'lit/experimental-hydrate.js'; import 'lit/static-html.js'; + +import assert from 'node:assert/strict'; +import {isServer} from 'lit'; +assert.strictEqual(isServer, true, 'Expected isServer to be true');