opal_stimulus 0.1.4 → 0.1.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cb159569bc40b9490b5433925d2b07e0a4cbd05d8c5f8c1ad86547efedd38361
-  data.tar.gz: 2d06de0ea3b604943301fd118de40c41b010378d7bf505878b0a99c1af51cffe
+  metadata.gz: 669d38bd3eaad485f44b8347ca5008ee6d6001a7d622f305ad78a413f2fbee43
+  data.tar.gz: 36bd60dc686ef27c23e1db07a3359679f1b6de0fc9ef28e11ef79f891bc79303
 SHA512:
-  metadata.gz: d543dccccdb4c2fa6c0a1422681ac5181547e4f28e00f0fa7085015f8abefeaa37a96839bf9001335bd1fb2ff90ed3a91404eb515fb0e907e969324824914e34
-  data.tar.gz: 0c8822447330dbeef2dd40bd43bba1110dd458e5269675a9f6c08ca96c4177a5b2caa77dd307c3ece0665f260008111a3bab31a52bbfdaf9588c565fdbec4cfc
+  metadata.gz: 5ff23a23826bb81e640c712da250e950053376312a5af7bd6dc10e5175ab2480257ec859868e8c24dc8f7ba7d343f9147bf119852e9475d927e44fd893a3da90
+  data.tar.gz: 422ab1172b497502b34b1369118ed10669e59b8a830ae9539fc7a7c289ae743bc9ed68919fab0eb666a3a88c679a13dbe43a9c8f6c3514e462e58607f07e629f

data/.rspec-opal

@@ -0,0 +1,2 @@
+--color
+--require spec_helper

data/CHANGELOG.md

@@ -19,10 +19,22 @@
 
 ## [0.1.4] - 2025-08-03
 
-Fix Targets
-Fix Outlets
-Fix Values
-Fix `element`
-Fix Classes
-Updare readme
-Add `document` and `window` private methods
+- Fix Targets
+- Fix Outlets
+- Fix Values
+- Fix `element`
+- Fix Classes
+- Add `document` and `window` private methods
+
+## [0.1.5] - 2025-08-14
+
+- Add `StimulusController` unit and system tests
+- Reduce installed new lines for Rails
+- Skip importmap in production
+- Add `bin/rails generate opal_stimulus <CONTROLLER_NAME>`, usage: `bin/rails g opal_stimulus -h`
+
+## [0.1.6] - 2025-08-17
+
+- Simplify installation importing `application` and `Controller` with ESM
+  Now `app/javascript/controllers/application.js` will be not modified,
+  and only compiled code will be imported inside application layout.

data/README.md

@@ -2,6 +2,8 @@
 
 **Opal Stimulus** is a Stimulus wrapper made with Opal (a source-to-source Ruby to JavaScript compiler) that allows you to write Stimulus controllers in Ruby instead of JavaScript (It works only with Rails).
 
+[![Ruby](https://github.com/josephschito/opal_stimulus/actions/workflows/main.yml/badge.svg)](https://github.com/josephschito/opal_stimulus/actions/workflows/main.yml)
+
 ## Installation
 
 Add this line to your Gemfile:
@@ -23,6 +25,13 @@ Start application:
 bin/dev
 ```
 
+Create a new controller:
+
+```bash
+bin/rails opal_stimulus hello
+```
+This command will create `app/opal/controllers/hello_controller.rb`
+
 ## Basic Example
 
 Here's a Hello World example with OpalStimulus. Compare with the [original JavaScript example](https://stimulus.hotwired.dev/#:~:text=%2F%2F%20hello_controller.js%0Aimport%20%7B%20Controller%20%7D%20from%20%22stimulus%22%0A%0Aexport%20default%20class%20extends%20Controller%20%7B%0A%20%20static%20targets%20%3D%20%5B%20%22name%22%2C%20%22output%22%20%5D%0A%0A%20%20greet()%20%7B%0A%20%20%20%20this.outputTarget.textContent%20%3D%0A%20%20%20%20%20%20%60Hello%2C%20%24%7Bthis.nameTarget.value%7D!%60%0A%20%20%7D%0A%7D):
@@ -31,8 +40,6 @@ Here's a Hello World example with OpalStimulus. Compare with the [original JavaS
 
 ```ruby
 # app/opal/controllers/hello_controller.rb
-# new controllers will be automatically added to app/opal/controllers_requires.rb
-#   (ordered files load is not supported yet)
 class HelloController < StimulusController
   self.targets = ["name", "output"]
 
@@ -57,10 +64,6 @@ end
 </div>
 ```
 
-**Result**
-
-https://github.com/user-attachments/assets/c51ed28c-13d2-4e06-b882-1cc997e9627b
-
 **Notes:**
 
 - In general any reference method is snake cased, so `container` target will produce `container_target` and not ~`containerTarget`~
@@ -178,6 +181,9 @@ class DocumentController < StimulusController
 end
 ```
 
+## Run tests
+`bundle exec rake`
+
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/josephschito/opal_stimulus.

data/Rakefile

@@ -9,4 +9,15 @@ require "rubocop/rake_task"
 
 RuboCop::RakeTask.new
 
-task default: %i[test rubocop]
+require 'opal/rspec/rake_task'
+require "opal"
+
+Opal.use_gem("opal_proxy")
+Opal.append_path File.expand_path('../lib', __FILE__)
+Opal.append_path File.expand_path('../shared_fixtures', __FILE__)
+
+Opal::RSpec::RakeTask.new("rspec-opal") do |server, task|
+  task.runner = :chrome
+end
+
+task default: %i[test rspec-opal]

data/lib/generators/USAGE

@@ -0,0 +1,14 @@
+Description:
+============
+    Generates a new Opal Stimulus controller at the passed path.
+
+Examples:
+=========
+    bin/rails generate opal_stimulus chat
+
+    creates: app/opal/controllers/chat_controller.rb
+
+
+    bin/rails generate stimulus nested/chat
+
+    creates: app/opal/controllers/nested/chat_controller.rb

data/lib/generators/opal_stimulus_generator.rb

@@ -0,0 +1,9 @@
+require "rails/generators/named_base"
+
+class OpalStimulusGenerator < Rails::Generators::NamedBase
+  source_root File.expand_path("templates", __dir__)
+
+  def create_controller_file
+    template "controller.rb.tt", File.join("app/opal/controllers", class_path, "#{file_name}_controller.rb")
+  end
+end

data/lib/generators/templates/controller.rb.tt

@@ -0,0 +1,14 @@
+# Connects to data-controller="<%= file_name.dasherize %>"
+<% constants = class_name.split("::") -%>
+<% modules = constants[0..-2] -%>
+<% indentation = "  " * (modules.length) -%>
+<% modules.each do |constant| -%>
+module <%= constant %>
+<% end -%>
+<%= indentation %>class <%= constants.last %>Controller < StimulusController
+<%= indentation %>  def connect
+<%= indentation %>  end
+<%= indentation %>end
+<% modules.each.with_index do |constant, i| -%>
+<%= "  " * i %>end
+<% end -%>

data/lib/install/Procfile.dev

@@ -1,2 +1,2 @@
 web: bin/rails server
-opal: bin/opal --watch
+opal: bin/rails opal_stimulus:watch

data/lib/install/application.rb

@@ -1,9 +1,4 @@
 require "opal_stimulus/stimulus_controller"
-require "controllers_requires"
+require_tree "controllers"
 
-StimulusController.subclasses.each do |controller|
-  controller.define_method(:dummy) { }
-
-  return if `Stimulus.controllers`.include?(`#{controller.stimulus_name}`)
-  `Stimulus.register(#{controller.stimulus_name}, #{controller.stimulus_controller})`
-end
+StimulusController.register_all!

data/lib/install/install_opal_stimulus.rb

@@ -7,22 +7,14 @@ if File.exist? APPLICATION_LAYOUT_PATH
   insert_into_file APPLICATION_LAYOUT_PATH, after: "<%= javascript_importmap_tags %>\n" do
     <<-ERB
     <script type="module">
-      import "application"
       import "<%= javascript_path("opal") %>"
     </script>
     ERB
   end
 
-  insert_into_file APPLICATION_LAYOUT_PATH, after: "<body>\n" do
-    say "Adding `my-opal` to the application layout", :green
-    <<-ERB
-    <span data-controller="my-opal"></span>
-    ERB
-  end
-
   say "Creating Opal Stimulus files", :green
   if Rails.root.join("Procfile.dev").exist?
-    append_to_file "Procfile.dev", "opal: bin/opal --watch\n"
+    append_to_file "Procfile.dev", "opal: bin/rails opal_stimulus:watch\n"
   else
     say "Add default Procfile.dev"
     copy_file "#{__dir__}/Procfile.dev", "Procfile.dev"
@@ -30,27 +22,15 @@ if File.exist? APPLICATION_LAYOUT_PATH
     say "Ensure foreman is installed"
     run "gem install foreman"
   end
-  insert_into_file Rails.root.join("app/javascript/controllers/application.js") do
-    <<-JS
-import { Controller } from "@hotwired/stimulus";
-
-window.application = application;
-window.Controller = Controller;
-    JS
-  end
   append_to_file ".gitignore", "/.opal-cache\n"
   append_to_file ".gitignore", "app/assets/builds/opal.js\n"
   append_to_file ".gitignore", "app/assets/builds/opal.js.map\n"
   empty_directory APPLICATION_OPAL_STIMULUS_BIN_PATH
   empty_directory APPLICATION_OPAL_STIMULUS_PATH
   empty_directory "#{APPLICATION_OPAL_STIMULUS_PATH}/controllers"
-  empty_directory "#{APPLICATION_OPAL_STIMULUS_PATH}/app/assets/builds"
+  create_file "#{APPLICATION_OPAL_STIMULUS_PATH}/controllers/.keep"
   create_file "app/assets/builds/.keep"
-  copy_file "#{__dir__}/opal", "#{APPLICATION_OPAL_STIMULUS_BIN_PATH}/opal"
-  FileUtils.chmod("+x", "#{APPLICATION_OPAL_STIMULUS_BIN_PATH}/opal")
   copy_file "#{__dir__}/dev", "#{APPLICATION_OPAL_STIMULUS_BIN_PATH}/dev"
   FileUtils.chmod("+x", "#{APPLICATION_OPAL_STIMULUS_BIN_PATH}/dev")
   copy_file "#{__dir__}/application.rb", "#{APPLICATION_OPAL_STIMULUS_PATH}/application.rb"
-  copy_file "#{__dir__}/controllers_requires.rb", "#{APPLICATION_OPAL_STIMULUS_PATH}/controllers_requires.rb"
-  copy_file "#{__dir__}/controllers/my_opal_controller.rb", "#{APPLICATION_OPAL_STIMULUS_PATH}/controllers/my_opal_controller.rb"
 end

data/lib/opal_stimulus/stimulus_controller.rb

@@ -5,8 +5,6 @@ require "native"
 require "js/proxy"
 
 class StimulusController < `Controller`
-  include Native::Wrapper
-
   DEFAULT_METHODS = %i[initialize connect disconnect dispatch]
   DEFAULT_GETTERS = %i[element]
 
@@ -44,6 +42,22 @@ class StimulusController < `Controller`
     }
   end
 
+  def self.to_ruby_name(name)
+    name
+      .to_s
+      .gsub(/([A-Z]+)/) { "_#{$1.downcase}" }
+      .sub(/^_/, '')
+  end
+
+  def self.register_all!
+    subclasses.each do |controller|
+      controller.define_method(:dummy) {}
+
+      return if `application.controllers`.include?(`#{controller.stimulus_name}`)
+      `application.register(#{controller.stimulus_name}, #{controller.stimulus_controller})`
+    end
+  end
+
   def self.targets=(targets = [])
     `#{self.stimulus_controller}.targets = targets`
 
@@ -150,11 +164,11 @@ class StimulusController < `Controller`
       `#{self.stimulus_controller}.values = #{js_values.to_n}`
 
       define_method(name + "_value") do
-        `return this[#{name + "Value"}]`
+        Native(`this[#{name + "Value"}]`)
       end
 
       define_method(name + "_value=") do |value|
-        `this[#{name + "Value"}]= #{value.to_n}`
+        Native(`this[#{name + "Value"}]= #{value}`)
       end
 
       define_method("has_#{name}") do
@@ -165,6 +179,10 @@ class StimulusController < `Controller`
       camel_case_changed = "#{name}ValueChanged"
       %x{
         #{self.stimulus_controller}.prototype[#{camel_case_changed}] = function(value, previousValue) {
+          if (#{type == :object}) {
+            value = JSON.stringify(value)
+            previousValue = JSON.stringify(previousValue)
+          }
           if (this['$respond_to?'] && this['$respond_to?'](#{snake_case_changed})) {
             return this['$' + #{snake_case_changed}](value, previousValue);
           }
@@ -198,15 +216,6 @@ class StimulusController < `Controller`
     JS::Proxy.new(`this.element`)
   end
 
-  private
-
-  def self.to_ruby_name(name)
-    name
-      .to_s
-      .gsub(/([A-Z]+)/) { "_#{$1.downcase}" }
-      .sub(/^_/, '')
-  end
-
   def window
     @window ||= JS::Proxy.new($$.window)
   end

data/lib/opal_stimulus/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module OpalStimulus
-  VERSION = "0.1.4"
+  VERSION = "0.1.6"
 end

data/lib/tasks/build.rake

@@ -0,0 +1,58 @@
+require "bundler/setup"
+require "listen"
+require "opal"
+
+namespace :opal_stimulus do
+  def prepare_paths
+    [ "opal_proxy", "opal_stimulus" ].each do |gem_name|
+      Opal.use_gem(gem_name) rescue Opal.append_path(File.expand_path("lib", Bundler.rubygems.find_name(gem_name).first.full_gem_path))
+    end
+
+    Opal.append_path(Rails.root.join("app/opal"))
+  end
+
+  def compile
+    puts "🔨 Compiling Opal..."
+
+    Opal::Config.esm = true
+    builder = Opal::Builder.new
+    result = builder.build("application")
+    output_path = Rails.root.join("app/assets/builds/opal.js")
+    code = [
+      "import { application } from 'controllers/application';",
+      "import { Controller } from '@hotwired/stimulus';",
+      result.to_s
+    ].join("\n")
+
+    if Rails.env.development?
+      code += "//# sourceMappingURL=/assets/opal.js.map"
+      sourcemap_path = "#{output_path}.map"
+      source_map_json = result.source_map.to_json
+      File.write(sourcemap_path, source_map_json)
+    end
+
+    File.write(output_path, code)
+
+    puts "✅ Compiled to #{output_path}"
+  end
+
+  desc "Build Opal Stimulus controllers"
+  task build: [:environment] do
+    prepare_paths
+    compile
+  end
+
+  desc "Watch and build Opal Stimulus controllers"
+  task watch: [:environment] do
+    prepare_paths
+
+    compile
+
+    listen = Listen.to(Rails.root.join("app/opal")) { compile }
+
+    puts "👀 Watching app/opal for changes..."
+    listen.start
+    Signal.trap("INT") { listen.stop }
+    sleep
+  end
+end

data/lib/tasks/install.rake

@@ -1,6 +1,6 @@
 namespace :opal_stimulus do
   desc "Install Opal Stimulus into the app"
-  task :install do
+  task install: [:environment] do
     system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../install/install_opal_stimulus.rb", __dir__)}"
   end
 end