Live Components

[SimonLab]

So far in this tutorial we have put all the template code into a single file: /lib/live_view_todo_web/live/page_live.html.heex That is "OK" in a mini project like this, but it will quickly become unmaintainable in a larger LiveView codebase. We are therefore going to proactively migrate the templates to using PhoenixLiveComponents`.

see https://hexdocs.pm/phoenix_live_view/Phoenix.LiveComponent.html

Check the heex file https://github.com/dwyl/phoenix-liveview-todo-list-tutorial/blob/main/lib/live_view_todo_web/live/page_live.html.heex to see which parts can be extracted to its own component.

This heex file is not big, however creating a component will be used as an example on how to do it for bigger files.

[SimonLab]

check dependencies mix hex.outdated:

Updating phoenix_live_view to 0.18 will create some breaking changes. I'll start by fixing those

[SimonLab]

Warnings and error after updating dependencies:

Fixed with https://github.com/dwyl/phoenix-liveview-todo-list-tutorial/pull/70/commits/8fb1faeaa62a760bcef2236d4a269f662495b22a

[nelsonic]

Fixed. ✅