react-rails 2.7.1 → 3.0.0.rc.0

data/lib/generators/react/component_generator.rb

@@ -1,10 +1,12 @@
+# frozen_string_literal: true
+
 module React
   module Generators
     class ComponentGenerator < ::Rails::Generators::NamedBase
-      source_root File.expand_path '../../templates', __FILE__
+      source_root File.expand_path "../templates", __dir__
       desc <<-DESC.strip_heredoc
       Description:
-          Scaffold a React component into `components/` of your Webpacker source or asset pipeline.
+          Scaffold a React component into `components/` of your Shakapacker source or asset pipeline.
           The generated component will include a basic render function and a PropTypes
           hash to help with development.
 
@@ -46,110 +48,101 @@ module React
       DESC
 
       argument :attributes,
-               :type => :array,
-               :default => [],
-               :banner => 'field[:type] field[:type] ...'
+               type: :array,
+               default: [],
+               banner: "field[:type] field[:type] ..."
 
       class_option :es6,
                    type: :boolean,
                    default: false,
-                   desc: 'Output es6 class based component'
+                   desc: "Output es6 class based component"
 
       class_option :ts,
                    type: :boolean,
                    default: false,
-                   desc: 'Output tsx class based component'
+                   desc: "Output tsx class based component"
 
       class_option :coffee,
                    type: :boolean,
                    default: false,
-                   desc: 'Output coffeescript based component'
+                   desc: "Output coffeescript based component"
 
       REACT_PROP_TYPES = {
-        'node' =>        'PropTypes.node',
-        'bool' =>        'PropTypes.bool',
-        'boolean' =>     'PropTypes.bool',
-        'string' =>      'PropTypes.string',
-        'number' =>      'PropTypes.number',
-        'object' =>      'PropTypes.object',
-        'array' =>       'PropTypes.array',
-        'shape' =>       'PropTypes.shape({})',
-        'element' =>     'PropTypes.element',
-        'func' =>        'PropTypes.func',
-        'function' =>    'PropTypes.func',
-        'any' =>         'PropTypes.any',
-
-        'instanceOf' => ->(type) {
-          'PropTypes.instanceOf(%s)' % type.to_s.camelize
+        "node" => "PropTypes.node",
+        "bool" => "PropTypes.bool",
+        "boolean" => "PropTypes.bool",
+        "string" => "PropTypes.string",
+        "number" => "PropTypes.number",
+        "object" => "PropTypes.object",
+        "array" => "PropTypes.array",
+        "shape" => "PropTypes.shape({})",
+        "element" => "PropTypes.element",
+        "func" => "PropTypes.func",
+        "function" => "PropTypes.func",
+        "any" => "PropTypes.any",
+
+        "instanceOf" => lambda { |type|
+          "PropTypes.instanceOf(#{type.to_s.camelize})"
         },
 
-        'oneOf' => ->(*options) {
-          enums = options.map{ |k| "'#{k.to_s}'" }.join(',')
-          'PropTypes.oneOf([%s])' % enums
+        "oneOf" => lambda { |*options|
+          enums = options.map { |k| "'#{k}'" }.join(",")
+          "PropTypes.oneOf([#{enums}])"
         },
 
-        'oneOfType' => ->(*options) {
-          types = options.map{ |k| "#{lookup(k.to_s, k.to_s)}" }.join(',')
-          'PropTypes.oneOfType([%s])' % types
+        "oneOfType" => lambda { |*options|
+          types = options.map { |k| lookup(k.to_s, k.to_s).to_s }.join(",")
+          "PropTypes.oneOfType([#{types}])"
         }
-      }
+      }.freeze
 
       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) {
+        "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" => lambda { |type|
           type.to_s.camelize
         },
 
-        'oneOf' => ->(*opts) {
-          opts.map{ |k| "'#{k.to_s}'" }.join(" | ")
+        "oneOf" => lambda { |*opts|
+          opts.map { |k| "'#{k}'" }.join(" | ")
         },
 
-        'oneOfType' => ->(*opts) {
-          opts.map{ |k| "#{ts_lookup(k.to_s, k.to_s)}" }.join(" | ")
+        "oneOfType" => lambda { |*opts|
+          opts.map { |k| ts_lookup(k.to_s, k.to_s).to_s }.join(" | ")
         }
-      }
+      }.freeze
 
       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
-          'js.jsx'
-        end
-
-        # Prefer webpacker to sprockets:
-        if webpacker?
+        template_extension = detect_template_extension
+        # Prefer Shakapacker to Sprockets:
+        if shakapacker?
           new_file_name = file_name.camelize
           extension = if options[:coffee]
-            'coffee'
-          elsif options[:ts]
-            'tsx'
-          else
-            'js'
-          end
+                        "coffee"
+                      elsif options[:ts]
+                        "tsx"
+                      else
+                        "js"
+                      end
           target_dir = webpack_configuration.source_path
-            .join('components')
-            .relative_path_from(::Rails.root)
-            .to_s
+                                            .join("components")
+                                            .relative_path_from(::Rails.root)
+                                            .to_s
         else
           new_file_name = file_name
           extension = template_extension
-          target_dir = 'app/assets/javascripts/components'
+          target_dir = "app/assets/javascripts/components"
         end
 
         file_path = File.join(target_dir, class_path, "#{new_file_name}.#{extension}")
@@ -159,7 +152,7 @@ module React
       private
 
       def webpack_configuration
-        Webpacker.respond_to?(:config) ? Webpacker.config : Webpacker::Configuration
+        Shakapacker.respond_to?(:config) ? Shakapacker.config : Shakapacker::Configuration
       end
 
       def component_name
@@ -167,68 +160,68 @@ module React
       end
 
       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|
+        if shakapacker?
+          return %(import * as React from "react"\n) if options[:ts]
+
+          <<~JS
+            import React from "react"
+            import PropTypes from "prop-types"
+          JS
         else
-          ''
+          ""
         end
       end
 
       def file_footer
-        if webpacker?
-          %|export default #{component_name}|
+        if shakapacker?
+          %(export default #{component_name})
         else
-          ''
+          ""
         end
       end
 
-      def webpacker?
-        defined?(Webpacker)
+      def shakapacker?
+        defined?(Shakapacker)
       end
 
       def parse_attributes!
         self.attributes = (attributes || []).map do |attr|
-          name = ''
-          type = ''
-          args = ''
+          args = ""
           args_regex = /(?<args>{.*})/
 
-          name, type = attr.split(':')
+          name, type = attr.split(":")
 
-          if matchdata = args_regex.match(type)
+          if (matchdata = args_regex.match(type))
             args = matchdata[:args]
-            type = type.gsub(args_regex, '')
+            type = type.gsub(args_regex, "")
           end
 
           if options[:ts]
-            { :name => name, :type => ts_lookup(name, type, args), :union => union?(args) }
+            { name: name, type: ts_lookup(name, type, args), union: union?(args) }
           else
-            { :name => name, :type => lookup(type, args) }
+            { name: name, type: lookup(type, args) }
           end
         end
       end
 
-      def union?(args = '')
-        return args.to_s.gsub(/[{}]/, '').split(',').count > 1
+      def union?(args = "")
+        args.to_s.gsub(/[{}]/, "").split(",").count > 1
       end
 
-      def self.ts_lookup(name, type = 'node', args = '')
+      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
+          ts_type = if /^[[:upper:]]/.match?(type)
+                      TYPESCRIPT_TYPES["instanceOf"]
+                    else
+                      TYPESCRIPT_TYPES["node"]
+                    end
         end
 
-        args = args.to_s.gsub(/[{}]/, '').split(',')
+        args = args.to_s.gsub(/[{}]/, "").split(",")
 
         if ts_type.respond_to? :call
-          if args.blank?
-            return ts_type.call(type)
-          end
+          return ts_type.call(type) if args.blank?
 
           ts_type = ts_type.call(*args)
         end
@@ -236,29 +229,41 @@ module React
         ts_type
       end
 
-      def ts_lookup(name, type = 'node', args = '')
+      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]
-         if react_prop_type.blank?
-           if type =~ /^[[:upper:]]/
-             react_prop_type = REACT_PROP_TYPES['instanceOf']
-           else
-             react_prop_type = REACT_PROP_TYPES['node']
-           end
-         end
-
-         options = options.to_s.gsub(/[{}]/, '').split(',')
-
-         react_prop_type = react_prop_type.call(*options) if react_prop_type.respond_to? :call
-         react_prop_type
-       end
-
-       def lookup(type = 'node', options = '')
-         self.class.lookup(type, options)
-       end
+      def self.lookup(type = "node", options = "")
+        react_prop_type = REACT_PROP_TYPES[type]
+        if react_prop_type.blank?
+          react_prop_type = if /^[[:upper:]]/.match?(type)
+                              REACT_PROP_TYPES["instanceOf"]
+                            else
+                              REACT_PROP_TYPES["node"]
+                            end
+        end
+
+        options = options.to_s.gsub(/[{}]/, "").split(",")
+
+        react_prop_type = react_prop_type.call(*options) if react_prop_type.respond_to? :call
+        react_prop_type
+      end
+
+      def lookup(type = "node", options = "")
+        self.class.lookup(type, options)
+      end
+
+      def detect_template_extension
+        if options[:coffee]
+          "js.jsx.coffee"
+        elsif options[:ts]
+          "js.jsx.tsx"
+        elsif options[:es6] || shakapacker?
+          "es6.jsx"
+        else
+          "js.jsx"
+        end
+      end
     end
   end
 end

data/lib/generators/react/install_generator.rb

@@ -1,51 +1,40 @@
+# frozen_string_literal: true
+
 module React
   module Generators
     class InstallGenerator < ::Rails::Generators::Base
-      source_root File.expand_path '../../templates', __FILE__
+      source_root File.expand_path "../templates", __dir__
 
-      desc 'Create default react.js folder layout and prep application.js'
+      desc "Create default react.js folder layout and prep application.js"
 
       class_option :skip_git,
-        type: :boolean,
-        aliases: '-g',
-        default: false,
-        desc: 'Skip Git keeps'
+                   type: :boolean,
+                   aliases: "-g",
+                   default: false,
+                   desc: "Skip Git keeps"
 
       class_option :skip_server_rendering,
-        type: :boolean,
-        default: false,
-        desc: "Don't generate server_rendering.js or config/initializers/react_server_rendering.rb"
-
-      # For Shakapacker below version 7, we need to set relative path for source_entry_path
-      def modify_webpacker_yml
-        webpacker_yml_path = 'config/webpacker.yml'
-        if webpacker? && Pathname.new(webpacker_yml_path).exist?
-          gsub_file(
-            webpacker_yml_path,
-            "source_entry_path: /\n",
-            "source_entry_path: packs\n"
-          )
-          reloaded_webpacker_config
-        end
-      end
+                   type: :boolean,
+                   default: false,
+                   desc: "Don't generate server_rendering.js or config/initializers/react_server_rendering.rb"
 
       # Make an empty `components/` directory in the right place:
       def create_directory
-        components_dir = if webpacker?
-          Pathname.new(javascript_dir).parent.to_s
-        else
-          javascript_dir
-        end
-        empty_directory File.join(components_dir, 'components')
-        unless options[:skip_git]
-          create_file File.join(components_dir, 'components/.keep')
-        end
+        components_dir = if shakapacker?
+                           Pathname.new(javascript_dir).parent.to_s
+                         else
+                           javascript_dir
+                         end
+        empty_directory File.join(components_dir, "components")
+        return if options[:skip_git]
+
+        create_file File.join(components_dir, "components/.keep")
       end
 
       # Add requires, setup UJS
       def setup_react
-        if webpacker?
-          setup_react_webpacker
+        if shakapacker?
+          setup_react_shakapacker
         else
           setup_react_sprockets
         end
@@ -53,36 +42,36 @@ module React
 
       def create_server_rendering
         if options[:skip_server_rendering]
-          return
-        elsif webpacker?
-          ssr_manifest_path = File.join(javascript_dir, 'server_rendering.js')
-          template('server_rendering_pack.js', ssr_manifest_path)
+          nil
+        elsif shakapacker?
+          ssr_manifest_path = File.join(javascript_dir, "server_rendering.js")
+          template("server_rendering_pack.js", ssr_manifest_path)
         else
-          ssr_manifest_path = File.join(javascript_dir, 'server_rendering.js')
-          template('server_rendering.js', ssr_manifest_path)
-          initializer_path = 'config/initializers/react_server_rendering.rb'
-          template('react_server_rendering.rb', initializer_path)
+          ssr_manifest_path = File.join(javascript_dir, "server_rendering.js")
+          template("server_rendering.js", ssr_manifest_path)
+          initializer_path = "config/initializers/react_server_rendering.rb"
+          template("react_server_rendering.rb", initializer_path)
         end
       end
 
       private
 
-      def webpacker?
-        !!defined?(Webpacker)
+      def shakapacker?
+        !!defined?(Shakapacker)
       end
 
       def javascript_dir
-        if webpacker?
-          webpack_source_path
+        if shakapacker?
+          shakapacker_source_path
             .relative_path_from(::Rails.root)
             .to_s
         else
-          'app/assets/javascripts'
+          "app/assets/javascripts"
         end
       end
 
       def manifest
-        Pathname.new(destination_root).join(javascript_dir, 'application.js')
+        Pathname.new(destination_root).join(javascript_dir, "application.js")
       end
 
       def setup_react_sprockets
@@ -91,9 +80,9 @@ module React
         if manifest.exist?
           manifest_contents = File.read(manifest)
 
-          if match = manifest_contents.match(/\/\/=\s+require\s+turbolinks\s+\n/)
+          if (match = manifest_contents.match(%r{//=\s+require\s+turbolinks\s+\n}))
             inject_into_file manifest, require_react, { after: match[0] }
-          elsif match = manifest_contents.match(/\/\/=\s+require_tree[^\n]*/)
+          elsif (match = manifest_contents.match(%r{//=\s+require_tree[^\n]*}))
             inject_into_file manifest, require_react, { before: match[0] }
           else
             append_file manifest, require_react
@@ -103,39 +92,28 @@ module React
         end
 
         components_js = "//= require_tree ./components\n"
-        components_file = File.join(javascript_dir, 'components.js')
+        components_file = File.join(javascript_dir, "components.js")
         create_file components_file, components_js
       end
 
-      WEBPACKER_SETUP_UJS = <<-JS
-// Support component names relative to this directory:
-var componentRequireContext = require.context("components", true);
-var ReactRailsUJS = require("react_ujs");
-ReactRailsUJS.useContext(componentRequireContext);
-JS
+      SHAKAPACKER_SETUP_UJS = <<~JS
+        // Support component names relative to this directory:
+        var componentRequireContext = require.context("components", true);
+        var ReactRailsUJS = require("react_ujs");
+        ReactRailsUJS.useContext(componentRequireContext);
+      JS
 
-      def setup_react_webpacker
+      def setup_react_shakapacker
         `yarn add react_ujs`
         if manifest.exist?
-          append_file(manifest, WEBPACKER_SETUP_UJS)
-        else
-          create_file(manifest, WEBPACKER_SETUP_UJS)
-        end
-      end
-
-      private
-
-      def webpack_source_path
-        if Webpacker.respond_to?(:config)
-          Webpacker.config.source_entry_path # Webpacker >3
+          append_file(manifest, SHAKAPACKER_SETUP_UJS)
         else
-          Webpacker::Configuration.source_path.join(Webpacker::Configuration.entry_path) # Webpacker <3
+          create_file(manifest, SHAKAPACKER_SETUP_UJS)
         end
       end
 
-      def reloaded_webpacker_config
-        Webpacker.instance.instance_variable_set(:@config, nil)
-        Webpacker.config
+      def shakapacker_source_path
+        Shakapacker.config.source_entry_path
       end
     end
   end

data/lib/generators/templates/component.es6.jsx

@@ -1,13 +1,12 @@
-<%= file_header %>class <%= component_name %> extends React.Component {
-  render () {
-    return (
-      <React.Fragment>
+<%= file_header %>
+const <%= component_name %> = (props) => {
+  return (
+    <React.Fragment>
 <% attributes.each do |attribute| -%>
-        <%= attribute[:name].titleize %>: {this.props.<%= attribute[:name].camelize(:lower) %>}
+      <%= attribute[:name].titleize %>: {props.<%= attribute[:name].camelize(:lower) %>}
 <% end -%>
-      </React.Fragment>
-    );
-  }
+    </React.Fragment>
+  )
 }
 
 <% if attributes.size > 0 -%>
@@ -17,4 +16,5 @@
 <% end -%>
 };
 <% end -%>
+
 <%= file_footer %>

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

@@ -1,20 +1,20 @@
-<%= file_header %>var <%= component_name %> = createReactClass({
+<%= file_header %>
+function <%= component_name %>(props) {
+  return (
+    <React.Fragment>
+<% attributes.each do |attribute| -%>
+      <%= attribute[:name].titleize %>: {props.<%= attribute[:name].camelize(:lower) %>}
+<% end -%>
+    </React.Fragment>
+  );
+}
+
 <% if attributes.size > 0 -%>
-  propTypes: {
+<%= file_name.camelize %>.propTypes = {
 <% attributes.each_with_index do |attribute, idx| -%>
-    <%= attribute[:name].camelize(:lower) %>: <%= attribute[:type] %><% if (idx < attributes.length-1) %>,<% end %>
+  <%= attribute[:name].camelize(:lower) %>: <%= attribute[:type] %><% if (idx < attributes.length-1) %>,<% end %>
 <% end -%>
-  },
+};
 <% end -%>
 
-  render: function() {
-    return (
-      <React.Fragment>
-<% attributes.each do |attribute| -%>
-        <%= attribute[:name].titleize %>: {this.props.<%= attribute[:name].camelize(:lower) %>}
-<% end -%>
-      </React.Fragment>
-    );
-  }
-});
 <%= file_footer %>

data/lib/generators/templates/react_server_rendering.rb

@@ -1,2 +1,4 @@
+# frozen_string_literal: true
+
 # To render React components in production, precompile the server rendering manifest:
-Rails.application.config.assets.precompile += ['server_rendering.js']
+Rails.application.config.assets.precompile += ["server_rendering.js"]

data/lib/react/jsx/babel_transformer.rb

@@ -1,21 +1,27 @@
-require 'babel/transpiler'
+# frozen_string_literal: true
+
+require "babel/transpiler"
 module React
   module JSX
     # A {React::JSX}-compliant transformer which uses `Babel::Transpiler` to transform JSX.
     class BabelTransformer
-      DEPRECATED_OPTIONS = [:harmony, :strip_types, :asset_path]
-      DEFAULT_TRANSFORM_OPTIONS = { blacklist: ['spec.functionName', 'validation.react', 'strict'] }
+      DEPRECATED_OPTIONS = %i[harmony strip_types asset_path].freeze
+      DEFAULT_TRANSFORM_OPTIONS = { blacklist: ["spec.functionName", "validation.react", "strict"] }.freeze
       def initialize(options)
         if (options.keys & DEPRECATED_OPTIONS).any?
-          ActiveSupport::Deprecation.warn('Setting config.react.jsx_transform_options for :harmony, :strip_types, and :asset_path keys is now deprecated and has no effect with the default Babel Transformer.'+
-                                              'Please use new Babel Transformer options :whitelist, :plugin instead.')
+          ActiveSupport::Deprecation.warn(
+            <<-MSG
+              Setting config.react.jsx_transform_options for :harmony, :strip_types, and :asset_path keys is now deprecated and has no effect with the default Babel Transformer.
+              Please use new Babel Transformer options :whitelist, :plugin instead.
+            MSG
+          )
         end
 
         @transform_options = DEFAULT_TRANSFORM_OPTIONS.merge(options)
       end
 
       def transform(code)
-        Babel::Transpiler.transform(code, @transform_options)['code']
+        Babel::Transpiler.transform(code, @transform_options)["code"]
       end
     end
   end