Add support for React 18 server rendering (#1409)

* add support diff versions of React's render API

in React 18, the API for rendering and hydrating elements is updated.  

This updates the syntax to support both syntaxes so that users of both APIs can still work with the same interface.

* move files to reusables so that they can work for ReactOnRails
* use ReactDOM.version to determine API for rendering and hydrating

node_package/src/ReactOnRails.ts

@@ -1,4 +1,3 @@
-import ReactDOM from 'react-dom';
 import type { ReactElement, Component } from 'react';
 
 import * as ClientStartup from './clientStartup';
@@ -19,6 +18,8 @@ import type {
   AuthenticityHeaders,
   StoreGenerator
 } from './types/index';
+import reactHydrate from './reactHydrate';
+import reactRender from './reactRender';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 type Store = any;
@@ -187,9 +188,9 @@ ctx.ReactOnRails = {
     const componentObj = ComponentRegistry.get(name);
     const reactElement = createReactOutput({ componentObj, props, domNodeId });
 
-    const render = hydrate ? ReactDOM.hydrate : ReactDOM.render;
+    const render = hydrate ? reactHydrate : reactRender;
     // eslint-disable-next-line react/no-render-return-value
-    return render(reactElement as ReactElement, document.getElementById(domNodeId));
+    return render(document.getElementById(domNodeId) as Element, reactElement as ReactElement);
   },
 
   /**

node_package/src/clientStartup.ts

@@ -9,6 +9,8 @@ import type {
 
 import createReactOutput from './createReactOutput';
 import {isServerRenderHash} from './isServerRenderResult';
+import reactHydrate from './reactHydrate';
+import reactRender from './reactRender';
 
 declare global {
   interface Window {
@@ -150,7 +152,8 @@ function render(el: Element, railsContext: RailsContext): void {
       }
 
       // Hydrate if available and was server rendered
-      const shouldHydrate = !!ReactDOM.hydrate && !!domNode.innerHTML;
+      // @ts-expect-error potentially present if React 18 or greater
+      const shouldHydrate = !!(ReactDOM.hydrate || ReactDOM.hydrateRoot) && !!domNode.innerHTML;
 
       const reactElementOrRouterResult = createReactOutput({
         componentObj,
@@ -166,9 +169,9 @@ function render(el: Element, railsContext: RailsContext): void {
 You returned a server side type of react-router error: ${JSON.stringify(reactElementOrRouterResult)}
 You should return a React.Component always for the client side entry point.`);
       } else if (shouldHydrate) {
-        ReactDOM.hydrate(reactElementOrRouterResult as ReactElement, domNode);
+        reactHydrate(domNode, reactElementOrRouterResult as ReactElement);
       } else {
-        ReactDOM.render(reactElementOrRouterResult as ReactElement, domNode);
+        reactRender(domNode, reactElementOrRouterResult as ReactElement);
       }
     }
   } catch (e) {

node_package/src/reactHydrate.ts

@@ -0,0 +1,12 @@
+import ReactDOM from 'react-dom';
+import { ReactElement, Component } from 'react';
+import supportsReactCreateRoot from './supportsReactCreateRoot';
+
+export default function reactHydrate(domNode: Element, reactElement: ReactElement): void | Element | Component {
+  if (supportsReactCreateRoot) {
+    // @ts-expect-error potentially present if React 18 or greater
+    return ReactDOM.hydrateRoot(domNode, reactElement);
+  }
+
+  return ReactDOM.hydrate(reactElement, domNode);
+}

node_package/src/reactRender.ts

@@ -0,0 +1,15 @@
+import ReactDOM from 'react-dom';
+import { ReactElement, Component } from 'react';
+import supportsReactCreateRoot from './supportsReactCreateRoot';
+
+export default function reactRender(domNode: Element, reactElement: ReactElement): void | Element | Component {
+  if (supportsReactCreateRoot) {
+    // @ts-expect-error potentially present if React 18 or greater
+    const root = ReactDOM.createRoot(domNode);
+    root.render(reactElement);
+    return root
+  }
+
+  // eslint-disable-next-line react/no-render-return-value
+  return ReactDOM.render(reactElement, domNode);
+}

node_package/src/supportsReactCreateRoot.js

@@ -0,0 +1,4 @@
+import ReactDOM from 'react-dom';
+
+const reactMajorVersion = parseInt(ReactDOM.version.split('.')[0], 10);
+export default reactMajorVersion >= 18;