react-rails 1.9.0 → 3.2.1

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 app/assets/javascripts/components.
+          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,100 +48,228 @@ 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"
 
       class_option :coffee,
                    type: :boolean,
                    default: false,
-                   desc: 'Output coffeescript based component'
+                   desc: "Output coffeescript based component"
 
       REACT_PROP_TYPES = {
-        "node" =>        'React.PropTypes.node',
-        "bool" =>        'React.PropTypes.bool',
-        "boolean" =>     'React.PropTypes.bool',
-        "string" =>      'React.PropTypes.string',
-        "number" =>      'React.PropTypes.number',
-        "object" =>      'React.PropTypes.object',
-        "array" =>       'React.PropTypes.array',
-        "shape" =>       'React.PropTypes.shape({})',
-        "element" =>     'React.PropTypes.element',
-        "func" =>        'React.PropTypes.func',
-        "function" =>    'React.PropTypes.func',
-        "any" =>         'React.PropTypes.any',
-
-        "instanceOf" => ->(type) {
-          'React.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" => lambda { |*options|
+          enums = options.map { |k| "'#{k}'" }.join(",")
+          "PropTypes.oneOf([#{enums}])"
         },
 
-        "oneOf" => ->(*options) {
-          enums = options.map{|k| "'#{k.to_s}'"}.join(',')
-          'React.PropTypes.oneOf([%s])' % enums
+        "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" => lambda { |type|
+          type.to_s.camelize
         },
 
-        "oneOfType" => ->(*options) {
-          types = options.map{|k| "#{lookup(k.to_s, k.to_s)}" }.join(',')
-          'React.PropTypes.oneOfType([%s])' % types
+        "oneOf" => lambda { |*opts|
+          opts.map { |k| "'#{k}'" }.join(" | ")
         },
-      }
+
+        "oneOfType" => lambda { |*opts|
+          opts.map { |k| ts_lookup(k.to_s, k.to_s).to_s }.join(" | ")
+        }
+      }.freeze
 
       def create_component_file
-        extension = case
-                      when options[:es6]
-                        'es6.jsx'
-                      when options[:coffee]
-                        'js.jsx.coffee'
+        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.jsx'
-                    end
+                        "js"
+                      end
+          target_dir = webpack_configuration.source_path
+                                            .join("components")
+                                            .relative_path_from(::Rails.root)
+                                            .to_s
+        else
+          new_file_name = file_name
+          extension = template_extension
+          target_dir = "app/assets/javascripts/components"
+        end
 
-        file_path = File.join('app/assets/javascripts/components', "#{file_name}.#{extension}")
-        template("component.#{extension}", file_path)
+        file_path = File.join(target_dir, class_path, "#{new_file_name}.#{extension}")
+        template("component.#{template_extension}", file_path)
       end
 
       private
 
-       def parse_attributes!
-         self.attributes = (attributes || []).map do |attr|
-           name, type, options = "", "", ""
-           options_regex = /(?<options>{.*})/
-
-           name, type = attr.split(':')
-
-           if matchdata = options_regex.match(type)
-             options = matchdata[:options]
-             type = type.gsub(options_regex, '')
-           end
-
-           { :name => name, :type => lookup(type, options) }
-         end
-       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 webpack_configuration
+        Shakapacker.respond_to?(:config) ? Shakapacker.config : Shakapacker::Configuration
+      end
+
+      def component_name
+        file_name.camelize
+      end
+
+      def file_header
+        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 shakapacker?
+          %(export default #{component_name})
+        else
+          ""
+        end
+      end
+
+      def shakapacker?
+        defined?(Shakapacker)
+      end
+
+      def parse_attributes!
+        self.attributes = (attributes || []).map do |attr|
+          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 = "")
+        args.to_s.gsub(/[{}]/, "").split(",").count > 1
+      end
+
+      def self.ts_lookup(_name, type = "node", args = "")
+        ts_type = TYPESCRIPT_TYPES[type]
+        if ts_type.blank?
+          ts_type = if /^[[:upper:]]/.match?(type)
+                      TYPESCRIPT_TYPES["instanceOf"]
+                    else
+                      TYPESCRIPT_TYPES["node"]
+                    end
+        end
+
+        args = args.to_s.gsub(/[{}]/, "").split(",")
+
+        if ts_type.respond_to? :call
+          return ts_type.call(type) if args.blank?
+
+          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]
+        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] && es6_enabled?
+          "es6.tsx"
+        elsif options[:ts]
+          "js.jsx.tsx"
+        elsif es6_enabled?
+          "es6.jsx"
+        else
+          "js.jsx"
+        end
+      end
+
+      def es6_enabled?
+        options[:es6] || shakapacker?
+      end
     end
   end
 end

data/lib/generators/react/install_generator.rb

@@ -1,30 +1,88 @@
+# 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"
 
+      # Make an empty `components/` directory in the right place:
       def create_directory
-        empty_directory 'app/assets/javascripts/components'
-        create_file 'app/assets/javascripts/components/.gitkeep' unless options[:skip_git]
+        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 shakapacker?
+          setup_react_shakapacker
+        else
+          setup_react_sprockets
+        end
+      end
+
+      def create_server_rendering
+        if options[:skip_server_rendering]
+          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)
+        end
+      end
+
+      private
+
+      def shakapacker?
+        !!defined?(Shakapacker)
+      end
+
+      def javascript_dir
+        if shakapacker?
+          shakapacker_source_path
+            .relative_path_from(::Rails.root)
+            .to_s
+        else
+          "app/assets/javascripts"
+        end
       end
 
-      def inject_react
-        require_react = "//= require react\n"
+      def manifest
+        Pathname.new(destination_root).join(javascript_dir, "application.js")
+      end
+
+      def setup_react_sprockets
+        require_react = "//= require react\n//= require react_ujs\n//= require components\n"
 
         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
@@ -32,26 +90,41 @@ module React
         else
           create_file manifest, require_react
         end
-      end
 
-      def inject_components
-        inject_into_file manifest, "//= require components\n", {after: "//= require react\n"}
+        components_js = "//= require_tree ./components\n"
+        components_file = File.join(javascript_dir, "components.js")
+        create_file components_file, components_js
       end
 
-      def inject_react_ujs
-        inject_into_file manifest, "//= require react_ujs\n", {after: "//= require react\n"}
-      end
+      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 create_components
-        components_js = "//= require_tree ./components\n"
-        components_file = File.join(*%w(app assets javascripts components.js))
-        create_file components_file, components_js
+      def require_package_json_gem
+        require "bundler/inline"
+
+        gemfile(true) { gem "package_json" }
+
+        puts "using package_json v#{PackageJson::VERSION}"
       end
 
-      private
+      def setup_react_shakapacker
+        require_package_json_gem
 
-      def manifest
-        Pathname.new(destination_root).join('app/assets/javascripts', 'application.js')
+        PackageJson.read.manager.add(["react_ujs"])
+
+        if manifest.exist?
+          append_file(manifest, SHAKAPACKER_SETUP_UJS)
+        else
+          create_file(manifest, SHAKAPACKER_SETUP_UJS)
+        end
+      end
+
+      def shakapacker_source_path
+        Shakapacker.config.source_entry_path
       end
     end
   end

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

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

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

@@ -0,0 +1,24 @@
+<%= file_header %>
+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 -%>
+}
+
+const <%= component_name %> = (props: I<%= component_name %>Props) => {
+  return (
+    <React.Fragment>
+      <% attributes.each do |attribute| -%>
+      <%= attribute[:name].titleize %>: {props.<%= attribute[:name].camelize(:lower) %>}
+      <% end -%>
+    </React.Fragment>
+  )
+}
+
+<%= file_footer %>

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

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

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

@@ -1,4 +1,4 @@
-class @<%= file_name.camelize %> extends React.Component
+<%= file_header %>class <%= component_name %> extends React.Component
 <% if attributes.size > 0 -%>
   @propTypes =
 <% attributes.each do |attribute| -%>
@@ -7,12 +7,9 @@ class @<%= file_name.camelize %> extends React.Component
 
 <% end -%>
   render: ->
-<% if attributes.size > 0 -%>
-    `<div>
+    `<React.Fragment>
 <% attributes.each do |attribute| -%>
-      <div><%= attribute[:name].titleize %>: {this.props.<%= attribute[:name].camelize(:lower) %>}</div>
+      <%= attribute[:name].titleize %>: {this.props.<%= attribute[:name].camelize(:lower) %>}
 <% end -%>
-    </div>`
-<% else -%>
-    `<div />`
-<% end -%>
+    </React.Fragment>`
+<%= file_footer %>

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/generators/templates/react_server_rendering.rb

@@ -0,0 +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"]

data/lib/generators/templates/server_rendering.js

@@ -0,0 +1,6 @@
+//= require react-server
+//= require react_ujs
+//= require ./components
+//
+// By default, this file is loaded for server-side rendering.
+// It should require your components and any dependencies.

data/lib/generators/templates/server_rendering_pack.js

@@ -0,0 +1,5 @@
+// By default, this pack is loaded for server-side rendering.
+// It must expose react_ujs as `ReactRailsUJS` and prepare a require context.
+var componentRequireContext = require.context("components", true);
+var ReactRailsUJS = require("react_ujs");
+ReactRailsUJS.useContext(componentRequireContext);