From d06616a53d30ae0f83e41d089f0cb3d4f065d956 Mon Sep 17 00:00:00 2001
From: Wout De Puysseleir <woutdp@gmail.com>
Date: Wed, 22 Feb 2023 21:34:32 -0800
Subject: [PATCH] Add some docs

---
 lib/live_component.ex | 84 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 84 insertions(+)

diff --git a/lib/live_component.ex b/lib/live_component.ex
index 89cc18a..d6ab0f6 100644
--- a/lib/live_component.ex
+++ b/lib/live_component.ex
@@ -1,4 +1,88 @@
 defmodule LiveSvelte do
+  @moduledoc ~S'''
+
+  ## Examples
+
+  ### 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
+
+      <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}
+  '''
+
   use Phoenix.LiveComponent
   import Phoenix.HTML