opal-vite 0.3.14 → 0.3.16

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 70f625bc74c24b95f12fb5fbfddd5f5aee028c1f1953affb73d9bfab639deedf
-  data.tar.gz: 416c5805372e4ff28a55005ec0d0fc0cb23e2d2d76cfe81db04e1da5131ac4d5
+  metadata.gz: 3c20b89cec58a20be779bfbfd9bbffdf4c2dc337fa654e82791d346130a8f8f1
+  data.tar.gz: a51c0fe478c873b9aacd5df3080d06b3173cafa5b7b08225be113cb24471b90d
 SHA512:
-  metadata.gz: 97ecab260b4b8284f5a07a5bdbb9ede917e5708193348d40c77b2d953be852b3f6b97a5a7405082ce2aec62c3abae0561c9a04960f599d622af8ea1ce801edc0
-  data.tar.gz: d51d3a7602afbbc9e3d5cc3898f31f95a9f0c731635074e3d9fe88ae731aadf676f6a9d8e39f5ece06cedca44998fac708983311068fcb38c8c5f2f2a11dc679
+  metadata.gz: e270c06cdd81265b491f9f51b55493438138029d3cd106e482870542dd4479a355cae65042b017c18c2943311f1cd83b45137bd0332bcc685c182fe82556a6ad
+  data.tar.gz: 874b556449b4603cdf752af695f4cfa60b42d9b659d0d17b1e786748d14f345b5e967c343f7d3aa36913944391dd026320ad3f8ca9b7ce524731ddcabc80c333

data/lib/opal/vite/compiler.rb

@@ -12,6 +12,10 @@ module Opal
         @config = options[:config] || Opal::Vite.config
         @include_concerns = options.fetch(:include_concerns, true)
         @stubs = options.fetch(:stubs, [])
+        # When true, Opal's corelib is treated as already loaded and left out
+        # of the output. The Vite plugin then imports the shared runtime
+        # (`/@opal-runtime`) instead, so corelib is only loaded once.
+        @external_runtime = options.fetch(:external_runtime, false)
       end
 
       # Compile Ruby source code to JavaScript
@@ -20,6 +24,7 @@ module Opal
         begin
           # Use Opal::Builder and add the file's directory to load paths
           builder = Opal::Builder.new(stubs: @stubs)
+          builder.prerequired = self.class.runtime_requires if @external_runtime
 
           # Add the directory containing the file to load paths
           # This allows require statements to work relative to the file
@@ -68,10 +73,24 @@ module Opal
       end
 
       # Get the Opal runtime code
+      #
+      # The runtime's entry file (opal.rb) is not registered as a requirable
+      # module, so mark it as loaded explicitly. Otherwise `require 'opal'` in
+      # a bundle compiled with external_runtime raises LoadError at runtime.
       def self.runtime_code
         builder = Opal::Builder.new
         builder.build('opal')
-        builder.to_s
+        "#{builder.to_s}\nOpal.loaded([\"opal\"]);\n"
+      end
+
+      # Logical require paths that are part of runtime_code (opal itself and
+      # the corelib files it pulls in).
+      def self.runtime_requires
+        @runtime_requires ||= begin
+          builder = Opal::Builder.new
+          builder.build('opal')
+          ['opal', *builder.already_processed.to_a].freeze
+        end
       end
 
       private
@@ -107,6 +126,10 @@ module Opal
           end
         end
 
+        # opal-vite's own opal/ directory holds the built-in concerns; it is
+        # on $LOAD_PATH like any gem, so drop it here when they are disabled.
+        gem_opal_paths.delete(File.expand_path(Opal::Vite.opal_lib_path)) unless @include_concerns
+
         # Add opal directories FIRST so they take priority over lib directories
         # This ensures that 'require "inesita"' finds opal/inesita.rb before lib/inesita.rb
         gem_opal_paths.uniq.each do |path|

data/lib/opal/vite/testing/stable_helpers.rb

@@ -224,6 +224,22 @@ module Opal
           js_poll_until(js_condition, timeout: timeout, error_message: "Condition not met: #{js_condition}")
         end
 
+        # Wait until every Stimulus controller declared on the page is connected
+        # (expects the Application on window.Stimulus). Checking for elements or
+        # targets is not enough: they are in the static HTML before Opal has
+        # registered the controllers, so tests could act before connect() ran.
+        # @param timeout [Integer] Maximum wait time in seconds
+        def wait_for_stimulus_connected(timeout: DEFAULT_TIMEOUT)
+          js_poll_until(<<~JS.strip, timeout: timeout, error_message: "Stimulus controllers not connected within #{timeout}s")
+            (typeof Stimulus !== 'undefined') &&
+              Array.from(document.querySelectorAll('[data-controller]')).every(function(el) {
+                return el.getAttribute('data-controller').split(/\\s+/).filter(Boolean).every(function(id) {
+                  return !!Stimulus.getControllerForElementAndIdentifier(el, id);
+                });
+              })
+          JS
+        end
+
         # Wait for DOM to be stable (no pending mutations)
         # Uses MutationObserver setup in JS with Ruby-based polling
         # @param timeout [Integer] Maximum wait time in seconds

data/lib/opal/vite/version.rb

@@ -1,5 +1,5 @@
 module Opal
   module Vite
-    VERSION = "0.3.14"
+    VERSION = "0.3.16"
   end
 end

data/lib/opal-vite.rb

@@ -24,7 +24,8 @@ module Opal
       # Returns the path to the opal/ directory in this gem
       # Contains built-in concerns like StimulusHelpers
       def opal_lib_path
-        File.expand_path('../../opal', __dir__)
+        # This file is lib/opal-vite.rb, so opal/ is one level up
+        File.expand_path('../opal', __dir__)
       end
 
       # CLI entry point for compilation
@@ -32,12 +33,14 @@ module Opal
       # @param include_concerns [Boolean] Whether to include built-in concerns
       # @param source_map [Boolean] Whether to generate source maps
       # @param stubs [Array<String>] List of modules to stub (return empty implementations)
-      def compile_for_vite(file_path, include_concerns: true, source_map: true, stubs: [])
+      # @param external_runtime [Boolean] Leave Opal's corelib out of the output
+      #   (the caller loads it separately, e.g. via the `/@opal-runtime` module)
+      def compile_for_vite(file_path, include_concerns: true, source_map: true, stubs: [], external_runtime: false)
         # Temporarily override source map setting if specified
         original_source_map = config.source_map_enabled
         config.source_map_enabled = source_map
 
-        compiler = Compiler.new(include_concerns: include_concerns, stubs: stubs)
+        compiler = Compiler.new(include_concerns: include_concerns, stubs: stubs, external_runtime: external_runtime)
         result = compiler.compile_file(file_path)
 
         # Output JSON to stdout for the Vite plugin to consume

data/opal/opal_vite/compat/opal_stimulus.rb

@@ -0,0 +1,168 @@
+# backtick_javascript: true
+#
+# Fixes for opal_stimulus (0.2.x) accessors that look up the wrong
+# JavaScript property for multi-word names.
+#
+# opal_stimulus builds names such as "hasSoundButtonTarget" with
+# String#capitalize, which lowercases the rest of the word ("hasSoundbuttonTarget"),
+# and passes snake_case value names straight to Stimulus. As a result:
+#
+# - has_*_target / has_*_outlet / has_*_class always return undefined for
+#   multi-word names
+# - multi-word values read and write the wrong property, use the wrong
+#   data attribute, and never fire *_value_changed
+# - dashed outlet names (e.g. "user-status") read the wrong property and never
+#   fire *_outlet_connected / *_outlet_disconnected
+#
+# Usage (after opal_stimulus, before defining controllers):
+#
+#   require 'opal_stimulus/stimulus_controller'
+#   require 'opal_vite/compat/opal_stimulus'
+#
+# Values declared as `self.values = { latest_paid: :number }` then map to
+# Stimulus' latestPaidValue / data-<controller>-latest-paid-value, as they
+# would in a JavaScript controller.
+require 'opal_stimulus/stimulus_controller'
+
+module OpalVite
+  module Compat
+    module OpalStimulus
+      # "soundButton" -> "SoundButton" (String#capitalize gives "Soundbutton")
+      def self.upcase_first(name)
+        str = name.to_s
+        str.empty? ? str : str[0].upcase + str[1..-1]
+      end
+
+      # Stimulus' camelize: "latest_paid" / "user-status" -> "latestPaid" / "userStatus"
+      def self.camelize(name)
+        name.to_s.gsub(/[_-]([a-z0-9])/) { $1.upcase }
+      end
+
+      # Stimulus' namespaceCamelize for outlet names ("admin--user-status" -> "adminUserStatus")
+      def self.namespace_camelize(name)
+        camelize(name.to_s.gsub('--', '-').gsub('__', '_'))
+      end
+
+      module ClassMethods
+        def targets=(targets = [])
+          super
+
+          targets.each do |target|
+            has_prop = "has#{OpalStimulus.upcase_first(target)}Target"
+            define_method("has_#{to_ruby_name(target)}_target") do
+              `this[#{has_prop}]`
+            end
+          end
+        end
+
+        def outlets=(outlets = [])
+          super
+
+          outlets.each do |outlet|
+            ruby_name = to_ruby_name(outlet).tr('-', '_')
+            js_name = OpalStimulus.namespace_camelize(outlet)
+            outlet_prop = "#{js_name}Outlet"
+            outlets_prop = "#{js_name}Outlets"
+            has_prop = "has#{OpalStimulus.upcase_first(js_name)}Outlet"
+
+            define_method("#{ruby_name}_outlet") do
+              `this[#{outlet_prop}]`
+            end
+
+            define_method("#{ruby_name}_outlets") do
+              `this[#{outlets_prop}]`
+            end
+
+            define_method("has_#{ruby_name}_outlet") do
+              `this[#{has_prop}]`
+            end
+
+            # Stimulus calls the camelized callbacks; forward them to Ruby.
+            ["connected", "disconnected"].each do |event|
+              snake_case_callback = "#{ruby_name}_outlet_#{event}"
+              camel_case_callback = "#{js_name}Outlet#{OpalStimulus.upcase_first(event)}"
+              %x{
+                #{stimulus_controller}.prototype[#{camel_case_callback}] = function(outlet, element) {
+                  if (this['$respond_to?'] && this['$respond_to?'](#{snake_case_callback})) {
+                    return this['$' + #{snake_case_callback}](outlet, element);
+                  }
+                }
+              }
+            end
+          end
+        end
+
+        # Stimulus uses the class key as-is for xxxClass / xxxClasses, so only
+        # the has_ accessor needs fixing.
+        def classes=(class_names = [])
+          super
+
+          class_names.each do |class_name|
+            has_prop = "has#{OpalStimulus.upcase_first(class_name)}Class"
+            define_method("has_#{to_ruby_name(class_name)}_class") do
+              `this[#{has_prop}]`
+            end
+          end
+        end
+
+        # Replaces (does not wrap) the original: the original registers
+        # snake_case keys with Stimulus, which changes the data attribute
+        # name, so it cannot be fixed after the fact.
+        def values=(values_hash = {})
+          js_values = {}
+
+          values_hash.each do |name, type|
+            ruby_name = to_ruby_name(name)
+            js_name = OpalStimulus.camelize(ruby_name)
+
+            js_type = case type
+            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[js_name] = js_type
+
+            value_prop = "#{js_name}Value"
+            has_prop = "has#{OpalStimulus.upcase_first(js_name)}Value"
+
+            define_method("#{ruby_name}_value") do
+              Native(`this[#{value_prop}]`)
+            end
+
+            define_method("#{ruby_name}_value=") do |value|
+              Native(`this[#{value_prop}] = #{value}`)
+            end
+
+            define_method("has_#{ruby_name}") do
+              `this[#{has_prop}]`
+            end
+
+            snake_case_changed = "#{ruby_name}_value_changed"
+            camel_case_changed = "#{js_name}ValueChanged"
+            %x{
+              #{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);
+                }
+              }
+            }
+          end
+
+          `#{stimulus_controller}.values = #{js_values.to_n}`
+        end
+      end
+    end
+  end
+end
+
+StimulusController.singleton_class.prepend(OpalVite::Compat::OpalStimulus::ClassMethods)

data/opal/opal_vite/concerns/v1/functional_component.rb

@@ -217,7 +217,10 @@ module OpalVite
           #   button({ onClick: set_count.with { |c| c + 1 } }, '+')
           def with(&block)
             setter_fn = @setter_fn
-            `function() {
+            # Opal emits a multi-line x-string as a statement (no implicit
+            # return), and a bare anonymous function statement is a
+            # JavaScript syntax error, so return explicitly.
+            `return function() {
               #{setter_fn}(function(current) {
                 return #{block.call(`current`)};
               });

data/opal/opal_vite/concerns/v1/stimulus_helpers.rb

@@ -857,11 +857,12 @@ module OpalVite
       end
 
       # Call a method on a JavaScript object
-      # @param obj [Native] JavaScript object
+      # @param obj [Object] JavaScript object (raw, Native or JS::Proxy)
       # @param method [Symbol, String] Method name
       # @param args [Array] Arguments to pass
       # @return [Native] Method return value
       def js_call_on(obj, method, *args)
+        obj = to_native_element(obj)
         if args.empty?
           `#{obj}[#{method.to_s}]()`
         else
@@ -871,21 +872,40 @@ module OpalVite
       end
 
       # Get a property from a JavaScript object
-      # @param obj [Native] JavaScript object
+      #
+      # Unlike calling the property as a method on a JS::Proxy (e.g. the
+      # elements opal_stimulus' `*_target` methods return), a missing property
+      # does not raise NoMethodError; you get JavaScript's undefined.
+      #
+      # @param obj [Object] JavaScript object (raw, Native or JS::Proxy)
       # @param prop [Symbol, String] Property name
-      # @return [Native] Property value
+      # @return [Object] Raw property value (may be undefined)
       def js_get(obj, prop)
+        obj = to_native_element(obj)
         `#{obj}[#{prop.to_s}]`
       end
 
       # Set a property on a JavaScript object
-      # @param obj [Native] JavaScript object
+      # @param obj [Object] JavaScript object (raw, Native or JS::Proxy)
       # @param prop [Symbol, String] Property name
       # @param value [Object] Value to set
       def js_set(obj, prop, value)
+        obj = to_native_element(obj)
         `#{obj}[#{prop.to_s}] = #{value}`
       end
 
+      # Read a data-* attribute through element.dataset
+      # @param element [Object] DOM element (raw, Native or JS::Proxy)
+      # @param key [Symbol, String] Attribute name without "data-", in
+      #   snake_case or camelCase (:confirm_message and :confirmMessage both
+      #   read data-confirm-message)
+      # @return [String, nil] The attribute value, or nil when it is absent
+      def dataset_value(element, key)
+        el = to_native_element(element)
+        name = camelize(key, false)
+        `(#{el}.dataset[#{name}] == null) ? nil : #{el}.dataset[#{name}]`
+      end
+
       # ===== JSON Methods =====
 
       # Parse JSON string to JavaScript object

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: opal-vite
 version: !ruby/object:Gem::Version
-  version: 0.3.14
+  version: 0.3.16
 platform: ruby
 authors:
 - stofu1234
@@ -112,6 +112,7 @@ files:
 - lib/opal/vite/testing/stable_helpers.rb
 - lib/opal/vite/version.rb
 - opal/opal_vite.rb
+- opal/opal_vite/compat/opal_stimulus.rb
 - opal/opal_vite/concerns.rb
 - opal/opal_vite/concerns/dom_helpers.rb
 - opal/opal_vite/concerns/js_proxy_ex.rb