home overview tags

Herman verschooten

These things I recently learned, that may be useful to myself and others in the future.

Upgrading an existing project to LiveView 0.18

Today I decided to upgrade one of my more recent projects to live_view 0.18.
After making the necessary changes to my mix.exs file and mix deps.get, I immediately ran into an issue.

== Compilation error in file lib/admin_web/views/layout_view.ex ==
** (CompileError) lib/admin_web/templates/layout/live.html.heex:1: undefined function live_component/1
(expected AdminWeb.LayoutView to define such a function or for it to be imported, but none are available)

I am using a live_component in my layout-view, I am already using the new <.live_component module={...} id={...}> syntax.
I took a peek at my go-to project LiveBeats, noticed they had added a use Phoenix.Component to their LiveBeatsWeb.LayoutView.

Added it too, and yeah compilation!

@jonr on Slack suggested that I instead add an import Phoenix.Component in my admin_web.ex macro, as mentioned in the docs.

On to the next issue.

function Phoenix.LiveView.assign/2 is undefined or private

What the? Huh?

I have an on_mount module in my router, that checks for the current logged in user and assigns it to the socket.
Apparently this too has been moved to Phoenix.Component.

These 2 seem to have been the most immediate issues to solve, the app functions.

Now let's see if there are any future deprecations we can solve.

LiveHelpers deprecation

In the Changelog is mentioned that a number of helpers have been replaced by new function components, live_redirect, live_patch, push_redirect.

So I decided to remove the import from my 'app_web.ex', to see where it would explode.
These are the ones I need to change:

  • live_title_tag, replace with <.live_title>
  • live_file_input, replace with <.live_file_input upload={}>
  • live_redirect, replace with <.link navigate={}>

So I was happily replacing tags when all of a sudden, BOOM

I replaced <%= link to: "mailto:#{customer.email}" do %>..<% end %> with <.link href={"emailto:#{customer.email}}>..</.link>, that however caused

** (exit) an exception was raised:
    ** (ArgumentError) unsupported scheme given to <.link>. In case you want to link to an
unknown or unsafe scheme, such as javascript, use a tuple: {:javascript, rest}

Damn, it is so clever to recognize I had misspelled 'mailto'!