Svelte bindings for Komodo Elixir library

Pre-installation

To write Svelte components, you'll need to work with the Svelte compiler somehow - this library does not cover that.

However, with the standard Phoenix ESBuild setup, it's easily done by:

1. Following the instructions in the Phoenix docs for using esbuild plugins
2. Add a Svelte ESBuild plugin such as esbuild-svelte
3. Adding svelte as a dev dependency to your assets npm install --save-dev svelte --prefix assets

NOTE: if you're using the tailwind hex package, you may find the styles generated by the esbuild plugin at priv/static/assets/app.css clash with the output configured by tailwind. If so, you can either change the tailwind config in config.exs to output to a different file (and update your root.html.heex accordingly), or you can use the esbuild-svelte plugin css option:

  sveltePlugin({
    compilerOptions: {
      dev: !deploy,
      css: "injected",
    },
  }),

If you are only using Svelte components as opposed to writing your own, you should be able to skip this step.

Versions

Version 0.0.1 of this package works with Svelte < 5, versions from 0.1.0 onwards work with Svelte >= 5.

Installation

• Follow the instructions from the Komodo library to render js components with Phoenix Liveview.

• Add the npm dependency komodo-svelte in the assets folder, e.g.

npm install --save komodo-svelte --prefix assets

Usage

If we have a Svelte Counter component that we would normally use in Svelte like so

<Counter
  counter={4}
  on:inc={(event) => console.log(`Increment by ${event.detail}`)}
/>

then we can render it from a LiveView with

  def render(assigns) do
    ~H"""
      <.js_component
        id="my-counter"
        component="Counter"
        props={%{counter: @counter}}
        callbacks={%{inc: {"increment", arg(1, [:detail])}}}
      />
    """
  end

  def handle_event("increment", amount, socket) do
    IO.puts("Increment by #{amount}")
    {:noreply, socket}
  end

To do the above you need configure the hook in your app.js like so:

// ...
import { registerJsComponents } from "komodo";
+import componentFromSvelte from "komodo-svelte";
+import Counter from "path/to/svelte/counter/component.svelte";
// ...

let liveSocket = new LiveSocket("/live", Socket, {
  // ...
  hooks: {
    // ...
    komodo: registerJsComponents({
      // ...
+      Counter: componentFromSvelte(Counter)
    }),
  },
});