react-rails 2.6.0 → 2.6.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e9a12a6f724746ed2a189f4827268eb55fb538a80bb21edc2560809349a8f3aa
-  data.tar.gz: aea725c7bb9606e7e98d47b51788860545b58efa50c70d24c1ba599de36c4751
+  metadata.gz: 96a680594edd90c4c4b7956ca981b98c39c0be650c2570bcac0640fe4641ba0f
+  data.tar.gz: 0c8153bde6bfaaddb6c86c8450729d9ac2aa336ea976dbc959fe94c0a66907a1
 SHA512:
-  metadata.gz: df32314ab7e9e039861cd39907d1cf4de240b77188d251cc15cf9ae1eb57dd3180b3c9fdcbffebbe8c148e9f7a8a9aaffae38e6737e9a7635aa8d2511eb102c2
-  data.tar.gz: 9089c5e64403d0040f2f183426f56fcf35542361e029838d3be1bfb01d098c4630515e24d083eefd4e72bbc6eb30752d9f9fcfb0e54cd765516d073e4799b7d8
+  metadata.gz: aac97afcf29aa71177ddbac2e11f117cb64fb524cd435701c3c6f70fb81775f870becfd1ba04f5167830b72808b8e8afbcf18c802477335c28d78ee5b0ec6d2e
+  data.tar.gz: 8988ff16c6619dc0ee8df11b060b49107e63524641b90ba497199d1cbbff96b696be61b3b8eb2237ab6b121e636352c07f5a7066426ff5c8c80608d85a7c32fb

data/CHANGELOG.md

@@ -8,6 +8,39 @@
 
 #### 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
+
+#### New Features
+
+- React 16.9.0
+- Sprockets users get React_UJS 2.6.1
+
+#### Deprecation
+
+- Removed tests for Rails 3, 4, 5.0
+- Removed tests for Sprockets 2
+- Removed tests for Webpacker 1.1, 2
+
+#### Bug Fixes
+
+- React_UJS 2.6.1 still complies with ES5 #1027 #1026 #1016
+- Support RubyGems pattern for Alpha releases when detecting sprockets version #1047
+
 ## 2.6.0
 
 #### Breaking Changes
@@ -15,6 +48,7 @@
 #### New Features
 
 - Typescript component generator #990
+- Enhanced Turbolinks Support #978 #962
 
 #### Deprecation
 
@@ -91,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
@@ -203,7 +238,6 @@
   // = require components
   ```
 
-
 #### New Features
 
 - Webpacker support:
@@ -450,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
 
@@ -483,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,51 +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 and 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 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.
+
+Example: 
+```
+<%= react_component("my_subdirectory/HelloWorld", { greeting: "Hello from react-rails." }) %>
+```
 
-##### 7) [Render it in a Rails view](#view-helper):
+##### 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
 ```
@@ -161,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
 
@@ -658,7 +670,7 @@ yarn install
 ### Undefined Set
 ```
 ExecJS::ProgramError (identifier 'Set' undefined):
-  
+
 (execjs):1
 ```
 If you see any variation of this issue, see [Using TheRubyRacer](#using-therubyracer)
@@ -670,18 +682,20 @@ TheRubyRacer [hasn't updated LibV8](https://github.com/cowboyd/therubyracer/blob
 LibV8 itself is already [beyond version 7](https://github.com/cowboyd/libv8/releases/tag/v7.3.492.27.1) therefore many serverside issues are caused by old JS engines and fixed by using an up to date one such as [MiniRacer](https://github.com/discourse/mini_racer) or [TheRubyRhino](https://github.com/cowboyd/therubyrhino) on JRuby.
 
 ### HMR
-HMR is possible with this gem as it does just pass through to Webpacker. Please open an issue to let us know tips and tricks for it to add to the wiki.
+Hot Module Replacement is [possible with this gem](https://stackoverflow.com/a/54846330/193785) as it does just pass through to Webpacker. Please open an issue to let us know tips and tricks for it to add to the wiki.
+
+Sample repo that shows HMR working with `react-rails`: [https://github.com/edelgado/react-rails-hmr](https://github.com/edelgado/react-rails-hmr)
 
-One example: [Stack Overflow answer with Babel and Webpacker config](https://stackoverflow.com/a/54846330/193785)
+One caveat is that currently you [cannot Server-Side Render along with HMR](https://github.com/reactjs/react-rails/issues/925#issuecomment-415469572). 
 
 ## 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
@@ -236,9 +274,16 @@ var ReactRailsUJS = {
   // This attribute holds which method to use between: ReactDOM.hydrate, ReactDOM.render
   RENDER_ATTR: 'data-hydrate',
 
+  // A unique identifier to identify a node
+  CACHE_ID_ATTR: "data-react-cache-id",
+
+  TURBOLINKS_PERMANENT_ATTR: "data-turbolinks-permanent",
+
   // If jQuery is detected, save a reference to it for event handlers
   jQuery: (typeof window !== 'undefined') && (typeof window.jQuery !== 'undefined') && window.jQuery,
 
+  components: {},
+
   // helper method for the mount and unmount methods to find the
   // `data-react-class` DOM elements
   findDOMNodes: function(searchSelector) {
@@ -304,6 +349,8 @@ var ReactRailsUJS = {
       var propsJson = node.getAttribute(ujs.PROPS_ATTR);
       var props = propsJson && JSON.parse(propsJson);
       var hydrate = node.getAttribute(ujs.RENDER_ATTR);
+      var cacheId = node.getAttribute(ujs.CACHE_ID_ATTR);
+      var turbolinksPermanent = node.hasAttribute(ujs.TURBOLINKS_PERMANENT_ATTR);
 
       if (!constructor) {
         var message = "Cannot find component: '" + className + "'"
@@ -312,10 +359,19 @@ var ReactRailsUJS = {
         }
         throw new Error(message + ". Make sure your component is available to render.")
       } else {
-        if (hydrate && typeof ReactDOM.hydrate === "function") {
-          ReactDOM.hydrate(React.createElement(constructor, props), node);
+        var component = this.components[cacheId];
+        if(component === undefined) {
+          component = React.createElement(constructor, props);
+          if(turbolinksPermanent) {
+            this.components[cacheId] = component;
+          }
+        }
+
+        if (hydrate && supportsHydration()) {
+          component = reactHydrate(node, component);
         } else {
-          ReactDOM.render(React.createElement(constructor, props), node);
+          const root = createReactRootLike(node)
+          component = root.render(component);
         }
       }
     }
@@ -373,7 +429,7 @@ module.exports = ReactRailsUJS
 
 
 /***/ }),
-/* 7 */
+/* 8 */
 /***/ (function(module, exports) {
 
 module.exports = {
@@ -396,7 +452,7 @@ module.exports = {
 
 
 /***/ }),
-/* 8 */
+/* 9 */
 /***/ (function(module, exports) {
 
 module.exports = {
@@ -416,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)
+  	ujs.handleEvent('turbolinks:load', ujs.handleMount);
   },
 
   teardown: function(ujs) {
-    ujs.removeEvent('turbolinks:load', ujs.handleMount)
-    ujs.removeEvent('turbolinks:before-render', ujs.handleUnmount)
+  	ujs.removeEvent('turbolinks:load', ujs.handleMount);
   },
 }
 
 
 /***/ }),
-/* 10 */
+/* 11 */
 /***/ (function(module, exports) {
 
 module.exports = {
@@ -452,7 +506,7 @@ module.exports = {
 
 
 /***/ }),
-/* 11 */
+/* 12 */
 /***/ (function(module, exports) {
 
 module.exports = {
@@ -473,7 +527,7 @@ module.exports = {
 
 
 /***/ }),
-/* 12 */
+/* 13 */
 /***/ (function(module, exports) {
 
 // Load React components by requiring them from "components/", for example: