Phoenix with svelte

mix phx.new <project name> --no-ecto
cd <project name>/assets
npm i svelte svelte-loader --save
mkdir -p js/svelte

install Sveltex in mix.exs

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

run mix deps.get

modify /assets/webpack.config.js

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

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

modify /assets/js/app.js

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

create /assets/js/svelte/test.svelte

<script>
export let name;
</script>

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

Add into view template

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