opal-vite 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b141645cbef98169c750427f39d902e6f8377430fb41ec282ccfdaf9ff6bc5a5
-  data.tar.gz: ec0717edcaf168380c5bd92419d84d2e14f12d41430a373d45c7f095109d2b82
+  metadata.gz: d4bc96b96e9f545db30dd5ca2d6b0fb0aea32f1a03e9a733c6e3c802dc616506
+  data.tar.gz: d753caf10cfca04a2709bfe446f3dde148eafc3da279d5fbb38797ad17b000da
 SHA512:
-  metadata.gz: e27461464983db947b29e81c64da1ef4d5872c45709e66e078c315dc9133c15ec453b88d596788a5321a235e604da1c7c7f1eefb87240574566da709d933cbbb
-  data.tar.gz: 8d70ec17da3cb04a529e55640aec9e8ed6efc6bc1acdf4aad0ac93949b83593820a18d624c86db11df764b3c5481cc2228828617c71e8694005dc4e0abead6f2
+  metadata.gz: 7a660f33fceef3720e67a7530cbda406c6218978557056cefc782e7dce014e0c73784ea46397091cfff1a130e2d0edc9003f051694f88f52c4f0f568748cba7c
+  data.tar.gz: 017e824fd2eefd1ecc9cdae4dd7677bd74e6dd14082a0c5fc755f22f7cf879d61d0a519e55988f02d93bdf1d74aeb37ffdc5f8822f88d0a3e99b1d6cf229f047

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.0"
   end
 end

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

data/opal/opal_vite/concerns/stimulus_helpers.rb

@@ -0,0 +1,386 @@
+# backtick_javascript: true
+
+module OpalVite
+  module Concerns
+    # StimulusHelpers - DSL macros for reducing JavaScript backticks in Stimulus controllers
+    #
+    # This module provides Ruby-friendly methods for common Stimulus patterns,
+    # reducing the need for raw JavaScript backticks.
+    #
+    # Usage:
+    #   class MyController < StimulusController
+    #     include StimulusHelpers
+    #
+    #     def connect
+    #       if has_target?(:input)
+    #         value = target_value(:input)
+    #         target_set_html(:output, "Value: #{value}")
+    #       end
+    #     end
+    #   end
+    module StimulusHelpers
+      # ===== Target Access Methods =====
+
+      # Check if a Stimulus target exists
+      # @param name [Symbol, String] Target name (e.g., :input, :output)
+      # @return [Boolean] true if target exists
+      def has_target?(name)
+        method_name = "has#{camelize(name)}Target"
+        `this[#{method_name}]`
+      end
+
+      # Get a Stimulus target element
+      # @param name [Symbol, String] Target name
+      # @return [Element, nil] The target element or nil
+      def get_target(name)
+        return nil unless has_target?(name)
+        method_name = "#{camelize(name, false)}Target"
+        `this[#{method_name}]`
+      end
+
+      # Get all Stimulus targets of a type
+      # @param name [Symbol, String] Target name
+      # @return [Array] Array of target elements
+      def get_targets(name)
+        method_name = "#{camelize(name, false)}Targets"
+        `Array.from(this[#{method_name}] || [])`
+      end
+
+      # Get the value of a target (input field)
+      # @param name [Symbol, String] Target name
+      # @return [String, nil] The target's value
+      def target_value(name)
+        return nil unless has_target?(name)
+        method_name = "#{camelize(name, false)}Target"
+        `this[#{method_name}].value`
+      end
+
+      # Set the value of a target (input field)
+      # @param name [Symbol, String] Target name
+      # @param value [String] The value to set
+      def target_set_value(name, value)
+        return unless has_target?(name)
+        method_name = "#{camelize(name, false)}Target"
+        `this[#{method_name}].value = #{value}`
+      end
+
+      # Get the innerHTML of a target
+      # @param name [Symbol, String] Target name
+      # @return [String, nil] The target's innerHTML
+      def target_html(name)
+        return nil unless has_target?(name)
+        method_name = "#{camelize(name, false)}Target"
+        `this[#{method_name}].innerHTML`
+      end
+
+      # Set the innerHTML of a target
+      # @param name [Symbol, String] Target name
+      # @param html [String] The HTML to set
+      def target_set_html(name, html)
+        return unless has_target?(name)
+        method_name = "#{camelize(name, false)}Target"
+        `this[#{method_name}].innerHTML = #{html}`
+      end
+
+      # Get the textContent of a target
+      # @param name [Symbol, String] Target name
+      # @return [String, nil] The target's textContent
+      def target_text(name)
+        return nil unless has_target?(name)
+        method_name = "#{camelize(name, false)}Target"
+        `this[#{method_name}].textContent`
+      end
+
+      # Set the textContent of a target
+      # @param name [Symbol, String] Target name
+      # @param text [String] The text to set
+      def target_set_text(name, text)
+        return unless has_target?(name)
+        method_name = "#{camelize(name, false)}Target"
+        `this[#{method_name}].textContent = #{text}`
+      end
+
+      # Get a data attribute from a target
+      # @param name [Symbol, String] Target name
+      # @param attr [String] The data attribute name (without 'data-' prefix)
+      # @return [String, nil] The attribute value
+      def target_data(name, attr)
+        return nil unless has_target?(name)
+        method_name = "#{camelize(name, false)}Target"
+        `this[#{method_name}].getAttribute('data-' + #{attr})`
+      end
+
+      # Set a data attribute on a target
+      # @param name [Symbol, String] Target name
+      # @param attr [String] The data attribute name (without 'data-' prefix)
+      # @param value [String] The value to set
+      def target_set_data(name, attr, value)
+        return unless has_target?(name)
+        method_name = "#{camelize(name, false)}Target"
+        `this[#{method_name}].setAttribute('data-' + #{attr}, #{value})`
+      end
+
+      # Clear a target's value (for input fields)
+      # @param name [Symbol, String] Target name
+      def target_clear(name)
+        target_set_value(name, '')
+      end
+
+      # Clear a target's innerHTML
+      # @param name [Symbol, String] Target name
+      def target_clear_html(name)
+        target_set_html(name, '')
+      end
+
+      # ===== Target Style Methods =====
+
+      # Set a style property on a target element
+      # @param name [Symbol, String] Target name
+      # @param property [String] CSS property name (e.g., 'display', 'color')
+      # @param value [String] CSS value
+      def set_target_style(name, property, value)
+        return unless has_target?(name)
+        method_name = "#{camelize(name, false)}Target"
+        `this[#{method_name}].style[#{property}] = #{value}`
+      end
+
+      # Get a style property from a target element
+      # @param name [Symbol, String] Target name
+      # @param property [String] CSS property name
+      # @return [String, nil] The style value
+      def get_target_style(name, property)
+        return nil unless has_target?(name)
+        method_name = "#{camelize(name, false)}Target"
+        `this[#{method_name}].style[#{property}]`
+      end
+
+      # Show a target element (set display to '')
+      # @param name [Symbol, String] Target name
+      def show_target(name)
+        set_target_style(name, 'display', '')
+      end
+
+      # Hide a target element (set display to 'none')
+      # @param name [Symbol, String] Target name
+      def hide_target(name)
+        set_target_style(name, 'display', 'none')
+      end
+
+      # Toggle target visibility
+      # @param name [Symbol, String] Target name
+      def toggle_target_visibility(name)
+        current = get_target_style(name, 'display')
+        if current == 'none'
+          show_target(name)
+        else
+          hide_target(name)
+        end
+      end
+
+      # ===== Target Class Methods =====
+
+      # Add a CSS class to a target element
+      # @param name [Symbol, String] Target name
+      # @param class_name [String] CSS class to add
+      def add_target_class(name, class_name)
+        return unless has_target?(name)
+        method_name = "#{camelize(name, false)}Target"
+        `this[#{method_name}].classList.add(#{class_name})`
+      end
+
+      # Remove a CSS class from a target element
+      # @param name [Symbol, String] Target name
+      # @param class_name [String] CSS class to remove
+      def remove_target_class(name, class_name)
+        return unless has_target?(name)
+        method_name = "#{camelize(name, false)}Target"
+        `this[#{method_name}].classList.remove(#{class_name})`
+      end
+
+      # Toggle a CSS class on a target element
+      # @param name [Symbol, String] Target name
+      # @param class_name [String] CSS class to toggle
+      def toggle_target_class(name, class_name)
+        return unless has_target?(name)
+        method_name = "#{camelize(name, false)}Target"
+        `this[#{method_name}].classList.toggle(#{class_name})`
+      end
+
+      # Check if a target has a CSS class
+      # @param name [Symbol, String] Target name
+      # @param class_name [String] CSS class to check
+      # @return [Boolean] true if target has the class
+      def has_target_class?(name, class_name)
+        return false unless has_target?(name)
+        method_name = "#{camelize(name, false)}Target"
+        `this[#{method_name}].classList.contains(#{class_name})`
+      end
+
+      # ===== Date/Time Methods =====
+
+      # Get current timestamp (milliseconds since epoch)
+      # @return [Integer] Current timestamp
+      def js_timestamp
+        `Date.now()`
+      end
+
+      # Get current date as ISO string
+      # @return [String] ISO date string
+      def js_iso_date
+        `new Date().toISOString()`
+      end
+
+      # Create a new Date object
+      # @param value [String, Integer, nil] Optional value to parse
+      # @return [Native] JavaScript Date object
+      def js_date(value = nil)
+        if value
+          `new Date(#{value})`
+        else
+          `new Date()`
+        end
+      end
+
+      # ===== RegExp Methods =====
+
+      # Create a JavaScript RegExp object
+      # @param pattern [String] The regex pattern
+      # @param flags [String] Optional flags (e.g., 'gi')
+      # @return [Native] JavaScript RegExp object
+      def js_regexp(pattern, flags = '')
+        `new RegExp(#{pattern}, #{flags})`
+      end
+
+      # Test if a string matches a regex pattern
+      # @param pattern [String] The regex pattern
+      # @param value [String] The string to test
+      # @param flags [String] Optional flags
+      # @return [Boolean] true if matches
+      def js_regexp_test(pattern, value, flags = '')
+        `new RegExp(#{pattern}, #{flags}).test(#{value})`
+      end
+
+      # ===== Timer Methods =====
+
+      # Set a timeout
+      # @param delay [Integer] Delay in milliseconds
+      # @yield Block to execute after delay
+      # @return [Integer] Timer ID
+      def set_timeout(delay, &block)
+        `setTimeout(function() { #{block.call} }, #{delay})`
+      end
+
+      # Set an interval
+      # @param delay [Integer] Interval in milliseconds
+      # @yield Block to execute at each interval
+      # @return [Integer] Timer ID
+      def set_interval(delay, &block)
+        `setInterval(function() { #{block.call} }, #{delay})`
+      end
+
+      # Clear a timeout
+      # @param timer_id [Integer] Timer ID to clear
+      def clear_timeout(timer_id)
+        `clearTimeout(#{timer_id})`
+      end
+
+      # Clear an interval
+      # @param timer_id [Integer] Timer ID to clear
+      def clear_interval(timer_id)
+        `clearInterval(#{timer_id})`
+      end
+
+      # ===== Body Style Methods =====
+
+      # Set document body style property
+      # @param property [String] CSS property name
+      # @param value [String] CSS value
+      def body_style(property, value)
+        `document.body.style[#{property}] = #{value}`
+      end
+
+      # Lock body scroll (prevent scrolling)
+      def lock_body_scroll
+        body_style('overflow', 'hidden')
+      end
+
+      # Unlock body scroll (restore scrolling)
+      def unlock_body_scroll
+        body_style('overflow', '')
+      end
+
+      # ===== Array Helper Methods =====
+
+      # Create a new JavaScript array
+      # @return [Native] Empty JavaScript array
+      def js_array
+        `[]`
+      end
+
+      # Push item to JavaScript array
+      # @param array [Native] JavaScript array
+      # @param item [Object] Item to push
+      def js_array_push(array, item)
+        `#{array}.push(#{item.to_n})`
+      end
+
+      # Get JavaScript array length
+      # @param array [Native] JavaScript array
+      # @return [Integer] Array length
+      def js_array_length(array)
+        `#{array}.length`
+      end
+
+      # Get item from JavaScript array at index
+      # @param array [Native] JavaScript array
+      # @param index [Integer] Index
+      # @return [Object] Item at index
+      def js_array_at(array, index)
+        `#{array}[#{index}]`
+      end
+
+      # ===== Utility Methods =====
+
+      # Generate a unique ID based on timestamp
+      # @return [Integer] Unique ID
+      def generate_id
+        js_timestamp
+      end
+
+      # Focus a target element
+      # @param name [Symbol, String] Target name
+      def target_focus(name)
+        return unless has_target?(name)
+        method_name = "#{camelize(name, false)}Target"
+        `this[#{method_name}].focus()`
+      end
+
+      # Blur (unfocus) a target element
+      # @param name [Symbol, String] Target name
+      def target_blur(name)
+        return unless has_target?(name)
+        method_name = "#{camelize(name, false)}Target"
+        `this[#{method_name}].blur()`
+      end
+
+      private
+
+      # Convert snake_case to 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
+        parts = str.split('_')
+        if capitalize_first
+          parts.map(&:capitalize).join
+        else
+          ([parts.first] + parts[1..-1].map(&:capitalize)).join
+        end
+      end
+    end
+  end
+end
+
+# Alias for backward compatibility
+StimulusHelpers = OpalVite::Concerns::StimulusHelpers

data/opal/opal_vite/concerns/storable.rb

@@ -0,0 +1,31 @@
+# backtick_javascript: true
+
+module OpalVite
+  module Concerns
+    # Storable concern - provides LocalStorage functionality
+    module Storable
+      def storage_get(key)
+        stored = `localStorage.getItem(#{key})`
+        return nil unless stored
+
+        begin
+          `JSON.parse(stored)`
+        rescue
+          nil
+        end
+      end
+
+      def storage_set(key, data)
+        json = `JSON.stringify(#{data.to_n})`
+        `localStorage.setItem(#{key}, json)`
+      end
+
+      def storage_remove(key)
+        `localStorage.removeItem(#{key})`
+      end
+    end
+  end
+end
+
+# Alias for backward compatibility
+Storable = OpalVite::Concerns::Storable

data/opal/opal_vite/concerns/toastable.rb

@@ -0,0 +1,36 @@
+# backtick_javascript: true
+
+module OpalVite
+  module Concerns
+    # Toastable concern - provides toast notification functionality
+    module Toastable
+      def dispatch_toast(message, type = 'info')
+        `
+          const event = new CustomEvent('show-toast', {
+            detail: { message: #{message}, type: #{type} }
+          });
+          window.dispatchEvent(event);
+        `
+      end
+
+      def show_success(message)
+        dispatch_toast(message, 'success')
+      end
+
+      def show_error(message)
+        dispatch_toast(message, 'error')
+      end
+
+      def show_warning(message)
+        dispatch_toast(message, 'warning')
+      end
+
+      def show_info(message)
+        dispatch_toast(message, 'info')
+      end
+    end
+  end
+end
+
+# Alias for backward compatibility
+Toastable = OpalVite::Concerns::Toastable

data/opal/opal_vite/concerns.rb

@@ -0,0 +1,6 @@
+# Load all OpalVite concerns
+require 'opal_vite/concerns/js_proxy_ex'
+require 'opal_vite/concerns/dom_helpers'
+require 'opal_vite/concerns/toastable'
+require 'opal_vite/concerns/storable'
+require 'opal_vite/concerns/stimulus_helpers'

data/opal/opal_vite.rb

@@ -0,0 +1,16 @@
+# OpalVite - Opal + Vite integration library
+#
+# Usage:
+#   require 'opal_vite'
+#   require 'opal_vite/concerns'
+#
+# Or require individual concerns:
+#   require 'opal_vite/concerns/js_proxy_ex'
+#   require 'opal_vite/concerns/dom_helpers'
+#   require 'opal_vite/concerns/toastable'
+#   require 'opal_vite/concerns/storable'
+
+module OpalVite
+  module Concerns
+  end
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: opal-vite
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - stofu1234
@@ -110,6 +110,13 @@ files:
 - lib/opal/vite/config.rb
 - lib/opal/vite/source_map.rb
 - lib/opal/vite/version.rb
+- opal/opal_vite.rb
+- opal/opal_vite/concerns.rb
+- opal/opal_vite/concerns/dom_helpers.rb
+- opal/opal_vite/concerns/js_proxy_ex.rb
+- opal/opal_vite/concerns/stimulus_helpers.rb
+- opal/opal_vite/concerns/storable.rb
+- opal/opal_vite/concerns/toastable.rb
 homepage: https://github.com/stofu1234/opal-vite
 licenses:
 - MIT