Update react-on-rails import to /client as needed (#1703)

* Update the optimization opportunity warning

* Update react-on-rails import to /client as needed

* Update pack generator

* Fix remaining warning

---------

Co-authored-by: Alexey Romanov <alexey.v.romanov@gmail.com>

Author: alexeyr-ci

CHANGELOG.md

@@ -36,6 +36,10 @@ Changes since the last non-beta release.
 ### Changed
 
 - The global context is now accessed using `globalThis`. [PR 1727](https://github.com/shakacode/react_on_rails/pull/1727) by [alexeyr-ci2](https://github.com/alexeyr-ci2).
+- Generated client packs now import from `react-on-rails/client` instead of `react-on-rails`. [PR 1706](https://github.com/shakacode/react_on_rails/pull/1706) by [alexeyr-ci](https://github.com/alexeyr-ci).
+  - The "optimization opportunity" message when importing the server-side `react-on-rails` instead of `react-on-rails/client` in browsers is now a warning for two reasons:
+    - Make it more prominent
+    - Include a stack trace when clicked
 
 ### [15.0.0-alpha.2] - 2025-03-07
 

docs/guides/how-to-use-different-files-for-client-and-server-rendering.md

@@ -9,7 +9,7 @@ Many projects will have different entry points for client and server rendering.
 Your Client Entry can look like this:
 
 ```js
-import ReactOnRails from 'react-on-rails';
+import ReactOnRails from 'react-on-rails/client';
 import App from './ClientApp';
 ReactOnRails.register({ App });
 ```
@@ -22,7 +22,7 @@ import App from './ServerApp';
 ReactOnRails.register({ App });
 ```
 
-Note that the only difference is on the second line of each of these examples.
+Note that the only difference is in the imports.
 
 ## B. Two Options for Using Webpack Resolve Alias in the Webpack Config
 

docs/javascript/code-splitting.md

@@ -39,7 +39,7 @@ Here's an example of how you might use this in practice:
 #### clientRegistration.js
 
 ```js
-import ReactOnRails from 'node_package/lib/ReactOnRails';
+import ReactOnRails from 'react-on-rails/client';
 import NavigationApp from './NavigationApp';
 
 // Note that we're importing a different RouterApp than in serverRegistration.js
@@ -76,7 +76,7 @@ Note that you should not register a renderer on the server, since there won't be
 #### RouterAppRenderer.jsx
 
 ```jsx
-import ReactOnRails from 'react-on-rails';
+import ReactOnRails from 'react-on-rails/client';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Router from 'react-router/lib/Router';

lib/generators/react_on_rails/templates/base/base/app/javascript/packs/registration.js.tt

@@ -1,4 +1,4 @@
-import ReactOnRails from 'react-on-rails';
+import ReactOnRails from 'react-on-rails/client';
 
 import <%= config[:component_name] %> from '<%= config[:app_relative_path] %>';
 

lib/react_on_rails/packs_generator.rb

@@ -107,7 +107,7 @@ def pack_file_contents(file_path)
       relative_component_path = relative_component_path_from_generated_pack(file_path)
 
       <<~FILE_CONTENT.strip
-        import ReactOnRails from 'react-on-rails';
+        import ReactOnRails from 'react-on-rails/client';
         import #{registered_component_name} from '#{relative_component_path}';
 
         ReactOnRails.register({#{registered_component_name}});

node_package/src/ReactOnRails.full.ts

@@ -5,8 +5,9 @@ import type { RenderParams, RenderResult, ErrorOptions } from './types';
 import Client from './ReactOnRails.client';
 
 if (typeof window !== 'undefined') {
-  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)',
+  // warn to include a collapsed stack trace
+  console.warn(
+    '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). Click this for the stack trace.',
   );
 }
 

spec/dummy/app/views/pages/client_side_hello_world.html.erb

@@ -22,7 +22,7 @@
     <br/>
     <pre>
       import HelloWorld from '../components/HelloWorld';
-      import ReactOnRails from 'react-on-rails';
+      import ReactOnRails from 'react-on-rails/client';
       ReactOnRails.register({ HelloWorld });
     </pre>
   </li>

spec/dummy/app/views/pages/server_side_hello_world.html.erb

@@ -48,7 +48,7 @@
     <br/>
     <pre>
       import HelloWorld from '../components/HelloWorld';
-      import ReactOnRails from 'react-on-rails';
+      import ReactOnRails from 'react-on-rails/client';
       ReactOnRails.register({ HelloWorld });
     </pre>
   </li>

spec/dummy/app/views/pages/server_side_redux_app.html.erb

@@ -37,7 +37,7 @@
     <br/>
     <pre>
     import ReduxApp from './ClientReduxApp';
-    import ReactOnRails from 'react-on-rails';
+    import ReactOnRails from 'react-on-rails/client';
     ReactOnRails.register({ ReduxApp });
     </pre>
   </li>

spec/dummy/app/views/pages/server_side_redux_app_cached.html.erb

@@ -43,7 +43,7 @@
     <br/>
     <pre>
     import ReduxApp from './ClientReduxApp';
-    import ReactOnRails from 'react-on-rails';
+    import ReactOnRails from 'react-on-rails/client';
     ReactOnRails.register({ ReduxApp });
     </pre>
   </li>