phoenix_live_view changelog

Hey there, awesome developers! We've got some exciting updates and improvements lined up for you. From enhancing documentation to fixing pesky bugs, these changes are here to make your coding life easier and more efficient. Let's dive into the details! 🚀

  • Improvement: We've spruced up the documentation for using scopes in JavaScript commands for DOM selectors. Now, you can use {:inner, "selector"} to target elements within the interacted element, and {:closest, "selector"} to zero in on the nearest ancestor element. This means more precise DOM element targeting and clearer guidance on using the :to option. Your dropdown components will thank you! 🎯

  • Improvement: Our JavaScript files got a little makeover! We've added an isLocked method to check element lock status and a shiny new onUnlock method for executing callbacks when elements are unlocked. Plus, we've improved the DOMPatch class to handle child elements and undo references better. Your dynamic web applications just got a whole lot more dynamic! 💪

  • New Feature: Introducing a new configuration option for handling errors in LiveViews. Now, you can choose whether detected errors should raise exceptions or just give you a friendly warning. This flexibility is perfect for tailoring your testing experience. Plus, we've squashed the duplicate LiveComponents bug (Fixes #3650) and added tests to keep everything in check. 🛠️

  • Improvement: Our changelog is now in perfect harmony with the 1.0 branch. We've updated error handling for duplicate IDs and improved error detection and reporting. Expect clearer documentation and better error logging in your JavaScript console. 🎶

  • Bugfix: We tackled issues with file uploads when forms are locked due to unrelated changes. By unifying DOM patching logic, we've ensured that uploads only happen when the closest locked element is unlocked. This fix resolves multiple issues and makes managing dynamic forms and uploads a breeze! 📂

  • Bugfix: We made sure hooks are only added to elements owned by the current view, addressing issue #3530. This change prevents errors and ensures hooks are initialized correctly. We've also added end-to-end tests to validate these improvements. 🧩

  • New Feature: We're kicking off the development phase for version 1.1.0! This update involves changes to key files like CHANGELOG.md, mix.exs, package.json, and package-lock.json, paving the way for exciting new features and enhancements. Stay tuned for more awesomeness! 🌟

We hope these changes make your development journey smoother and more enjoyable. Keep on coding, and may your bugs be few and your features many! 😄

Included Commits

2025-01-26T15:09:35 See commit

This commit introduces a new configuration option for handling detected errors in LiveViews, allowing developers to choose whether these errors should raise exceptions or simply issue warnings. This feature aims to enhance flexibility during testing, accommodating different development preferences and scenarios.

Additionally, the commit addresses a specific issue related to duplicate LiveComponents (Fixes #3650) by implementing a check for such duplicates. Alongside this functionality, several tests have been modified or added to ensure proper coverage, including tests for duplicate ID/component errors and a new test file for warning scenarios. Key files affected by these changes include client_proxy.ex, dom.ex, and various test files within the integrations and support directories.

Files changed

  • lib/phoenix_live_view/test/client_proxy.ex
  • lib/phoenix_live_view/test/dom.ex
  • lib/phoenix_live_view/test/live_view_test.ex
  • test/phoenix_live_view/integrations/live_view_test.exs
  • test/phoenix_live_view/integrations/live_view_test_warnings_test.exs
  • test/phoenix_live_view/test/dom_test.exs
  • test/support/live_views/duplicates.ex
  • test/support/router.ex
2025-01-26T15:10:18 See commit

This commit addresses issues related to the handling of file uploads in a LiveView context when forms are locked due to unrelated changes. Specifically, it resolves problems where the upload input's associated data attributes were not present in the actual DOM when a form was locked, leading to LiveView's inability to detect active uploads. The fix involves implementing standard DOM patching logic for unlocking cloned trees, ensuring that data attributes are correctly merged and that uploads only commence when the closest locked element is unlocked. This change is crucial for cases where the upload input belongs to a different form than the one that is locked.

Additionally, the commit introduces a unification of the DOM patching logic used for regular updates and element unlocks, which had previously caused inconsistencies and additional issues. The changes include modifications across several files, such as the addition of new event handling for unlocking elements and the implementation of end-to-end tests to validate the fixes. This comprehensive approach not only resolves the immediate upload issues but also enhances the robustness of the LiveView framework in managing dynamic forms and uploads.

Files changed

  • assets/js/phoenix_live_view/dom.js
  • assets/js/phoenix_live_view/dom_patch.js
  • assets/js/phoenix_live_view/element_ref.js
  • assets/js/phoenix_live_view/view.js
  • test/e2e/support/issues/issue_3647.ex
  • test/e2e/support/issues/issue_3651.ex
  • test/e2e/test_helper.exs
  • test/e2e/tests/issues/3647.spec.js
  • test/e2e/tests/issues/3651.spec.js
2025-01-26T15:10:46 See commit

This commit primarily updates the JavaScript files related to the Phoenix LiveView framework, introducing new functionality and modifying existing code. Key changes include the addition of an isLocked method to check if an element is locked based on a specific attribute (PHX_REF_LOCK). Additionally, a new static method, onUnlock, was added to the ElementRef class, enabling a callback to be executed when an element is unlocked. This method enhances the handling of elements that may be in a locked state, allowing for more dynamic interaction when certain conditions are met.

Moreover, the DOMPatch class constructor has been updated to accept options for handling child elements and undo references, improving the patching process. The commit also refactors the logic surrounding the handling of form inputs and uploads, ensuring that callbacks are properly triggered when elements are unlocked. Overall, these changes contribute to a more robust and flexible implementation of the Phoenix LiveView framework, enhancing its capabilities in managing dynamic web applications.

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-26T15:13:45 See commit

The recent commit to the Phoenix LiveView JavaScript module enhances the documentation regarding the use of DOM selectors within client utility commands. It introduces the concept of scopes, allowing developers to specify more precise targeting of DOM elements. Two types of scopes are defined: {:inner, "selector"}, which targets elements within the interacted element, and {:closest, "selector"}, which targets the nearest ancestor element. The commit includes examples demonstrating how to use these scopes effectively, such as in a dropdown component scenario.

Additionally, the commit modifies existing documentation to clarify that the :to option for various commands defaults to the interacted element unless specified otherwise. This update aims to improve usability and understanding of how to manipulate the DOM using the provided JavaScript commands, ensuring that developers can leverage the new scoping features to create more dynamic and responsive interfaces. Overall, the changes enhance clarity and provide practical examples for developers implementing DOM interactions in their applications.

Files changed

  • lib/phoenix_live_view/js.ex
2025-01-26T15:26:07 See commit

This commit introduces a change to the addHook method in the View class of the Phoenix LiveView framework, ensuring that hooks are only added to elements that are owned by the current view. This modification addresses issue #3530 by implementing an early return in the function if the element does not belong to the view, thereby preventing potential errors from occurring when attempting to add hooks to unowned elements. The code adjustments include a new conditional check that verifies ownership of the element before proceeding with hook addition.

Additionally, the commit enhances the testing framework by adding end-to-end (e2e) tests specifically designed to validate the behavior of nested LiveViews and their hooks in relation to the recent changes. These tests ensure that hooks are initialized correctly and that the expected lifecycle events occur without errors. The modifications to the test suite include new test cases that cover various scenarios involving the mounting and destruction of LiveView components, confirming that the implementation behaves as intended under different conditions.

Files changed

  • assets/js/phoenix_live_view/view.js
  • test/e2e/support/issues/issue_3530.ex
  • test/e2e/test_helper.exs
  • test/e2e/tests/issues/3530.spec.js
2025-01-26T16:18:11 See commit

This commit updates the CHANGELOG.md file to align it with the 1.0 branch of the Phoenix LiveView project. It includes a modification that changes how errors related to duplicate IDs are handled in LiveViewTest. Instead of always raising an error, developers can now configure the behavior to either raise an error or log a warning by passing the on_error option to the relevant functions.

Additionally, the commit introduces enhancements that improve error detection and reporting, such as identifying duplicate LiveComponents added dynamically to the page and logging errors in the JavaScript console for missing attributes in stream containers. It also updates the documentation to clarify valid attribute types for Phoenix.Component.attr/3, ensuring that users have the necessary information for proper implementation.

Files changed

  • CHANGELOG.md
2025-01-26T16:20:29 See commit

The commit marks the beginning of the development phase for version 1.1.0, indicated by the label "start v1.1.0-dev." Several key files have been modified as part of this update, including the CHANGELOG.md, which likely documents the changes and enhancements planned for this version. Additionally, the mix.exs file, which is essential for Elixir projects, has been updated, suggesting adjustments to dependencies or project configuration.

Moreover, changes have been made to package.json and package-lock.json, indicating updates to the project's JavaScript dependencies. These modifications suggest that the development team is preparing for new features or improvements in version 1.1.0, and the updates in the dependency files may reflect necessary adjustments to support this upcoming version.

Files changed

  • CHANGELOG.md
  • mix.exs
  • package-lock.json
  • package.json