I appreciate being able to use AlpineJS inside my render functions, but often I catch myself wishing I could use Svelte syntax instead. And have the compiler turn the Svelte code to plain JS.

What do you think: how messy would that implementation get?

For example:

defmodule AppWeb.PageLive
  use Surface.LiveView

  def render(assigns) do
    ~F"""
      <div id="page">
        {#if @value and count == 0}
          <SurfaceComponent id="surface-component"/>
        {#else}
          <AnotherSurfaceComponent id="another-surface-component"/>
        {/if}

        <button on:click={handleClick}>
          Clicked {count} {count === 1 ? 'time' : 'times'}
        </button>
      </div>

    <script>
      let count = 0

      function handleClick() {
        count += 1
      }
    </script>
    """
  end
end

I am well aware that there are syntax conflicts right from the get-go between Svelte/JavaScript and Elixir/Phoenix/Surface. I reckon the best way of integrating Svelte is… not doing so. But rather extending Surface functionality into the JavaScript domain, or building a compiler layer on top of Phoenix from scratch – and being ‘inspired’ by Svelte.

Would it be a relieve to have such a tool… or not?