Phoenix LiveView 1.0.0-rc.0 is out!

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 highlighting our developments along the way, a few fun demos, and what we’re up to next.

Existing applications on 0.20.x should have a quick upgrade. We have one backwards compatible change that you can add back via a phx-feedback-for shim. Full changelog with shim notes:

Changelog

Backwards incompatible changes for 1.0

LiveView 1.0 removes the client-based phx-feedback-for annotation for showing and hiding input feedback, such as validation errors. This has been replaced by Phoenix.Component.used_input?/2, which handles showing and hiding feedback using standard server rendering.

A backwards-compatible shim can be used to maintain phx-feedback-for in your existing applications:

  1. Save the phx_feedback_dom.js shim to your local assets/js/phx_feedback_dom.js.
  2. Import it into your assets/js/app.js.
  3. Add a new dom option to your LiveSocket constructor, or wrap the existing value:
import {Socket} from "phoenix";
import {LiveSocket} from "phoenix_live_view"
import phxFeedbackDom from "./phx_feedback_dom"

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
let liveSocket = new LiveSocket("/live", Socket, {
  params: {_csrf_token: csrfToken},
  dom: phxFeedbackDom({})
})

1.0.0-rc.0 :rocket: (2024-05-08)

Backwards incompatible changes

  • Remove phx-feedback-for in favor of Phoenix.Component.used_input?. See the changelog for a backwards compatible phx-feedback-for shim to add to existing applications.

Removal of previously deprecated functionality

  • live_component/2 and live_component/3 helpers (not the function component) have been removed

Bug fixes

  • Fix attributes of existing stream items not being updated on reset
  • Fix nested LiveView within streams becoming empty when reset
  • Fix phx-mounted firing twice, first on dead render, then on live render, leading to errors when a LiveComponent has not yet mounted
  • Fix JS.toggle_class error when used with a transition

Enhancements

  • Warn on mismatched client and server versions

Happy hacking!
–Chris

168 Likes

Whoa, congrats and thank you!

1 Like

Ooo exciting! Congratulations to Chris and the Phoenix team and everyone who has worked on it - it’s been fantastic seeing LV take shape over the years, it is yet another key killer feature that will help Elixir and Erlang stand out for years to come :048:

6 Likes

:clap: :clap: :clap:

Nice work and congratulations! This is a big milestone.

4 Likes

:star_struck: Excellent work has been done in the past 6 years. A game changer and inspiring.

3 Likes

Awesome news! I’ve been wondering, is :phoenix_live_view going to be merged into the :phoenix hex package? It seems like this has been the plan since :phoenix_live_view contains Phoenix.Component. I know for newbies it’s very confusing why they have to go to :phoenix_live_view on hexdocs to find the documentation for function components that they’re using in layouts and non-live views. Maybe a Phoenix 2.0 release that bundles it all together? Or at least moves Phoenix.Component into :phoenix?

12 Likes

Really amazing news!!! Congratultions :clap: :clap: :clap: :clap:

1 Like

Fantastic news!

If you are a beginner and you’d like to try this out, follow these instructions:

  1. Generate a Phoenix project without the live dashboard (as it currently breaks dependencies):

    mix phx.new your_project --no-dashboard

  2. Edit mix.exs within your project and replace the line containing :phoenix_live_view with:

    {:phoenix_live_view, "~> 1.0.0-rc.0"},

  3. Run mix deps.get

  4. Go ahead and create your database, generate live views, migrate, etc.

11 Likes

Congratulations, huge news.

1 Like

Probably time to start relearning Elixir and Phoenix :slight_smile:

9 Likes

Congrats!

1 Like

At last! we’re nearing v1! :pray:t5:

1 Like

Wow. Many Congratulations to Chris, Jose and everyone on the team. Fantastic work. Thank you for making our lives better and easier!

2 Likes

Congrats for this release.

One question. Will there be an updated Phoenix Framework 1.8 when Liveview hits 1.0?

4 Likes

Congratulations. Love LiveView!

1 Like

Uhuuul, well done guys! Congratulations!

1 Like

Following the instructions, I get this error. Any idea why?

Failed to check for new Hex version
Entity not found (404)
Resolving Hex dependencies...
Resolution completed in 0.064s
Because your app depends on phoenix_live_view empty which doesn't match any versions, version solving failed.
1 Like

Can you show me your deps private function within mix.exs? The error would suggest that a live view version hasn’t been specified.

2 Likes

I guess adding override: true would fix the breaking dependency.

2 Likes