react-rails 2.5.0 → 2.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4ec24b10fa9c28b21210e7040b868bbba41188a8cda1adf822b87b2fab16329f
-  data.tar.gz: dfba8f8728426334b5cba7c789c38769af9a42792b234f97e5bb673aa7c513c1
+  metadata.gz: e9a12a6f724746ed2a189f4827268eb55fb538a80bb21edc2560809349a8f3aa
+  data.tar.gz: aea725c7bb9606e7e98d47b51788860545b58efa50c70d24c1ba599de36c4751
 SHA512:
-  metadata.gz: ccdf22c47cf5ea0c8ed3bfb81ac9a948bc68ae3af4e182eb231d2e0a0d073b2abb81b067a262ee79bbe9c712cfc584312e21fdd575f539ff731f4823dbdf0b1f
-  data.tar.gz: fc762ae39037ff9844b0892eda68dd000a00fe541bba758d0ed00eeaf90434e688b6fa42d90fe6466c6c206a445a32d6802762513dd8ae6e620d01748513af2b
+  metadata.gz: df32314ab7e9e039861cd39907d1cf4de240b77188d251cc15cf9ae1eb57dd3180b3c9fdcbffebbe8c148e9f7a8a9aaffae38e6737e9a7635aa8d2511eb102c2
+  data.tar.gz: 9089c5e64403d0040f2f183426f56fcf35542361e029838d3be1bfb01d098c4630515e24d083eefd4e72bbc6eb30752d9f9fcfb0e54cd765516d073e4799b7d8

data/CHANGELOG.md

@@ -8,13 +8,28 @@
 
 #### Bug Fixes
 
+## 2.6.0
+
+#### Breaking Changes
+
+#### New Features
+
+- Typescript component generator #990
+
+#### Deprecation
+
+#### Bug Fixes
+
+- assert_react_component will not pass tests where the case was different #979
+- action_controller/test_case was accidentally `required` in dev #996
+
 ## 2.5.0
 
 #### Breaking Changes
 
 #### New Features
 
-- React 16.4.2 prebundled #977
+- React 16.8.6 prebundled #977
 - Added `assert_react_component` test helper #957
 - Supports Webpacker 4, Ruby 2.6 #934
 - Supports camelize on ActionController::Parameters #932

data/README.md

@@ -3,12 +3,12 @@
 [![Gem](https://img.shields.io/gem/v/react-rails.svg?style=flat-square)](http://rubygems.org/gems/react-rails)
 [![npm](https://img.shields.io/npm/v/react_ujs.svg?style=flat-square)](https://www.npmjs.com/package/react_ujs)
 [![Build Status](https://img.shields.io/travis/reactjs/react-rails/master.svg?style=flat-square)](https://travis-ci.org/reactjs/react-rails)
-[![Maintainers Wanted](https://img.shields.io/badge/Maintainers-Wanted-red.svg)
+[![Maintainers Wanted](https://img.shields.io/badge/Maintainers-Wanted-red.svg?style=flat-square)]()
 
 
 React-Rails is a flexible tool to use [React](http://facebook.github.io/react/) with Rails. The benefits:
 * Automatically renders React server-side and client-side
-* Supports Webpacker 3.x, 2.x, 1.1+
+* Supports Webpacker 4.x, 3.x, 2.x, 1.1+
 * Supports Sprockets 4.x, 3.x, 2.x
 * Lets you use [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html), [ES6](http://es6-features.org/), [TypeScript](https://www.typescriptlang.org/), [CoffeeScript](http://coffeescript.org/)
 
@@ -40,6 +40,10 @@ A source code example utilizing React-Rails: https://github.com/BookOfGreg/react
 - [Upgrading](#upgrading)
   - [2.3 to 2.4](#23-to-24)
 - [Common Errors](#common-errors)
+  - [During installation](#during-installation)
+  - [Undefined Set](#undefined-set)
+  - [Using TheRubyRacer](#using-therubyracer)
+  - [HMR](#hmr)
 - [Related Projects](#related-projects)
 - [Contributing](#contributing)
 
@@ -64,7 +68,7 @@ $ cd my-app
 ```
 
 ##### 2) Add `webpacker` and `react-rails` to your gemfile:
-```
+```ruby
 gem 'webpacker'
 gem 'react-rails'
 ```
@@ -83,7 +87,7 @@ This gives you:
 - `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):
-```
+```erb
 <!-- application.html.erb in Head tag below turbolinks -->
 <%= javascript_pack_tag 'application' %>
 ```
@@ -102,7 +106,7 @@ Note: Your component is added to `app/javascript/components/` by default.
 
 ##### 7) [Render it in a Rails view](#view-helper):
 
-```
+```erb
 <!-- erb: paste this in view -->
 <%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>
 ```
@@ -192,7 +196,7 @@ end
 
 `react-rails` provides a pre-bundled React.js & a UJS driver to the Rails asset pipeline. Get started by adding the `react-rails` gem:
 
-```
+```ruby
 gem 'react-rails'
 ```
 
@@ -627,6 +631,7 @@ For the vast majority of cases this will get you most of the migration:
 - re-run `bundle exec rails webpacker:install:react` to update npm packages (Webpacker only)
 
 ## Common Errors
+### During installation
 1) While using installers.(rails webpacker:install:react && rails webpacker:install)
 Error:
 ```
@@ -650,6 +655,24 @@ sudo apt-get update && sudo apt-get install yarn
 
 yarn install
 ```
+### Undefined Set
+```
+ExecJS::ProgramError (identifier 'Set' undefined):
+  
+(execjs):1
+```
+If you see any variation of this issue, see [Using TheRubyRacer](#using-therubyracer)
+
+
+### Using TheRubyRacer
+TheRubyRacer [hasn't updated LibV8](https://github.com/cowboyd/therubyracer/blob/master/therubyracer.gemspec#L20) (The library that powers Node.js) from v3 in 2 years, any new features are unlikely to work.
+
+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.
+
+One example: [Stack Overflow answer with Babel and Webpacker config](https://stackoverflow.com/a/54846330/193785)
 
 ## Related Projects
 
@@ -664,7 +687,7 @@ yarn install
 
 🎉 Thanks for taking the time to contribute! 🎉
 
-With 2 Million+ downloads of the react-rails Gem and another 100k+ downloads of react_ujs on NPM, you're helping the biggest React + Rails community!
+With 5 Million+ downloads of the react-rails Gem and another 2 Million+ downloads of react_ujs on NPM, you're helping the biggest React + Rails community!
 
 By contributing to React-Rails, you agree to abide by the [code of conduct](https://github.com/reactjs/react-rails/blob/master/CODE_OF_CONDUCT.md).
 

data/lib/generators/react/component_generator.rb

@@ -55,6 +55,11 @@ module React
                    default: false,
                    desc: 'Output es6 class based component'
 
+      class_option :ts,
+                   type: :boolean,
+                   default: false,
+                   desc: 'Output tsx class based component'
+
       class_option :coffee,
                    type: :boolean,
                    default: false,
@@ -89,9 +94,38 @@ module React
         }
       }
 
+      TYPESCRIPT_TYPES = {
+        'node' =>        'React.ReactNode',
+        'bool' =>        'boolean',
+        'boolean' =>     'boolean',
+        'string' =>      'string',
+        'number' =>      'number',
+        'object' =>      'object',
+        'array' =>       'Array<any>',
+        'shape' =>       'object',
+        'element' =>     'object',
+        'func' =>        'object',
+        'function' =>    'object',
+        'any' =>         'any',
+
+        'instanceOf' => ->(type) {
+          type.to_s.camelize
+        },
+
+        'oneOf' => ->(*opts) {
+          opts.map{ |k| "'#{k.to_s}'" }.join(" | ")
+        },
+
+        'oneOfType' => ->(*opts) {
+          opts.map{ |k| "#{ts_lookup(k.to_s, k.to_s)}" }.join(" | ")
+        }
+      }
+
       def create_component_file
         template_extension = if options[:coffee]
           'js.jsx.coffee'
+        elsif options[:ts]
+          'js.jsx.tsx'
         elsif options[:es6] || webpacker?
           'es6.jsx'
         else
@@ -101,7 +135,13 @@ module React
         # Prefer webpacker to sprockets:
         if webpacker?
           new_file_name = file_name.camelize
-          extension = options[:coffee] ? 'coffee' : 'js'
+          extension = if options[:coffee]
+            'coffee'
+          elsif options[:ts]
+            'tsx'
+          else
+            'js'
+          end
           target_dir = webpack_configuration.source_path
             .join('components')
             .relative_path_from(::Rails.root)
@@ -128,6 +168,7 @@ module React
 
       def file_header
         if webpacker?
+          return %|import * as React from "react"\n| if options[:ts]
           %|import React from "react"\nimport PropTypes from "prop-types"\n|
         else
           ''
@@ -146,23 +187,58 @@ module React
         defined?(Webpacker)
       end
 
-       def parse_attributes!
-         self.attributes = (attributes || []).map do |attr|
-           name = ''
-           type = ''
-           options = ''
-           options_regex = /(?<options>{.*})/
+      def parse_attributes!
+        self.attributes = (attributes || []).map do |attr|
+          name = ''
+          type = ''
+          args = ''
+          args_regex = /(?<args>{.*})/
+
+          name, type = attr.split(':')
+
+          if matchdata = args_regex.match(type)
+            args = matchdata[:args]
+            type = type.gsub(args_regex, '')
+          end
+
+          if options[:ts]
+            { :name => name, :type => ts_lookup(name, type, args), :union => union?(args) }
+          else
+            { :name => name, :type => lookup(type, args) }
+          end
+        end
+      end
+
+      def union?(args = '')
+        return args.to_s.gsub(/[{}]/, '').split(',').count > 1
+      end
 
-           name, type = attr.split(':')
+      def self.ts_lookup(name, type = 'node', args = '')
+        ts_type = TYPESCRIPT_TYPES[type]
+        if ts_type.blank?
+          if type =~ /^[[:upper:]]/
+            ts_type = TYPESCRIPT_TYPES['instanceOf']
+          else
+            ts_type = TYPESCRIPT_TYPES['node']
+          end
+        end
 
-           if matchdata = options_regex.match(type)
-             options = matchdata[:options]
-             type = type.gsub(options_regex, '')
-           end
+        args = args.to_s.gsub(/[{}]/, '').split(',')
 
-           { :name => name, :type => lookup(type, options) }
-         end
-       end
+        if ts_type.respond_to? :call
+          if args.blank?
+            return ts_type.call(type)
+          end
+
+          ts_type = ts_type.call(*args)
+        end
+
+        ts_type
+      end
+
+      def ts_lookup(name, type = 'node', args = '')
+        self.class.ts_lookup(name, type, args)
+      end
 
        def self.lookup(type = 'node', options = '')
          react_prop_type = REACT_PROP_TYPES[type]

data/lib/generators/templates/component.js.jsx.tsx

@@ -0,0 +1,36 @@
+<%= file_header %>
+<% unions = attributes.select{ |a| a[:union] } -%>
+<% if unions.size > 0 -%>
+<% unions.each do |e| -%>
+type <%= e[:name].titleize %> = <%= e[:type]%>
+<% end -%>
+<% end -%>
+
+interface I<%= component_name %>Props {
+<% if attributes.size > 0 -%>
+<% attributes.each do | attribute | -%>
+<% if attribute[:union] -%>
+  <%= attribute[:name].camelize(:lower) %>: <%= attribute[:name].titleize %>;
+<% else -%>
+  <%= attribute[:name].camelize(:lower) %>: <%= attribute[:type] %>;
+<% end -%>
+<% end -%>
+<% end -%>
+}
+
+interface I<%= component_name %>State {
+}
+
+class <%= component_name %> extends React.Component <I<%= component_name %>Props, I<%= component_name %>State> {
+  render() {
+    return (
+      <React.Fragment>
+  <% attributes.each do |attribute| -%>
+      <%= attribute[:name].titleize %>: {this.props.<%= attribute[:name].camelize(:lower) %>}
+  <% end -%>
+    </React.Fragment>
+    );
+  }
+}
+
+<%= file_footer %>

data/lib/react/rails/component_mount.rb

@@ -11,6 +11,10 @@ module React
       attr_accessor :output_buffer
       mattr_accessor :camelize_props_switch
 
+      def initialize
+        @cache_ids = []
+      end
+
       # {ControllerLifecycle} calls these hooks
       # You can use them in custom helper implementations
       def setup(controller)
@@ -40,6 +44,9 @@ module React
             data[:react_class] = name
             data[:react_props] = (props.is_a?(String) ? props : props.to_json)
             data[:hydrate] = 't' if prerender_options
+
+            num_components = @cache_ids.count { |c| c.start_with? name }
+            data[:react_cache_id] = "#{name}-#{num_components}"
           end
         end
         html_tag = html_options[:tag] || :div

data/lib/react/rails/railtie.rb

@@ -58,7 +58,7 @@ module React
 
         ActiveSupport.on_load(:action_view) do
           include ::React::Rails::ViewHelper
-          ActionDispatch::IntegrationTest.send(:include, React::Rails::TestHelper)
+          ActionDispatch::IntegrationTest.send(:include, React::Rails::TestHelper) if ::Rails.env.test?
         end
       end
 

data/lib/react/rails/test_helper.rb

@@ -12,7 +12,6 @@ module React
         assert_select "div[data-react-class=?]", name do |dom|
           if block_given?
             props = JSON.parse(dom.attr("data-react-props"))
-            props.deep_transform_keys! { |key| key.to_s.underscore }
             props.deep_symbolize_keys!
 
             yield(props)

data/lib/react/rails/version.rb

@@ -2,6 +2,6 @@ module React
   module Rails
     # If you change this, make sure to update VERSIONS.md
     # and republish the UJS by updating package.json and `bundle exec rake ujs:publish`
-    VERSION = '2.5.0'
+    VERSION = '2.6.0'
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: react-rails
 version: !ruby/object:Gem::Version
-  version: 2.5.0
+  version: 2.6.0
 platform: ruby
 authors:
 - Paul O’Shannessy
@@ -11,7 +11,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-03-31 00:00:00.000000000 Z
+date: 2019-07-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: appraisal
@@ -146,7 +146,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: 3.0.0
 - !ruby/object:Gem::Dependency
-  name: chromedriver-helper
+  name: webdrivers
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -215,6 +215,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '3.2'
+- !ruby/object:Gem::Dependency
+  name: pry-byebug
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: connection_pool
   requirement: !ruby/object:Gem::Requirement
@@ -310,6 +324,7 @@ files:
 - lib/generators/templates/component.es6.jsx
 - lib/generators/templates/component.js.jsx
 - lib/generators/templates/component.js.jsx.coffee
+- lib/generators/templates/component.js.jsx.tsx
 - lib/generators/templates/react_server_rendering.rb
 - lib/generators/templates/server_rendering.js
 - lib/generators/templates/server_rendering_pack.js