{"id":13503712,"url":"https://github.com/fazibear/opal-virtual-dom","last_synced_at":"2025-03-21T16:32:01.275Z","repository":{"id":35371180,"uuid":"39634233","full_name":"fazibear/opal-virtual-dom","owner":"fazibear","description":"virtual-dom wrapper for opal","archived":false,"fork":false,"pushed_at":"2019-10-02T18:43:15.000Z","size":60,"stargazers_count":22,"open_issues_count":2,"forks_count":5,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-05-01T19:58:02.665Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fazibear.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-07-24T13:11:36.000Z","updated_at":"2020-02-24T14:29:55.000Z","dependencies_parsed_at":"2022-08-21T00:20:28.233Z","dependency_job_id":null,"html_url":"https://github.com/fazibear/opal-virtual-dom","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fazibear%2Fopal-virtual-dom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fazibear%2Fopal-virtual-dom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fazibear%2Fopal-virtual-dom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fazibear%2Fopal-virtual-dom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fazibear","download_url":"https://codeload.github.com/fazibear/opal-virtual-dom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221817058,"owners_count":16885453,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T23:00:43.860Z","updated_at":"2024-10-28T10:29:30.165Z","avatar_url":"https://github.com/fazibear.png","language":"Ruby","funding_links":["https://www.patreon.com/bePatron?u=6912974"],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# Virtual Dom support for Opal\n[![Gem Version](https://badge.fury.io/rb/opal-virtual-dom.svg)](http://badge.fury.io/rb/opal-virtual-dom)\n[![Code Climate](https://codeclimate.com/github/fazibear/opal-virtual-dom/badges/gpa.svg)](https://codeclimate.com/github/fazibear/opal-virtual-dom)\n\n## Description\n\nOpal wrapper for [virtual-dom](https://github.com/Matt-Esch/virtual-dom) javascript library. For more information see [virtual-dom wiki page](https://github.com/Matt-Esch/virtual-dom/wiki).\n\n## Usage\n\nServer side (config.ru, Rakefile, Rails, Sinatra, etc.)\n\n```ruby\nrequire 'opal-virtual-dom'\n```\n\nBrowser side\n\n```ruby\nrequire 'opal'\nrequire 'browser'     # not required\nrequire 'virtual_dom'\n\n# if you're using browser and you want to have events and elements wrapped\nrequire 'virtual_dom/support/browser'\n\nclass SampleList\n  include VirtualDOM\n\n  def initialize(elements = [])\n    @elements = elements\n  end\n\n  def create_hook(node, name, previous)\n    puts \"I'm created: #{node}\"\n  end\n\n  def render\n    # You can use chained methods\n    # to add class to elements\n    # use bang method to define element id\n\n    # \u003cp id=\"example\"\u003e\n    p.example! do\n      # \u003cul class=\"simple-list\"\u003e\n      ul.simple_list.list(hook: Hook.method(method(:create_hook))) do\n        @elements.each do |string|\n          li class: class_names({empty: string.empty?}) do\n            text string\n          end\n        end\n      end\n    end\n  end\nend\n\n$document.ready do\n  list = SampleList.new(%w(one two three)).render.to_vnode\n  back = SampleList.new(%w(three two one)).render.to_vnode\n\n  root_node = VirtualDOM.create(list)\n  $document.body.inner_dom = root_node\n\n  diff = VirtualDOM.diff(list, back)\n  VirtualDOM.patch(root_node, diff)\nend\n```\n\n## Thank you!\n\n[![Become Patreon](https://c5.patreon.com/external/logo/become_a_patron_button.png)](https://www.patreon.com/bePatron?u=6912974)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffazibear%2Fopal-virtual-dom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffazibear%2Fopal-virtual-dom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffazibear%2Fopal-virtual-dom/lists"}