Sigil in LiveView for Svelte

[woutdp]

So I had this idea that you can use a Sigil for defining Svelte inside the render function, inspired by https://surface-ui.org/

I think it should be possible, here's the idea:

Before

defmodule ExampleWeb.LiveExample4 do
  use ExampleWeb, :live_view

  def render(assigns) do
    ~H"""
    <LiveSvelte.render name="LogList" props={%{items: @items}} />
    """
  end

  def mount(_params, _session, socket) do
    if connected?(socket), do: :timer.send_interval(1000, self(), :tick)
    {:ok, assign(socket, :items, [])}
  end

  def handle_event("add_item", %{"body" => body}, socket) do
    {:noreply, assign(socket, :items, add_log(socket, body))}
  end

  def handle_info(:tick, socket) do
    datetime =
      DateTime.utc_now()
      |> DateTime.to_string()

    {:noreply, assign(socket, :items, add_log(socket, datetime))}
  end

  defp add_log(socket, body) do
    [%{id: System.unique_integer([:positive]), body: body} | socket.assigns.items]
  end
end

<script>
    import {slide, fly} from "svelte/transition"

    export let pushEvent
    export let items = []
    let body
    let i = 1
    let showItems = true

    function addItem() {
        if (!body) return
        pushEvent("add_item", {body})
        body = ""
    }
</script>

<div class="flex flex-col">
    <label>
        <input type="checkbox" bind:checked={showItems} />
        show list
    </label>

    <label>
        <input type="range" bind:value={i} max={items.length} />
        {i}
    </label>

    <div class="mb-2">
        <form>
            <input type="test" bind:value={body} class="border rounded px-2 py-1" />
            <button type="submit" class="bg-black rounded text-white px-2 py-1 font-bold" on:click|preventDefault={addItem}>
                Add item
            </button>
        </form>
    </div>
</div>

{#if showItems}
    <div transition:fly={{x: -20}}>
        {#each items.slice(0, i) as item (item.id)}
            <div in:fly={{x: -40}}>
                <div transition:slide|local class="py-2 border-t border-[#eee]">
                    {item.id}: {item.body}
                </div>
            </div>
        {/each}
    </div>
{/if}

After

In the above code, you have just the <LiveSvelte.render name="LogList" props={%{items: @items}} /> inside the render.

It would make more sense to include the Svelte code directly in the render like so:

defmodule ExampleWeb.LiveExample4 do
  use ExampleWeb, :live_view

  def render(assigns) do
    ~SVELTE"""
    <script>
        import {slide, fly} from "svelte/transition"
    
        export let pushEvent
        export let items = []
        let body
        let i = 1
        let showItems = true
    
        function addItem() {
            if (!body) return
            pushEvent("add_item", {body})
            body = ""
        }
    </script>
    
    <div class="flex flex-col">
        <label>
            <input type="checkbox" bind:checked={showItems} />
            show list
        </label>
    
        <label>
            <input type="range" bind:value={i} max={items.length} />
            {i}
        </label>
    
        <div class="mb-2">
            <form>
                <input type="test" bind:value={body} class="border rounded px-2 py-1" />
                <button type="submit" class="bg-black rounded text-white px-2 py-1 font-bold" on:click|preventDefault={addItem}>
                    Add item
                </button>
            </form>
        </div>
    </div>
    
    {#if showItems}
        <div transition:fly={{x: -20}}>
            {#each items.slice(0, i) as item (item.id)}
                <div in:fly={{x: -40}}>
                    <div transition:slide|local class="py-2 border-t border-[#eee]">
                        {item.id}: {item.body}
                    </div>
                </div>
            {/each}
        </div>
    {/if}
    """
  end

  def mount(_params, _session, socket) do
    if connected?(socket), do: :timer.send_interval(1000, self(), :tick)
    {:ok, assign(socket, :items, [])}
  end

  def handle_event("add_item", %{"body" => body}, socket) do
    {:noreply, assign(socket, :items, add_log(socket, body))}
  end

  def handle_info(:tick, socket) do
    datetime =
      DateTime.utc_now()
      |> DateTime.to_string()

    {:noreply, assign(socket, :items, add_log(socket, datetime))}
  end

  defp add_log(socket, body) do
    [%{id: System.unique_integer([:positive]), body: body} | socket.assigns.items]
  end
end

Discussion/thoughts

• This feels like a supercharged LiveView with Javascript support
• What should the sigil be called? SVELTE, or one letter? Which letter?
• What's cool about this is it gives you an alternative way of defining the LiveView, with imo better syntax for things like if statements etc and way better support for Javascript. It doesn't allow you to do elixir things inside the template though.
• What's happening here is we don't actually send HTML over the websocket, we only send the data. Could this be a problem? I'm not sure.
• Is it even possible? Somehow we need to compile Svelte from the sigil.
• I wish Node wasn't needed to run render Svelte on the server, it adds this extra dependency to set up and might slow things down. Although still need to benchmark it.
• What kind of features do we lose that LiveView gives you, and could we add them to Svelte?

Tagging a couple of people who might be interested:
@dev-guy @gevera @jrasanen @markevans

[dev-guy]

That would be really nice! SV or SVELTE would be great. I like the vscode svelte extension - it would be nice to have the same DX. It’s unfortunate that svelte doesn’t have a way to declare props.

[jrasanen]

This feels like a supercharged LiveView with Javascript support

Agreed, I like the idea!

What should the sigil be called? SVELTE, or one letter? Which letter?

~SVELTE or SV would likely shorten over time into ~S, so I'd favor picking one letter sigil from the start. I don't have strong opinions on which letter it should be.

What's cool about this is it gives you an alternative way of defining the LiveView, with imo better syntax for things like if statements etc and way better support for Javascript. It doesn't allow you to do elixir things inside the template though.

It is an idea worth exploring! I need to become more familiar with the frontend-related Phoenix to comment on more, so correct me if I'm wrong, but to me it sounds like we're exchanging some composability and interactivity with Elixir into JavaScript + Svelte?

I wish Node wasn't needed to run render Svelte on the server, it adds this extra dependency to set up and might slow things down. Although still need to benchmark it.

Regarding dependencies, I could imagine Deno being a more portable dependency than NodeJS. There also is a Svelte Adapter for Deno. That said, I haven't tried Deno yet, and perhaps NodeJS could be an appropriate starting point for the initial implementation.

[terrisgit]

I second the use of Deno. In addition to Deno’s advantages, it would generate additional interest in LiveSvelte.

[woutdp]

It is an idea worth exploring! I need to become more familiar with the frontend-related Phoenix to comment on more, so correct me if I'm wrong, but to me it sounds like we're exchanging some composability and interactivity with Elixir into JavaScript + Svelte?

So the way I see it is it exchanges the LiveView model of directly updating the HTML, with just sending pure data back and forth. Svelte takes care of the interactivity. Advantage being it's JavaScript compatible. It's hard for me to see now what you would lose, but I'm sure there's something, just want to put it into practice first to get a good idea. You lose phoenix components, but you get Svelte components in return, which I think have all the features that Phoenix components provide.

[terrisgit]

One of the pitches of Phoenix is not writing JavaScript, so that is what devs would be losing. In other words, they don't want to write JavaScript so unless it's hidden, LiveSvelte won't be palatable. I'm using LiveSvelte because a small amount of my app needs complex third party client JS libraries like TipTap. What you are gaining with any sort of Svelte (or React or ...) integration is rich client side interactivity (esp animations) without learning Phoenix idioms (or workarounds depending on your POV). There may also be some loss of functionality with the way forms work in Phoenix. I am intentionally not mentioning LiveView because LiveSvelte makes an excellent case that devs still get all the "assigns" benefits of LiveView and presumably also those of PubSub. However, I don't know enough about LiveView to say.

[terrisgit]

Single letter sigils are fascinating. The fact that the community has avoided conflicts with at most 26*2 characters is testimony to its good nature as well as its relatively small size. Small doesn’t mean bad — advantages include the ability to evoke change without a slow moving committee.

[terrisgit]

Can attr/3 define the props for a LiveSvelte component?

[woutdp]

Single letters makes sense, just want to make sure it's not being used by something else yet, but I assume we can find a letter, even if it's not something like ~S or ~s.

I think I need to make a POC and then just see where the pain points are, I'm not even sure we need a way to set attributes, they could be automatically set, just like ~H and then captured inside Svelte with the export let statement

[terrisgit]

Unless you're thinking of a new name for this project, I think it's either S or L.

[woutdp]

I'll go with L for now, S is taken. In the next version of Elixir there's support for multi-letter uppercase sigils, LV might be a good candidate

[dev-guy]

By the way, ~L is for leex templates (L for LiveView I guess)

[woutdp]

Hmm ok, what about V?

[jrasanen]

A quick search for elixir, phoenix and "sigil_v" yields zero results so seems to be available

[woutdp]

Took a look at it today, it's not so easy, if anyone is more familiar with macro's help is definitely welcome. I'll let it simmer for a bit in the back of my mind :)

[terrisgit]

Highly recommend looking into spark instead of raw macros. It's still going to be hard though. https://hexdocs.pm/spark/get-started-with-spark.html

[woutdp]

I've got a prototype working, it's pretty cool:

defmodule ExampleWeb.LiveSigil do
  use ExampleWeb, :live_view

  def render(assigns) do
    ~V"""
    <script>
      export let number = 5
      let other = 1

      $: combined = other + number
    </script>

    <div class="flex flex-col">
      <p>This is number: {number}</p>
      <p>This is other: {other}</p>
      <p>This is other + number: {combined}</p>
      <button phx-click="increment">Increment</button>
      <button on:click={() => other += 1}>Increment</button>
    </div>
    """
  end

  def mount(_params, _session, socket) do
    {:ok, assign(socket, :number, 1)}
  end

  def handle_event("increment", _value, socket) do
    {:noreply, assign(socket, :number, socket.assigns.number + 1)}
  end
end

Still need to test it in production.

To make it work it's pretty straightforward actually, something like this works:

defmodule LiveSvelte.Sigil do
  @moduledoc false

  import Phoenix.Component

  @doc false
  def get_props(assigns) do
    prop_keys =
      assigns
      |> Map.get(:__changed__)
      |> Map.keys()

    assigns
    |> Enum.filter(fn {k, _v} -> k in prop_keys end)
    |> Enum.into(%{})
  end

  @doc false
  defmacro sigil_V({:<<>>, _meta, [string]}, []) do
    File.write!("./assets/svelte/_build/#{__CALLER__.module}.svelte", string)

    quote do
      ~H"""
      <LiveSvelte.render name={"_build/#{__MODULE__}"} props={get_props(assigns)} />
      """
    end
  end
end

The Svelte file gets picked up and compiled, and we invoke LiveSvelte in the Heex template

Still need to refine it more but it's exciting :)

I'll also make a video and a blogpost about this.

Also, probably need a Svelte syntax highlighter for VS Code and Neovim for the ~V sigil.

[terrisgit]

This is great! If I used this as a component, how would I specify a different initial value for "number"?

[woutdp]

Change 5 to the desired initial value

      export let number = 5

[terrisgit]

I meant as a prop so the value could be read from the database and passed to the component. I will read up on phoenix 1.7’s new props declarations and work on an example using live_svelte and this new sigil.

[woutdp]

Thanks, not sure what you mean but let me know! Just note that this is not a component, this is an alternative LiveView DSL.

[woutdp]

Also, all changes are done in the post-hackathon branch. I entered the Svelte hackathon with this project and master shouldn't change until the winners are announced, this will take around 2 weeks.

[woutdp]

Works in production, version 0.4.2-rc0 of LiveSvelte contains all the code to make it work.
Documentation about it can be found here: https://github.com/woutdp/live_svelte/tree/post-hackathon#livesvelte-as-an-alternative-liveview-dsl

I'll wait on merging this with master until the Svelte hackathon is finished

[woutdp]

Demo:

2.webm

[dev-guy]

Since this leverages HEEX I wonder if I can use Phoenix components like <.icon>

[woutdp]

You'd have to do something like this:

~H"""
<.icon>...<.icon/>
<LiveSvelte.render name="Component" />
"""

That being said, there are some Svelte icon libraries you can use, so you can import them in you Svelte file (or sigil) and then use them there.

[dev-guy]

I haven’t dug into icons enough yet but I would definitely like to use heroicons v2 in svelte and phoenix views in the same app and get the benefits of icon purging that is apparently part of tailwind. I know it’s off topic but just thought this was a good opportunity to add my findings while building a hybrid app.

[dev-guy]

This awesome but I will need to turn off ssr conditionally ie

<LiveSvelte.render ssr={false} name="..." />

Another sigil? Is there another way to do this without dropping to HEEX manually? SSR seems like the exception for Phoenix apps. Perhaps it should default to false?

[woutdp]

I'll make something for this so you can specify it as an option in the mount

[dev-guy]

Can import LiveSvelte.Sigil be replaced by something along the lines of use MyAppWeb, :live_svelte ?

  use MyAppWeb, :live_view
  import LiveSvelte.Sigil

  def render(assigns) do
    ~V"""
    <script>

[woutdp]

Oh hmm interesting, I'm not sure what I prefer, I think I prefer the sigil but I wonder what other people prefer.

Actually it's completely up to how you want to define it as. useMyAppWeb, :live_view is defined by the application and can be changed. What's important is that LiveSvelte.Sigil is imported somewhere.

[dev-guy]

I want to use the sigil. I think “import LiveSvelte.Sigil” is too specific. Perhaps live svelte would have more macros functions and whatnot later on.

[woutdp]

Maybe import LiveSvelte? I'll see if I can make that work

[dev-guy]

I think I already mentioned this and it’s a minor concern but it’s a bummer that the sigil would require a new vscode extension (like the heex one) instead of being able to use the existing svelte extension which is quite good. That is a reason to use the sigil for smallish amounts of content.

[woutdp]

Still need to investigate. Surface-ui suffers from the same issue, and probably worse as they invented their own language instead of using an exisiting one, there might be a way to hook up the heex and Svelte plugins together by editing one of them

[woutdp]

Version 0.5.0-rc0 has the latest version of ~V.

• do import LiveSvelte inside your live_view
• svelte_opts for specifying options inside the sigil

Documentation can be found in the readme on the post-hackathon branch

Release is scheduled for sometime next week after I finish a new blog post, new video and when Svelte Hack is over.

[bananoid]

Are LiveView stream supported in LiveSvelte?

[woutdp]

I quickly hacked something together that works for streams.

There are a couple of things you need to take care of and it's not super elegant, but there should be a better way.
First, since we're sending data instead of raw HTML, our json encoder Jason needs to know how to deal with streams, so you need to configure that.
Then also, since our streams variable gets changed on every insert, we need to keep a list of each element that we encountered. So we keep a logs variable in this case, and then we use the computed $: specifier that updates the logs everytime streams changes.

So I'd say yes it works, but it's not looking super pretty. There might be a better way of doing this :)

Also there's a bug, but it might be an easy fix, where on initial render the first element gets overridden.

Also I didn't handle the delete case, but that should be doable by finding the id and removing it from the logs list.

defmodule ExampleWeb.LiveStream do
  use ExampleWeb, :live_view

  require Protocol

  defimpl Jason.Encoder, for: MapSet do
    def encode(struct, opts) do
      Jason.Encode.list(Enum.to_list(struct), opts)
    end
  end

  defimpl Jason.Encoder, for: Tuple do
    def encode(data, options) when is_tuple(data) do
      data
      |> Tuple.to_list()
      |> Jason.Encode.list(options)
    end
  end

  Protocol.derive(Jason.Encoder, Phoenix.LiveView.LiveStream, only: [:name, :inserts, :deletes])

  def render(assigns) do
    ~V"""
    <script>
      export let streams

      let logs = []

      $: logs = [...logs, streams.logs.inserts[0][2]]
    </script>

    <ul>
      {#each logs as log}
        <li>
          {log.id} - {log.body}
        </li>
      {/each}
    </ul>
    """
  end

  def mount(_params, _session, socket) do
    if connected?(socket), do: :timer.send_interval(1000, self(), :tick)
    {:ok, stream(socket, :logs, [add_log("initial")])}
  end

  def handle_info(:tick, socket) do
    datetime =
      DateTime.utc_now()
      |> DateTime.to_string()

    {:noreply, stream_insert(socket, :logs, add_log(datetime))}
  end

  defp add_log(body) do
    %{id: System.unique_integer([:positive]), body: body}
  end
end

[bananoid]

Thanks for the fast answer.
Do you also have a VSCode solution for syntax highlighting with the ~V sigil?

[woutdp]

Not yet, secretly hoping someone makes something for it before I try to tackle it. I'm not sure if VS code has treesitter but if it does, it might be possible to use the neovim solution, but not hopeful on that.

[woutdp]

Sigils are now in 0.5.0, closing the discussion