Packages
live_svelte
0.18.0
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/reload.ex
defmodule LiveSvelte.Reload do
@moduledoc """
Utilities for easier integration with Vite in development.
"""
use Phoenix.Component
attr :assets, :list, required: true
slot :inner_block, required: true, doc: "rendered when Vite path is not defined (production)"
@doc """
Renders Vite dev server assets in development, falls back to compiled assets in production.
When `config :live_svelte, vite_host: "http://localhost:5173"` is set, injects:
- `@vite/client` script (enables Vite HMR WebSocket)
- CSS assets as `<link rel="stylesheet">` tags
- JS assets as `<script type="module">` tags
When `vite_host` is not configured, renders the `inner_block` unchanged.
## Example
<LiveSvelte.Reload.vite_assets assets={["/js/app.js"]}>
<link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
</script>
</LiveSvelte.Reload.vite_assets>
"""
def vite_assets(assigns) do
vite_host = Application.get_env(:live_svelte, :vite_host)
assigns =
assigns
|> assign(:vite_host, vite_host)
|> assign(
:stylesheets,
for(path <- assigns.assets, String.ends_with?(path, ".css"), do: path)
)
|> assign(
:javascripts,
for(path <- assigns.assets, String.ends_with?(path, ".js"), do: path)
)
~H"""
<%= if @vite_host do %>
<script type="module" src={"#{@vite_host}/@vite/client"}>
</script>
<link :for={path <- @stylesheets} rel="stylesheet" href={"#{@vite_host}#{path}"} />
<script :for={path <- @javascripts} type="module" src={"#{@vite_host}#{path}"}>
</script>
<% else %>
{render_slot(@inner_block)}
<% end %>
"""
end
end