opal-vite 0.2.2 → 0.2.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d02e4907cfae995a3c6496d788bf45bee0815c506be5685bc43caa417572f864
-  data.tar.gz: da33d83bca5ccc6eab82467d639c209911283a55bda3d9ce89d522639f1a2347
+  metadata.gz: 589d2115317b97d0c2c1452001b128f4ac3269d8e05c390e60e87d0446c8ebf0
+  data.tar.gz: 2811c208a9e64dfd800d2f1d4540a052f348b82b03f255ff6cae820895af8098
 SHA512:
-  metadata.gz: bd7612a8e8b417ede04c9dcc8f71a7238e170f0d4d909e8fb44015211aa3ef59253e62cea003e5050d0d75052ea54da3f2c77fbf7211147987a566c97677b9cf
-  data.tar.gz: 0f325e40dd3785586ca1c39912602b4553fe2b8842d3d22504378c1887d9026b41ab85f70562c17025905879bacc44cf4295a7d3abf799a75137b459634dbdf6
+  metadata.gz: a85ead98a10e206d858a508ef808f9410af6bf6597c6f167b93560da2cb706cbffb252b90ac5144eb9003ef45291bcdbdd84f8dab7c56425d08933be952bbbe8
+  data.tar.gz: 117923f00c860592866c31fba50371b84a8c47007c822ce240fa377c510119b1f640443cfa338b78298e5fe59ec1c7d44137340c71503634a71f9b26d9813783

data/lib/opal/vite/compiler.rb

@@ -1,5 +1,6 @@
 require 'opal'
 require 'json'
+require 'pathname'
 
 module Opal
   module Vite
@@ -38,12 +39,10 @@ module Opal
             dependencies: extract_dependencies(builder)
           }
 
-          # Try to extract source map if available
+          # Extract source map if enabled
           if @config.source_map_enabled
             begin
-              # Opal::Builder should have source map information
-              # Try to get it from the processed assets
-              source_map = extract_source_map(builder)
+              source_map = extract_source_map(builder, file_path)
               result[:map] = source_map if source_map
             rescue => e
               # Source map extraction failed, log but don't fail compilation
@@ -141,26 +140,122 @@ module Opal
         builder.processed.map { |asset| asset.filename }.compact
       end
 
-      def extract_source_map(builder)
-        # Get source map from the builder's processed assets
-        # Opal stores source maps in the compiled assets
-        return nil unless builder.processed.any?
+      def extract_source_map(builder, file_path)
+        # Use builder's combined source_map which includes all compiled files
+        # This allows debugging of all required files (controllers, services, etc.)
+        return nil unless builder.respond_to?(:source_map) && builder.source_map
 
-        # Get the main compiled asset (usually the last one)
-        main_asset = builder.processed.last
-        return nil unless main_asset
+        source_map = builder.source_map
+        map_hash = source_map.to_h
+        return nil unless map_hash
 
-        # Check if the asset has source map data
-        if main_asset.respond_to?(:source_map) && main_asset.source_map
-          return main_asset.source_map.to_json
+        # If it's an index format with sections, merge all sections
+        if map_hash['sections']
+          map_hash = merge_all_sections(map_hash, file_path)
         end
 
-        # Try to get from the builder directly
-        if builder.respond_to?(:source_map) && builder.source_map
-          return builder.source_map.to_json
+        return nil unless map_hash
+
+        # Normalize source paths for browser debugging
+        if map_hash['sources']
+          map_hash['sources'] = map_hash['sources'].map do |source|
+            normalize_source_path(source, file_path)
+          end
+        end
+
+        map_hash.to_json
+      end
+
+      def merge_all_sections(index_map, file_path)
+        sections = index_map['sections']
+        return nil if sections.nil? || sections.empty?
+
+        # For single section, just return that section's map
+        if sections.length == 1
+          return sections.first['map']
+        end
+
+        # Merge all sections into a single standard source map
+        # This allows debugging of all files (application.rb + all required files)
+        merged = {
+          'version' => 3,
+          'file' => File.basename(file_path),
+          'sources' => [],
+          'sourcesContent' => [],
+          'names' => [],
+          'mappings' => ''
+        }
+
+        current_line = 0
+
+        sections.each_with_index do |section, idx|
+          section_map = section['map']
+          next unless section_map
+
+          offset = section['offset'] || { 'line' => 0, 'column' => 0 }
+          section_start_line = offset['line'] || 0
+
+          # Add empty lines to reach the section's starting line
+          lines_to_add = section_start_line - current_line
+          if lines_to_add > 0
+            merged['mappings'] += ';' * lines_to_add
+            current_line = section_start_line
+          end
+
+          # Track source index offset for this section
+          source_offset = merged['sources'].length
+          name_offset = merged['names'].length
+
+          # Add sources and sourcesContent from this section
+          if section_map['sources']
+            section_map['sources'].each_with_index do |source, i|
+              merged['sources'] << source
+              if section_map['sourcesContent'] && section_map['sourcesContent'][i]
+                merged['sourcesContent'] << section_map['sourcesContent'][i]
+              else
+                merged['sourcesContent'] << nil
+              end
+            end
+          end
+
+          # Add names from this section
+          if section_map['names']
+            merged['names'].concat(section_map['names'])
+          end
+
+          # Add mappings from this section
+          if section_map['mappings'] && !section_map['mappings'].empty?
+            # If we need to adjust source/name indices, we'd need to decode/re-encode VLQ
+            # For now, append as-is (works when each section has its own source indices starting at 0)
+            # This is a simplification - proper implementation would adjust indices
+            if idx > 0 && !merged['mappings'].empty? && !merged['mappings'].end_with?(';')
+              merged['mappings'] += ';'
+            end
+            merged['mappings'] += section_map['mappings']
+
+            # Count lines in this section's mappings
+            lines_in_section = section_map['mappings'].count(';') + 1
+            current_line += lines_in_section
+          end
         end
 
-        nil
+        merged
+      end
+
+      def normalize_source_path(source, file_path)
+        # Convert absolute paths to relative for better browser debugging
+        return source if source.nil? || source.empty?
+
+        # If source is already relative or a URL, keep it
+        return source unless source.start_with?('/')
+
+        # Try to make path relative to the original file
+        begin
+          Pathname.new(source).relative_path_from(Pathname.new(File.dirname(file_path))).to_s
+        rescue ArgumentError
+          # On different drives/mounts, keep absolute path
+          source
+        end
       end
     end
   end

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

@@ -0,0 +1,399 @@
+# frozen_string_literal: true
+
+module Opal
+  module Vite
+    module Testing
+      # StableHelpers - JavaScript-based element interaction methods for Capybara
+      # All polling and retry logic runs in JavaScript for reliability
+      # Reduces Ruby ↔ JavaScript communication overhead
+      #
+      # Usage:
+      #   # In spec_helper.rb
+      #   require 'opal/vite/testing/stable_helpers'
+      #
+      #   RSpec.configure do |config|
+      #     config.include Opal::Vite::Testing::StableHelpers, type: :feature
+      #   end
+      #
+      module StableHelpers
+        # Default configuration
+        DEFAULT_TIMEOUT = 10
+        DEFAULT_INTERVAL = 50 # ms (JavaScript side)
+
+        # Wait for element to be present and stable in DOM using JavaScript polling
+        # @param selector [String] CSS selector
+        # @param timeout [Integer] Maximum wait time in seconds
+        # @return [Capybara::Node::Element] The found element
+        def stable_find(selector, timeout: DEFAULT_TIMEOUT, visible: true)
+          js_wait_for_element(selector, timeout: timeout, visible: visible)
+          find(selector, visible: visible, wait: 1)
+        end
+
+        # Find all elements after ensuring DOM stability
+        # @param selector [String] CSS selector
+        # @param timeout [Integer] Maximum wait time in seconds
+        # @return [Array<Capybara::Node::Element>] Found elements
+        def stable_all(selector, timeout: DEFAULT_TIMEOUT)
+          wait_for_dom_stable(timeout: timeout)
+          all(selector, wait: 1)
+        end
+
+        # Click element with retry logic
+        # Uses Capybara native click with JS fallback for reliability
+        # @param selector [String] CSS selector
+        # @param timeout [Integer] Maximum wait time in seconds
+        def stable_click(selector, timeout: DEFAULT_TIMEOUT)
+          escaped_selector = escape_js(selector)
+          start_time = Time.now
+
+          loop do
+            begin
+              # Use Capybara's find with wait, then click
+              element = find(selector, wait: 2, visible: true)
+              element.click
+              # Small delay to allow event processing
+              sleep(0.05)
+              return true
+            rescue Capybara::ElementNotFound, Ferrum::NodeNotFoundError, Ferrum::TimeoutError,
+                   Capybara::Cuprite::MouseEventFailed => e
+              # If native click fails, try JavaScript click
+              js_clicked = page.evaluate_script(<<~JS)
+                (function() {
+                  var el = document.querySelector('#{escaped_selector}');
+                  if (el && el.offsetParent !== null) {
+                    el.click();
+                    return true;
+                  }
+                  return false;
+                })()
+              JS
+              return true if js_clicked
+
+              elapsed = Time.now - start_time
+              raise e if elapsed > timeout
+              sleep(DEFAULT_INTERVAL / 1000.0)
+            end
+          end
+        end
+
+        # Set value on input with stability check
+        # @param selector [String] CSS selector
+        # @param value [String] Value to set
+        # @param timeout [Integer] Maximum wait time in seconds
+        def stable_set(selector, value, timeout: DEFAULT_TIMEOUT)
+          escaped_value = escape_js(value)
+          js_retry_action(selector, 'set', value: escaped_value, timeout: timeout)
+        end
+
+        # Send keys to element with stability check
+        # @param selector [String] CSS selector
+        # @param keys [Array] Keys to send
+        def stable_send_keys(selector, *keys, timeout: DEFAULT_TIMEOUT)
+          element = stable_find(selector, timeout: timeout)
+          element.native.send_keys(*keys)
+        end
+
+        # Combined set and send_keys for form inputs (common pattern)
+        # Uses JavaScript for value setting, Capybara native for key events
+        # @param selector [String] CSS selector
+        # @param value [String] Value to type
+        # @param submit_key [Symbol] Key to send after value (e.g., :enter)
+        def stable_input(selector, value, submit_key: nil, timeout: DEFAULT_TIMEOUT)
+          escaped_selector = escape_js(selector)
+          escaped_value = escape_js(value)
+          start_time = Time.now
+
+          loop do
+            # Set value via JavaScript for reliability
+            result = page.evaluate_script(<<~JS)
+              (function() {
+                var el = document.querySelector('#{escaped_selector}');
+                if (!el || el.offsetParent === null) {
+                  return { success: false, reason: 'not_found' };
+                }
+
+                try {
+                  el.focus();
+                  el.value = '#{escaped_value}';
+                  el.dispatchEvent(new Event('input', { bubbles: true }));
+                  el.dispatchEvent(new Event('change', { bubbles: true }));
+
+                  if (el.value !== '#{escaped_value}') {
+                    return { success: false, reason: 'value_not_set' };
+                  }
+
+                  return { success: true };
+                } catch (e) {
+                  return { success: false, reason: e.message };
+                }
+              })()
+            JS
+
+            if result && result['success']
+              # Use Capybara's native send_keys for Enter key (more reliable with Stimulus)
+              if submit_key
+                # Small delay to ensure Stimulus has processed the value change
+                sleep(0.05)
+                element = find(selector)
+                element.native.send_keys(submit_key)
+              end
+              return true
+            end
+
+            elapsed = Time.now - start_time
+            if elapsed > timeout
+              reason = result ? result['reason'] : 'unknown'
+              raise Capybara::ElementNotFound, "stable_input failed on '#{selector}': #{reason}"
+            end
+
+            sleep(DEFAULT_INTERVAL / 1000.0)
+          end
+        end
+
+        # Wait for element count to match expected (all polling in JavaScript)
+        # @param selector [String] CSS selector
+        # @param count [Integer] Expected count
+        # @param timeout [Integer] Maximum wait time in seconds
+        def wait_for_count(selector, count, timeout: DEFAULT_TIMEOUT)
+          escaped_selector = escape_js(selector)
+          js_poll_until(
+            "document.querySelectorAll('#{escaped_selector}').length === #{count}",
+            timeout: timeout,
+            error_message: "Expected #{count} elements for '#{selector}'"
+          )
+        end
+
+        # Wait for element to contain text
+        # @param selector [String] CSS selector
+        # @param text [String] Text to find
+        # @param timeout [Integer] Maximum wait time in seconds
+        def wait_for_text(selector, text, timeout: DEFAULT_TIMEOUT)
+          escaped_selector = escape_js(selector)
+          escaped_text = escape_js(text)
+          js_poll_until(
+            "(function() { var el = document.querySelector('#{escaped_selector}'); return el && el.textContent.includes('#{escaped_text}'); })()",
+            timeout: timeout,
+            error_message: "Text '#{text}' not found in '#{selector}'"
+          )
+        end
+
+        # Wait for element to have specific class
+        # @param selector [String] CSS selector
+        # @param class_name [String] CSS class name
+        # @param timeout [Integer] Maximum wait time in seconds
+        def wait_for_class(selector, class_name, timeout: DEFAULT_TIMEOUT)
+          escaped_selector = escape_js(selector)
+          escaped_class = escape_js(class_name)
+          js_poll_until(
+            "(function() { var el = document.querySelector('#{escaped_selector}'); return el && el.classList.contains('#{escaped_class}'); })()",
+            timeout: timeout,
+            error_message: "Class '#{class_name}' not found on '#{selector}'"
+          )
+        end
+
+        # Wait for element to NOT have specific class
+        # @param selector [String] CSS selector
+        # @param class_name [String] CSS class name
+        # @param timeout [Integer] Maximum wait time in seconds
+        def wait_for_no_class(selector, class_name, timeout: DEFAULT_TIMEOUT)
+          escaped_selector = escape_js(selector)
+          escaped_class = escape_js(class_name)
+          js_poll_until(
+            "(function() { var el = document.querySelector('#{escaped_selector}'); return el && !el.classList.contains('#{escaped_class}'); })()",
+            timeout: timeout,
+            error_message: "Class '#{class_name}' still present on '#{selector}'"
+          )
+        end
+
+        # Wait for checkbox to be checked
+        # @param selector [String] CSS selector
+        # @param timeout [Integer] Maximum wait time in seconds
+        def wait_for_checked(selector, timeout: DEFAULT_TIMEOUT)
+          escaped_selector = escape_js(selector)
+          js_poll_until(
+            "(function() { var el = document.querySelector('#{escaped_selector}'); return el && el.checked === true; })()",
+            timeout: timeout,
+            error_message: "Checkbox '#{selector}' not checked"
+          )
+        end
+
+        # Public API for custom JavaScript conditions
+        # @param js_condition [String] JavaScript expression that returns true when ready
+        # @param timeout [Integer] Maximum wait time in seconds
+        def js_wait_for(js_condition, timeout: DEFAULT_TIMEOUT)
+          js_poll_until(js_condition, timeout: timeout, error_message: "Condition not met: #{js_condition}")
+        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
+        # @param stability_time [Integer] Time in ms with no changes to consider stable
+        def wait_for_dom_stable(timeout: DEFAULT_TIMEOUT, stability_time: 100)
+          # Setup MutationObserver in JavaScript
+          page.execute_script(<<~JS)
+            window.__domStabilityState = { stable: false, lastChange: Date.now() };
+            if (window.__domObserver) window.__domObserver.disconnect();
+
+            window.__domObserver = new MutationObserver(function() {
+              window.__domStabilityState.stable = false;
+              window.__domStabilityState.lastChange = Date.now();
+            });
+
+            window.__domObserver.observe(document.body, {
+              childList: true,
+              subtree: true,
+              attributes: true
+            });
+          JS
+
+          start_time = Time.now
+
+          # Poll for stability using Ruby loop
+          loop do
+            result = page.evaluate_script(<<~JS)
+              (function() {
+                var state = window.__domStabilityState;
+                if (!state) return { stable: true };
+                var elapsed = Date.now() - state.lastChange;
+                return { stable: elapsed >= #{stability_time}, elapsed: elapsed };
+              })()
+            JS
+
+            if result && result['stable']
+              # Cleanup observer
+              page.execute_script(<<~JS)
+                if (window.__domObserver) {
+                  window.__domObserver.disconnect();
+                  delete window.__domObserver;
+                }
+                delete window.__domStabilityState;
+              JS
+              return true
+            end
+
+            elapsed = Time.now - start_time
+            if elapsed > timeout
+              # Cleanup observer on timeout
+              page.execute_script('if (window.__domObserver) window.__domObserver.disconnect();')
+              raise Capybara::ElementNotFound, 'DOM did not stabilize within timeout'
+            end
+
+            sleep(DEFAULT_INTERVAL / 1000.0)
+          end
+        end
+
+        private
+
+        # Wait for element to be present and visible using JavaScript polling
+        def js_wait_for_element(selector, timeout:, visible:)
+          escaped_selector = escape_js(selector)
+          visibility_check = visible ? ' && el.offsetParent !== null' : ''
+
+          js_poll_until(
+            "(function() { var el = document.querySelector('#{escaped_selector}'); return el !== null#{visibility_check}; })()",
+            timeout: timeout,
+            error_message: "Element not found: #{selector}"
+          )
+        end
+
+        # Wait for input to have specific value
+        def wait_for_value(selector, value, timeout:)
+          escaped_selector = escape_js(selector)
+          escaped_value = escape_js(value)
+          js_poll_until(
+            "(function() { var el = document.querySelector('#{escaped_selector}'); return el && el.value === '#{escaped_value}'; })()",
+            timeout: timeout,
+            error_message: "Value '#{value}' not set on '#{selector}'"
+          )
+        end
+
+        # Core JavaScript polling - all retry logic runs in browser
+        # @param js_condition [String] JavaScript expression that returns true when ready
+        # @param timeout [Integer] Maximum wait time in seconds
+        # @param error_message [String] Error message on timeout
+        def js_poll_until(js_condition, timeout:, error_message: nil)
+          error_msg = error_message || "Condition not met: #{js_condition}"
+
+          # Use synchronous polling with Ruby timeout to avoid async script timeout issues
+          start_time = Time.now
+
+          loop do
+            result = page.evaluate_script(<<~JS)
+              (function() {
+                try {
+                  return #{js_condition} ? true : false;
+                } catch (e) {
+                  return false;
+                }
+              })()
+            JS
+
+            return true if result
+
+            elapsed = Time.now - start_time
+            raise Capybara::ElementNotFound, error_msg if elapsed > timeout
+
+            sleep(DEFAULT_INTERVAL / 1000.0)
+          end
+        end
+
+        # JavaScript-based action with Ruby retry loop (click, set, etc.)
+        # @param selector [String] CSS selector
+        # @param action [String] Action to perform ('click', 'set')
+        # @param value [String] Value for 'set' action
+        # @param timeout [Integer] Maximum wait time in seconds
+        def js_retry_action(selector, action, value: nil, timeout: DEFAULT_TIMEOUT)
+          escaped_selector = escape_js(selector)
+          escaped_value = value ? escape_js(value) : ''
+          start_time = Time.now
+
+          loop do
+            result = page.evaluate_script(<<~JS)
+              (function() {
+                var el = document.querySelector('#{escaped_selector}');
+                if (!el || el.offsetParent === null) {
+                  return { success: false, reason: 'not_found' };
+                }
+
+                try {
+                  if ('#{action}' === 'click') {
+                    el.click();
+                    return { success: true };
+                  } else if ('#{action}' === 'set') {
+                    el.focus();
+                    el.value = '#{escaped_value}';
+                    el.dispatchEvent(new Event('input', { bubbles: true }));
+                    el.dispatchEvent(new Event('change', { bubbles: true }));
+                    return { success: true };
+                  } else {
+                    return { success: false, reason: 'unknown_action' };
+                  }
+                } catch (e) {
+                  return { success: false, reason: e.message };
+                }
+              })()
+            JS
+
+            return true if result && result['success']
+
+            elapsed = Time.now - start_time
+            if elapsed > timeout
+              reason = result ? result['reason'] : 'unknown'
+              raise Capybara::ElementNotFound, "Action '#{action}' failed on '#{selector}': #{reason}"
+            end
+
+            sleep(DEFAULT_INTERVAL / 1000.0)
+          end
+        end
+
+        # Escape string for JavaScript
+        def escape_js(str)
+          str.to_s.gsub('\\', '\\\\\\\\').gsub("'", "\\\\'").gsub("\n", '\\n')
+        end
+      end
+    end
+  end
+end
+
+# Alias for backward compatibility
+StableHelpers = Opal::Vite::Testing::StableHelpers

data/lib/opal/vite/version.rb

@@ -1,5 +1,5 @@
 module Opal
   module Vite
-    VERSION = "0.2.2"
+    VERSION = "0.2.5"
   end
 end

data/lib/opal-vite.rb

@@ -30,12 +30,20 @@ module Opal
       # CLI entry point for compilation
       # @param file_path [String] The path to the Ruby file to compile
       # @param include_concerns [Boolean] Whether to include built-in concerns
-      def compile_for_vite(file_path, include_concerns: true)
+      # @param source_map [Boolean] Whether to generate source maps
+      def compile_for_vite(file_path, include_concerns: true, source_map: true)
+        # 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)
         result = compiler.compile_file(file_path)
 
         # Output JSON to stdout for the Vite plugin to consume
         puts JSON.generate(result)
+
+        # Restore original setting
+        config.source_map_enabled = original_source_map
       rescue Compiler::CompilationError => e
         STDERR.puts e.message
         exit 1

data/opal/opal_vite/concerns/stimulus_helpers.rb

@@ -1274,12 +1274,23 @@ module OpalVite
 
       private
 
-      # Convert snake_case to camelCase
+      # Convert snake_case to camelCase, preserving existing camelCase
       # @param name [Symbol, String] The name to convert
       # @param capitalize_first [Boolean] Whether to capitalize first letter
       # @return [String] camelCase string
       def camelize(name, capitalize_first = true)
         str = name.to_s
+
+        # If no underscores, assume already camelCase - just adjust first letter
+        unless str.include?('_')
+          if capitalize_first
+            return str[0].upcase + str[1..-1].to_s
+          else
+            return str[0].downcase + str[1..-1].to_s
+          end
+        end
+
+        # Convert snake_case to camelCase
         parts = str.split('_')
         if capitalize_first
           parts.map(&:capitalize).join

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: opal-vite
 version: !ruby/object:Gem::Version
-  version: 0.2.2
+  version: 0.2.5
 platform: ruby
 authors:
 - stofu1234
@@ -109,6 +109,7 @@ files:
 - lib/opal/vite/compiler.rb
 - lib/opal/vite/config.rb
 - lib/opal/vite/source_map.rb
+- lib/opal/vite/testing/stable_helpers.rb
 - lib/opal/vite/version.rb
 - opal/opal_vite.rb
 - opal/opal_vite/concerns.rb