Fix the render return type

shakacode · Jun 23, 2022 · 4472f2f · 4472f2f
1 parent 745b3f2
commit 4472f2f
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 48 deletions.
diff --git a/node_package/src/ReactOnRails.ts b/node_package/src/ReactOnRails.ts
@@ -1,4 +1,4 @@
-import type { ReactElement, Component } from 'react';
+import type { ReactElement } from 'react';
 
 import * as ClientStartup from './clientStartup';
 import handleError from './handleError';
@@ -13,11 +13,12 @@ import type {
   RegisteredComponent,
   RenderParams,
   RenderResult,
+  RenderReturnType,
   ErrorOptions,
   ReactComponentOrRenderFunction,
   AuthenticityHeaders,
-  StoreGenerator
-} from './types/index';
+  StoreGenerator,
+} from './types';
 import reactHydrateOrRender from './reactHydrateOrRender';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -183,7 +184,7 @@ ctx.ReactOnRails = {
    * @param hydrate Pass truthy to update server rendered html. Default is falsy
    * @returns {virtualDomElement} Reference to your component's backing instance
    */
-  render(name: string, props: Record<string, string>, domNodeId: string, hydrate: boolean): void | Element | Component {
+  render(name: string, props: Record<string, string>, domNodeId: string, hydrate: boolean): RenderReturnType {
     const componentObj = ComponentRegistry.get(name);
     const reactElement = createReactOutput({ componentObj, props, domNodeId });
 

diff --git a/node_package/src/reactHydrateOrRender.ts b/node_package/src/reactHydrateOrRender.ts
@@ -1,42 +1,42 @@
-import { ReactElement, Component } from 'react';
-import ReactDOM from 'react-dom';
-
-type HydrateOrRenderReturnType = void | Element | Component;
-type HydrateOrRenderType = (domNode: Element, reactElement: ReactElement) => HydrateOrRenderReturnType;
-const supportsReactCreateRoot = parseInt(ReactDOM.version.split('.')[0], 10) >= 18;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let reactDomClient: any;
-if (supportsReactCreateRoot) {
-  // eslint-disable-next-line camelcase
-  if (__webpack_require__) {
-    // we are in a Webpack environment (and in a node-modules directory of another project)
-    // See https://webpack.js.org/guides/dependency-management/#context-module-api
-    const reactDomContext = require.context('react-dom/', false, /^client\.js$/);
-    reactDomClient = reactDomContext('react-dom/client.js');
-  } else {
-    // we want a dynamic require here so that webpack doesn't rewrite it
-    const reactDomClientName = 'react-dom/client';
-    // eslint-disable-next-line global-require,import/no-dynamic-require
-    reactDomClient = require(reactDomClientName);
-  }
-}
-
-export const reactHydrate: HydrateOrRenderType = supportsReactCreateRoot ?
-  reactDomClient.hydrateRoot :
-  (domNode, reactElement) => ReactDOM.hydrate(reactElement, domNode);
-
-export function reactRender(domNode: Element, reactElement: ReactElement): HydrateOrRenderReturnType {
-  if (supportsReactCreateRoot) {
-    const root = reactDomClient.createRoot(domNode);
-    root.render(reactElement);
-    return root;
-  }
-
-  // eslint-disable-next-line react/no-render-return-value
-  return ReactDOM.render(reactElement, domNode);
-}
-
-export default function reactHydrateOrRender(shouldHydrate: boolean, domNode: Element, reactElement: ReactElement): HydrateOrRenderReturnType {
-  return shouldHydrate ? reactHydrate(domNode, reactElement) : reactRender(domNode, reactElement);
-}
+import type { ReactElement } from 'react';
+import ReactDOM from 'react-dom';
+import type { RenderReturnType } from './types';
+
+type HydrateOrRenderType = (domNode: Element, reactElement: ReactElement) => RenderReturnType;
+const supportsReactCreateRoot = parseInt(ReactDOM.version.split('.')[0], 10) >= 18;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let reactDomClient: any;
+if (supportsReactCreateRoot) {
+  // eslint-disable-next-line camelcase
+  if (__webpack_require__) {
+    // we are in a Webpack environment (and in a node-modules directory of another project)
+    // See https://webpack.js.org/guides/dependency-management/#context-module-api
+    const reactDomContext = require.context('react-dom/', false, /^client\.js$/);
+    reactDomClient = reactDomContext('react-dom/client.js');
+  } else {
+    // we want a dynamic require here so that webpack doesn't rewrite it
+    const reactDomClientName = 'react-dom/client';
+    // eslint-disable-next-line global-require,import/no-dynamic-require
+    reactDomClient = require(reactDomClientName);
+  }
+}
+
+export const reactHydrate: HydrateOrRenderType = supportsReactCreateRoot ?
+  reactDomClient.hydrateRoot :
+  (domNode, reactElement) => ReactDOM.hydrate(reactElement, domNode);
+
+export function reactRender(domNode: Element, reactElement: ReactElement): RenderReturnType {
+  if (supportsReactCreateRoot) {
+    const root = reactDomClient.createRoot(domNode);
+    root.render(reactElement);
+    return root;
+  }
+
+  // eslint-disable-next-line react/no-render-return-value
+  return ReactDOM.render(reactElement, domNode);
+}
+
+export default function reactHydrateOrRender(shouldHydrate: boolean, domNode: Element, reactElement: ReactElement): RenderReturnType {
+  return shouldHydrate ? reactHydrate(domNode, reactElement) : reactRender(domNode, reactElement);
+}
diff --git a/node_package/src/types/index.ts b/node_package/src/types/index.ts
@@ -1,4 +1,4 @@
-import type { ReactElement, Component, FunctionComponent, ComponentClass } from 'react';
+import type { ReactElement, ReactNode, Component, FunctionComponent, ComponentClass } from 'react';
 
 // Don't import redux just for the type definitions
 // See https://github.com/shakacode/react_on_rails/issues/1321
@@ -112,6 +112,14 @@ export interface RenderResult {
   renderingError?: RenderingError;
 }
 
+// from react-dom 18
+export interface Root {
+  render(children: ReactNode): void;
+  unmount(): void;
+}
+
+export type RenderReturnType = void | Element | Component | Root;
+
 export interface ReactOnRails {
   register(components: { [id: string]: ReactComponentOrRenderFunction }): void;
   registerStore(stores: { [id: string]: Store }): void;
@@ -126,7 +134,7 @@ export interface ReactOnRails {
   clearHydratedStores(): void;
   render(
     name: string, props: Record<string, string>, domNodeId: string, hydrate: boolean
-  ): void | Element | Component;
+  ): RenderReturnType;
   getComponent(name: string): RegisteredComponent;
   serverRenderReactComponent(options: RenderParams): null | string | Promise<RenderResult>;
   handleError(options: ErrorOptions): string | undefined;