Generating function component by default (#1271)

* Add option for generating functional component

* Change es6 template to a function component

* Update tests

* Update documentation

* Update changelog

Author: ahangarha

CHANGELOG.md

@@ -16,6 +16,9 @@ _Please add entries here for your pull requests that are not yet released._
 - Replaces WebpackManifestContainer, which searched for assets in the webpack manifest, with SeparateServerBundleContainer, which expects a single server bundle file & does not use the webpack manifest at all.
 - All in one PR! #1274
 
+#### Changed
+- The `react:component` generator now generates a function component by default #1271
+
 ## [2.7.1] - 2023-05-19
 
 #### Bug Fixes

README.md

@@ -652,7 +652,7 @@ Prerendering is set to `true` by default, but can be turned off with `prerender:
 You can generate a new component file with:
 
 ```sh
-rails g react:component ComponentName prop1:type prop2:type ...
+rails g react:component ComponentName prop1:type prop2:type ... [options]
 ```
 
 For example,
@@ -685,9 +685,38 @@ var Post = createReactClass({
 
 The generator also accepts options:
 
-- `--es6`: use `class ComponentName extends React.Component`
+- `--es6`: generates a function component
 - `--coffee`: use CoffeeScript
 
+For example,
+
+```sh
+rails g react:component ButtonComponent title:string --es6
+```
+
+would generate:
+
+```jsx
+import React from "react"
+import PropTypes from "prop-types"
+
+function ButtonComponent(props) {
+  return (
+    <React.Fragment>
+      Title: {this.props.title}
+    </React.Fragment>
+  );
+}
+
+ButtonComponent.propTypes = {
+  title: PropTypes.string
+};
+
+export default ButtonComponent
+```
+
+**Note:** In a Shakapacker project, es6 template is the default template in the generator.
+
 Accepted PropTypes are:
 
 - Plain types: `any`, `array`, `bool`, `element`, `func`, `number`, `object`, `node`, `shape`, `string`

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 %>

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 %>

test/generators/coffee_component_generator_test.rb

@@ -18,7 +18,7 @@ def filename
 
       es6 = File.read(File.join(destination_root, "app/javascript/components/GeneratedComponent.js"))
 
-      assert_match(/extends React.Component/, es6)
+      assert_match(/const GeneratedComponent = \(props\) => {/, es6)
     end
   else
     def filename

test/generators/component_generator_test.rb

@@ -86,6 +86,6 @@ def filename_with_subfolder
     run_generator %w[GeneratedComponent name:string address:shape]
     jsx = React::JSX.transform(File.read(File.join(destination_root, filename)))
 
-    assert_match(Regexp.new(expected_working_jsx), jsx)
+    assert_match(Regexp.new(expected_working_jsx_in_function_component), jsx)
   end
 end

test/generators/es6_component_generator_test.rb

@@ -18,26 +18,26 @@ def filename
     end
   end
 
-  def class_name
+  def component_name
     "GeneratedComponent"
   end
 
   test "uses es6 syntax" do
     run_generator %w[GeneratedComponent name --es6]
 
-    assert_file filename, /^class\s#{class_name}\sextends\sReact\.Component/
+    assert_file filename, /const #{component_name} = \(props\) => {/
   end
 
-  test "assigns defaultProps after class definintion" do
+  test "assigns defaultProps after function definintion" do
     run_generator %w[GeneratedComponent name --es6]
 
-    assert_file filename, /\s^#{class_name}\.propTypes/
+    assert_file filename, /\s^#{component_name}\.propTypes/
   end
 
   test "generates working jsx" do
     run_generator %w[GeneratedComponent name:string address:shape --es6]
     jsx = React::JSX.transform(File.read(File.join(destination_root, filename)))
 
-    assert_match(Regexp.new(expected_working_jsx), jsx)
+    assert_match(Regexp.new(expected_working_jsx_in_function_component), jsx)
   end
 end

test/test_helper.rb

@@ -85,6 +85,10 @@ def expected_working_jsx
   /\.createElement\(\s*\S*\.Fragment,\s*null,\s*"Name:\s*",\s*this\.props\.name,\s*"Address:\s*",\s*this\.props\.address\s*\)/x # rubocop:disable Layout/LineLength
 end
 
+def expected_working_jsx_in_function_component
+  /\.createElement\(\s*\S*\.Fragment,\s*null,\s*"Name:\s*",\s*props\.name,\s*"Address:\s*",\s*props\.address\s*\)/x
+end
+
 module ParamsHelper
   # Normalize params for Rails 5.1+
   def query_params(params)