Add some examples

examples/log_list/LogList.svelte

@@ -0,0 +1,48 @@
+<script>
+    import {slide, fly} from 'svelte/transition'
+
+    export let pushEvent
+    export let items = []
+
+    let newItemName
+    let i = 1
+    let showItems = true
+
+    function addItem() {
+        if (!newItemName) return
+        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}>
+        {i}
+    </label>
+
+    <div class="mb-2">
+        <form>
+            <input type="test" bind:value={newItemName} class="border rounded px-2 py-1"/>
+            <button type="submit" on:click|preventDefault={addItem} class="bg-black rounded text-white px-2 py-1 font-bold">Add item</button>
+        </form>
+    </div>
+</div>
+
+{#if showItems}
+    <div transition:fly={{x: -20}}>
+        {#each items.slice(0, i) as item (item.id)}
+            <div in:fly={{x: -40}}>
+                <div transition:slide|local class="py-2 border-t border-[#eee]">
+                    {item.id}: {item.name}
+                </div>
+            </div>
+        {/each}
+    </div>
+{/if}
+

examples/log_list/live_svelte.ex

@@ -0,0 +1,40 @@
+defmodule Examples.LogListLive do
+  use ExamplesWeb, :live_view
+
+  def render(assigns) do
+    ~H"""
+    <.live_component
+      module={LiveSvelte}
+      id="LogList"
+      name="LogList"
+      props={%{items: @items}}
+    />
+    """
+  end
+
+  def handle_event("add_item", %{"name" => name}, socket) do
+    socket =
+      socket
+      |> assign(:items, [%{id: System.unique_integer([:positive]), name: name} | socket.assigns.items])
+
+    {:noreply, socket}
+  end
+
+  def mount(_params, _session, socket) do
+    if connected?(socket), do: :timer.send_interval(1000, self(), :tick)
+
+    {:ok, assign(socket, :items, [])}
+  end
+
+  def handle_info(:tick, socket) do
+    datetime =
+      DateTime.utc_now()
+      |> DateTime.to_string()
+
+    socket =
+     socket
+     |> assign(:items, [%{id: System.unique_integer([:positive]), name: datetime} | socket.assigns.items])
+
+    {:noreply, socket}
+  end
+end

examples/simple/Numbers.svelte

@@ -1,17 +1,17 @@
 <script>
-    export let number = 1;
-    export let pushEvent;
-    
+    export let number
+    export let pushEvent
+
     function increase() {
         pushEvent('set_number', { number: number + 1 })
     }
-    
+
     function decrease() {
         pushEvent('set_number', { number: number - 1 })
     }
 </script>
 
-<h1 class="text-red">Component is working</h1>
+<h1>Component is working</h1>
 <p>The number is {number}</p>
 
 <button on:click={increase}>+</button>

examples/simple/live_svelte.ex

@@ -0,0 +1,22 @@
+defmodule Examples.NumbersLive do
+  use ExamplesWeb, :live_view
+
+  def render(assigns) do
+    ~H"""
+    <.live_component
+      module={LiveSvelte}
+      id="Numbers"
+      name="Numbers"
+      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

lib/mix/tasks/configure_esbuild.ex

@@ -6,7 +6,7 @@ defmodule Mix.Tasks.LiveSvelte.ConfigureEsbuild do
 
     Mix.Project.deps_paths(depth: 1)
     |> Map.fetch!(:live_svelte)
-    |> Path.join("assets/**/*{.svelte,.js}")
+    |> Path.join("assets/**/*{.js}")
     |> Path.wildcard()
     |> Enum.each(fn file ->
       split = Path.split(file)
@@ -21,5 +21,7 @@ defmodule Mix.Tasks.LiveSvelte.ConfigureEsbuild do
 
       Mix.Generator.copy_file(file, path)
     end)
+
+    Mix.Generator.create_directory("assets/svelte/components")
   end
 end