amber_component 0.0.5 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f1809ef804fefeb8ed7e05b8d1056895f7068663b92b74b464b99bb611981e7c
-  data.tar.gz: 7a05630fb2c74850241378c1b2e176373258b0e3a63aa7eae26803fc0a7077d5
+  metadata.gz: 3fe50a4aaf1482572196e8ae5fd9fd7e2f04ef1ee07b9b5275b0454623e54a6d
+  data.tar.gz: 17c1e2848263efac38a029621d26a8d2eae5b4b3d47d2c9eaf8e040b14fe3eae
 SHA512:
-  metadata.gz: b554c4cbaafe3fd6e4cbebe34c4e99ea7d318e50aa38b599b87c35d72bf5a353e0099b0471d643543c6f6227275295f63c0f33432940d7d0de71b8ac29ddd488
-  data.tar.gz: 69ef4f133acd94753d9108b56ef44f601fd59435a53dadaf194905190f53db8dcc368dcd3c5da68cfcc027a8a27a4b6a33d99f40b3bb3985cf3c80ce9c79e8bc
+  metadata.gz: e566cb7199d6d8c890081557ed20ac02410085992b036b6a603e909a62ac6fb6af0e853910ab02ac087fd8e3bcaf398d59496e7172ac1233d843206785b15509
+  data.tar.gz: 3b8bb6257ba09f3f6fbf98c68a128ab99adfa289e8ee3d674de744052b4b69f7b06c0e5f43a5e7bb4ae54533a78728fea15ba2534b947b4e730869b5e09b8932

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    amber_component (0.0.5)
+    amber_component (1.1.0)
       actionview (>= 6)
       activemodel (>= 6)
       activesupport (>= 6)
@@ -94,21 +94,21 @@ GEM
     rainbow (3.1.1)
     rake (13.0.6)
     rchardet (1.8.0)
-    regexp_parser (2.5.0)
+    regexp_parser (2.6.0)
     reverse_markdown (2.1.1)
       nokogiri
     rexml (3.2.5)
-    rubocop (1.36.0)
+    rubocop (1.38.0)
       json (~> 2.3)
       parallel (~> 1.10)
       parser (>= 3.1.2.1)
       rainbow (>= 2.2.2, < 4.0)
       regexp_parser (>= 1.8, < 3.0)
       rexml (>= 3.2.5, < 4.0)
-      rubocop-ast (>= 1.20.1, < 2.0)
+      rubocop-ast (>= 1.23.0, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 1.4.0, < 3.0)
-    rubocop-ast (1.21.0)
+    rubocop-ast (1.23.0)
       parser (>= 3.1.1.0)
     ruby-progressbar (1.11.0)
     ruby2_keywords (0.0.5)
@@ -124,7 +124,7 @@ GEM
       simplecov (~> 0.19)
     simplecov-html (0.12.3)
     simplecov_json_formatter (0.1.4)
-    solargraph (0.46.0)
+    solargraph (0.47.2)
       backport (~> 1.2)
       benchmark
       bundler (>= 1.17.2)

data/README.md

@@ -9,7 +9,7 @@
 
 # AmberComponent
 
-AmberComponent is a simple component library which seamlessly hooks into your Rails project and allows you to create simple backend components. They work like mini controllers which are bound with their view and stylesheet.
+AmberComponent is a simple component library which seamlessly hooks into your Rails project and allows you to create simple backend components which consist of a Ruby controller, view, stylesheet and even a JavaScript controller (using [Stimulus](https://stimulus.hotwired.dev/)).
 
 Created by [Garbus Beach](https://github.com/garbusbeach) and [Mateusz Drewniak](https://github.com/Verseth).
 
@@ -33,16 +33,37 @@ If you're using a Rails application there's an installation generator that you s
 $ bin/rails generate amber_component:install
 ```
 
+Amber component supports [Stimulus](https://stimulus.hotwired.dev/) to make your components
+reactive using JavaScript.
+
+If you want to use stimulus you should install this gem with the `--stimulus` flag
+
+```sh
+$ bin/rails generate amber_component:install --stimulus
+```
+
 ## Usage
 
-## Components
+### Components
 
-Components are located under `app/components`.
+Components are located under `app/components`. And their tests under `test/components`.
 
 Every component consists of:
 - a Ruby file which defines its properties, encapsulates logic and may implement helper methods (like a controller)
 - a view/template file (html.erb, haml, slim etc.)
 - a style file (css, scss, sass etc.)
+- [optional] a JavaScript file with a Stimulus controller (if you installed the gem with `--stimulus`)
+
+```
+app/components/
+├─ [name]_component.rb
+└─ [name]_component/
+   ├─ style.css     # may be .sass or .scss
+   ├─ view.html.erb
+   └─ controller.js # if stimulus is configured
+test/components/
+└─ [name]_component_test.rb
+```
 
 An individual component which implements a button may look like this.
 
@@ -57,7 +78,9 @@ end
 ```html
 <!-- app/components/button_component/view.html.erb -->
 
-<div class="button_component">
+<div class="button_component"
+     data-controller="button-component"
+     data-action="click->button-component#greet">
     <%= label %>
 </div>
 ```
@@ -76,6 +99,25 @@ end
 }
 ```
 
+If you used the `--stimulus` option when installing the gem, a JS controller will be generated as well.
+```js
+// app/components/button_component/controller.js
+
+import { Controller } from "@hotwired/stimulus"
+
+// Read more about Stimulus here https://stimulus.hotwired.dev/
+export default class extends Controller {
+  connect() {
+    console.log("Stimulus controller 'button-component' is connected!")
+  }
+
+  greet() {
+    alert("Hi there!")
+  }
+}
+
+```
+
 You can render this component in other components or in a Rails view.
 
 ```html
@@ -97,34 +139,69 @@ ButtonComponent.call label: 'Click me!'
 #=> '<div class="button_component">Click me!</div>'
 ```
 
-### Rails helpers inside component templates
+### Components with namespaces
 
-Component views/template files can make use
-of all ActionView helpers and Rails route helpers.
+Components may be defined inside multiple modules/namespaces.
 
-This makes component views very flexible and convenient.
+```ruby
+# app/components/sign_up/button_component.rb
 
-```erb
-<!-- app/components/login_form_component/view.html.erb -->
+class SignUp::ButtonComponent < AmberComponent::Base
+  prop :label, required: true
+end
+```
 
-<%= form_with url: sign_up_path, class: "login_form_component" do |f| %>
-  <%= f.label :first_name %>
-  <%= f.text_field :first_name %>
+```html
+<!-- app/components/sign_up/button_component/view.html.erb -->
 
-  <%= f.label :last_name %>
-  <%= f.text_field :last_name %>
+<div class="sign_up_button_component">
+    <%= label %>
+</div>
+```
 
-  <%= f.label :email, "Email Address" %>
-  <%= f.text_field :email %>
+```scss
+// app/components/sign_up/button_component/style.scss
 
-  <%= f.label :password %>
-  <%= f.password_field :password %>
+.sign_up_button_component {
+    background-color: indigo;
+    border-radius: 1rem;
+    transition-duration: 500ms;
 
-  <%= f.label :password_confirmation, "Confirm Password" %>
-  <%= f.password_field :password_confirmation %>
+    &:hover {
+        background-color: blue;
+    }
+}
+```
 
-  <%= f.submit "Create account" %>
-<% end %>
+You can render such a component by calling the `::call` method
+on its class, or by using the helper method defined on its parent module.
+
+```ruby
+SignUp::ButtonComponent.call label: 'Sign up!'
+SignUp.button_component label: 'Sign up!'
+```
+
+### Generating Components
+
+You can generate new components by running
+
+```sh
+$ bin/rails generate component [name]
+```
+
+Name of the component may be PascalCased like `FooBar` or snake_cased `foo_bar`
+
+This will generate a new component in `app/components/[name]_component.rb` along with a view, stylesheet, test file and a stimulus controller (if configured).
+
+```
+app/components/
+├─ [name]_component.rb
+└─ [name]_component/
+   ├─ style.css
+   ├─ view.html.erb
+   └─ controller.js # if stimulus is configured
+test/components/
+└─ [name]_component_test.rb
 ```
 
 ### Component properties
@@ -155,39 +232,6 @@ CommentComponent.call body: 'Foo bar', author: User.first
 comment_component body: 'Foo bar', author: User.first
 ```
 
-### Overriding prop getters and setters
-
-Getters and setters for properties are
-defined in a module which means that you can override them and call them with `super`.
-
-```ruby
-# app/components/priority_icon_component.rb
-
-class PriorityIconComponent < ApplicationComponent
-    PriorityStruct = Struct.new :icon, :color
-
-    PRIORITY_MAP = {
-        low: PriorityStruct.new('fa-solid fa-chevrons-down', 'green'),
-        medium: PriorityStruct.new('fa-solid fa-chevron-up', 'yellow'),
-        high: PriorityStruct.new('fa-solid fa-chevrons-up', 'red')
-    }
-
-    prop :severity, default: -> { :low }
-
-    def severity=(val)
-      # super will call the original
-      # implementation of the setter
-      super(PRIORITY_MAP[val])
-    end
-end
-```
-
-```html
-<!-- app/components/priority_icon_component/view.html.erb -->
-
-<i style="color: <%= severity&.color %>;" class="<%= severity&.icon %>"></i>
-```
-
 ### Helper methods
 
 Defining helper methods which are available
@@ -239,6 +283,39 @@ end
 </div>
 ```
 
+### Overriding prop getters and setters
+
+Getters and setters for properties are
+defined in a module which means that you can override them and call them with `super`.
+
+```ruby
+# app/components/priority_icon_component.rb
+
+class PriorityIconComponent < ApplicationComponent
+    PriorityStruct = Struct.new :icon, :color
+
+    PRIORITY_MAP = {
+        low: PriorityStruct.new('fa-solid fa-chevrons-down', 'green'),
+        medium: PriorityStruct.new('fa-solid fa-chevron-up', 'yellow'),
+        high: PriorityStruct.new('fa-solid fa-chevrons-up', 'red')
+    }
+
+    prop :severity, default: -> { :low }
+
+    def severity=(val)
+      # super will call the original
+      # implementation of the setter
+      super(PRIORITY_MAP[val])
+    end
+end
+```
+
+```html
+<!-- app/components/priority_icon_component/view.html.erb -->
+
+<i style="color: <%= severity&.color %>;" class="<%= severity&.icon %>"></i>
+```
+
 ### Nested components
 
 It's possible to nest components or provide
@@ -283,12 +360,14 @@ a block.
 <!-- app/controller/tasks/show.html.erb -->
 
 <%= ModalComponent.call id: 'update-task-modal' title: 'Update the task' do %>
+    <!-- You can provide HTML and render other components -->
     <h2>This is your task!</h2>
     <%= form_with model: @task do |f| %>
         <%= f.text_field :name %>
         <%= f.text_area :description %>
         <%= f.submit %>
     <% end %>
+    <%= OtherComponent.call some: 'prop' %>
 <% end %>
 ```
 
@@ -299,64 +378,131 @@ only when it is present (will work without nested content)
 you can use `yield.html_safe if block_given?`
 
 In general `block_given?` will return `true` when a block/nested content is present, otherwise `false`.
+You can use it to render content conditionally based on
+whether nested content is present.
 
-### Components with namespaces
+### Rails helpers inside component templates
 
-Components may be defined inside multiple modules/namespaces.
+Component views/template files can make use
+of all ActionView helpers and Rails route helpers.
 
-```ruby
-# app/components/sign_up/button_component.rb
+This makes component views very flexible and convenient.
 
-class SignUp::ButtonComponent < AmberComponent::Base
-  prop :label, required: true
-end
-```
+```erb
+<!-- app/components/login_form_component/view.html.erb -->
 
-```html
-<!-- app/components/sign_up/button_component/view.html.erb -->
+<%= form_with url: sign_up_path, class: "login_form_component" do |f| %>
+  <%= f.label :first_name %>
+  <%= f.text_field :first_name %>
 
-<div class="sign_up_button_component">
-    <%= label %>
-</div>
-```
+  <%= f.label :last_name %>
+  <%= f.text_field :last_name %>
 
-```scss
-// app/components/sign_up/button_component/style.scss
+  <%= f.label :email, "Email Address" %>
+  <%= f.text_field :email %>
 
-.sign_up_button_component {
-    background-color: indigo;
-    border-radius: 1rem;
-    transition-duration: 500ms;
+  <%= f.label :password %>
+  <%= f.password_field :password %>
 
-    &:hover {
-        background-color: blue;
-    }
-}
+  <%= f.label :password_confirmation, "Confirm Password" %>
+  <%= f.password_field :password_confirmation %>
+
+  <%= f.submit "Create account" %>
+<% end %>
 ```
 
-You can render such a component by calling the `::call` method
-on its class, or by using the helper method defined on its parent module.
+### Testing Components
+
+### Rails
+
+After setting up this gem with the rails generator
+`rails generate amber_component:install` a new abstract
+test class will be available called `ApplicationComponentTestCase`.
+
+It provides a handful of helper methods to make it
+easier to inspect the rendered HTML.
+
+A simple test file may look like this:
 
 ```ruby
-SignUp::ButtonComponent.call label: 'Sign up!'
-SignUp.button_component label: 'Sign up!'
+# test/components/foo_component_test.rb
+
+require 'test_helper'
+
+class FooComponentTest < ApplicationComponentTestCase
+    test 'render correct HTML' do
+        # Specify what the assertions are supposed to
+        # check against.
+        #
+        # There can be multiple renders in one test
+        # but they override the previous one.
+        # So there is only one rendered component
+        # at any given time.
+        render do
+            FooComponent.call some: 'prop'
+        end
+
+        # Assertions on the rendered HTML
+
+        # Use a CSS selector
+        assert_selector ".foo_component span.my_class", text: 'Some Text'
+        # Check text
+        assert_text 'Amber Component is awesome!'
+    end
+end
 ```
 
-### Generating Components
+A full list of available assertions can be found [here](https://rubydoc.info/github/jnicklas/capybara/Capybara/Node/Matchers).
 
-You an generate new components by running
+### Non Rails
 
-```sh
-$ bin/rails generate component foo_bar
+There is a test case class for minitest. You can
+access it by requiring `'amber_component/minitest_test_case'`.
+
+It has the same assertion methods as the Rails test case class.
+It requires [capybara](https://github.com/teamcapybara/capybara) to be installed and present in the Gemfile.
+
+A full list of available assertions can be found [here](https://rubydoc.info/github/jnicklas/capybara/Capybara/Node/Matchers).
+
+```ruby
+require 'amber_component/minitest_test_case'
+
+class FooComponentTest < AmberComponent::MinitestTestCase
+    def test_render_correct_html
+        # Specify what the assertions are supposed to
+        # check against.
+        #
+        # There can be multiple renders in one test
+        # but they override the previous one.
+        # So there is only one rendered component
+        # at any given time.
+        render do
+            FooComponent.call some: 'prop'
+        end
+
+        # Assertions on the rendered HTML
+
+        # Use a CSS selector
+        assert_selector ".foo_component span.my_class", text: 'Some Text'
+        # Check text
+        assert_text 'Amber Component is awesome!'
+    end
+end
 ```
 
-or
+There is also a helper module which provides all of these assertions
+under `'amber_component/test_helper'`.
 
-```sh
-$ bin/rails generate component FooBar
+```ruby
+require 'amber_component/test_helper'
+
+class MyAbstractTestCase < ::Minitest::Test
+    include ::AmberComponent::TestHelper
+end
 ```
 
-This will generate a new component in `app/components/foo_bar_component.rb` along with a view, stylesheet and test file.
+Note that this module has only been tested with minitest and rails test suites,
+so it may require overriding or implementing a few methods to work with other test suites.
 
 ## Contribute
 

data/amber_component.gemspec

@@ -43,7 +43,4 @@ require_relative "lib/amber_component/version"
   spec.add_dependency "activesupport", ">= 6"
   spec.add_dependency "memery", ">= 1.4.1"
   spec.add_dependency "tilt", ">= 2.0.10"
-
-  # For more information and examples about making a new gem, check out our
-  # guide at: https://bundler.io/guides/creating_gem.html
 end

data/assets/javascripts/amber_component/stimulus_loading.js

@@ -0,0 +1,30 @@
+const registeredControllers = {}
+
+export function eagerLoadAmberComponentControllers(application) {
+  const paths = Object.keys(parseImportmapJson()).filter(path => path.match(new RegExp(`/controller$`)))
+  paths.forEach(path => registerControllerFromPath(path, application))
+}
+
+function parseImportmapJson() {
+  return JSON.parse(document.querySelector("script[type=importmap]").text).imports
+}
+
+function registerControllerFromPath(path, application) {
+  const name = path
+    .replace("/controller", "")
+    .replace(/\//g, "--")
+    .replace(/_/g, "-")
+
+  if (!(name in registeredControllers)) {
+    import(path)
+      .then(module => registerController(name, module, application))
+      .catch(error => console.error(`Failed to register controller: ${name} (${path})`, error))
+  }
+}
+
+function registerController(name, module, application) {
+  if (!(name in registeredControllers)) {
+    application.register(name, module.default)
+    registeredControllers[name] = true
+  }
+}

data/lib/amber_component/configuration.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module ::AmberComponent
+  # Object which stores configuration options
+  # for this gem.
+  class Configuration
+    # @return [Array<Symbol>]
+    STIMULUS_INTEGRATIONS = %i[importmap jsbundling webpack esbuild rollup].freeze
+
+    # How Stimulus.js is bundled in this app.
+    # Possible values: `[nil, :importmap, :jsbundling, :webpack, :esbuild, :rollup]`
+    # `nil` indicates that stimulus should not be used (default behaviour).
+    #
+    # @return [Symbol, nil]
+    attr_reader :stimulus
+
+    # How Stimulus.js is bundled in this app.
+    # Possible values: `[nil, :importmap, :jsbundling, :webpack, :esbuild, :rollup]`
+    # `nil` indicates that stimulus should not be used (default behaviour).
+    #
+    # @param val [Symbol, String, nil]
+    def stimulus=(val)
+      val = val&.to_sym
+      unless val.nil? || STIMULUS_INTEGRATIONS.include?(val)
+        raise(::ArgumentError,
+              "Invalid value for `stimulus` bundling. " \
+              "Received #{val.inspect}, expected one of #{STIMULUS_INTEGRATIONS.inspect}")
+      end
+
+      @stimulus = val
+    end
+
+    # @return [Boolean]
+    def stimulus?
+      !@stimulus.nil?
+    end
+
+    # @return [Boolean]
+    def stimulus_importmap?
+      @stimulus == :importmap
+    end
+  end
+end

data/lib/amber_component/props.rb

@@ -75,7 +75,7 @@ module ::AmberComponent
     module InstanceMethods
       private
 
-      # @param props [Hash{Symbol => Object}]
+      # @param kwargs [Hash{Symbol => Object}]
       def initialize(**kwargs)
         bind_props(kwargs)
       end

data/lib/amber_component/railtie.rb

@@ -4,8 +4,10 @@ module ::AmberComponent
   # Class which hooks into Rails
   # and configures the application.
   class Railtie < ::Rails::Railtie
-    initializer 'amber_component.initialization' do |app|
+    initializer 'amber_component.assets' do |app|
       app.config.assets.paths << (app.root / 'app' / 'components')
+      app.config.assets.paths << (ROOT_GEM_PATH / 'assets' / 'javascripts')
+      app.config.assets.precompile += %w[amber_component/stimulus_loading.js]
 
       next if ::Rails.env.production?
 

data/lib/amber_component/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ::AmberComponent
-  VERSION = '0.0.5'
+  VERSION = '1.1.0'
 end

data/lib/amber_component.rb

@@ -2,7 +2,11 @@
 
 require 'active_support'
 require 'active_support/core_ext'
+require 'pathname'
 
+require_relative 'amber_component/configuration'
+
+# Root module of the `amber_component` gem.
 module ::AmberComponent
   class Error < ::StandardError; end
   class MissingPropsError < Error; end
@@ -13,6 +17,22 @@ module ::AmberComponent
   class EmptyViewError < Error; end
   class UnknownViewTypeError < Error; end
   class MultipleViewsError < Error; end
+
+  # @return [Pathname]
+  ROOT_GEM_PATH = ::Pathname.new ::File.expand_path('..', __dir__)
+
+  class << self
+    # @return [Configuration]
+    def configuration
+      @configuration ||= Configuration.new
+    end
+
+    # @yieldparam [Configuration]
+    # @return [void]
+    def configure
+      yield configuration
+    end
+  end
 end
 
 require_relative 'amber_component/version'

data/lib/generators/amber_component/install_generator.rb

@@ -10,8 +10,14 @@ module ::AmberComponent
       desc 'Install the AmberComponent gem'
       source_root ::File.expand_path('templates', __dir__)
 
-      # copy rake tasks
-      def copy_tasks
+      # @return [Array<Symbol>]
+      STIMULUS_INTEGRATIONS = %i[stimulus importmap jsbundling webpack esbuild rollup].freeze
+
+      class_option :stimulus,
+                   desc: "Configure the app to use Stimulus.js wih components to make them interactive " \
+                         "[options: importmap (default), jsbundling, webpack, esbuild, rollup]"
+
+      def setup
         copy_file 'application_component.rb', 'app/components/application_component.rb'
         copy_file 'application_component_test_case.rb', 'test/application_component_test_case.rb'
         append_file 'test/test_helper.rb', "require_relative 'application_component_test_case'"
@@ -23,10 +29,87 @@ module ::AmberComponent
         require_components_css_in 'app/assets/stylesheets/application.css.sass'
         require_components_css_in 'app/assets/stylesheets/application.scss.sass'
         require_components_css_in 'app/assets/stylesheets/application.sass.scss'
+        configure_stimulus
       end
 
       private
 
+      def configure_stimulus
+        stimulus = options[:stimulus]&.to_sym
+        return unless stimulus
+
+        case stimulus
+        when :stimulus
+          if defined?(::Jsbundling)
+            stimulus_integration = :jsbundling
+            configure_stimulus_jsbundling
+          else
+            stimulus_integration = :importmap
+            configure_stimulus_importmap
+          end
+        when :importmap
+          stimulus_integration = :importmap
+          configure_stimulus_importmap
+        when :jsbundling, :webpack, :esbuild, :rollup
+          stimulus_integration = :jsbundling
+          configure_stimulus_jsbundling
+        end
+
+        create_file 'config/initializers/amber_component.rb', <<~RUBY
+          # frozen_string_literal: true
+
+          ::AmberComponent.configure do |c|
+            c.stimulus = :#{stimulus_integration}
+          end
+        RUBY
+      end
+
+      def configure_stimulus_importmap
+        install_importmap
+        install_stimulus
+        append_file 'config/importmap.rb', <<~RUBY
+          pin "@amber_component/stimulus_loading", to: "amber_component/stimulus_loading.js", preload: true
+          pin_all_from "app/components"
+        RUBY
+        append_file 'app/javascript/controllers/index.js', <<~JS
+          import { eagerLoadAmberComponentControllers } from "@amber_component/stimulus_loading"
+          eagerLoadAmberComponentControllers(application)
+        JS
+        append_file 'app/assets/config/manifest.js', %(//= link_tree ../../components .js\n)
+      end
+
+      def configure_stimulus_jsbundling
+        install_stimulus
+        append_file 'app/javascript/application.js', %(import "./controllers/components"\n)
+        create_file 'app/javascript/controllers/components.js', <<~JS
+          // This file has been created by `amber_component` and will
+          // register all stimulus controllers from your components
+          import { application } from "./application"
+        JS
+      end
+
+      # @return [void]
+      def install_importmap
+        return if ::File.exist?('config/importmap.rb') && defined?(::Importmap)
+
+        unless defined?(::Importmap)
+          system 'gem install importmap-rails'
+          gem 'importmap-rails'
+          system 'bundle install'
+        end
+        rake 'importmap:install'
+      end
+
+      # @return [void]
+      def install_stimulus
+        return if defined?(::Stimulus)
+
+        system 'gem install stimulus-rails'
+        gem 'stimulus-rails'
+        system 'bundle install'
+        rake 'stimulus:install'
+      end
+
       # @param file_name [String]
       # @return [void]
       def require_components_css_in(file_name)

data/lib/generators/amber_component_generator.rb

@@ -40,8 +40,10 @@ class AmberComponentGenerator < ::Rails::Generators::NamedBase
     template 'component_test.rb.erb', "test/components/#{file_path}_test.rb"
     create_stylesheet
     create_view
+    create_stimulus_controller
   end
 
+  # @return [String]
   def file_name
     name = super
     return name if name.end_with? '_component'
@@ -51,6 +53,29 @@ class AmberComponentGenerator < ::Rails::Generators::NamedBase
 
   private
 
+  # @return [Boolean]
+  def stimulus?
+    ::AmberComponent.configuration.stimulus?
+  end
+
+  # @return [Boolean]
+  def stimulus_importmap?
+    ::AmberComponent.configuration.stimulus_importmap?
+  end
+
+  # @return [void]
+  def create_stimulus_controller
+    return unless stimulus?
+
+    template 'controller.js.erb', "app/components/#{file_path}/controller.js"
+    return if stimulus_importmap?
+
+    append_file 'app/javascript/controllers/components.js', <<~JS
+      import #{stimulus_controller_class_name} from "../../components/#{file_path}/controller"
+      application.register("#{stimulus_controller_id}", #{stimulus_controller_class_name})
+    JS
+  end
+
   # @return [void]
   def create_view
     case @view_format
@@ -73,4 +98,14 @@ class AmberComponentGenerator < ::Rails::Generators::NamedBase
       template 'style.css.erb', "app/components/#{file_path}/style.css"
     end
   end
+
+  # @return [String]
+  def stimulus_controller_id
+    file_path.gsub('_', '-').gsub('/', '--')
+  end
+
+  # @return [String]
+  def stimulus_controller_class_name
+    file_path.gsub('/', '_').camelize
+  end
 end

data/lib/generators/templates/controller.js.erb

@@ -0,0 +1,12 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Read more about Stimulus here https://stimulus.hotwired.dev/
+export default class extends Controller {
+  connect() {
+    console.log("Stimulus controller '<%= stimulus_controller_id %>' is connected!")
+  }
+
+  greet() {
+    alert("Hi there!")
+  }
+}

data/lib/generators/templates/view.haml.erb

@@ -1,9 +1,13 @@
-.<%= singular_table_name %>
+.<%= singular_table_name %><%= %({ data: { controller: "#{stimulus_controller_id}" } }) if stimulus? %>
   %h1
     Hello from
     %b
       <%= class_name %>
     , initialized at:
     = @time
+  <%- if stimulus? %>
+  %button{ data: { action: "click-><%= stimulus_controller_id %>#greet" }
+    Greet me
+  <% end %>
   %p
     = description

data/lib/generators/templates/view.html.erb.erb

@@ -1,7 +1,10 @@
-<div class='<%= singular_table_name %>'>
+<div class="<%= singular_table_name %>"<%= %( data-controller="#{stimulus_controller_id}") if stimulus? %>>
   <h1>
     Hello from <b><%= class_name %></b>, initialized at: <%%= @time %>
   </h1>
+  <%- if stimulus? %>
+  <button data-action="click-><%= stimulus_controller_id %>#greet">Greet me</button>
+  <% end %>
   <p>
     <%%= description %>
   </p>

data/lib/generators/templates/view.slim.erb

@@ -1,6 +1,10 @@
-div.<%= singular_table_name %>
+div.<%= singular_table_name %><%= %( data-controller="#{stimulus_controller_id}") if stimulus? %>
   h1
     | Hello from
     b <%= class_name %>
     | , initialized at: #{@time}
+    <%- if stimulus? %>
+    button data-action="click-><%= stimulus_controller_id %>#greet"
+      | Greet me
+    <% end %>
   p = description

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: amber_component
 version: !ruby/object:Gem::Version
-  version: 0.0.5
+  version: 1.1.0
 platform: ruby
 authors:
 - Ruby-Amber
@@ -10,7 +10,7 @@ authors:
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2022-11-07 00:00:00.000000000 Z
+date: 2022-11-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -106,11 +106,13 @@ files:
 - README.md
 - Rakefile
 - amber_component.gemspec
+- assets/javascripts/amber_component/stimulus_loading.js
 - banner.png
 - icon.png
 - lib/amber_component.rb
 - lib/amber_component/assets.rb
 - lib/amber_component/base.rb
+- lib/amber_component/configuration.rb
 - lib/amber_component/helpers.rb
 - lib/amber_component/helpers/class_helper.rb
 - lib/amber_component/helpers/component_helper.rb
@@ -133,6 +135,7 @@ files:
 - lib/generators/component_generator.rb
 - lib/generators/templates/component.rb.erb
 - lib/generators/templates/component_test.rb.erb
+- lib/generators/templates/controller.js.erb
 - lib/generators/templates/style.css.erb
 - lib/generators/templates/style.sass.erb
 - lib/generators/templates/style.scss.erb