@sue445/rb-wasm-vdom 0.1.0-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Go Sueyoshi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,20 @@
+# rb-wasm-vdom
+A reactive Virtual DOM library for [ruby.wasm](https://github.com/ruby/ruby.wasm) and [Picoruby.wasm](https://www.npmjs.com/package/@picoruby/wasm-wasi)
+
+[![build](https://github.com/sue445/rb-wasm-vdom/actions/workflows/build.yml/badge.svg)](https://github.com/sue445/rb-wasm-vdom/actions/workflows/build.yml)
+
+## Development
+### Run unit test
+At first, install [wasmtime](https://docs.wasmtime.dev/cli-install.html)
+
+* Mac: `brew install wasmtime`
+
+```bash
+npm run test:unit
+```
+
+### Run integration test
+```bash
+npx playwright install
+npm run test:integration
+```

package/dist/rb-wasm-vdom.es.js

@@ -0,0 +1,22 @@
+//#endregion
+//#region src/index.js
+var e = [
+	"# frozen_string_literal: true\n# rbs_inline: enabled\n\nmodule RbWasmVdom\n  # Virtual DOM Node Definition\n  class VNode\n    attr_reader :tag      #: String\n    attr_reader :props    #: Hash[String, String]\n    attr_reader :children #: Array[VNode | String]\n\n    # @rbs tag: String\n    # @rbs props: Hash[String, String]\n    # @rbs children: Array[VNode | String]\n    # @rbs return: void\n    def initialize(tag, props = {}, children = [])\n      @tag = tag\n      @props = props\n      @children = children\n    end\n  end\nend\n",
+	"# frozen_string_literal: true\n# rbs_inline: enabled\n\nmodule RbWasmVdom\n  # Reactive State Management\n  class ReactiveState\n    # @rbs initial_data: Hash[Symbol, untyped]\n    # @rbs &on_change: () -> void\n    # @rbs return: void\n    def initialize(initial_data, &on_change)\n      @data = initial_data\n      @on_change = on_change\n    end\n\n    # @rbs key: Symbol\n    # @rbs return: untyped\n    def [](key)\n      @data[key]\n    end\n\n    # @rbs key: Symbol\n    # @rbs value: untyped\n    # @rbs return: void\n    def []=(key, value)\n      return if @data[key] == value\n\n      @data[key] = value\n      @on_change.call\n    end\n  end\nend\n",
+	"# frozen_string_literal: true\n# rbs_inline: enabled\n\nmodule RbWasmVdom\n  # HTML Template Parser\n  class TemplateParser\n    # @rbs return: void\n    def self.setup_js_parser # rubocop:disable Metrics/MethodLength\n      # Add a prefix to the function name to prevent global namespace pollution in JS\n      JS.eval(<<~JS)\n        window.__RbWasmVdom_parseHTMLToJSON = function(html) {\n          const doc = new DOMParser().parseFromString(html, \"text/html\");\n          function walk(node) {\n            if (node.nodeType === 3) {\n              const text = node.textContent.trim();\n              return text ? text : null;\n            }\n            if (node.nodeType === 1) {\n              const obj = { tag: node.tagName.toLowerCase(), props: {}, children: [] };\n              for (let i = 0; i < node.attributes.length; i++) {\n                obj.props[node.attributes[i].name] = node.attributes[i].value;\n              }\n              for (let i = 0; i < node.childNodes.length; i++) {\n                const childRes = walk(node.childNodes[i]);\n                if (childRes !== null) obj.children.push(childRes);\n              }\n              return obj;\n            }\n            return null;\n          }\n          const root = doc.body.firstElementChild;\n          return root ? JSON.stringify(walk(root)) : \"null\";\n        }\n      JS\n      @setup_done = true\n    end\n\n    # @rbs html_string: String\n    # @rbs return: VNode | String | nil\n    def self.parse(html_string)\n      setup_js_parser unless @setup_done\n      json_str = JS.global.__RbWasmVdom_parseHTMLToJSON(html_string).to_s\n      return nil if json_str == \"null\" || json_str.empty?\n\n      build_ast(JSON.parse(json_str))\n    end\n\n    # @rbs data: Hash[String, untyped] | String\n    # @rbs return: VNode | String\n    def self.build_ast(data)\n      return data if data.is_a?(String)\n\n      children = data[\"children\"].map { |child| build_ast(child) }\n      VNode.new(data[\"tag\"], data[\"props\"], children)\n    end\n  end\nend\n",
+	"# frozen_string_literal: true\n# rbs_inline: enabled\n\nmodule RbWasmVdom\n  module DomRenderer\n    private\n\n    # @rbs vnode: VNode | String\n    # @rbs return: untyped\n    def create_element(vnode)\n      document = JS.global[:document]\n      return document.createTextNode(vnode) if vnode.is_a?(String)\n\n      el = document.createElement(vnode.tag)\n      update_props(el, {}, vnode.props)\n\n      vnode.children.each do |child|\n        el.appendChild(create_element(child))\n      end\n      el\n    end\n\n    # @rbs el: untyped\n    # @rbs old_props: Hash[String, String]\n    # @rbs new_props: Hash[String, String]\n    # @rbs return: void\n    def update_props(el, old_props, new_props)\n      remove_old_props(el, old_props, new_props)\n      apply_new_props(el, old_props, new_props)\n    end\n\n    # @rbs el: untyped\n    # @rbs old_props: Hash[String, String]\n    # @rbs new_props: Hash[String, String]\n    # @rbs return: void\n    def remove_old_props(el, old_props, new_props)\n      old_props.each_key do |key|\n        el.removeAttribute(key) unless new_props.key?(key) || key.start_with?(\"@\")\n      end\n    end\n\n    # @rbs el: untyped\n    # @rbs old_props: Hash[String, String]\n    # @rbs new_props: Hash[String, String]\n    # @rbs return: void\n    def apply_new_props(el, old_props, new_props)\n      new_props.each do |key, value|\n        next if old_props[key] == value\n\n        apply_prop(el, old_props, key, value)\n      end\n    end\n\n    # @rbs el: untyped\n    # @rbs old_props: Hash[String, String]\n    # @rbs key: String\n    # @rbs value: String\n    # @rbs return: void\n    def apply_prop(el, old_props, key, value)\n      if key.start_with?(\"@\")\n        add_event_listener(el, old_props, key, value)\n      elsif key == \"value\"\n        update_value_prop(el, key, value)\n      else\n        el.setAttribute(key, value)\n      end\n    end\n\n    # @rbs el: untyped\n    # @rbs old_props: Hash[String, String]\n    # @rbs key: String\n    # @rbs value: String\n    # @rbs return: void\n    def add_event_listener(el, old_props, key, value)\n      return if old_props.key?(key)\n\n      event_name = key.sub(/^@/, \"\")\n      el.addEventListener(event_name) do |e|\n        @methods[value.to_sym].call(e, @state)\n      end\n    end\n\n    # @rbs el: untyped\n    # @rbs key: String\n    # @rbs value: String\n    # @rbs return: void\n    def update_value_prop(el, key, value)\n      el[:value] = value\n      el.setAttribute(key, value)\n    end\n  end\nend\n",
+	"# frozen_string_literal: true\n# rbs_inline: enabled\n\nmodule RbWasmVdom\n  module Patcher\n    include DomRenderer\n\n    # @rbs parent_el: untyped\n    # @rbs old_vnode: VNode | String | nil\n    # @rbs new_vnode: VNode | String | nil\n    # @rbs index: Integer\n    # @rbs return: void\n    def patch(parent_el, old_vnode, new_vnode, index)\n      current_el = child_at(parent_el, index)\n\n      return append_node(parent_el, new_vnode) if old_vnode.nil?\n      return remove_node(parent_el, current_el) if new_vnode.nil?\n      return replace_node(parent_el, current_el, new_vnode) if changed?(old_vnode, new_vnode)\n\n      patch_element(current_el, old_vnode, new_vnode) if old_vnode.is_a?(VNode) && new_vnode.is_a?(VNode)\n    end\n\n    private\n\n    # @rbs node1: VNode | String\n    # @rbs node2: VNode | String\n    # @rbs return: bool\n    def changed?(node1, node2)\n      return true if node1.class != node2.class\n      return node1 != node2 if node1.is_a?(String)\n\n      # @type var node1: VNode\n      # @type var node2: VNode\n\n      node1.tag != node2.tag\n    end\n\n    # @rbs parent_el: untyped\n    # @rbs index: Integer\n    # @rbs return: untyped\n    def child_at(parent_el, index)\n      parent_el[:childNodes].item(index)\n    end\n\n    # @rbs parent_el: untyped\n    # @rbs new_vnode: VNode | String | nil\n    # @rbs return: void\n    def append_node(parent_el, new_vnode)\n      parent_el.appendChild(create_element(new_vnode)) if new_vnode\n    end\n\n    # @rbs parent_el: untyped\n    # @rbs current_el: untyped\n    # @rbs return: void\n    def remove_node(parent_el, current_el)\n      parent_el.removeChild(current_el) unless current_el == JS::Null\n    end\n\n    # @rbs parent_el: untyped\n    # @rbs current_el: untyped\n    # @rbs new_vnode: VNode | String\n    # @rbs return: void\n    def replace_node(parent_el, current_el, new_vnode)\n      parent_el.replaceChild(create_element(new_vnode), current_el)\n    end\n\n    # @rbs current_el: untyped\n    # @rbs old_vnode: VNode\n    # @rbs new_vnode: VNode\n    # @rbs return: void\n    def patch_element(current_el, old_vnode, new_vnode)\n      update_props(current_el, old_vnode.props, new_vnode.props)\n\n      old_children = old_vnode.children\n      new_children = new_vnode.children\n\n      patch_children(current_el, old_children, new_children)\n    end\n\n    # @rbs current_el: untyped\n    # @rbs old_children: Array[VNode | String]\n    # @rbs new_children: Array[VNode | String]\n    # @rbs return: void\n    def patch_children(current_el, old_children, new_children)\n      remove_extra_children(current_el, old_children, new_children)\n      patch_common_children(current_el, old_children, new_children)\n\n      return unless new_children.length > old_children.length\n\n      append_missing_children(current_el, old_children, new_children)\n    end\n\n    # @rbs current_el: untyped\n    # @rbs old_children: Array[VNode | String]\n    # @rbs new_children: Array[VNode | String]\n    # @rbs return: void\n    def remove_extra_children(current_el, old_children, new_children)\n      return unless old_children.length > new_children.length\n\n      (old_children.length - 1).downto(new_children.length) do |i|\n        child_to_remove = current_el[:childNodes].item(i)\n        current_el.removeChild(child_to_remove) unless child_to_remove == JS::Null\n      end\n    end\n\n    # @rbs current_el: untyped\n    # @rbs old_children: Array[VNode | String]\n    # @rbs new_children: Array[VNode | String]\n    # @rbs return: void\n    def patch_common_children(current_el, old_children, new_children)\n      [old_children.length, new_children.length].min.times do |i|\n        patch(current_el, old_children[i], new_children[i], i)\n      end\n    end\n\n    # @rbs current_el: untyped\n    # @rbs old_children: Array[VNode | String]\n    # @rbs new_children: Array[VNode | String]\n    # @rbs return: void\n    def append_missing_children(current_el, old_children, new_children)\n      (old_children.length...new_children.length).each do |i|\n        current_el.appendChild(create_element(new_children[i]))\n      end\n    end\n  end\nend\n",
+	"# frozen_string_literal: true\n# rbs_inline: enabled\n\nmodule RbWasmVdom\n  class Interpolator\n    PLACEHOLDER_PATTERN = /\\{\\{\\s*\\w+\\s*\\}\\}/\n    KEY_PATTERN = /\\w+/\n\n    # @rbs state: ReactiveState\n    def initialize(state)\n      @state = state\n    end\n\n    # @rbs text: String\n    def call(text)\n      text.to_s.gsub(PLACEHOLDER_PATTERN) do |placeholder|\n        interpolate_placeholder(placeholder)\n      end\n    end\n\n    private\n\n    # @rbs placeholder: String\n    # @rbs return: String\n    def interpolate_placeholder(placeholder)\n      key = placeholder.match(KEY_PATTERN)&.[](0)\n      return placeholder unless key\n\n      @state[key.to_sym].to_s\n    end\n  end\nend\n",
+	"# frozen_string_literal: true\n# rbs_inline: enabled\n\nmodule RbWasmVdom\n  # Framework Core\n  class App\n    include Patcher\n\n    # @rbs selector: String\n    # @rbs template: String\n    # @rbs state: Hash[Symbol, untyped]\n    # @rbs methods: Hash[Symbol, Proc]\n    # @rbs return: void\n    def initialize(selector, template:, state:, methods:)\n      @el = JS.global[:document].querySelector(selector)\n      @template_ast = TemplateParser.parse(template)\n      @methods = methods\n      @current_vnode = nil\n\n      @state = ReactiveState.new(state) do\n        render_cycle\n      end\n\n      @interpolator = Interpolator.new(@state)\n\n      render_cycle\n    end\n\n    private\n\n    # @rbs return: void\n    def render_cycle\n      new_vnode = build_vdom(@template_ast)\n\n      if @current_vnode.nil?\n        @el[:innerHTML] = \"\"\n        @el.appendChild(create_element(new_vnode))\n      else\n        patch(@el, @current_vnode, new_vnode, 0)\n      end\n\n      @current_vnode = new_vnode\n    end\n\n    # @rbs ast_node: VNode | String\n    # @rbs return: VNode | String\n    def build_vdom(ast_node)\n      return @interpolator.call(ast_node) if ast_node.is_a?(String)\n\n      new_props = {} #: Hash[String, String]\n      ast_node.props.each do |k, v|\n        new_props[k] = @interpolator.call(v)\n      end\n\n      new_children = ast_node.children.map { |child| build_vdom(child) }\n      VNode.new(ast_node.tag, new_props, new_children)\n    end\n  end\nend\n",
+	"# frozen_string_literal: true\n# rbs_inline: enabled\n\nrequire \"js\"\nrequire \"json\"\n\nmodule RbWasmVdom\n  # @rbs selector: String\n  # @rbs template: String\n  # @rbs state: Hash[Symbol, untyped]\n  # @rbs methods: Hash[Symbol, Proc]\n  # @rbs return: App\n  def self.create_app(selector, template:, state:, methods:)\n    App.new(selector, template: template, state: state, methods: methods)\n  end\nend\n"
+].join("\n\n"), t = !1;
+function n(n, { el: r, template: i, state: a, methods: o }) {
+	t ||= (n.eval(e), !0), window.__rb_vdom_state = a, window.__rb_vdom_methods = o, n.eval(`
+    state_hash = JS.global[:__rb_vdom_state]
+    methods_hash = JS.global[:__rb_vdom_methods]
+    
+    RbWasmVdom.create_app("${r}", template: """${i}""", state: state_hash, methods: methods_hash)
+  `);
+}
+//#endregion
+export { n as createApp };

package/dist/rb-wasm-vdom.iife.js

@@ -0,0 +1,442 @@
+var RbWasmVdom=(function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t=[`# frozen_string_literal: true
+# rbs_inline: enabled
+
+module RbWasmVdom
+  # Virtual DOM Node Definition
+  class VNode
+    attr_reader :tag      #: String
+    attr_reader :props    #: Hash[String, String]
+    attr_reader :children #: Array[VNode | String]
+
+    # @rbs tag: String
+    # @rbs props: Hash[String, String]
+    # @rbs children: Array[VNode | String]
+    # @rbs return: void
+    def initialize(tag, props = {}, children = [])
+      @tag = tag
+      @props = props
+      @children = children
+    end
+  end
+end
+`,`# frozen_string_literal: true
+# rbs_inline: enabled
+
+module RbWasmVdom
+  # Reactive State Management
+  class ReactiveState
+    # @rbs initial_data: Hash[Symbol, untyped]
+    # @rbs &on_change: () -> void
+    # @rbs return: void
+    def initialize(initial_data, &on_change)
+      @data = initial_data
+      @on_change = on_change
+    end
+
+    # @rbs key: Symbol
+    # @rbs return: untyped
+    def [](key)
+      @data[key]
+    end
+
+    # @rbs key: Symbol
+    # @rbs value: untyped
+    # @rbs return: void
+    def []=(key, value)
+      return if @data[key] == value
+
+      @data[key] = value
+      @on_change.call
+    end
+  end
+end
+`,`# frozen_string_literal: true
+# rbs_inline: enabled
+
+module RbWasmVdom
+  # HTML Template Parser
+  class TemplateParser
+    # @rbs return: void
+    def self.setup_js_parser # rubocop:disable Metrics/MethodLength
+      # Add a prefix to the function name to prevent global namespace pollution in JS
+      JS.eval(<<~JS)
+        window.__RbWasmVdom_parseHTMLToJSON = function(html) {
+          const doc = new DOMParser().parseFromString(html, "text/html");
+          function walk(node) {
+            if (node.nodeType === 3) {
+              const text = node.textContent.trim();
+              return text ? text : null;
+            }
+            if (node.nodeType === 1) {
+              const obj = { tag: node.tagName.toLowerCase(), props: {}, children: [] };
+              for (let i = 0; i < node.attributes.length; i++) {
+                obj.props[node.attributes[i].name] = node.attributes[i].value;
+              }
+              for (let i = 0; i < node.childNodes.length; i++) {
+                const childRes = walk(node.childNodes[i]);
+                if (childRes !== null) obj.children.push(childRes);
+              }
+              return obj;
+            }
+            return null;
+          }
+          const root = doc.body.firstElementChild;
+          return root ? JSON.stringify(walk(root)) : "null";
+        }
+      JS
+      @setup_done = true
+    end
+
+    # @rbs html_string: String
+    # @rbs return: VNode | String | nil
+    def self.parse(html_string)
+      setup_js_parser unless @setup_done
+      json_str = JS.global.__RbWasmVdom_parseHTMLToJSON(html_string).to_s
+      return nil if json_str == "null" || json_str.empty?
+
+      build_ast(JSON.parse(json_str))
+    end
+
+    # @rbs data: Hash[String, untyped] | String
+    # @rbs return: VNode | String
+    def self.build_ast(data)
+      return data if data.is_a?(String)
+
+      children = data["children"].map { |child| build_ast(child) }
+      VNode.new(data["tag"], data["props"], children)
+    end
+  end
+end
+`,`# frozen_string_literal: true
+# rbs_inline: enabled
+
+module RbWasmVdom
+  module DomRenderer
+    private
+
+    # @rbs vnode: VNode | String
+    # @rbs return: untyped
+    def create_element(vnode)
+      document = JS.global[:document]
+      return document.createTextNode(vnode) if vnode.is_a?(String)
+
+      el = document.createElement(vnode.tag)
+      update_props(el, {}, vnode.props)
+
+      vnode.children.each do |child|
+        el.appendChild(create_element(child))
+      end
+      el
+    end
+
+    # @rbs el: untyped
+    # @rbs old_props: Hash[String, String]
+    # @rbs new_props: Hash[String, String]
+    # @rbs return: void
+    def update_props(el, old_props, new_props)
+      remove_old_props(el, old_props, new_props)
+      apply_new_props(el, old_props, new_props)
+    end
+
+    # @rbs el: untyped
+    # @rbs old_props: Hash[String, String]
+    # @rbs new_props: Hash[String, String]
+    # @rbs return: void
+    def remove_old_props(el, old_props, new_props)
+      old_props.each_key do |key|
+        el.removeAttribute(key) unless new_props.key?(key) || key.start_with?("@")
+      end
+    end
+
+    # @rbs el: untyped
+    # @rbs old_props: Hash[String, String]
+    # @rbs new_props: Hash[String, String]
+    # @rbs return: void
+    def apply_new_props(el, old_props, new_props)
+      new_props.each do |key, value|
+        next if old_props[key] == value
+
+        apply_prop(el, old_props, key, value)
+      end
+    end
+
+    # @rbs el: untyped
+    # @rbs old_props: Hash[String, String]
+    # @rbs key: String
+    # @rbs value: String
+    # @rbs return: void
+    def apply_prop(el, old_props, key, value)
+      if key.start_with?("@")
+        add_event_listener(el, old_props, key, value)
+      elsif key == "value"
+        update_value_prop(el, key, value)
+      else
+        el.setAttribute(key, value)
+      end
+    end
+
+    # @rbs el: untyped
+    # @rbs old_props: Hash[String, String]
+    # @rbs key: String
+    # @rbs value: String
+    # @rbs return: void
+    def add_event_listener(el, old_props, key, value)
+      return if old_props.key?(key)
+
+      event_name = key.sub(/^@/, "")
+      el.addEventListener(event_name) do |e|
+        @methods[value.to_sym].call(e, @state)
+      end
+    end
+
+    # @rbs el: untyped
+    # @rbs key: String
+    # @rbs value: String
+    # @rbs return: void
+    def update_value_prop(el, key, value)
+      el[:value] = value
+      el.setAttribute(key, value)
+    end
+  end
+end
+`,`# frozen_string_literal: true
+# rbs_inline: enabled
+
+module RbWasmVdom
+  module Patcher
+    include DomRenderer
+
+    # @rbs parent_el: untyped
+    # @rbs old_vnode: VNode | String | nil
+    # @rbs new_vnode: VNode | String | nil
+    # @rbs index: Integer
+    # @rbs return: void
+    def patch(parent_el, old_vnode, new_vnode, index)
+      current_el = child_at(parent_el, index)
+
+      return append_node(parent_el, new_vnode) if old_vnode.nil?
+      return remove_node(parent_el, current_el) if new_vnode.nil?
+      return replace_node(parent_el, current_el, new_vnode) if changed?(old_vnode, new_vnode)
+
+      patch_element(current_el, old_vnode, new_vnode) if old_vnode.is_a?(VNode) && new_vnode.is_a?(VNode)
+    end
+
+    private
+
+    # @rbs node1: VNode | String
+    # @rbs node2: VNode | String
+    # @rbs return: bool
+    def changed?(node1, node2)
+      return true if node1.class != node2.class
+      return node1 != node2 if node1.is_a?(String)
+
+      # @type var node1: VNode
+      # @type var node2: VNode
+
+      node1.tag != node2.tag
+    end
+
+    # @rbs parent_el: untyped
+    # @rbs index: Integer
+    # @rbs return: untyped
+    def child_at(parent_el, index)
+      parent_el[:childNodes].item(index)
+    end
+
+    # @rbs parent_el: untyped
+    # @rbs new_vnode: VNode | String | nil
+    # @rbs return: void
+    def append_node(parent_el, new_vnode)
+      parent_el.appendChild(create_element(new_vnode)) if new_vnode
+    end
+
+    # @rbs parent_el: untyped
+    # @rbs current_el: untyped
+    # @rbs return: void
+    def remove_node(parent_el, current_el)
+      parent_el.removeChild(current_el) unless current_el == JS::Null
+    end
+
+    # @rbs parent_el: untyped
+    # @rbs current_el: untyped
+    # @rbs new_vnode: VNode | String
+    # @rbs return: void
+    def replace_node(parent_el, current_el, new_vnode)
+      parent_el.replaceChild(create_element(new_vnode), current_el)
+    end
+
+    # @rbs current_el: untyped
+    # @rbs old_vnode: VNode
+    # @rbs new_vnode: VNode
+    # @rbs return: void
+    def patch_element(current_el, old_vnode, new_vnode)
+      update_props(current_el, old_vnode.props, new_vnode.props)
+
+      old_children = old_vnode.children
+      new_children = new_vnode.children
+
+      patch_children(current_el, old_children, new_children)
+    end
+
+    # @rbs current_el: untyped
+    # @rbs old_children: Array[VNode | String]
+    # @rbs new_children: Array[VNode | String]
+    # @rbs return: void
+    def patch_children(current_el, old_children, new_children)
+      remove_extra_children(current_el, old_children, new_children)
+      patch_common_children(current_el, old_children, new_children)
+
+      return unless new_children.length > old_children.length
+
+      append_missing_children(current_el, old_children, new_children)
+    end
+
+    # @rbs current_el: untyped
+    # @rbs old_children: Array[VNode | String]
+    # @rbs new_children: Array[VNode | String]
+    # @rbs return: void
+    def remove_extra_children(current_el, old_children, new_children)
+      return unless old_children.length > new_children.length
+
+      (old_children.length - 1).downto(new_children.length) do |i|
+        child_to_remove = current_el[:childNodes].item(i)
+        current_el.removeChild(child_to_remove) unless child_to_remove == JS::Null
+      end
+    end
+
+    # @rbs current_el: untyped
+    # @rbs old_children: Array[VNode | String]
+    # @rbs new_children: Array[VNode | String]
+    # @rbs return: void
+    def patch_common_children(current_el, old_children, new_children)
+      [old_children.length, new_children.length].min.times do |i|
+        patch(current_el, old_children[i], new_children[i], i)
+      end
+    end
+
+    # @rbs current_el: untyped
+    # @rbs old_children: Array[VNode | String]
+    # @rbs new_children: Array[VNode | String]
+    # @rbs return: void
+    def append_missing_children(current_el, old_children, new_children)
+      (old_children.length...new_children.length).each do |i|
+        current_el.appendChild(create_element(new_children[i]))
+      end
+    end
+  end
+end
+`,`# frozen_string_literal: true
+# rbs_inline: enabled
+
+module RbWasmVdom
+  class Interpolator
+    PLACEHOLDER_PATTERN = /\\{\\{\\s*\\w+\\s*\\}\\}/
+    KEY_PATTERN = /\\w+/
+
+    # @rbs state: ReactiveState
+    def initialize(state)
+      @state = state
+    end
+
+    # @rbs text: String
+    def call(text)
+      text.to_s.gsub(PLACEHOLDER_PATTERN) do |placeholder|
+        interpolate_placeholder(placeholder)
+      end
+    end
+
+    private
+
+    # @rbs placeholder: String
+    # @rbs return: String
+    def interpolate_placeholder(placeholder)
+      key = placeholder.match(KEY_PATTERN)&.[](0)
+      return placeholder unless key
+
+      @state[key.to_sym].to_s
+    end
+  end
+end
+`,`# frozen_string_literal: true
+# rbs_inline: enabled
+
+module RbWasmVdom
+  # Framework Core
+  class App
+    include Patcher
+
+    # @rbs selector: String
+    # @rbs template: String
+    # @rbs state: Hash[Symbol, untyped]
+    # @rbs methods: Hash[Symbol, Proc]
+    # @rbs return: void
+    def initialize(selector, template:, state:, methods:)
+      @el = JS.global[:document].querySelector(selector)
+      @template_ast = TemplateParser.parse(template)
+      @methods = methods
+      @current_vnode = nil
+
+      @state = ReactiveState.new(state) do
+        render_cycle
+      end
+
+      @interpolator = Interpolator.new(@state)
+
+      render_cycle
+    end
+
+    private
+
+    # @rbs return: void
+    def render_cycle
+      new_vnode = build_vdom(@template_ast)
+
+      if @current_vnode.nil?
+        @el[:innerHTML] = ""
+        @el.appendChild(create_element(new_vnode))
+      else
+        patch(@el, @current_vnode, new_vnode, 0)
+      end
+
+      @current_vnode = new_vnode
+    end
+
+    # @rbs ast_node: VNode | String
+    # @rbs return: VNode | String
+    def build_vdom(ast_node)
+      return @interpolator.call(ast_node) if ast_node.is_a?(String)
+
+      new_props = {} #: Hash[String, String]
+      ast_node.props.each do |k, v|
+        new_props[k] = @interpolator.call(v)
+      end
+
+      new_children = ast_node.children.map { |child| build_vdom(child) }
+      VNode.new(ast_node.tag, new_props, new_children)
+    end
+  end
+end
+`,`# frozen_string_literal: true
+# rbs_inline: enabled
+
+require "js"
+require "json"
+
+module RbWasmVdom
+  # @rbs selector: String
+  # @rbs template: String
+  # @rbs state: Hash[Symbol, untyped]
+  # @rbs methods: Hash[Symbol, Proc]
+  # @rbs return: App
+  def self.create_app(selector, template:, state:, methods:)
+    App.new(selector, template: template, state: state, methods: methods)
+  end
+end
+`].join(`
+
+`),n=!1;function r(e,{el:r,template:i,state:a,methods:o}){n||=(e.eval(t),!0),window.__rb_vdom_state=a,window.__rb_vdom_methods=o,e.eval(`
+    state_hash = JS.global[:__rb_vdom_state]
+    methods_hash = JS.global[:__rb_vdom_methods]
+    
+    RbWasmVdom.create_app("${r}", template: """${i}""", state: state_hash, methods: methods_hash)
+  `)}return e.createApp=r,e})({});

package/dist/rb-wasm-vdom.rb

@@ -0,0 +1,448 @@
+# frozen_string_literal: true
+# rbs_inline: enabled
+
+module RbWasmVdom
+  # Virtual DOM Node Definition
+  class VNode
+    attr_reader :tag      #: String
+    attr_reader :props    #: Hash[String, String]
+    attr_reader :children #: Array[VNode | String]
+
+    # @rbs tag: String
+    # @rbs props: Hash[String, String]
+    # @rbs children: Array[VNode | String]
+    # @rbs return: void
+    def initialize(tag, props = {}, children = [])
+      @tag = tag
+      @props = props
+      @children = children
+    end
+  end
+end
+
+
+# frozen_string_literal: true
+# rbs_inline: enabled
+
+module RbWasmVdom
+  # Reactive State Management
+  class ReactiveState
+    # @rbs initial_data: Hash[Symbol, untyped]
+    # @rbs &on_change: () -> void
+    # @rbs return: void
+    def initialize(initial_data, &on_change)
+      @data = initial_data
+      @on_change = on_change
+    end
+
+    # @rbs key: Symbol
+    # @rbs return: untyped
+    def [](key)
+      @data[key]
+    end
+
+    # @rbs key: Symbol
+    # @rbs value: untyped
+    # @rbs return: void
+    def []=(key, value)
+      return if @data[key] == value
+
+      @data[key] = value
+      @on_change.call
+    end
+  end
+end
+
+
+# frozen_string_literal: true
+# rbs_inline: enabled
+
+module RbWasmVdom
+  # HTML Template Parser
+  class TemplateParser
+    # @rbs return: void
+    def self.setup_js_parser # rubocop:disable Metrics/MethodLength
+      # Add a prefix to the function name to prevent global namespace pollution in JS
+      JS.eval(<<~JS)
+        window.__RbWasmVdom_parseHTMLToJSON = function(html) {
+          const doc = new DOMParser().parseFromString(html, "text/html");
+          function walk(node) {
+            if (node.nodeType === 3) {
+              const text = node.textContent.trim();
+              return text ? text : null;
+            }
+            if (node.nodeType === 1) {
+              const obj = { tag: node.tagName.toLowerCase(), props: {}, children: [] };
+              for (let i = 0; i < node.attributes.length; i++) {
+                obj.props[node.attributes[i].name] = node.attributes[i].value;
+              }
+              for (let i = 0; i < node.childNodes.length; i++) {
+                const childRes = walk(node.childNodes[i]);
+                if (childRes !== null) obj.children.push(childRes);
+              }
+              return obj;
+            }
+            return null;
+          }
+          const root = doc.body.firstElementChild;
+          return root ? JSON.stringify(walk(root)) : "null";
+        }
+      JS
+      @setup_done = true
+    end
+
+    # @rbs html_string: String
+    # @rbs return: VNode | String | nil
+    def self.parse(html_string)
+      setup_js_parser unless @setup_done
+      json_str = JS.global.__RbWasmVdom_parseHTMLToJSON(html_string).to_s
+      return nil if json_str == "null" || json_str.empty?
+
+      build_ast(JSON.parse(json_str))
+    end
+
+    # @rbs data: Hash[String, untyped] | String
+    # @rbs return: VNode | String
+    def self.build_ast(data)
+      return data if data.is_a?(String)
+
+      children = data["children"].map { |child| build_ast(child) }
+      VNode.new(data["tag"], data["props"], children)
+    end
+  end
+end
+
+
+# frozen_string_literal: true
+# rbs_inline: enabled
+
+module RbWasmVdom
+  module DomRenderer
+    private
+
+    # @rbs vnode: VNode | String
+    # @rbs return: untyped
+    def create_element(vnode)
+      document = JS.global[:document]
+      return document.createTextNode(vnode) if vnode.is_a?(String)
+
+      el = document.createElement(vnode.tag)
+      update_props(el, {}, vnode.props)
+
+      vnode.children.each do |child|
+        el.appendChild(create_element(child))
+      end
+      el
+    end
+
+    # @rbs el: untyped
+    # @rbs old_props: Hash[String, String]
+    # @rbs new_props: Hash[String, String]
+    # @rbs return: void
+    def update_props(el, old_props, new_props)
+      remove_old_props(el, old_props, new_props)
+      apply_new_props(el, old_props, new_props)
+    end
+
+    # @rbs el: untyped
+    # @rbs old_props: Hash[String, String]
+    # @rbs new_props: Hash[String, String]
+    # @rbs return: void
+    def remove_old_props(el, old_props, new_props)
+      old_props.each_key do |key|
+        el.removeAttribute(key) unless new_props.key?(key) || key.start_with?("@")
+      end
+    end
+
+    # @rbs el: untyped
+    # @rbs old_props: Hash[String, String]
+    # @rbs new_props: Hash[String, String]
+    # @rbs return: void
+    def apply_new_props(el, old_props, new_props)
+      new_props.each do |key, value|
+        next if old_props[key] == value
+
+        apply_prop(el, old_props, key, value)
+      end
+    end
+
+    # @rbs el: untyped
+    # @rbs old_props: Hash[String, String]
+    # @rbs key: String
+    # @rbs value: String
+    # @rbs return: void
+    def apply_prop(el, old_props, key, value)
+      if key.start_with?("@")
+        add_event_listener(el, old_props, key, value)
+      elsif key == "value"
+        update_value_prop(el, key, value)
+      else
+        el.setAttribute(key, value)
+      end
+    end
+
+    # @rbs el: untyped
+    # @rbs old_props: Hash[String, String]
+    # @rbs key: String
+    # @rbs value: String
+    # @rbs return: void
+    def add_event_listener(el, old_props, key, value)
+      return if old_props.key?(key)
+
+      event_name = key.sub(/^@/, "")
+      el.addEventListener(event_name) do |e|
+        @methods[value.to_sym].call(e, @state)
+      end
+    end
+
+    # @rbs el: untyped
+    # @rbs key: String
+    # @rbs value: String
+    # @rbs return: void
+    def update_value_prop(el, key, value)
+      el[:value] = value
+      el.setAttribute(key, value)
+    end
+  end
+end
+
+
+# frozen_string_literal: true
+# rbs_inline: enabled
+
+module RbWasmVdom
+  module Patcher
+    include DomRenderer
+
+    # @rbs parent_el: untyped
+    # @rbs old_vnode: VNode | String | nil
+    # @rbs new_vnode: VNode | String | nil
+    # @rbs index: Integer
+    # @rbs return: void
+    def patch(parent_el, old_vnode, new_vnode, index)
+      current_el = child_at(parent_el, index)
+
+      return append_node(parent_el, new_vnode) if old_vnode.nil?
+      return remove_node(parent_el, current_el) if new_vnode.nil?
+      return replace_node(parent_el, current_el, new_vnode) if changed?(old_vnode, new_vnode)
+
+      patch_element(current_el, old_vnode, new_vnode) if old_vnode.is_a?(VNode) && new_vnode.is_a?(VNode)
+    end
+
+    private
+
+    # @rbs node1: VNode | String
+    # @rbs node2: VNode | String
+    # @rbs return: bool
+    def changed?(node1, node2)
+      return true if node1.class != node2.class
+      return node1 != node2 if node1.is_a?(String)
+
+      # @type var node1: VNode
+      # @type var node2: VNode
+
+      node1.tag != node2.tag
+    end
+
+    # @rbs parent_el: untyped
+    # @rbs index: Integer
+    # @rbs return: untyped
+    def child_at(parent_el, index)
+      parent_el[:childNodes].item(index)
+    end
+
+    # @rbs parent_el: untyped
+    # @rbs new_vnode: VNode | String | nil
+    # @rbs return: void
+    def append_node(parent_el, new_vnode)
+      parent_el.appendChild(create_element(new_vnode)) if new_vnode
+    end
+
+    # @rbs parent_el: untyped
+    # @rbs current_el: untyped
+    # @rbs return: void
+    def remove_node(parent_el, current_el)
+      parent_el.removeChild(current_el) unless current_el == JS::Null
+    end
+
+    # @rbs parent_el: untyped
+    # @rbs current_el: untyped
+    # @rbs new_vnode: VNode | String
+    # @rbs return: void
+    def replace_node(parent_el, current_el, new_vnode)
+      parent_el.replaceChild(create_element(new_vnode), current_el)
+    end
+
+    # @rbs current_el: untyped
+    # @rbs old_vnode: VNode
+    # @rbs new_vnode: VNode
+    # @rbs return: void
+    def patch_element(current_el, old_vnode, new_vnode)
+      update_props(current_el, old_vnode.props, new_vnode.props)
+
+      old_children = old_vnode.children
+      new_children = new_vnode.children
+
+      patch_children(current_el, old_children, new_children)
+    end
+
+    # @rbs current_el: untyped
+    # @rbs old_children: Array[VNode | String]
+    # @rbs new_children: Array[VNode | String]
+    # @rbs return: void
+    def patch_children(current_el, old_children, new_children)
+      remove_extra_children(current_el, old_children, new_children)
+      patch_common_children(current_el, old_children, new_children)
+
+      return unless new_children.length > old_children.length
+
+      append_missing_children(current_el, old_children, new_children)
+    end
+
+    # @rbs current_el: untyped
+    # @rbs old_children: Array[VNode | String]
+    # @rbs new_children: Array[VNode | String]
+    # @rbs return: void
+    def remove_extra_children(current_el, old_children, new_children)
+      return unless old_children.length > new_children.length
+
+      (old_children.length - 1).downto(new_children.length) do |i|
+        child_to_remove = current_el[:childNodes].item(i)
+        current_el.removeChild(child_to_remove) unless child_to_remove == JS::Null
+      end
+    end
+
+    # @rbs current_el: untyped
+    # @rbs old_children: Array[VNode | String]
+    # @rbs new_children: Array[VNode | String]
+    # @rbs return: void
+    def patch_common_children(current_el, old_children, new_children)
+      [old_children.length, new_children.length].min.times do |i|
+        patch(current_el, old_children[i], new_children[i], i)
+      end
+    end
+
+    # @rbs current_el: untyped
+    # @rbs old_children: Array[VNode | String]
+    # @rbs new_children: Array[VNode | String]
+    # @rbs return: void
+    def append_missing_children(current_el, old_children, new_children)
+      (old_children.length...new_children.length).each do |i|
+        current_el.appendChild(create_element(new_children[i]))
+      end
+    end
+  end
+end
+
+
+# frozen_string_literal: true
+# rbs_inline: enabled
+
+module RbWasmVdom
+  class Interpolator
+    PLACEHOLDER_PATTERN = /\{\{\s*\w+\s*\}\}/
+    KEY_PATTERN = /\w+/
+
+    # @rbs state: ReactiveState
+    def initialize(state)
+      @state = state
+    end
+
+    # @rbs text: String
+    def call(text)
+      text.to_s.gsub(PLACEHOLDER_PATTERN) do |placeholder|
+        interpolate_placeholder(placeholder)
+      end
+    end
+
+    private
+
+    # @rbs placeholder: String
+    # @rbs return: String
+    def interpolate_placeholder(placeholder)
+      key = placeholder.match(KEY_PATTERN)&.[](0)
+      return placeholder unless key
+
+      @state[key.to_sym].to_s
+    end
+  end
+end
+
+
+# frozen_string_literal: true
+# rbs_inline: enabled
+
+module RbWasmVdom
+  # Framework Core
+  class App
+    include Patcher
+
+    # @rbs selector: String
+    # @rbs template: String
+    # @rbs state: Hash[Symbol, untyped]
+    # @rbs methods: Hash[Symbol, Proc]
+    # @rbs return: void
+    def initialize(selector, template:, state:, methods:)
+      @el = JS.global[:document].querySelector(selector)
+      @template_ast = TemplateParser.parse(template)
+      @methods = methods
+      @current_vnode = nil
+
+      @state = ReactiveState.new(state) do
+        render_cycle
+      end
+
+      @interpolator = Interpolator.new(@state)
+
+      render_cycle
+    end
+
+    private
+
+    # @rbs return: void
+    def render_cycle
+      new_vnode = build_vdom(@template_ast)
+
+      if @current_vnode.nil?
+        @el[:innerHTML] = ""
+        @el.appendChild(create_element(new_vnode))
+      else
+        patch(@el, @current_vnode, new_vnode, 0)
+      end
+
+      @current_vnode = new_vnode
+    end
+
+    # @rbs ast_node: VNode | String
+    # @rbs return: VNode | String
+    def build_vdom(ast_node)
+      return @interpolator.call(ast_node) if ast_node.is_a?(String)
+
+      new_props = {} #: Hash[String, String]
+      ast_node.props.each do |k, v|
+        new_props[k] = @interpolator.call(v)
+      end
+
+      new_children = ast_node.children.map { |child| build_vdom(child) }
+      VNode.new(ast_node.tag, new_props, new_children)
+    end
+  end
+end
+
+
+# frozen_string_literal: true
+# rbs_inline: enabled
+
+require "js"
+require "json"
+
+module RbWasmVdom
+  # @rbs selector: String
+  # @rbs template: String
+  # @rbs state: Hash[Symbol, untyped]
+  # @rbs methods: Hash[Symbol, Proc]
+  # @rbs return: App
+  def self.create_app(selector, template:, state:, methods:)
+    App.new(selector, template: template, state: state, methods: methods)
+  end
+end

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@sue445/rb-wasm-vdom",
+  "version": "0.1.0-beta.1",
+  "description": "A reactive Virtual DOM library for ruby.wasm and Picoruby.wasm",
+  "keywords": [
+    "ruby.wasm",
+    "picoruby.wasm"
+  ],
+  "homepage": "https://github.com/sue445/rb-wasm-vdom#readme",
+  "bugs": {
+    "url": "https://github.com/sue445/rb-wasm-vdom/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sue445/rb-wasm-vdom.git"
+  },
+  "license": "MIT",
+  "author": "sue445",
+  "type": "module",
+  "main": "./dist/rb-wasm-vdom.es.js",
+  "module": "./dist/rb-wasm-vdom.es.js",
+  "exports": {
+    ".": "./dist/rb-wasm-vdom.es.js",
+    "./rb": "./dist/rb-wasm-vdom.rb"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "vite build && node scripts/build-ruby.js",
+    "test": "npm run test:unit && npm run test:integration",
+    "test:integration": "npm run build && playwright test test/integration/",
+    "test:unit": "npm run test:unit:ruby-wasm-head",
+    "test:unit:ruby-wasm-head": "node scripts/run-unit-tests.js ruby-wasm-head"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.60.0",
+    "@ruby/head-wasm-wasi": "^2.9.3-2.9.4",
+    "vite": "^8.0.16"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}