react-on-rails 12.4.0-rc.0 → 12.5.2

package/README.md

@@ -11,6 +11,14 @@
 
 [![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)
 
+# News
+* Project is updated to support Rails 7!
+* **React and Webpack with Ruby on Rails**: The current version of https://github.com/rails/webpacker will soon ship. While it won't be the default for Rails 7, it is not "deprecated." The core webpack configuration has become slimmer, allowing easier extension. If you want to get started today, use the master branch of  [shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh) with `gem "webpacker", "6.0.0.rc.6"` Any updates to get to v6 from this point forward should be simple.
+
+If you have time, please comment on Justin's final proposals for Webpacker v6: [webpacker/pulls/justin808](https://github.com/rails/webpacker/pulls/justin808).
+
+-----
+
 *These are the docs for React on Rails 12. To see the version 11 docs, [click here](https://github.com/shakacode/react_on_rails/tree/11.3.0).*
 
 #### About
@@ -18,20 +26,20 @@ React on Rails integrates Rails with (server rendering of) Facebook's [React](ht
 
 This project is maintained by the software consulting firm [ShakaCode](https://www.shakacode.com). We focus on Ruby on Rails applications with React front-ends, often using TypeScript or ReScript (ReasonML). We also build React Native apps and Gatsby sites. See [our recent work](https://www.shakacode.com/recent-work) for examples of what we do. ShakaCode.com (HiChee.com) is [hiring developers that like working on open-source](https://www.shakacode.com/career/).
 
-Interested in optimizing your webpack setup for React on Rails including code
+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
-and [loadable-components](https://loadable-components.com/) with server-side rendering for SEO and hot-reloading for developers?
+ [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/). Check out [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/).
 
-Feel free to contact Justin Gordon, [justin@shakacode.com](mailto:justin@shakacode.com), maintainer of React on Rails, for more information.
+For more information, feel free to contact Justin Gordon, [justin@shakacode.com](mailto:justin@shakacode.com), maintainer of React on Rails.
 
 # Documentation
 
-See the documentation at [shakacode.com/react-on-rails/docs](https://www.shakacode.com/react-on-rails/docs/).
+See the documentation at **[shakacode.com/react-on-rails/docs](https://www.shakacode.com/react-on-rails/docs/)**.
 
 ## Project Objective
 
-To provide a high performance framework for integrating Ruby on Rails with React via the [**Webpacker**](https://github.com/rails/webpacker) gem especially in regards to React Server-Side Rendering for better SEO and improved performance.
+To provide a high performance framework for integrating Ruby on Rails with React via the [**Webpacker**](https://github.com/rails/webpacker) gem, especially regarding React Server-Side Rendering for better SEO and improved performance.
 
 ## Features and Why React on Rails?
 
@@ -47,7 +55,9 @@ Given that `rails/webpacker` gem already provides basic React integration, why w
 
 See [Rails/Webpacker React Integration Options](https://www.shakacode.com/react-on-rails/docs/guides/rails-webpacker-react-integration-options) for comparisons to other gems.
 
-See the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) for an example of a live implementation and code.
+## Online demo
+* See the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) for an example of a live implementation and code.
+* A deployed version of the project `spec/dummy` which demonstrates several uses of `react_on_rails` is available on heroku [through this link](https://ror-spec-dummy.herokuapp.com/)
 
 ## ShakaCode Forum Premium Content
 _Requires creating a free account._
@@ -55,10 +65,9 @@ _Requires creating a free account._
 * [How to use different versions of a file for client and server rendering](https://forum.shakacode.com/t/how-to-use-different-versions-of-a-file-for-client-and-server-rendering/1352)
 * [How to conditionally render server side based on the device type](https://forum.shakacode.com/t/how-to-conditionally-render-server-side-based-on-the-device-type/1473)
 
-
 ## Prerequisites
 
-Ruby on Rails >=5 and rails/webpacker 4.2+.
+Ruby on Rails >=5, rails/webpacker >= 4.2, Ruby >= 2.7
 
 # Support
 
@@ -85,12 +94,12 @@ The following companies support this open source project, and ShakaCode uses the
 [![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 [ClubHouse](https://clubhouse.io/). If you want to **try ClubHouse 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!
+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).
+ShakaCode is **[hiring passionate software engineers](http://www.shakacode.com/career)** to work on our projects, including [HiChee](https://hichee.com)!
 
 # License
 

package/node_package/lib/ReactOnRails.js

@@ -22,7 +22,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_dom_1 = __importDefault(require("react-dom"));
 var ClientStartup = __importStar(require("./clientStartup"));
 var handleError_1 = __importDefault(require("./handleError"));
 var ComponentRegistry_1 = __importDefault(require("./ComponentRegistry"));
@@ -32,6 +31,8 @@ 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 ctx = context_1.default();
 if (ctx === undefined) {
     throw new Error("The context (usually Window or NodeJS's Global) is undefined.");
@@ -173,9 +174,9 @@ ctx.ReactOnRails = {
     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 ? react_dom_1.default.hydrate : react_dom_1.default.render;
+        var render = hydrate ? reactHydrate_1.default : reactRender_1.default;
         // eslint-disable-next-line react/no-render-return-value
-        return render(reactElement, document.getElementById(domNodeId));
+        return render(document.getElementById(domNodeId), reactElement);
     },
     /**
      * Get the component that you registered

package/node_package/lib/clientStartup.js

@@ -12,6 +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 REACT_ON_RAILS_STORE_ATTRIBUTE = 'data-js-react-on-rails-store';
 function findContext() {
     if (typeof window.ReactOnRails !== 'undefined') {
@@ -108,7 +110,8 @@ function render(el, railsContext) {
                 return;
             }
             // Hydrate if available and was server rendered
-            var shouldHydrate = !!react_dom_1.default.hydrate && !!domNode.innerHTML;
+            // @ts-expect-error potentially present if React 18 or greater
+            var shouldHydrate = !!(react_dom_1.default.hydrate || react_dom_1.default.hydrateRoot) && !!domNode.innerHTML;
             var reactElementOrRouterResult = createReactOutput_1.default({
                 componentObj: componentObj,
                 props: props,
@@ -121,10 +124,10 @@ function render(el, railsContext) {
                 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) {
-                react_dom_1.default.hydrate(reactElementOrRouterResult, domNode);
+                reactHydrate_1.default(domNode, reactElementOrRouterResult);
             }
             else {
-                react_dom_1.default.render(reactElementOrRouterResult, domNode);
+                reactRender_1.default(domNode, reactElementOrRouterResult);
             }
         }
     }

package/node_package/lib/reactHydrate.d.ts

@@ -0,0 +1,2 @@
+import { ReactElement, Component } from 'react';
+export default function reactHydrate(domNode: Element, reactElement: ReactElement): void | Element | Component;

package/node_package/lib/reactHydrate.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_dom_1 = __importDefault(require("react-dom"));
+var supportsReactCreateRoot_1 = __importDefault(require("./supportsReactCreateRoot"));
+function reactHydrate(domNode, reactElement) {
+    if (supportsReactCreateRoot_1.default) {
+        // @ts-expect-error potentially present if React 18 or greater
+        return react_dom_1.default.hydrateRoot(domNode, reactElement);
+    }
+    return react_dom_1.default.hydrate(reactElement, domNode);
+}
+exports.default = reactHydrate;

package/node_package/lib/reactRender.d.ts

@@ -0,0 +1,2 @@
+import { ReactElement, Component } from 'react';
+export default function reactRender(domNode: Element, reactElement: ReactElement): void | Element | Component;

package/node_package/lib/reactRender.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_dom_1 = __importDefault(require("react-dom"));
+var supportsReactCreateRoot_1 = __importDefault(require("./supportsReactCreateRoot"));
+function reactRender(domNode, reactElement) {
+    if (supportsReactCreateRoot_1.default) {
+        // @ts-expect-error potentially present if React 18 or greater
+        var root = react_dom_1.default.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.default = reactRender;

package/node_package/lib/supportsReactCreateRoot.d.ts

@@ -0,0 +1,2 @@
+declare var _default: boolean;
+export default _default;

package/node_package/lib/supportsReactCreateRoot.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_dom_1 = __importDefault(require("react-dom"));
+var reactMajorVersion = parseInt(react_dom_1.default.version.split('.')[0], 10);
+exports.default = reactMajorVersion >= 18;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-on-rails",
-  "version": "12.4.0-rc.0",
+  "version": "12.5.2",
   "description": "react-on-rails JavaScript for react_on_rails Ruby gem",
   "main": "node_package/lib/ReactOnRails.js",
   "directories": {