amber_component 1.0.0 → 1.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d81663eb6f3cd153cb0a277a0114f8cce4e2140f40685f23a688a60c8ce86226
-  data.tar.gz: 32abb3383e052466435f318e1f8c4010adfa5f3d7e93e588e7e2842ff7cd59e6
+  metadata.gz: 46dc65dbef14224da8e0ce373eb07528188c399444eb2b90968c1cf3dc049864
+  data.tar.gz: d547837963b2e6148a0724d961f3ba9fa1f540365a711d40d483a24ccdcf8909
 SHA512:
-  metadata.gz: 4a3df277a91914b6a148cc72c1b3981f78c420e773b408c8555a8915424d11667c804f113c2a1fd76bce751083607086ab660f1634855fcec686bc433b875c12
-  data.tar.gz: 330efd82e1589a4804f72f4dcb1df1f9a9b90696ce2dfb542c69b91dd1b0a5b7797736c9fa8ce461f73ff7bb16a3966a8ed00b8340c6d047d289acde976240cc
+  metadata.gz: 9f060bd9c1a97475c0678ddc5c0df166bf6f05001cde7f43a41bdc130c068b2ea24c15518d384016aeef2e8ef592b2928c305a41aaaa24dcebf038783a96b57b
+  data.tar.gz: 8f2f8029094be9ac3eccbb55b1c46a3c1ed43bb5e7d4c55263bf9bf0a2501862589f7644b8c357ceaa1d8762ea2370125f29c85bce7299925588570ba5118860

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    amber_component (1.0.0)
+    amber_component (1.1.1)
       actionview (>= 6)
       activemodel (>= 6)
       activesupport (>= 6)

data/README.md

@@ -3,13 +3,13 @@
 [![Maintainability](https://api.codeclimate.com/v1/badges/ad84af499e9791933a87/maintainability)](https://codeclimate.com/github/amber-ruby/amber_component/maintainability)
 [![CI badge](https://github.com/amber-ruby/amber_component/actions/workflows/ci_ruby.yml/badge.svg)](https://github.com/amber-ruby/amber_component/actions/workflows/ci_ruby.yml)
 [![Coverage Badge](https://img.shields.io/endpoint?url=https://gist.githubusercontent.com/Verseth/6a095c79278b074d79feaa4f8ceeb2a8/raw/amber_component__heads_main.json)](https://github.com/amber-ruby/amber_component/actions/workflows/ci_ruby.yml)
-[![Downloads](https://ruby-gem-downloads-badge.herokuapp.com/amber_component)]((https://rubygems.org/gems/amber_component))
+<!-- [![Downloads](https://ruby-gem-downloads-badge.herokuapp.com/amber_component)]((https://rubygems.org/gems/amber_component)) -->
 
 <img src="banner.png" width="500px" style="margin-bottom: 2rem;"/>
 
 # 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,44 @@ 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`)
+
+`amber_component` automatically detects what kind of view and stylesheet formats your app is configured to use.
+
+So if you've got `haml-rails`, components will be generated with `haml`. When your app uses `slim-rails`, components will be generated with `slim`. When your `Gemfile` contains `sassc-rails`, components will use `scss` etc.
+
+All of these formats can be overridden in
+an initializer or by adding arguments to the component generator.
+
+```
+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 +85,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 +106,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 +146,76 @@ 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;
+    }
+}
+```
+
+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).
 
-  <%= f.submit "Create account" %>
-<% end %>
+```
+app/components/
+├─ [name]_component.rb
+└─ [name]_component/
+   ├─ style.css     # may be `.scss` or `.sass`
+   ├─ view.html.erb # may be `.haml` or `.slim`
+   └─ controller.js # if stimulus is configured
+test/components/
+└─ [name]_component_test.rb
+```
+
+View and stylesheet formats can be overridden by providing options.
+
+```
+-v, [--view=VIEW]          # Indicate what type of view should be generated eg. [:erb, :haml, :slim]
+--styles, -c, [--css=CSS]  # Indicate what type of styles should be generated eg. [:css, :scss, :sass]
 ```
 
 ### Component properties
@@ -155,39 +246,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 +297,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
@@ -304,64 +395,51 @@ In general `block_given?` will return `true` when a block/nested content is pres
 You can use it to render content conditionally based on
 whether nested content is present.
 
-### Components with namespaces
-
-Components may be defined inside multiple modules/namespaces.
+### Rails helpers inside component templates
 
-```ruby
-# app/components/sign_up/button_component.rb
+Component views/template files can make use
+of all ActionView helpers and Rails route helpers.
 
-class SignUp::ButtonComponent < AmberComponent::Base
-  prop :label, required: true
-end
-```
+This makes component views very flexible and convenient.
 
-```html
-<!-- app/components/sign_up/button_component/view.html.erb -->
+```erb
+<!-- app/components/login_form_component/view.html.erb -->
 
-<div class="sign_up_button_component">
-    <%= label %>
-</div>
-```
+<%= form_with url: sign_up_path, class: "login_form_component" do |f| %>
+  <%= f.label :first_name %>
+  <%= f.text_field :first_name %>
 
-```scss
-// app/components/sign_up/button_component/style.scss
+  <%= f.label :last_name %>
+  <%= f.text_field :last_name %>
 
-.sign_up_button_component {
-    background-color: indigo;
-    border-radius: 1rem;
-    transition-duration: 500ms;
+  <%= f.label :email, "Email Address" %>
+  <%= f.text_field :email %>
 
-    &:hover {
-        background-color: blue;
-    }
-}
-```
+  <%= f.label :password %>
+  <%= f.password_field :password %>
 
-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.
+  <%= f.label :password_confirmation, "Confirm Password" %>
+  <%= f.password_field :password_confirmation %>
 
-```ruby
-SignUp::ButtonComponent.call label: 'Sign up!'
-SignUp.button_component label: 'Sign up!'
+  <%= f.submit "Create account" %>
+<% end %>
 ```
 
-### Generating Components
-
-You an generate new components by running
+### Configuration
 
-```sh
-$ bin/rails generate component foo_bar
-```
+This gem can be configured in an initializer.
+If you used the installer generator it should already be present.
 
-or
+```ruby
+# config/initializers/amber_component.rb
 
-```sh
-$ bin/rails generate component FooBar
+::AmberComponent.configure do |c|
+    c.stimulus = nil # [nil, :importmap, :webpacker, :jsbundling, :webpack, :esbuild, :rollup]
+    c.stylesheet_format = :css # [:css, :scss, :sass]
+    c.view_format = :erb # [:erb, :haml, :slim]
+end
 ```
 
-This will generate a new component in `app/components/foo_bar_component.rb` along with a view, stylesheet and test file.
-
 ### Testing Components
 
 ### Rails

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,85 @@
+# frozen_string_literal: true
+
+module ::AmberComponent
+  # Object which stores configuration options
+  # for this gem.
+  class Configuration
+    # @return [Set<Symbol>]
+    STIMULUS_INTEGRATIONS = ::Set[nil, :importmap, :webpacker, :jsbundling, :webpack, :esbuild, :rollup]
+    # @return [Set<Symbol>]
+    ALLOWED_STYLES = ::Set.new(%i[css scss sass])
+    # @return [Set<Symbol>]
+    ALLOWED_VIEWS = ::Set.new(%i[erb haml slim])
+
+    # How Stimulus.js is bundled in this app.
+    # Possible values: `[nil, :importmap, :webpacker, :jsbundling, :webpack, :esbuild, :rollup]`
+    # `nil` indicates that stimulus should not be used (default behaviour).
+    #
+    # @return [Symbol, nil]
+    attr_reader :stimulus
+
+    # The default format that the generators will use
+    # for the view/template file of a component.
+    # Possible values: `[nil, :erb, :haml, :slim]`
+    #
+    # @return [Symbol, nil]
+    attr_reader :view_format
+
+    # The default format that the generators will use
+    # for the stylesheets of a component.
+    # Possible values: `[nil, :css, :scss, :sass]`
+    #
+    # @return [Symbol, nil]
+    attr_reader :stylesheet_format
+
+    # How Stimulus.js is bundled in this app.
+    # Possible values: `[nil, :importmap, :webpacker, :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 `#{__method__}` bundling. " \
+              "Received #{val.inspect}, expected one of #{STIMULUS_INTEGRATIONS.inspect}")
+      end
+
+      @stimulus = val
+    end
+
+    # @param val [Symbol, String, nil]
+    def stylesheet_format=(val)
+      val = val&.to_sym
+      unless val.nil? || ALLOWED_STYLES.include?(val)
+        raise(::ArgumentError,
+              "Invalid value for `#{__method__}`. " \
+              "Received #{val.inspect}, expected one of #{ALLOWED_STYLES.inspect}")
+      end
+
+      @stylesheet_format = val
+    end
+
+    # @param val [Symbol, String, nil]
+    def view_format=(val)
+      val = val&.to_sym
+      unless val.nil? || ALLOWED_VIEWS.include?(val)
+        raise(::ArgumentError,
+              "Invalid value for `#{__method__}`. " \
+              "Received #{val.inspect}, expected one of #{ALLOWED_VIEWS.inspect}")
+      end
+
+      @view_format = val
+    end
+
+    # @return [Boolean]
+    def stimulus?
+      !@stimulus.nil?
+    end
+
+    # @return [Boolean]
+    def stimulus_importmap?
+      @stimulus == :importmap
+    end
+  end
+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 = '1.0.0'
+  VERSION = '1.1.1'
 end

data/lib/amber_component/views.rb

@@ -8,7 +8,7 @@ module ::AmberComponent
     # @return [Set<Symbol>]
     VIEW_TYPES_WITH_RUBY = ::Set[:erb, :haml, :slim].freeze
     # @return [Set<Symbol>]
-    ALLOWED_VIEW_TYPES = ::Set[:erb, :haml, :slim, :html, :md, :markdown].freeze
+    ALLOWED_VIEW_TYPES = ::Set[:erb, :haml, :slim, :html].freeze
     # @return [Regexp]
     VIEW_FILE_REGEXP  = /^view\./.freeze
 

data/lib/amber_component.rb

@@ -2,7 +2,12 @@
 
 require 'active_support'
 require 'active_support/core_ext'
+require 'pathname'
+require 'set'
 
+require_relative 'amber_component/configuration'
+
+# Root module of the `amber_component` gem.
 module ::AmberComponent
   class Error < ::StandardError; end
   class MissingPropsError < Error; end
@@ -13,6 +18,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,22 @@ module ::AmberComponent
       desc 'Install the AmberComponent gem'
       source_root ::File.expand_path('templates', __dir__)
 
-      # copy rake tasks
-      def copy_tasks
+      class_option :stimulus,
+                   desc: "Configure the app to use Stimulus.js wih components to make them interactive " \
+                         "[options: importmap (default), webpacker (legacy), jsbundling, webpack, esbuild, rollup]"
+
+      class_option :styles,
+                   desc: "Configure the app to generate components with a particular stylesheet format " \
+                         "[options: css (default), scss, sass]"
+
+      class_option :views,
+                   desc: "Configure the app to generate components with a particular view format " \
+                         "[options: erb (default), haml, slim]"
+
+      def setup
+        detect_stimulus
+        detect_styles
+        detect_views
         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 +37,165 @@ 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
+        create_initializer
       end
 
       private
 
+      def detect_styles
+        styles_option = options[:styles]&.to_sym
+        if !styles_option.nil? && !Configuration::ALLOWED_STYLES.include?(styles_option)
+          raise ::ArgumentError, "no such `stylesheet_format` as #{styles_option.inspect}"
+        end
+
+        @styles =
+          if styles_option
+            styles_option
+          elsif defined?(::SassC)
+            :scss
+          else
+            :css
+          end
+      end
+
+      def detect_views
+        views_option = options[:views]&.to_sym
+        if !views_option.nil? && !Configuration::ALLOWED_VIEWS.include?(views_option)
+          raise ::ArgumentError, "no such `view_format` as #{views_option.inspect}"
+        end
+
+        @views =
+          if views_option
+            views_option
+          elsif defined?(::Haml)
+            :haml
+          elsif defined?(::Slim)
+            :slim
+          else
+            :erb
+          end
+      end
+
+      def detect_stimulus
+        stimulus_option = options[:stimulus]&.to_sym
+        return unless stimulus_option
+
+        case stimulus_option
+        when :stimulus
+          if defined?(::Jsbundling)
+            stimulus_jsbundling!
+          elsif defined?(::Webpacker)
+            stimulus_webpacker!
+          else
+            stimulus_importmap!
+          end
+        when :importmap
+          stimulus_importmap!
+        when :jsbundling, :webpack, :esbuild, :rollup
+          stimulus_jsbundling!
+        when :webpacker
+          stimulus_webpacker!
+        else
+          raise ::ArgumentError,
+                "no such stimulus integration as `#{options[:stimulus].inspect}`"
+        end
+      end
+
+      def assert_styles
+        return if options[:styles].nil?
+        return if options[:styles].nil?
+      end
+
+      def configure_stimulus
+        case @stimulus
+        when :importmap  then configure_stimulus_importmap
+        when :jsbundling then configure_stimulus_jsbundling
+        when :webpacker  then configure_stimulus_webpacker
+        end
+      end
+
+      def create_initializer
+        create_file 'config/initializers/amber_component.rb', <<~RUBY
+          # frozen_string_literal: true
+
+          ::AmberComponent.configure do |c|
+            c.stimulus = #{@stimulus.inspect} # #{Configuration::STIMULUS_INTEGRATIONS.to_a}
+            c.stylesheet_format = #{@styles.inspect} # #{Configuration::ALLOWED_STYLES.to_a}
+            c.view_format = #{@views.inspect} # #{Configuration::ALLOWED_VIEWS.to_a}
+          end
+        RUBY
+      end
+
+      def stimulus_jsbundling!
+        @stimulus = :jsbundling
+      end
+
+      def stimulus_importmap!
+        @stimulus = :importmap
+      end
+
+      def stimulus_webpacker!
+        @stimulus = :webpacker
+      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
+
+      def configure_stimulus_webpacker
+        install_stimulus
+        append_file 'app/javascript/packs/application.js', %(import "controllers"\n)
+        append_file 'app/javascript/controllers/index.js', %(import "./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

@@ -7,41 +7,36 @@ class AmberComponentGenerator < ::Rails::Generators::NamedBase
   desc 'Generate a new component'
   source_root ::File.expand_path('templates', __dir__)
 
-  # @return [Array<Symbol>]
-  VIEW_FORMATS = %i[html erb haml slim].freeze
-  # @return [Array<Symbol>]
-  STYLE_FORMATS = %i[css scss sass].freeze
-
   class_option :view,
                aliases: ['-v'],
-               desc: "Indicate what type of view should be generated eg. #{VIEW_FORMATS}"
+               desc: "Indicate what type of view should be generated " \
+                     "eg. #{::AmberComponent::Configuration::ALLOWED_VIEWS}"
 
   class_option :css,
-               aliases: ['--style', '-c'],
-               desc: "Indicate what type of styles should be generated eg. #{STYLE_FORMATS}"
+               aliases: ['--styles', '-c'],
+               desc: "Indicate what type of styles should be generated " \
+                     "eg. #{::AmberComponent::Configuration::ALLOWED_STYLES}"
 
   def generate_component
-    @view_format = (options[:view] || :html).to_sym
-    @view_format = :html if @view_format == :erb
-
-    @style_format = options[:css]&.to_sym
+    set_view_format
+    set_stylesheet_format
 
-    unless VIEW_FORMATS.include? @view_format
-      puts "No such view format as `#{@view_format}`"
-      return
+    unless ::AmberComponent::Configuration::ALLOWED_VIEWS.include? @view_format
+      raise ::ArgumentError, "No such view format as `#{@view_format}`"
     end
 
-    if !@style_format.nil? && STYLE_FORMATS.include?(@style_format)
-      puts "No such css/style format as `#{@style_format}`"
-      return
+    unless ::AmberComponent::Configuration::ALLOWED_STYLES.include?(@stylesheet_format)
+      raise ::ArgumentError, "No such css/style format as `#{@stylesheet_format}`"
     end
 
     template 'component.rb.erb', "app/components/#{file_path}.rb"
     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 +46,37 @@ class AmberComponentGenerator < ::Rails::Generators::NamedBase
 
   private
 
+  def set_view_format
+    @view_format = options[:view]&.to_sym || ::AmberComponent.configuration.view_format || :erb
+  end
+
+  def set_stylesheet_format
+    @stylesheet_format = options[:style]&.to_sym || ::AmberComponent.configuration.stylesheet_format || :css
+  end
+
+  # @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
@@ -65,12 +91,23 @@ class AmberComponentGenerator < ::Rails::Generators::NamedBase
 
   # @return [void]
   def create_stylesheet
-    if (@style_format.nil? && defined?(::SassC)) || @style_format == :scss
+    case @stylesheet_format
+    when :scss
       template 'style.scss.erb', "app/components/#{file_path}/style.scss"
-    elsif @style_format == :sass
+    when :sass
       template 'style.sass.erb', "app/components/#{file_path}/style.sass"
     else
       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: 1.0.0
+  version: 1.1.1
 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-14 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