refactoring

Author: AbanoubGhadban

lib/react_on_rails/configuration.rb

@@ -305,11 +305,13 @@ def configure_generated_assets_dirs_deprecation
     def ensure_webpack_generated_files_exists
       return unless webpack_generated_files.empty?
 
-      files = ["manifest.json"]
-      files << server_bundle_js_file if server_bundle_js_file.present?
-      files << rsc_bundle_js_file if rsc_bundle_js_file.present?
-      files << react_client_manifest_file if react_client_manifest_file.present?
-      files << react_server_client_manifest_file if react_server_client_manifest_file.present?
+      self.webpack_generated_files = [
+        "manifest.json",
+        server_bundle_js_file,
+        rsc_bundle_js_file,
+        react_client_manifest_file,
+        react_server_client_manifest_file
+      ].compact_blank
 
       self.webpack_generated_files = files
     end

node_package/src/RSCClientRoot.ts

@@ -6,16 +6,13 @@ import { createFromReadableStream } from 'react-on-rails-rsc/client';
 import { fetch } from './utils.ts';
 import transformRSCStreamAndReplayConsoleLogs from './transformRSCStreamAndReplayConsoleLogs.ts';
 import { RailsContext, RenderFunction, RSCPayloadChunk } from './types/index.ts';
+import { ensureReactUseAvailable } from './reactApis.cts';
 
-const { use } = React;
-
-if (typeof use !== 'function') {
-  throw new Error('React.use is not defined. Please ensure you are using React 19 to use server components.');
-}
+ensureReactUseAvailable();
 
 declare global {
   interface Window {
-    REACT_ON_RAILS_RSC_PAYLOAD: RSCPayloadChunk[];
+    REACT_ON_RAILS_RSC_PAYLOAD?: RSCPayloadChunk[];
   }
 }
 

node_package/src/RSCServerRoot.tsx

@@ -1,10 +1,13 @@
 import * as React from 'react';
 import { createFromNodeStream } from 'react-on-rails-rsc/client.node';
 import { PassThrough } from 'stream';
-import type { RenderFunction, RailsContext } from './types';
-import transformRSCStream from './transformRSCNodeStream';
-import loadJsonFile from './loadJsonFile';
-import RSCPayloadContainer from './RSCPayloadContainer';
+import type { RenderFunction, RailsContext } from './types/index.ts';
+import transformRSCStream from './transformRSCNodeStream.ts';
+import loadJsonFile from './loadJsonFile.ts';
+import RSCPayloadContainer from './RSCPayloadContainer.tsx';
+import { ensureReactUseAvailable } from './reactApis.cts';
+
+ensureReactUseAvailable();
 
 declare global {
   function generateRSCPayload(
@@ -19,12 +22,6 @@ type RSCServerRootProps = {
   componentProps: Record<string, unknown>;
 };
 
-if (!('use' in React && typeof React.use === 'function')) {
-  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.',
-  );
-}
-
 const { use } = React;
 
 const createFromReactOnRailsNodeStream = (
@@ -40,24 +37,25 @@ const createSSRManifest = async (
   reactClientManifestFileName: string,
 ) => {
   const [reactServerManifest, reactClientManifest] = await Promise.all([
-    loadJsonFile(reactServerManifestFileName),
-    loadJsonFile(reactClientManifestFileName),
+    loadJsonFile(reactServerManifestFileName) as Promise<Record<string, { id: string; chunks: string[] }>>,
+    loadJsonFile(reactClientManifestFileName) as Promise<Record<string, { id: string }>>,
   ]);
 
   const ssrManifest = {
-    moduleLoading: {
-      prefix: '/webpack/development/',
-      crossOrigin: null,
-    },
+    // The `moduleLoading` property is utilized by the React runtime to load JavaScript modules.
+    // It can accept options such as `prefix` and `crossOrigin` to specify the path and crossorigin attribute for the modules.
+    // In our case, since the server code is bundled into a single bundle, there is no need to load additional JavaScript modules.
+    // As a result, we set this property to an empty object because it will not be used.
+    moduleLoading: {},
     moduleMap: {} as Record<string, unknown>,
   };
 
   Object.entries(reactClientManifest).forEach(([aboluteFileUrl, clientFileBundlingInfo]) => {
-    const serverFileBundlingInfo = reactServerManifest[aboluteFileUrl];
-    ssrManifest.moduleMap[(clientFileBundlingInfo as { id: string }).id] = {
+    const { id, chunks } = reactServerManifest[aboluteFileUrl];
+    ssrManifest.moduleMap[clientFileBundlingInfo.id] = {
       '*': {
-        id: (serverFileBundlingInfo as { id: string }).id,
-        chunks: (serverFileBundlingInfo as { chunks: string[] }).chunks,
+        id,
+        chunks,
         name: '*',
       },
     };

node_package/src/reactApis.cts

@@ -1,4 +1,5 @@
 /* eslint-disable global-require,@typescript-eslint/no-require-imports */
+import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import type { ReactElement } from 'react';
 import type { RenderReturnType } from './types/index.ts' with { 'resolution-mode': 'import' };
@@ -50,3 +51,11 @@ export const unmountComponentAtNode: typeof ReactDOM.unmountComponentAtNode = su
   ? // not used if we use root API
     () => false
   : ReactDOM.unmountComponentAtNode;
+
+export const ensureReactUseAvailable = () => {
+  if (!('use' in React) || typeof React.use !== 'function') {
+    throw new Error(
+      'React.use is not defined. Please ensure you are using React 19 to use server components.',
+    );
+  }
+};