phoenix_live_view changelog

Here's the latest scoop on our updates, bringing you a bunch of exciting new features and improvements to make your development experience smoother and more delightful. 🎉

New feature: Say hello to JS.ignore_attributes! 🚀 This nifty addition allows you to ignore updates to specific attributes during DOM updates, particularly useful for elements like dialog and details that rely on attributes like open to maintain their state. No more cumbersome workarounds—just use JS.ignore_attributes to keep those attributes intact during LiveView updates. It's a game-changer for maintaining user interactions without accidental resets.

New feature: Introducing Phoenix.LiveView.Debug! 🕵️‍♂️ This new module is your best friend for runtime introspection and debugging of LiveView processes. You can now list all connected LiveViews, verify if a process is a LiveView, and even peek into LiveComponents. These tools enhance your ability to debug and monitor LiveView applications, making it easier to keep everything running smoothly.

Improvement: We've jazzed up the phoenix_live_view JavaScript library with the ignoreAttrs function, giving you more control over which attributes to ignore during DOM updates. This enhancement provides a refined approach to managing dynamic elements, ensuring your app remains flexible and responsive. Plus, we've sprinkled in some documentation comments to make using these new commands a breeze.

Improvement: Formatting consistency alert! 🖌️ The Phoenix.LiveView.HTMLFormatter now preserves the format of HTML tags when immediately followed by interpolation, just like it does with text. This tweak ensures a more predictable and consistent formatting behavior, making your code look as polished as ever.

Improvement: The form bindings guide just got a new section! 📚 Learn how to prevent form submission using JavaScript, perfect for client-side validation or business logic needs before server processing. With clear instructions and example code, this enhancement empowers you to enforce validation rules and keep those submissions squeaky clean. 🧼

These updates are all about making your life easier and your applications more robust. Dive in and enjoy the new features and improvements! 💪

Included Commits

2025-05-09T20:28:50 See commit

This commit enhances the Phoenix.LiveView.HTMLFormatter by ensuring that the formatting of HTML tags is preserved when they are immediately followed by interpolation, in addition to already existing functionality that preserved formatting when followed by text. The changes involve modifying how the formatter identifies and sets the mode for blocks of HTML, specifically by introducing a new function that checks if a tag is preceded by non-whitespace text or interpolation, and accordingly sets the mode to :preserve. This adjustment aims to create a more consistent and predictable formatting behavior.

In addition to the main code changes, the commit includes updates to the test suite to validate the new formatting behavior. New test cases have been added to ensure that the formatter correctly preserves the format of tags when they are followed by interpolation, thereby improving the overall robustness of the HTML formatting functionality within the Phoenix LiveView framework. The modifications include 25 lines added and 12 lines removed, indicating a focused set of changes to achieve the desired outcome.

Files changed

  • lib/phoenix_live_view/html_formatter.ex
  • test/phoenix_live_view/html_formatter_test.exs
2025-05-11T12:21:29 See commit

The recent commit introduces a new feature called JS.ignore_attributes to the Phoenix LiveView framework, which allows developers to specify certain attributes that should be ignored during DOM updates. This feature is particularly useful for elements like the HTML dialog and details, which rely on specific attributes (e.g., open) to maintain their state. Previously, developers had to use a more cumbersome approach involving the onBeforeElUpdated DOM option, which increased complexity when integrating libraries. With the new JS.ignore_attributes, developers can easily mark attributes to be retained during LiveView updates, ensuring that user interactions do not inadvertently reset the element's state.

The implementation includes both the core functionality and corresponding tests to ensure reliability. The ignore_attributes method accepts a single attribute or a list of attributes, including support for wildcards. This allows for flexible usage in various scenarios, such as retaining user-set attributes while still allowing other attributes to be updated by the server. The commit also includes modifications to the JavaScript and Elixir codebases, enhancing the LiveView's ability to manage DOM updates effectively while improving the developer experience.

Files changed

  • assets/js/phoenix_live_view/js.js
  • assets/js/phoenix_live_view/js_commands.js
  • assets/js/phoenix_live_view/view.js
  • assets/test/view_test.js
  • lib/phoenix_live_view/js.ex
  • test/e2e/support/js_live.ex
  • test/e2e/tests/js.spec.js
2025-05-11T12:21:59 See commit

This commit introduces several enhancements to the phoenix_live_view JavaScript library, primarily focusing on the handling of attributes during DOM updates. The key addition is the implementation of the ignoreAttrs function, which allows developers to specify certain attributes that should be ignored when updating elements in the DOM. This function uses a private data structure to store attributes that are to be preserved, ensuring that they are not altered during the patching process. Additionally, a new command, ignoreAttributes, is introduced to facilitate the use of this feature.

Overall, the modifications span multiple files, including .cjs.js, .esm.js, and .js, with a total of 28 lines added across these files. The changes improve the flexibility and control developers have over DOM updates, allowing for a more refined approach when working with dynamic elements in Phoenix LiveView applications. The commit also includes documentation comments to clarify the functionality of the new commands, enhancing the usability of the library.

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-05-12T21:08:50 See commit

The commit introduces a new module, Phoenix.LiveView.Debug, which provides runtime introspection and debugging utilities for LiveView processes in the Phoenix framework. Key features include the ability to list all currently connected LiveViews, check if a process is a LiveView, retrieve the socket of a LiveView process, and inspect LiveComponents rendered within a LiveView. The implementation includes several functions that utilize the GenServer API to fetch relevant details about LiveViews and their components, enhancing developers' ability to debug and monitor LiveView applications effectively.

In addition to the new debugging functionalities, the commit also modifies the existing Phoenix.LiveView.Channel module, moving away from reliance on :sys.get_state and instead implementing a more detailed response structure for LiveView introspection. The changes include adding new handle_call functions to manage debug requests and returning structured information about LiveComponents. The commit is accompanied by tests to ensure the correctness of the new debugging features, including checks for listing LiveViews, verifying if a process is a LiveView, and retrieving component information. Overall, these enhancements aim to improve the debugging experience for developers working with LiveView in Phoenix.

Files changed

  • lib/phoenix_live_view/channel.ex
  • lib/phoenix_live_view/debug.ex
  • test/phoenix_live_view/debug_test.exs
2025-05-13T17:41:40 See commit

The recent commit introduces a new section in the form bindings guide that outlines how to prevent form submission using JavaScript. This addition is particularly useful for scenarios where developers need to conditionally halt form submissions based on client-side validation or specific business logic before the phx-submit event is processed by the server. The guide now includes a detailed example of implementing a custom hook that listens for the form's submit event and prevents the default behavior if certain conditions are not met.

The commit includes 37 lines of new content in the guides/client/form-bindings.md file, providing clear instructions and example code for developers. The example demonstrates how to create a custom hook named CustomFormSubmission, which utilizes event listeners to manage form submission behavior effectively. This enhancement aims to improve the overall user experience by allowing developers to enforce validation rules before any data is sent to the server, ensuring that only valid submissions are processed.

Files changed

  • guides/client/form-bindings.md