phoenix_live_view changelog

Welcome to the latest and greatest updates to the Phoenix framework! We've been busy bees, buzzing around to enhance your developer experience with some sweet improvements and bug fixes. Let's dive into what's new and shiny! 🐝✨

Improvement: More Guidelines Around LiveComponents
We've beefed up the guidelines for LiveComponents, helping you distinguish between different component types and their purposes. Now, it's crystal clear that Phoenix.Component is your go-to for code organization and markup reuse, while Phoenix.LiveComponent is the hero for sharing state, markup, and events across LiveViews. Nested Phoenix.LiveView components? Perfect for when you need complete isolation, including error handling. These updates are here to guide you in using LiveComponents like a pro! 📚🔧

Improvement: Update Assets
Focus management just got a whole lot smarter! We've jazzed up the JavaScript files to enhance focus behavior when navigating between elements. Now, the focus is more predictable and accessible, especially when elements are playing peek-a-boo. Whether it's CommonJS, ES modules, or a minified version, we've got you covered across the board! 🔍🎯

Improvement: Update Examples of inputs_for
We've polished up the inputs_for examples by specifying the field to retrieve from the changeset. No more guessing games! Now, the code explicitly accesses the :total field, making your helper functions more accurate and robust. 🛠️📈

Bugfix: Handle Entering FocusWrap from Outside (#3641)
We've squashed a pesky bug that caused focus issues when entering FocusWrap from outside. By checking the relatedTarget of the focus event, we've ensured a smooth and intuitive focus experience. No more unintentional boundary element focusing—just seamless navigation! 🎯🔧

Bugfix: Use Socket.t() Instead of %Socket{} (#3634)
We've tidied up the type specifications in the Phoenix LiveView module, swapping %Socket{} for Socket.t(). This change brings clarity and consistency, aligning with Elixir's best practices. Your code is now cleaner, clearer, and ready to rock! 🎸📜

That's all for now, folks! Keep coding and creating with Phoenix, and stay tuned for more exciting updates. 🚀

Included Commits

2025-01-17T12:06:17 See commit

The commit titled "Update examples of inputs_for (#3637)" involves modifications to the lib/phoenix_component.ex file within the Phoenix framework. The primary change is the update of a function that calculates the remaining time by specifying the field to retrieve from the changeset. Previously, the code used Ecto.Changeset.get_field(changeset) without specifying a field, which was corrected to Ecto.Changeset.get_field(changeset, :total), ensuring that the correct field is accessed.

Additionally, the commit includes minor changes to the surrounding code, which likely aim to improve clarity and functionality. Overall, this update enhances the accuracy of the helper function by explicitly defining the field from which to get the total value, thereby improving the robustness of the component's functionality.

Files changed

  • lib/phoenix_component.ex
2025-01-17T12:07:13 See commit

The commit titled "fix(spec): use Socket.t() instead of %Socket{} (#3634)" updates the type specifications in the Phoenix LiveView module to utilize the Socket.t() type instead of the %Socket{} struct notation. This change enhances the clarity and consistency of the code by adopting a more idiomatic representation of the socket type throughout the relevant function signatures, specifically for functions related to stream management, such as stream, stream_configure, stream_insert, stream_delete, and stream_delete_by_dom_id.

In total, the commit modifies several function specifications within the lib/phoenix_live_view.ex file, resulting in equal additions and deletions of lines. The update not only streamlines the type annotations but also aligns the code with Elixir's best practices for type specifications, making it easier for developers to understand and work with the LiveView framework.

Files changed

  • lib/phoenix_live_view.ex
2025-01-18T15:27:59 See commit

This commit addresses an issue with the FocusWrap functionality in the Phoenix LiveView framework, specifically when the focus is initiated from outside the wrapped element. Previously, the browser would attempt to focus on the boundary element, which led to the last element within the FocusWrap being focused instead. The fix involves checking the relatedTarget of the focus event to determine if the focus is coming from outside the wrapped element. If it is, the code now tries to focus on the next or previous sibling element appropriately, ensuring a more intuitive focus handling experience.

The changes made include modifications to the focus event listeners for the first and last elements within the FocusWrap. The new logic checks if the focus is entering from outside and attempts to focus on the next or previous sibling element, defaulting to the first or last element in the case of failure. This enhancement resolves issue #3636 and improves accessibility by ensuring that users can navigate the FocusWrap seamlessly, regardless of their starting focus position.

Files changed

  • assets/js/phoenix_live_view/hooks.js
2025-01-18T15:28:24 See commit

This commit updates several JavaScript files related to the Phoenix LiveView framework, specifically modifying the event listeners associated with focus management for elements. The changes enhance the focus behavior when navigating between elements, allowing for more nuanced control based on whether the newly focused element is contained within the same parent. The new logic checks for related targets and adjusts the focus accordingly, either attempting to focus the next or previous sibling element or resetting focus to the first or last child of the container.

Overall, the modifications aim to improve accessibility and user experience by ensuring that focus transitions behave more predictably, particularly in scenarios where elements are dynamically shown or hidden. The updates are reflected across multiple files, including both CommonJS and ES module formats, as well as a minified version, indicating a comprehensive approach to implementing these enhancements throughout the codebase.

Files changed

  • priv/static/phoenix_live_view.cjs.js
  • priv/static/phoenix_live_view.cjs.js.map
  • priv/static/phoenix_live_view.esm.js
  • priv/static/phoenix_live_view.esm.js.map
  • priv/static/phoenix_live_view.js
  • priv/static/phoenix_live_view.min.js
2025-01-22T15:03:32 See commit

This commit enhances the guidelines surrounding LiveComponents in the Phoenix framework by providing clearer distinctions between different component types and their purposes. The documentation now emphasizes that Phoenix.Component is primarily for code organization and reusing markup, while Phoenix.LiveComponent is intended for sharing state, markup, and events across LiveViews. Additionally, it clarifies that nested Phoenix.LiveView components should be used when complete isolation is needed, including error handling.

The changes also refine the descriptions of LiveComponents, highlighting their stateful nature and lifecycle compared to stateless function components. The commit underscores the importance of using LiveComponents for encapsulating event handling and state, rather than for mere code organization, which is better served by functions and data structures in Elixir. Overall, these updates aim to provide developers with a more structured approach to using LiveComponents effectively within their applications.

Files changed

  • guides/introduction/welcome.md
  • lib/phoenix_live_component.ex
  • lib/phoenix_live_view/html_formatter.ex