opal-vite 0.2.0 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d4bc96b96e9f545db30dd5ca2d6b0fb0aea32f1a03e9a733c6e3c802dc616506
-  data.tar.gz: d753caf10cfca04a2709bfe446f3dde148eafc3da279d5fbb38797ad17b000da
+  metadata.gz: a747844bb38869490030ea9a7649cdd6f5b665cf2a60da55f3cc12f479aa556b
+  data.tar.gz: 8e0de9d6b0b124f5ee0cb83cfd242199785c6a7ecdfb1f2e3ba0f7253bb5c663
 SHA512:
-  metadata.gz: 7a660f33fceef3720e67a7530cbda406c6218978557056cefc782e7dce014e0c73784ea46397091cfff1a130e2d0edc9003f051694f88f52c4f0f568748cba7c
-  data.tar.gz: 017e824fd2eefd1ecc9cdae4dd7677bd74e6dd14082a0c5fc755f22f7cf879d61d0a519e55988f02d93bdf1d74aeb37ffdc5f8822f88d0a3e99b1d6cf229f047
+  metadata.gz: d12af9028e4ca9537a4af9043a74fc3dd3cf043a0ed928ad199a5bf36625e2d3a0d392d7e45ac8f49832edb5c409664334ddb60571f794511156a4d50332644c
+  data.tar.gz: '083ab7d7c102a315c9253491790014b6a5af41996bf81190d4a3f2c56bce9e503a3d204a0013866d2f9a956d311b9136bc2f5b86a317350d9f9585fe9ffc0299'

data/lib/opal/vite/version.rb

@@ -1,5 +1,5 @@
 module Opal
   module Vite
-    VERSION = "0.2.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/react_helpers.rb

@@ -0,0 +1,315 @@
+# backtick_javascript: true
+
+# ReactHelpers - DSL helpers for React applications with Opal
+# Reduces backtick JavaScript usage in React components
+module ReactHelpers
+  # ===================
+  # React Access
+  # ===================
+
+  # Get React from window
+  def react
+    Native(`window.React`)
+  end
+
+  # Get ReactDOM from window
+  def react_dom
+    Native(`window.ReactDOM`)
+  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
+
+  # Delete a property from window
+  def window_delete(key)
+    `delete window[#{key}]`
+  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
+
+  # ===================
+  # Alerts/Dialogs
+  # ===================
+
+  # Show alert dialog
+  def alert_message(message)
+    `alert(#{message})`
+  end
+
+  # Show confirm dialog
+  def confirm_message(message)
+    `confirm(#{message})`
+  end
+
+  # Show prompt dialog
+  def prompt_message(message, default_value = '')
+    `prompt(#{message}, #{default_value})`
+  end
+
+  # ===================
+  # DOM Events
+  # ===================
+
+  # Execute block when DOM is ready
+  def on_dom_ready(&block)
+    `document.addEventListener('DOMContentLoaded', #{block})`
+  end
+
+  # Add event listener to window
+  def on_window_event(event_name, &block)
+    `window.addEventListener(#{event_name}, #{block})`
+  end
+
+  # Remove event listener from window
+  def off_window_event(event_name, handler)
+    `window.removeEventListener(#{event_name}, #{handler})`
+  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
+
+  # ===================
+  # DOM Manipulation
+  # ===================
+
+  # Create element
+  def create_element(tag)
+    `document.createElement(#{tag})`
+  end
+
+  # Set innerHTML
+  def set_html(element, html)
+    `#{element}.innerHTML = #{html}`
+  end
+
+  # Set textContent
+  def set_text(element, text)
+    `#{element}.textContent = #{text}`
+  end
+
+  # Add class to element
+  def add_class(element, *classes)
+    `#{element}.classList.add(...#{classes})`
+  end
+
+  # Remove class from element
+  def remove_class(element, *classes)
+    `#{element}.classList.remove(...#{classes})`
+  end
+
+  # ===================
+  # React Element Creation Helpers
+  # ===================
+
+  # Create React element (shorthand)
+  def el(type, props = nil, *children)
+    react.createElement(type, props, *children)
+  end
+
+  # Create div element
+  def div(props = nil, *children, &block)
+    if block_given?
+      react.createElement('div', props, block.call)
+    else
+      react.createElement('div', props, *children)
+    end
+  end
+
+  # Create span element
+  def span(props = nil, *children, &block)
+    if block_given?
+      react.createElement('span', props, block.call)
+    else
+      react.createElement('span', props, *children)
+    end
+  end
+
+  # Create button element
+  def button(props = nil, *children, &block)
+    if block_given?
+      react.createElement('button', props, block.call)
+    else
+      react.createElement('button', props, *children)
+    end
+  end
+
+  # Create p element
+  def paragraph(props = nil, *children, &block)
+    if block_given?
+      react.createElement('p', props, block.call)
+    else
+      react.createElement('p', props, *children)
+    end
+  end
+
+  # Create heading elements
+  def h1(props = nil, *children)
+    react.createElement('h1', props, *children)
+  end
+
+  def h2(props = nil, *children)
+    react.createElement('h2', props, *children)
+  end
+
+  def h3(props = nil, *children)
+    react.createElement('h3', props, *children)
+  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
+
+  # ===================
+  # Fetch API
+  # ===================
+
+  # Fetch with promise (returns Native promise)
+  def fetch_url(url, options = nil)
+    if options
+      Native(`fetch(#{url}, #{options.to_n})`)
+    else
+      Native(`fetch(#{url})`)
+    end
+  end
+
+  # ===================
+  # JSON
+  # ===================
+
+  # Parse JSON string
+  def parse_json(json_string)
+    `JSON.parse(#{json_string})`
+  end
+
+  # Stringify to JSON
+  def to_json(object)
+    `JSON.stringify(#{object})`
+  end
+
+  # ===================
+  # Type Conversion
+  # ===================
+
+  # Parse string to integer (wrapper for JavaScript parseInt)
+  # @param value [String, Number] Value to parse
+  # @param radix [Integer] Radix (default: 10)
+  # @return [Integer, NaN] Parsed integer
+  def parse_int(value, radix = 10)
+    `parseInt(#{value}, #{radix})`
+  end
+
+  # Parse string to float (wrapper for JavaScript parseFloat)
+  # @param value [String, Number] Value to parse
+  # @return [Float, NaN] Parsed float
+  def parse_float(value)
+    `parseFloat(#{value})`
+  end
+
+  # Check if value is NaN
+  # @param value [Number] Value to check
+  # @return [Boolean] true if NaN
+  def is_nan?(value)
+    `Number.isNaN(#{value})`
+  end
+
+  # Parse integer with default value (returns default if NaN)
+  # @param value [String, Number] Value to parse
+  # @param default_value [Integer] Default value if parsing fails
+  # @return [Integer] Parsed integer or default
+  def parse_int_or(value, default_value = 0)
+    result = parse_int(value)
+    is_nan?(result) ? default_value : result
+  end
+
+  # Parse float with default value (returns default if NaN)
+  # @param value [String, Number] Value to parse
+  # @param default_value [Float] Default value if parsing fails
+  # @return [Float] Parsed float or default
+  def parse_float_or(value, default_value = 0.0)
+    result = parse_float(value)
+    is_nan?(result) ? default_value : result
+  end
+end

data/opal/opal_vite/concerns/stimulus_helpers.rb

@@ -339,6 +339,391 @@ module OpalVite
         `#{array}[#{index}]`
       end
 
+      # ===== LocalStorage Methods =====
+
+      # Get item from localStorage
+      # @param key [String] Storage key
+      # @return [String, nil] Stored value or nil
+      def storage_get(key)
+        `localStorage.getItem(#{key})`
+      end
+
+      # Set item in localStorage
+      # @param key [String] Storage key
+      # @param value [String] Value to store
+      def storage_set(key, value)
+        `localStorage.setItem(#{key}, #{value})`
+      end
+
+      # Remove item from localStorage
+      # @param key [String] Storage key
+      def storage_remove(key)
+        `localStorage.removeItem(#{key})`
+      end
+
+      # Get JSON-parsed value from localStorage
+      # @param key [String] Storage key
+      # @param default [Object] Default value if key doesn't exist
+      # @return [Object] Parsed value or default
+      def storage_get_json(key, default = nil)
+        stored = storage_get(key)
+        return default if `#{stored} === null`
+        `JSON.parse(#{stored})`
+      end
+
+      # Set JSON-stringified value in localStorage
+      # @param key [String] Storage key
+      # @param value [Object] Value to store (will be JSON-stringified)
+      def storage_set_json(key, value)
+        `localStorage.setItem(#{key}, JSON.stringify(#{value.to_n}))`
+      end
+
+      # ===== Event Methods =====
+
+      # Dispatch a custom event on window
+      # @param name [String] Event name
+      # @param detail [Hash] Event detail data
+      def dispatch_window_event(name, detail = {})
+        native_detail = detail.is_a?(Hash) ? detail.to_n : detail
+        `
+          const event = new CustomEvent(#{name}, { detail: #{native_detail} });
+          window.dispatchEvent(event);
+        `
+      end
+
+      # Dispatch a custom event on the controller element
+      # @param name [String] Event name
+      # @param detail [Hash] Event detail data
+      def dispatch_event(name, detail = {})
+        native_detail = detail.is_a?(Hash) ? detail.to_n : detail
+        `
+          const event = new CustomEvent(#{name}, { detail: #{native_detail} });
+          this.element.dispatchEvent(event);
+        `
+      end
+
+      # Add window event listener
+      # @param name [String] Event name
+      # @yield Block to execute when event fires
+      def on_window_event(name, &block)
+        `window.addEventListener(#{name}, #{block})`
+      end
+
+      # Remove window event listener
+      # @param name [String] Event name
+      # @param handler [Native] Handler function to remove
+      def off_window_event(name, handler)
+        `window.removeEventListener(#{name}, #{handler})`
+      end
+
+      # Add document event listener
+      # @param name [String] Event name
+      # @yield Block to execute when event fires
+      def on_document_event(name, &block)
+        `document.addEventListener(#{name}, #{block})`
+      end
+
+      # Add event listener when DOM is ready
+      # @yield Block to execute when DOM is ready
+      def on_dom_ready(&block)
+        `document.addEventListener('DOMContentLoaded', #{block})`
+      end
+
+      # Add event listener to any element
+      # @param element [Native] DOM element
+      # @param name [String] Event name
+      # @yield Block to execute when event fires
+      def on_element_event(element, name, &block)
+        `#{element}.addEventListener(#{name}, #{block})`
+      end
+
+      # Remove event listener from element
+      # @param element [Native] DOM element
+      # @param name [String] Event name
+      # @param handler [Native] Handler function to remove
+      def off_element_event(element, name, handler)
+        `#{element}.removeEventListener(#{name}, #{handler})`
+      end
+
+      # Add event listener to controller's element (this.element)
+      # @param name [String] Event name
+      # @yield Block to execute when event fires
+      def on_controller_event(name, &block)
+        `
+          const handler = #{block};
+          this.element.addEventListener(#{name}, function(e) {
+            handler(e);
+          });
+        `
+      end
+
+      # Get the current event's target element
+      # @return [Native] Event target element
+      def event_target
+        `event.currentTarget`
+      end
+
+      # Get data attribute from current event target
+      # @param attr [String] Data attribute name (without 'data-' prefix)
+      # @return [String, nil] Attribute value
+      def event_data(attr)
+        `event.currentTarget.getAttribute('data-' + #{attr})`
+      end
+
+      # Get integer data attribute from current event target
+      # @param attr [String] Data attribute name (without 'data-' prefix)
+      # @return [Integer, nil] Parsed integer value
+      def event_data_int(attr)
+        parse_int(event_data(attr))
+      end
+
+      # Prevent default event behavior
+      def prevent_default
+        `event.preventDefault()`
+      end
+
+      # Get event key (for keyboard events)
+      # @return [String] Key name
+      def event_key
+        `event.key`
+      end
+
+      # ===== Element Methods =====
+
+      # Add class to element
+      # @param element [Native] DOM element
+      # @param class_name [String] CSS class to add
+      def add_class(element, class_name)
+        `#{element}.classList.add(#{class_name})`
+      end
+
+      # Remove class from element
+      # @param element [Native] DOM element
+      # @param class_name [String] CSS class to remove
+      def remove_class(element, class_name)
+        `#{element}.classList.remove(#{class_name})`
+      end
+
+      # Toggle class on element
+      # @param element [Native] DOM element
+      # @param class_name [String] CSS class to toggle
+      def toggle_class(element, class_name)
+        `#{element}.classList.toggle(#{class_name})`
+      end
+
+      # Check if element has class
+      # @param element [Native] DOM element
+      # @param class_name [String] CSS class to check
+      # @return [Boolean]
+      def has_class?(element, class_name)
+        `#{element}.classList.contains(#{class_name})`
+      end
+
+      # Set element attribute
+      # @param element [Native] DOM element
+      # @param attr [String] Attribute name
+      # @param value [String] Attribute value
+      def set_attr(element, attr, value)
+        `#{element}.setAttribute(#{attr}, #{value})`
+      end
+
+      # Get element attribute
+      # @param element [Native] DOM element
+      # @param attr [String] Attribute name
+      # @return [String, nil] Attribute value
+      def get_attr(element, attr)
+        `#{element}.getAttribute(#{attr})`
+      end
+
+      # Remove element attribute
+      # @param element [Native] DOM element
+      # @param attr [String] Attribute name
+      def remove_attr(element, attr)
+        `#{element}.removeAttribute(#{attr})`
+      end
+
+      # Set element style
+      # @param element [Native] DOM element
+      # @param property [String] CSS property
+      # @param value [String] CSS value
+      def set_style(element, property, value)
+        `#{element}.style[#{property}] = #{value}`
+      end
+
+      # Set element innerHTML
+      # @param element [Native] DOM element
+      # @param html [String] HTML content
+      def set_html(element, html)
+        `#{element}.innerHTML = #{html}`
+      end
+
+      # Set element textContent
+      # @param element [Native] DOM element
+      # @param text [String] Text content
+      def set_text(element, text)
+        `#{element}.textContent = #{text}`
+      end
+
+      # Get element value (for inputs)
+      # @param element [Native] DOM element
+      # @return [String] Element value
+      def get_value(element)
+        `#{element}.value`
+      end
+
+      # Set element value (for inputs)
+      # @param element [Native] DOM element
+      # @param value [String] Value to set
+      def set_value(element, value)
+        `#{element}.value = #{value}`
+      end
+
+      # Focus element
+      # @param element [Native] DOM element
+      def focus(element)
+        `#{element}.focus()`
+      end
+
+      # Check if element has attribute
+      # @param element [Native] DOM element
+      # @param attr [String] Attribute name
+      # @return [Boolean]
+      def has_attr?(element, attr)
+        `#{element}.hasAttribute(#{attr})`
+      end
+
+      # ===== DOM Creation Methods =====
+
+      # Create a new DOM element
+      # @param tag [String] HTML tag name
+      # @return [Native] Created element
+      def create_element(tag)
+        `document.createElement(#{tag})`
+      end
+
+      # Append child to element
+      # @param parent [Native] Parent element
+      # @param child [Native] Child element to append
+      def append_child(parent, child)
+        `#{parent}.appendChild(#{child})`
+      end
+
+      # Remove element from DOM
+      # @param element [Native] Element to remove
+      def remove_element(element)
+        `#{element}.remove()`
+      end
+
+      # Get next element sibling
+      # @param element [Native] DOM element
+      # @return [Native, nil] Next sibling element
+      def next_sibling(element)
+        `#{element}.nextElementSibling`
+      end
+
+      # Get previous element sibling
+      # @param element [Native] DOM element
+      # @return [Native, nil] Previous sibling element
+      def prev_sibling(element)
+        `#{element}.previousElementSibling`
+      end
+
+      # Get parent element
+      # @param element [Native] DOM element
+      # @return [Native, nil] Parent element
+      def parent(element)
+        `#{element}.parentElement`
+      end
+
+      # ===== DOM Query Methods =====
+
+      # Query selector on document
+      # @param selector [String] CSS selector
+      # @return [Native, nil] Element or nil
+      def query(selector)
+        `document.querySelector(#{selector})`
+      end
+
+      # Query selector all on document
+      # @param selector [String] CSS selector
+      # @return [Array] Array of elements
+      def query_all(selector)
+        `Array.from(document.querySelectorAll(#{selector}))`
+      end
+
+      # Query selector on controller element
+      # @param selector [String] CSS selector
+      # @return [Native, nil] Element or nil
+      def query_element(selector)
+        `this.element.querySelector(#{selector})`
+      end
+
+      # Query selector all on controller element
+      # @param selector [String] CSS selector
+      # @return [Array] Array of elements
+      def query_all_element(selector)
+        `Array.from(this.element.querySelectorAll(#{selector}))`
+      end
+
+      # ===== Document Methods =====
+
+      # Get document root element (html)
+      # @return [Native] HTML element
+      def doc_root
+        `document.documentElement`
+      end
+
+      # Set attribute on document root
+      # @param attr [String] Attribute name
+      # @param value [String] Attribute value
+      def set_root_attr(attr, value)
+        `document.documentElement.setAttribute(#{attr}, #{value})`
+      end
+
+      # Get attribute from document root
+      # @param attr [String] Attribute name
+      # @return [String, nil] Attribute value
+      def get_root_attr(attr)
+        `document.documentElement.getAttribute(#{attr})`
+      end
+
+      # ===== Template Methods =====
+
+      # Clone a template target's content
+      # @param name [Symbol, String] Template target name
+      # @return [Native] Cloned content
+      def clone_template(name)
+        method_name = "#{camelize(name, false)}Target"
+        `this[#{method_name}].content.cloneNode(true)`
+      end
+
+      # Get first element child from cloned template
+      # @param clone [Native] Cloned template content
+      # @return [Native, nil] First element child
+      def template_first_child(clone)
+        `#{clone}.firstElementChild`
+      end
+
+      # ===== Stimulus Controller Element Methods =====
+
+      # Add class to controller element
+      # @param class_name [String] CSS class to add
+      def element_add_class(class_name)
+        `this.element.classList.add(#{class_name})`
+      end
+
+      # Remove class from controller element
+      # @param class_name [String] CSS class to remove
+      def element_remove_class(class_name)
+        `this.element.classList.remove(#{class_name})`
+      end
+
+      # Toggle class on controller element
+      # @param class_name [String] CSS class to toggle
+      def element_toggle_class(class_name)
+        `this.element.classList.toggle(#{class_name})`
+      end
+
       # ===== Utility Methods =====
 
       # Generate a unique ID based on timestamp
@@ -363,6 +748,48 @@ module OpalVite
         `this[#{method_name}].blur()`
       end
 
+      # ===== Type Conversion Methods =====
+
+      # Parse string to integer (wrapper for JavaScript parseInt)
+      # @param value [String, Number] Value to parse
+      # @param radix [Integer] Radix (default: 10)
+      # @return [Integer, NaN] Parsed integer
+      def parse_int(value, radix = 10)
+        `parseInt(#{value}, #{radix})`
+      end
+
+      # Parse string to float (wrapper for JavaScript parseFloat)
+      # @param value [String, Number] Value to parse
+      # @return [Float, NaN] Parsed float
+      def parse_float(value)
+        `parseFloat(#{value})`
+      end
+
+      # Check if value is NaN
+      # @param value [Number] Value to check
+      # @return [Boolean] true if NaN
+      def is_nan?(value)
+        `Number.isNaN(#{value})`
+      end
+
+      # Parse integer with default value (returns default if NaN)
+      # @param value [String, Number] Value to parse
+      # @param default_value [Integer] Default value if parsing fails
+      # @return [Integer] Parsed integer or default
+      def parse_int_or(value, default_value = 0)
+        result = parse_int(value)
+        is_nan?(result) ? default_value : result
+      end
+
+      # Parse float with default value (returns default if NaN)
+      # @param value [String, Number] Value to parse
+      # @param default_value [Float] Default value if parsing fails
+      # @return [Float] Parsed float or default
+      def parse_float_or(value, default_value = 0.0)
+        result = parse_float(value)
+        is_nan?(result) ? default_value : result
+      end
+
       private
 
       # Convert snake_case to camelCase

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: opal-vite
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.2.1
 platform: ruby
 authors:
 - stofu1234
@@ -114,6 +114,7 @@ files:
 - opal/opal_vite/concerns.rb
 - opal/opal_vite/concerns/dom_helpers.rb
 - opal/opal_vite/concerns/js_proxy_ex.rb
+- opal/opal_vite/concerns/react_helpers.rb
 - opal/opal_vite/concerns/stimulus_helpers.rb
 - opal/opal_vite/concerns/storable.rb
 - opal/opal_vite/concerns/toastable.rb