Svelte-Rails

Svelte-Rails integrates Svelte with Ruby on Rails. It has the following features:

Automatically renders Svelte server-side and client-side
Supports Webpacker >= 4.2 and Ruby on Rails >= 6

Usage

Make sure, you have set-up Webpacker and it's Svelte integration.

For a quick start with a new app, simply run:

rails new demo --webpack=svelte

Add this line to your application's Gemfile:

gem 'svelte-rails'

And then execute:

$ bundle
$ rails svelte:install

You can overwrite conflicting files if you have started with a fresh Rails app or did not change the webpack config of your existing one.

An example Rails app demonstrating the integration of svelte-rails can be found here:
https://github.com/nning/svelte-rails-demo/commits/master

View Helper

<%= svelte_component :Hello, name: 'Svelte' %>
<%= svelte_component :Hello, {name: 'Svelte'}, {prerender: true} %>

Controller Renderer

class TodoController < ApplicationController
  def index
    @todos = Todo.all
    render component: 'TodoList', props: { todos: @todos }
  end
end

prerender is activated by default, can be disabled with prerender: false.

Missing Features

HMR and Bundle consistency (server-rendered HTML is cached and client-side updates on changes to the sources)
Generator for components
Render pools
Better documentation for setup

Configuration Options

Configuration can be changed in config/application.rb, for example.

# Prerender (SSR) by default (i.e. without passing `prerender:true` to the view helper)
config.svelte.prerender_default = false

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/nning/svelte-rails. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the code of conduct.

License

The gem is available as open source under the terms of the MIT License.