Improve react-dom handling

Author: alexeyr

node_package/src/ClientSideRenderer.ts

@@ -1,13 +1,12 @@
 /* eslint-disable max-classes-per-file */
 
-import * as ReactDOM from 'react-dom';
 import type { ReactElement } from 'react';
 import type { RailsContext, RegisteredComponent, RenderFunction, Root } from './types/index.ts';
 
 import { getRailsContext, resetRailsContext } from './context.ts';
 import createReactOutput from './createReactOutput.ts';
 import { isServerRenderHash } from './isServerRenderResult.ts';
-import { supportsRootApi } from './reactApis.cts';
+import { supportsHydrate, supportsRootApi, unmountComponentAtNode } from './reactApis.cts';
 import reactHydrateOrRender from './reactHydrateOrRender.ts';
 import { debugTurbolinks } from './turbolinksUtils.ts';
 import * as StoreRegistry from './StoreRegistry.ts';
@@ -102,7 +101,7 @@ class ComponentRenderer {
         }
 
         // Hydrate if available and was server rendered
-        const shouldHydrate = (supportsRootApi || 'hydrate' in ReactDOM) && !!domNode.innerHTML;
+        const shouldHydrate = supportsHydrate && !!domNode.innerHTML;
 
         const reactElementOrRouterResult = createReactOutput({
           componentObj,
@@ -154,9 +153,8 @@ You should return a React.Component always for the client side entry point.`);
       }
 
       try {
-        const unmountComponentAtNode = 'unmountComponentAtNode';
         // eslint-disable-next-line @typescript-eslint/no-deprecated
-        ReactDOM[unmountComponentAtNode](domNode);
+        unmountComponentAtNode(domNode);
       } catch (e: unknown) {
         const error = e instanceof Error ? e : new Error('Unknown error');
         console.info(

node_package/src/reactApis.cts

@@ -8,6 +8,8 @@ const reactMajorVersion = Number(ReactDOM.version?.split('.')[0]) || 16;
 // TODO: once we require React 18, we can remove this and inline everything guarded by it.
 export const supportsRootApi = reactMajorVersion >= 18;
 
+export const supportsHydrate = supportsRootApi || 'hydrate' in ReactDOM;
+
 // TODO: once React dependency is updated to >= 18, we can remove this and just
 // import ReactDOM from 'react-dom/client';
 let reactDomClient: typeof import('react-dom/client');
@@ -24,7 +26,7 @@ if (supportsRootApi) {
   }
 }
 
-export const ReactDOMServer = (() => {
+export const ReactDOMServer = /* #__PURE */ (() => {
   try {
     // in react-dom v18+
     return require('react-dom/server') as typeof import('react-dom/server');
@@ -41,15 +43,12 @@ export const ReactDOMServer = (() => {
 
 type HydrateOrRenderType = (domNode: Element, reactElement: ReactElement) => RenderReturnType;
 
-/* eslint-disable @typescript-eslint/no-deprecated,@typescript-eslint/no-non-null-assertion --
+/* eslint-disable @typescript-eslint/no-deprecated,@typescript-eslint/no-non-null-assertion,react/no-deprecated --
  * while we need to support React 16
  */
-const hydrateProp = 'hydrate';
-const renderProp = 'render';
-
 export const reactHydrate: HydrateOrRenderType = supportsRootApi
   ? reactDomClient!.hydrateRoot
-  : (domNode, reactElement) => ReactDOM[hydrateProp](reactElement, domNode);
+  : (domNode, reactElement) => ReactDOM.hydrate(reactElement, domNode);
 
 export function reactRender(domNode: Element, reactElement: ReactElement): RenderReturnType {
   if (supportsRootApi) {
@@ -58,6 +57,11 @@ export function reactRender(domNode: Element, reactElement: ReactElement): Rende
     return root;
   }
 
-  return ReactDOM[renderProp](reactElement, domNode);
+  // eslint-disable-next-line react/no-render-return-value
+  return ReactDOM.render(reactElement, domNode);
 }
-/* eslint-enable @typescript-eslint/no-deprecated,@typescript-eslint/no-non-null-assertion */
+
+export const unmountComponentAtNode: typeof import('react-dom').unmountComponentAtNode = supportsRootApi
+  ? // not used if we use root API
+    () => false
+  : ReactDOM.unmountComponentAtNode;