phoenix_live_view changelog

Hey there, fellow code enthusiasts! 🎉 We've got some nifty updates and fixes for the Phoenix Live View framework that are sure to make your development experience even smoother. Let's dive into the latest changes:

  • New Feature: Skip Persistent ID Generation 🚀
    You can now skip the automatic generation of persistent IDs for form inputs by using the skip_persistent_id attribute. This gives you greater control over form input management, especially when those pesky hidden _persistent_id fields aren't needed. Major kudos to the team for addressing issue #3673 and adding this much-requested feature!

  • Improvement: Enhanced Disconnection Handling 🔌
    We've improved how disconnection events are managed by introducing a DISCONNECTED_TIMEOUT constant (set at 500 milliseconds) and a disconnectedTimer variable. This makes your LiveView app more robust and responsive during network hiccups. Plus, the loader logic now better handles pending disconnection notifications. Smooth sailing ahead!

  • Improvement: Keep Active Focus During Reconnection 🔄
    No more losing focus during reconnections! We've updated the LiveSocket and View classes to ensure your active input stays focused even when the connection drops and comes back. Say goodbye to those annoying interruptions during live updates!

  • Improvement: Clarifications on Nested Live Views 📚
    We've added some helpful hints to the live_render docs about using find_live_child/2 and recommended trying LiveComponents before diving into nested LiveViews. These updates aim to guide you towards better component design practices. Thanks to Steffen Deusch for the co-authorship!

  • Bugfix: Fix Pending Link Update Race Condition 🐛
    A sneaky race condition in applyPendingDiffs was causing updates to be dropped. We've fixed it by ensuring pending updates are skipped when a link is still pending. No more silent update losses during navigation transitions!

  • Bugfix: Debounce Blur Event Fix 🔄
    We've tweaked the debounce functionality for the "blur" event so that the callback triggers only once when no other event has been received since the last blur. This ensures efficient event handling and prevents multiple triggers from the same event. Your input interactions just got a whole lot smoother!

That's all for now! We hope these updates make your coding adventures more enjoyable. Happy coding! 💻✨

Included Commits

2025-03-07T13:57:43 See commit

This commit addresses a race condition in the applyPendingDiffs function of the Phoenix LiveView framework, which could lead to updates being silently dropped if a new pending link was already in progress when an update was attempted. The fix involves adding a check to skip the application of pending updates if there is an ongoing pending link, ensuring that updates are not lost during navigation transitions.

In addition to the code changes, the commit includes the addition of a new end-to-end test to verify the fix, along with a new LiveView module for testing purposes. The test ensures that pending updates do not conflict with navigation events, confirming that the system behaves as expected without encountering uncaught exceptions or errors during the process. Overall, these changes enhance the robustness of the framework by preventing potential data loss during link updates.

Files changed

  • assets/js/phoenix_live_view/view.js
  • test/e2e/support/issues/issue_3709.ex
  • test/e2e/test_helper.exs
  • test/e2e/tests/issues/3709.spec.js
2025-03-07T14:01:59 See commit

This commit focuses on maintaining the active element's focus during the reconnection process in a LiveView context, addressing a concern raised in the Elixir Forum about minimizing the impact of deployments on user experience. The changes involve modifying the LiveSocket and View classes to eliminate the handling of an unused activeElement field and ensure that the currently focused input remains active after a disconnect and reconnect sequence. This is particularly relevant for forms, as the commit includes updates to tests that verify this behavior, ensuring that the input fields retain focus correctly.

Additionally, the commit involves the removal of redundant code and tests that were no longer applicable, streamlining the overall implementation. The modifications enhance the user experience by reducing interruptions during live updates and ensuring a seamless interaction with forms, which is crucial for maintaining engagement during dynamic content changes.

Files changed

  • assets/js/phoenix_live_view/live_socket.js
  • assets/js/phoenix_live_view/view.js
  • assets/test/live_socket_test.js
  • test/e2e/support/form_live.ex
  • test/e2e/tests/forms.spec.js
2025-03-07T14:02:39 See commit

This commit addresses an issue with the debounce functionality for the "blur" event in the Phoenix LiveView framework, ensuring that the callback is triggered only once when no other events have been received since the last blur. The changes involve modifying the event listener to use a cycle mechanism that checks if the async filter condition is met before executing the callback. This adjustment aims to improve the efficiency of event handling by preventing multiple triggers from the same event in quick succession.

Additionally, the commit updates the associated test cases to reflect this new behavior. The tests now confirm that the callback is only called once on multiple blur events, rather than multiple times, ensuring that the debounce logic works as intended. The changes to the test suite include adjustments to the expected outcomes, reinforcing the reliability of the debounce feature in the context of user input interactions.

Files changed

  • assets/js/phoenix_live_view/dom.js
  • assets/test/debounce_test.js
2025-03-07T14:05:33 See commit

This commit updates several JavaScript files related to the Phoenix LiveView framework, specifically modifying the handling of disconnection events. A new constant, DISCONNECTED_TIMEOUT, is introduced with a value of 500 milliseconds, which is used to manage the timing of disconnection notifications. The code changes include adding a disconnectedTimer variable to the View class, which is set to trigger a delayed execution of the "disconnected" binding, enhancing the user experience during network interruptions.

In addition to the primary changes in handling disconnections, the commit also includes minor adjustments to the loader and connection management logic. The hideLoader method now clears the disconnectedTimer alongside the loaderTimer, ensuring that any pending disconnection notifications are properly managed when the loader is hidden. Overall, these updates aim to improve the robustness and responsiveness of the LiveView application in scenarios where network connectivity may be unstable.

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-03-09T16:28:06 See commit

This commit introduces a new feature in the Phoenix Live View framework that allows developers to skip the automatic generation of persistent IDs for form inputs by adding a skip_persistent_id attribute. This change addresses an issue (tracked by issue #3673) where hidden _persistent_id fields, which are typically used for reordering inputs, could be omitted if not needed. The update modifies the Phoenix.Component module, adding logic to check for the skip_persistent_id attribute and conditionally applying the persistent ID generation based on its value.

The commit includes significant modifications to the lib/phoenix_component.ex file, with 42 additions and 16 deletions, as well as corresponding updates to the component tests in test/phoenix_component/components_test.exs. A new test case is added to verify that persistent IDs can be successfully disabled, ensuring that the new functionality works as intended and does not interfere with existing input handling. This enhancement provides developers with greater flexibility in managing form inputs within the Phoenix framework.

Files changed

  • lib/phoenix_component.ex
  • test/phoenix_component/components_test.exs
2025-03-13T10:16:28 See commit

This commit introduces clarifications regarding the use of nested LiveViews in the Phoenix framework, specifically in the documentation for live_render. It adds a hint about utilizing the find_live_child/2 function to effectively manage interactions with nested LiveViews during testing. Additionally, the commit recommends developers consider using LiveComponents for shared functionality and state management before opting for nested LiveViews, promoting better practices in component design.

The changes made in this commit include updates to the lib/phoenix_component.ex file, with eight lines added to enhance the documentation. These updates aim to guide developers in making informed decisions about component usage and interactions within the Phoenix framework, ensuring a clearer understanding of when to use LiveViews versus LiveComponents. The commit also incorporates feedback from a code review and acknowledges co-authorship by Steffen Deusch.

Files changed

  • lib/phoenix_component.ex