react-on-rails 13.0.2 → 13.2.0

package/README.md

@@ -9,7 +9,12 @@
 
 ---
 
-[![License](https://img.shields.io/badge/license-mit-green.svg)](LICENSE.md) [![Build Status](https://travis-ci.org/shakacode/react_on_rails.svg?branch=master)](https://travis-ci.org/shakacode/react_on_rails) [![Gem Version](https://badge.fury.io/rb/react_on_rails.svg)](https://badge.fury.io/rb/react_on_rails) [![npm version](https://badge.fury.io/js/react-on-rails.svg)](https://badge.fury.io/js/react-on-rails) [![Code Climate](https://codeclimate.com/github/shakacode/react_on_rails/badges/gpa.svg)](https://codeclimate.com/github/shakacode/react_on_rails) [![Coverage Status](https://coveralls.io/repos/shakacode/react_on_rails/badge.svg?branch=master&service=github)](https://coveralls.io/github/shakacode/react_on_rails?branch=master) [![](https://ruby-gem-downloads-badge.herokuapp.com/react_on_rails?type=total)](https://rubygems.org/gems/react_on_rails)
+[![License](https://img.shields.io/badge/license-mit-green.svg)](LICENSE.md)[![Gem Version](https://badge.fury.io/rb/react_on_rails.svg)](https://badge.fury.io/rb/react_on_rails) [![npm version](https://badge.fury.io/js/react-on-rails.svg)](https://badge.fury.io/js/react-on-rails) [![Code Climate](https://codeclimate.com/github/shakacode/react_on_rails/badges/gpa.svg)](https://codeclimate.com/github/shakacode/react_on_rails) [![Coverage Status](https://coveralls.io/repos/shakacode/react_on_rails/badge.svg?branch=master&service=github)](https://coveralls.io/github/shakacode/react_on_rails?branch=master) [![](https://ruby-gem-downloads-badge.herokuapp.com/react_on_rails?type=total)](https://rubygems.org/gems/react_on_rails)
+
+[![Build Main](https://github.com/shakacode/react_on_rails/actions/workflows/main.yml/badge.svg)](https://github.com/shakacode/react_on_rails/actions/workflows/main.yml)
+[![Build JS Tests](https://github.com/shakacode/react_on_rails/actions/workflows/package-js-tests.yml/badge.svg)](https://github.com/shakacode/react_on_rails/actions/workflows/package-js-tests.yml)
+[![Build Rspec Tests](https://github.com/shakacode/react_on_rails/actions/workflows/rspec-package-specs.yml/badge.svg)](https://github.com/shakacode/react_on_rails/actions/workflows/rspec-package-specs.yml)
+[![Linting](https://github.com/shakacode/react_on_rails/actions/workflows/lint-js-and-ruby.yml/badge.svg)](https://github.com/shakacode/react_on_rails/actions/workflows/lint-js-and-ruby.yml)
 
 # News
 * ShakaCode now maintains the official successor to `rails/webpacker`, [`shakapacker`](https://github.com/shakacode/shakapacker).
@@ -27,7 +32,7 @@ This project is maintained by the software consulting firm [ShakaCode](https://w
 Are you interested in optimizing your webpack setup for React on Rails including code
 splitting with [react-router](https://github.com/ReactTraining/react-router#readme) and
  [loadable-components](https://loadable-components.com/) with server-side rendering for SEO and hot-reloading for developers?
-We did this for Popmenu, [lowering Heroku costs 20-25% while getting a 73% decrease in average response times](https://www.shakacode.com/recent-work/popmenu/). Several years later, Popmenu is serving millions of SSR requests per day React on Rails.
+We did this for Popmenu, [lowering Heroku costs 20-25% while getting a 73% decrease in average response times](https://www.shakacode.com/recent-work/popmenu/). Several years later, Popmenu is serving millions of SSR requests per day with React on Rails.
 
 Check out [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/). For more information, feel free to contact Justin Gordon, [justin@shakacode.com](mailto:justin@shakacode.com), maintainer of React on Rails.
 
@@ -43,9 +48,12 @@ To provide a high performance framework for integrating Ruby on Rails with React
 
 Given that `rails/webpacker` gem already provides basic React integration, why would you use "React on Rails"?
 
+1. Automatic configuration of what bundles are added to the page based on what React components are on the page. This results in faster browser loading time via smaller bundle sizes.
+1. Keep up with the latest changes of different versions of React. React 18 is supported.
 1. Easy passing of props directly from your Rails view to your React components rather than having your Rails view load and then make a separate request to your API.
-1. Tight integration with [shakapacker](https://github.com/shakacode/shakapacker) (or it's predecessor [rails/webpacker](https://github.com/rails/webpacker)).
+Tight integration with [shakapacker](https://github.com/shakacode/shakapacker) (or it's predecessor [rails/webpacker](https://github.com/rails/webpacker)).
 1. Server-Side Rendering (SSR), often used for SEO crawler indexing and UX performance.
+1. [Automated optimized entry-point creation and bundle inclusion when placing a component on a page. With this feature, you no longer need to configure `javascript_pack_tags` and `stylesheet_pack_tags` on your layouts based on what’s shown. “It just works!”](https://www.shakacode.com/react-on-rails/docs/guides/file-system-based-automated-bundle-generation.md)
 1. [Redux](https://github.com/reactjs/redux) and [React Router](https://github.com/ReactTraining/react-router#readme) integration with server-side-rendering.
 1. [Internationalization (I18n) and (localization)](https://www.shakacode.com/react-on-rails/docs/guides/i18n)
 1. A supportive community. This [web search shows how live public sites are using React on Rails](https://publicwww.com/websites/%22react-on-rails%22++-undeveloped.com+depth%3Aall/).
@@ -65,7 +73,7 @@ _Requires creating a free account._
 
 ## Prerequisites
 
-Ruby on Rails >=5, rails/webpacker >= 4.2, Ruby >= 2.7
+Ruby on Rails >=5, rails/webpacker >= 4.2 or shakapacker > 6, Ruby >= 2.7
 
 # Support
 
@@ -81,24 +89,41 @@ Ruby on Rails >=5, rails/webpacker >= 4.2, Ruby >= 2.7
 
 Bug reports and pull requests are welcome. See [Contributing](https://github.com/shakacode/react_on_rails/tree/master/CONTRIBUTING.md) to get started, and the [list of help wanted issues](https://github.com/shakacode/react_on_rails/labels/contributions%3A%20up%20for%20grabs%21).
 
-# Supporters
-
-The following companies support this open source project, and ShakaCode uses their products! Justin writes React on Rails on [RubyMine](https://www.jetbrains.com/ruby/). We use [Scout](https://scoutapp.com/) to monitor the live performance of [HiChee.com](https://HiChee.com), [Rails AutoScale](https://railsautoscale.com) to scale the dynos of HiChee, and [HoneyBadger](https://www.honeybadger.io/) to monitor application errors. We love [BrowserStack](https://www.browserstack.com) to solve problems with oddball browsers. [Status Hero](https://statushero.com/) keeps the team posted on daily progress; it's so much better than live standups.
-
-[![RubyMine](https://user-images.githubusercontent.com/1118459/114100597-3b0e3000-9860-11eb-9b12-73beb1a184b2.png)](https://www.jetbrains.com/ruby/)
-[![Scout](https://user-images.githubusercontent.com/1118459/41828269-106b40f8-77d0-11e8-8d19-9c4b167ef9d8.png)](https://scoutapp.com/)
-[![Rails AutoScale](https://user-images.githubusercontent.com/1118459/103197530-48dc0e80-488a-11eb-8b1b-a16664b30274.png)](https://railsautoscale.com/)
-[![BrowserStack](https://cloud.githubusercontent.com/assets/1118459/23203304/1261e468-f886-11e6-819e-93b1a3f17da4.png)](https://www.browserstack.com)
-[![HoneyBadger](https://user-images.githubusercontent.com/1118459/114100696-63962a00-9860-11eb-8ac1-75ca02856d8e.png)](https://www.honeybadger.io/)
-[![StatusHero](https://user-images.githubusercontent.com/1118459/126868048-3fe64e54-4d6d-4066-9df2-8cf6fbaeb314.png)](https://statushero.com/)
-
-ShakaCode's favorite project tracking tool is [Shortcut](https://shortcut.com/). If you want to **try Shortcut and get 2 months free beyond the 14-day trial period**, click [here to use ShakaCode's referral code](http://r.clbh.se/mvfoNeH). We're participating in their awesome triple-sided referral program, which you can read about [here](https://clubhouse.io/referral/). By using our [referral code](http://r.clbh.se/mvfoNeH) you'll be supporting ShakaCode and, thus, React on Rails!
-
-Aloha and best wishes from Justin and the ShakaCode team!
-
 # Work with Us
 ShakaCode is **[hiring passionate software engineers](http://www.shakacode.com/career)** to work on our projects, including [HiChee](https://hichee.com)!
 
 # License
 
 The gem is available as open source under the terms of the [MIT License](https://github.com/shakacode/react_on_rails/tree/master/LICENSE.md).
+
+# Supporters
+
+<a href="https://www.jetbrains.com">
+  <img src="https://user-images.githubusercontent.com/4244251/184881139-42e4076b-024b-4b30-8c60-c3cd0e758c0a.png" alt="JetBrains" height="120px">
+</a>
+<a href="https://scoutapp.com">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/4244251/184881147-0d077438-3978-40da-ace9-4f650d2efe2e.png">
+    <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/4244251/184881152-9f2d8fba-88ac-4ba6-873b-22387f8711c5.png">
+    <img alt="ScoutAPM" src="https://user-images.githubusercontent.com/4244251/184881152-9f2d8fba-88ac-4ba6-873b-22387f8711c5.png" height="120px">
+  </picture>
+</a>
+<br />
+<a href="https://www.browserstack.com">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/4244251/184881122-407dcc29-df78-4b20-a9ad-f597b56f6cdb.png">
+    <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/4244251/184881129-e1edf4b7-3ae1-4ea8-9e6d-3595cf01609e.png">
+    <img alt="BrowserStack" src="https://user-images.githubusercontent.com/4244251/184881129-e1edf4b7-3ae1-4ea8-9e6d-3595cf01609e.png" height="55px">
+  </picture>
+</a>
+<a href="https://railsautoscale.com">
+  <img src="https://user-images.githubusercontent.com/4244251/184881144-95c2c25c-9879-4069-864d-4e67d6ed39d2.png" alt="Rails Autoscale" height="55px">
+</a>
+<a href="https://www.honeybadger.io">
+  <img src="https://user-images.githubusercontent.com/4244251/184881133-79ee9c3c-8165-4852-958e-31687b9536f4.png" alt="Honeybadger" height="55px">
+</a>
+
+<br />
+<br />
+
+The following companies support our open source projects, and ShakaCode uses their products!

package/node_package/lib/ReactOnRails.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("./types/index").ReactOnRails;
+declare const _default: import("./types").ReactOnRails;
 export default _default;

package/node_package/lib/ReactOnRails.js

@@ -31,8 +31,7 @@ var buildConsoleReplay_1 = __importDefault(require("./buildConsoleReplay"));
 var createReactOutput_1 = __importDefault(require("./createReactOutput"));
 var Authenticity_1 = __importDefault(require("./Authenticity"));
 var context_1 = __importDefault(require("./context"));
-var reactHydrate_1 = __importDefault(require("./reactHydrate"));
-var reactRender_1 = __importDefault(require("./reactRender"));
+var reactHydrateOrRender_1 = __importDefault(require("./reactHydrateOrRender"));
 var ctx = context_1.default();
 if (ctx === undefined) {
     throw new Error("The context (usually Window or NodeJS's Global) is undefined.");
@@ -77,6 +76,16 @@ ctx.ReactOnRails = {
         if (throwIfMissing === void 0) { throwIfMissing = true; }
         return StoreRegistry_1.default.getStore(name, throwIfMissing);
     },
+    /**
+     * Renders or hydrates the react element passed. In case react version is >=18 will use the new api.
+     * @param domNode
+     * @param reactElement
+     * @param hydrate if true will perform hydration, if false will render
+     * @returns {Root|ReactComponent|ReactElement|null}
+     */
+    reactHydrateOrRender: function (domNode, reactElement, hydrate) {
+        return reactHydrateOrRender_1.default(domNode, reactElement, hydrate);
+    },
     /**
      * Set options for ReactOnRails, typically before you call ReactOnRails.register
      * Available Options:
@@ -159,24 +168,34 @@ ctx.ReactOnRails = {
         StoreRegistry_1.default.clearHydratedStores();
     },
     /**
+     * @example
      * ReactOnRails.render("HelloWorldApp", {name: "Stranger"}, 'app');
      *
      * Does this:
-     *   ReactDOM.render(React.createElement(HelloWorldApp, {name: "Stranger"}),
-     *     document.getElementById('app'))
+     * ```js
+     * ReactDOM.render(React.createElement(HelloWorldApp, {name: "Stranger"}),
+     *   document.getElementById('app'))
+     * ```
+     * under React 16/17 and
+     * ```js
+     * const root = ReactDOMClient.createRoot(document.getElementById('app'))
+     * root.render(React.createElement(HelloWorldApp, {name: "Stranger"}))
+     * return root
+     * ```
+     * under React 18+.
      *
      * @param name Name of your registered component
      * @param props Props to pass to your component
      * @param domNodeId
      * @param hydrate Pass truthy to update server rendered html. Default is falsy
-     * @returns {virtualDomElement} Reference to your component's backing instance
+     * @returns {Root|ReactComponent|ReactElement} Under React 18+: the created React root
+     *   (see "What is a root?" in https://github.com/reactwg/react-18/discussions/5).
+     *   Under React 16/17: Reference to your component's backing instance or `null` for stateless components.
      */
     render: function (name, props, domNodeId, hydrate) {
         var componentObj = ComponentRegistry_1.default.get(name);
         var reactElement = createReactOutput_1.default({ componentObj: componentObj, props: props, domNodeId: domNodeId });
-        var render = hydrate ? reactHydrate_1.default : reactRender_1.default;
-        // eslint-disable-next-line react/no-render-return-value
-        return render(document.getElementById(domNodeId), reactElement);
+        return reactHydrateOrRender_1.default(document.getElementById(domNodeId), reactElement, hydrate);
     },
     /**
      * Get the component that you registered

package/node_package/lib/clientStartup.d.ts

@@ -1,12 +1,14 @@
-import type { ReactOnRails as ReactOnRailsType } from './types/index';
+import type { ReactOnRails as ReactOnRailsType, Root } from './types';
 declare global {
     interface Window {
         ReactOnRails: ReactOnRailsType;
         __REACT_ON_RAILS_EVENT_HANDLERS_RAN_ONCE__?: boolean;
+        roots: Root[];
     }
     namespace NodeJS {
         interface Global {
             ReactOnRails: ReactOnRailsType;
+            roots: Root[];
         }
     }
     namespace Turbolinks {
@@ -15,5 +17,7 @@ declare global {
         }
     }
 }
+declare type Context = Window | NodeJS.Global;
 export declare function reactOnRailsPageLoaded(): void;
-export declare function clientStartup(context: Window | NodeJS.Global): void;
+export declare function clientStartup(context: Context): void;
+export {};

package/node_package/lib/clientStartup.js

@@ -12,8 +12,8 @@ exports.clientStartup = exports.reactOnRailsPageLoaded = void 0;
 var react_dom_1 = __importDefault(require("react-dom"));
 var createReactOutput_1 = __importDefault(require("./createReactOutput"));
 var isServerRenderResult_1 = require("./isServerRenderResult");
-var reactHydrate_1 = __importDefault(require("./reactHydrate"));
-var reactRender_1 = __importDefault(require("./reactRender"));
+var reactHydrateOrRender_1 = __importDefault(require("./reactHydrateOrRender"));
+var reactApis_1 = require("./reactApis");
 var REACT_ON_RAILS_STORE_ATTRIBUTE = 'data-js-react-on-rails-store';
 function findContext() {
     if (typeof window.ReactOnRails !== 'undefined') {
@@ -50,24 +50,17 @@ function turboInstalled() {
 function reactOnRailsHtmlElements() {
     return document.getElementsByClassName('js-react-on-rails-component');
 }
-function forEachReactOnRailsComponentInitialize(fn, railsContext) {
-    var els = reactOnRailsHtmlElements();
-    for (var i = 0; i < els.length; i += 1) {
-        fn(els[i], railsContext);
-    }
-}
-function initializeStore(el, railsContext) {
-    var context = findContext();
-    var name = el.getAttribute(REACT_ON_RAILS_STORE_ATTRIBUTE) || "";
+function initializeStore(el, context, railsContext) {
+    var name = el.getAttribute(REACT_ON_RAILS_STORE_ATTRIBUTE) || '';
     var props = (el.textContent !== null) ? JSON.parse(el.textContent) : {};
     var storeGenerator = context.ReactOnRails.getStoreGenerator(name);
     var store = storeGenerator(props, railsContext);
     context.ReactOnRails.setStore(name, store);
 }
-function forEachStore(railsContext) {
+function forEachStore(context, railsContext) {
     var els = document.querySelectorAll("[" + REACT_ON_RAILS_STORE_ATTRIBUTE + "]");
     for (var i = 0; i < els.length; i += 1) {
-        initializeStore(els[i], railsContext);
+        initializeStore(els[i], context, railsContext);
     }
 }
 function turbolinksVersion5() {
@@ -88,20 +81,18 @@ function delegateToRenderer(componentObj, props, railsContext, domNodeId, trace)
     return false;
 }
 function domNodeIdForEl(el) {
-    return el.getAttribute('data-dom-id') || "";
+    return el.getAttribute('data-dom-id') || '';
 }
 /**
  * Used for client rendering by ReactOnRails. Either calls ReactDOM.hydrate, ReactDOM.render, or
  * delegates to a renderer registered by the user.
- * @param el
  */
-function render(el, railsContext) {
-    var context = findContext();
+function render(el, context, railsContext) {
     // This must match lib/react_on_rails/helper.rb
-    var name = el.getAttribute('data-component-name') || "";
+    var name = el.getAttribute('data-component-name') || '';
     var domNodeId = domNodeIdForEl(el);
     var props = (el.textContent !== null) ? JSON.parse(el.textContent) : {};
-    var trace = el.getAttribute('data-trace') === "true";
+    var trace = el.getAttribute('data-trace') === 'true';
     try {
         var domNode = document.getElementById(domNodeId);
         if (domNode) {
@@ -123,11 +114,11 @@ function render(el, railsContext) {
             if (isServerRenderResult_1.isServerRenderHash(reactElementOrRouterResult)) {
                 throw new Error("You returned a server side type of react-router error: " + JSON.stringify(reactElementOrRouterResult) + "\nYou should return a React.Component always for the client side entry point.");
             }
-            else if (shouldHydrate) {
-                reactHydrate_1.default(domNode, reactElementOrRouterResult);
-            }
             else {
-                reactRender_1.default(domNode, reactElementOrRouterResult);
+                var rootOrElement = reactHydrateOrRender_1.default(domNode, reactElementOrRouterResult, shouldHydrate);
+                if (reactApis_1.supportsRootApi) {
+                    context.roots.push(rootOrElement);
+                }
             }
         }
     }
@@ -137,6 +128,12 @@ function render(el, railsContext) {
         throw e;
     }
 }
+function forEachReactOnRailsComponentRender(context, railsContext) {
+    var els = reactOnRailsHtmlElements();
+    for (var i = 0; i < els.length; i += 1) {
+        render(els[i], context, railsContext);
+    }
+}
 function parseRailsContext() {
     var el = document.getElementById('js-react-on-rails-context');
     if (!el) {
@@ -145,7 +142,7 @@ function parseRailsContext() {
         return null;
     }
     if (!el.textContent) {
-        throw new Error("The HTML element with ID 'js-react-on-rails-context' has no textContent");
+        throw new Error('The HTML element with ID \'js-react-on-rails-context\' has no textContent');
     }
     return JSON.parse(el.textContent);
 }
@@ -155,8 +152,12 @@ function reactOnRailsPageLoaded() {
     // If no react on rails components
     if (!railsContext)
         return;
-    forEachStore(railsContext);
-    forEachReactOnRailsComponentInitialize(render, railsContext);
+    var context = findContext();
+    if (reactApis_1.supportsRootApi) {
+        context.roots = [];
+    }
+    forEachStore(context, railsContext);
+    forEachReactOnRailsComponentRender(context, railsContext);
 }
 exports.reactOnRailsPageLoaded = reactOnRailsPageLoaded;
 function unmount(el) {
@@ -174,9 +175,21 @@ function unmount(el) {
 }
 function reactOnRailsPageUnloaded() {
     debugTurbolinks('reactOnRailsPageUnloaded');
-    var els = reactOnRailsHtmlElements();
-    for (var i = 0; i < els.length; i += 1) {
-        unmount(els[i]);
+    if (reactApis_1.supportsRootApi) {
+        var roots = findContext().roots;
+        // If no react on rails components
+        if (!roots)
+            return;
+        for (var _i = 0, roots_1 = roots; _i < roots_1.length; _i++) {
+            var root = roots_1[_i];
+            root.unmount();
+        }
+    }
+    else {
+        var els = reactOnRailsHtmlElements();
+        for (var i = 0; i < els.length; i += 1) {
+            unmount(els[i]);
+        }
     }
 }
 function renderInit() {

package/node_package/lib/reactApis.d.ts

@@ -0,0 +1 @@
+export declare const supportsRootApi: boolean;

package/node_package/lib/reactApis.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.supportsRootApi = void 0;
+var react_dom_1 = __importDefault(require("react-dom"));
+var reactMajorVersion = ((_a = react_dom_1.default.version) === null || _a === void 0 ? void 0 : _a.split('.')[0]) || 16;
+// TODO: once we require React 18, we can remove this and inline everything guarded by it.
+// Not the default export because others may be added for future React versions.
+// eslint-disable-next-line import/prefer-default-export
+exports.supportsRootApi = reactMajorVersion >= 18;

package/node_package/lib/reactHydrateOrRender.d.ts

@@ -0,0 +1,7 @@
+import type { ReactElement } from 'react';
+import type { RenderReturnType } from './types';
+declare type HydrateOrRenderType = (domNode: Element, reactElement: ReactElement) => RenderReturnType;
+export declare const reactHydrate: HydrateOrRenderType;
+export declare function reactRender(domNode: Element, reactElement: ReactElement): RenderReturnType;
+export default function reactHydrateOrRender(domNode: Element, reactElement: ReactElement, hydrate: boolean): RenderReturnType;
+export {};

package/node_package/lib/reactHydrateOrRender.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reactRender = exports.reactHydrate = void 0;
+var react_dom_1 = __importDefault(require("react-dom"));
+var reactApis_1 = require("./reactApis");
+// TODO: once React dependency is updated to >= 18, we can remove this and just
+// import ReactDOM from 'react-dom/client';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+var reactDomClient;
+if (reactApis_1.supportsRootApi) {
+    // This will never throw an exception, but it's the way to tell Webpack the dependency is optional
+    // https://github.com/webpack/webpack/issues/339#issuecomment-47739112
+    // Unfortunately, it only converts the error to a warning.
+    try {
+        // eslint-disable-next-line global-require,import/no-unresolved
+        reactDomClient = require('react-dom/client');
+    }
+    catch (e) {
+        // We should never get here, but if we do, we'll just use the default ReactDOM
+        // and live with the warning.
+        reactDomClient = react_dom_1.default;
+    }
+}
+exports.reactHydrate = reactApis_1.supportsRootApi ?
+    reactDomClient.hydrateRoot :
+    function (domNode, reactElement) { return react_dom_1.default.hydrate(reactElement, domNode); };
+function reactRender(domNode, reactElement) {
+    if (reactApis_1.supportsRootApi) {
+        var root = reactDomClient.createRoot(domNode);
+        root.render(reactElement);
+        return root;
+    }
+    // eslint-disable-next-line react/no-render-return-value
+    return react_dom_1.default.render(reactElement, domNode);
+}
+exports.reactRender = reactRender;
+function reactHydrateOrRender(domNode, reactElement, hydrate) {
+    return hydrate ? exports.reactHydrate(domNode, reactElement) : reactRender(domNode, reactElement);
+}
+exports.default = reactHydrateOrRender;

package/node_package/lib/types/index.d.ts

@@ -1,4 +1,4 @@
-import type { ReactElement, Component, FunctionComponent, ComponentClass } from 'react';
+import type { ReactElement, ReactNode, Component, FunctionComponent, ComponentClass } from 'react';
 declare type Store = any;
 declare type ReactComponent = FunctionComponent | ComponentClass | string;
 export interface RailsContext {
@@ -86,6 +86,11 @@ export interface RenderResult {
     hasErrors: boolean;
     renderingError?: RenderingError;
 }
+export interface Root {
+    render(children: ReactNode): void;
+    unmount(): void;
+}
+export declare type RenderReturnType = void | Element | Component | Root;
 export interface ReactOnRails {
     register(components: {
         [id: string]: ReactComponentOrRenderFunction;
@@ -93,10 +98,11 @@ export interface ReactOnRails {
     registerStore(stores: {
         [id: string]: Store;
     }): void;
-    getStore(name: string, throwIfMissing: boolean): Store | undefined;
+    getStore(name: string, throwIfMissing?: boolean): Store | undefined;
     setOptions(newOptions: {
         traceTurbolinks: boolean;
     }): void;
+    reactHydrateOrRender(domNode: Element, reactElement: ReactElement, hydrate: boolean): RenderReturnType;
     reactOnRailsPageLoaded(): void;
     authenticityToken(): string | null;
     authenticityHeaders(otherHeaders: {
@@ -106,7 +112,7 @@ export interface ReactOnRails {
     getStoreGenerator(name: string): StoreGenerator;
     setStore(name: string, store: Store): void;
     clearHydratedStores(): void;
-    render(name: string, props: Record<string, string>, domNodeId: string, hydrate: boolean): void | Element | Component;
+    render(name: string, props: Record<string, string>, domNodeId: string, hydrate: boolean): RenderReturnType;
     getComponent(name: string): RegisteredComponent;
     serverRenderReactComponent(options: RenderParams): null | string | Promise<RenderResult>;
     handleError(options: ErrorOptions): string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-on-rails",
-  "version": "13.0.2",
+  "version": "13.2.0",
   "description": "react-on-rails JavaScript for react_on_rails Ruby gem",
   "main": "node_package/lib/ReactOnRails.js",
   "directories": {
@@ -15,10 +15,10 @@
     "@babel/preset-react": "^7.12.10",
     "@babel/types": "^7.12.10",
     "@types/jest": "^26.0.18",
-    "@types/node": "^14.14.11",
     "@types/react": "^16.9.23",
     "@types/react-dom": "^16.9.5",
     "@types/turbolinks": "^5.2.0",
+    "@types/webpack-env": "^1.17.0",
     "@typescript-eslint/eslint-plugin": "^4.10.0",
     "@typescript-eslint/parser": "^4.10.0",
     "babelify": "^10.0.0",