Home

Awesome

LiveView

A Crystal abstract class for building server-rendered HTML components with client-side interactivity.

These live views are framework-agnostic. You can use them with any framework and even without a framework at all. They define to_s(io) so you can either build a string out of them or pipe them to an IO object (such as your web response).

Installation

  1. Add the dependency to your shard.yml:

    dependencies:
      live_view:
        github: jgaskins/live_view
    
  2. Run shards install

Usage

To see a complete example app, check out crystal_live_view_example

require "live_view"

To define a live view, you can inherit from the LiveView abstract class:

class MyView < LiveView
end

In your HTML layout:

  <%= LiveView.javascript_tag %>

Rendering

To define what to render, you can either use the render macro to define the HTML inline or the template macro and specify the ECR template to render:

class CurrentTime < LiveView
  render "The time is <time>#{Time.now}</time>"
end

Updating the UI

The update(socket : HTTP::WebSocket) method will update the client with the new UI:

update(socket) # Update with the current state

Hooks

There are 3 hooks:

def mount(socket)
end

def unmount(socket)
end

def handle_event(message, data, socket)
  case message
  when "increment"
    update(socket) { @count += 1 }
  when "decrement"
    update(socket) { @count -= 1 }
  end
end

Recurrent UI updates

You can use the every(interval : Time::Span) method to call update at that interval. Use the mount(socket : HTTP::WebSocket) hook to set that up when the view mounts:

class CurrentTime < LiveView
  render "The time is <time>#{Time.now}</time>"

  def mount(socket)
    every(1.second) { update socket }
  end
end

Performance

Contributing

  1. Fork it (https://github.com/jgaskins/live_view/fork)
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create a new Pull Request

Contributors