[reactive-element] Fix Node build auto-shimming of HTMLElement to r…

…espect existing global shim (#3561) * Update rollup plugin-replace * Add changesets * Add tests for dom shim * Update .changeset/tidy-lamps-rest.md Co-authored-by: Alexander Marks <aomarks@google.com> Co-authored-by: Alexander Marks <aomarks@google.com>
lit · Jan 12, 2023 · e5c254e · e5c254e
1 parent 65e5665
commit e5c254e
Show file tree

Hide file tree

Showing 11 changed files with 175 additions and 20 deletions.
diff --git a/.changeset/thick-wasps-love.md b/.changeset/thick-wasps-love.md
@@ -0,0 +1,6 @@
+---
+'@lit/lit-starter-js': patch
+'@lit/lit-starter-ts': patch
+---
+
+Update dependency `@rollup/plugin-replace`
diff --git a/.changeset/tidy-lamps-rest.md b/.changeset/tidy-lamps-rest.md
@@ -0,0 +1,6 @@
+---
+'lit': patch
+'@lit/reactive-element': patch
+---
+
+Fix built-in shimming of `HTMLElement` for Node build of `reactive-element` to respect existing `HTMLElement` in global
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -185,7 +185,7 @@
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-inject": "^5.0.2",
     "@rollup/plugin-node-resolve": "^13.2.1",
-    "@rollup/plugin-replace": "^4.0.0",
+    "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-virtual": "^2.1.0",
     "@types/chai": "^4.3.1",
     "@types/mocha": "^9.1.1",

diff --git a/packages/lit-starter-js/package.json b/packages/lit-starter-js/package.json
@@ -48,7 +48,7 @@
     "@custom-elements-manifest/analyzer": "^0.6.3",
     "@open-wc/testing": "^3.1.5",
     "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-replace": "^4.0.0",
+    "@rollup/plugin-replace": "^5.0.2",
     "@web/dev-server": "^0.1.31",
     "@web/dev-server-legacy": "^1.0.0",
     "@web/test-runner": "^0.13.27",

diff --git a/packages/lit-starter-ts/package.json b/packages/lit-starter-ts/package.json
@@ -49,7 +49,7 @@
     "@custom-elements-manifest/analyzer": "^0.6.3",
     "@open-wc/testing": "^3.1.5",
     "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-replace": "^4.0.0",
+    "@rollup/plugin-replace": "^5.0.2",
     "@typescript-eslint/eslint-plugin": "^5.25.0",
     "@typescript-eslint/parser": "^5.25.0",
     "@web/dev-server": "^0.1.31",

diff --git a/packages/reactive-element/package.json b/packages/reactive-element/package.json
@@ -166,7 +166,9 @@
     "test:dev": "wireit",
     "test:prod": "wireit",
     "test:node": "wireit",
-    "test:node-dev": "wireit"
+    "test:node-dev": "wireit",
+    "test:node-dom-shim": "wireit",
+    "test:node-dom-shim-dev": "wireit"
   },
   "wireit": {
     "build": {
@@ -268,6 +270,8 @@
         "test:prod",
         "test:node",
         "test:node-dev",
+        "test:node-dom-shim",
+        "test:node-dom-shim-dev",
         "check-version"
       ]
     },
@@ -319,6 +323,24 @@
       ],
       "files": [],
       "output": []
+    },
+    "test:node-dom-shim": {
+      "command": "node development/test/node-dom-shim.js",
+      "dependencies": [
+        "build:ts",
+        "build:rollup"
+      ],
+      "files": [],
+      "output": []
+    },
+    "test:node-dom-shim-dev": {
+      "command": "node --conditions=development development/test/node-dom-shim.js",
+      "dependencies": [
+        "build:ts",
+        "build:rollup"
+      ],
+      "files": [],
+      "output": []
     }
   },
   "files": [

diff --git a/packages/reactive-element/src/test/node-dom-shim.ts b/packages/reactive-element/src/test/node-dom-shim.ts
@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+// This file will be loaded by Node from the node:test-dom-shim script to verify
+// `ReactiveElement` will prefer extending existing `HTMLElement` from the
+// global rather than the built-in shim
+
+import './node-shim-html-element.js';
+import {ReactiveElement} from '@lit/reactive-element';
+import {HTMLElement} from '@lit-labs/ssr-dom-shim';
+
+import assert from 'node:assert/strict';
+assert.strictEqual(
+  Object.getPrototypeOf(ReactiveElement),
+  globalThis.HTMLElement,
+  'Expected ReactiveElement to extend existing globalThis.HTMLElement'
+);
+assert.notStrictEqual(
+  Object.getPrototypeOf(ReactiveElement),
+  HTMLElement,
+  'Expected ReactiveElement to not extend HTMLElement from ssr-dom-shim'
+);
diff --git a/packages/reactive-element/src/test/node-imports.ts b/packages/reactive-element/src/test/node-imports.ts
@@ -43,3 +43,11 @@ export class MyElement extends ReactiveElement {
 
 export class MyOtherElement extends ReactiveElement {}
 customElements.define('my-other-element', MyOtherElement);
+
+import assert from 'node:assert/strict';
+import {HTMLElement} from '@lit-labs/ssr-dom-shim';
+assert.strictEqual(
+  Object.getPrototypeOf(ReactiveElement),
+  HTMLElement,
+  'Expected ReactiveElement to extend HTMLElement from ssr-dom-shim'
+);
diff --git a/packages/reactive-element/src/test/node-shim-html-element.ts b/packages/reactive-element/src/test/node-shim-html-element.ts
@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+// This file is used as a side-effectful import in `node-dom-shim.js` to
+// simulate loading a separate DOM shim that adds `HTMLElement` to the global
+
+class FakeHTMLElement {}
+globalThis.HTMLElement = FakeHTMLElement as typeof HTMLElement;
diff --git a/rollup-common.js b/rollup-common.js
@@ -275,6 +275,7 @@ const injectNodeDomShimIntoReactiveElement = [
     include: ['**/packages/lit-html/development/experimental-hydrate.js'],
   }),
   replace({
+    preventAssignment: true,
     values: {
       'extends HTMLElement': 'extends (globalThis.HTMLElement ?? HTMLElement)',
     },