Add TypeScript support (#2117)

* Add TypeScript support

* Small fixes

* Trailling whitespace

* Markdown fix

* Apply suggestions from code review

Thanks @joelhawksley

Co-authored-by: Joel Hawksley <joelhawksley@github.com>

---------

Co-authored-by: Joel Hawksley <joelhawksley@github.com>

Author: zaratan

docs/CHANGELOG.md

@@ -10,6 +10,14 @@ nav_order: 5
 
 ## main
 
+* Fix bug where stimulus controller was not added to ERB when stimulus was activated by default.
+
+    *Denis Pasin*
+
+* Add typescript support to stimulus generator.
+
+    *Denis Pasin*
+
 ## 3.16.0
 
 * Add template information to multiple template error messages.

docs/guide/generators.md

@@ -110,6 +110,11 @@ bin/rails generate component Example title --stimulus
 
 To always generate a Stimulus controller, set `config.view_component.generate.stimulus_controller = true`.
 
+To generate a TypeScript controller instead of a JavaScript controller, either:
+
+- Pass the `--typescript` option
+- Set `config.view_component.generate.typescript = true`
+
 ### Generate [locale files](/guide/translations.html)
 
 Since 2.47.0

docs/index.md

@@ -228,6 +228,7 @@ ViewComponent is built by over a hundred members of the community, including:
 <img src="https://avatars.githubusercontent.com/allan-pires?s=64" alt="allan-pires" width="32" />
 <img src="https://avatars.githubusercontent.com/jasonkim?s=64" alt="jasonkim" width="32" />
 <img src="https://avatars.githubusercontent.com/tkowalewski" alt="tkowalewski" width="32" />
+<img src="https://avatars.githubusercontent.com/zaratan" alt="zaratan" width="32" />
 
 ## Who uses ViewComponent?
 

lib/rails/generators/abstract_generator.rb

@@ -33,7 +33,7 @@ def component_path
     end
 
     def stimulus_controller
-      if options["stimulus"]
+      if stimulus?
         File.join(destination_directory, destination_file_name)
           .sub("#{component_path}/", "")
           .tr("_", "-")
@@ -44,5 +44,13 @@ def stimulus_controller
     def sidecar?
       options["sidecar"] || ViewComponent::Base.config.generate.sidecar
     end
+
+    def stimulus?
+      options["stimulus"] || ViewComponent::Base.config.generate.stimulus_controller
+    end
+
+    def typescript?
+      options["typescript"] || ViewComponent::Base.config.generate.typescript
+    end
   end
 end

lib/rails/generators/erb/component_generator.rb

@@ -24,7 +24,7 @@ def copy_view_file
       private
 
       def data_attributes
-        if options["stimulus"]
+        if stimulus?
           " data-controller=\"#{stimulus_controller}\""
         end
       end

lib/rails/generators/stimulus/component_generator.rb

@@ -9,9 +9,10 @@ class ComponentGenerator < ::Rails::Generators::NamedBase
 
       source_root File.expand_path("templates", __dir__)
       class_option :sidecar, type: :boolean, default: false
+      class_option :typescript, type: :boolean, default: false
 
       def create_stimulus_controller
-        template "component_controller.js", destination
+        template "component_controller.#{filetype}", destination
       end
 
       def stimulus_module
@@ -22,11 +23,15 @@ def stimulus_module
 
       private
 
+      def filetype
+        typescript? ? "ts" : "js"
+      end
+
       def destination
         if sidecar?
-          File.join(component_path, class_path, "#{file_name}_component", "#{file_name}_component_controller.js")
+          File.join(component_path, class_path, "#{file_name}_component", "#{file_name}_component_controller.#{filetype}")
         else
-          File.join(component_path, class_path, "#{file_name}_component_controller.js")
+          File.join(component_path, class_path, "#{file_name}_component_controller.#{filetype}")
         end
       end
 

lib/rails/generators/stimulus/templates/component_controller.ts.tt

@@ -0,0 +1,9 @@
+import { Controller } from "<%= stimulus_module %>";
+
+export default class extends Controller {
+  declare element: HTMLElement;
+
+  connect() {
+    console.log("Hello, Stimulus!", this.element);
+  }
+}

lib/view_component/base.rb

@@ -412,6 +412,14 @@ def compiler
     # config.view_component.generate.stimulus_controller = true
     # ```
     #
+    # #### `#typescript`
+    #
+    # Generate TypeScript files instead of JavaScript files:
+    #
+    # ```ruby
+    # config.view_component.generate.typescript = true
+    # ```
+    #
     # #### #locale
     #
     # Always generate translations file alongside the component:

lib/view_component/config.rb

@@ -48,6 +48,12 @@ def defaults
       #
       #     config.view_component.generate.stimulus_controller = true
       #
+      # #### `#typescript`
+      #
+      # Generate TypeScript files instead of JavaScript files:
+      #
+      #     config.view_component.generate.typescript = true
+      #
       # #### `#locale`
       #
       # Always generate translations file alongside the component: