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.