ruby_wasm_ui 0.8.1

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

@@ -0,0 +1,237 @@
+module RubyWasmUi
+  module Dom
+    module PatchDom
+      # @param old_vdom [RubyWasmUi::Vdom]
+      # @param new_vdom [RubyWasmUi::Vdom]
+      # @param parent_el [JS::Object]
+      # @param host_component [RubyWasmUi::Component, nil]
+      # @return [RubyWasmUi::Vdom]
+      def execute(old_vdom, new_vdom, parent_el, host_component = nil)
+        if !NodesEqual.equal?(old_vdom, new_vdom)
+          index = find_index_in_parent(parent_el, old_vdom.el)
+          RubyWasmUi::Dom::DestroyDom.execute(old_vdom)
+          RubyWasmUi::Dom::MountDom.execute(new_vdom, parent_el, index, host_component)
+
+          return new_vdom
+        end
+
+        # when old_vdom and new_vdom is same type
+        new_vdom.el = old_vdom.el
+
+        case new_vdom.type
+        when RubyWasmUi::Vdom::DOM_TYPES[:TEXT]
+          patch_text(old_vdom, new_vdom)
+          return new_vdom # return early and skip children patch
+        when RubyWasmUi::Vdom::DOM_TYPES[:ELEMENT]
+          patch_element(old_vdom, new_vdom, host_component)
+        when RubyWasmUi::Vdom::DOM_TYPES[:COMPONENT]
+          patch_component(old_vdom, new_vdom)
+        else
+          # noop
+        end
+
+        patch_children(old_vdom, new_vdom, host_component)
+
+        new_vdom
+      end
+
+      module_function :execute
+
+      private
+
+      # @param parent_el [JS::Object]
+      # @param el [JS::Object]
+      # @return [Integer, nil]
+      def self.find_index_in_parent(parent_el, el)
+        index = parent_el[:childNodes].to_a.index(el)
+        return nil if index < 0
+
+        index
+      end
+
+      # @param old_vdom [RubyWasmUi::Vdom]
+      # @param new_vdom [RubyWasmUi::Vdom]
+      def self.patch_text(old_vdom, new_vdom)
+        el = old_vdom.el
+        old_text = old_vdom.value
+        new_text = new_vdom.value
+
+        if old_text != new_text
+          el.nodeValue = new_text
+        end
+      end
+
+      # @param old_vdom [RubyWasmUi::Vdom]
+      # @param new_vdom [RubyWasmUi::Vdom]
+      # @param host_component [RubyWasmUi::Component, nil]
+      def self.patch_element(old_vdom, new_vdom, host_component)
+        el = old_vdom.el
+
+        # Extract attributes from oldVdom.props (equivalent to JavaScript destructuring)
+        old_props = old_vdom.props || {}
+        old_class = old_props[:class]
+        old_style = old_props[:style]
+        old_events = old_props[:on]
+        old_attrs = old_props.reject { |key, _| [:class, :style, :on].include?(key) }
+
+        # Extract attributes from newVdom.props
+        new_props = new_vdom.props || {}
+        new_class = new_props[:class]
+        new_style = new_props[:style]
+        new_events = new_props[:on]
+        new_attrs = new_props.reject { |key, _| [:class, :style, :on].include?(key) }
+
+        # Get listeners from oldVdom
+        old_listeners = old_vdom.listeners
+
+        patch_attrs(el, old_attrs, new_attrs)
+        patch_classes(el, old_class, new_class)
+        patch_styles(el, old_style, new_style)
+        new_vdom.listeners = patch_events(el, old_listeners, old_events, new_events, host_component)
+      end
+
+      # @param el [JS::Object]
+      # @param old_attrs [Hash]
+      # @param new_attrs [Hash]
+      def self.patch_attrs(el, old_attrs, new_attrs)
+        diff = RubyWasmUi::Utils::Objects.diff(old_attrs, new_attrs)
+
+        diff[:removed].each do |key|
+          RubyWasmUi::Dom::Attributes.remove_attribute(el, key)
+        end
+
+        (diff[:added] + diff[:updated]).each do |key|
+          RubyWasmUi::Dom::Attributes.set_attribute(el, key, new_attrs[key])
+        end
+      end
+
+      # @param el [JS::Object]
+      # @param old_class [String, Array]
+      # @param new_class [String, Array]
+      def self.patch_classes(el, old_class, new_class)
+        old_classes = to_class_list(old_class)
+        new_classes = to_class_list(new_class)
+
+        diff = RubyWasmUi::Utils::Arrays.diff(old_classes, new_classes)
+
+        diff[:removed].each do |key|
+          el[:classList].remove(key)
+        end
+
+        diff[:added].each do |key|
+          el[:classList].add(key)
+        end
+      end
+
+      # @param el [JS::Object]
+      # @param old_style [Hash, String]
+      # @param new_style [Hash, String]
+      def self.patch_styles(el, old_style = {}, new_style = {})
+        parsed_old_style = RubyWasmUi::Dom::Attributes.parse_style(old_style)
+        parsed_new_style = RubyWasmUi::Dom::Attributes.parse_style(new_style)
+        diff = RubyWasmUi::Utils::Objects.diff(parsed_old_style || {}, parsed_new_style || {})
+
+        diff[:removed].each do |key|
+          RubyWasmUi::Dom::Attributes.remove_style(el, key)
+        end
+
+        (diff[:added] + diff[:updated]).each do |key|
+          RubyWasmUi::Dom::Attributes.set_style(el, key, new_style[key])
+        end
+      end
+
+      # @param el [JS::Object]
+      # @param old_listeners [Hash]
+      # @param old_events [Hash]
+      # @param new_events [Hash]
+      # @return [Hash]
+      def self.patch_events(el, old_listeners = {}, old_events = {}, new_events = {}, host_component = nil)
+        diff = RubyWasmUi::Utils::Objects.diff(old_events || {}, new_events || {})
+
+        # Remove old event listeners for removed and updated events
+        (diff[:removed] + diff[:updated]).each do |event_name|
+          if old_listeners[event_name]
+            el.call(:removeEventListener, event_name.to_s, old_listeners[event_name])
+          end
+        end
+
+        added_listeners = {}
+
+        # Add new event listeners for added and updated events
+        (diff[:added] + diff[:updated]).each do |event_name|
+          listener = RubyWasmUi::Dom::Events.add_event_listener(
+            event_name,
+            new_events[event_name],
+            el,
+            host_component
+          )
+          added_listeners[event_name] = listener
+        end
+
+        added_listeners
+      end
+
+      # @param old_vdom [RubyWasmUi::Vdom]
+      # @param new_vdom [RubyWasmUi::Vdom]
+      # @param host_component [RubyWasmUi::Component, nil]
+      # @return [void]
+      def self.patch_children(old_vdom, new_vdom, host_component)
+        old_children = RubyWasmUi::Vdom.extract_children(old_vdom)
+        new_children = RubyWasmUi::Vdom.extract_children(new_vdom)
+        parent_el = old_vdom.el
+
+        equal_proc = ->(a, b) { NodesEqual.equal?(a, b) }
+
+        diff_seq = RubyWasmUi::Utils::Arrays.diff_sequence(old_children, new_children, equal_proc)
+        offset = host_component&.offset || 0
+
+        diff_seq.each do |operation|
+          original_index = operation[:original_index]
+          index = operation[:index]
+          item = operation[:item]
+
+          case operation[:op]
+          when 'add'
+            RubyWasmUi::Dom::MountDom.execute(item, parent_el, index + offset, host_component)
+          when 'remove'
+            RubyWasmUi::Dom::DestroyDom.execute(item)
+          when 'move'
+            old_child = old_children[original_index]
+            new_child = new_children[index]
+            el = old_child.el
+            el_at_target_index = parent_el[:childNodes][index + offset]
+
+            parent_el.insertBefore(el, el_at_target_index)
+            RubyWasmUi::Dom::PatchDom.execute(old_child, new_child, parent_el, host_component)
+          when 'noop'
+            RubyWasmUi::Dom::PatchDom.execute(old_children[original_index], new_children[index], parent_el, host_component)
+          end
+        end
+      end
+
+      # @param classes [String, Array]
+      # @return [Array]
+      def self.to_class_list(classes = '')
+        if classes.is_a?(Array)
+          classes.select { |c| RubyWasmUi::Utils::Strings.is_not_blank_or_empty_string(c) }
+        else
+          # string case
+          classes.to_s.split(/\s+/).select { |c| RubyWasmUi::Utils::Strings.is_not_empty_string(c) }
+        end
+      end
+
+      # @param old_vdom [RubyWasmUi::Vdom]
+      # @param new_vdom [RubyWasmUi::Vdom]
+      # @return [void]
+      def self.patch_component(old_vdom, new_vdom)
+        component = old_vdom.component
+        props = RubyWasmUi::Utils::Props.extract_props_and_events(new_vdom)[:props]
+
+        component.update_props(props)
+
+        new_vdom.component = component
+        new_vdom.el = component.first_element
+      end
+    end
+  end
+end

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

@@ -0,0 +1,51 @@
+module RubyWasmUi
+  module Dom
+    module Scheduler
+      class << self
+        # @return [Boolean] Flag indicating if a job processing is scheduled
+        attr_accessor :scheduled
+
+        # @return [Array] Array of jobs to be processed
+        attr_accessor :jobs
+
+        # Initialize class variables
+        def initialize_scheduler
+          @scheduled = false
+          @jobs = []
+        end
+
+        # Enqueues a job to be processed
+        # @param job [Proc] The job to be executed
+        # @return [void]
+        def enqueue_job(job)
+          initialize_scheduler if @jobs.nil?
+          @jobs.push(job)
+          schedule_update
+        end
+
+        private
+
+        # Schedules an update if not already scheduled
+        # @return [void]
+        def schedule_update
+          return if @scheduled
+
+          @scheduled = true
+          # Using JS.global to access queueMicrotask
+          JS.global.queueMicrotask(-> { process_jobs })
+        end
+
+        # Processes all jobs in the queue
+        # @return [void]
+        def process_jobs
+          while @jobs.any?
+            job = @jobs.shift
+            job.call
+          end
+
+          @scheduled = false
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+require_relative "dom/attributes"
+require_relative "dom/destroy_dom"
+require_relative "dom/events"
+require_relative "dom/mount_dom"
+require_relative "dom/patch_dom"
+require_relative "dom/scheduler"
+
+module RubyWasmUi
+  module Dom
+  end
+end

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

@@ -0,0 +1,45 @@
+module RubyWasmUi
+  module NodesEqual
+    module_function
+
+    # @param node_one [RubyWasmUi::Vdom]
+    # @param node_two [RubyWasmUi::Vdom]
+    # @return [Boolean]
+    def equal?(node_one, node_two)
+      if node_one.type != node_two.type
+        return false
+      end
+
+      if node_one.type == RubyWasmUi::Vdom::DOM_TYPES[:ELEMENT]
+        tag_one = node_one.tag
+        key_one = node_one.props[:key]
+        tag_two = node_two.tag
+        key_two = node_two.props[:key]
+
+        return tag_one == tag_two && key_one == key_two
+      end
+
+      if node_one.type == RubyWasmUi::Vdom::DOM_TYPES[:COMPONENT]
+        component_one = node_one.tag
+        key_one = node_one.props[:key]
+        component_two = node_two.tag
+        key_two = node_two.props[:key]
+
+        return component_one == component_two && key_one == key_two
+      end
+
+      if node_one.type == RubyWasmUi::Vdom::DOM_TYPES[:TEXT]
+        value_one = node_one.value
+        value_two = node_two.value
+
+        return value_one == value_two
+      end
+
+      if node_one.type == RubyWasmUi::Vdom::DOM_TYPES[:FRAGMENT]
+        return true
+      end
+
+      false
+    end
+  end
+end

data/packages/npm-packages/runtime/src/ruby_wasm_ui/template/build_conditional_group.rb

@@ -0,0 +1,150 @@
+# frozen_string_literal: true
+
+module RubyWasmUi
+  module Template
+    module BuildConditionalGroup
+      module_function
+
+      # Check if element has conditional attributes (r-if, r-elsif, r-else)
+      # @param element [JS.Object]
+      # @return [Boolean]
+      def has_conditional_attribute?(element)
+        return false unless element[:attributes]
+
+        length = element[:attributes][:length].to_i
+        length.times do |i|
+          attribute = element[:attributes][i]
+          key = attribute[:name].to_s
+          return true if %w[r-if r-elsif r-else].include?(key)
+        end
+        false
+      end
+
+      # Build conditional group (r-if, r-elsif, r-else)
+      # @param elements [JS.Array] Array of elements
+      # @param start_index [Integer] Starting index
+      # @return [Array] [conditional_code, next_index]
+      def build_conditional_group(elements, start_index)
+        conditions = []
+        current_index = start_index
+        elements_length = elements[:length].to_i
+
+        # Process all consecutive conditional elements
+        while current_index < elements_length
+          element = elements[current_index]
+          # Skip text nodes (whitespace between elements)
+          if element[:nodeType] == JS.global[:Node][:TEXT_NODE]
+            current_index += 1
+            next
+          end
+
+          # Break if this is not an element with conditional attributes
+          unless element[:nodeType] == JS.global[:Node][:ELEMENT_NODE] && has_conditional_attribute?(element)
+            break
+          end
+
+          conditional_type = get_conditional_type(element)
+
+          # If we encounter a new r-if after the first one, break the group
+          if conditions.any? && conditional_type == 'r-if'
+            break
+          end
+
+          condition = get_conditional_expression(element)
+          content = build_single_conditional_content(element)
+
+          case conditional_type
+          when 'r-if'
+            conditions << "if #{condition}"
+            conditions << "  #{content}"
+          when 'r-elsif'
+            conditions << "elsif #{condition}"
+            conditions << "  #{content}"
+          when 'r-else'
+            conditions << "else"
+            conditions << "  #{content}"
+            current_index += 1
+            break
+          end
+
+          current_index += 1
+        end
+
+        # Add final else clause if not present
+        unless conditions.any? { |c| c == 'else' }
+          conditions << "else"
+          conditions << "  RubyWasmUi::Vdom.h_fragment([])"
+        end
+
+        conditions << "end"
+
+        [conditions.join("\n"), current_index]
+      end
+
+      # Build content for a single conditional element
+      # @param element [JS.Object]
+      # @return [String]
+      def build_single_conditional_content(element)
+        tag_name = element[:tagName].to_s.downcase
+        filtered_attributes = filter_conditional_attributes(element[:attributes])
+
+        if tag_name == 'template' || (tag_name == 'div' && BuildVdom.has_data_template_attribute?(element))
+          # For template elements, render the content directly
+          BuildVdom.build_fragment(element, tag_name)
+        elsif BuildVdom.is_component?(tag_name)
+          # For components, render the component
+          BuildVdom.build_component(element, tag_name, filtered_attributes)
+        else
+          # For regular HTML elements, render the element
+          BuildVdom.build_element(element, tag_name, filtered_attributes)
+        end
+      end
+
+      # Get conditional expression from element attributes
+      # @param element [JS.Object]
+      # @return [String]
+      def get_conditional_expression(element)
+        length = element[:attributes][:length].to_i
+        length.times do |i|
+          attribute = element[:attributes][i]
+          key = attribute[:name].to_s
+          value = attribute[:value].to_s
+
+          if %w[r-if r-elsif].include?(key)
+            return BuildVdom.embed_script?(value) ? BuildVdom.get_embed_script(value) : value
+          end
+        end
+        'true' # fallback for r-else
+      end
+
+      # Get conditional type from element attributes
+      # @param element [JS.Object]
+      # @return [String]
+      def get_conditional_type(element)
+        length = element[:attributes][:length].to_i
+        length.times do |i|
+          attribute = element[:attributes][i]
+          key = attribute[:name].to_s
+          return key if %w[r-if r-elsif r-else].include?(key)
+        end
+        'r-if' # fallback
+      end
+
+      # Filter out conditional attributes from the attributes list
+      # @param attributes [JS.Object]
+      # @return [Array]
+      def filter_conditional_attributes(attributes)
+        filtered = []
+        length = attributes[:length].to_i
+        length.times do |i|
+          attribute = attributes[i]
+          key = attribute[:name].to_s
+          unless %w[r-if r-elsif r-else data-template].include?(key)
+            filtered << attribute
+          end
+        end
+        filtered
+      end
+    end
+  end
+end

data/packages/npm-packages/runtime/src/ruby_wasm_ui/template/build_for_group.rb

@@ -0,0 +1,125 @@
+# frozen_string_literal: true
+
+module RubyWasmUi
+  module Template
+    module BuildForGroup
+      module_function
+
+      # Check if element has r-for attribute
+      # @param element [JS.Object]
+      # @return [Boolean]
+      def has_for_attribute?(element)
+        return false unless element[:attributes]
+
+        length = element[:attributes][:length].to_i
+        length.times do |i|
+          attribute = element[:attributes][i]
+          key = attribute[:name].to_s
+          return true if key == 'r-for'
+        end
+        false
+      end
+
+      # Build for loop code for r-for attribute
+      # @param element [JS.Object]
+      # @return [String]
+      def build_for_loop(element)
+        for_expression = get_for_expression(element)
+        return '' unless for_expression
+
+        # Parse r-for expression like "{todo in todos}"
+        # Remove curly braces and parse
+        clean_expression = for_expression.gsub(/^\{|\}$/, '').strip
+
+        # Match pattern: "item in collection"
+        if clean_expression.match(/^(\w+)\s+in\s+(.+)$/)
+          item_var = $1
+          collection_expr = $2
+
+          # Get the tag name and filtered attributes (excluding r-for)
+          tag_name = element[:tagName].to_s.downcase
+          filtered_attributes = filter_for_attributes(element[:attributes])
+
+          # Generate the map code
+          if RubyWasmUi::Template::BuildVdom.is_component?(tag_name)
+            component_code = build_component_for_item(element, tag_name, filtered_attributes, item_var)
+            "#{collection_expr}.map do |#{item_var}|\n  #{component_code}\nend"
+          else
+            element_code = build_element_for_item(element, tag_name, filtered_attributes, item_var)
+            "#{collection_expr}.map do |#{item_var}|\n  #{element_code}\nend"
+          end
+        else
+          # Fallback for invalid r-for syntax
+          ''
+        end
+      end
+
+      # Get r-for expression from element attributes
+      # @param element [JS.Object]
+      # @return [String, nil]
+      def get_for_expression(element)
+        length = element[:attributes][:length].to_i
+        length.times do |i|
+          attribute = element[:attributes][i]
+          key = attribute[:name].to_s
+          value = attribute[:value].to_s
+
+          if key == 'r-for'
+            return RubyWasmUi::Template::BuildVdom.embed_script?(value) ? RubyWasmUi::Template::BuildVdom.get_embed_script(value) : value
+          end
+        end
+        nil
+      end
+
+      # Filter out r-for attribute from the attributes list
+      # @param attributes [JS.Object]
+      # @return [Array]
+      def filter_for_attributes(attributes)
+        filtered = []
+        length = attributes[:length].to_i
+
+        length.times do |i|
+          attribute = attributes[i]
+          key = attribute[:name].to_s
+          value = attribute[:value].to_s
+
+          # Skip r-for attribute
+          next if key == 'r-for'
+
+          # Create attribute object in the format expected by parse_attributes
+          filtered << { name: key, value: value }
+        end
+
+        filtered
+      end
+
+      # Build component code for a single item in the loop
+      # @param element [JS.Object]
+      # @param tag_name [String]
+      # @param filtered_attributes [Array]
+      # @param item_var [String]
+      # @return [String]
+      def build_component_for_item(element, tag_name, filtered_attributes, item_var)
+        attributes_str = RubyWasmUi::Template::BuildVdom.parse_attributes(filtered_attributes)
+        children = RubyWasmUi::Template::BuildVdom.build(element[:childNodes])
+
+        # Convert kebab-case to PascalCase for component name
+        component_name = tag_name.split('-').map(&:capitalize).join
+        "RubyWasmUi::Vdom.h(#{component_name}, {#{attributes_str}}, [#{children}])"
+      end
+
+      # Build element code for a single item in the loop
+      # @param element [JS.Object]
+      # @param tag_name [String]
+      # @param filtered_attributes [Array]
+      # @param item_var [String]
+      # @return [String]
+      def build_element_for_item(element, tag_name, filtered_attributes, item_var)
+        attributes_str = RubyWasmUi::Template::BuildVdom.parse_attributes(filtered_attributes)
+        children = RubyWasmUi::Template::BuildVdom.build(element[:childNodes])
+
+        "RubyWasmUi::Vdom.h('#{tag_name}', {#{attributes_str}}, [#{children}])"
+      end
+    end
+  end
+end