| .forgejo/workflows | ||
| bin | ||
| lib | ||
| sig/lib | ||
| .gitignore | ||
| .ruby-version | ||
| actionview-svelte-handler.gemspec | ||
| build.esbuild.js | ||
| Gemfile | ||
| Gemfile.lock | ||
| LICENSE.md | ||
| package-lock.json | ||
| package.json | ||
| Rakefile | ||
| rbs_collection.lock.yaml | ||
| rbs_collection.yaml | ||
| README.md | ||
| Steepfile | ||
| tsconfig.json | ||
| watch.esbuild.js | ||
actionview-svelte-handler
actionview-svelte-handler is a template handler for Action View that allows you to create Svelte views in Rails applications with ease.
Usage
Add .html.svelte views to your application instead of .html.erb.
Caution
This will make ERB helpers unavailable because Svelte is registered as a template handler, replacing ERB when it is used.
To pass props, use the Svelte.props object in your controller (or set instance variables), and then access them as a store with $props.
Example usage
Controller
app/controllers/users_controller.rb:
def show Svelte.props[:user] = User.find_by(username: params[:username]) end View
app/views/users/show.html.svelte:
<script> let name = $props.user.name $: mailto = "mailto://" + $props.user.email </script> <h1>Hello, {name}</h1> <a href={mailto}>{$props.user.email}</a> <style> h1 { color: red } </style> Configuration
Configuration options can be found in config/initializers/svelte.rb. The following is a list of options and some information:
| Option with type | Description | Default |
|---|---|---|
ssr <bool> | Global server-side rendering. Does not override the svelte[ssr] local. | true |
aliases <Hash[Symbol, String]> | Path aliases when importing from Svelte views. | See path aliases |
preprocess <Hash[String | Symbol, String]> | Configuration for svelte-preprocess | {} |
Example usage (with Svelte.configure block)
config/initializers/svelte.rb:
Svelte.configure do |config| config.ssr = true config.aliases = { :$views => Rails.root.join("app", "views") } end Locals
To set per-render options, we use a set of locals underneath the svelte hash. Locals are always the highest precedence
| Option with type | Description | Default |
|---|---|---|
ssr <bool> | Server-side prerendering | true |
island <Hash[String, String]> | HTML attributes for is-land | { "on:visible": "", "on:idle": "" } |
Example usage
app/controllers/example_controller.rb:
render "view", locals: { svelte: { ssr: false } } Variants
To configure server-side rendering at a file level, you can use the client and server variants. Just set your file name like in the example.
Example usage
app/views/example/show.html+client.svelte
app/views/example/show.html+server.svelte
app/controllers/example_controller.rb:
render "view", variant: "client" Path aliases
Path aliases are used as quick references from your Svelte views to key paths in your application. They are primarily utilized when importing other Svelte components (i.e. partials).
The list of path aliases set by the generator is as follows:
| Alias | Resolution |
|---|---|
$root | Rails.root |
$app | Rails.root.join "app" |
$views | Rails.root.join "app", "views" |
Example usage
import Card from "$views/application/card.html.svelte" Installation
-
Ensure you have Node.js >=v12.16.0 and NPM in your
$PATH -
Add the
actionview-svelte-handlergem to your Gemfile by executing:
bundle add actionview-svelte-handler - And then execute the generator:
bin/rails generate svelte:install - Enjoy!
Copyright
Copyright (C) 2024 Software Freedom Conservancy and Action View Svelte Handler contributors
This program is free software: you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public License along with this program. If not, see https://www.gnu.org/licenses/.