Switch to named imports

docs/api/javascript-api.md

@@ -5,7 +5,7 @@
 Rails has built-in protection for Cross-Site Request Forgery (CSRF), see [Rails Documentation](http://guides.rubyonrails.org/security.html#cross-site-request-forgery-csrf). To nicely utilize this feature in JavaScript requests, React on Rails provides two helpers that can be used as following for POST, PUT or DELETE requests:
 
 ```js
-import ReactOnRails from 'react-on-rails';
+import * as ReactOnRails from 'react-on-rails';
 
 // reads from DOM csrf token generated by Rails in <%= csrf_meta_tags %>
 csrfToken = ReactOnRails.authenticityToken();

docs/getting-started.md

@@ -90,9 +90,9 @@ issue.
 - The `component_name` parameter is a string matching the name you used to expose your React component globally. So, in the above examples, if you had a React component named "HelloWorld", you would register it with the following lines:
 
   ```js
-  import ReactOnRails from 'react-on-rails';
+  import { register } from 'react-on-rails';
   import HelloWorld from './HelloWorld';
-  ReactOnRails.register({ HelloWorld });
+  register({ HelloWorld });
   ```
 
   Exposing your component in this way allows you to reference the component from a Rails view. You can expose as many components as you like, but their names must be unique. See below for the details of how you expose your components via the React on Rails Webpack configuration. You may call `ReactOnRails.register` many times.
@@ -133,8 +133,8 @@ This is how to expose a component to the `react_component` view helper.
 ```javascript
 // app/javascript/packs/hello-world-bundle.js
 import HelloWorld from '../components/HelloWorld';
-import ReactOnRails from 'react-on-rails';
-ReactOnRails.register({ HelloWorld });
+import { register } from 'react-on-rails';
+register({ HelloWorld });
 ```
 
 #### Different Server-Side Rendering Code (and a Server-Specific Bundle)

docs/guides/file-system-based-automated-bundle-generation.md

@@ -103,15 +103,15 @@ app/javascript:
       └── logo.svg
 ```
 
-Previously, many applications would use one pack (webpack entrypoint) for many components. In this example, the`application.js` file manually registers server components, `FooComponentOne`, `BarComponentOne` and `BarComponentTwo`.
+Previously, many applications would use one pack (webpack entrypoint) for many components. In this example, the `application.js` file manually registers server components, `FooComponentOne`, `BarComponentOne` and `BarComponentTwo`.
 
 ```jsx
-import ReactOnRails from 'react-on-rails';
+import { register } from 'react-on-rails';
 import FooComponentOne from '../src/Foo/FooComponentOne';
 import BarComponentOne from '../src/Foo/BarComponentOne';
 import BarComponentTwo from '../src/Foo/BarComponentTwo';
 
-ReactOnRails.register({ FooComponentOne, BarComponentOne, BarComponentTwo });
+register({ FooComponentOne, BarComponentOne, BarComponentTwo });
 ```
 
 Your layout would contain:

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

@@ -9,17 +9,17 @@ 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/client';
+import { register } from 'react-on-rails/client';
 import App from './ClientApp';
-ReactOnRails.register({ App });
+register({ App });
 ```
 
 So your Server Entry can look like:
 
 ```js
-import ReactOnRails from 'react-on-rails';
+import { register } from 'react-on-rails';
 import App from './ServerApp';
-ReactOnRails.register({ App });
+register({ App });
 ```
 
 Note that the only difference is in the imports.

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 'react-on-rails/client';
+import * as ReactOnRails from 'react-on-rails/client';
 import NavigationApp from './NavigationApp';
 
 // Note that we're importing a different RouterApp than in serverRegistration.js
@@ -57,7 +57,7 @@ ReactOnRails.register({
 #### serverRegistration.js
 
 ```js
-import ReactOnRails from 'react-on-rails';
+import * as ReactOnRails from 'react-on-rails';
 import NavigationApp from './NavigationApp';
 
 // Note that we're importing a different RouterApp than in clientRegistration.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/client';
+import * as ReactOnRails from 'react-on-rails/client';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Router from 'react-router/lib/Router';

docs/javascript/react-router.md

@@ -46,7 +46,7 @@ import React from 'react';
 import { renderToString } from 'react-dom/server';
 import { StaticRouter } from 'react-router';
 import { Provider } from 'react-redux';
-import ReactOnRails from 'react-on-rails';
+import * as ReactOnRails from 'react-on-rails';
 
 // App.jsx from src/client/App.jsx
 import App from '../App';

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

@@ -1,8 +1,8 @@
-import ReactOnRails from 'react-on-rails/client';
+import { register } from 'react-on-rails/client';
 
 import <%= config[:component_name] %> from '<%= config[:app_relative_path] %>';
 
 // This is how react_on_rails can see the HelloWorld in the browser.
-ReactOnRails.register({
+register({
   <%= config[:component_name] %>,
 });

lib/generators/react_on_rails/templates/base/base/app/javascript/packs/server-bundle.js

@@ -1,8 +1,8 @@
-import ReactOnRails from 'react-on-rails';
+import { register } from 'react-on-rails';
 
 import HelloWorld from '../bundles/HelloWorld/components/HelloWorldServer';
 
 // This is how react_on_rails can see the HelloWorld in the browser.
-ReactOnRails.register({
+register({
   HelloWorld,
 });

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/client';
+        import * as ReactOnRails from 'react-on-rails/client';
         import #{registered_component_name} from '#{relative_component_path}';
 
         ReactOnRails.register({#{registered_component_name}});
@@ -123,7 +123,8 @@ def create_server_pack
 
     def build_server_pack_content(component_on_server_imports, server_components, client_components)
       content = <<~FILE_CONTENT
-        import ReactOnRails from 'react-on-rails';
+        import * as ReactOnRails from 'react-on-rails';
+        globalThis.ReactOnRails = ReactOnRails;
 
         #{component_on_server_imports.join("\n")}\n
       FILE_CONTENT