From 6cb9ce7c77183cec3fdf6907a854c905e18f99ac Mon Sep 17 00:00:00 2001 From: Dmitrii Maganov Date: Fri, 18 Aug 2023 09:48:07 +0300 Subject: [PATCH] Add socket prop to skip ssr for live mounts and navigation --- .../lib/example_web/live/live_chat.ex | 1 + .../example_web/live/live_counter_hybrid.ex | 2 +- .../lib/example_web/live/live_json.ex | 2 +- .../lib/example_web/live/live_light.ex | 4 ++-- .../lib/example_web/live/live_log_list.ex | 2 +- .../example_web/live/live_simple_counter.ex | 2 +- .../example_web/live/live_slots_experiment.ex | 2 +- .../lib/example_web/live/live_struct.ex | 2 +- lib/component.ex | 22 ++++++++++++++----- lib/components.ex | 10 +++------ 10 files changed, 28 insertions(+), 21 deletions(-) diff --git a/example_project/lib/example_web/live/live_chat.ex b/example_project/lib/example_web/live/live_chat.ex index 6d38196..8aaa37b 100644 --- a/example_project/lib/example_web/live/live_chat.ex +++ b/example_project/lib/example_web/live/live_chat.ex @@ -25,6 +25,7 @@ defmodule ExampleWeb.LiveExample6 do messages={@messages} name={@name} class="w-full h-full flex justify-center items-center" + socket={@socket} /> """ diff --git a/example_project/lib/example_web/live/live_counter_hybrid.ex b/example_project/lib/example_web/live/live_counter_hybrid.ex index b9cb82a..a6ae013 100644 --- a/example_project/lib/example_web/live/live_counter_hybrid.ex +++ b/example_project/lib/example_web/live/live_counter_hybrid.ex @@ -6,7 +6,7 @@ defmodule ExampleWeb.LiveExample3 do ~H"""

Hybrid: LiveView + Svelte

- <.CounterHybrid number={@number} /> + <.CounterHybrid number={@number} socket={@socket} /> """ end diff --git a/example_project/lib/example_web/live/live_json.ex b/example_project/lib/example_web/live/live_json.ex index 50e4ed5..eb8b223 100644 --- a/example_project/lib/example_web/live/live_json.ex +++ b/example_project/lib/example_web/live/live_json.ex @@ -5,7 +5,7 @@ defmodule ExampleWeb.LiveJson do ~H"""
- SSR: <.svelte name="LiveJson" live_json_props={%{big_data_set: @ljbig_data_set}} /> + SSR: <.svelte name="LiveJson" live_json_props={%{big_data_set: @ljbig_data_set}} socket={@socket} />
No SSR: diff --git a/example_project/lib/example_web/live/live_light.ex b/example_project/lib/example_web/live/live_light.ex index 38a49a8..fc73873 100644 --- a/example_project/lib/example_web/live/live_light.ex +++ b/example_project/lib/example_web/live/live_light.ex @@ -11,8 +11,8 @@ defmodule ExampleWeb.LiveLights do ~H"""

Light Bulb Controller

- <.svelte name="LightStatusBar" props={%{brightness: @brightness}} /> - <.svelte name="LightControllers" props={%{isOn: isOn?(@brightness)}} /> + <.svelte name="LightStatusBar" props={%{brightness: @brightness}} socket={@socket} /> + <.svelte name="LightControllers" props={%{isOn: isOn?(@brightness)}} socket={@socket} />
""" end diff --git a/example_project/lib/example_web/live/live_log_list.ex b/example_project/lib/example_web/live/live_log_list.ex index eb53b6e..172076f 100644 --- a/example_project/lib/example_web/live/live_log_list.ex +++ b/example_project/lib/example_web/live/live_log_list.ex @@ -3,7 +3,7 @@ defmodule ExampleWeb.LiveExample4 do def render(assigns) do ~H""" - <.svelte name="LogList" props={%{items: @items}} /> + <.svelte name="LogList" props={%{items: @items}} socket={@socket} /> """ end diff --git a/example_project/lib/example_web/live/live_simple_counter.ex b/example_project/lib/example_web/live/live_simple_counter.ex index 075854f..10e04e4 100644 --- a/example_project/lib/example_web/live/live_simple_counter.ex +++ b/example_project/lib/example_web/live/live_simple_counter.ex @@ -15,7 +15,7 @@ defmodule ExampleWeb.LiveExample2 do

LiveSvelte

- <.svelte name="SimpleCounter" props={%{number: @number}} /> + <.svelte name="SimpleCounter" props={%{number: @number}} socket={@socket} />
""" diff --git a/example_project/lib/example_web/live/live_slots_experiment.ex b/example_project/lib/example_web/live/live_slots_experiment.ex index aca99e9..d26ad8b 100644 --- a/example_project/lib/example_web/live/live_slots_experiment.ex +++ b/example_project/lib/example_web/live/live_slots_experiment.ex @@ -3,7 +3,7 @@ defmodule ExampleWeb.LiveSlotsExperiment do def render(assigns) do ~H""" - <.svelte name="SlotsExperiment"> + <.svelte name="SlotsExperiment" socket={@socket}> Inside Slot """ diff --git a/example_project/lib/example_web/live/live_struct.ex b/example_project/lib/example_web/live/live_struct.ex index 0406dc7..70f9054 100644 --- a/example_project/lib/example_web/live/live_struct.ex +++ b/example_project/lib/example_web/live/live_struct.ex @@ -11,7 +11,7 @@ defmodule ExampleWeb.LiveStruct do def render(assigns) do ~H"""

An example of how to pass a struct to Svelte:

- <.svelte name="Struct" props={%{struct: @struct}} /> + <.svelte name="Struct" props={%{struct: @struct}} socket={@socket} /> """ end diff --git a/lib/component.ex b/lib/component.ex index c3da42e..01c96b5 100644 --- a/lib/component.ex +++ b/lib/component.ex @@ -3,6 +3,7 @@ defmodule LiveSvelte do import Phoenix.HTML import LiveSvelte.LiveJson + alias Phoenix.LiveView alias LiveSvelte.Slots alias LiveSvelte.SSR @@ -38,6 +39,13 @@ defmodule LiveSvelte do examples: [true, false] ) + attr( + :socket, + :map, + default: nil, + doc: "LiveView socket, should be provided when rendering inside LiveView" + ) + attr( :live_json_props, :map, @@ -55,6 +63,7 @@ defmodule LiveSvelte do """ def svelte(assigns) do init = assigns.__changed__ == nil + dead = assigns.socket == nil or not LiveView.connected?(assigns.socket) slots = assigns @@ -62,7 +71,7 @@ defmodule LiveSvelte do |> Slots.js_process() ssr_code = - if init and assigns.ssr do + if init and dead and assigns.ssr do try do props = Map.merge( @@ -138,10 +147,10 @@ defmodule LiveSvelte do end @doc false - def get_ssr(assigns) do - case get_in(assigns, [:svelte_opts, :ssr]) do - nil -> true - ssr -> ssr + def get_socket(assigns) do + case get_in(assigns, [:svelte_opts, :socket]) || assigns[:socket] do + %LiveView.Socket{} = socket -> socket + _ -> nil end end @@ -158,7 +167,8 @@ defmodule LiveSvelte do """ diff --git a/lib/components.ex b/lib/components.ex index 532e573..5dc87b2 100644 --- a/lib/components.ex +++ b/lib/components.ex @@ -23,25 +23,21 @@ defmodule LiveSvelte.Components do defp name_to_function(name) do quote do def unquote(:"#{name}")(assigns) do - props = - assigns - |> Map.filter(fn - {:svelte_opts, _v} -> false - {k, _v} -> k not in [:__changed__, :__given__, :ssr] - _ -> false - end) + props = Map.drop(assigns, [:__changed__, :__given__, :ssr, :class, :socket]) var!(assigns) = assigns |> Map.put(:__component_name, unquote(name)) |> Map.put_new(:ssr, true) |> Map.put_new(:class, nil) + |> Map.put_new(:socket, nil) |> assign(:props, props) ~H"""