react-rails 2.6.1 → 2.6.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3ca305d1d6e644b9a6626812de984d9f7df96d230c6d7544906228e5d266a008
-  data.tar.gz: 0adaef4fa3452878dcb2d113f7e383333c297dd4fb245ce669fd0616c2bf4060
+  metadata.gz: 96a680594edd90c4c4b7956ca981b98c39c0be650c2570bcac0640fe4641ba0f
+  data.tar.gz: 0c8153bde6bfaaddb6c86c8450729d9ac2aa336ea976dbc959fe94c0a66907a1
 SHA512:
-  metadata.gz: 9d0584ef2799b453aa22f965594dde71dc3f4895ca0747108bd96b99494df68c2603b27f7146a93aed9c8ef02f632142d408c457beb4eaf7932a714f2ee6ab75
-  data.tar.gz: 400040ce79b9f881197e5bc9f60378427972d3e75804e8683f226eefe8e0af76e71737c236796daf27d977ebfa81d528047b7e5949744f5371e74b118c3c2977
+  metadata.gz: aac97afcf29aa71177ddbac2e11f117cb64fb524cd435701c3c6f70fb81775f870becfd1ba04f5167830b72808b8e8afbcf18c802477335c28d78ee5b0ec6d2e
+  data.tar.gz: 8988ff16c6619dc0ee8df11b060b49107e63524641b90ba497199d1cbbff96b696be61b3b8eb2237ab6b121e636352c07f5a7066426ff5c8c80608d85a7c32fb

data/CHANGELOG.md

@@ -8,6 +8,19 @@
 
 #### Bug Fixes
 
+## 2.6.2
+
+#### New Features
+
+- React 16.14
+- Support for ShakaPacker
+- Preparation for React 18 #1151
+
+#### Bug Fixes
+
+- URI.open instead of open #1099
+- No longer unmount components on Turbolinks navigation #1135
+
 ## 2.6.1
 
 #### Breaking Changes
@@ -112,6 +125,7 @@
 - Call ReactDOM.render() when react_component :prerender option is falsy, instead of ReactDOM.hydrate() #844, #842
 
 ## 2.4.2
+
 #### Bug Fixes
 
 - ReactDOM.hydrate() may not be defined for everyone, it will now use hydrate if it is defined or fallback to render #832
@@ -224,7 +238,6 @@
   // = require components
   ```
 
-
 #### New Features
 
 - Webpacker support:
@@ -471,14 +484,14 @@
 
 - Changed server rendering configuration names #253
 
-  |  Old | New  |
-  | ---- | ---- |
-  | `config.react.timeout` | `config.react.server_renderer_timeout` |
-  | `config.react.max_renderers` | `config.react.server_renderer_pool_size` |
-  | `config.react.react_js` | `config.react.server_renderer_options[:files]` |
-  | `config.react.component_filenames` | `config.react.server_renderer_options[:files]` |
-  | `config.react.replay_console` | `config.react.server_renderer_options[:replay_console]` |
-  | (none) | `config.react.server_renderer` |
+  | Old                                | New                                                     |
+  | ---------------------------------- | ------------------------------------------------------- |
+  | `config.react.timeout`             | `config.react.server_renderer_timeout`                  |
+  | `config.react.max_renderers`       | `config.react.server_renderer_pool_size`                |
+  | `config.react.react_js`            | `config.react.server_renderer_options[:files]`          |
+  | `config.react.component_filenames` | `config.react.server_renderer_options[:files]`          |
+  | `config.react.replay_console`      | `config.react.server_renderer_options[:replay_console]` |
+  | (none)                             | `config.react.server_renderer`                          |
 
 - JSX is transformed by Babel, not JSTransform #295
 
@@ -504,7 +517,6 @@
 - Add `tilt` dependency #248
 - Default prerender pool size to 1 #302
 
-
 ## 1.0.0 (April 7, 2015)
 
 #### New Features

data/README.md

@@ -67,62 +67,60 @@ $ rails new my-app
 $ cd my-app
 ```
 
-##### 2) Add `webpacker` and `react-rails` to your gemfile:
+##### 2) Add `react-rails` to your Gemfile:
 ```ruby
-gem 'webpacker'
 gem 'react-rails'
 ```
+Note: On rails versions < 6.0, You need to add `gem 'webpacker'` to your Gemfile in step 2 above.
 
 ##### 3) Now run the installers:
 
-###### Rails 6.x:
+###### Rails 6.x and 5.x:
 ```
 $ bundle install
-$ rails webpacker:install
-$ rails webpacker:install:react
+$ rails webpacker:install         # OR (on rails version < 5.0) rake webpacker:install
+$ rails webpacker:install:react   # OR (on rails version < 5.0) rake webpacker:install:react
 $ rails generate react:install
 ```
-Note: For Rails 6, You don't need to add `javascript_pack_tag` as in Step 4. Since its already added by default.
 
-###### Rails 5.x:
-```
-$ bundle install
-$ rails webpacker:install       # OR (on rails version < 5.0) rake webpacker:install
-$ rails webpacker:install:react # OR (on rails version < 5.0) rake webpacker:install:react
-$ rails generate react:install
-```
 This gives you:
 
 - `app/javascript/components/` directory for your React components
 - [`ReactRailsUJS`](#ujs) setup in `app/javascript/packs/application.js`
 - `app/javascript/packs/server_rendering.js` for [server-side rendering](#server-side-rendering)
 
-##### 4) Link the JavaScript pack in Rails view using `javascript_pack_tag` [helper](https://github.com/rails/webpacker#usage):
+Note: On rails versions < 6.0, link the JavaScript pack in Rails view using `javascript_pack_tag` [helper](https://github.com/rails/webpacker#usage):
 ```erb
 <!-- application.html.erb in Head tag below turbolinks -->
 <%= javascript_pack_tag 'application' %>
 ```
 
-##### 5) Generate your first component:
+##### 4) Generate your first component:
 ```
 $ rails g react:component HelloWorld greeting:string
 ```
 
-##### 6) You can also generate your component in a subdirectory:
+##### 5) You can also generate your component in a subdirectory:
 ```
 $ rails g react:component my_subdirectory/HelloWorld greeting:string
 ```
 Note: Your component is added to `app/javascript/components/` by default.
 
+Note: If your component is in a subdirectory you will append the directory path to your erb component call.
 
-##### 7) [Render it in a Rails view](#view-helper):
+Example: 
+```
+<%= react_component("my_subdirectory/HelloWorld", { greeting: "Hello from react-rails." }) %>
+```
+
+##### 6) [Render it in a Rails view](#view-helper):
 
 ```erb
 <!-- erb: paste this in view -->
 <%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>
 ```
 
-##### 8) Lets Start the app:
+##### 7) Lets Start the app:
 ```
 $ rails s
 ```
@@ -172,7 +170,10 @@ $ bundle exec rails webpacker:install:typescript
 $ yarn add @types/react @types/react-dom
 ```
 
-Doing this will allow React-Rails to support the .tsx extension.
+Doing this will allow React-Rails to support the .tsx extension. Additionally, it is recommended to add `ts` and `tsx` to the `server_renderer_extensions` in your application configuration:
+```
+config.react.server_renderer_extensions = ["jsx", "js", "tsx", "ts"]
+```
 
 ### Test component
 
@@ -690,11 +691,11 @@ One caveat is that currently you [cannot Server-Side Render along with HMR](http
 ## Related Projects
 
 - [webpacker-react](https://github.com/renchap/webpacker-react): Integration of React with Rails utilizing Webpack with Hot Module Replacement (HMR).
-- [The Free React on Rails Course](https://learnetto.com/users/hrishio/courses/the-free-react-on-rails-5-course) A free video course which teaches the basics of React and how to get started using it in Rails with `react-rails`.
+- [The React on Rails Course](https://learnetto.com/users/hrishio/courses/the-free-react-on-rails-5-course) A video course which teaches the basics of React and how to get started using it in Rails with `react-rails`.
 - [react\_on\_rails](https://github.com/shakacode/react_on_rails): Integration of React with Rails utilizing Webpack, Redux, React-Router.
 - [react-rails-hot-loader](https://github.com/rmosolgo/react-rails-hot-loader) Simple live-reloader for `react-rails`.
 - [react-rails-benchmark_renderer](https://github.com/pboling/react-rails-benchmark_renderer) adds performance instrumentation to server rendering.
-- [Ruby Hyperloop](http://ruby-hyperloop.org/): Use Ruby to build reactive user interfaces with React.
+- [Ruby Hyperstack](https://hyperstack.org/): Use Ruby to build reactive user interfaces with React.
 
 ## Contributing
 

data/lib/assets/javascripts/react_ujs.js

@@ -1,13 +1,13 @@
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("react"), require("react-dom"), require("react-dom/server"));
+		module.exports = factory(require("react-dom"), require("react"), require("react-dom/server"));
 	else if(typeof define === 'function' && define.amd)
-		define(["react", "react-dom", "react-dom/server"], factory);
+		define(["react-dom", "react", "react-dom/server"], factory);
 	else if(typeof exports === 'object')
-		exports["ReactRailsUJS"] = factory(require("react"), require("react-dom"), require("react-dom/server"));
+		exports["ReactRailsUJS"] = factory(require("react-dom"), require("react"), require("react-dom/server"));
 	else
-		root["ReactRailsUJS"] = factory(root["React"], root["ReactDOM"], root["ReactDOMServer"]);
-})(this, function(__WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_5__) {
+		root["ReactRailsUJS"] = factory(root["ReactDOM"], root["React"], root["ReactDOMServer"]);
+})(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_5__, __WEBPACK_EXTERNAL_MODULE_6__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -73,7 +73,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 	__webpack_require__.p = "";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 6);
+/******/ 	return __webpack_require__(__webpack_require__.s = 7);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -106,13 +106,19 @@ module.exports = function(className) {
 
 /***/ }),
 /* 1 */
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
+
+/***/ }),
+/* 2 */
 /***/ (function(module, exports, __webpack_require__) {
 
-var nativeEvents = __webpack_require__(7)
-var pjaxEvents = __webpack_require__(8)
-var turbolinksEvents = __webpack_require__(9)
-var turbolinksClassicDeprecatedEvents = __webpack_require__(11)
-var turbolinksClassicEvents = __webpack_require__(10)
+var nativeEvents = __webpack_require__(8)
+var pjaxEvents = __webpack_require__(9)
+var turbolinksEvents = __webpack_require__(10)
+var turbolinksClassicDeprecatedEvents = __webpack_require__(12)
+var turbolinksClassicEvents = __webpack_require__(11)
 
 // see what things are globally available
 // and setup event handlers to those things
@@ -164,14 +170,14 @@ module.exports = function(ujs) {
 
 
 /***/ }),
-/* 2 */
+/* 3 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // Make a function which:
 // - First tries to require the name
 // - Then falls back to global lookup
 var fromGlobal = __webpack_require__(0)
-var fromRequireContext = __webpack_require__(12)
+var fromRequireContext = __webpack_require__(13)
 
 module.exports = function(reqctx) {
   var fromCtx = fromRequireContext(reqctx)
@@ -195,16 +201,41 @@ module.exports = function(reqctx) {
 
 
 /***/ }),
-/* 3 */
-/***/ (function(module, exports) {
+/* 4 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+/* harmony export (immutable) */ __webpack_exports__["supportsHydration"] = supportsHydration;
+/* harmony export (immutable) */ __webpack_exports__["reactHydrate"] = reactHydrate;
+/* harmony export (immutable) */ __webpack_exports__["createReactRootLike"] = createReactRootLike;
+const ReactDOM = __webpack_require__(1)
 
-/***/ }),
-/* 4 */
-/***/ (function(module, exports) {
+function supportsHydration() {
+  return typeof ReactDOM.hydrate === "function" || typeof ReactDOM.hydrateRoot === "function"
+}
+
+function reactHydrate(node, component) {
+  if (typeof ReactDOM.hydrateRoot === "function") {
+    return ReactDOM.hydrateRoot(node, component)
+  } else {
+    return ReactDOM.hydrate(component, node)
+  }
+}
+
+function createReactRootLike(node) {
+  return ReactDOM.createRoot ? ReactDOM.createRoot(node) : legacyReactRootLike(node)
+}
+
+function legacyReactRootLike(node) {
+  const root = {
+    render(component) {
+      return ReactDOM.render(component, node)
+    }
+  }
+  return root
+}
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_4__;
 
 /***/ }),
 /* 5 */
@@ -214,15 +245,22 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_5__;
 
 /***/ }),
 /* 6 */
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_6__;
+
+/***/ }),
+/* 7 */
 /***/ (function(module, exports, __webpack_require__) {
 
-var React = __webpack_require__(3)
-var ReactDOM = __webpack_require__(4)
-var ReactDOMServer = __webpack_require__(5)
+var React = __webpack_require__(5)
+var ReactDOM = __webpack_require__(1)
+var ReactDOMServer = __webpack_require__(6)
 
-var detectEvents = __webpack_require__(1)
+var detectEvents = __webpack_require__(2)
 var constructorFromGlobal = __webpack_require__(0)
-var constructorFromRequireContextWithGlobalFallback = __webpack_require__(2)
+var constructorFromRequireContextWithGlobalFallback = __webpack_require__(3)
+const { supportsHydration, reactHydrate, createReactRootLike } = __webpack_require__(4)
 
 var ReactRailsUJS = {
   // This attribute holds the name of component which should be mounted
@@ -329,13 +367,14 @@ var ReactRailsUJS = {
           }
         }
 
-        if (hydrate && typeof ReactDOM.hydrate === "function") {
-          component = ReactDOM.hydrate(component, node);
+        if (hydrate && supportsHydration()) {
+          component = reactHydrate(node, component);
         } else {
-          component = ReactDOM.render(component, node);
+          const root = createReactRootLike(node)
+          component = root.render(component);
         }
       }
-    } 
+    }
   },
 
   // Within `searchSelector`, find nodes which have React components
@@ -390,7 +429,7 @@ module.exports = ReactRailsUJS
 
 
 /***/ }),
-/* 7 */
+/* 8 */
 /***/ (function(module, exports) {
 
 module.exports = {
@@ -413,7 +452,7 @@ module.exports = {
 
 
 /***/ }),
-/* 8 */
+/* 9 */
 /***/ (function(module, exports) {
 
 module.exports = {
@@ -433,25 +472,23 @@ module.exports = {
 
 
 /***/ }),
-/* 9 */
+/* 10 */
 /***/ (function(module, exports) {
 
 module.exports = {
   // Turbolinks 5+ got rid of named events (?!)
   setup: function(ujs) {
   	ujs.handleEvent('turbolinks:load', ujs.handleMount);
-    ujs.handleEvent('turbolinks:before-render', ujs.handleUnmount);
   },
 
   teardown: function(ujs) {
   	ujs.removeEvent('turbolinks:load', ujs.handleMount);
-    ujs.removeEvent('turbolinks:before-render', ujs.handleUnmount);
   },
 }
 
 
 /***/ }),
-/* 10 */
+/* 11 */
 /***/ (function(module, exports) {
 
 module.exports = {
@@ -469,7 +506,7 @@ module.exports = {
 
 
 /***/ }),
-/* 11 */
+/* 12 */
 /***/ (function(module, exports) {
 
 module.exports = {
@@ -490,7 +527,7 @@ module.exports = {
 
 
 /***/ }),
-/* 12 */
+/* 13 */
 /***/ (function(module, exports) {
 
 // Load React components by requiring them from "components/", for example: