Svelte framework on Phoenix

To get started you should just need to install the svelte + svelte loader in the webpack pipeline of phoenix. Then use the client side component api to put components into the server side rendered html.

I’m also interested in it, but haven’t yet have the time to explore the solutions.

This link should give some hints though, you can then use the nodejs package to render the templates from the server side.

And here’s a demo: https://github.com/syfgkjasdkn/svelte-phoenix-demo

Relevant commit: https://github.com/syfgkjasdkn/svelte-phoenix-demo/commit/3102c4b12dfdf290819c9b4df6324dcb6c3211ad

I’d like to thank everyone here for the help.

I did the ajustments in Webpack following the demo provided and the template from Svelte (template-webpack/webpack.config.js at master · sveltejs/template-webpack · GitHub), which also set things like:

module.exports = {
	(...)
	resolve: {
		extensions: ['.mjs', '.js', '.svelte']

I’ve bumped into an error (Runtime Error “require is not defined”) in the browser that prevented requires() injection into the index.mjs file.
I was able to get things working by the solution provided in https://stackoverflow.com/questions/52366829/require-is-not-defined-using-webpack-and-yarn, which consists in including a especific rule for .mjs in the webpack.config.js like:

{
        test: /\.mjs$/,
        include: /node_modules/,
        type: "javascript/auto",
      },

If anyone could share some design patterns tips on how to best integrate phoenix templates with Svelte components I would greatly appreciate.