opal-vite 0.2.13 → 0.2.14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2b438a8a413bcf69318c12c10472a9c70ad6bd86c8d2dfe51350d1030709957a
-  data.tar.gz: 6a411ed3661770d1b704f2b8e1b9881f0e84059b0aaec9d9745d5fb23ac2e4f3
+  metadata.gz: 93399be68e49a18a612682b0fe50eb3791fda0a6dc14ddbcd8f9970e5d29be7b
+  data.tar.gz: 4153c1d7194c000104493d2be30516e5db36b9231e947b0aa6f72ce4f3930fef
 SHA512:
-  metadata.gz: b1c964bc106778120177f21e80b34464163d11eafb699e9ea4925d1637328bb3b51bf1b14e9b869142e22cd361f118e59e452d9cd6627ef7f764369939043ab7
-  data.tar.gz: 3ddff355186dc4f6b84636ad0d08a363ef21400ecd3db715a0135718681ae274442f99bd8e7598e0413166e3ee4890e68b2a08d29d74e34db38c369b16da7f14
+  metadata.gz: e184450fa18a680b8155b2c3190781ef31de310eae209659a493fe601ed25421981b0c777ef44f631daef7c16a50a6065ba8fb6d6c850fa2bc7f4478c5ecf56c
+  data.tar.gz: 8dd3d802b5e6f476dec0b402de184b55f55a5fc111af0fe1ca804072205d1108e80a30114ef70f534a8033e3da34faf4b280e4d2a86d5f42fd1e300ec1fccfc7

data/lib/opal/vite/version.rb

@@ -1,5 +1,5 @@
 module Opal
   module Vite
-    VERSION = "0.2.13"
+    VERSION = "0.2.14"
   end
 end

data/opal/opal_vite/concerns/v1/dom_helpers.rb

@@ -22,13 +22,17 @@ module OpalVite
       end
 
       # Query selector shorthand on element
+      # Returns Native-wrapped element or nil
       def query(selector)
-        element.query_selector(selector)
+        el = element.query_selector(selector)
+        el.nil? ? nil : el
       end
 
       # Query selector all shorthand on element
+      # Returns Ruby Array of Native-wrapped elements
       def query_all(selector)
-        element.query_selector_all(selector)
+        node_list = element.query_selector_all(selector)
+        Native(`Array.from(#{node_list.to_n})`).to_a.map { |el| Native(el) }
       end
 
       # Add CSS class to element

data/opal/opal_vite/concerns/v1/react_helpers.rb

@@ -101,18 +101,24 @@ module OpalVite
         # ===================
 
         # Query single element
+        # Returns Native-wrapped element or nil
         def query(selector)
-          `document.querySelector(#{selector})`
+          el = `document.querySelector(#{selector})`
+          `#{el} === null` ? nil : Native(el)
         end
 
         # Query all elements
+        # Returns Ruby Array of Native-wrapped elements
         def query_all(selector)
-          `Array.from(document.querySelectorAll(#{selector}))`
+          elements = `Array.from(document.querySelectorAll(#{selector}))`
+          Native(elements).to_a.map { |el| Native(el) }
         end
 
         # Get element by ID
+        # Returns Native-wrapped element or nil
         def get_element_by_id(id)
-          `document.getElementById(#{id})`
+          el = `document.getElementById(#{id})`
+          `#{el} === null` ? nil : Native(el)
         end
 
         # ===================

data/opal/opal_vite/concerns/v1/stimulus_helpers.rb

@@ -491,25 +491,38 @@ module OpalVite
 
       # ===== Element Methods =====
 
+      # Convert element to native JavaScript element
+      # Handles both raw JS elements and Native-wrapped elements
+      # @param element [Native, Object] DOM element (raw or Native-wrapped)
+      # @return [Object] Raw JavaScript element
+      def to_native_element(element)
+        # Check if element is an Opal object with to_n method
+        # Use backtick JavaScript to safely check without calling Ruby methods on JS objects
+        `typeof #{element}.$to_n === 'function'` ? element.to_n : element
+      end
+
       # 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})`
+        el = to_native_element(element)
+        `#{el}.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})`
+        el = to_native_element(element)
+        `#{el}.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})`
+        el = to_native_element(element)
+        `#{el}.classList.toggle(#{class_name})`
       end
 
       # Check if element has class
@@ -517,7 +530,8 @@ module OpalVite
       # @param class_name [String] CSS class to check
       # @return [Boolean]
       def has_class?(element, class_name)
-        `#{element}.classList.contains(#{class_name})`
+        el = to_native_element(element)
+        `#{el}.classList.contains(#{class_name})`
       end
 
       # Set element attribute
@@ -525,7 +539,8 @@ module OpalVite
       # @param attr [String] Attribute name
       # @param value [String] Attribute value
       def set_attr(element, attr, value)
-        `#{element}.setAttribute(#{attr}, #{value})`
+        el = to_native_element(element)
+        `#{el}.setAttribute(#{attr}, #{value})`
       end
 
       # Get element attribute
@@ -533,14 +548,16 @@ module OpalVite
       # @param attr [String] Attribute name
       # @return [String, nil] Attribute value
       def get_attr(element, attr)
-        `#{element}.getAttribute(#{attr})`
+        el = to_native_element(element)
+        `#{el}.getAttribute(#{attr})`
       end
 
       # Remove element attribute
       # @param element [Native] DOM element
       # @param attr [String] Attribute name
       def remove_attr(element, attr)
-        `#{element}.removeAttribute(#{attr})`
+        el = to_native_element(element)
+        `#{el}.removeAttribute(#{attr})`
       end
 
       # Set element style
@@ -548,41 +565,47 @@ module OpalVite
       # @param property [String] CSS property
       # @param value [String] CSS value
       def set_style(element, property, value)
-        `#{element}.style[#{property}] = #{value}`
+        el = to_native_element(element)
+        `#{el}.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}`
+        el = to_native_element(element)
+        `#{el}.innerHTML = #{html}`
       end
 
       # Set element textContent
       # @param element [Native] DOM element
       # @param text [String] Text content
       def set_text(element, text)
-        `#{element}.textContent = #{text}`
+        el = to_native_element(element)
+        `#{el}.textContent = #{text}`
       end
 
       # Get element value (for inputs)
       # @param element [Native] DOM element
       # @return [String] Element value
       def get_value(element)
-        `#{element}.value`
+        el = to_native_element(element)
+        `#{el}.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}`
+        el = to_native_element(element)
+        `#{el}.value = #{value}`
       end
 
       # Focus element
       # @param element [Native] DOM element
       def focus(element)
-        `#{element}.focus()`
+        el = to_native_element(element)
+        `#{el}.focus()`
       end
 
       # Check if element has attribute
@@ -590,14 +613,15 @@ module OpalVite
       # @param attr [String] Attribute name
       # @return [Boolean]
       def has_attr?(element, attr)
-        `#{element}.hasAttribute(#{attr})`
+        el = to_native_element(element)
+        `#{el}.hasAttribute(#{attr})`
       end
 
       # ===== DOM Creation Methods =====
 
       # Create a new DOM element
       # @param tag [String] HTML tag name
-      # @return [Native] Created element
+      # @return [Object] Created element (raw JavaScript)
       def create_element(tag)
         `document.createElement(#{tag})`
       end
@@ -606,34 +630,40 @@ module OpalVite
       # @param parent [Native] Parent element
       # @param child [Native] Child element to append
       def append_child(parent, child)
-        `#{parent}.appendChild(#{child})`
+        p = to_native_element(parent)
+        c = to_native_element(child)
+        `#{p}.appendChild(#{c})`
       end
 
       # Remove element from DOM
       # @param element [Native] Element to remove
       def remove_element(element)
-        `#{element}.remove()`
+        el = to_native_element(element)
+        `#{el}.remove()`
       end
 
       # Get next element sibling
       # @param element [Native] DOM element
       # @return [Native, nil] Next sibling element
       def next_sibling(element)
-        `#{element}.nextElementSibling`
+        el = to_native_element(element)
+        `#{el}.nextElementSibling`
       end
 
       # Get previous element sibling
       # @param element [Native] DOM element
       # @return [Native, nil] Previous sibling element
       def prev_sibling(element)
-        `#{element}.previousElementSibling`
+        el = to_native_element(element)
+        `#{el}.previousElementSibling`
       end
 
       # Get parent element
       # @param element [Native] DOM element
       # @return [Native, nil] Parent element
       def parent(element)
-        `#{element}.parentElement`
+        el = to_native_element(element)
+        `#{el}.parentElement`
       end
 
       # ===== DOM Query Methods =====
@@ -642,28 +672,32 @@ module OpalVite
       # @param selector [String] CSS selector
       # @return [Native, nil] Element or nil
       def query(selector)
-        `document.querySelector(#{selector})`
+        el = `document.querySelector(#{selector})`
+        `#{el} === null` ? nil : Native(el)
       end
 
       # Query selector all on document
       # @param selector [String] CSS selector
-      # @return [Array] Array of elements
+      # @return [Array] Ruby Array of Native-wrapped elements
       def query_all(selector)
-        `Array.from(document.querySelectorAll(#{selector}))`
+        elements = `Array.from(document.querySelectorAll(#{selector}))`
+        Native(elements).to_a.map { |el| Native(el) }
       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})`
+        el = `this.element.querySelector(#{selector})`
+        `#{el} === null` ? nil : Native(el)
       end
 
       # Query selector all on controller element
       # @param selector [String] CSS selector
-      # @return [Array] Array of elements
+      # @return [Array] Ruby Array of Native-wrapped elements
       def query_all_element(selector)
-        `Array.from(this.element.querySelectorAll(#{selector}))`
+        elements = `Array.from(this.element.querySelectorAll(#{selector}))`
+        Native(elements).to_a.map { |el| Native(el) }
       end
 
       # ===== Document Methods =====

data/opal/opal_vite/concerns/v1/vue_helpers.rb

@@ -161,18 +161,24 @@ module OpalVite
         # ===================
 
         # Query single element
+        # Returns Native-wrapped element or nil
         def query(selector)
-          `document.querySelector(#{selector})`
+          el = `document.querySelector(#{selector})`
+          `#{el} === null` ? nil : Native(el)
         end
 
         # Query all elements
+        # Returns Ruby Array of Native-wrapped elements
         def query_all(selector)
-          `Array.from(document.querySelectorAll(#{selector}))`
+          elements = `Array.from(document.querySelectorAll(#{selector}))`
+          Native(elements).to_a.map { |el| Native(el) }
         end
 
         # Get element by ID
+        # Returns Native-wrapped element or nil
         def get_element_by_id(id)
-          `document.getElementById(#{id})`
+          el = `document.getElementById(#{id})`
+          `#{el} === null` ? nil : Native(el)
         end
 
         # ===================

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: opal-vite
 version: !ruby/object:Gem::Version
-  version: 0.2.13
+  version: 0.2.14
 platform: ruby
 authors:
 - stofu1234