opal-vite 0.2.5 → 0.2.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 589d2115317b97d0c2c1452001b128f4ac3269d8e05c390e60e87d0446c8ebf0
-  data.tar.gz: 2811c208a9e64dfd800d2f1d4540a052f348b82b03f255ff6cae820895af8098
+  metadata.gz: d647a605d1362c318322a04e13412cb9bb298fff93d9d2892b96afdc7170fc6b
+  data.tar.gz: 0a72ac91f6973d02587de1b63ec63052fce19519138ece126e7f9edd40af8c56
 SHA512:
-  metadata.gz: a85ead98a10e206d858a508ef808f9410af6bf6597c6f167b93560da2cb706cbffb252b90ac5144eb9003ef45291bcdbdd84f8dab7c56425d08933be952bbbe8
-  data.tar.gz: 117923f00c860592866c31fba50371b84a8c47007c822ce240fa377c510119b1f640443cfa338b78298e5fe59ec1c7d44137340c71503634a71f9b26d9813783
+  metadata.gz: 508a5e5f69a85c218c2ccf2f451140080860885a00d041909a5da09c9a7d755ba369ba6ecc10f2c4ed84c31a4491103495ec0afa022f9abfb6d2d8d349c16f7b
+  data.tar.gz: 4b84a15c0db47b794d0bb50a1eba4e6b78df5683f0fbf281d5e05f7f14ab2fb016ad59591b37b846b62125cc7035541e31772140a8c41e91285c628531e810ed

data/lib/opal/vite/compiler.rb

@@ -146,7 +146,7 @@ module Opal
         return nil unless builder.respond_to?(:source_map) && builder.source_map
 
         source_map = builder.source_map
-        map_hash = source_map.to_h
+        map_hash = deep_stringify_keys(source_map.to_h)
         return nil unless map_hash
 
         # If it's an index format with sections, merge all sections
@@ -156,16 +156,35 @@ module Opal
 
         return nil unless map_hash
 
+        # Add sourceRoot for proper browser debugging
+        # This helps DevTools organize source files in a logical tree
+        map_hash['sourceRoot'] = ''
+
         # Normalize source paths for browser debugging
+        # Prefix with /opal-sources/ so they appear in a dedicated folder in DevTools
         if map_hash['sources']
           map_hash['sources'] = map_hash['sources'].map do |source|
-            normalize_source_path(source, file_path)
+            normalize_source_path_for_devtools(source, file_path)
           end
         end
 
         map_hash.to_json
       end
 
+      # Recursively convert all hash keys to strings
+      def deep_stringify_keys(obj)
+        case obj
+        when Hash
+          obj.each_with_object({}) do |(key, value), result|
+            result[key.to_s] = deep_stringify_keys(value)
+          end
+        when Array
+          obj.map { |item| deep_stringify_keys(item) }
+        else
+          obj
+        end
+      end
+
       def merge_all_sections(index_map, file_path)
         sections = index_map['sections']
         return nil if sections.nil? || sections.empty?
@@ -186,6 +205,13 @@ module Opal
           'mappings' => ''
         }
 
+        # Track cumulative state for VLQ relative encoding
+        # These track the "previous" values across all sections
+        prev_source = 0
+        prev_orig_line = 0
+        prev_orig_col = 0
+        prev_name = 0
+
         current_line = 0
 
         sections.each_with_index do |section, idx|
@@ -202,7 +228,7 @@ module Opal
             current_line = section_start_line
           end
 
-          # Track source index offset for this section
+          # Track source and name index offsets for this section
           source_offset = merged['sources'].length
           name_offset = merged['names'].length
 
@@ -223,25 +249,184 @@ module Opal
             merged['names'].concat(section_map['names'])
           end
 
-          # Add mappings from this section
+          # Process mappings from this section with index adjustment
           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
+            adjusted_mappings, prev_source, prev_orig_line, prev_orig_col, prev_name =
+              adjust_section_mappings(
+                section_map['mappings'],
+                source_offset,
+                name_offset,
+                prev_source,
+                prev_orig_line,
+                prev_orig_col,
+                prev_name
+              )
+
             if idx > 0 && !merged['mappings'].empty? && !merged['mappings'].end_with?(';')
               merged['mappings'] += ';'
             end
-            merged['mappings'] += section_map['mappings']
+            merged['mappings'] += adjusted_mappings
 
-            # Count lines in this section's mappings
-            lines_in_section = section_map['mappings'].count(';') + 1
-            current_line += lines_in_section
+            # Update current_line to the last line we wrote to
+            # section_start_line + number of semicolons in this section's mappings
+            current_line = section_start_line + section_map['mappings'].count(';')
           end
         end
 
         merged
       end
 
+      # Adjust mappings from a section by adding offsets to source/name indices
+      # VLQ mappings use relative deltas. When merging sections:
+      # - First section: no adjustment, just track final absolute state
+      # - Later sections: adjust first segment's source/name delta to bridge from previous section's end state
+      #
+      # Returns: [adjusted_mappings, new_prev_source, new_prev_orig_line, new_prev_orig_col, new_prev_name]
+      def adjust_section_mappings(mappings, source_offset, name_offset, prev_source, prev_orig_line, prev_orig_col, prev_name)
+        return ['', prev_source, prev_orig_line, prev_orig_col, prev_name] if mappings.nil? || mappings.empty?
+
+        result_lines = []
+        lines = mappings.split(';', -1)
+
+        # Track absolute state within this section (section-local, starting from 0)
+        section_abs_source = 0
+        section_abs_orig_line = 0
+        section_abs_orig_col = 0
+        section_abs_name = 0
+
+        first_segment_processed = false
+
+        lines.each do |line|
+          if line.empty?
+            result_lines << ''
+            next
+          end
+
+          result_segments = []
+          segments = line.split(',')
+
+          segments.each do |segment|
+            values = decode_vlq(segment)
+            next if values.empty?
+
+            # values[0] = generated column delta (always present, relative within line)
+            # values[1] = source index delta
+            # values[2] = original line delta
+            # values[3] = original column delta
+            # values[4] = name index delta
+
+            gen_col_delta = values[0]
+
+            if values.length > 1
+              # Update section-local absolute positions
+              section_abs_source += values[1]
+              section_abs_orig_line += values[2] if values.length > 2
+              section_abs_orig_col += values[3] if values.length > 3
+              section_abs_name += values[4] if values.length > 4
+
+              # Calculate global absolute positions (with offset)
+              global_abs_source = section_abs_source + source_offset
+              global_abs_name = section_abs_name + name_offset
+
+              if !first_segment_processed
+                # First segment: calculate delta from previous section's end state to this segment's global position
+                new_source_delta = global_abs_source - prev_source
+                new_orig_line_delta = section_abs_orig_line - prev_orig_line
+                new_orig_col_delta = section_abs_orig_col - prev_orig_col
+                new_name_delta = global_abs_name - prev_name
+
+                new_values = [gen_col_delta, new_source_delta, new_orig_line_delta, new_orig_col_delta]
+                new_values << new_name_delta if values.length > 4
+
+                first_segment_processed = true
+              else
+                # Subsequent segments: deltas are already correct (relative within section = relative within merged)
+                new_values = values.dup
+              end
+
+              result_segments << encode_vlq(new_values)
+
+              # Update tracking for next section
+              prev_source = global_abs_source
+              prev_orig_line = section_abs_orig_line
+              prev_orig_col = section_abs_orig_col
+              prev_name = global_abs_name if values.length > 4
+            else
+              # Only generated column, no source mapping
+              result_segments << encode_vlq([gen_col_delta])
+            end
+          end
+
+          result_lines << result_segments.join(',')
+        end
+
+        [result_lines.join(';'), prev_source, prev_orig_line, prev_orig_col, prev_name]
+      end
+
+      # VLQ Base64 character set
+      VLQ_BASE64_CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'.freeze
+      VLQ_BASE64_VALUES = VLQ_BASE64_CHARS.each_char.with_index.to_h.freeze
+      VLQ_BASE_SHIFT = 5
+      VLQ_BASE = 1 << VLQ_BASE_SHIFT  # 32
+      VLQ_BASE_MASK = VLQ_BASE - 1     # 31
+      VLQ_CONTINUATION_BIT = VLQ_BASE  # 32
+
+      # Decode a VLQ-encoded segment into an array of integers
+      def decode_vlq(segment)
+        return [] if segment.nil? || segment.empty?
+
+        values = []
+        shift = 0
+        value = 0
+
+        segment.each_char do |char|
+          digit = VLQ_BASE64_VALUES[char]
+          return values if digit.nil?  # Invalid character
+
+          continuation = (digit & VLQ_CONTINUATION_BIT) != 0
+          digit &= VLQ_BASE_MASK
+          value += digit << shift
+
+          if continuation
+            shift += VLQ_BASE_SHIFT
+          else
+            # Convert from VLQ signed representation
+            negative = (value & 1) == 1
+            value >>= 1
+            value = -value if negative
+            values << value
+
+            # Reset for next value
+            value = 0
+            shift = 0
+          end
+        end
+
+        values
+      end
+
+      # Encode an array of integers into a VLQ-encoded string
+      def encode_vlq(values)
+        return '' if values.nil? || values.empty?
+
+        result = ''
+
+        values.each do |value|
+          # Convert to VLQ signed representation
+          vlq = value < 0 ? ((-value) << 1) + 1 : value << 1
+
+          loop do
+            digit = vlq & VLQ_BASE_MASK
+            vlq >>= VLQ_BASE_SHIFT
+            digit |= VLQ_CONTINUATION_BIT if vlq > 0
+            result += VLQ_BASE64_CHARS[digit]
+            break if vlq == 0
+          end
+        end
+
+        result
+      end
+
       def normalize_source_path(source, file_path)
         # Convert absolute paths to relative for better browser debugging
         return source if source.nil? || source.empty?
@@ -257,6 +442,39 @@ module Opal
           source
         end
       end
+
+      def normalize_source_path_for_devtools(source, file_path)
+        # Format source paths so they appear properly in browser DevTools
+        # Chrome DevTools uses the source path to build the file tree
+        return source if source.nil? || source.empty?
+
+        # Remove any leading ./ for consistency
+        source = source.sub(/^\.\//, '')
+
+        # Handle absolute paths - make them relative to show properly
+        if source.start_with?('/')
+          # Extract just the relevant path (last few components)
+          parts = source.split('/')
+          # Keep last 3 path components for context (e.g., app/opal/controllers/...)
+          source = parts.last(3).join('/')
+        end
+
+        # Prefix paths for user code (controllers, services, etc.) to group them
+        # This ensures they appear under a dedicated folder in DevTools
+        if source.include?('controllers/') || source.include?('services/')
+          # Already has recognizable path, prefix with opal-sources for visibility
+          "/opal-sources/#{source}"
+        elsif source.start_with?('corelib/') || source.start_with?('opal/')
+          # Opal core library files - put under opal-core
+          "/opal-core/#{source}"
+        elsif source.include?('opal_stimulus/') || source.include?('opal_vite/')
+          # Opal library files
+          "/opal-libs/#{source}"
+        else
+          # Other files (native.rb, js/proxy.rb, etc.)
+          "/opal-other/#{source}"
+        end
+      end
     end
   end
 end

data/lib/opal/vite/version.rb

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

data/opal/opal_vite/concerns/vue_helpers.rb

@@ -0,0 +1,249 @@
+# backtick_javascript: true
+
+# VueHelpers - DSL helpers for Vue.js 3 applications with Opal
+# Reduces backtick JavaScript usage in Vue components
+module VueHelpers
+  extend self  # Makes all methods available as module methods
+  # ===================
+  # Vue Access
+  # ===================
+
+  # Get Vue from window
+  def vue
+    `window.Vue`
+  end
+
+  # Create a Vue application
+  # @param options [Hash] Vue component options (data, methods, computed, template, etc.)
+  # @return [Native] Vue app instance
+  def create_app(options = {})
+    Native(`window.Vue.createApp(#{options.to_n})`)
+  end
+
+  # Create a reactive ref
+  # @param initial_value [Object] Initial value
+  # @return [Native] Vue ref
+  def vue_ref(initial_value)
+    Native(`window.Vue.ref(#{initial_value})`)
+  end
+
+  # Create a reactive object
+  # @param object [Hash] Object to make reactive
+  # @return [Native] Vue reactive object
+  def vue_reactive(object)
+    Native(`window.Vue.reactive(#{object.to_n})`)
+  end
+
+  # Create a computed property
+  # @param getter [Proc] Getter function
+  # @return [Native] Vue computed ref
+  def vue_computed(&getter)
+    Native(`window.Vue.computed(#{getter})`)
+  end
+
+  # Watch a reactive source
+  # @param source [Native] Reactive source to watch
+  # @param callback [Proc] Callback function
+  def vue_watch(source, &callback)
+    `window.Vue.watch(#{source}, #{callback})`
+  end
+
+  # ===================
+  # Component Definition Helpers
+  # ===================
+
+  # Define component data as a function
+  # @param data_hash [Hash] Initial data
+  # @return [Proc] Data function for Vue component
+  def data_fn(data_hash)
+    -> { data_hash.to_n }
+  end
+
+  # Define methods hash for Vue component
+  # @param methods_hash [Hash] Methods with name => proc
+  # @return [Hash] Methods object for Vue component
+  def methods_obj(methods_hash)
+    result = {}
+    methods_hash.each do |name, proc|
+      result[name] = proc
+    end
+    result.to_n
+  end
+
+  # Define computed properties hash
+  # @param computed_hash [Hash] Computed properties with name => proc
+  # @return [Hash] Computed object for Vue component
+  def computed_obj(computed_hash)
+    result = {}
+    computed_hash.each do |name, proc|
+      result[name] = proc
+    end
+    result.to_n
+  end
+
+  # ===================
+  # Lifecycle Hooks
+  # ===================
+
+  # onMounted hook
+  def on_mounted(&block)
+    `window.Vue.onMounted(#{block})`
+  end
+
+  # onUnmounted hook
+  def on_unmounted(&block)
+    `window.Vue.onUnmounted(#{block})`
+  end
+
+  # onUpdated hook
+  def on_updated(&block)
+    `window.Vue.onUpdated(#{block})`
+  end
+
+  # onBeforeMount hook
+  def on_before_mount(&block)
+    `window.Vue.onBeforeMount(#{block})`
+  end
+
+  # onBeforeUnmount hook
+  def on_before_unmount(&block)
+    `window.Vue.onBeforeUnmount(#{block})`
+  end
+
+  # ===================
+  # Window/Global Access
+  # ===================
+
+  # Get a property from window
+  def window_get(key)
+    `window[#{key}]`
+  end
+
+  # Set a property on window
+  def window_set(key, value)
+    `window[#{key}] = #{value}`
+  end
+
+  # ===================
+  # Console
+  # ===================
+
+  # Console log
+  def console_log(*args)
+    `console.log(...#{args})`
+  end
+
+  # Console warn
+  def console_warn(*args)
+    `console.warn(...#{args})`
+  end
+
+  # Console error
+  def console_error(*args)
+    `console.error(...#{args})`
+  end
+
+  # ===================
+  # DOM Events
+  # ===================
+
+  # Execute block when DOM is ready
+  def on_dom_ready(&block)
+    `document.addEventListener('DOMContentLoaded', #{block})`
+  end
+
+  # ===================
+  # DOM Query
+  # ===================
+
+  # Query single element
+  def query(selector)
+    `document.querySelector(#{selector})`
+  end
+
+  # Query all elements
+  def query_all(selector)
+    `Array.from(document.querySelectorAll(#{selector}))`
+  end
+
+  # Get element by ID
+  def get_element_by_id(id)
+    `document.getElementById(#{id})`
+  end
+
+  # ===================
+  # Timing
+  # ===================
+
+  # Set timeout
+  def set_timeout(delay_ms, &block)
+    `setTimeout(#{block}, #{delay_ms})`
+  end
+
+  # Set interval
+  def set_interval(interval_ms, &block)
+    `setInterval(#{block}, #{interval_ms})`
+  end
+
+  # Clear timeout
+  def clear_timeout(timeout_id)
+    `clearTimeout(#{timeout_id})`
+  end
+
+  # Clear interval
+  def clear_interval(interval_id)
+    `clearInterval(#{interval_id})`
+  end
+
+  # ===================
+  # LocalStorage
+  # ===================
+
+  # Get from localStorage
+  def storage_get(key)
+    `localStorage.getItem(#{key})`
+  end
+
+  # Set to localStorage
+  def storage_set(key, value)
+    `localStorage.setItem(#{key}, #{value})`
+  end
+
+  # Remove from localStorage
+  def storage_remove(key)
+    `localStorage.removeItem(#{key})`
+  end
+
+  # ===================
+  # JSON
+  # ===================
+
+  # Parse JSON string
+  def parse_json(json_string)
+    `JSON.parse(#{json_string})`
+  end
+
+  # Stringify to JSON
+  def to_json_string(object)
+    `JSON.stringify(#{object})`
+  end
+
+  # ===================
+  # Type Conversion
+  # ===================
+
+  # Parse string to integer
+  def parse_int(value, radix = 10)
+    `parseInt(#{value}, #{radix})`
+  end
+
+  # Parse string to float
+  def parse_float(value)
+    `parseFloat(#{value})`
+  end
+
+  # Check if value is NaN
+  def is_nan?(value)
+    `Number.isNaN(#{value})`
+  end
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: opal-vite
 version: !ruby/object:Gem::Version
-  version: 0.2.5
+  version: 0.2.7
 platform: ruby
 authors:
 - stofu1234
@@ -119,6 +119,7 @@ files:
 - opal/opal_vite/concerns/stimulus_helpers.rb
 - opal/opal_vite/concerns/storable.rb
 - opal/opal_vite/concerns/toastable.rb
+- opal/opal_vite/concerns/vue_helpers.rb
 homepage: https://github.com/stofu1234/opal-vite
 licenses:
 - MIT