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 (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