steffend

steffend

Phoenix Core Team

Phoenix LiveView - 1.2.0 released

LiveView 1.2.0 is out now!

Colocated CSS

The biggest new feature is support for Colocated CSS, which is built on the work we did in 1.1 for Colocated Hooks and Colocated JS.

def table(assigns) do
  ~H"""
  <style :type={MyAppWeb.ColocatedCSS}>
    thead color: {
      ...;
    }
    tbody, tr:hover {
      ...
    }
  </style>
  <table>...</table>
  """
end

You can optionally scope colocated CSS to only the component it is defined in. We don’t ship a built in scoping mechanism for now, but the docs include an example using CSS @scope.

To implement this, we did a big refactor of how we compile HEEx templates, which we explain in a separate blog post.

tl;dr: To make colocated CSS work, we had to change how we compile HEEx templates by splitting compilation into a separate tokenization and parsing step, allowing us to handle macro components (colocated CSS and JS) without making the rest of the compilation more complex. It also allowed us to reuse code we previously had to duplicate between template compilation and formatting.

Formatters for <script> and <style> tags

The Phoenix.LiveView.HTMLFormatter.TagFormatter behaviour allows you to format <script> and <style> tags with third party tooling when running mix format, especially useful if your project uses colocated assets like Phoenix.LiveView.ColocatedHook or the new ColocatedCSS.

The documentation contains an example using prettier, which we also use in the LiveView repository itself.

Encoding JS commands to JSON

Phoenix.LiveView.JS structs can now be encoded to JSON for usage in push_event. So now you can do

push_event(socket, "highlight", %{toggle: JS.toggle_class(...)})
// some hook
this.handleEvent("highlight", ({ toggle }) => { this.js().execJS(this.el, toggle); });

while in the past you’d have to render the command in an element attribute and then refer back to it in your hook.

LiveView implements JSON.Encoder and Jason.Encoder automatically. If you use a different library, you can invoke JS.to_encodable/1 manually.

Thank you to @rhcarvalho for contributing this in response to Make `JS.t()` a public data structure, or json serializable.

Opting out of debug annotations

You can now opt-out of the HEEx debug annotations (HTML comments and attributes) per module with

@debug_heex_annotations false
@debug_attributes false

This was done in response to Disable HEEx debug annotations conditionnaly.

Granular configuration for test warnings

In previous releases, we started to add some checks when running LiveView tests, for example to warn you if there’s a duplicated ID on the page (that will cause problems in the browser). In LiveView 1.2, we added a new check to warn about forms with a missing ID, which prevents [form recovery] from working. Because there are cases where an ID is deliberately omitted and form recovery is not needed, all of those checks can now be configured on their own:

config :phoenix_live_view, :test_warnings,
 duplicate_id: :warn, # one of :warn, :raise, :ignore
 ...

See the documentation for more details.

Documentation for the JS client

While many people like that they’re able to avoid touching JavaScript when using LiveView, there are cases where creating hooks and interacting with the LiveSocket API are needed. We now have dedicated documentation on the JS client that shows the public API, based on typedoc.

Links

See the official announcement for more details:

Also have a look at the HEEx compilation deep dive if you’re interested:

Finally, have a look at the changelog for more details on bugs and other small enhancements.

Happy coding!

Most Liked

steffend

steffend

Phoenix Core Team

It moves us closer for sure. I’d even say doing this was kind of a requirement for it. Now, it’s mostly evaluating if we can commit to the node format or if there are problems we’d run into. That said, there’s no ETA right now.

rhcarvalho

rhcarvalho

Yay! Thanks @steffend and the Phoenix team for the release, looking forward to upgrading!

Colocated CSS is going to be very handy for an upcoming project :slight_smile:

LostKobrakai

LostKobrakai

It’s great to see this part of the codebase become less of a black box by such blog posts. The MacroComponent still seems to be private API in 1.2. Does the mentioned rework of the template compilation flow move us closer to MacroComponent becoming available to LV users / the token AST used becoming public / stable?

Where Next?

Popular in Phoenix News Top

New
chrismccord
The final release of Phoenix 1.7 is out! Most of the new features have been outlined in the 1.7 RC thread, but it has been a few months s...
New
chrismccord
Phoenix 1.4.0 released Phoenix 1.4 is out! This release ships with exciting new features, most notably with HTTP2 support, improved deve...
688 30877 112
New
chrismccord
Phoenix 1.3.5, 1.4.18, 1.5.14, and 1.6.14 have been released to resolve a vulnerability in wildcard check_origin configurations. Previou...
New
chrismccord
You can read the announcement on the blog, but I’ll dup most of it here for discussion purposes: ––––––––––––––––––––––––––––––––––––––...
451 13951 109
New
chrismccord
Check the announcement blog for details! Blog duped here for convenience: Phoenix 1.8.0-rc released! The first release candidate of P...
418 13345 167
New
chrismccord
Announcement post dup’d here for convenience: Phoenix 1.7.2 is out! This minor release includes a couple features worth talking about. ...
New
josevalim
We were notified by Panagiotis Nezis that certain payloads could take a long time to process when converted to integers. New Erlang/OTP v...
New
chrismccord
LiveView 1.0.0-rc.0 is out! This 1.0 milestone comes almost six years after the first LiveView commit. I published a Phoenix blog highli...
New
chrismccord
I’m pleased to announce the first release candidate of Phoenix 1.6.0 has landed on the heels of a fresh LiveView 0.16 release! This relea...
New

Other popular topics Top

sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
danschultzer
None of the current solutions worked well for me, so I went ahead and built a user management system from scratch. This project took far...
548 29377 241
New
sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
985 42920 311
New
siddhant3030
Hi, I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New
hariharasudhan94
I would like to know what is the best IDE for elixir development?
New
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New
sergio
Kind of like when jquery came out, it was super necessary. Existing drag and drop libraries have a bunch of baggage to support old browse...
New

We're in Beta

About us Mission Statement