Make generator es6 and ts usable at same time

Author: ippachi

CHANGELOG.md

@@ -9,6 +9,9 @@ Changes since the last non-beta release.
 
 _Please add entries here for your pull requests that are not yet released._
 
+#### Changed
+- Make es6 and ts usable at same time. #1299
+
 ## [3.1.0] - 2023-08-15
 
 #### Added

lib/generators/react/component_generator.rb

@@ -256,14 +256,20 @@ def lookup(type = "node", options = "")
       def detect_template_extension
         if options[:coffee]
           "js.jsx.coffee"
+        elsif options[:ts] && es6_enabled?
+          "es6.tsx"
         elsif options[:ts]
           "js.jsx.tsx"
-        elsif options[:es6] || shakapacker?
+        elsif es6_enabled?
           "es6.jsx"
         else
           "js.jsx"
         end
       end
+
+      def es6_enabled?
+        options[:es6] || shakapacker?
+      end
     end
   end
 end

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

test/generators/ts_es6_component_generator_test.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+require "test_helper"
+require "generators/react/component_generator"
+
+class TsEs6ComponentGeneratorTest < Rails::Generators::TestCase
+  destination File.join(Rails.root, "tmp", "component_generator_test_output")
+  setup :prepare_destination
+  tests React::Generators::ComponentGenerator
+
+  if ShakapackerHelpers.available?
+    def filename
+      "app/javascript/components/GeneratedComponent.tsx"
+    end
+  else
+    def filename
+      "app/assets/javascripts/components/generated_component.es6.tsx"
+    end
+  end
+
+  def component_name
+    "GeneratedComponent"
+  end
+
+  test "uses ts and es6 syntax" do
+    run_generator %w[GeneratedComponent name:string --ts --es6]
+
+    assert_file filename, /const #{component_name} = \(props: I#{component_name}Props\) => {/
+  end
+
+  test "defines props type" do
+    run_generator %w[GeneratedComponent name:string --ts --es6]
+
+    assert_file filename, /name: string;/
+  end
+end