https://github.com/youchan/hyalite

A Ruby implemented Virtual DOM in Opal
https://github.com/youchan/hyalite

Last synced: 4 months ago
JSON representation

A Ruby implemented Virtual DOM in Opal

• Host: GitHub
• URL: https://github.com/youchan/hyalite
• Owner: youchan
• License: mit
• Created: 2015-09-04T19:29:02.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2022-05-27T16:43:55.000Z (about 2 years ago)
• Last Synced: 2024-02-18T08:02:45.943Z (5 months ago)
• Language: Ruby
• Homepage:
• Size: 160 KB
• Stars: 138
• Watchers: 16
• Forks: 2
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Lists

• awesome-opal - Hyalite - This is ruby virtual DOM implementation using opal. It is inspired by react.js. (Uncategorized / Uncategorized)
• awesome-opal - Hyalite - This is ruby virtual DOM implementation using opal. It is inspired by react.js. (Uncategorized / Uncategorized)
• awesome-rubykaigi2016 - youchan/hyalite

README

        
Hyalite

====

[![Build Status](https://travis-ci.org/youchan/hyalite.svg?branch=master)](https://travis-ci.org/youchan/hyalite)

[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/youchan/hyalite?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)

This is ruby virtual DOM implementation using opal. It is inspired by react.js.

Example

----

```ruby

require 'hyalite'

class ExampleView

  include Hyalite::Component

  state :count, 0

  def component_did_mount

    interval = Proc.new do

      @state.count += 1

    end

    `setInterval(interval, 5000)`

  end

  def render

    div({class: 'example'},

      h2(nil, @props[:title]),

      h3(nil, "count = #{@state.count}")

    )

  end

end

$document.ready do

  Hyalite.render(Hyalite.create_element(ExampleView, {title: "Hyalite counter example"}), $document['.container'])

end

```

How to execute this example is the following.

```

> cd example

> rackup

```

Open url `http://localhost:9292`.