Switch to ESM

Author: alexeyr

.github/workflows/lint-js-and-ruby.yml

@@ -90,9 +90,8 @@ jobs:
         run: yarn pack -f react-on-rails.tgz
       - name: Lint package types
         # --profile because we don't care about node10
-        # --ignore-rules CJS default export can't be resolved at the moment,
-        # revisit in 15.0.0
-        run: yarn run attw react-on-rails.tgz --profile node16 --ignore-rules cjs-only-exports-default
+        # --ignore-rules Since Node 20.19.0/22.12.0, this is no longer an error
+        run: yarn run attw react-on-rails.tgz --profile node16 --ignore-rules cjs-resolves-to-esm
       - name: Lint package publishing
         run: yarn run publint --strict react-on-rails.tgz
       # We only download and run Actionlint if there is any difference in GitHub Action workflows

eslint.config.ts

@@ -128,6 +128,12 @@ const config = tsEslint.config([
       'jsx-a11y/anchor-is-valid': 'off',
     },
   },
+  {
+    files: ['node_package/src/**/*'],
+    rules: {
+      'import/extensions': ['error', 'ignorePackages'],
+    },
+  },
   {
     files: ['lib/generators/react_on_rails/templates/**/*'],
     rules: {
@@ -138,7 +144,7 @@ const config = tsEslint.config([
     },
   },
   {
-    files: ['**/*.ts', '**/*.tsx'],
+    files: ['**/*.ts', '**/*.[cm]ts', '**/*.tsx'],
 
     extends: tsEslint.configs.strictTypeChecked,
 
@@ -173,6 +179,13 @@ const config = tsEslint.config([
       '@typescript-eslint/restrict-template-expressions': 'off',
     },
   },
+  {
+    files: ['**/*.c[jt]s'],
+    rules: {
+      // there is a TypeScript error when importing the default export of a .cts file in a .ts file
+      'import/prefer-default-export': 'off',
+    },
+  },
   // must be the last config in the array
   // https://github.com/prettier/eslint-plugin-prettier?tab=readme-ov-file#configuration-new-eslintconfigjs
   prettierRecommended,

jest.config.js

@@ -1,7 +1,12 @@
 const nodeVersion = parseInt(process.version.slice(1), 10);
 
-module.exports = {
+export default {
   preset: 'ts-jest/presets/js-with-ts',
+  globals: {
+    'ts-jest': {
+      tsconfig: 'tsconfig.jest.json',
+    },
+  },
   testEnvironment: 'jsdom',
   setupFiles: ['<rootDir>/node_package/tests/jest.setup.js'],
   // React Server Components tests are compatible with React 19

node_package/scripts/build

@@ -0,0 +1,9 @@
+#!/bin/sh
+
+set -e
+
+yarn run clean
+yarn run tsc --declaration
+echo '{ "type": "module" }' > node_package/lib/esm/package.json
+yarn run tsc -p tsconfig.cjs.json --declaration
+echo '{ "type": "commonjs" }' > node_package/lib/cjs/package.json

node_package/src/Authenticity.ts

@@ -1,4 +1,4 @@
-import type { AuthenticityHeaders } from './types/index';
+import type { AuthenticityHeaders } from './_types.ts';
 
 export default {
   authenticityToken(): string | null {

node_package/src/CallbackRegistry.ts

@@ -1,6 +1,6 @@
-import { ItemRegistrationCallback } from './types';
-import { onPageLoaded, onPageUnloaded } from './pageLifecycle';
-import { getContextAndRailsContext } from './context';
+import { ItemRegistrationCallback } from './_types.ts';
+import { onPageLoaded, onPageUnloaded } from './pageLifecycle.ts';
+import { getContextAndRailsContext } from './context.ts';
 
 /**
  * Represents information about a registered item including its value,

node_package/src/ClientSideRenderer.ts

@@ -1,16 +1,15 @@
 /* eslint-disable max-classes-per-file */
-/* eslint-disable react/no-deprecated,@typescript-eslint/no-deprecated -- while we need to support React 16 */
+/* eslint-disable @typescript-eslint/no-deprecated -- while we need to support React 16 */
 
-import * as ReactDOM from 'react-dom';
 import type { ReactElement } from 'react';
-import type { RailsContext, RegisteredComponent, RenderFunction, Root } from './types';
+import type { RailsContext, RegisteredComponent, RenderFunction, Root } from './_types.ts';
 
-import { getContextAndRailsContext, resetContextAndRailsContext, type Context } from './context';
-import createReactOutput from './createReactOutput';
-import { isServerRenderHash } from './isServerRenderResult';
-import reactHydrateOrRender from './reactHydrateOrRender';
-import { supportsRootApi } from './reactApis';
-import { debugTurbolinks } from './turbolinksUtils';
+import { getContextAndRailsContext, resetContextAndRailsContext, type Context } from './context.ts';
+import createReactOutput from './createReactOutput.ts';
+import { isServerRenderHash } from './isServerRenderResult.ts';
+import { reactHydrateOrRender } from './reactHydrateOrRender.cts';
+import { canHydrate, unmountComponentAtNode, supportsRootApi } from './reactApis.cts';
+import { debugTurbolinks } from './turbolinksUtils.ts';
 
 const REACT_ON_RAILS_STORE_ATTRIBUTE = 'data-js-react-on-rails-store';
 
@@ -101,8 +100,7 @@ class ComponentRenderer {
         }
 
         // Hydrate if available and was server rendered
-        // @ts-expect-error potentially present if React 18 or greater
-        const shouldHydrate = !!(ReactDOM.hydrate || ReactDOM.hydrateRoot) && !!domNode.innerHTML;
+        const shouldHydrate = canHydrate && !!domNode.innerHTML;
 
         const reactElementOrRouterResult = createReactOutput({
           componentObj,
@@ -154,7 +152,7 @@ You should return a React.Component always for the client side entry point.`);
       }
 
       try {
-        ReactDOM.unmountComponentAtNode(domNode);
+        unmountComponentAtNode(domNode);
       } catch (e: unknown) {
         const error = e instanceof Error ? e : new Error('Unknown error');
         console.info(

node_package/src/ComponentRegistry.ts

@@ -1,6 +1,6 @@
-import { type RegisteredComponent, type ReactComponentOrRenderFunction } from './types';
-import isRenderFunction from './isRenderFunction';
-import CallbackRegistry from './CallbackRegistry';
+import { type RegisteredComponent, type ReactComponentOrRenderFunction } from './_types.ts';
+import isRenderFunction from './isRenderFunction.ts';
+import CallbackRegistry from './CallbackRegistry.ts';
 
 const componentRegistry = new CallbackRegistry<RegisteredComponent>('component');
 

node_package/src/RSCClientRoot.ts

@@ -3,9 +3,9 @@
 import * as React from 'react';
 import * as ReactDOMClient from 'react-dom/client';
 import { createFromReadableStream } from 'react-on-rails-rsc/client';
-import { fetch } from './utils';
-import transformRSCStreamAndReplayConsoleLogs from './transformRSCStreamAndReplayConsoleLogs';
-import { RailsContext, RenderFunction } from './types';
+import { fetch } from './utils.ts';
+import transformRSCStreamAndReplayConsoleLogs from './transformRSCStreamAndReplayConsoleLogs.ts';
+import { RailsContext, RenderFunction } from './_types.ts';
 
 const { use } = React;
 

node_package/src/ReactOnRails.client.ts

@@ -1,12 +1,12 @@
 import type { ReactElement } from 'react';
-import * as ClientStartup from './clientStartup';
-import { renderOrHydrateComponent, hydrateStore } from './ClientSideRenderer';
-import ComponentRegistry from './ComponentRegistry';
-import StoreRegistry from './StoreRegistry';
-import buildConsoleReplay from './buildConsoleReplay';
-import createReactOutput from './createReactOutput';
-import Authenticity from './Authenticity';
-import context from './context';
+import * as ClientStartup from './clientStartup.ts';
+import { renderOrHydrateComponent, hydrateStore } from './ClientSideRenderer.ts';
+import ComponentRegistry from './ComponentRegistry.ts';
+import StoreRegistry from './StoreRegistry.ts';
+import buildConsoleReplay from './buildConsoleReplay.ts';
+import createReactOutput from './createReactOutput.ts';
+import Authenticity from './Authenticity.ts';
+import context from './context.ts';
 import type {
   RegisteredComponent,
   RenderResult,
@@ -16,8 +16,8 @@ import type {
   Store,
   StoreGenerator,
   ReactOnRailsOptions,
-} from './types';
-import reactHydrateOrRender from './reactHydrateOrRender';
+} from './_types.ts';
+import { reactHydrateOrRender } from './reactHydrateOrRender.cts';
 
 const ctx = context();
 
@@ -203,5 +203,5 @@ ctx.ReactOnRails.resetOptions();
 
 ClientStartup.clientStartup(ctx);
 
-export * from './types';
+export * from './_types.ts';
 export default ctx.ReactOnRails;