Refactor imports to use local utils module

- Updated import paths in multiple files to reference the new local utils.ts module instead of the previous utils from 'react-on-rails'.
- Introduced utils.ts with utility functions including fetch, createRSCPayloadKey, wrapInNewPromise, and extractErrorMessage.

These changes enhance modularity and maintainability of the codebase.

Author: AbanoubGhadban

packages/react-on-rails-pro/jest.config.js

@@ -0,0 +1,31 @@
+// eslint-disable-next-line import/no-relative-packages
+import rootConfig from '../../jest.config.base.js';
+
+const nodeVersion = parseInt(process.version.slice(1), 10);
+
+// Package-specific Jest configuration
+// Inherits from root jest.config.mjs and adds package-specific settings
+export default {
+  // Inherit all settings from root
+  ...rootConfig,
+
+  // Override: Package-specific test directory
+  testMatch: ['<rootDir>/tests/**/?(*.)+(spec|test).[jt]s?(x)'],
+
+  // Package-specific: Jest setup files
+  setupFiles: ['<rootDir>/tests/jest.setup.js'],
+
+  // Package-specific: Module name mapping for React Server Components
+  // Only mock modules on Node versions < 18 where RSC features aren't available
+  moduleNameMapper:
+    nodeVersion < 18
+      ? {
+          'react-on-rails-rsc/client': '<rootDir>/tests/emptyForTesting.js',
+          '^@testing-library/dom$': '<rootDir>/tests/emptyForTesting.js',
+          '^@testing-library/react$': '<rootDir>/tests/emptyForTesting.js',
+        }
+      : {},
+
+  // Set root directory to current package
+  rootDir: '.',
+};

packages/react-on-rails-pro/src/RSCProvider.tsx

@@ -14,7 +14,7 @@
 
 import * as React from 'react';
 import type { ClientGetReactServerComponentProps } from './getReactServerComponent.client.ts';
-import { createRSCPayloadKey } from 'react-on-rails/utils';
+import { createRSCPayloadKey } from './utils.ts';
 
 type RSCContextType = {
   getComponent: (componentName: string, componentProps: unknown) => Promise<React.ReactNode>;

packages/react-on-rails-pro/src/RSCRequestTracker.ts

@@ -13,7 +13,7 @@
  */
 
 import { PassThrough, Readable } from 'stream';
-import { extractErrorMessage } from 'react-on-rails/utils';
+import { extractErrorMessage } from './utils.ts';
 import {
   RSCPayloadStreamInfo,
   RSCPayloadCallback,

packages/react-on-rails-pro/src/getReactServerComponent.client.ts

@@ -14,7 +14,7 @@
 
 import * as React from 'react';
 import { createFromReadableStream } from 'react-on-rails-rsc/client.browser';
-import { createRSCPayloadKey, fetch, wrapInNewPromise, extractErrorMessage } from 'react-on-rails/utils';
+import { createRSCPayloadKey, fetch, wrapInNewPromise, extractErrorMessage } from './utils.ts';
 import transformRSCStreamAndReplayConsoleLogs from './transformRSCStreamAndReplayConsoleLogs.ts';
 import { RailsContext } from 'react-on-rails/types';
 

packages/react-on-rails-pro/src/injectRSCPayload.ts

@@ -14,7 +14,7 @@
 
 import { PassThrough } from 'stream';
 import { finished } from 'stream/promises';
-import { createRSCPayloadKey } from 'react-on-rails/utils';
+import { createRSCPayloadKey } from './utils.ts';
 import { PipeableOrReadableStream } from 'react-on-rails/types';
 import RSCRequestTracker from './RSCRequestTracker.ts';
 

packages/react-on-rails-pro/src/utils.ts

@@ -0,0 +1,21 @@
+const customFetch = (...args: Parameters<typeof fetch>) => {
+  const res = fetch(...args);
+  return res;
+};
+
+export { customFetch as fetch };
+
+export const createRSCPayloadKey = (componentName: string, componentProps: unknown, domNodeId?: string) => {
+  return `${componentName}-${JSON.stringify(componentProps)}${domNodeId ? `-${domNodeId}` : ''}`;
+};
+
+export const wrapInNewPromise = <T>(promise: Promise<T>) => {
+  return new Promise<T>((resolve, reject) => {
+    void promise.then(resolve);
+    void promise.catch(reject);
+  });
+};
+
+export const extractErrorMessage = (error: unknown): string => {
+  return error instanceof Error ? error.message : String(error);
+};

packages/react-on-rails-pro/tests/jest.setup.js

@@ -0,0 +1,76 @@
+// If jsdom environment is set and TextEncoder is not defined, then define TextEncoder and TextDecoder
+// The current version of jsdom does not support TextEncoder and TextDecoder
+// The following code will tell us when jsdom supports TextEncoder and TextDecoder
+if (typeof window !== 'undefined' && typeof window.TextEncoder !== 'undefined') {
+  throw new Error('TextEncoder is already defined, remove the polyfill');
+}
+
+// Similarly for MessageChannel
+if (typeof window !== 'undefined' && typeof window.MessageChannel !== 'undefined') {
+  throw new Error('MessageChannel is already defined, remove the polyfill');
+}
+
+if (typeof window !== 'undefined') {
+  // eslint-disable-next-line global-require
+  const { TextEncoder, TextDecoder } = require('util');
+  // eslint-disable-next-line global-require
+  const { Readable } = require('stream');
+  // eslint-disable-next-line global-require
+  const { ReadableStream, ReadableStreamDefaultReader } = require('stream/web');
+
+  // Mock the fetch function to return a ReadableStream instead of Node's Readable stream
+  // This matches browser behavior where fetch responses have ReadableStream bodies
+  // Node's fetch and polyfills like jest-fetch-mock return Node's Readable stream,
+  // so we convert it to a web-standard ReadableStream for consistency
+  // Note: Node's Readable stream exists in node 'stream' built-in module, can be imported as `import { Readable } from 'stream'`
+  jest.mock('../src/utils', () => ({
+    ...jest.requireActual('../src/utils'),
+    fetch: (...args) =>
+      jest
+        .requireActual('../src/utils')
+        .fetch(...args)
+        .then((res) => {
+          const originalBody = res.body;
+          if (originalBody instanceof Readable) {
+            Object.defineProperty(res, 'body', {
+              value: Readable.toWeb(originalBody),
+            });
+          }
+          return res;
+        }),
+  }));
+
+  global.TextEncoder = TextEncoder;
+  global.TextDecoder = TextDecoder;
+
+  // https://github.com/jsdom/jsdom/issues/2448#issuecomment-1703763542
+  global.MessageChannel = jest.fn().mockImplementation(() => {
+    let onmessage;
+    return {
+      port1: {
+        set onmessage(cb) {
+          onmessage = cb;
+        },
+      },
+      port2: {
+        postMessage: (data) => {
+          onmessage?.({ data });
+        },
+      },
+    };
+  });
+  global.ReadableStream = ReadableStream;
+  global.ReadableStreamDefaultReader = ReadableStreamDefaultReader;
+}
+
+if (!['yes', 'true', 'y', 't'].includes(process.env.ENABLE_JEST_CONSOLE || ''.toLowerCase())) {
+  global.console.log('All calls to console have been disabled in jest.setup.js');
+
+  global.console = {
+    log: jest.fn(),
+    error: jest.fn(),
+    warn: jest.fn(),
+    info: jest.fn(),
+    debug: jest.fn(),
+  };
+}

packages/react-on-rails-pro/tests/registerServerComponent.client.test.jsx

@@ -9,10 +9,10 @@ import { screen, act } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import * as path from 'path';
 import * as fs from 'fs';
-import { createNodeReadableStream, getNodeVersion } from './testUtils.js';
-import ReactOnRails from '../src/ReactOnRails.client.ts';
-import registerServerComponent from '../src/pro/registerServerComponent/client.tsx';
-import { clear as clearComponentRegistry } from '../src/pro/ComponentRegistry.ts';
+import { createNodeReadableStream, getNodeVersion } from '../../react-on-rails/tests/testUtils.js';
+import ReactOnRails from '../src/index.ts';
+import registerServerComponent from '../src/registerServerComponent/client.tsx';
+import { clear as clearComponentRegistry } from '../src/ComponentRegistry.ts';
 
 enableFetchMocks();
 

packages/react-on-rails-pro/tests/streamServerRenderedReactComponent.test.jsx

@@ -4,9 +4,9 @@
 
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import streamServerRenderedReactComponent from '../src/pro/streamServerRenderedReactComponent.ts';
-import * as ComponentRegistry from '../src/pro/ComponentRegistry.ts';
-import ReactOnRails from '../src/ReactOnRails.node.ts';
+import streamServerRenderedReactComponent from '../src/streamServerRenderedReactComponent.ts';
+import * as ComponentRegistry from '../src/ComponentRegistry.ts';
+import ReactOnRails from '../src/index.ts';
 
 const AsyncContent = async ({ throwAsyncError }) => {
   await new Promise((resolve) => {