phoenix_live_view changelog

Hey there, awesome devs! 🎉 We've got some exciting updates and tweaks in the Phoenix LiveView world that are going to make your coding life a whole lot smoother and more fun. Let's dive into the juicy details:

  • New feature: Attribute Formatters 🚀
    We've introduced support for attribute_formatters in the Phoenix LiveView library. This new feature lets you specify custom formatters for specific attributes, making your HTML formatting game stronger than ever! The HTMLFormatter now validates and normalizes these formatters, ensuring everything runs smoothly. We've also updated the docs and added a test case to show off how you can turn attribute values into uppercase with ease. 💪

  • New feature: Telemetry Event for Destroyed Components 🔍
    Say hello to the new telemetry event [:phoenix, :live_component, :destroyed]! This baby gets dispatched when a Phoenix.LiveComponent is removed from a page, helping you keep track of component destruction like a pro. The event comes packed with metadata, and we've updated tests to ensure it fires correctly. This is a game-changer for debugging and monitoring your live components.

  • Improvement: Focusable Tabindex 0 🔄
    We've improved the handling of focusable elements by allowing a tabindex of 0 to be focusable, aligning with MDN recommendations. This change boosts accessibility, letting users navigate to these elements using keyboard controls. We've added tests to confirm that this works like a charm, ensuring your app is more accessible and user-friendly.

  • Improvement: Code Cleanup 🧹
    A little housekeeping in the HTMLFormatter module! We've removed an unnecessary variable, making the code cleaner and more readable. This small refactor enhances the maintainability of the code without changing its functionality. Sometimes less is more, right?

  • Improvement: Asset Updates 📦
    We've updated various static asset files, including JavaScript files in both CommonJS and ES module formats, along with their source maps. These updates bring enhancements and bug fixes to the LiveView functionality, ensuring you're always working with the latest and greatest features.

Keep rocking those keyboards, and happy coding! 💻✨

Included Commits

2025-05-04T14:43:15 See commit

This commit introduces support for attribute_formatters in the Phoenix LiveView library, enhancing the HTML formatting capabilities by allowing developers to specify custom formatters for specific attributes. The changes include validation and normalization of attribute_formatters within the HTMLFormatter, ensuring that the specified formatters are loaded and available. The commit also includes documentation updates to reflect the new feature and provides a simplified implementation using Enum.reduce/3 for better readability and efficiency.

In addition to the core functionality, the commit modifies several functions in the HTMLAlgebra module to accommodate the new attribute formatters, ensuring that attributes are processed correctly during HTML generation. A test case is added to demonstrate the usage of an example formatter that converts attribute values to uppercase, confirming that the implementation works as intended. Overall, this enhancement aims to provide developers with greater flexibility and control over how HTML attributes are formatted in their LiveView applications.

Files changed

  • lib/phoenix_live_view/html_algebra.ex
  • lib/phoenix_live_view/html_formatter.ex
  • test/phoenix_live_view/html_formatter_test.exs
2025-05-04T16:33:03 See commit

This commit focuses on simplifying the code in the HTMLFormatter module of the Phoenix LiveView library by removing an unnecessary variable. The original implementation included a variable assignment for formatters within the Keyword.update function, which was then immediately used without further modification. By eliminating this redundant variable, the code becomes cleaner and more concise, enhancing readability and maintainability.

In total, the commit results in a net reduction of three lines of code, with 8 additions and 11 deletions. The change streamlines the logic for updating the :attribute_formatters option, while preserving the original functionality of checking if the formatter modules are loaded and logging an error message if they are not. Overall, this small refactor contributes to better code quality in the module.

Files changed

  • lib/phoenix_live_view/html_formatter.ex
2025-05-04T16:34:55 See commit

This commit introduces a new telemetry event, [:phoenix, :live_component, :destroyed], which is dispatched after a Phoenix.LiveComponent is removed from a page. The change was prompted by feedback from the LiveDebugger team, who expressed difficulties in tracking the removal of live components. The new telemetry event aims to provide developers with useful insights when components are destroyed, enhancing their ability to respond to such changes in real-time.

The implementation includes modifications to several files, notably the telemetry documentation and the LiveView channel. The telemetry event is designed to carry metadata such as the socket, component type, component ID, and the associated live view socket. Additionally, tests have been updated to ensure that the removal of components is tracked correctly, confirming that the telemetry event is fired as expected when a component is destroyed. This enhancement is expected to improve debugging and monitoring capabilities for developers working with live components in Phoenix applications.

Files changed

  • guides/server/telemetry.md
  • lib/phoenix_live_view/channel.ex
  • test/phoenix_live_view/integrations/live_components_test.exs
2025-05-05T16:19:33 See commit

This commit updates the handling of focusable elements in the Phoenix LiveView framework by allowing elements with a tabindex of 0 to be focusable. According to the Mozilla Developer Network (MDN), only tabindex values of -1 or 0 should be used, and this change aligns with that recommendation. The modification in the aria.js file adjusts the logic to ensure that elements with a tabindex of 0 are considered focusable, enhancing accessibility by allowing users to navigate to these elements using keyboard controls.

Additionally, the commit includes new tests in the js_test.js file to validate this behavior. A new test case is introduced to ensure that a div with a tabindex of 0 can be focused correctly when a specific event is triggered. This is demonstrated through a setup where a modal with tabindex 0 is focused upon a click event, confirming that the implementation works as intended and adheres to best practices for accessibility.

Files changed

  • assets/js/phoenix_live_view/aria.js
  • assets/test/js_test.js
2025-05-05T16:19:58 See commit

The commit primarily involves updates to various static asset files related to the Phoenix LiveView framework. Specifically, it modifies the JavaScript files, including both CommonJS and ES module formats, as well as their corresponding source maps. The files affected include phoenix_live_view.cjs.js, phoenix_live_view.esm.js, and their minified versions, along with their source maps.

These changes suggest enhancements or bug fixes to the LiveView functionality, likely aimed at improving performance, compatibility, or developer experience. By updating these assets, the commit ensures that users have access to the latest features and improvements in the LiveView framework.

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