Warning: phx-update="append" is deprecated, please use streams instead

ghenry · January 11, 2024, 4:20pm

Hi all,

Is this just a case of switching to stream() in my LV? Will try, just confused as it’s a phx-hook.

warning: phx-update="append" is deprecated, please use streams instead
Warning:   lib/sentrypeer_web/live/customer_nodes_live/overview.html.heex:30: SentrypeerWeb.CustomerNodesLive.Overview.render/1

github.com

SentryPeer/SentryPeerHQ/blob/907ac78702d08532bf0acd87dbea989af0866d55/lib/sentrypeer_web/live/customer_nodes_live/overview.html.heex#L33


      
            Live probes
          </h3>
          <%= if @node_probes == [] do %>
            <p class="text-sm text-gray-500 dark:text-slate-400">
              No probes at the moment.
            </p>
          <% else %>
            <div
              id="api-logger-realtime-container"
              phx-hook="SentrypeerApiLoggerRealtime"
              phx-update="append"
              class="overflow-y-auto h-32 p-2 mt-2 rounded-lg shadow text-green-200 font-mono bg-black text-xs"
            >
              <div id="api-logger-realtime">
                <%= for node_probe <- @node_probes do %>
                  <p id={"log-#{System.unique_integer()}"}>
                    <%= node_probe.event_timestamp %>
                    <%= node_probe.transport_type %>
                    <%= node_probe.source_ip %>
                    <%= node_probe.called_number %>
                    <%= node_probe.sip_method %>

Thanks.

codeanpeace · January 12, 2024, 1:50am

The supported options for phx-update went from:

The following phx-update values are supported:

replace - the default operation. Replaces the element with the contents

ignore - ignores updates to the DOM regardless of new content changes

append - append the new DOM contents instead of replacing

prepend - prepend the new DOM contents instead of replacing

in v0.18.11 to the following in v0.18.12:

The following phx-update values are supported:

replace - the default operation. Replaces the element with the contents

stream - supports stream operations. Streams are used to manage large collections in the UI without having to store the collection on the server

ignore - ignores updates to the DOM regardless of new content changes

Basically, the append and prepend options were consolidated into a stream option. This is because streams offers more flexibility and lets us to choose to append or prepend to a collection when calling stream_insert/4. It defaults to append, but can be set to prepend by specifying the :at option as 0.

So instead of setting @node_probes as a socket assign, you’d stream it instead. Similarly, you’d want to stream_insert/4 rather than updating it as a socket assign. To finish off, you’d update the template to use phx-update="stream" as well as the streamed collection e.g. <div :for={{dom_id, node_probe} <- @streams.node_probes} id={dom_id}>.

ghenry · January 12, 2024, 9:40am

Thank you very much! This is so kind of you to provide such a complete answer. Pointing me to those docs (which I forgot to search) would have been more than enough!

lkuty · May 29, 2024, 8:15am

Adding a blog article by Chris which provide a complete picture: Phoenix Dev Blog - Streams. Was useful to me.