Packages

live_svelte

0.2.0-rc1
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

HexDocs

Current section

Files

Jump to
Readme
63 Versions
4 Dependencies
Dependants
Files
Activity
live_svelte lib live_component.ex
Raw

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



  alias LiveSvelte.Slots

  alias LiveSvelte.SSR



  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-slots={Slots.base_encode_64(@slots) |> json}

          phx-update="ignore"

          phx-hook="SvelteComponent"

        >

        </div>

      <% end %>

    </div>

    """

  end



  @impl true

  def update(assigns, socket) do

    slots =

      assigns

      |> Slots.rendered_slot_map()

      |> Slots.js_process()



    # Making sure we only render once

    ssr_code =

      if not connected?(socket) do

        SSR.render(assigns.name, Map.get(assigns, :props, %{}), slots)

      end



    socket =

      socket

      |> assign(assigns)

      |> assign(:slots, slots)

      |> assign(:ssr_render, ssr_code)



    {:ok, socket}

  end



  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