Merge pull request #46 from WTW-IM/fix-react-dom

Author: stevematney

src/ReactHTMLElement.ts

@@ -1,23 +1,27 @@
-import { version as reactVersion } from 'react';
-import ReactDOM from 'react-dom';
-import type { Root, createRoot as createRootOriginal } from 'react-dom/client';
+import type ReactDOM from 'react-dom';
+import type { Root } from 'react-dom/client';
+import { getCreateRoot } 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';
+type ReactHTMLElementDOMRoot = Pick<Root, 'render' | 'unmount'>;
+
+const awaitValue = <T>(awaiter: () => T): Promise<T> => new Promise((resolve) => {
+    const result = awaiter();
+    if (result) {
+      resolve(result);
+    } else {
+      setTimeout(() => resolve(awaitValue(awaiter)), 100);
+    }
+  });
 
 class ReactHTMLElement extends HTMLElement {
   private _initialized?: boolean;
 
   private _mountPoint?: Element;
 
-  private _root?: Root;
+  private _root?: ReactHTMLElementDOMRoot;
+
+  private _awaitingRoot = false;
 
   private getShadowRoot(): ShadowRoot {
     return this.shadowRoot || this.attachShadow({ mode: 'open' });
@@ -49,27 +53,21 @@ class ReactHTMLElement extends HTMLElement {
     this._mountPoint = mount;
   }
 
-  async root(): Promise<Root> {
+  async root(): Promise<ReactHTMLElementDOMRoot> {
+    if (this._awaitingRoot) {
+      await awaitValue(() => this._root);
+    }
     if (this._root) return this._root;
 
-    const { createRoot } = (await import(
-      /* webpackExports: ['createRoot'] */
-      `${REACT_DOM_CLIENT_IMPORT}`
-    )) as {
-      createRoot: typeof createRootOriginal;
-    };
-    this._root = createRoot(this.mountPoint);
+    this._awaitingRoot = true;
+    this._root = (await getCreateRoot())(this.mountPoint);
+    this._awaitingRoot = false;
     return this._root;
   }
 
   render(app: Renderable): void {
     if (!this.isConnected) return;
 
-    if (isPreEighteen) {
-      ReactDOM.render(app, this.mountPoint);
-      return;
-    }
-
     void this.renderRoot(app);
   }
 
@@ -81,11 +79,6 @@ class ReactHTMLElement extends HTMLElement {
   disconnectedCallback(): void {
     if (!this._mountPoint) return;
 
-    if (isPreEighteen) {
-      ReactDOM.unmountComponentAtNode(this._mountPoint);
-      return;
-    }
-
     this._root?.unmount();
   }
 

src/__tests__/ReactHtmlElement.tests.tsx

@@ -1,11 +1,16 @@
 import React, { useState, useEffect } from 'react';
-import { findByText, waitFor, queryByTestId } from '@testing-library/dom';
+import {
+  findByText,
+  waitFor,
+  queryByTestId,
+  findByTestId,
+} from '@testing-library/dom';
 import '@testing-library/jest-dom/extend-expect';
 import ReactHTMLElement from '../ReactHTMLElement';
 
 function ReactTest({ onUnmount = (): void => undefined }): React.ReactElement {
   const [increment, setIncrement] = useState(0);
-  useEffect(() => (): void => onUnmount());
+  useEffect(() => (): void => onUnmount(), []);
   return (
     <div data-testid="container">
       <button
@@ -39,9 +44,10 @@ async function getDocument(
   testElement.onUnmount = onUnmount;
   document.body.appendChild(testElement);
   await waitFor(() => expect(testElement.shadowRoot).toBeTruthy());
-  return testElement.shadowRoot?.querySelector(
-    'div[data-testid=container]'
-  ) as HTMLElement;
+  return findByTestId(
+    (testElement.shadowRoot as unknown) as HTMLElement,
+    'container'
+  );
 }
 
 it('renders interactable react', async () => {

src/react-dom-client-polyfill.ts

@@ -0,0 +1,40 @@
+import * as ReactDOM from 'react-dom';
+import type { createRoot as createRootOriginal } from 'react-dom/client';
+
+type ReactDOM18 = ReactDOMOriginal & {
+  createRoot?: CreateRoot;
+};
+
+type CreateRoot = typeof createRootOriginal;
+type CreateRootParams = Parameters<CreateRoot>;
+type ReactDOMOriginal = typeof ReactDOM;
+type RendererProps = Parameters<typeof ReactDOM['render']>;
+
+const createRootFake = (container: CreateRootParams[0]) => {
+  const newRoot = {
+    render: (element: RendererProps[0]) => {
+      ReactDOM.render(element, container);
+    },
+    unmount: () => {
+      ReactDOM.unmountComponentAtNode(container);
+    },
+  };
+  return newRoot;
+};
+
+let checkedFor18 = false;
+let MaybeReactDOM18: ReactDOM18;
+// eslint-disable-next-line import/prefer-default-export
+export const getCreateRoot = async () => {
+  if (!checkedFor18) {
+    try {
+      // eslint-disable-next-line global-require,@typescript-eslint/no-var-requires
+      MaybeReactDOM18 = (await require('react-dom/client')) as ReactDOM18;
+    } catch {
+      MaybeReactDOM18 = ReactDOM as ReactDOM18;
+    }
+    checkedFor18 = true;
+  }
+  const { createRoot = createRootFake } = MaybeReactDOM18;
+  return createRoot;
+};