Sveltex

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

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

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

Sveltex does exactly this.

Install in 4 easy step.

This library works well with Phoenix 1.4.12 The difference between previous 1.4. version is replacing uglify with terser.

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

Install Sveltex as Elixir dependency.

Add the dependency into your mix.exs

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

Then run:

mix deps.get

Install Svelte & Svelte Loader as Javascript dependency

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

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
            }
          }
        }
      ]
    }
  });

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.

GeordieP/sveltex

Sveltex

Install in 4 easy step.

How to use ?