API Reference LiveSvelte v0.1.0-rc3

modules

Modules

examples

Examples

liveview

LiveView

defmodule App.SvelteLive do
  use App, :live_view

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

  def handle_event("add_item", %{"name" => name}, socket) do
    socket =
      socket
      |> assign(:items, socket.assigns.items ++ [name])
      |> assign(:i, length(socket.assigns.items) + 1)
      |> assign(:show_items, true)

    {:noreply, socket}
  end

  def mount(_params, _session, socket) do
    {:ok,
     socket
     |> assign(:items, ["One", "Two", "Three", "Four", "Five"])
     |> assign(:i, 3)
     |> assign(:show_items, true)}
  end
end

svelte-component

Svelte Component

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

    export let pushEvent
    export let i = 5
    export let items = []
    export let showItems = true

    let newItemName

    function addItem() {
        pushEvent('add_item', {name: newItemName})
        newItemName = ''
    }
</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}>
    </label>

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

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

Helper function for logging messages to the shell

mix-tasks

Mix Tasks

Creates Javascript files to be used by esbuild. Necessary for LiveSvelte to work.

Configures any necessary code changes inside Phoenix to make LiveSvelte work.

Installs npm dependencies for LiveSvelte.

Runs all setup tasks for LiveSvelte.