refactoring

Author: AbanoubGhadban

lib/react_on_rails/helper.rb

@@ -530,8 +530,13 @@ def build_react_component_result_for_server_rendered_hash(
     end
 
     def compose_react_component_html_with_spec_and_console(component_specification_tag, rendered_output, console_script, dom_id = nil)
-      add_component_to_pending_hydration_code = "window.#{ADD_COMPONENT_TO_PENDING_HYDRATION_FUNCTION}('#{dom_id}');"
-      hydrate_script = dom_id.present? ? content_tag(:script, add_component_to_pending_hydration_code.html_safe) : ""
+      hydrate_script = if dom_id.present?
+        add_component_to_pending_hydration_code = "window.#{ADD_COMPONENT_TO_PENDING_HYDRATION_FUNCTION}('#{dom_id}');"
+        content_tag(:script, add_component_to_pending_hydration_code.html_safe)
+      else
+        ""
+      end
+
       # IMPORTANT: Ensure that we mark string as html_safe to avoid escaping.
       html_content = <<~HTML
         #{rendered_output}

node_package/src/ComponentRegistry.ts

@@ -1,9 +1,14 @@
 import React from 'react';
-import type { RegisteredComponent, ReactComponentOrRenderFunction, RenderFunction, ReactComponent } from './types/index';
+import {
+  type RegisteredComponent,
+  type ReactComponentOrRenderFunction,
+  type RenderFunction,
+  type ComponentRegistrationCallback,
+} from './types';
 import isRenderFunction from './isRenderFunction';
 
 const registeredComponents = new Map<string, RegisteredComponent>();
-const registrationCallbacks = new Map<string, Array<(component: RegisteredComponent) => void>>();
+const registrationCallbacks = new Map<string, Array<ComponentRegistrationCallback>>();
 
 export default {
   /**
@@ -12,8 +17,8 @@ export default {
    * @param callback Function called with the component details when registered
    */
   onComponentRegistered(
-    componentName: string, 
-    callback: (component: RegisteredComponent) => void
+    componentName: string,
+    callback: (component: RegisteredComponent) => void,
   ): void {
     // If component is already registered, schedule callback
     const existingComponent = registeredComponents.get(componentName);
@@ -63,7 +68,7 @@ export default {
 
   registerServerComponent(...componentNames: string[]): void {
     // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
-    const RSCClientRoot = require('./RSCClientRoot').default;
+    const RSCClientRoot = (require('./RSCClientRoot') as typeof import('./RSCClientRoot')).default;
 
     const componentsWrappedInRSCClientRoot = componentNames.reduce(
       (acc, name) => ({ ...acc, [name]: () => React.createElement(RSCClientRoot, { componentName: name }) }),

node_package/src/RSCClientRoot.ts

@@ -2,18 +2,16 @@ import * as React from 'react';
 import RSDWClient from 'react-server-dom-webpack/client';
 
 if (!('use' in React)) {
-  throw new Error('React.use is not defined. Please ensure you are using React 18.3.0-canary-670811593-20240322 or later to use server components.');
+  throw new Error('React.use is not defined. Please ensure you are using React 18 with experimental features enabled or React 19+ to use server components.');
 }
 
-// It's not the exact type, but it's close enough for now
-type Use = <T>(promise: Promise<T>) => T;
-const { use } = React as { use: Use };
+const { use } = React;
 
-const renderCache: Record<string, Promise<unknown>> = {};
+const renderCache: Record<string, Promise<React.ReactNode>> = {};
 
 const fetchRSC = ({ componentName }: { componentName: string }) => {
   if (!renderCache[componentName]) {
-    renderCache[componentName] = RSDWClient.createFromFetch(fetch(`/rsc/${componentName}`));
+    renderCache[componentName] = RSDWClient.createFromFetch(fetch(`/rsc/${componentName}`)) as Promise<React.ReactNode>;
   }
   return renderCache[componentName];
 }

node_package/src/types/index.ts

@@ -1,3 +1,6 @@
+// eslint-disable-next-line spaced-comment
+/// <reference types="react/experimental" />
+
 import type { ReactElement, ReactNode, Component, ComponentType } from 'react';
 import type { Readable, PassThrough } from 'stream';
 
@@ -104,6 +107,8 @@ export interface RegisteredComponent {
   isRenderer: boolean;
 }
 
+export type ComponentRegistrationCallback = (component: RegisteredComponent) => void;
+
 interface Params {
   props?: Record<string, unknown>;
   railsContext?: RailsContext;