Add composition example

example_project/assets/svelte/CompositionParent.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import TextInput from "./TextInput.svelte";
+    
+    export let live;
+
+    let textInput = "Content";
+
+    function handleForm() {
+        live.pushEvent("validate-item", { name: textInput });
+    }
+</script>
+
+<form on:submit|preventDefault={handleForm}>
+    <TextInput value={textInput} name="element" id="123456" />
+    <button type="submit">Submit</button>
+</form>
+

example_project/assets/svelte/TextInput.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    export let value: string;
+    export let name: string;
+    export let id: string;
+</script>
+
+<div>
+    <input
+        type="text"
+        {name}
+        {id}
+        bind:value
+        class="mt-2 block w-full rounded-lg text-zinc-900 focus:ring-2
+        sm:text-sm sm:leading-6 dark:bg-zinc-700 dark:text-zinc-100
+        inlinedark:placeholder-zinc-300"
+    />
+</div>

example_project/lib/example_web/live/live_composition.ex

@@ -0,0 +1,14 @@
+defmodule ExampleWeb.LiveComposition do
+  use ExampleWeb, :live_view
+
+  def render(assigns) do
+    ~H"""
+    <.svelte name="CompositionParent" socket={@socket} />
+    """
+  end
+
+  def handle_event("validate-item", %{"name" => name}, socket) do
+    IO.puts(name)
+    {:noreply, socket}
+  end
+end

example_project/lib/example_web/router.ex

@@ -33,6 +33,7 @@ defmodule ExampleWeb.Router do
     live "/svelvet", LiveSvelvet
     live "/live-json", LiveJson
     live "/slots-experiment", LiveSlotsExperiment
+    live "/composition", LiveComposition
   end
 
   # Other scopes may use custom stacks.