ruby_wasm_ui 0.8.1

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

@@ -0,0 +1,220 @@
+# frozen_string_literal: true
+
+module RubyWasmUi
+  module Template
+    module BuildVdom
+      module_function
+
+      # @param elements [JS.Array]
+      # @return [String]
+      def build(elements)
+        vdom = []
+        i = 0
+        elements_length = elements[:length].to_i
+
+        while i < elements_length
+          element = elements[i]
+
+          # text node
+          if element[:nodeType] == JS.global[:Node][:TEXT_NODE]
+            text_result = parse_text_node(element)
+            vdom << text_result if text_result
+            i += 1
+            next
+          end
+
+          tag_name = element[:tagName].to_s.downcase
+
+          # fragment node (including div elements with data-template attribute)
+          if element[:nodeType] == JS.global[:Node][:ELEMENT_NODE] && (tag_name == 'template' || (tag_name == 'div' && has_data_template_attribute?(element)))
+            # Check for conditional attributes on template
+            if RubyWasmUi::Template::BuildConditionalGroup.has_conditional_attribute?(element)
+              # Process conditional group (r-if, r-elsif, r-else)
+              conditional_group, next_index = RubyWasmUi::Template::BuildConditionalGroup.build_conditional_group(elements, i)
+              vdom << conditional_group
+              i = next_index
+            else
+              vdom << build_fragment(element, tag_name)
+              i += 1
+            end
+            next
+          end
+
+          # element node (including components)
+          if element[:nodeType] == JS.global[:Node][:ELEMENT_NODE]
+            # Check for conditional attributes on all elements (including components)
+            if RubyWasmUi::Template::BuildConditionalGroup.has_conditional_attribute?(element)
+              # Process conditional group (r-if, r-elsif, r-else)
+              conditional_group, next_index = RubyWasmUi::Template::BuildConditionalGroup.build_conditional_group(elements, i)
+              vdom << conditional_group
+              i = next_index
+            # Check for r-for attribute on all elements (including components)
+            elsif RubyWasmUi::Template::BuildForGroup.has_for_attribute?(element)
+              # Process r-for loop - the result is a map expression that returns an array
+              for_loop = RubyWasmUi::Template::BuildForGroup.build_for_loop(element)
+              if for_loop && !for_loop.empty?
+                # Wrap the map result with splat operator to expand the array
+                vdom << "*#{for_loop}"
+              end
+              i += 1
+            else
+              # Handle components and regular elements
+              if is_component?(tag_name)
+                vdom << build_component(element, tag_name)
+              else
+                vdom << build_element(element, tag_name)
+              end
+              i += 1
+            end
+            next
+          end
+
+          i += 1
+        end
+
+        vdom.compact.join(',')
+      end
+
+      # parse text node
+      # ex) "test" -> "test"
+      # ex) "test {state[:count]}" -> "test #{state[:count]}"
+      # ex) "test {state[:count] + 1}" -> "test #{state[:count] + 1}"
+      # ex) "test {state[:count]} test" -> "test #{state[:count]} test"
+      # ex) "test {state[:count]} test {state[:count]} test" -> "test #{state[:count]} test #{state[:count]} test"
+      # @param element [JS.Object]
+      # @return [String]
+      def parse_text_node(element)
+        value = element[:nodeValue].to_s.chomp.strip
+
+        return nil if value.empty?
+
+        # Split the text by embedded script pattern and process each part
+        # Regular expression explanation:
+        # (        : Start capture group (this ensures the pattern itself is included in the result)
+        #  \{      : Match an opening curly brace (escaped because { is special in regex)
+        #  [^}]+   : Match one or more characters that are not a closing curly brace
+        #  \}      : Match a closing curly brace (escaped because } is special in regex)
+        # )        : End capture group
+        # Example:
+        #   Input:  "hello {state[:count]} world"
+        #   Output: ["hello ", "{state[:count]}", " world"]
+        parts = value.split(/(\{[^}]+\})/)
+        processed_parts = parts.map do |part|
+          if embed_script?(part)
+            "\#{#{get_embed_script(part)}}"
+          else
+            part
+          end
+        end
+
+        # Join all parts and wrap in double quotes
+        %("#{processed_parts.join}")
+      end
+
+      # Parse attributes array
+      # @param attributes [Array]
+      # @return [String]
+      def parse_attributes(attributes)
+        attributes_str = []
+
+        attributes.each do |attribute|
+          key = attribute[:name].to_s
+          value = attribute[:value].to_s
+
+          if embed_script?(value)
+            # Special handling for 'on' attribute to preserve hash structure
+            if key == 'on'
+              attributes_str << ":#{key} => #{value}"
+            else
+              attributes_str << ":#{key} => #{get_embed_script(value)}"
+            end
+            next
+          end
+
+          attributes_str << ":#{key} => '#{value}'"
+        end
+        attributes_str.join(', ')
+      end
+
+      # @param tag_name [String]
+      # @return [Boolean]
+      def is_component?(tag_name)
+        # Component tags start with letter but exclude standard HTML elements
+        return false unless tag_name.match?(/^[a-z]/)
+
+        # Use the standard HTML elements list from Parser module
+        !RubyWasmUi::Template::Parser::STANDARD_HTML_ELEMENTS.include?(tag_name)
+      end
+
+      # @param doc [String]
+      # @return [Boolean]
+      def embed_script?(doc)
+        doc.match?(/\{.+\}/)
+      end
+
+      # get value from embed script
+      # ex) Count: {component.state[:count]} -> Count: component.state[:count]
+      # @param script [String]
+      # @return [String]
+      def get_embed_script(script)
+        script.gsub(/\{(.+)\}/) { ::Regexp.last_match(1) }
+      end
+
+      # Check if element has data-template attribute
+      # @param element [JS.Object]
+      # @return [Boolean]
+      def has_data_template_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 == 'data-template'
+        end
+        false
+      end
+
+      # Build fragment or div element with data-template attribute
+      # @param element [JS.Object]
+      # @param tag_name [String]
+      # @return [String]
+      def build_fragment(element, tag_name)
+        # div elements with data-template don't have content property, use childNodes directly
+        if tag_name == 'template' && element[:content]
+          content_nodes = element[:content][:childNodes]
+        else
+          content_nodes = element[:childNodes]
+        end
+        children = build(content_nodes)
+        "RubyWasmUi::Vdom.h_fragment([#{children}])"
+      end
+
+      # Build component element
+      # @param element [JS.Object]
+      # @param tag_name [String]
+      # @param filtered_attributes [Array]
+      # @return [String]
+      def build_component(element, tag_name, filtered_attributes = nil)
+        attributes_str = parse_attributes(filtered_attributes || element[:attributes].to_a)
+        children = 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 regular HTML element
+      # @param element [JS.Object]
+      # @param tag_name [String]
+      # @param filtered_attributes [Array]
+      # @return [String]
+      def build_element(element, tag_name, filtered_attributes = nil)
+        attributes_str = parse_attributes(filtered_attributes || element[:attributes].to_a)
+        children = build(element[:childNodes])
+
+        "RubyWasmUi::Vdom.h('#{tag_name}', {#{attributes_str}}, [#{children}])"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,134 @@
+# frozen_string_literal: true
+
+module RubyWasmUi
+  module Template
+    module Parser
+      # Standard HTML elements that should not be treated as custom components
+      STANDARD_HTML_ELEMENTS = %w[
+        a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup
+        data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6
+        head header hr html i iframe img input ins kbd label legend li link main map mark meta meter nav noscript object ol
+        optgroup option output p param picture pre progress q rp rt ruby s samp script section select small source span
+        strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr
+      ].freeze
+
+      module_function
+
+      # @param template [String]
+      # @param binding [Binding]
+      # @return [RubyWasmUi::Vdom]
+      def parse_and_eval(template, binding)
+        vdom_code = parse(template)
+
+        # If the code contains multiple top-level expressions, wrap them in a fragment
+        if vdom_code.include?('end,') || (vdom_code.count(',') > 0 && !vdom_code.start_with?('['))
+          vdom_code = "RubyWasmUi::Vdom.h_fragment([#{vdom_code}])"
+        end
+
+        eval(vdom_code, binding)
+      end
+
+      # @param template [String]
+      # @return [String]
+      def parse(template)
+        # Replace <template> with <div data-template> to work around DOMParser limitations
+        processed_template = preprocess_template_tag(template)
+
+        # Convert PascalCase component names to kebab-case
+        processed_template = preprocess_pascal_case_component_name(processed_template)
+
+        # Preprocess self-closing custom element tags
+        processed_template = preprocess_self_closing_tags(processed_template)
+
+        parser = JS.eval('return new DOMParser()')
+        document = parser.call(:parseFromString, JS.try_convert(processed_template), 'text/html')
+        elements = document.getElementsByTagName('body')[0][:childNodes]
+
+        RubyWasmUi::Template::BuildVdom.build(elements)
+      end
+
+      # Convert PascalCase component names to kebab-case in template
+      # @param template [String]
+      # @return [String]
+      def preprocess_pascal_case_component_name(template)
+        processed_template = template.dup
+
+        # Convert opening tags (e.g., <ButtonComponent> -> <button-component>)
+        # Pattern explanation:
+        # - <: Matches the opening angle bracket
+        # - ([A-Z][a-zA-Z0-9]*): Captures PascalCase component name
+        #   - [A-Z]: First letter must be uppercase
+        #   - [a-zA-Z0-9]*: Followed by any number of letters or numbers
+        # - (\s|>|\/): Captures the delimiter after the component name
+        #   - \s: Whitespace for attributes
+        #   - >: End of opening tag
+        #   - \/: Self-closing tag
+        # - /i: Case-insensitive matching
+        processed_template = processed_template.gsub(/<([A-Z][a-zA-Z0-9]*)(\s|>|\/)/i) do
+          component_name = ::Regexp.last_match(1)  # e.g., "ButtonComponent"
+          delimiter = ::Regexp.last_match(2)       # e.g., " " or ">" or "/"
+
+          # Convert component name to kebab-case:
+          # 1. Insert hyphen before capital letters: ButtonComponent -> Button-Component
+          # 2. Convert to lowercase: Button-Component -> button-component
+          kebab_name = component_name.gsub(/([a-z0-9])([A-Z])/, '\1-\2').downcase
+
+          "<#{kebab_name}#{delimiter}"
+        end
+
+        # Convert closing tags (e.g., </ButtonComponent> -> </button-component>)
+        # Pattern explanation:
+        # - <\/: Matches the closing tag prefix
+        # - ([A-Z][a-zA-Z0-9]*): Captures PascalCase component name (same as above)
+        # - >: Matches the closing angle bracket
+        # - /i: Case-insensitive matching
+        processed_template = processed_template.gsub(/<\/([A-Z][a-zA-Z0-9]*)>/i) do
+          component_name = ::Regexp.last_match(1)  # e.g., "ButtonComponent"
+
+          # Convert component name to kebab-case (same process as above)
+          kebab_name = component_name.gsub(/([a-z0-9])([A-Z])/, '\1-\2').downcase
+
+          "</#{kebab_name}>"
+        end
+
+        processed_template
+      end
+
+      # Replace <template> tags with <div data-template> to work around DOMParser limitations
+      # @param template [String]
+      # @return [String]
+      def preprocess_template_tag(template)
+        processed_template = template.dup
+
+        # Replace <template> with attributes (e.g., <template class="container">)
+        processed_template = processed_template.gsub(/<template\s/, '<div data-template ')
+
+        # Replace simple <template> without attributes
+        processed_template = processed_template.gsub(/<template>/, '<div data-template>')
+
+        # Replace closing tag
+        processed_template = processed_template.gsub(/<\/template>/, '</div>')
+
+        processed_template
+      end
+
+      # Convert self-closing custom element tags to regular tags
+      # Custom elements are identified by having hyphens in their name
+      # Standard void elements (img, input, etc.) are not converted
+      # @param template [String]
+      # @return [String]
+      def preprocess_self_closing_tags(template)
+        # Pattern matches: <tag-name attributes />
+        # Where tag-name contains at least one hyphen (custom element convention)
+        # Use a more robust pattern that handles nested brackets and quotes
+        template.gsub(/<([a-z]+(?:-[a-z]+)+)((?:[^>]|"[^"]*"|'[^']*')*?)\/>/i) do
+          tag_name = ::Regexp.last_match(1)
+          attributes = ::Regexp.last_match(2)
+
+          # Convert to regular open/close tags
+          "<#{tag_name}#{attributes}></#{tag_name}>"
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+require_relative "template/build_conditional_group"
+require_relative "template/build_for_group"
+require_relative "template/build_vdom"
+require_relative "template/parser"
+
+module RubyWasmUi
+  module Template
+  end
+end

data/packages/npm-packages/runtime/src/ruby_wasm_ui/utils/arrays.rb

@@ -0,0 +1,185 @@
+# frozen_string_literal: true
+
+module RubyWasmUi
+  module Utils
+    module Arrays
+      # @param arr [Array]
+      # @return [Array]
+      def self.without_nulls(arr)
+        arr.reject { |item| item.nil? }
+      end
+
+      # @param old_array [Array]
+      # @param new_array [Array]
+      # @return [Hash] Hash containing added and removed items
+      def self.diff(old_array, new_array)
+        {
+          added: (new_array - old_array).uniq,
+          removed: (old_array - new_array).uniq
+        }
+      end
+
+      class ArrayWithOriginalIndices
+        attr_reader :array, :original_indices, :equal_proc
+
+        ARRAY_DIFF_OP = {
+          ADD: "add",
+          REMOVE: "remove",
+          MOVE: "move",
+          NOOP: "noop",
+        }.freeze
+
+        private_constant :ARRAY_DIFF_OP
+
+        def initialize(array, equal_proc)
+          @array = array.dup
+          @original_indices = array.each_index.to_a
+          @equal_proc = equal_proc
+        end
+
+        def is_removal?(index, new_array)
+          return false if index >= length
+
+          item = @array[index]
+          index_in_new_array = new_array.find_index { |new_item| @equal_proc.call(new_item, item) }
+
+          index_in_new_array.nil?
+        end
+
+        def is_noop?(index, new_array)
+          return false if index >= length
+
+          item = @array[index]
+          new_item = new_array[index]
+
+          @equal_proc.call(item, new_item)
+        end
+
+        def is_addition?(item, from_index)
+          return find_index_from(item, from_index).nil?
+        end
+
+        def remove_item(index)
+          operation = {
+            op: ARRAY_DIFF_OP[:REMOVE],
+            index:,
+            item: @array[index]
+          }
+
+          @array.delete_at(index)
+          @original_indices.delete_at(index)
+
+          operation
+        end
+
+        def noop_item(index)
+          {
+            op: ARRAY_DIFF_OP[:NOOP],
+            original_index: original_index_at(index),
+            index:,
+            item: @array[index]
+          }
+        end
+
+        def add_item(item, index)
+          operation = {
+            op: ARRAY_DIFF_OP[:ADD],
+            index:,
+            item:
+          }
+
+          @array.insert(index, item)
+          @original_indices.insert(index, -1)
+
+          operation
+        end
+
+        def move_item(item, to_index)
+          from_index = find_index_from(item, to_index)
+
+          operation = {
+            op: ARRAY_DIFF_OP[:MOVE],
+            original_index: original_index_at(from_index),
+            from: from_index,
+            index: to_index,
+            item: @array[from_index]
+          }
+
+          temp_deleted_item = @array.delete_at(from_index)
+          @array.insert(to_index, temp_deleted_item)
+
+          temp_deleted_original_index = @original_indices.delete_at(from_index)
+          @original_indices.insert(to_index, temp_deleted_original_index)
+
+          operation
+        end
+
+        def remove_item_after(index)
+          operations = []
+
+          while index < length
+            operations << remove_item(index)
+          end
+
+          operations
+        end
+
+        private
+
+        def length
+          @array.length
+        end
+
+        def original_index_at(index)
+          @original_indices[index]
+        end
+
+        def find_index_from(item, from_index)
+          (from_index...length).each do |index|
+            return index if @equal_proc.call(@array[index], item)
+          end
+
+          nil
+        end
+      end
+
+      # @param old_array [Array]
+      # @param new_array [Array]
+      # @param equal_proc [Proc]
+      # @return [Array] sequence of operations to transform old_array into new_array
+      def self.diff_sequence(old_array, new_array, equal_proc = ->(a, b) { a == b })
+        sequence = []
+        array = ArrayWithOriginalIndices.new(old_array, equal_proc)
+
+        index = 0
+        while index < new_array.length
+          if array.is_removal?(index, new_array)
+            sequence << array.remove_item(index)
+            next
+          end
+
+          if array.is_noop?(index, new_array)
+            sequence << array.noop_item(index)
+            index += 1
+            next
+          end
+
+          item = new_array[index]
+
+          if array.is_addition?(item, index)
+            sequence << array.add_item(item, index)
+            index += 1
+            next
+          end
+
+          sequence << array.move_item(item, index)
+          index += 1
+        end
+
+        sequence.concat(array.remove_item_after(new_array.length))
+
+        sequence
+      end
+    end
+  end
+end

data/packages/npm-packages/runtime/src/ruby_wasm_ui/utils/objects.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module RubyWasmUi
+  module Utils
+    module Objects
+      module_function
+
+      # @param old_obj [Hash]
+      # @param new_obj [Hash]
+      # @return [Hash]
+      def diff(old_obj, new_obj)
+        old_keys = old_obj.keys
+        new_keys = new_obj.keys
+
+        {
+          added: new_keys.select { |key| !old_obj.key?(key) },
+          removed: old_keys.select { |key| !new_obj.key?(key) },
+          updated: new_keys.select { |key| old_obj.key?(key) && old_obj[key] != new_obj[key] }
+        }
+      end
+
+      # Check if an object has its own property (not inherited)
+      # @param obj [Hash, Object] The object to check
+      # @param prop [Symbol, String] The property name to check
+      # @return [Boolean] true if the object has the property
+      def has_own_property(obj, prop)
+        case obj
+        when Hash
+          obj.key?(prop)
+        else
+          # For other objects, check if it's an instance variable
+          obj.instance_variable_defined?("@#{prop}")
+        end
+      end
+    end
+  end
+end

data/packages/npm-packages/runtime/src/ruby_wasm_ui/utils/props.rb

@@ -0,0 +1,25 @@
+module RubyWasmUi
+  module Utils
+    module Props
+      module_function
+
+      # Extract props and events from vdom
+      # Equivalent to JavaScript:
+      # const { on: events = {}, ...props } = vdom.props;
+      # delete props.key;
+      # @param vdom [RubyWasmUi::Vdom]
+      # @return [Hash]
+      def extract_props_and_events(vdom)
+        return { props: {}, events: {} } unless vdom&.props
+
+        all_props = vdom.props || {}
+        events = all_props[:on] || all_props["on"] || {}
+
+        # Create props hash excluding the 'on' key and 'key'
+        props = all_props.reject { |key, _| key == :on || key == "on" || key == :key || key == "key" }
+
+        { props:, events: }
+      end
+    end
+  end
+end

data/packages/npm-packages/runtime/src/ruby_wasm_ui/utils/strings.rb

@@ -0,0 +1,19 @@
+module RubyWasmUi
+  module Utils
+    module Strings
+      module_function
+
+      # @param str [String]
+      # @return [Boolean]
+      def is_not_empty_string(str)
+        str != ""
+      end
+
+      # @param str [String]
+      # @return [Boolean]
+      def is_not_blank_or_empty_string(str)
+        is_not_empty_string(str.strip)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+require_relative "utils/arrays"
+require_relative "utils/objects"
+require_relative "utils/props"
+require_relative "utils/strings"
+
+module RubyWasmUi
+  module Utils
+  end
+end