# LiveSvelte

LiveSvelte renders Svelte directly into your Phoenix LiveView and enables E2E reactivity.

## Features

- Server-Side Rendered (SSR) Svelte
- End-To-End Reactivity
- Svelte Preprocessing support with [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess)
- Tailwind support

## Docs
<https://hexdocs.pm/live_svelte>

## Installation

Add `live_svelte` to your list of dependencies in `mix.exs`:

```elixir
def deps do
  [
    {:live_svelte, "~> 0.1.0-rc0"}
  ]
end
```

Run the following in your terminal
```bash
mix deps.get
mix live_svelte.setup
```

Make sure you have Node installed, you can verify this by running `node --version` in your project directory.

## Usage

### Basic Example

#### Create a Svelte component

```svelte
<script>
    export let number = 1
    export let pushEvent

    function increase() {
        pushEvent('set_number', { number: number + 1 }, () => {})
    }

    function decrease() {
        pushEvent('set_number', { number: number - 1 }, () => {})
    }
</script>

<p>The number is {number}</p>
<button on:click={increase}>+</button>
<button on:click={decrease}>-</button>
```

#### Create a LiveView

```elixir
# `/lib/app_web/live/live_svelte.ex`
defmodule AppWeb.SvelteLive do
  use AppWeb, :live_view

  def render(assigns) do
    ~H"""
    <.live_component
      module={LiveSvelte}
      id="Example"
      name="Example"
      props={%{number: @number}}
    />
    """
  end

  def handle_event("set_number", %{"number" => number}, socket) do
    {:noreply, assign(socket, :number, number)}
  end

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

```elixir
# `/lib/app_web/router.ex`
import Phoenix.LiveView.Router

scope "/", AppWeb do
  ...
  live "/svelte", SvelteLive
  ...
end
```

###

To use the preprocessor, install the desired preprocessor.

e.g. Typescript
```
cd assets && npm install --save-dev typescript
```

## Credits
- [Ryan Cooke](https://dev.to/debussyman) - [E2E Reactivity using Svelte with Phoenix LiveView](https://dev.to/debussyman/e2e-reactivity-using-svelte-with-phoenix-liveview-38mf)
- [Svonix](https://github.com/nikokozak/svonix)