diff --git a/examples/log_list/LogList.svelte b/examples/log_list/LogList.svelte new file mode 100644 index 0000000..b3bfc0d --- /dev/null +++ b/examples/log_list/LogList.svelte @@ -0,0 +1,48 @@ + + +
+ + + + +
+
+ + +
+
+
+ +{#if showItems} +
+ {#each items.slice(0, i) as item (item.id)} +
+
+ {item.id}: {item.name} +
+
+ {/each} +
+{/if} + diff --git a/examples/log_list/live_svelte.ex b/examples/log_list/live_svelte.ex new file mode 100644 index 0000000..c2ee573 --- /dev/null +++ b/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 diff --git a/assets/svelte/components/Example.svelte b/examples/simple/Numbers.svelte similarity index 73% rename from assets/svelte/components/Example.svelte rename to examples/simple/Numbers.svelte index 5b7c624..65622c3 100644 --- a/assets/svelte/components/Example.svelte +++ b/examples/simple/Numbers.svelte @@ -1,17 +1,17 @@ -

Component is working

+

Component is working

The number is {number}

diff --git a/examples/simple/live_svelte.ex b/examples/simple/live_svelte.ex new file mode 100644 index 0000000..ea9c09c --- /dev/null +++ b/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 diff --git a/lib/mix/tasks/configure_esbuild.ex b/lib/mix/tasks/configure_esbuild.ex index 11d4b00..bafc564 100644 --- a/lib/mix/tasks/configure_esbuild.ex +++ b/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