opal-vite 0.3.8 → 0.3.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8ca2d82a8203a375d1c96b0cb26e8510d603bba49a5bb72e0d866c0ef0080029
-  data.tar.gz: 3d30baaebef6c058c853d61abc772ada7e838ac7dc2371a5b918d55837a8b19c
+  metadata.gz: c5628cb3dc5134851617af485e740c1bea4450cd413afabcd998331337ea2441
+  data.tar.gz: 54dce35513cf4eae90c8365877d9147ecbd6dcd0f6ebfd3cc58dc333a94df403
 SHA512:
-  metadata.gz: 83a4ca03cf9804aa8d1cdc939c1e2eb9096704a94d68324292752a550d0376e17950e5dea6d2d6a34ef5035c0311b84fc1d6b33741951d691f64786ae230bd90
-  data.tar.gz: d32f860d30ba27ae3ce23b018cb3b40d53f258c8d438fd4c50a38fb38969dc12bda3c29b8f2bfa16095c9d335f9238c322ebe15936b52f9dea58b36faf2020f2
+  metadata.gz: f5173decf97b9880ed22b43b722951cb50f7c88ced4894929c926130f8edb99a322e663457ec324c376213c82c64da84032ab91aacb6e73e4a1e35ae96567c9e
+  data.tar.gz: 270053e539217d025395db5beb7eed0e4788176e68a849c251388a5c52be06c37db4af6b8f20e6ef60337865307d272bcdf91a8b4139ce125a53fbc6b8949cc2

data/lib/opal/vite/version.rb

@@ -1,5 +1,5 @@
 module Opal
   module Vite
-    VERSION = "0.3.8"
+    VERSION = "0.3.11"
   end
 end

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

@@ -0,0 +1,245 @@
+# backtick_javascript: true
+
+module OpalVite
+  module Concerns
+    module V1
+      # FunctionalComponent - Create React functional components with hooks in Ruby
+      #
+      # This module provides a DSL to create React functional components
+      # while hiding backtick JavaScript internally.
+      #
+      # @example Basic usage with useState
+      #   class CounterComponent
+      #     extend FunctionalComponent
+      #     extend ReactHelpers
+      #
+      #     def self.to_n
+      #       create_component do |hooks|
+      #         count, set_count = hooks.use_state(0)
+      #
+      #         div({ className: 'counter' },
+      #           button({ onClick: set_count.with { |c| c - 1 } }, '-'),
+      #           span(nil, count),
+      #           button({ onClick: set_count.with { |c| c + 1 } }, '+')
+      #         )
+      #       end
+      #     end
+      #   end
+      #
+      module FunctionalComponent
+        # Create a React functional component with hooks support
+        #
+        # @yield [hooks] Block that receives hooks helper and returns React element
+        # @yieldparam hooks [Hooks] Hooks helper object
+        # @return [Native] JavaScript function component
+        def create_component(&block)
+          r = react
+          hooks_class = Hooks
+
+          `(function(React, HooksClass) {
+            return function(props) {
+              var hooks = HooksClass.$new(React, props);
+              var element = #{block.call(`hooks`)};
+              return element;
+            };
+          })(#{r}, #{hooks_class})`
+        end
+
+        # Hooks helper class - provides React hooks as Ruby methods
+        class Hooks
+          def initialize(react, props)
+            @react = react
+            @props = Native(props) if props
+          end
+
+          attr_reader :props
+
+          # React useState hook
+          #
+          # @param initial_value [Object] Initial state value
+          # @return [Array] [current_value, setter] pair
+          #
+          # @example
+          #   count, set_count = hooks.use_state(0)
+          #   set_count.call(5)           # Set to specific value
+          #   set_count.with { |c| c + 1 } # Functional update
+          def use_state(initial_value)
+            react = @react
+            result = `#{react}.useState(#{initial_value})`
+            current = `#{result}[0]`
+            setter_fn = `#{result}[1]`
+
+            setter = StateSetter.new(setter_fn)
+            [current, setter]
+          end
+
+          # React useEffect hook
+          #
+          # @param dependencies [Array, nil] Dependency array (nil = run every render, [] = run once)
+          # @yield Effect callback
+          # @yieldreturn [Proc, nil] Optional cleanup function
+          #
+          # @example Run on mount only
+          #   hooks.use_effect([]) do
+          #     console_log("Mounted!")
+          #     -> { console_log("Unmounted!") }
+          #   end
+          #
+          # @example Run when count changes
+          #   hooks.use_effect([count]) do
+          #     console_log("Count changed to", count)
+          #   end
+          def use_effect(dependencies = nil, &block)
+            react = @react
+
+            effect_fn = `function() {
+              var result = #{block.call};
+              if (result && typeof result.$call === 'function') {
+                return function() { result.$call(); };
+              }
+              return result;
+            }`
+
+            if dependencies.nil?
+              `#{react}.useEffect(#{effect_fn})`
+            else
+              `#{react}.useEffect(#{effect_fn}, #{dependencies.to_a})`
+            end
+          end
+
+          # React useMemo hook
+          #
+          # @param dependencies [Array] Dependency array
+          # @yield Factory function
+          # @return [Object] Memoized value
+          #
+          # @example
+          #   expensive_value = hooks.use_memo([input]) do
+          #     compute_expensive(input)
+          #   end
+          def use_memo(dependencies, &block)
+            react = @react
+            factory_fn = `function() { return #{block.call}; }`
+            `#{react}.useMemo(#{factory_fn}, #{dependencies.to_a})`
+          end
+
+          # React useCallback hook
+          #
+          # @param dependencies [Array] Dependency array
+          # @yield Callback function
+          # @return [Native] Memoized callback
+          #
+          # @example
+          #   handle_click = hooks.use_callback([item_id]) do
+          #     on_item_click(item_id)
+          #   end
+          def use_callback(dependencies, &block)
+            react = @react
+            callback_fn = `function() { return #{block.call}; }`
+            `#{react}.useCallback(#{callback_fn}, #{dependencies.to_a})`
+          end
+
+          # React useRef hook
+          #
+          # @param initial_value [Object] Initial ref value
+          # @return [Native] Ref object with .current property
+          #
+          # @example
+          #   input_ref = hooks.use_ref(nil)
+          #   # In render: input({ ref: input_ref })
+          #   # Later: input_ref.current.focus()
+          def use_ref(initial_value = nil)
+            react = @react
+            Native(`#{react}.useRef(#{initial_value})`)
+          end
+
+          # React useReducer hook
+          #
+          # @param reducer [Proc] Reducer function (state, action) -> new_state
+          # @param initial_state [Object] Initial state
+          # @return [Array] [state, dispatch] pair
+          #
+          # @example
+          #   reducer = ->(state, action) {
+          #     case action[:type]
+          #     when 'increment' then { count: state[:count] + 1 }
+          #     when 'decrement' then { count: state[:count] - 1 }
+          #     else state
+          #     end
+          #   }
+          #   state, dispatch = hooks.use_reducer(reducer, { count: 0 })
+          #   dispatch.call({ type: 'increment' })
+          def use_reducer(reducer, initial_state)
+            react = @react
+
+            js_reducer = `function(state, action) {
+              return #{reducer.call(`state`, `action`)};
+            }`
+
+            result = `#{react}.useReducer(#{js_reducer}, #{initial_state.to_n})`
+            state = Native(`#{result}[0]`)
+            dispatch_fn = `#{result}[1]`
+
+            dispatch = ->(action) { `#{dispatch_fn}(#{action.to_n})` }
+            [state, dispatch]
+          end
+
+          # React useContext hook
+          #
+          # @param context [Native] React context object
+          # @return [Object] Current context value
+          def use_context(context)
+            react = @react
+            `#{react}.useContext(#{context})`
+          end
+        end
+
+        # State setter wrapper - provides functional update support
+        class StateSetter
+          def initialize(setter_fn)
+            @setter_fn = setter_fn
+          end
+
+          # Set state to a specific value
+          #
+          # @param value [Object] New state value
+          def call(value)
+            `#{@setter_fn}(#{value})`
+          end
+
+          # Functional state update
+          # Returns a callback function for use in onClick etc.
+          #
+          # @yield [current] Block receives current value and returns new value
+          # @return [Native] JavaScript callback function
+          #
+          # @example
+          #   button({ onClick: set_count.with { |c| c + 1 } }, '+')
+          def with(&block)
+            setter_fn = @setter_fn
+            `function() {
+              #{setter_fn}(function(current) {
+                return #{block.call(`current`)};
+              });
+            }`
+          end
+
+          # Create a callback that sets to a specific value
+          #
+          # @param value [Object] Value to set
+          # @return [Native] JavaScript callback function
+          #
+          # @example
+          #   button({ onClick: set_count.to(0) }, 'Reset')
+          def to(value)
+            setter_fn = @setter_fn
+            `function() { #{setter_fn}(#{value}); }`
+          end
+        end
+      end
+    end
+  end
+end
+
+# Alias for easy access
+FunctionalComponent = OpalVite::Concerns::V1::FunctionalComponent

data/opal/opal_vite/concerns/v1.rb

@@ -6,6 +6,7 @@ require 'opal_vite/concerns/v1/storable'
 require 'opal_vite/concerns/v1/stimulus_helpers'
 require 'opal_vite/concerns/v1/vue_helpers'
 require 'opal_vite/concerns/v1/react_helpers'
+require 'opal_vite/concerns/v1/functional_component'
 require 'opal_vite/concerns/v1/uri_helpers'
 require 'opal_vite/concerns/v1/base64_helpers'
 require 'opal_vite/concerns/v1/debug_helpers'

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: opal-vite
 version: !ruby/object:Gem::Version
-  version: 0.3.8
+  version: 0.3.11
 platform: ruby
 authors:
 - stofu1234
@@ -124,6 +124,7 @@ files:
 - opal/opal_vite/concerns/v1/base64_helpers.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
 - opal/opal_vite/concerns/v1/js_proxy_ex.rb
 - opal/opal_vite/concerns/v1/react_helpers.rb
 - opal/opal_vite/concerns/v1/stimulus_helpers.rb