virkillz / sveltex

Elixir Phoenix + Svelte = ❤️

Sveltex

Building web using Phoenix is fun. Creating component using Svelte is fun.

Imagine we can just create svelte component, save it as component_name.svelte inside our /assets/js/svelte and anytime we need it inside our layout, we can just call it like so:

<%= Sveltex.render "component_name", %{props_as_map: ""} %>

Sveltex does exactly this.

Install in 4 easy step.

This library works well with Phoenix 1.4.12 and above. (Last time tested with Phoenix 1.5.9)

If available in Hex, the package can be installed by adding sveltex to your list of dependencies in mix.exs:

1. Install Sveltex as Elixir dependency.

   Add the dependency into your mix.exs

       def deps do
         [
           {:sveltex, git: "https://github.com/virkillz/sveltex.git", tag: "1.1.2"}
         ]
       end`

   Then run:

   mix deps.get
   

2. Install Svelte & Svelte Loader as Javascript dependency

 cd assets && npm install svelte svelte-loader --save

3. Edit your Webpack config file /assets/webpack.config.js

   Add resolve:

     module.exports = (env, options) => ({
   
     resolve: {
       alias: {
         svelte: path.resolve('node_modules', 'svelte')
       },
       extensions: ['.mjs', '.js', '.svelte'],
       mainFields: ['svelte', 'browser', 'module', 'main'],
       modules: ['node_modules']
     },

   And add 2 new rules under module rules

       module: {
         rules: [
           {
             test: /\.mjs$/,
             include: /node_modules/,
             type: 'javascript/auto',
           },
           {
             test: /\.(html|svelte)$/,
             exclude: /node_modules/,
             use: {
               loader: 'svelte-loader',
               options: {
                 hotReload: true
               }
             }
           }
         ]
       }
     });

4. Import to your app.js (/assets/js/app.js file).

 import "../../deps/sveltex/assets/sveltex.js";

How to use ?

Put your svelte component files (.svelte) under /assets/js/svelte directory.

Example: test.svelte

<script>
  export let name;
</script>

<h1>Hey {name}, Phoenix and Svelte setup is working!</h1>

Then anywhere in your view template you can use

<%= Sveltex.render "test", %{name: "virkillz"} %>

Documentation can be generated with ExDoc and published on HexDocs. Once published, the docs can be found at https://hexdocs.pm/sveltex.