Update: exporting types separate from code

Author: stevematney

.gitignore

@@ -13,6 +13,7 @@ dist
 # production
 /dist
 /module
+/types
 
 # misc
 .DS_Store

package.json

@@ -3,6 +3,7 @@
   "version": "2.2.0",
   "description": "An HTMLElement extension that provides a simple setup for Web Components using React.",
   "main": "module/index.js",
+  "types": "types",
   "exports": {
     "import": "./module/index.js",
     "require": "./dist/index.js",
@@ -11,13 +12,14 @@
   "types": "module/index.d.ts",
   "files": [
     "dist",
-    "module"
+    "module",
+    "types"
   ],
   "scripts": {
     "test": "npm run lint && npm run build && jest",
     "build": "tsc -p tsconfig.json && tsc -p require-tsconfig.json",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx ./src",
-    "prepublishOnly": "npm run build"
+    "prepack": "npm run build"
   },
   "repository": {
     "type": "git",

require-tsconfig.json

@@ -1,8 +1,9 @@
 {
-  "extends": "./tsconfig.json",
+  "extends": "./tsconfig.base.json",
   "compilerOptions": {
     "outDir": "dist",
     "module": "commonjs",
-    "target": "es5"
+    "target": "es5",
+    "declaration": false
   }
 }

src/ReactHTMLElement.ts

@@ -1,13 +1,16 @@
 import { version as reactVersion } from 'react';
 import ReactDOM from 'react-dom';
-import type { Root } from 'react-dom/client';
+import type { Root, createRoot as createRootOriginal } from 'react-dom/client';
 
 type Renderable = Parameters<ReactDOM.Renderer>[0][number];
 
 const [, major] = /^(\d+)\.\d+\.\d+$/.exec(reactVersion) || [undefined, '16'];
 const reactMajor = Number(major);
 
 const isPreEighteen = reactMajor < 18;
+const REACT_DOM_CLIENT_IMPORT = isPreEighteen
+  ? './react-dom-client-polyfill'
+  : 'react-dom/client';
 
 class ReactHTMLElement extends HTMLElement {
   private _initialized?: boolean;
@@ -49,7 +52,12 @@ class ReactHTMLElement extends HTMLElement {
   async root(): Promise<Root> {
     if (this._root) return this._root;
 
-    const { createRoot } = await import('react-dom/client');
+    const { createRoot } = (await import(
+      /* webpackExports: ['createRoot'] */
+      `${REACT_DOM_CLIENT_IMPORT}`
+    )) as {
+      createRoot: typeof createRootOriginal;
+    };
     this._root = createRoot(this.mountPoint);
     return this._root;
   }
@@ -62,10 +70,10 @@ class ReactHTMLElement extends HTMLElement {
       return;
     }
 
-    void this.rootRender(app);
+    void this.renderRoot(app);
   }
 
-  async rootRender(app: Renderable): Promise<void> {
+  async renderRoot(app: Renderable): Promise<void> {
     const root = await this.root();
     root.render(app);
   }

src/react-dom-client-polyfill.ts

@@ -0,0 +1,17 @@
+import type { createRoot as createRootOriginal } from 'react-dom/client';
+
+type CreateRootFunc = typeof createRootOriginal;
+
+//*---
+// this function should never be used
+// it is only here to satisfy webpack
+//*---
+
+// eslint-disable-next-line import/prefer-default-export
+export const createRoot: CreateRootFunc = (
+  // eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
+  ...args: Parameters<CreateRootFunc>
+) => ({
+  render: () => {},
+  unmount: () => {},
+});

tsconfig.base.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "downlevelIteration": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "module": "es2020",
+    "moduleResolution": "node",
+    "outDir": "module",
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "es6"
+  },
+  "include": ["src"],
+  "exclude": ["src/__tests__"]
+}

tsconfig.json

@@ -1,21 +1,7 @@
 {
+  "extends": "./tsconfig.base.json",
   "compilerOptions": {
-    "allowJs": true,
-    "allowSyntheticDefaultImports": true,
     "declaration": true,
-    "downlevelIteration": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "isolatedModules": true,
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "module": "es2020",
-    "moduleResolution": "node",
-    "outDir": "module",
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "target": "es6"
+    "declarationDir": "types",
   },
-  "include": ["src"],
-  "exclude": ["src/__tests__"]
 }