react-on-rails 12.4.0 → 12.6.0

package/CHANGELOG.md

@@ -17,6 +17,31 @@ Changes since last non-beta release.
 
 *Please add entries here for your pull requests that are not yet released.*
 
+### [12.6.0] - 2022-01-22
+
+### Added
+- A `rendering_props_extension` configuration which takes a module with an `adjust_props_for_client_side_hydration` method, which is used to process props differently for server/client if `prerender` is set to `true`. [PR 1413](https://github.com/shakacode/react_on_rails/pull/1413) by [gscarv13](https://github.com/gscarv13) & [judahmeek](https://github.com/judahmeek).
+
+### [12.5.2] - 2021-12-29
+### Fixed
+- Usage of config.build_production_command for custom command for production builds fixed. [PR 1415](https://github.com/shakacode/react_on_rails/pull/1415) by [judahmeek](https://github.com/judahmeek).
+
+### [12.5.1] - 2021-12-27
+
+### Fixed
+- A fatal server rendering error if running an ReactOnRails >=12.4.0 with ReactOnRails Pro <2.4.0. [PR 1412](https://github.com/shakacode/react_on_rails/pull/1412) by [judahmeek](https://github.com/judahmeek).
+
+### [12.5.0] - 2021-12-26
+
+#### Added
+- Support for React 18, including the changed SSR API. [PR 1409](https://github.com/shakacode/react_on_rails/pull/1409) by [kylemellander](https://github.com/kylemellander).
+- Added webpack configuration files as part of the generator and updated webpacker to version 6. [PR 1404](https://github.com/shakacode/react_on_rails/pull/1404) by [gscarv13](https://github.com/gscarv13).
+- Supports Rails 7.
+
+#### Changed
+- Changed logic of determining the usage of the default rails/webpacker webpack config or a custom command to only check if the config.build_production_command is defined. [PR 1402](https://github.com/shakacode/react_on_rails/pull/1402)by [justin808](https://github.com/justin808) and [gscarv13](https://github.com/gscarv13).
+- Minimimum required Ruby is 2.7 to match lastest rails/webpacker.
+
 ### [12.4.0] - 2021-09-22
 #### Added
 - ScoutAPM tracing support for server rendering [PR 1379](https://github.com/shakacode/react_on_rails/pull/1379) by [justin808](https://github.com/justin808).
@@ -82,7 +107,7 @@ invoked to return the React component. In that case, you won't need to pass any
 [PR 1268](https://github.com/shakacode/react_on_rails/pull/1268) by [justin808](https://github.com/justin808)
 
 See [docs/guides/upgrading-react-on-rails](https://www.shakacode.com/react-on-rails/docs/guides/upgrading-react-on-rails#upgrading-to-v12)
-for details.         
+for details.
 
 #### Other Updates
 * `react_on_rails` fully supports `rails/webpacker`. The example test app in `spec/dummy` was recently converted over to use rails/webpacker v4+. It's a good example of how to leverage rails/webpacker's webpack configuration for server-side rendering.
@@ -974,7 +999,12 @@ Best done with Object destructing:
 ##### Fixed
 - Fix several generator related issues.
 
-[Unreleased]: https://github.com/shakacode/react_on_rails/compare/12.3.0...master
+[Unreleased]: https://github.com/shakacode/react_on_rails/compare/12.6.0...master
+[12.6.0]: https://github.com/shakacode/react_on_rails/compare/12.5.2...12.6.0
+[12.5.2]: https://github.com/shakacode/react_on_rails/compare/12.5.1...12.5.2
+[12.5.1]: https://github.com/shakacode/react_on_rails/compare/12.5.0...12.5.1
+[12.5.0]: https://github.com/shakacode/react_on_rails/compare/12.4.0...12.5.0
+[12.4.0]: https://github.com/shakacode/react_on_rails/compare/12.3.0...12.4.0
 [12.3.0]: https://github.com/shakacode/react_on_rails/compare/12.2.0...12.3.0
 [12.2.0]: https://github.com/shakacode/react_on_rails/compare/12.1.0...12.2.0
 [12.1.0]: https://github.com/shakacode/react_on_rails/compare/12.0.4...12.1.0

package/README.md

@@ -11,6 +11,15 @@
 
 [![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
+* ShakaCode now maintains the official successor to `rails/webpacker`, [`shakapacker`](https://github.com/shakacode/shakapacker).
+* 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 +27,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
  [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/).
+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.
 
-Feel free to contact Justin Gordon, [justin@shakacode.com](mailto:justin@shakacode.com), maintainer of React on Rails, for more information.
+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.
 
 # 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 +56,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,20 +66,19 @@ _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
 
 * [Click to join **React + Rails Slack**](https://reactrails.slack.com/join/shared_invite/enQtNjY3NTczMjczNzYxLTlmYjdiZmY3MTVlMzU2YWE0OWM0MzNiZDI0MzdkZGFiZTFkYTFkOGVjODBmOWEyYWQ3MzA2NGE1YWJjNmVlMGE).
 - [**Subscribe**](https://app.mailerlite.com/webforms/landing/l1d9x5) for announcements of new releases of React on Rails and of our latest [blog articles](https://blog.shakacode.com) and tutorials.
-- **[forum.shakacode.com](https://forum.shakacode.com)**: Post your questions
+- [Discussions](https://github.com/shakacode/react_on_rails/discussions): Post your questions regarding React on Rails
+- **[forum.shakacode.com](https://forum.shakacode.com)**: Other discussions
 - **[@railsonmaui on Twitter](https://twitter.com/railsonmaui)**
 - *See [NEWS.md](https://github.com/shakacode/react_on_rails/tree/master/NEWS.md) for more notes over time.*
 - See [Projects](https://github.com/shakacode/react_on_rails/tree/master/PROJECTS.md) using and [KUDOS](https://github.com/shakacode/react_on_rails/tree/master/KUDOS.md) for React on Rails. Please submit yours! Please edit either page or [email us](mailto:contact@shakacode.com) and we'll add your info. We also **love stars** as it helps us attract new users and contributors.
-- *See [NEWS.md](https://github.com/shakacode/react_on_rails/tree/master/NEWS.md) for more notes over time.*
 
 ## Contributing
 
@@ -85,12 +95,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",
+  "version": "12.6.0",
   "description": "react-on-rails JavaScript for react_on_rails Ruby gem",
   "main": "node_package/lib/ReactOnRails.js",
   "directories": {