[labs/react] Add Node build

.changeset/eight-elephants-sparkle.md

@@ -0,0 +1,5 @@
+---
+'@lit-labs/react': minor
+---
+
+Add Node build for server rendering. This will allow wrapped components to be added to SSR React frameworks like Next.js.

.eslintignore

@@ -241,6 +241,7 @@ packages/labs/observers/performance_controller.*
 packages/labs/observers/resize_controller.*
 packages/labs/observers/intersection_controller.*
 packages/labs/react/development/
+packages/labs/react/node/
 packages/labs/react/test/
 packages/labs/react/node_modules/
 packages/labs/react/index.*

.prettierignore

@@ -227,6 +227,7 @@ packages/labs/observers/performance_controller.*
 packages/labs/observers/resize_controller.*
 packages/labs/observers/intersection_controller.*
 packages/labs/react/development/
+packages/labs/react/node/
 packages/labs/react/test/
 packages/labs/react/node_modules/
 packages/labs/react/index.*

packages/labs/react/.gitignore

@@ -1,4 +1,5 @@
 /development/
+/node/
 /test/
 /node_modules/
 /index.*

packages/labs/react/package.json

@@ -20,17 +20,20 @@
     ".": {
       "types": "./development/index.d.ts",
       "development": "./development/index.js",
+      "node": "./node/index.js",
       "default": "./index.js"
     },
     "./use-controller.js": {
       "types": "./development/use-controller.d.ts",
       "development": "./development/use-controller.js",
+      "node": "./node/use-controller.js",
       "default": "./use-controller.js"
     }
   },
   "files": [
     "/development/",
     "!/development/test/",
+    "/node/",
     "/index.{d.ts,d.ts.map,js,js.map}",
     "/create-component.{d.ts,d.ts.map,js,js.map}",
     "/use-controller.{d.ts,d.ts.map,js,js.map}"
@@ -43,6 +46,7 @@
     "test": "wireit",
     "test:dev": "wireit",
     "test:prod": "wireit",
+    "test:node": "wireit",
     "checksize": "wireit"
   },
   "wireit": {
@@ -111,7 +115,8 @@
     "test": {
       "dependencies": [
         "test:dev",
-        "test:prod"
+        "test:prod",
+        "test:node"
       ]
     },
     "test:dev": {
@@ -133,6 +138,13 @@
       ],
       "files": [],
       "output": []
+    },
+    "test:node": {
+      "command": "node development/test/node-render.js",
+      "dependencies": [
+        "build:ts",
+        "build:rollup"
+      ]
     }
   },
   "author": "Google LLC",

packages/labs/react/rollup.config.js

@@ -10,4 +10,5 @@ import {createRequire} from 'module';
 export default litProdConfig({
   packageName: createRequire(import.meta.url)('./package.json').name,
   entryPoints: ['index', 'create-component', 'use-controller'],
+  includeNodeBuild: true,
 });

packages/labs/react/src/create-component.ts

@@ -4,6 +4,14 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
+const NODE_MODE = false;
+const global = NODE_MODE ? globalThis : window;
+
+const htmlElementShimNeeded = NODE_MODE && global.HTMLElement === undefined;
+if (htmlElementShimNeeded) {
+  global.HTMLElement = class HTMLElement {} as unknown as typeof HTMLElement;
+}
+
 // Match a prop name to a typed event callback by
 // adding an Event type as an expected property on a string.
 export type EventName<T extends Event = Event> = string & {

packages/labs/react/src/test/node-render.ts

@@ -0,0 +1,25 @@
+/**
+ * @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
+// wrapped components can be server rendered by React.
+
+import {createComponent} from '@lit-labs/react';
+import {ReactiveElement} from '@lit/reactive-element';
+import {customElement} from '@lit/reactive-element/decorators/custom-element.js';
+import React from 'react';
+import {renderToString} from 'react-dom/server.js';
+
+@customElement('my-element')
+class MyElement extends ReactiveElement {}
+
+const Component = createComponent({
+  react: React,
+  tagName: 'my-element',
+  elementClass: MyElement,
+});
+
+renderToString(React.createElement(Component));