opal-vite 0.1.0 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b141645cbef98169c750427f39d902e6f8377430fb41ec282ccfdaf9ff6bc5a5
-  data.tar.gz: ec0717edcaf168380c5bd92419d84d2e14f12d41430a373d45c7f095109d2b82
+  metadata.gz: a747844bb38869490030ea9a7649cdd6f5b665cf2a60da55f3cc12f479aa556b
+  data.tar.gz: 8e0de9d6b0b124f5ee0cb83cfd242199785c6a7ecdfb1f2e3ba0f7253bb5c663
 SHA512:
-  metadata.gz: e27461464983db947b29e81c64da1ef4d5872c45709e66e078c315dc9133c15ec453b88d596788a5321a235e604da1c7c7f1eefb87240574566da709d933cbbb
-  data.tar.gz: 8d70ec17da3cb04a529e55640aec9e8ed6efc6bc1acdf4aad0ac93949b83593820a18d624c86db11df764b3c5481cc2228828617c71e8694005dc4e0abead6f2
+  metadata.gz: d12af9028e4ca9537a4af9043a74fc3dd3cf043a0ed928ad199a5bf36625e2d3a0d392d7e45ac8f49832edb5c409664334ddb60571f794511156a4d50332644c
+  data.tar.gz: '083ab7d7c102a315c9253491790014b6a5af41996bf81190d4a3f2c56bce9e503a3d204a0013866d2f9a956d311b9136bc2f5b86a317350d9f9585fe9ffc0299'

data/lib/opal/vite/compiler.rb

@@ -9,6 +9,7 @@ module Opal
       def initialize(options = {})
         @options = options
         @config = options[:config] || Opal::Vite.config
+        @include_concerns = options.fetch(:include_concerns, true)
       end
 
       # Compile Ruby source code to JavaScript
@@ -27,6 +28,9 @@ module Opal
           parent_dir = File.dirname(file_dir)
           builder.append_paths(parent_dir)
 
+          # Add gem paths from $LOAD_PATH so Opal can find gems
+          add_gem_paths(builder)
+
           builder.build_str(source, file_path)
 
           result = {
@@ -72,6 +76,62 @@ module Opal
 
       private
 
+      def add_gem_paths(builder)
+        # Add gem directories from $LOAD_PATH to Opal's load paths
+        # This allows Opal to find and compile gems like inesita
+
+        # Add opal-vite's built-in concerns if enabled
+        if @include_concerns
+          opal_vite_opal_path = Opal::Vite.opal_lib_path
+          if File.directory?(opal_vite_opal_path)
+            builder.append_paths(opal_vite_opal_path) unless builder.path_reader.paths.include?(opal_vite_opal_path)
+          end
+        end
+
+        # First collect all gem paths
+        gem_lib_paths = []
+        gem_opal_paths = []
+
+        $LOAD_PATH.each do |path|
+          # Only process gem directories
+          if path.include?('/gems/') && File.directory?(path)
+            gem_lib_paths << path
+
+            # Check if gem has an opal directory (for gems like inesita)
+            # Gems with opal-specific code often have an 'opal' directory sibling to 'lib'
+            gem_root = File.dirname(path)
+            opal_path = File.join(gem_root, 'opal')
+            if File.directory?(opal_path)
+              gem_opal_paths << opal_path
+            end
+          end
+        end
+
+        # 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|
+          builder.append_paths(path) unless builder.path_reader.paths.include?(path)
+        end
+
+        # Then add regular lib directories, but ONLY for Opal-compatible gems
+        # to avoid pulling in Rails/server-side dependencies
+        gem_lib_paths.uniq.each do |path|
+          # Only add paths from gems that:
+          # 1. Have an 'opal' directory (already processed above)
+          # 2. OR have 'opal' in their gem name
+          gem_root = File.dirname(path)
+          gem_name = File.basename(gem_root)
+
+          # Check if this gem has opal support
+          is_opal_gem = gem_name.start_with?('opal') ||
+                       gem_opal_paths.any? { |opal_path| opal_path.start_with?(gem_root) }
+
+          if is_opal_gem
+            builder.append_paths(path) unless builder.path_reader.paths.include?(path)
+          end
+        end
+      end
+
       def compiler_options
         @config.to_compiler_options
       end

data/lib/opal/vite/version.rb

@@ -1,5 +1,5 @@
 module Opal
   module Vite
-    VERSION = "0.1.0"
+    VERSION = "0.2.1"
   end
 end

data/lib/opal-vite.rb

@@ -21,9 +21,17 @@ module Opal
         yield(config) if block_given?
       end
 
+      # 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__)
+      end
+
       # CLI entry point for compilation
-      def compile_for_vite(file_path)
-        compiler = Compiler.new
+      # @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)
+        compiler = Compiler.new(include_concerns: include_concerns)
         result = compiler.compile_file(file_path)
 
         # Output JSON to stdout for the Vite plugin to consume

data/opal/opal_vite/concerns/dom_helpers.rb

@@ -0,0 +1,89 @@
+# backtick_javascript: true
+
+module OpalVite
+  module Concerns
+    # DomHelpers concern - provides common DOM manipulation methods
+    module DomHelpers
+      # Create a custom event and dispatch it on a target
+      def dispatch_custom_event(event_name, detail = {}, target = nil)
+        target ||= window
+        `
+          const event = new CustomEvent(#{event_name}, {
+            detail: #{detail.to_n}
+          });
+          #{target.to_n}.dispatchEvent(event);
+        `
+      end
+
+      # Create a standard event
+      def create_event(event_type, options = { bubbles: true })
+        `new Event(#{event_type}, #{options.to_n})`
+      end
+
+      # Query selector shorthand on element
+      def query(selector)
+        element.query_selector(selector)
+      end
+
+      # Query selector all shorthand on element
+      def query_all(selector)
+        element.query_selector_all(selector)
+      end
+
+      # Add CSS class to element
+      def add_class(el, class_name)
+        el.class_list.add(class_name)
+      end
+
+      # Remove CSS class from element
+      def remove_class(el, class_name)
+        el.class_list.remove(class_name)
+      end
+
+      # Toggle CSS class on element
+      def toggle_class(el, class_name)
+        el.class_list.toggle(class_name)
+      end
+
+      # Check if element has CSS class
+      def has_class?(el, class_name)
+        el.class_list.contains(class_name)
+      end
+
+      # Set timeout helper
+      def set_timeout(delay_ms, &block)
+        window.set_timeout(block, delay_ms)
+      end
+
+      # Check if element exists (not null)
+      def element_exists?(el)
+        !el.nil? && el.to_n
+      end
+
+      # Set style property on element
+      def set_style(el, property, value)
+        return unless element_exists?(el)
+        `#{el.to_n}.style[#{property}] = #{value}`
+      end
+
+      # Get style property from element
+      def get_style(el, property)
+        return nil unless element_exists?(el)
+        `#{el.to_n}.style[#{property}]`
+      end
+
+      # Show element (set display to block)
+      def show_element(el)
+        set_style(el, 'display', 'block')
+      end
+
+      # Hide element (set display to none)
+      def hide_element(el)
+        set_style(el, 'display', 'none')
+      end
+    end
+  end
+end
+
+# Alias for backward compatibility
+DomHelpers = OpalVite::Concerns::DomHelpers

data/opal/opal_vite/concerns/js_proxy_ex.rb

@@ -0,0 +1,414 @@
+# backtick_javascript: true
+
+module OpalVite
+  module Concerns
+    # JS::ProxyEx - Extended JS proxy utilities for Ruby-like JavaScript interop
+    #
+    # This module provides Ruby-friendly wrappers around JavaScript objects and APIs
+    # that opal_stimulus's JS::Proxy doesn't fully cover yet.
+    #
+    # Usage:
+    #   include OpalVite::Concerns::JsProxyEx
+    #
+    #   # Global objects
+    #   local_storage.get_item('key')
+    #   json.parse(data)
+    #
+    #   # Object creation
+    #   new_event('click', bubbles: true)
+    #   new_url('https://example.com')
+    #   new_regexp('[a-z]+')
+    #
+    #   # Event listeners with proper block handling
+    #   window.add_event_listener('click') { |event| ... }
+    #
+    module JsProxyEx
+      # ============================================
+      # Global JavaScript Objects
+      # ============================================
+
+      def local_storage
+        @local_storage ||= JsObject.new(`localStorage`)
+      end
+
+      def session_storage
+        @session_storage ||= JsObject.new(`sessionStorage`)
+      end
+
+      def js_json
+        @js_json ||= JsonWrapper.new
+      end
+
+      def js_date
+        DateWrapper
+      end
+
+      def js_console
+        @js_console ||= JsObject.new(`console`)
+      end
+
+      # ============================================
+      # Object Creation Helpers
+      # ============================================
+
+      def new_event(type, options = {})
+        JsObject.new(`new Event(#{type}, #{options.to_n})`)
+      end
+
+      def new_custom_event(type, detail = {})
+        JsObject.new(`new CustomEvent(#{type}, { detail: #{detail.to_n} })`)
+      end
+
+      def new_url(url_string)
+        JsObject.new(`new URL(#{url_string})`)
+      end
+
+      def new_regexp(pattern, flags = '')
+        RegExpWrapper.new(pattern, flags)
+      end
+
+      def new_date(value = nil)
+        if value
+          JsObject.new(`new Date(#{value})`)
+        else
+          JsObject.new(`new Date()`)
+        end
+      end
+
+      def date_now
+        `Date.now()`
+      end
+
+      # ============================================
+      # Wrap existing JS::Proxy objects
+      # ============================================
+
+      # Wrap a JS::Proxy or native object in JsObject for enhanced access
+      def wrap_js(obj)
+        return nil if obj.nil?
+        native = obj.respond_to?(:to_n) ? obj.to_n : obj
+        JsObject.new(native)
+      end
+
+      # ============================================
+      # Array/Object utilities
+      # ============================================
+
+      # Convert JS array to Ruby array with JsObject wrapping
+      def js_array_to_ruby(js_array)
+        result = []
+        length = `#{js_array}.length`
+        length.times do |i|
+          item = `#{js_array}[#{i}]`
+          result << JsObject.new(item)
+        end
+        result
+      end
+
+      # Create empty JS array
+      def new_js_array
+        JsObject.new(`[]`)
+      end
+
+      # ============================================
+      # JsObject - Wrapper class with method_missing
+      # ============================================
+
+      class JsObject
+        def initialize(native)
+          @native = native
+        end
+
+        def to_n
+          @native
+        end
+
+        # Access properties with [] - returns wrapped JsObject
+        def [](key)
+          key_str = key.to_s
+          # Convert snake_case to camelCase for property access
+          camel_key = snake_to_camel(key_str)
+          result = `#{@native}[#{camel_key}]`
+          wrap_result(result)
+        end
+
+        # Set properties with []=
+        def []=(key, value)
+          key_str = key.to_s
+          camel_key = snake_to_camel(key_str)
+          native_value = value.respond_to?(:to_n) ? value.to_n : value
+          `#{@native}[#{camel_key}] = #{native_value}`
+        end
+
+        # Method missing for snake_case -> camelCase conversion
+        def method_missing(name, *args, &block)
+          name_str = name.to_s
+
+          # Handle setters (e.g., text_content=)
+          if name_str.end_with?('=')
+            prop_name = name_str[0..-2]
+            camel_name = snake_to_camel(prop_name)
+            value = args[0]
+            native_value = value.respond_to?(:to_n) ? value.to_n : value
+            `#{@native}[#{camel_name}] = #{native_value}`
+            return value
+          end
+
+          # Handle predicates (e.g., has_attribute?)
+          if name_str.end_with?('?')
+            prop_name = name_str[0..-2]
+            camel_name = snake_to_camel(prop_name)
+            return !!`#{@native}[#{camel_name}]`
+          end
+
+          camel_name = snake_to_camel(name_str)
+
+          # Check if it's a function
+          is_function = `typeof #{@native}[#{camel_name}] === 'function'`
+
+          if is_function
+            # Handle event listeners specially
+            if camel_name == 'addEventListener' && block
+              native_callback = ->(event) { block.call(JsObject.new(event)) }
+              `#{@native}.addEventListener(#{args[0]}, #{native_callback})`
+              return nil
+            end
+
+            # Convert args to native
+            native_args = args.map { |a| a.respond_to?(:to_n) ? a.to_n : a }
+
+            # If block provided, wrap it
+            if block
+              native_callback = ->(*cb_args) {
+                wrapped_args = cb_args.map { |a| wrap_result(a) }
+                block.call(*wrapped_args)
+              }
+              native_args << native_callback
+            end
+
+            result = case native_args.length
+            when 0 then `#{@native}[#{camel_name}]()`
+            when 1 then `#{@native}[#{camel_name}](#{native_args[0]})`
+            when 2 then `#{@native}[#{camel_name}](#{native_args[0]}, #{native_args[1]})`
+            when 3 then `#{@native}[#{camel_name}](#{native_args[0]}, #{native_args[1]}, #{native_args[2]})`
+            else
+              # For more args, use apply
+              `#{@native}[#{camel_name}].apply(#{@native}, #{native_args})`
+            end
+
+            wrap_result(result)
+          else
+            # Property access
+            result = `#{@native}[#{camel_name}]`
+            wrap_result(result)
+          end
+        end
+
+        def respond_to_missing?(name, include_private = false)
+          true
+        end
+
+        # Enumerable support - iterate over array-like objects
+        def each(&block)
+          return enum_for(:each) unless block
+          length = `#{@native}.length`
+          return self unless length
+          length.times do |i|
+            item = `#{@native}[#{i}]`
+            block.call(wrap_result(item))
+          end
+          self
+        end
+
+        def length
+          `#{@native}.length`
+        end
+
+        def size
+          length
+        end
+
+        # Check for null/undefined
+        def nil?
+          `#{@native} == null`
+        end
+
+        def exists?
+          !nil?
+        end
+
+        # String conversion
+        def to_s
+          `String(#{@native})`
+        end
+
+        def inspect
+          "#<JsObject: #{to_s}>"
+        end
+
+        private
+
+        def snake_to_camel(str)
+          # Handle special cases first
+          return str if str == str.upcase # ALL_CAPS stays as is
+
+          parts = str.split('_')
+          return str if parts.length == 1
+
+          # First part stays lowercase, rest get capitalized
+          parts[0] + parts[1..-1].map(&:capitalize).join
+        end
+
+        def wrap_result(result)
+          return nil if `#{result} === null || #{result} === undefined`
+          return result if `typeof #{result} === 'number'`
+          return result if `typeof #{result} === 'string'`
+          return result if `typeof #{result} === 'boolean'`
+          JsObject.new(result)
+        end
+      end
+
+      # ============================================
+      # JsonWrapper - Ruby-like JSON API
+      # ============================================
+
+      class JsonWrapper
+        def parse(json_string)
+          result = `JSON.parse(#{json_string})`
+          JsObject.new(result)
+        end
+
+        def stringify(data)
+          native_data = data.respond_to?(:to_n) ? data.to_n : data
+          `JSON.stringify(#{native_data})`
+        end
+      end
+
+      # ============================================
+      # RegExpWrapper - Ruby-like RegExp API
+      # ============================================
+
+      class RegExpWrapper
+        def initialize(pattern, flags = '')
+          @native = `new RegExp(#{pattern}, #{flags})`
+        end
+
+        def to_n
+          @native
+        end
+
+        def test(string)
+          `#{@native}.test(#{string})`
+        end
+
+        def match(string)
+          result = `#{string}.match(#{@native})`
+          return nil if `#{result} === null`
+          JsObject.new(result)
+        end
+
+        def =~(string)
+          test(string)
+        end
+      end
+
+      # ============================================
+      # DateWrapper - Static methods for Date
+      # ============================================
+
+      module DateWrapper
+        def self.now
+          `Date.now()`
+        end
+
+        def self.new(value = nil)
+          if value
+            JsObject.new(`new Date(#{value})`)
+          else
+            JsObject.new(`new Date()`)
+          end
+        end
+
+        def self.parse(date_string)
+          `Date.parse(#{date_string})`
+        end
+      end
+
+      # ============================================
+      # Stimulus Target Helpers
+      # For accessing Stimulus targets with snake_case
+      # ============================================
+
+      # Check if target exists: has_target?(:submit_btn)
+      def has_target?(target_name)
+        camel_name = snake_to_camel(target_name.to_s)
+        has_method = "has#{camel_name[0].upcase}#{camel_name[1..-1]}Target"
+        `this[#{has_method}]`
+      end
+
+      # Get target element: target(:submit_btn)
+      def target(target_name)
+        camel_name = snake_to_camel(target_name.to_s)
+        target_method = "#{camel_name}Target"
+        result = `this[#{target_method}]`
+        JsObject.new(result)
+      end
+
+      # Get all targets: targets(:field)
+      def targets(target_name)
+        camel_name = snake_to_camel(target_name.to_s)
+        targets_method = "#{camel_name}Targets"
+        result = `this[#{targets_method}]`
+        js_array_to_ruby(result)
+      end
+
+      # Update target text content: set_target_text(:status, "Hello")
+      def set_target_text(target_name, text)
+        camel_name = snake_to_camel(target_name.to_s)
+        has_method = "has#{camel_name[0].upcase}#{camel_name[1..-1]}Target"
+        target_method = "#{camel_name}Target"
+        `
+          if (this[#{has_method}]) {
+            this[#{target_method}].textContent = #{text};
+          }
+        `
+      end
+
+      # Update target class: set_target_class(:status, "form-status error")
+      def set_target_class(target_name, class_name)
+        camel_name = snake_to_camel(target_name.to_s)
+        has_method = "has#{camel_name[0].upcase}#{camel_name[1..-1]}Target"
+        target_method = "#{camel_name}Target"
+        `
+          if (this[#{has_method}]) {
+            this[#{target_method}].className = #{class_name};
+          }
+        `
+      end
+
+      # Set target disabled state: set_target_disabled(:submit_btn, true)
+      def set_target_disabled(target_name, disabled)
+        camel_name = snake_to_camel(target_name.to_s)
+        has_method = "has#{camel_name[0].upcase}#{camel_name[1..-1]}Target"
+        target_method = "#{camel_name}Target"
+        `
+          if (this[#{has_method}]) {
+            this[#{target_method}].disabled = #{disabled};
+          }
+        `
+      end
+
+      private
+
+      def snake_to_camel(str)
+        return str if str == str.upcase # ALL_CAPS stays as is
+        parts = str.to_s.split('_')
+        return str if parts.length == 1
+        parts[0] + parts[1..-1].map(&:capitalize).join
+      end
+    end
+  end
+end
+
+# Alias for backward compatibility
+JsProxyEx = OpalVite::Concerns::JsProxyEx