Packages
live_svelte
0.2.0-rc0
0.18.0
0.18.0-rc0
0.17.4
0.17.3
0.17.2
0.17.1
0.17.0
0.16.0
0.15.0
0.15.0-rc.6
0.15.0-rc.5
0.15.0-rc.4
0.15.0-rc.3
0.15.0-rc.2
0.15.0-rc.1
0.14.1
0.14.0
0.13.3
0.13.3-rc.1
0.13.2
0.13.1
0.13.0
0.12.0
0.11.0
0.10.2
0.10.1
0.10.0
0.9.0
0.9.0-rc2
0.9.0-rc1
0.9.0-rc0
0.8.0
0.7.1
0.7.0
0.6.0
0.5.1
0.5.0
0.5.0-rc0
0.4.2
0.4.2-rc0
0.4.1
0.4.1-rc0
0.4.0
0.3.5
0.3.5-rc1
0.3.5-rc0
0.3.4
0.3.3
0.3.2
0.3.1
0.3.0
0.3.0-rc1
0.3.0-rc0
0.2.0
0.2.0-rc1
0.2.0-rc0
0.1.0
0.1.0-rc5
0.1.0-rc4
0.1.0-rc3
0.1.0-rc2
0.1.0-rc1
0.1.0-rc0
E2E reactivity for Svelte and LiveView
Current section
Files
Jump to
Current section
Files
lib/live_component.ex
defmodule LiveSvelte do
@external_resource readme = Path.join([__DIR__, "../README.md"])
@moduledoc readme
|> File.read!()
|> String.split("<!-- MDOC -->")
|> Enum.fetch!(1)
@moduledoc since: "0.1.0-rc4"
use Phoenix.LiveComponent
import Phoenix.HTML
attr(:props, :map, default: %{})
attr(:name, :string)
slot(:inner_block)
@doc """
Renders a Svelte component on the server.
"""
@impl true
def render(assigns) do
~H"""
<div>
<%!-- TODO: This can return things like <title> which should be in the head --%>
<%!-- <script><%= raw(@ssr_render["head"]) %></script> --%>
<style><%= raw(@ssr_render["css"]["code"]) %></style>
<%= if not connected?(@socket) do %>
<%= raw(@ssr_render["html"]) %>
<% else %>
<div
id={id(@name)}
data-name={@name}
data-props={json(@props)}
data-slot-default={Base.encode64(get_slot(assigns))}
phx-update="ignore"
phx-hook="SvelteComponent"
>
</div>
<% end %>
</div>
"""
end
@impl true
def update(assigns, socket) do
# Making sure we only render once
ssr_code =
if not connected?(socket) do
props = Map.get(assigns, :props, %{})
slot = get_slot(assigns)
ssr_render(assigns.name, props, slot)
end
socket =
socket
|> assign(assigns)
|> assign(:ssr_render, ssr_code)
{:ok, socket}
end
defp get_slot(assigns) do
~H"""
<%= if assigns[:inner_block] do %>
<%= render_slot(@inner_block) %>
<% end %>
"""
|> Phoenix.HTML.Safe.to_iodata()
|> List.to_string()
end
defp ssr_render(name, props, slots \\ nil)
defp ssr_render(name, nil, slots), do: ssr_render(name, %{}, slots)
defp ssr_render(name, props, slots),
do: NodeJS.call!({"svelte/render", "render"}, [name, props, slots])
defp json(props) do
props
|> Jason.encode()
|> case do
{:ok, encoded} -> encoded
{:error, _} -> ""
end
end
defp id(name), do: "#{name}-#{System.unique_integer([:positive])}"
end