Try to optimize react-dom imports more

Author: alexeyr

node_package/src/reactApis.cts

@@ -1,14 +1,14 @@
-/* eslint-disable global-require,@typescript-eslint/no-require-imports */
-import * as ReactDOM from 'react-dom';
+/* eslint-disable global-require,@typescript-eslint/no-require-imports,react/no-deprecated */
+import { version, hydrate, render, unmountComponentAtNode as unmountComponentAtNodeLib } from 'react-dom';
 import type { ReactElement } from 'react';
 import type { RenderReturnType } from './types/index.ts' with { 'resolution-mode': 'import' };
 
-const reactMajorVersion = Number(ReactDOM.version?.split('.')[0]) || 16;
+const reactMajorVersion = Number(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;
+export const supportsHydrate = supportsRootApi || !!hydrate;
 
 // TODO: once React dependency is updated to >= 18, we can remove this and just
 // import ReactDOM from 'react-dom/client';
@@ -20,20 +20,18 @@ if (supportsRootApi) {
   try {
     reactDomClient = require('react-dom/client') as typeof import('react-dom/client');
   } catch (_e) {
-    // We should never get here, but if we do, we'll just use the default ReactDOM
-    // and live with the warning.
-    reactDomClient = ReactDOM as unknown as typeof import('react-dom/client');
+    // do nothing
   }
 }
 
 type HydrateOrRenderType = (domNode: Element, reactElement: ReactElement) => RenderReturnType;
 
-/* eslint-disable @typescript-eslint/no-deprecated,@typescript-eslint/no-non-null-assertion,react/no-deprecated --
+/* eslint-disable @typescript-eslint/no-deprecated,@typescript-eslint/no-non-null-assertion --
  * while we need to support React 16
  */
 export const reactHydrate: HydrateOrRenderType = supportsRootApi
   ? reactDomClient!.hydrateRoot
-  : (domNode, reactElement) => ReactDOM.hydrate(reactElement, domNode);
+  : (domNode, reactElement) => hydrate(reactElement, domNode);
 
 export function reactRender(domNode: Element, reactElement: ReactElement): RenderReturnType {
   if (supportsRootApi) {
@@ -42,11 +40,10 @@ export function reactRender(domNode: Element, reactElement: ReactElement): Rende
     return root;
   }
 
-  // eslint-disable-next-line react/no-render-return-value
-  return ReactDOM.render(reactElement, domNode);
+  return render(reactElement, domNode);
 }
 
-export const unmountComponentAtNode: typeof ReactDOM.unmountComponentAtNode = supportsRootApi
+export const unmountComponentAtNode: typeof unmountComponentAtNodeLib = supportsRootApi
   ? // not used if we use root API
     () => false
-  : ReactDOM.unmountComponentAtNode;
+  : unmountComponentAtNodeLib;