View Source LiveSvelte (LiveSvelte v0.1.0-rc1)

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}

Link to this section Summary

Functions

Attributes

  • props (:map) - Defaults to %{}.
  • name (:string)
  • rendered (:boolean) - Defaults to false.

Link to this section Functions

attributes

Attributes

  • props (:map) - Defaults to %{}.
  • name (:string)
  • rendered (:boolean) - Defaults to false.
Link to this function

ssr_render(name, props \\ %{})

View Source

Callback implementation for Phoenix.LiveComponent.update/2.