Move require into .cts

Author: alexeyr

node_package/src/ClientSideRenderer.ts

@@ -7,7 +7,7 @@ import type { RailsContext, RegisteredComponent, RenderFunction, Root } from './
 import { getRailsContext, resetRailsContext } from './context.ts';
 import createReactOutput from './createReactOutput.ts';
 import { isServerRenderHash } from './isServerRenderResult.ts';
-import { supportsRootApi } from './reactApis.ts';
+import { supportsRootApi } from './reactApis.cts';
 import reactHydrateOrRender from './reactHydrateOrRender.ts';
 import { debugTurbolinks } from './turbolinksUtils.ts';
 import * as StoreRegistry from './StoreRegistry.ts';

node_package/src/reactApis.cts

@@ -0,0 +1,50 @@
+import * as ReactDOM 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;
+
+// TODO: once we require React 18, we can remove this and inline everything guarded by it.
+// Not the default export because others may be added for future React versions.
+// eslint-disable-next-line import/prefer-default-export
+export const supportsRootApi = reactMajorVersion >= 18;
+
+// 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');
+if (supportsRootApi) {
+  // This will never throw an exception, but it's the way to tell Webpack the dependency is optional
+  // https://github.com/webpack/webpack/issues/339#issuecomment-47739112
+  // Unfortunately, it only converts the error to a warning.
+  try {
+    // eslint-disable-next-line global-require,@typescript-eslint/no-require-imports
+    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');
+  }
+}
+
+type HydrateOrRenderType = (domNode: Element, reactElement: ReactElement) => RenderReturnType;
+
+/* eslint-disable @typescript-eslint/no-deprecated,@typescript-eslint/no-non-null-assertion --
+ * 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);
+
+export function reactRender(domNode: Element, reactElement: ReactElement): RenderReturnType {
+  if (supportsRootApi) {
+    const root = reactDomClient!.createRoot(domNode);
+    root.render(reactElement);
+    return root;
+  }
+
+  return ReactDOM[renderProp](reactElement, domNode);
+}
+/* eslint-enable @typescript-eslint/no-deprecated,@typescript-eslint/no-non-null-assertion */

node_package/src/reactApis.ts

@@ -1,47 +1,6 @@
 import type { ReactElement } from 'react';
-import * as ReactDOM from 'react-dom';
 import type { RenderReturnType } from './types/index.ts';
-import { supportsRootApi } from './reactApis.ts';
-
-type HydrateOrRenderType = (domNode: Element, reactElement: ReactElement) => RenderReturnType;
-
-// 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');
-if (supportsRootApi) {
-  // This will never throw an exception, but it's the way to tell Webpack the dependency is optional
-  // https://github.com/webpack/webpack/issues/339#issuecomment-47739112
-  // Unfortunately, it only converts the error to a warning.
-  try {
-    // eslint-disable-next-line global-require,@typescript-eslint/no-require-imports
-    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');
-  }
-}
-
-/* eslint-disable @typescript-eslint/no-deprecated,@typescript-eslint/no-non-null-assertion --
- * while we need to support React 16
- */
-const hydrateProp = 'hydrate';
-const renderProp = 'render';
-
-const reactHydrate: HydrateOrRenderType = supportsRootApi
-  ? reactDomClient!.hydrateRoot
-  : (domNode, reactElement) => ReactDOM[hydrateProp](reactElement, domNode);
-
-function reactRender(domNode: Element, reactElement: ReactElement): RenderReturnType {
-  if (supportsRootApi) {
-    const root = reactDomClient!.createRoot(domNode);
-    root.render(reactElement);
-    return root;
-  }
-
-  return ReactDOM[renderProp](reactElement, domNode);
-}
-/* eslint-enable @typescript-eslint/no-deprecated,@typescript-eslint/no-non-null-assertion */
+import { reactHydrate, reactRender } from './reactApis.cts';
 
 export default function reactHydrateOrRender(
   domNode: Element,