LiveSvelte - E2E reactivity in LiveView with Svelte

Hi!

I wanted to introduce my latest project LiveSvelte. It allows you to render Svelte inside LiveView with end-to-end reactivity. It’s an extension on top of LiveView for those cases where something like hooks or alpine.js doesn’t cut it.

With LiveSvelte it’s relatively easy to get client side only state working. It’s also great for animations as Svelte has great support. And hooking into npm packages becomes easier.

It’s just a component so you can add it wherever you want inside your LiveView so you can take a hybrid approach.

Interested to hear feedback!

Github
Blogpost

34 Likes

Nice.

But getting some errors when building in Docker:

=> ERROR [builder 16/20] RUN mix assets.deploy 1.3s

[builder 16/20] RUN mix assets.deploy:
#26 1.253 /app/assets/node_modules/esbuild-svelte/dist/index.js:23
#26 1.253 const svelteFilter = (options == null ? void 0 : options.include) ?? SVELTE_FILTER;
#26 1.253 ^
#26 1.253
#26 1.253 SyntaxError: Unexpected token ‘?’
#26 1.253 at wrapSafe (internal/modules/cjs/loader.js:915:16)
#26 1.253 at Module._compile (internal/modules/cjs/loader.js:963:27)
#26 1.253 at Object.Module._extensions…js (internal/modules/cjs/loader.js:1027:10)
#26 1.253 at Module.load (internal/modules/cjs/loader.js:863:32)
#26 1.253 at Function.Module._load (internal/modules/cjs/loader.js:708:14)
#26 1.253 at Module.require (internal/modules/cjs/loader.js:887:19)
#26 1.253 at require (internal/modules/cjs/helpers.js:74:18)
#26 1.253 at Object. (/app/assets/build.js:2:22)
#26 1.253 at Module._compile (internal/modules/cjs/loader.js:999:30)
#26 1.253 at Object.Module._extensions…js (internal/modules/cjs/loader.js:1027:10)
#26 1.268 ** (exit) 1
#26 1.268 (mix 1.14.2) lib/mix/tasks/cmd.ex:74: Mix.Tasks.Cmd.run/1
#26 1.268 (mix 1.14.2) lib/mix/task.ex:421: anonymous fn/3 in Mix.Task.run_task/4
#26 1.268 (mix 1.14.2) lib/mix/task.ex:479: Mix.Task.run_alias/6
#26 1.268 (mix 1.14.2) lib/mix/cli.ex:84: Mix.CLI.run_task/2


executor failed running [/bin/sh -c mix assets.deploy]: exit code: 1

Not sure if error is LiveSvelte, Esbuild-svelte or Docker.

1 Like

Thanks I’ll take a look at this, I’ve created an issue for it here: Docker issue mix assets.deploy · Issue #20 · woutdp/live_svelte · GitHub

Hi @woutdp thanks for creating this project! I’ve used it successfully in a DEV environment, but I can’t figure out how to get SSR to work when I deploy it to fly.io.

Request: GET /demo/select_tickets
** (exit) an exception was raised:
** (NodeJS.Error) Cannot find module 'js/render'
Require stack:
- /app/lib/nodejs-2.0.0/priv/server.js
Error: Cannot find module 'js/render'
Require stack:
- /app/lib/nodejs-2.0.0/priv/server.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1021:15)
at Function.resolve (node:internal/modules/cjs/helpers:114:19)
at requireModule (/app/lib/nodejs-2.0.0/priv/server.js:10:34)
at requireModuleFunction (/app/lib/nodejs-2.0.0/priv/server.js:25:15)
at callModuleFunction (/app/lib/nodejs-2.0.0/priv/server.js:31:14)
at getResponse (/app/lib/nodejs-2.0.0/priv/server.js:44:26)
at Interface.onLine (/app/lib/nodejs-2.0.0/priv/server.js:53:39)
at Interface.emit (node:events:513:28)
at Interface._onLine (node:readline:491:10)
at Interface._normalWrite (node:readline:665:12)
(nodejs 2.0.0) lib/nodejs/supervisor.ex:80: NodeJS.Supervisor.call!/3
(live_svelte 0.3.5) lib/ssr.ex:19: LiveSvelte.SSR.render/3
(live_svelte 0.3.5) lib/component.ex:56: LiveSvelte."render (overridable 1)"/1
(phoenix_live_view 0.18.18) lib/phoenix_live_view/tag_engine.ex:68: Phoenix.LiveView.TagEngine.component/3
(camp 0.1.1) lib/camp_web/live_demo/demo_select_tickets_live.ex:112: anonymous fn/2 in CampWeb.DemoSelectTicketsLive.render/1
(phoenix_live_view 0.18.18) lib/phoenix_live_view/diff.ex:398: Phoenix.LiveView.Diff.traverse/7
(phoenix_live_view 0.18.18) lib/phoenix_live_view/diff.ex:544: anonymous fn/4 in Phoenix.LiveView.Diff.traverse_dynamic/7

I’ve checked that I’ve installed NodeJS on both the builder and runner images, and I’ve tried both 16.x and 18.x versions.

When I remote console into the running application, I get:

NodeJS.call("console.log", ["helloworld"])
{:error,
 "Cannot find module 'console.log'\nRequire stack:\n- /app/lib/nodejs-2.0.0/priv/server.js\nError: Cannot find module 'console.log'\nRequire stack:\n- /app/lib/nodejs-2.0.0/priv/server.js\n    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1021:15)\n    at Function.resolve (node:internal/modules/cjs/helpers:114:19)\n    at requireModule (/app/lib/nodejs-2.0.0/priv/server.js:10:34)\n    at requireModuleFunction (/app/lib/nodejs-2.0.0/priv/server.js:25:15)\n    at callModuleFunction (/app/lib/nodejs-2.0.0/priv/server.js:31:14)\n    at getResponse (/app/lib/nodejs-2.0.0/priv/server.js:44:26)\n    at Interface.onLine (/app/lib/nodejs-2.0.0/priv/server.js:53:39)\n    at Interface.emit (node:events:513:28)\n    at Interface._onLine (node:readline:491:10)\n    at Interface._normalWrite (node:readline:665:12)"}

I couldn’t find any solutions on the elixir-nodejs docs either.

It works well when I remove the NodeJS.Supervisor from application.ex.

Any guidance would be much appreciated!

Thanks @ziazek
I’ve created an issue for this js/render module not found on server · Issue #21 · woutdp/live_svelte · GitHub

I’ll take a look at it sometime this week. I have a fly.io project I want to integrate live_svelte with too so hopefully I’ll be able to reproduce it and write a fix.

1 Like

Thanks for creating this. I think it can be a really useful addition to Phoenix applications.

For anyone thinking ‘but why?!’ - I found the video of the talk that inspired LiveSvelte to be compelling:

2 Likes

@victorbjorklund @ziazek
Both issues are fixed I believe. Best to reinstall the entire package with version 0.4.0 and follow the installation guide.

2 Extra steps have been added to the installation which I’ll try to simplify some time in the future, but for now I just want to make sure it’s working in a production environment. Works for me on fly.io and performance is good but that’s just a sample of 1 :slight_smile:

If anyone has it running in production please let me know.

7 Likes

@woutdp I’ve got it working on fly.io too, with version 0.4.0. Performance appears to be good.

Kudos!

2 Likes

Wanted to talk about a new feature in LiveSvelte. You can now replace the default LiveView DSL with Svelte by using the ~V sigil. I hope to release it sometime next week in version 0.5.0 but you can preview it in version 0.5.0-rc0

Blogpost

16 Likes

I’m wondering why there is not more excitement about this?

I get that the key advantage of LiveView in the first place is getting away from the client-side js framework du jour, but this seems like quite a step up from using Alpine.js to do your sprinkling (I’m not sure what the latest phraseology is for that last bit of client-side functionality not easily workable in LiveView).

Others have mentioned that Alpine has security concerns in LiveView - does Svelte have the same problem?

I’m not questioning the feasibility of LiveSvelte, but I’m wondering how niche (or how valuable) a LiveView/Svelte developer will be in the job market. I am currently focussing on Phoenix/LiveView development and this thread has made me take a good long look at Svelte.

Great stuff Wout!

8 Likes

Just want to say, this is a great library. Really good for dropping in Svelte components from npm.
Using it for complicated client side interactions + modals.

Appreciate it!

4 Likes