LiveStores

With LiveStores you can easily update Svelte stores from Rails via ActionCable. Think of them as the missing link between Rails and Svelte.

Example

Let's assume you have a web app and would like to display real-time notifications to your users. This can be easily done with LiveStores by pushing new notifications to a Svelte store as they happen.

Client Side

Inside your component, set up a subscription and initialize a notifications store.

<script>
import { subscribe, getStore } from 'livestores'
import { onDestroy } from 'svelte'

// Set up a subscription to the UserChannel
const subscription = subscribe('UserChannel')

// Don't forget to unsubscribe when the component is destroyed
onDestroy(subscription.unsubscribe)

// Get a reference to the notifications store and initialize it with an empty array
const notifications = getStore('notifications', [])
</script>

{#each $notifications as notification}
  <p>{notification.text}</p>
{/each}

Server side

On the Ruby side, we of course need a channel that we can subscribe to:

# user_channel.rb
class UserChannel < ApplicationCable::Channel
  def subscribed
    stream_for current_user
  end
end

Now you can server-side push directly into the notifications store through the UserChannel:

UserChannel[some_user].store('notifications').append({text: "Hello from Ruby"})

Docs

Full docs coming soon.

Installation

Ruby gem

Add this line to your application's Gemfile:

gem 'livestores'

And then execute:

$ bundle install

Npm package

Install the package:

$ npm i -D livestores