opal-vite 0.3.12 → 0.3.13

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9090275c2e356c56f2251c8553177f531703d22f134ce8fa8b68e11893f2ee29
-  data.tar.gz: 2d329e601b63709562865683389d41fe63250e1bc380f4c293a9342b900b84c6
+  metadata.gz: 67f79084fe35586cb8dc0f98103778f6fe8a87a14876dc94d974c5ab434be56d
+  data.tar.gz: 4f4f7c07407bd93599f9230168992cd16af6f61a708fab7db12a3229300a1f55
 SHA512:
-  metadata.gz: ba6714e48e3df9aa55671f9bce896b786443c34a9de6efc82b00955edb7fb2f5247a35c3de98e8ad2cad37bf0bf2e2931221e2276dec8128629a1a147554de85
-  data.tar.gz: 41cc25cdaa6b11f66a95082bc56828284a43b20fb2beac8c8ee043fb8b65e2637c1d68c07faa2ac1e5cb832b90216cf59ed0c67dde1e18b11425b5fadfebd8ea
+  metadata.gz: 2ef2c6d46990c04cc7b7d23267d255a384d4d6b263f7a1d83d47f2a7c82969796edd7d6e1ebcfa6cf209fd1eb53ff83cde108aced69e387b27e7ff9274a08a38
+  data.tar.gz: 11497fc562b1fc9a1ca9836cbe218988e771576a3bb2258915ceb7440c91aabfeecea843cea34a9f861f2c30498084574ccf94c10a311301c2bdb7130025761c

data/lib/opal/vite/version.rb

@@ -1,5 +1,5 @@
 module Opal
   module Vite
-    VERSION = "0.3.12"
+    VERSION = "0.3.13"
   end
 end

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

@@ -0,0 +1,112 @@
+# backtick_javascript: true
+
+module OpalVite
+  module Concerns
+    module V1
+      # Component - a lightweight, framework-agnostic UI component base class.
+      #
+      # opal-rails users coming from hand-written opal-jquery DOM code (or
+      # Hyperstack) usually just want "a base class that holds state and
+      # re-renders". This provides exactly that, with no React/Vue dependency,
+      # using only the native DOM. Because it is Sprockets-independent it runs
+      # unchanged under Vite.
+      #
+      # @example
+      #   class Counter < OpalComponent
+      #     def initial_state
+      #       { count: 0 }
+      #     end
+      #
+      #     def render
+      #       "<button>count: #{state[:count]}</button>"
+      #     end
+      #
+      #     def after_render
+      #       on('button', 'click') { set_state(count: state[:count] + 1) }
+      #     end
+      #   end
+      #
+      #   Counter.new.mount('#app')
+      class Component
+        attr_reader :state, :props, :el
+
+        # @param props [Hash] immutable inputs passed from the parent/caller
+        def initialize(props = {})
+          @props = props
+          @state = initial_state
+          @el = nil
+        end
+
+        # Override to provide the initial state hash. Defaults to empty.
+        def initial_state
+          {}
+        end
+
+        # Override to return the component's HTML as a String.
+        def render
+          ''
+        end
+
+        # Optional hook run after every render. Attach event listeners here
+        # (the DOM produced by #render only exists after rendering).
+        def after_render; end
+
+        # Mount the component into a DOM element.
+        # @param target [String, Native] a CSS selector or a native element
+        # @return [self]
+        def mount(target)
+          @el = resolve_el(target)
+          raise "OpalComponent#mount: target not found: #{target}" if `#{@el} == null`
+
+          do_render
+          self
+        end
+
+        # Merge +partial+ into the current state and re-render (if mounted).
+        # @param partial [Hash]
+        # @return [Hash] the new state
+        def set_state(partial)
+          unless partial.is_a?(Hash)
+            raise ArgumentError, "OpalComponent#set_state expects a Hash, got #{partial.class}"
+          end
+
+          @state = @state.merge(partial)
+          do_render if @el
+          @state
+        end
+
+        # querySelector scoped to this component's element.
+        def query(selector)
+          `#{@el}.querySelector(#{selector})`
+        end
+
+        # Attach an event listener to a descendant matched by +selector+.
+        # The block receives the native DOM event.
+        def on(selector, event, &block)
+          node = query(selector)
+          return if `#{node} == null`
+
+          `#{node}.addEventListener(#{event}, #{block})`
+        end
+
+        private
+
+        def do_render
+          `#{@el}.innerHTML = #{render}`
+          after_render
+        end
+
+        def resolve_el(target)
+          if target.is_a?(String)
+            `document.querySelector(#{target})`
+          else
+            target
+          end
+        end
+      end
+    end
+  end
+end
+
+# Friendly top-level alias (the base class users subclass).
+OpalComponent = OpalVite::Concerns::V1::Component

data/opal/opal_vite/concerns/v1.rb

@@ -12,3 +12,4 @@ require 'opal_vite/concerns/v1/base64_helpers'
 require 'opal_vite/concerns/v1/debug_helpers'
 require 'opal_vite/concerns/v1/action_cable_helpers'
 require 'opal_vite/concerns/v1/turbo_helpers'
+require 'opal_vite/concerns/v1/component'

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: opal-vite
 version: !ruby/object:Gem::Version
-  version: 0.3.12
+  version: 0.3.13
 platform: ruby
 authors:
 - stofu1234
@@ -122,6 +122,7 @@ files:
 - opal/opal_vite/concerns/v1.rb
 - opal/opal_vite/concerns/v1/action_cable_helpers.rb
 - opal/opal_vite/concerns/v1/base64_helpers.rb
+- opal/opal_vite/concerns/v1/component.rb
 - opal/opal_vite/concerns/v1/debug_helpers.rb
 - opal/opal_vite/concerns/v1/dom_helpers.rb
 - opal/opal_vite/concerns/v1/functional_component.rb