LiveView 0.18 Released - Phoenix Blog

submited by
Style Pass
2022-09-22 03:30:04

We’ve been working on some game-changing features for LiveView 0.18.0. Declarative assigns and slots provide compile-time warnings and enhanced docs that make building out your own UI or consuming UI libraries such a pleasant experience. These new features take function components to the next level to provide a truly first-class composable component system.

Additionally, new out-of-the-box focus components and JS commands provide accessibility improvements to ensure LiveView applications work well for all users. We also shipped a new mix formatter plugin for formatting HEEx templates, which is something you can’t live without after using it.

To understand why these features are a such a big deal, let’s take a look at a simple function component. Let’s say we have a modal component in our application and we want to call it. Prior to function components, you would write your Elixir template like this:

This is simple enough, but the issue comes when we want to place arbitrary content inside our modal title, such as a link to the download. We end up trying to concat raw HTML string together and it’s a nonstarter:

Leave a Comment