opal_stimulus 0.1.3 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 123ac1d5e6112d3896cd623518b80732351357cfa11443dd8142fd07f32bec49
-  data.tar.gz: 41bbd48c083fc12359f979f8c8c5d5de2486acd56cf969c0af417edf9576c1d0
+  metadata.gz: cb159569bc40b9490b5433925d2b07e0a4cbd05d8c5f8c1ad86547efedd38361
+  data.tar.gz: 2d06de0ea3b604943301fd118de40c41b010378d7bf505878b0a99c1af51cffe
 SHA512:
-  metadata.gz: fa36ee6800f4e0795640c29c061be9b5c49cdc639c9b976381af2ea41863a40a22cac80368956edb1ca569712191f016764d4c4fa16ceb9583f5fca164b391f5
-  data.tar.gz: 9cea24bad6cbf6bfba34ab79026b8589b6f25c180ee210f263568e275a91a1da16314539ecda837e222637657e4534a4d8a421ec8e38aa9c6a90b1c67cca1605
+  metadata.gz: d543dccccdb4c2fa6c0a1422681ac5181547e4f28e00f0fa7085015f8abefeaa37a96839bf9001335bd1fb2ff90ed3a91404eb515fb0e907e969324824914e34
+  data.tar.gz: 0c8822447330dbeef2dd40bd43bba1110dd458e5269675a9f6c08ca96c4177a5b2caa77dd307c3ece0665f260008111a3bab31a52bbfdaf9588c565fdbec4cfc

data/CHANGELOG.md

@@ -16,3 +16,13 @@
 
 - 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

@@ -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/opal_stimulus/stimulus_controller.rb

@@ -30,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);
         }
@@ -42,22 +48,25 @@ class StimulusController < `Controller`
     `#{self.stimulus_controller}.targets = targets`
 
     targets.each do |target|
-      define_method(target + "_target") do
-        JS::Proxy.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|
+      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})) {
@@ -66,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})) {
@@ -82,22 +91,23 @@ class StimulusController < `Controller`
     `#{self.stimulus_controller}.outlets = outlets`
 
     outlets.each do |outlet|
-      define_method(outlet + "_outlet") do
-        JS::Proxy.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|
-          JS::Proxy.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})) {
@@ -106,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})) {
@@ -122,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
@@ -169,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.3"
+  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.3
+  version: 0.1.4
 platform: ruby
 authors:
 - Joseph Schito