ruby_wasm_ui 0.8.1

data/packages/npm-packages/runtime/src/index.js

@@ -0,0 +1,37 @@
+const userDefinedRubyScript = document.querySelector(
+  "script[type='text/ruby']"
+);
+
+const scriptElement = document.createElement("script");
+scriptElement.src =
+  "https://cdn.jsdelivr.net/npm/@ruby/3.4-wasm-wasi@latest/dist/browser.script.iife.js";
+scriptElement.setAttribute("defer", "");
+userDefinedRubyScript.before(scriptElement);
+
+function loadRubyScript(filePath) {
+  let baseUrl;
+  if (window.RUBY_WASM_UI_ENV === "production") {
+    baseUrl = "https://unpkg.com/ruby-wasm-ui@latest/dist";
+  } else {
+    baseUrl = "../../../../packages/npm-packages/runtime/dist";
+  }
+  let rubyScriptElement = document.createElement("script");
+  rubyScriptElement.type = "text/ruby";
+  rubyScriptElement.charset = "utf-8";
+  rubyScriptElement.src = `${baseUrl}/${filePath}`;
+  rubyScriptElement.setAttribute("defer", "");
+  userDefinedRubyScript.before(rubyScriptElement);
+}
+
+// Load ruby_wasm_ui.rb
+loadRubyScript("ruby_wasm_ui.rb");
+
+// Load all Ruby files in ruby_wasm_ui directory
+const rubyFiles = window.RUBY_WASM_UI_FILES;
+if (rubyFiles === undefined) {
+  throw new Error(
+    "RUBY_WASM_UI_FILES is not defined. This file should be built with rollup."
+  );
+}
+
+rubyFiles.forEach((file) => loadRubyScript(file));

data/packages/npm-packages/runtime/src/ruby_wasm_ui/app.rb

@@ -0,0 +1,53 @@
+module RubyWasmUi
+  class App
+    # @param root_component [Class]
+    # @param props [Hash]
+    # @return [App]
+    def self.create(root_component, props = {})
+      new(root_component, props)
+    end
+
+    # @param root_component [Class]
+    # @param props [Hash]
+    def initialize(root_component, props)
+      @root_component = root_component
+      @props = props
+      @parent_el = nil
+      @is_mounted = false
+      @vdom = nil
+    end
+
+    # @param parent_el [Element]
+    # @return [void]
+    def mount(parent_el)
+      if @is_mounted
+        raise "The application is already mounted"
+      end
+
+      @parent_el = parent_el
+      @vdom = RubyWasmUi::Vdom.h(@root_component, @props)
+      RubyWasmUi::Dom::MountDom.execute(@vdom, @parent_el)
+
+      @is_mounted = true
+    end
+
+    # @return [void]
+    def unmount
+      unless @is_mounted
+        raise "The application is not mounted"
+      end
+
+      RubyWasmUi::Dom::DestroyDom.execute(@vdom)
+      reset
+    end
+
+    private
+
+    # @return [void]
+    def reset
+      @parent_el = nil
+      @is_mounted = false
+      @vdom = nil
+    end
+  end
+end

data/packages/npm-packages/runtime/src/ruby_wasm_ui/component.rb

@@ -0,0 +1,215 @@
+module RubyWasmUi
+
+  def self.empty_proc
+    -> { }
+  end
+
+  # Define a new component class
+  # @param template [Proc] The template function
+  # @param state [Proc, nil] The state function
+  # @param methods [Hash] Additional methods to add to the component
+  # @return [Class] The new component class
+  def self.define_component(template:, state: nil, on_mounted: empty_proc, on_unmounted: empty_proc, methods: {})
+    Class.new(Component) do
+      self.class_variable_set(:@@state, state)
+      self.class_variable_set(:@@template, template)
+      self.class_variable_set(:@@on_mounted, on_mounted)
+      self.class_variable_set(:@@on_unmounted, on_unmounted)
+
+      # Add methods to the component
+      methods.each do |method_name, method_proc|
+        # Check if method already exists
+        if method_defined?(method_name) || private_method_defined?(method_name)
+          raise "Method \"#{method_name}()\" already exists in the component."
+        end
+
+        # Define the method dynamically
+        define_method(method_name, method_proc)
+      end
+    end
+  end
+
+  class Component
+    def initialize(props = {}, event_handlers = {}, parent_component = nil)
+      @props = props
+      @is_mounted = false
+      @vdom = nil
+      @host_el = nil
+      @state = initialize_state
+      @template = self.class.class_variable_get(:@@template)
+      @event_handlers = event_handlers
+      @parent_component = parent_component
+      @dispatcher = RubyWasmUi::Dispatcher.new
+      @subscriptions = []
+    end
+
+    attr_reader :state, :props
+
+    def on_mounted
+      on_mounted_proc = self.class.class_variable_get(:@@on_mounted)
+      if on_mounted_proc.arity == 0
+        instance_exec(&on_mounted_proc)
+      else
+        on_mounted_proc.call(self)
+      end
+    end
+
+    def on_unmounted
+      on_unmounted_proc = self.class.class_variable_get(:@@on_unmounted)
+      if on_unmounted_proc.arity == 0
+        instance_exec(&on_unmounted_proc)
+      else
+        on_unmounted_proc.call(self)
+      end
+    end
+
+    # Get VDOM elements
+    # @return [Array<JS::Object>]
+    def elements
+      return [] if @vdom.nil?
+
+      if @vdom.type == RubyWasmUi::Vdom::DOM_TYPES[:FRAGMENT]
+        RubyWasmUi::Vdom.extract_children(@vdom).flat_map do |child|
+          if child.type == RubyWasmUi::Vdom::DOM_TYPES[:COMPONENT]
+            child.component.elements
+          else
+            [child.el]
+          end
+        end
+      else
+        [@vdom.el]
+      end
+    end
+
+    # Get the first element
+    # @return [JS::Object, nil]
+    def first_element
+      elements[0]
+    end
+
+    # Get offset within host element
+    # @return [Integer]
+    def offset
+      if @vdom.type == RubyWasmUi::Vdom::DOM_TYPES[:FRAGMENT]
+        children = @host_el[:children].to_a
+        children.index(first_element) || 0
+      else
+        0
+      end
+    end
+
+    # Update state
+    # @param new_state [Hash] New state
+    def update_state(new_state)
+      merged_state = @state.merge(new_state)
+      return if @state == merged_state
+
+      @state = merged_state
+      patch
+    end
+
+    # Update props
+    # @param new_props [Hash] New props
+    def update_props(new_props)
+      merged_props = @props.merge(new_props)
+      return if @props == merged_props
+
+      @props = merged_props
+      patch
+    end
+
+    # @return [RubyWasmUi::Vdom]
+    def template
+      if @template.arity == 0
+        instance_exec(&@template)
+      else
+        @template.call(self)
+      end
+    end
+
+    # Mount component
+    # @param host_el [JS::Object] Host element
+    # @param index [Integer, nil] Insert position
+    def mount(host_el, index = nil)
+      raise "Component is already mounted" if @is_mounted
+
+      @vdom = template
+      RubyWasmUi::Dom::MountDom.execute(@vdom, host_el, index, self)
+      wire_event_handlers
+
+      @host_el = host_el
+      @is_mounted = true
+    end
+
+    # Unmount component
+    def unmount
+      raise "Component is not mounted" unless @is_mounted
+
+      RubyWasmUi::Dom::DestroyDom.execute(@vdom)
+
+      # Safely handle subscriptions, filtering out nil values
+      @subscriptions.compact.each { |unsubscription| unsubscription.call }
+
+      @vdom = nil
+      @host_el = nil
+      @is_mounted = false
+      @subscriptions = []
+    end
+
+    # Emit an event
+    # @param event_name [String] Event name
+    # @param payload [Object, nil] Event payload
+    def emit(event_name, payload = nil)
+      @dispatcher.dispatch(event_name, payload) if @dispatcher
+    end
+
+    private
+
+    # Patch VDOM
+    def patch
+      raise "Component is not mounted" unless @is_mounted
+
+      vdom = template
+      @vdom = RubyWasmUi::Dom::PatchDom.execute(@vdom, vdom, @host_el, self)
+    end
+
+    # Wire event handlers
+    def wire_event_handlers
+      @subscriptions = @event_handlers.map do |event_name, handler|
+        wire_event_handler(event_name, handler)
+      end
+    end
+
+    # Wire a single event handler
+    # @param event_name [String] Event name
+    # @param handler [Proc] Event handler
+    # @return [Object] Subscription object
+    def wire_event_handler(event_name, handler)
+      handler_proc = if @parent_component && handler.arity == 1
+        ->(payload) { @parent_component.instance_exec(payload, &handler) }
+      elsif @parent_component && handler.arity == 0
+        ->(payload) { @parent_component.instance_exec(&handler) }
+      elsif handler.arity == 1
+        ->(payload) { handler.call(payload) }
+      else
+        ->(payload) { handler.call }
+      end
+
+      subscription = @dispatcher.subscribe(event_name, handler_proc)
+
+      # Ensure we always return a callable unsubscription function
+      subscription || -> { puts "Warning: No-op unsubscription for #{event_name}" }
+    end
+
+    # Initialize component state based on state proc
+    # @return [Hash] Initial state
+    def initialize_state
+      state_proc = self.class.class_variable_get(:@@state)
+      if state_proc
+        state_proc.arity == 0 ? state_proc.call : state_proc.call(@props)
+      else
+        {}
+      end
+    end
+  end
+end

data/packages/npm-packages/runtime/src/ruby_wasm_ui/dispatcher.rb

@@ -0,0 +1,46 @@
+module RubyWasmUi
+  class Dispatcher
+    def initialize
+      @subs = {}
+      @after_handlers = []
+    end
+
+    # @param command_name [String]
+    def subscribe(command_name, handler)
+      @subs[command_name] ||= []
+      handlers = @subs[command_name]
+
+      return -> {} if handlers.include?(handler)
+
+      handlers << handler
+
+      -> {
+        idx = handlers.index(handler)
+        handlers.delete_at(idx) if idx
+      }
+    end
+
+    # @param handler [Proc]
+    def after_every_command(handler)
+      @after_handlers << handler
+
+      -> {
+        idx = @after_handlers.index(handler)
+        @after_handlers.delete_at(idx) if idx
+      }
+    end
+
+    # @param command_name [String]
+    # @param payload [Object]
+    def dispatch(command_name, payload)
+      command_name_sym = command_name.to_sym
+      if @subs.key?(command_name_sym)
+        @subs[command_name_sym].each { |handler| handler.call(payload) }
+      else
+        warn "No handlers for command: #{command_name}"
+      end
+
+      @after_handlers.each(&:call)
+    end
+  end
+end

data/packages/npm-packages/runtime/src/ruby_wasm_ui/dom/attributes.rb

@@ -0,0 +1,105 @@
+module RubyWasmUi
+  module Dom
+    module Attributes
+      module_function
+
+      # @param element [JS::Object]
+      # @param attrs [Hash]
+      def set_attributes(element, attrs)
+        class_name = attrs[:class]
+        style = attrs[:style]
+        other_attrs = attrs.reject { |key, _| [:class, :style].include?(key) }
+
+        if class_name
+          set_class(element, class_name)
+        end
+
+        if style
+          parse_style(style).each do |name, value|
+            set_style(element, name, value)
+          end
+        end
+
+        other_attrs.each do |name, value|
+          set_attribute(element, name, value)
+        end
+      end
+
+      # @param element [JS::Object]
+      # @param class_name [String, Array]
+      def set_class(element, class_name)
+        element[:className] = ""
+
+        case class_name
+        when String
+          element[:className] = class_name
+        when Array
+          element[:classList].add(*class_name)
+        end
+      end
+
+      # @param element [JS::Object]
+      # @param name [String, Symbol]
+      # @param value [String]
+      def set_style(element, name, value)
+        element[:style][name] = value
+      end
+
+      # @param element [JS::Object]
+      # @param name [String, Symbol]
+      def remove_style(element, name)
+        element[:style][name] = nil
+      end
+
+      # @param element [JS::Object]
+      # @param name [String, Symbol]
+      # @param value [String, nil]
+      def set_attribute(element, name, value)
+        if value.nil?
+          remove_attribute(element, name)
+        elsif name.to_s.start_with?("data-")
+          element.setAttribute(name, value)
+        elsif name.to_s == "for"
+          element[:htmlFor] = value
+        else
+          element[name] = value
+        end
+      end
+
+      # @param element [JS::Object]
+      # @param name [String, Symbol]
+      def remove_attribute(element, name)
+        element[name] = nil
+        element.removeAttribute(name)
+      end
+
+      # Parse CSS style string into hash
+      # @param style_string [String] CSS style string like "color: red; margin: 10px;"
+      # @return [Hash] Hash with camelCase property names as keys
+      def parse_style(style)
+        return {} if style.nil?
+
+        if style.is_a?(Hash)
+          return style
+        end
+
+        result = {}
+        style.split(';').each do |style_rule|
+          next if style_rule.strip.empty?
+
+          property, value = style_rule.split(':', 2)
+          next unless property && value
+
+          property = property.strip
+          value = value.strip
+
+          # Convert kebab-case to camelCase for JavaScript style properties
+          camel_case_property = property.gsub(/-([a-z])/) { $1.upcase }
+
+          result[camel_case_property] = value
+        end
+        result
+      end
+    end
+  end
+end

data/packages/npm-packages/runtime/src/ruby_wasm_ui/dom/destroy_dom.rb

@@ -0,0 +1,63 @@
+module RubyWasmUi
+  module Dom
+    module DestroyDom
+      # @param vdom [RubyWasmUi::Vdom]
+      def execute(vdom)
+        case vdom.type
+        when RubyWasmUi::Vdom::DOM_TYPES[:TEXT]
+          remove_text_node(vdom)
+        when RubyWasmUi::Vdom::DOM_TYPES[:ELEMENT]
+          remove_element_node(vdom)
+        when RubyWasmUi::Vdom::DOM_TYPES[:FRAGMENT]
+          remove_fragment_nodes(vdom)
+        when RubyWasmUi::Vdom::DOM_TYPES[:COMPONENT]
+          remove_component_node(vdom)
+        else
+          raise "Can't destroy DOM of type: #{vdom.type}"
+        end
+
+        vdom.el = nil
+      end
+
+      module_function :execute
+
+      private
+
+      # @param vdom [RubyWasmUi::Vdom]
+      # @return [void]
+      def self.remove_text_node(vdom)
+        vdom.el&.remove
+      end
+
+      # @param vdom [RubyWasmUi::Vdom]
+      # @return [void]
+      def self.remove_element_node(vdom)
+        el = vdom.el
+        children = vdom.children
+        listeners = vdom.listeners
+
+        el&.remove
+        children&.each { |child| execute(child) }
+
+        if listeners
+          Events.remove_event_listeners(listeners, el)
+          vdom.listeners = nil
+        end
+      end
+
+      # @param vdom [RubyWasmUi::Vdom]
+      # @return [void]
+      def self.remove_fragment_nodes(vdom)
+        children = vdom.children
+        children&.each { |child| execute(child) }
+      end
+
+      # @param vdom [RubyWasmUi::Vdom]
+      # @return [void]
+      def self.remove_component_node(vdom)
+        vdom.component.unmount
+        RubyWasmUi::Dom::Scheduler.enqueue_job(-> { vdom.component.on_unmounted })
+      end
+    end
+  end
+end

data/packages/npm-packages/runtime/src/ruby_wasm_ui/dom/events.rb

@@ -0,0 +1,40 @@
+module RubyWasmUi
+  module Dom
+    module Events
+      module_function
+
+      # @param event_name [String]
+      # @param handler [Proc]
+      # @param element [JS::Object]
+      # @param host_component [Object, nil]
+      # @return [Proc]
+      def add_event_listener(event_name, handler, element, host_component = nil)
+        if host_component
+          # Same as JavaScript's handler.apply(hostComponent, arguments)
+          call_handler = JS.try_convert(->(event) {
+            handler.arity == 0 ? host_component.instance_exec(&handler) : host_component.instance_exec(event, &handler)
+          })
+        else
+          call_handler = JS.try_convert(->(event) { handler.arity == 0 ? handler.call : handler.call(event) })
+        end
+        element.call(:addEventListener, event_name.to_s, call_handler)
+        call_handler
+      end
+
+      def add_event_listeners(element, listeners = {}, host_component = nil)
+        listeners.each do |event_name, handler|
+          add_event_listener(event_name, handler, element, host_component)
+        end
+        listeners
+      end
+
+      # @param listeners [Hash]
+      # @param element [JS::Object]
+      def remove_event_listeners(listeners = {}, element)
+        listeners.each do |event_name, handler|
+          element.call(:removeEventListener, event_name.to_s, handler)
+        end
+      end
+    end
+  end
+end

data/packages/npm-packages/runtime/src/ruby_wasm_ui/dom/mount_dom.rb

@@ -0,0 +1,108 @@
+module RubyWasmUi
+  module Dom
+    module MountDom
+      # @param vdom [RubyWasmUi::Vdom]
+      # @param parent_el [JS::Object]
+      # @param index [Integer, nil] Index position to insert at
+      # @param hostComponent [RubyWasmUi::Component, nil] Host component
+      def execute(vdom, parent_el, index = nil, hostComponent = nil)
+        case vdom.type
+        when RubyWasmUi::Vdom::DOM_TYPES[:TEXT]
+          create_text_node(vdom, parent_el, index)
+        when RubyWasmUi::Vdom::DOM_TYPES[:ELEMENT]
+          create_element_node(vdom, parent_el, index, hostComponent)
+        when RubyWasmUi::Vdom::DOM_TYPES[:FRAGMENT]
+          create_fragment_nodes(vdom, parent_el, index, hostComponent)
+        when RubyWasmUi::Vdom::DOM_TYPES[:COMPONENT]
+          create_component_node(vdom, parent_el, index, hostComponent)
+          RubyWasmUi::Dom::Scheduler.enqueue_job(-> { vdom.component.on_mounted })
+        else
+          raise "Can't mount DOM of type: #{vdom.type}"
+        end
+      end
+
+      # @param el [JS::Object] Element to insert
+      # @param parent_el [JS::Object] Parent element
+      # @param index [Integer, nil] Index position to insert at
+      def insert(el, parent_el, index)
+        # If index is nil or undefined, simply append to the end
+        if index.nil?
+          parent_el.append(el)
+          return
+        end
+
+        # If index is negative, raise an error
+        if index < 0
+          raise "Index must be a positive integer, got #{index}"
+        end
+
+        children = parent_el[:childNodes]
+
+        # If index is greater than or equal to the number of children, append to the end
+        if index >= children[:length].to_i # to_i is necessary because length is a JS::Number
+          parent_el.append(el)
+        else
+          # Insert at the specified index position
+          parent_el.insertBefore(el, children[index])
+        end
+      end
+
+      module_function :execute, :insert
+
+      private
+
+      def self.create_text_node(vdom, parent_el, index)
+        text_node = JS.global[:document].createTextNode(vdom.value)
+        vdom.el = text_node
+        insert(text_node, parent_el, index)
+      end
+
+      def self.create_element_node(vdom, parent_el, index, hostComponent)
+        element = JS.global[:document].createElement(vdom.tag)
+        add_props(element, vdom, hostComponent)
+        vdom.el = element
+
+        vdom.children&.each do |child|
+          execute(child, element, nil, hostComponent)
+        end
+
+        insert(element, parent_el, index)
+      end
+
+      # @param el [JS::Object] Element to add props to
+      # @param vdom [RubyWasmUi::Vdom] VDOM node
+      # @param hostComponent [RubyWasmUi::Component, nil] Host component
+      def self.add_props(el, vdom, hostComponent)
+        extracted = RubyWasmUi::Utils::Props.extract_props_and_events(vdom)
+        events = extracted[:events]
+        attrs = extracted[:props]
+
+        vdom.listeners = Events.add_event_listeners(el, events, hostComponent) if events
+        RubyWasmUi::Dom::Attributes.set_attributes(el, attrs) if attrs.any?
+      end
+
+      def self.create_fragment_nodes(vdom, parent_el, index, hostComponent)
+        vdom.el = parent_el
+
+        vdom.children&.each_with_index do |child, i|
+          execute(child, parent_el, index ? index + i : nil, hostComponent)
+        end
+      end
+
+      # @param vdom [RubyWasmUi::Vdom]
+      # @param parent_el [JS::Object] Parent element
+      # @param index [Integer, nil] Index position to insert at
+      # @param host_component [RubyWasmUi::Component, nil] Host component
+      # @return [void]
+      def self.create_component_node(vdom, parent_el, index, host_component)
+        component_class = vdom.tag
+        extracted = RubyWasmUi::Utils::Props.extract_props_and_events(vdom)
+        component = component_class.new(extracted[:props], extracted[:events], host_component)
+
+        component.mount(parent_el, index)
+        vdom.component = component
+        vdom.el = component.first_element
+      end
+    end
+  end
+end