From 6b4a0a0b5fcae94cc1d21034a70f1288de78a0b1 Mon Sep 17 00:00:00 2001 From: Roman Kuksin Date: Wed, 12 Feb 2025 17:01:19 +0400 Subject: [PATCH 01/14] ship esm build --- tsconfig.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index 19d0a140ce..a9feda1435 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -5,10 +5,13 @@ "esModuleInterop": false, // needed for Jest tests even though we don't use .tsx "jsx": "react-jsx", + "lib": ["dom", "es2015"], + "module": "Preserve", "noImplicitAny": true, "outDir": "node_package/lib", "strict": true, - "incremental": true + "incremental": true, + "target": "es2015" }, "include": ["node_package/src/**/*"] } From a823bc0e021c75b31126456b5434002443d53191 Mon Sep 17 00:00:00 2001 From: Roman Kuksin Date: Wed, 12 Feb 2025 17:37:25 +0400 Subject: [PATCH 02/14] split exports to 'react-on-rails/server' and 'react-on-rails/client' --- ...ReactOnRails.ts => ReactOnRails.client.ts} | 12 ++++-------- node_package/src/ReactOnRails.node.ts | 6 +++--- node_package/src/ReactOnRails.server.ts | 19 +++++++++++++++++++ package.json | 7 ++++--- 4 files changed, 30 insertions(+), 14 deletions(-) rename node_package/src/{ReactOnRails.ts => ReactOnRails.client.ts} (96%) create mode 100644 node_package/src/ReactOnRails.server.ts diff --git a/node_package/src/ReactOnRails.ts b/node_package/src/ReactOnRails.client.ts similarity index 96% rename from node_package/src/ReactOnRails.ts rename to node_package/src/ReactOnRails.client.ts index 91e5ffcac2..9a307f34c1 100644 --- a/node_package/src/ReactOnRails.ts +++ b/node_package/src/ReactOnRails.client.ts @@ -1,20 +1,16 @@ import type { ReactElement } from 'react'; import * as ClientStartup from './clientStartup'; -import handleError from './handleError'; import ComponentRegistry from './ComponentRegistry'; import StoreRegistry from './StoreRegistry'; -import serverRenderReactComponent from './serverRenderReactComponent'; import buildConsoleReplay from './buildConsoleReplay'; import createReactOutput from './createReactOutput'; import Authenticity from './Authenticity'; import context from './context'; import type { RegisteredComponent, - RenderParams, RenderResult, RenderReturnType, - ErrorOptions, ReactComponentOrRenderFunction, AuthenticityHeaders, Store, @@ -243,8 +239,8 @@ ctx.ReactOnRails = { * Used by server rendering by Rails * @param options */ - serverRenderReactComponent(options: RenderParams): null | string | Promise { - return serverRenderReactComponent(options); + serverRenderReactComponent(): null | string | Promise { + throw new Error('serverRenderReactComponent is not available in "react-on-rails/client". Import "react-on-rails" server-side.'); }, /** @@ -259,8 +255,8 @@ ctx.ReactOnRails = { * Used by Rails to catch errors in rendering * @param options */ - handleError(options: ErrorOptions): string | undefined { - return handleError(options); + handleError(): string | undefined { + throw new Error('handleError is not available in "react-on-rails/client". Import "react-on-rails" server-side.'); }, /** diff --git a/node_package/src/ReactOnRails.node.ts b/node_package/src/ReactOnRails.node.ts index fea963ca05..811b8ca9c4 100644 --- a/node_package/src/ReactOnRails.node.ts +++ b/node_package/src/ReactOnRails.node.ts @@ -1,7 +1,7 @@ -import ReactOnRails from './ReactOnRails'; +import ReactOnRails from './ReactOnRails.server'; import streamServerRenderedReactComponent from './streamServerRenderedReactComponent'; ReactOnRails.streamServerRenderedReactComponent = streamServerRenderedReactComponent; -export * from './ReactOnRails'; -export { default } from './ReactOnRails'; +export * from './ReactOnRails.server'; +export { default } from './ReactOnRails.server'; diff --git a/node_package/src/ReactOnRails.server.ts b/node_package/src/ReactOnRails.server.ts new file mode 100644 index 0000000000..ccbb094b5d --- /dev/null +++ b/node_package/src/ReactOnRails.server.ts @@ -0,0 +1,19 @@ +import handleError from './handleError'; +import serverRenderReactComponent from './serverRenderReactComponent'; +import type { + RenderParams, + RenderResult, + ErrorOptions, +} from './types'; + +import Client from './ReactOnRails.client'; + +if (typeof window !== 'undefined') { + throw new Error('"react-on-rails" is for server-side rendering only. Import "react-on-rails/client".'); +} + +Client.handleError = (options: ErrorOptions): string | undefined => handleError(options); +Client.serverRenderReactComponent = (options: RenderParams): null | string | Promise => serverRenderReactComponent(options); + +export * from "./types"; +export default Client; diff --git a/package.json b/package.json index 247c5034e3..2d1bd1290c 100644 --- a/package.json +++ b/package.json @@ -4,10 +4,11 @@ "description": "react-on-rails JavaScript for react_on_rails Ruby gem", "main": "node_package/lib/ReactOnRails.js", "exports": { - ".": { + "./server": { "node": "./node_package/lib/ReactOnRails.node.js", - "default": "./node_package/lib/ReactOnRails.js" - } + "default": "./node_package/lib/ReactOnRails.server.js" + }, + "./client": "./node_package/lib/ReactOnRails.client.js" }, "directories": { "doc": "docs" From cbcbeed161de59f59c79266caac5873938886716 Mon Sep 17 00:00:00 2001 From: Roman Kuksin Date: Wed, 12 Feb 2025 17:54:01 +0400 Subject: [PATCH 03/14] fix tests; update CHANGELOG --- CHANGELOG.md | 3 +++ .../templates/base/base/app/javascript/packs/server-bundle.js | 2 +- node_package/tests/Authenticity.test.js | 2 +- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9940695f64..8a1bfaf1a4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,9 @@ Please follow the recommendations outlined at [keepachangelog.com](http://keepac Changes since the last non-beta release. #### Fixed +- Reduced bundle size [PR 1697](https://github.com/shakacode/react_on_rails/pull/1697) by [Romex91](https://github.com/Romex91) + - Migrated from CJS to ESM for more compact modules (~1KB improvement) + - Split exports to 'react-on-rails/server' and 'react-on-rails/client' to avoid shipping React server-rendering to browsers (~14KB improvement). - Fix obscure errors by introducing FULL_TEXT_ERRORS [PR 1695](https://github.com/shakacode/react_on_rails/pull/1695) by [Romex91](https://github.com/Romex91). - Disable `esModuleInterop` to increase interoperability [PR 1699](https://github.com/shakacode/react_on_rails/pull/1699) by [alexeyr-ci](https://github.com/alexeyr-ci). - Resolved 14.1.1 incompatibility with eslint & made sure that spec/dummy is linted by eslint. [PR 1693](https://github.com/shakacode/react_on_rails/pull/1693) by [judahmeek](https://github.com/judahmeek). diff --git a/lib/generators/react_on_rails/templates/base/base/app/javascript/packs/server-bundle.js b/lib/generators/react_on_rails/templates/base/base/app/javascript/packs/server-bundle.js index 7d764f1139..08b2020a3e 100644 --- a/lib/generators/react_on_rails/templates/base/base/app/javascript/packs/server-bundle.js +++ b/lib/generators/react_on_rails/templates/base/base/app/javascript/packs/server-bundle.js @@ -1,4 +1,4 @@ -import ReactOnRails from 'react-on-rails'; +import ReactOnRails from 'react-on-rails/server'; import HelloWorld from '../bundles/HelloWorld/components/HelloWorldServer'; diff --git a/node_package/tests/Authenticity.test.js b/node_package/tests/Authenticity.test.js index 551a9ecc4a..120a76249d 100644 --- a/node_package/tests/Authenticity.test.js +++ b/node_package/tests/Authenticity.test.js @@ -1,4 +1,4 @@ -import ReactOnRails from '../src/ReactOnRails'; +import ReactOnRails from '../src/ReactOnRails.client'; const testToken = 'TEST_CSRF_TOKEN'; From 5f0bdf70a33cb04dcff1fccc848b5e4045fda3a9 Mon Sep 17 00:00:00 2001 From: Roman Kuksin Date: Wed, 12 Feb 2025 18:19:20 +0400 Subject: [PATCH 04/14] use ESNext --- tsconfig.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tsconfig.json b/tsconfig.json index a9feda1435..0485c1379d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -5,13 +5,13 @@ "esModuleInterop": false, // needed for Jest tests even though we don't use .tsx "jsx": "react-jsx", - "lib": ["dom", "es2015"], - "module": "Preserve", + "lib": ["dom", "ESNext"], + "module": "NodeNext", "noImplicitAny": true, "outDir": "node_package/lib", "strict": true, "incremental": true, - "target": "es2015" + "target": "ESNext" }, "include": ["node_package/src/**/*"] } From ff0ba720e0bdde86a01010abdc71430c48595977 Mon Sep 17 00:00:00 2001 From: Roman Kuksin Date: Wed, 12 Feb 2025 19:40:08 +0400 Subject: [PATCH 05/14] backward compatibility: do not introduce 'react-on-rails/server' --- .gitignore | 1 + CHANGELOG.md | 2 +- .../base/base/app/javascript/packs/server-bundle.js | 2 +- .../src/{ReactOnRails.server.ts => ReactOnRails.full.ts} | 2 +- node_package/src/ReactOnRails.node.ts | 6 +++--- package.json | 4 ++-- 6 files changed, 9 insertions(+), 8 deletions(-) rename node_package/src/{ReactOnRails.server.ts => ReactOnRails.full.ts} (69%) diff --git a/.gitignore b/.gitignore index b9eb951cc9..ddbdfc283b 100644 --- a/.gitignore +++ b/.gitignore @@ -35,6 +35,7 @@ yalc.lock # IDE .idea/ +.vscode/ # TypeScript *.tsbuildinfo diff --git a/CHANGELOG.md b/CHANGELOG.md index 8a1bfaf1a4..4f7c0046aa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,7 +21,7 @@ Changes since the last non-beta release. #### Fixed - Reduced bundle size [PR 1697](https://github.com/shakacode/react_on_rails/pull/1697) by [Romex91](https://github.com/Romex91) - Migrated from CJS to ESM for more compact modules (~1KB improvement) - - Split exports to 'react-on-rails/server' and 'react-on-rails/client' to avoid shipping React server-rendering to browsers (~14KB improvement). + - Add export option 'react-on-rails/client' to avoid shipping server-rendering code to browsers (~14KB improvement). - Fix obscure errors by introducing FULL_TEXT_ERRORS [PR 1695](https://github.com/shakacode/react_on_rails/pull/1695) by [Romex91](https://github.com/Romex91). - Disable `esModuleInterop` to increase interoperability [PR 1699](https://github.com/shakacode/react_on_rails/pull/1699) by [alexeyr-ci](https://github.com/alexeyr-ci). - Resolved 14.1.1 incompatibility with eslint & made sure that spec/dummy is linted by eslint. [PR 1693](https://github.com/shakacode/react_on_rails/pull/1693) by [judahmeek](https://github.com/judahmeek). diff --git a/lib/generators/react_on_rails/templates/base/base/app/javascript/packs/server-bundle.js b/lib/generators/react_on_rails/templates/base/base/app/javascript/packs/server-bundle.js index 08b2020a3e..7d764f1139 100644 --- a/lib/generators/react_on_rails/templates/base/base/app/javascript/packs/server-bundle.js +++ b/lib/generators/react_on_rails/templates/base/base/app/javascript/packs/server-bundle.js @@ -1,4 +1,4 @@ -import ReactOnRails from 'react-on-rails/server'; +import ReactOnRails from 'react-on-rails'; import HelloWorld from '../bundles/HelloWorld/components/HelloWorldServer'; diff --git a/node_package/src/ReactOnRails.server.ts b/node_package/src/ReactOnRails.full.ts similarity index 69% rename from node_package/src/ReactOnRails.server.ts rename to node_package/src/ReactOnRails.full.ts index ccbb094b5d..18164faab0 100644 --- a/node_package/src/ReactOnRails.server.ts +++ b/node_package/src/ReactOnRails.full.ts @@ -9,7 +9,7 @@ import type { import Client from './ReactOnRails.client'; if (typeof window !== 'undefined') { - throw new Error('"react-on-rails" is for server-side rendering only. Import "react-on-rails/client".'); + console.warn('Optimization opportunity: "react-on-rails" includes server-rendering code. Browser may not need it. See https://forum.shakacode.com/t/how-to-use-different-versions-of-a-file-for-client-and-server-rendering/1352 (requires sign in)'); } Client.handleError = (options: ErrorOptions): string | undefined => handleError(options); diff --git a/node_package/src/ReactOnRails.node.ts b/node_package/src/ReactOnRails.node.ts index 811b8ca9c4..8dad6e20b4 100644 --- a/node_package/src/ReactOnRails.node.ts +++ b/node_package/src/ReactOnRails.node.ts @@ -1,7 +1,7 @@ -import ReactOnRails from './ReactOnRails.server'; +import ReactOnRails from './ReactOnRails.full'; import streamServerRenderedReactComponent from './streamServerRenderedReactComponent'; ReactOnRails.streamServerRenderedReactComponent = streamServerRenderedReactComponent; -export * from './ReactOnRails.server'; -export { default } from './ReactOnRails.server'; +export * from './ReactOnRails.full'; +export { default } from './ReactOnRails.full'; diff --git a/package.json b/package.json index 2d1bd1290c..f908a2c1b3 100644 --- a/package.json +++ b/package.json @@ -4,9 +4,9 @@ "description": "react-on-rails JavaScript for react_on_rails Ruby gem", "main": "node_package/lib/ReactOnRails.js", "exports": { - "./server": { + ".": { "node": "./node_package/lib/ReactOnRails.node.js", - "default": "./node_package/lib/ReactOnRails.server.js" + "default": "./node_package/lib/ReactOnRails.full.js" }, "./client": "./node_package/lib/ReactOnRails.client.js" }, From 7d45d414c558d8c3e25973c84be7736e9b0ded36 Mon Sep 17 00:00:00 2001 From: Roman Kuksin Date: Wed, 12 Feb 2025 19:57:54 +0400 Subject: [PATCH 06/14] nits --- node_package/src/ReactOnRails.full.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/node_package/src/ReactOnRails.full.ts b/node_package/src/ReactOnRails.full.ts index 18164faab0..fc26e95db3 100644 --- a/node_package/src/ReactOnRails.full.ts +++ b/node_package/src/ReactOnRails.full.ts @@ -9,10 +9,19 @@ import type { import Client from './ReactOnRails.client'; if (typeof window !== 'undefined') { - console.warn('Optimization opportunity: "react-on-rails" includes server-rendering code. Browser may not need it. See https://forum.shakacode.com/t/how-to-use-different-versions-of-a-file-for-client-and-server-rendering/1352 (requires sign in)'); + console.log('ReactOnRails: Optimization opportunity: "react-on-rails" includes server-rendering code. Browser may not need it. See https://forum.shakacode.com/t/how-to-use-different-versions-of-a-file-for-client-and-server-rendering/1352 (requires sign in)'); } +/** + * Used by Rails to catch errors in rendering + * @param options + */ Client.handleError = (options: ErrorOptions): string | undefined => handleError(options); + +/** + * Used by server rendering by Rails + * @param options + */ Client.serverRenderReactComponent = (options: RenderParams): null | string | Promise => serverRenderReactComponent(options); export * from "./types"; From 03f9aa375505330960d6883883632e66057c3d63 Mon Sep 17 00:00:00 2001 From: Roman Kuksin Date: Wed, 12 Feb 2025 20:23:33 +0400 Subject: [PATCH 07/14] restore ESM build --- CONTRIBUTING.md | 2 +- node_package/src/ReactOnRails.full.ts | 2 +- package-scripts.yml | 4 ++-- tsconfig.json | 3 ++- 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 02602be7a4..7550a5e29d 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -9,7 +9,7 @@ * After updating code via Git, to prepare all examples: ```sh cd react_on_rails/ -bundle && yarn && rake examples:gen_all && rake node_package && rake +bundle && yarn && rake shakapacker_examples:gen_all && rake node_package && rake ``` See [Dev Initial Setup](#dev-initial-setup) below for, well... initial setup, diff --git a/node_package/src/ReactOnRails.full.ts b/node_package/src/ReactOnRails.full.ts index fc26e95db3..27430b204e 100644 --- a/node_package/src/ReactOnRails.full.ts +++ b/node_package/src/ReactOnRails.full.ts @@ -9,7 +9,7 @@ import type { import Client from './ReactOnRails.client'; if (typeof window !== 'undefined') { - console.log('ReactOnRails: Optimization opportunity: "react-on-rails" includes server-rendering code. Browser may not need it. See https://forum.shakacode.com/t/how-to-use-different-versions-of-a-file-for-client-and-server-rendering/1352 (requires sign in)'); + console.log('ReactOnRails: Optimization opportunity: "react-on-rails" includes ~14KB of server-rendering code. Browser may not need it. See https://forum.shakacode.com/t/how-to-use-different-versions-of-a-file-for-client-and-server-rendering/1352 (requires sign in)'); } /** diff --git a/package-scripts.yml b/package-scripts.yml index 315c37a70f..f5c159a166 100644 --- a/package-scripts.yml +++ b/package-scripts.yml @@ -25,9 +25,9 @@ scripts: # 3. Check if the project is built now; # 4. If it failed, print an error message (still follow https://docs.npmjs.com/cli/v8/using-npm/scripts#best-practices). script: > - [ -f node_package/lib/ReactOnRails.js ] || + [ -f node_package/lib/ReactOnRails.full.js ] || (npm run build >/dev/null 2>&1 || true) && - [ -f node_package/lib/ReactOnRails.js ] || + [ -f node_package/lib/ReactOnRails.full.js ] || { echo 'Building react-on-rails seems to have failed!'; } format: diff --git a/tsconfig.json b/tsconfig.json index 0485c1379d..0e43810fd1 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,7 +6,8 @@ // needed for Jest tests even though we don't use .tsx "jsx": "react-jsx", "lib": ["dom", "ESNext"], - "module": "NodeNext", + "module": "ESNext", + "moduleResolution": "bundler", "noImplicitAny": true, "outDir": "node_package/lib", "strict": true, From 7b392db443199644cdd2affe9f19272b67dfbd27 Mon Sep 17 00:00:00 2001 From: Roman Kuksin Date: Thu, 13 Feb 2025 10:02:20 +0400 Subject: [PATCH 08/14] address review issues --- CHANGELOG.md | 6 ++++-- tsconfig.json | 6 +++--- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4f7c0046aa..167cb87b78 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,10 +18,12 @@ Please follow the recommendations outlined at [keepachangelog.com](http://keepac ### [Unreleased] Changes since the last non-beta release. -#### Fixed +#### Breaking - Reduced bundle size [PR 1697](https://github.com/shakacode/react_on_rails/pull/1697) by [Romex91](https://github.com/Romex91) - - Migrated from CJS to ESM for more compact modules (~1KB improvement) + - Migrated from CJS to ESM for more compact modules (~1KB improvement). **Breaking change:** All dependencies running `require('react-on-rails')` will need to update to ESM `import ReactOnRails from 'react-on-rails'`. - Add export option 'react-on-rails/client' to avoid shipping server-rendering code to browsers (~14KB improvement). + +#### Fixed - Fix obscure errors by introducing FULL_TEXT_ERRORS [PR 1695](https://github.com/shakacode/react_on_rails/pull/1695) by [Romex91](https://github.com/Romex91). - Disable `esModuleInterop` to increase interoperability [PR 1699](https://github.com/shakacode/react_on_rails/pull/1699) by [alexeyr-ci](https://github.com/alexeyr-ci). - Resolved 14.1.1 incompatibility with eslint & made sure that spec/dummy is linted by eslint. [PR 1693](https://github.com/shakacode/react_on_rails/pull/1693) by [judahmeek](https://github.com/judahmeek). diff --git a/tsconfig.json b/tsconfig.json index 0e43810fd1..452c26b9ac 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -5,14 +5,14 @@ "esModuleInterop": false, // needed for Jest tests even though we don't use .tsx "jsx": "react-jsx", - "lib": ["dom", "ESNext"], - "module": "ESNext", + "lib": ["dom", "es2015"], + "module": "es2015", "moduleResolution": "bundler", "noImplicitAny": true, "outDir": "node_package/lib", "strict": true, "incremental": true, - "target": "ESNext" + "target": "es2015" }, "include": ["node_package/src/**/*"] } From 74b326e974320120d8fa98b8ea3a260ac3f70d05 Mon Sep 17 00:00:00 2001 From: Roman Kuksin Date: Thu, 13 Feb 2025 10:06:06 +0400 Subject: [PATCH 09/14] phrasing --- CHANGELOG.md | 2 +- node_package/src/ReactOnRails.full.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 167cb87b78..4a349ae91f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,7 +20,7 @@ Changes since the last non-beta release. #### Breaking - Reduced bundle size [PR 1697](https://github.com/shakacode/react_on_rails/pull/1697) by [Romex91](https://github.com/Romex91) - - Migrated from CJS to ESM for more compact modules (~1KB improvement). **Breaking change:** All dependencies running `require('react-on-rails')` will need to update to ESM `import ReactOnRails from 'react-on-rails'`. + - Migrated from CJS to ESM for more compact modules (~1KB improvement). **Breaking change:** Dropped CJS support. All projects running `require('react-on-rails')` will need to update to ESM `import ReactOnRails from 'react-on-rails'`. - Add export option 'react-on-rails/client' to avoid shipping server-rendering code to browsers (~14KB improvement). #### Fixed diff --git a/node_package/src/ReactOnRails.full.ts b/node_package/src/ReactOnRails.full.ts index 27430b204e..c80c8dd5be 100644 --- a/node_package/src/ReactOnRails.full.ts +++ b/node_package/src/ReactOnRails.full.ts @@ -9,7 +9,7 @@ import type { import Client from './ReactOnRails.client'; if (typeof window !== 'undefined') { - console.log('ReactOnRails: Optimization opportunity: "react-on-rails" includes ~14KB of server-rendering code. Browser may not need it. See https://forum.shakacode.com/t/how-to-use-different-versions-of-a-file-for-client-and-server-rendering/1352 (requires sign in)'); + console.log('Optimization opportunity: "react-on-rails" includes ~14KB of server-rendering code. Browsers may not need it. See https://forum.shakacode.com/t/how-to-use-different-versions-of-a-file-for-client-and-server-rendering/1352 (Requires creating a free account)'); } /** From 17ba3517b4d2de697ef401c63e5d71956c723352 Mon Sep 17 00:00:00 2001 From: Roman Kuksin Date: Thu, 13 Feb 2025 11:34:19 +0400 Subject: [PATCH 10/14] es2015 => es2020 --- tsconfig.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tsconfig.json b/tsconfig.json index 452c26b9ac..cbb31e0c08 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -5,14 +5,14 @@ "esModuleInterop": false, // needed for Jest tests even though we don't use .tsx "jsx": "react-jsx", - "lib": ["dom", "es2015"], - "module": "es2015", + "lib": ["dom", "es2020"], + "module": "es2020", "moduleResolution": "bundler", "noImplicitAny": true, "outDir": "node_package/lib", "strict": true, "incremental": true, - "target": "es2015" + "target": "es2020" }, "include": ["node_package/src/**/*"] } From 7b288103d3c9b96594dd66dba11e74060075cdc1 Mon Sep 17 00:00:00 2001 From: Alexey Romanov Date: Wed, 26 Feb 2025 08:02:02 +0000 Subject: [PATCH 11/14] Revert module system to CJS for now --- tsconfig.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/tsconfig.json b/tsconfig.json index cbb31e0c08..818ea98e1a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,8 +6,7 @@ // needed for Jest tests even though we don't use .tsx "jsx": "react-jsx", "lib": ["dom", "es2020"], - "module": "es2020", - "moduleResolution": "bundler", + "module": "node16", "noImplicitAny": true, "outDir": "node_package/lib", "strict": true, From b411f0677ef4cf073fee4f0e18379e8b452c9598 Mon Sep 17 00:00:00 2001 From: Alexey Romanov Date: Wed, 26 Feb 2025 13:24:33 +0000 Subject: [PATCH 12/14] Use the client import in spec/dummy --- spec/dummy/client/app/packs/client-bundle.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spec/dummy/client/app/packs/client-bundle.js b/spec/dummy/client/app/packs/client-bundle.js index befa836740..93016fe4a2 100644 --- a/spec/dummy/client/app/packs/client-bundle.js +++ b/spec/dummy/client/app/packs/client-bundle.js @@ -4,7 +4,7 @@ import 'jquery'; import 'jquery-ujs'; import '@hotwired/turbo-rails'; -import ReactOnRails from 'react-on-rails'; +import ReactOnRails from 'react-on-rails/client'; import HelloTurboStream from '../startup/HelloTurboStream'; import SharedReduxStore from '../stores/SharedReduxStore'; From bbf32741de0114d6f406c8dcccb911b53193d9f1 Mon Sep 17 00:00:00 2001 From: Alexey Romanov Date: Wed, 26 Feb 2025 14:20:05 +0000 Subject: [PATCH 13/14] Update changelog --- CHANGELOG.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4a349ae91f..50dde4a686 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,10 +18,8 @@ Please follow the recommendations outlined at [keepachangelog.com](http://keepac ### [Unreleased] Changes since the last non-beta release. -#### Breaking -- Reduced bundle size [PR 1697](https://github.com/shakacode/react_on_rails/pull/1697) by [Romex91](https://github.com/Romex91) - - Migrated from CJS to ESM for more compact modules (~1KB improvement). **Breaking change:** Dropped CJS support. All projects running `require('react-on-rails')` will need to update to ESM `import ReactOnRails from 'react-on-rails'`. - - Add export option 'react-on-rails/client' to avoid shipping server-rendering code to browsers (~14KB improvement). +#### Added +- Add export option 'react-on-rails/client' to avoid shipping server-rendering code to browsers (~5KB improvement) [PR 1697](https://github.com/shakacode/react_on_rails/pull/1697) by [Romex91](https://github.com/Romex91). #### Fixed - Fix obscure errors by introducing FULL_TEXT_ERRORS [PR 1695](https://github.com/shakacode/react_on_rails/pull/1695) by [Romex91](https://github.com/Romex91). From 29889db9d0f16bb5b7c92236a137198298aaf7f6 Mon Sep 17 00:00:00 2001 From: Judah Meek Date: Sat, 1 Mar 2025 16:00:21 -0600 Subject: [PATCH 14/14] add client import for test --- node_package/tests/ReactOnRails.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/node_package/tests/ReactOnRails.test.js b/node_package/tests/ReactOnRails.test.js index b81dc2a9aa..c0a12d1158 100644 --- a/node_package/tests/ReactOnRails.test.js +++ b/node_package/tests/ReactOnRails.test.js @@ -6,7 +6,7 @@ import { createStore } from 'redux'; import * as React from 'react'; import * as createReactClass from 'create-react-class'; -import ReactOnRails from '../src/ReactOnRails'; +import ReactOnRails from '../src/ReactOnRails.client'; describe('ReactOnRails', () => { expect.assertions(14);