Setup Svelte as Custom Element on Vite

#svelte #rails #vite

Why Svelte?

In every app, we have at least one feature that is special and requires complex front-end logic. This is where Svelte gives us and our customers so much pleasure.

Compared to React, which clearly has a larger ecosystem, Svelte is leaner, faster, better integrated, and in my opinion, simply the better technology. To understand the idea of Svelte in comparison to React, please take a look at this entertaining video from Rich Harris, the founder of Svelte, starting at minute 4:13 rethinking reactivity.

Combined with solid system testing (we use Playwright), this is a powerful and reliable framework.

Setup Svelte

For make work svelte fluently we built the gem svelte-on-rails with the related node-package. Please follow the instructions there.

But, first we must make svelte running:

Installation

npm i svelte@latest @sveltejs/vite-plugin-svelte@latest

vite.config.ts

  import { defineConfig } from 'vite'
  import RubyPlugin from 'vite-plugin-ruby'
+ import { svelte } from '@sveltejs/vite-plugin-svelte';

  export default defineConfig({
    plugins: [
      RubyPlugin(),
+     svelte({})
    ]
  })

package.json

{
  ...
  "type": "module" // => otherwise @sveltejs/vite-plugin-svelte would break
}

Restart server.

example component frontend/javascript/HelloWorld.svelte

<h1>Hello World from Svelte</h1>

add on application.js:

import HelloWorld from '../javascript/HelloWorld.svelte'
import { mount } from 'svelte';
const tag = document.getElementById('svelte-hello-world')
mount(HelloWorld, { target: tag })

And you should see your component on the browser.

Overview