opal_stimulus 0.1.2 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 300ef0df34590b96644f09bec7f618c308189700c8b91c909bccb4bd7cb48760
-  data.tar.gz: 4d405702dc56dcd9a0fd980c6c834dce308303a4e73f950239ed33c58493bd56
+  metadata.gz: cb159569bc40b9490b5433925d2b07e0a4cbd05d8c5f8c1ad86547efedd38361
+  data.tar.gz: 2d06de0ea3b604943301fd118de40c41b010378d7bf505878b0a99c1af51cffe
 SHA512:
-  metadata.gz: 320be88eef00e84f254a120dd0c3029f6027daacba7aeab96c74af79de26b1150034de44200d299fad77d1817e9f298e1f1111d7c608fb076cf4db9ef571831b
-  data.tar.gz: 548d689d02602637832156e6e88be3ff29224ce12dd5cba5de985d04c1567eabc1ad539120b9f6cd7dee41c687ec86324ac3179c4ffac04ed5cc15f79f5fb524
+  metadata.gz: d543dccccdb4c2fa6c0a1422681ac5181547e4f28e00f0fa7085015f8abefeaa37a96839bf9001335bd1fb2ff90ed3a91404eb515fb0e907e969324824914e34
+  data.tar.gz: 0c8822447330dbeef2dd40bd43bba1110dd458e5269675a9f6c08ca96c4177a5b2caa77dd307c3ece0665f260008111a3bab31a52bbfdaf9588c565fdbec4cfc

data/CHANGELOG.md

@@ -11,3 +11,18 @@
 ## [0.1.2] - 2025-07-29
 
 - Implement Opal Source maps https://opalrb.com/docs/guides/v1.4.1/source_maps.html
+
+## [0.1.3] - 2025-07-29
+
+- Add missing ignore for app/assets/builds/opal.js.map
+- Replace opal-browser with opal_proxy, check it out here.
+
+## [0.1.4] - 2025-08-03
+
+Fix Targets
+Fix Outlets
+Fix Values
+Fix `element`
+Fix Classes
+Updare readme
+Add `document` and `window` private methods

data/README.md

@@ -25,7 +25,7 @@ bin/dev
 
 ## Basic Example
 
-Here's a Hello World example with OpalStimulus. Compare with the [original JavaScript example](https://stimulus.hotwired.dev/handbook/hello-stimulus):
+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):
 
 **Ruby Controller:**
 
@@ -37,7 +37,7 @@ class HelloController < StimulusController
   self.targets = ["name", "output"]
 
   def greet
-    output_target.content = "Hello, #{name_target.value}!"
+    output_target.text_content = "Hello, #{name_target.value}!"
   end
 end
 ```
@@ -61,9 +61,123 @@ end
 
 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`~
+- Any `target`, `element`, `document`, `window` and `event` is a `JS::Proxy` instance, that provides a dynamic interface to JavaScript objects in Opal
+- The frontend definition part will remain the same
 
 
+## Some examples based on [Stimulus Reference](https://stimulus.hotwired.dev/reference/controllers)
+
+### Lifecycle Callbacks
+```ruby
+class AlertController < StimulusController
+  def initialize; end
+  def connect; end
+  def disconnect; end
+end
+```
+
+### Actions
+```ruby
+class WindowResizeController < StimulusController
+  def resized(event)
+    if !@resized && event.target.inner_width >= 1080
+      puts "Full HD? Nice!"
+      @resized = true
+    end
+  end
+end
+```
+
+### Targets
+```ruby
+class ContainerController < StimulusController
+  self.targets = ["container"]
+
+  def container_target_connected
+    container_target.inner_html = <<~HTML
+      <h1>Test connected!</h1>
+    HTML
+  end
+
+  def container_target_disconnected
+    puts "Container disconnected!"
+  end
+end
+```
+
+### Outlets
+```ruby
+class ChatController < StimulusController
+  self.outlets = [ "user-status" ]
+
+  def connect
+    user_status_outlets.each do |status|
+      puts status
+    end
+  end
+end
+```
+
+### Values
+```ruby
+class LoaderController < StimulusController
+  self.values = { url: :string }
+
+  def connect
+    window.fetch(url_value).then do |response|
+      response.json().then do |data|
+        load_data(data)
+      end
+    end
+  end
+
+  private
+
+  def load_data(data)
+    # ...
+  end
+end
+```
+
+### CSS Classes
+```ruby
+class SearchController < StimulusController
+  self.classes = [ "loading" ]
+
+  def loadResults
+    element.class_list.add loading_class
+  end
+end
+```
+
+## Extra tools
+### Window
+```ruby
+class WindowController < StimulusController
+  def connect
+    window.alert "Hello world!"
+    window.set_timeout(-> {
+      puts "1. Timeout test OK (1s delay)"
+    }, 1000)
+  end
+end
+```
+
+### Document
+```ruby
+class DocumentController < StimulusController
+  def connect
+    headers = document.querySelectorAll("h1")
+    headers.each do |h1|
+      h1.text_content = "Opal is great!"
+    end
+  end
+end
+```
+
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/josephschito/opal_stimulus.

data/lib/install/install_opal_stimulus.rb

@@ -40,6 +40,7 @@ window.Controller = Controller;
   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"

data/lib/install/opal

@@ -4,11 +4,12 @@
 require "bundler/setup"
 require "listen"
 require "opal"
-require "opal-browser"
 
-GEM_NAME = "opal_stimulus"
+GEMS = ["opal_proxy", "opal_stimulus"]
 
-Opal.use_gem(GEM_NAME) rescue Opal.append_path(File.expand_path("lib", Bundler.rubygems.find_name(GEM_NAME).first.full_gem_path))
+GEMS.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("app/opal")
 

data/lib/opal_stimulus/stimulus_controller.rb

@@ -2,8 +2,7 @@
 
 require "opal"
 require "native"
-require "promise"
-require "browser/setup/full"
+require "js/proxy"
 
 class StimulusController < `Controller`
   include Native::Wrapper
@@ -31,7 +30,13 @@ class StimulusController < `Controller`
     %x{
       #{self.stimulus_controller}.prototype[name] = function (...args) {
         try {
-          return this['$' + name].apply(this, args);
+          var wrappedArgs = args.map(function(arg) {
+            if (arg && typeof arg === "object" && !arg.$$class) {
+              return Opal.JS.Proxy.$new(arg);
+            }
+            return arg;
+          });
+          return this['$' + name].apply(this, wrappedArgs);
         } catch (e) {
           console.error("Uncaught", e);
         }
@@ -43,22 +48,25 @@ class StimulusController < `Controller`
     `#{self.stimulus_controller}.targets = targets`
 
     targets.each do |target|
-      define_method(target + "_target") do
-        Browser::DOM::Element.new(`this[#{target + "Target"}]`)
+      js_name = target.to_s
+      ruby_name = self.to_ruby_name(target)
+
+      define_method(ruby_name + "_target") do
+        JS::Proxy.new(`this[#{js_name + "Target"}]`)
       end
 
-      define_method(target + "_targets") do
-        `this[#{target + "Targets"}]`.map do |el|
-          Browser::DOM::Element.new(el)
+      define_method(ruby_name + "_targets") do
+        `this[#{js_name + "Targets"}]`.map do |el|
+          JS::Proxy.new(el)
         end
       end
 
-      define_method("has_" + target + "_target") do
-        `return this[#{"has" + target.capitalize + "Target"}]`
+      define_method("has_" + ruby_name + "_target") do
+        `this[#{"has" + js_name.capitalize + "Target"}]`
       end
 
-      snake_case_connected = target + "_target_connected"
-      camel_case_connected = target + "TargetConnected"
+      snake_case_connected = ruby_name + "_target_connected"
+      camel_case_connected = js_name + "TargetConnected"
       %x{
         #{self.stimulus_controller}.prototype[#{camel_case_connected}] = function() {
           if (this['$respond_to?'] && this['$respond_to?'](#{snake_case_connected})) {
@@ -67,8 +75,8 @@ class StimulusController < `Controller`
         }
       }
 
-      snake_case_disconnected = target + "_target_disconnected"
-      camel_case_disconnected = target + "TargetDisconnected"
+      snake_case_disconnected = ruby_name + "_target_disconnected"
+      camel_case_disconnected = js_name + "TargetDisconnected"
       %x{
         #{self.stimulus_controller}.prototype[#{camel_case_disconnected}] = function() {
           if (this['$respond_to?'] && this['$respond_to?'](#{snake_case_disconnected})) {
@@ -83,22 +91,23 @@ class StimulusController < `Controller`
     `#{self.stimulus_controller}.outlets = outlets`
 
     outlets.each do |outlet|
-      define_method(outlet + "_outlet") do
-        Browser::DOM::Element.new(`this[#{outlet + "Outlet"}]`)
+      js_name = outlet.to_s
+      ruby_name = self.to_ruby_name(outlet)
+
+      define_method(ruby_name + "_outlet") do
+        `return this[#{js_name + "Outlet"}]`
       end
 
-      define_method(outlet + "_outlets") do
-        `this[#{outlet + "Outlets"}]`.map do |outlet|
-          Browser::DOM::Element.new(outlet)
-        end
+      define_method(ruby_name + "_outlets") do
+        `this[#{js_name + "Outlets"}]`
       end
 
-      define_method("has_" + outlet + "_outlet") do
-        `return this[#{"has" + outlet.capitalize + "Outlet"}]`
+      define_method("has_" + ruby_name + "_outlet") do
+        `return this[#{"has" + js_name.capitalize + "Outlet"}]`
       end
 
-      snake_case_connected = outlet + "_outlet_connected"
-      camel_case_connected = outlet + "OutletConnected"
+      snake_case_connected = ruby_name + "_outlet_connected"
+      camel_case_connected = js_name + "OutletConnected"
       %x{
         #{self.stimulus_controller}.prototype[#{camel_case_connected}] = function() {
           if (this['$respond_to?'] && this['$respond_to?'](#{snake_case_connected})) {
@@ -107,8 +116,8 @@ class StimulusController < `Controller`
         }
       }
 
-      snake_case_disconnected = outlet + "_outlet_disconnected"
-      camel_case_disconnected = outlet + "OutletDisconnected"
+      snake_case_disconnected = ruby_name + "_outlet_disconnected"
+      camel_case_disconnected = js_name + "OutletDisconnected"
       %x{
         #{self.stimulus_controller}.prototype[#{camel_case_disconnected}] = function() {
           if (this['$respond_to?'] && this['$respond_to?'](#{snake_case_disconnected})) {
@@ -123,37 +132,29 @@ class StimulusController < `Controller`
     js_values = {}
 
     values_hash.each do |name, type|
+      name = self.to_ruby_name(name)
+
       js_type = case type
-      when String  then "String"
-      when Integer, Float, Numeric then "Number"
-      when TrueClass, FalseClass, Boolean then "Boolean"
-      when Array  then "Array"
-      when Hash, Object then "Object"
-      else "String" # Default to String for unknown types
+      when :string then `String`
+      when :number then `Number`
+      when :boolean then `Boolean`
+      when :array then `Array`
+      when :object then `Object`
+      else
+        raise ArgumentError,
+          "Unsupported value type: #{type}, please use :string, :number, :boolean, :array, or :object"
       end
 
       js_values[name] = js_type
 
-      # Define value getter method (snake_case)
-      define_method(name.to_s) do
-        # Convert JavaScript value to appropriate Ruby type
-        js_value = `this[#{name + "Value"}]`
-        case type
-        when String
-          js_value.to_s
-        when Integer
-          js_value.to_i
-        when Float
-          js_value.to_f
-        when TrueClass, FalseClass, Boolean
-          !!js_value
-        when Array
-          Native::Array.new(js_value)
-        when Hash, Object
-          Native::Object.new(js_value)
-        else
-          js_value
-        end
+      `#{self.stimulus_controller}.values = #{js_values.to_n}`
+
+      define_method(name + "_value") do
+        `return this[#{name + "Value"}]`
+      end
+
+      define_method(name + "_value=") do |value|
+        `this[#{name + "Value"}]= #{value.to_n}`
       end
 
       define_method("has_#{name}") do
@@ -170,69 +171,47 @@ class StimulusController < `Controller`
         }
       }
     end
-
-    `#{self.stimulus_controller}.values = #{js_values.to_n}`
   end
 
   def self.classes=(class_names = [])
-    `#{self.stimulus_controller}.classes = #{class_names.to_n}`
+    `#{self.stimulus_controller}.classes = class_names`
 
     class_names.each do |class_name|
-      define_method("add_#{class_name}_class") do
-        `this.#{class_name}Classes.add()`
-      end
+      js_name = class_name.to_s
+      ruby_name = self.to_ruby_name(class_name)
 
-      define_method("remove_#{class_name}_class") do
-        `this.#{class_name}Classes.remove()`
+      define_method("#{ruby_name}_class") do
+        `return this[#{js_name + "Class"}]`
       end
 
-      define_method("has_#{class_name}_class?") do
-        `return this.#{class_name}Classes.has()`
+      define_method("#{ruby_name}_classes") do
+        `return this[#{js_name + "Classes"}]`
       end
 
-      define_method("toggle_#{class_name}_class") do
-        `this.#{class_name}Classes.toggle()`
+      define_method("has_#{ruby_name}_class") do
+        `return this[#{"has" + js_name.capitalize + "Class"}]`
       end
     end
   end
 
-  def add_class(class_name, element = nil)
-    if element
-      `this.addClass(#{class_name}, #{element})`
-    else
-      `this.addClass(#{class_name})`
-    end
+  def element
+    JS::Proxy.new(`this.element`)
   end
 
-  def remove_class(class_name, element = nil)
-    if element
-      `this.removeClass(#{class_name}, #{element})`
-    else
-      `this.removeClass(#{class_name})`
-    end
-  end
+  private
 
-  def has_class?(class_name, element = nil)
-    if element
-      `return this.hasClass(#{class_name}, #{element})`
-    else
-      `return this.hasClass(#{class_name})`
-    end
+  def self.to_ruby_name(name)
+    name
+      .to_s
+      .gsub(/([A-Z]+)/) { "_#{$1.downcase}" }
+      .sub(/^_/, '')
   end
 
-  def toggle_class(class_name, force = nil, element = nil)
-    if element && force != nil
-      `this.toggleClass(#{class_name}, #{force}, #{element})`
-    elsif element
-      `this.toggleClass(#{class_name}, #{element})`
-    elsif force != nil
-      `this.toggleClass(#{class_name}, #{force})`
-    else
-      `this.toggleClass(#{class_name})`
-    end
+  def window
+    @window ||= JS::Proxy.new($$.window)
   end
 
-  def element
-    `this.element`
+  def document
+    @document ||= JS::Proxy.new($$.document)
   end
 end

data/lib/opal_stimulus/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: opal_stimulus
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.4
 platform: ruby
 authors:
 - Joseph Schito
@@ -38,19 +38,19 @@ dependencies:
       - !ruby/object:Gem::Version
         version: 3.9.0
 - !ruby/object:Gem::Dependency
-  name: opal-browser
+  name: opal_proxy
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.3.5
+        version: 0.1.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.3.5
+        version: 0.1.0
 description: Opal Stimulus provides a way to write Stimulus controllers in Ruby, leveraging
   the Opal compiler to convert Ruby code into JavaScript. This allows developers familiar
   with Ruby to use the Stimulus framework without needing to write JavaScript directly.