Virtual Dom support for Opal

require 'opal-virtual-dom'

require 'opal'
require 'browser'     # not required
require 'virtual_dom'

# if you're using browser and you want to have events and elements wrapped
require 'virtual_dom/support/browser'

class SampleList
  include VirtualDOM

  def initialize(elements = [])
    @elements = elements
  end

  def create_hook(node, name, previous)
    puts "I'm created: #{node}"
  end

  def render
    # You can use chained methods
    # to add class to elements
    # use bang method to define element id

    # <p id="example">
    p.example! do
      # <ul class="simple-list">
      ul.simple_list.list(hook: Hook.method(method(:create_hook))) do
        @elements.each do |string|
          li class: class_names({empty: string.empty?}) do
            text string
          end
        end
      end
    end
  end
end

$document.ready do
  list = SampleList.new(%w(one two three)).render.to_vnode
  back = SampleList.new(%w(three two one)).render.to_vnode

  root_node = VirtualDOM.create(list)
  $document.body.inner_dom = root_node

  diff = VirtualDOM.diff(list, back)
  VirtualDOM.patch(root_node, diff)
end