Stimulus Webpacker

This example is based on the Stimulus site, but based on Ruby2JS instead and hosted by Ruby on Rails. It uses Webpacker.

Create a Project

Start a new project:

rails new stimulus-webpacker
cd stimulus-webpacker

Add the following lines to your Gemfile:

gem 'ruby2js', require: 'ruby2js/rails'
gem 'stimulus-rails'

Run the following commands:

./bin/bundle install
./bin/rails ruby2js:install:stimulus:webpacker

Write some HTML and a matching Stimulus controller

Generate a Rails controller:

./bin/rails generate controller Greeter hello

Add the following to app/views/greeter/hello.html.erb:

<div data-controller="hello">
  <input data-hello-target="name" type="text">

  <button data-action="click->hello#greet">
    Greet
  </button>

  <span data-hello-target="output">
  </span>
</div>

Remove app/javascript/controllers/hello_controller.js, and create app/javascript/controllers/hello_controller.js.rb with the following contents:

class HelloController < Stimulus::Controller
  def greet()
    outputTarget.textContent =
      "Hello, #{nameTarget.value} from Ruby!"
  end
end

Try it out!

Start your server:

./bin/rails server

Visit http://localhost:3000/greeter/hello. What you should see:

Make a change to app/javascript/controllers/hello_controller.js.rb and see the results.

In case you are curious, the JavaScript that Ruby2JS returned back to webpack was the following:

Next: LitElement