Steffen Deusch
LightNews LightNews
banner
steffend.me
Steffen Deusch
@steffend.me
290 followers 71 following 77 posts
Software Developer (mostly Elixir).

Mainly here to read.

Fediverse https://chaos.social/@sd
Posts Replies Media Videos
steffend.me
One way to improve that right now is to use LiveComponents. Basically, instead of directly rendering the content of the tag given to `:for`, you render a LiveComponent instead, which does perform change-tracking on its own assigns. This is cumbersome though, as you need to define a separate module.
A HEEx template with code: ~H""" <ul> <.live_component :for={%{id: id, name: name} <- @items} module={MyListComponent} id={id} name={name} /> </ul> """
June 7, 2025 at 4:53 PM
steffend.me
One common pitfall when using lists in #LiveView is that they are not change-tracked. We might have something to improve that situation in an upcoming update! #MyElixirStatus #Phoenix #ElixirLang
A HEEx template: ~H""" <ul> <li :for={%{id: id, name: name} <- @items} :key={@id}> Count: <span>{@count}</span>, item: {name} </li> </ul> """ Notice the special `:key` attribute.
June 7, 2025 at 4:53 PM
steffend.me
In the past you'd need to either add a hook or a global `onBeforeElUpdated` dom option when defining your LiveSocket. Both would be really cumbersome for a library. The hook part is easier now with ColocatedHooks, but with `JS.ignore_attributes` it's even easier!
HTML Code: <details phx-mounted={JS.ignore_attributes(["open"])}> <summary>...</summary> ... </details>
May 30, 2025 at 10:40 AM
steffend.me
I recently showed one example of a macro component that renders markdown at compile time: bsky.app/profile/stef...

The code to do syntax highlighting is not much more complex.
An Elixir module with code: defmodule SyntaxHighlight do @behaviour Phoenix.Component.MacroComponent @impl true def transform({"pre", attrs, children, _tag_meta}, _meta) do code = Phoenix.Component.MacroComponent.ast_to_string(children) lang = Map.new(attrs)["language"] || raise ArgumentError, "language attribute is required" html_doc = highlight(String.trim_leading(code), lang) stylesheet = Makeup.Styles.HTML.Style.stylesheet(Makeup.Styles.HTML.StyleMap.monokai_style()) {:ok, {"pre", [{"class", "highlight"} | attrs], [ {"style", [], [stylesheet, ".highlight { padding: 8px; border-radius: 4px; }"], %{}}, html_doc ], %{}}} end defp highlight(code, lang) do Application.ensure_all_started([:makeup, :makeup_elixir, :makeup_eex, :makeup_syntect]) case Makeup.Registry.get_lexer_by_name(lang) do {lexer, opts} -> Makeup.highlight_inner_html(code, lexer: lexer, lexer_options: opts) _ -> code end end end A Phoenix component with code defp lv_code_sample(assigns) do ~H''' <pre :type={SyntaxHighlight} language="elixir" phx-no-curly-interpolation> defmodule MyAppWeb.ThermostatLive do use MyAppWeb, :live_view def render(assigns) do ~H""" Current temperature: {@temperature}°F <button phx-click="inc_temperature">+</button> """ end def mount(_params, _session, socket) do temperature = 70 # Let's assume a fixed temperature for now {:ok, assign(socket, :temperature, temperature)} end def handle_event("inc_temperature", _params, socket) do {:noreply, update(socket, :temperature, &(&1 + 1))} end end </pre> ''' end A webpage showing the syntax highlighted output next to a chrome devtools tab with the HTML showing the highlighting classes generated by the Elixir Makeup library.
May 30, 2025 at 10:40 AM
steffend.me
Macro components are a new, special kind of component in HEEx that works fully at compile time. It receives an HTML-AST representation of the node it is defined on and can transform it into something else. And that something else can also be nothing, removing a script and write it to a file.
HTML code of a HEEx template showing an `<input>` tag with `phx-hook` attribute. Directly below is a `<script>` tag with special `:type` attribute set to `{Phoenix.LiveView.ColocatedHook}`. a typical app.js from a LiveView application, showing a special import: import { hooks as colocatedHooks } from "phoenix-colocated/colocated_demo"; This import is then spread into the hooks parameter of the liveSocket: hooks: { ...colocatedHooks, ...hooks }
May 30, 2025 at 10:40 AM
steffend.me
1. Type definitions for public JavaScript interfaces.
I know that many people enjoy that you don't need to write much JavaScript when developing a LiveView application, but you cannot always avoid it entirely. We now have official type declarations shipped with the LiveView JS!
An editor window with a LiveView hooks object declaration: const hooks = { PhoneNumber: { mounted() { this. } } } The cursor position is currently after the dot of `this.` and the editor is suggesting all the available hook properties and methods like `beforeUpdate`, which is currently selected and shows a description of the beforeUpdate method on the right. An editor window where a LiveView hook is defined. Currently, the cursor position is inside a `mounted` method, the unfinished code snippet reading `this.js().`. The editor is suggesting all the available client-side JS commands. Currently selected is `addClass` with a description of the available parameters. An editor window defining a new LiveView LiveSocket instance. IntelliSense also works on the liveSocket declaration, currently suggesting the available methods in the `dom` property of the LiveSocket parameters.
May 30, 2025 at 10:40 AM
steffend.me
While working on Colocated Hooks in LiveView, we also found some other cool things you can do, such as rendering markdown at compile time 👀 #MyElixirStatus #ElixirLang #PhoenixLiveView
An Elixir module with contents: defmodule ColocatedDemoWeb.Markdown do @behaviour Phoenix.Component.MacroComponent @impl true def transform({"pre", attrs, children}, _meta) do markdown = Phoenix.Component.MacroComponent.AST.to_string(children) {:ok, html_doc, _} = Earmark.as_html(markdown) {"div", attrs, [html_doc]} end end A LiveView render function with contents: def render(assigns) do ~H""" <pre :type={ColocatedDemoWeb.Markdown} class="prose mt-8"> ## Hello World This is some markdown! ```elixir defmodule Hello do def world do IO.puts "Hello, world!" end end ``` ```html <h2>Hey</h2> ``` </pre> """ end A webpage with the rendered markdown content.
May 23, 2025 at 8:04 AM