phoenix_live_view changelog

Hey there, awesome devs! We've got some cool updates and fixes to share with you. Check out the latest changes below:

Changelog

Bugfix: Keep stream items on rejoin (#3353)

  • Ensures JavaScript commands are properly reapplied when a LiveView reconnects. This fix involves changes to the DOMPatch class in dom_patch.js and updates to the streams.spec.js test file. A new button for hiding elements using JS is also added to the StreamLive module in streams.ex. This addresses the issue of stream items not retaining their JS commands upon rejoining a LiveView, enhancing the user experience. 🎉

Bugfix: Throw error when dispatching input on invalid targets (#3331)

  • Adds a useful error message when using JS.dispatch to trigger an input event on invalid targets. This fix helps developers by providing clarity and guidance when encountering this issue. The changes are made in the assets/js/phoenix_live_view/live_socket.js file. 🚨

Bugfix: Fix unnecessary remount when navigating back (#3335)

  • Addresses the issue of unnecessary remounting when using the browser back button in Phoenix LiveView. The fix involves using replaceRootHistory when joining the main view, preventing unnecessary remounting. A new test in test/e2e/tests/navigation.spec.js ensures that navigating back works without remounting. 🛠️

Improvement: Enhance docs of put_flash (#3344)

  • Improves the documentation of the put_flash function, providing more clarity on its usage and functionality within LiveView applications. This enhancement makes it easier for developers to utilize put_flash effectively. 📚

Improvement: mix format (#3340)

  • Includes changes related to formatting code using the mix format tool and adds support for the noformat modifier on sigil_H. The commit also ensures that the code is properly formatted in the CI pipeline and raises an error on invalid sigil_H modifiers. 🚀

Improvement: Note of a regex for replacing the phx-no-feedback classes (#3346)

  • Introduces a regex for replacing phx-no-feedback classes and mentions filtering errors in the initial function for Phoenix.HTML.FormField. This regex helps in quickly identifying and updating instances of the phx-no-feedback classes in the codebase. 🔍

Happy coding! 🌟

Included Commits

2024-07-13T20:27:36 See commit

This commit adds a regex that can be used to replace the phx-no-feedback classes in the project. The regex /phx-no-feedback:[\w\-\d:]+/ is provided for finding and replacing these classes. This regex can help in quickly identifying and updating instances of the phx-no-feedback classes in the codebase.

Additionally, the commit mentions filtering the errors in the initial function for Phoenix.HTML.FormFields. This change may be related to handling errors in form fields more effectively, although specific details about this filtering process are not provided in the summary. Overall, the commit introduces a regex for replacing phx-no-feedback classes and mentions filtering errors in the initial function for Phoenix.HTML.FormField.

Files changed

  • CHANGELOG.md
2024-07-17T10:30:55 See commit

This commit improves the documentation of the put_flash function in the Phoenix LiveView module. It provides more clarity on how the function works in a typical LiveView application, mentioning that the message will be rendered by the CoreComponents' flash/1 component. It also specifies that the function determines what kind of messages it supports, with the default handling of the :info and :error kinds. The examples provided in the documentation demonstrate how to use put_flash with different message types.

Overall, this commit enhances the understanding of put_flash and its functionality within LiveView applications, making it easier for developers to utilize this function effectively. Additionally, it includes updates to the lib/phoenix_live_view.ex file with the improved documentation, contributing to the overall clarity and usability of the Phoenix LiveView module.

Files changed

  • lib/phoenix_live_view.ex
2024-07-17T15:09:14 See commit

This commit includes changes related to formatting code using the mix format tool, as well as adding support for the noformat modifier on sigil_H. The commit also includes checks to ensure that the code is properly formatted in the CI pipeline and raises an error on invalid sigil_H modifiers. It is noted that the support for the noformat modifier on sigil_H is not officially documented at this time.

The changes in this commit affect multiple files, including config files, workflows, and various modules related to Phoenix LiveView. The changes aim to improve code formatting and add support for a new modifier, while also ensuring that the code follows the specified formatting rules in the CI pipeline.

Files changed

  • .github/workflows/ci.yml
  • config/config.exs
  • lib/phoenix_component.ex
  • lib/phoenix_component/declarative.ex
  • lib/phoenix_live_view/html_formatter.ex
  • lib/phoenix_live_view/tag_engine.ex
  • lib/phoenix_live_view/tokenizer.ex
  • lib/phoenix_live_view/upload.ex
  • lib/phoenix_live_view/upload_config.ex
  • test/e2e/test_helper.exs
  • test/phoenix_component/components_test.exs
  • test/phoenix_component/declarative_assigns_test.exs
  • test/phoenix_component/rendering_test.exs
  • test/phoenix_component/verify_test.exs
  • test/phoenix_live_view/async_test.exs
  • test/phoenix_live_view/controller_test.exs
  • test/phoenix_live_view/diff_test.exs
  • test/phoenix_live_view/heex_extension_test.exs
  • test/phoenix_live_view/html_engine_test.exs
  • test/phoenix_live_view/integrations/hooks_test.exs
  • test/phoenix_live_view/integrations/live_view_test.exs
  • test/phoenix_live_view/integrations/navigation_test.exs
  • test/phoenix_live_view/integrations/nested_test.exs
  • test/phoenix_live_view/integrations/params_test.exs
  • test/phoenix_live_view/js_test.exs
  • test/support/e2e/form_live.ex
  • test/support/e2e/issues/issue_3026.ex
  • test/support/e2e/issues/issue_3040.ex
  • test/support/e2e/issues/issue_3047.ex
  • test/support/e2e/issues/issue_3169.ex
  • test/support/e2e/issues/issue_3194.ex
  • test/support/e2e/issues/issue_3200.ex
  • test/support/e2e/upload_live.ex
  • test/support/live_views/component_and_nested_in_live.ex
  • test/support/live_views/component_in_live.ex
  • test/support/live_views/components.ex
  • test/support/live_views/connect.ex
  • test/support/live_views/elements.ex
  • test/support/live_views/events.ex
  • test/support/live_views/flash.ex
  • test/support/live_views/general.ex
  • test/support/live_views/host.ex
  • test/support/live_views/layout.ex
  • test/support/live_views/lifecycle.ex
  • test/support/live_views/live_in_component.ex
  • test/support/live_views/params.ex
  • test/support/live_views/reload_live.ex
  • test/support/live_views/update.ex
  • test/support/live_views/upload_live.ex
  • test/support/router.ex
2024-07-18T14:16:01 See commit

This commit ensures that JavaScript commands are properly reapplied when a LiveView reconnects. It includes changes to the DOMPatch class in dom_patch.js to recursively morph stream items that were kept on reset, as well as updates to the streams.spec.js test file to verify that JS commands are applied correctly when rejoining. Additionally, a new button for hiding elements using JS is added to the StreamLive module in the streams.ex file.

Overall, this commit addresses the issue of stream items not retaining their JS commands upon rejoining a LiveView, ensuring that the commands are correctly reapplied after a reconnect. The changes made to the DOMPatch class and the test files help to verify and validate this functionality, improving the overall user experience and functionality of LiveView applications.

Files changed

  • assets/js/phoenix_live_view/dom_patch.js
  • test/e2e/tests/streams.spec.js
  • test/support/live_views/streams.ex
2024-07-18T14:20:40 See commit

This commit addresses an issue where unnecessary remounting was occurring when navigating back using the browser back button in Phoenix LiveView. The problem stemmed from the comparison of ids in the popstate event, where the history state was not set on initial navigation, leading to the unnecessary remount. The fix involves using replaceRootHistory when joining the main view, preventing this unnecessary remounting.

In addition to the code changes in assets/js/phoenix_live_view/view.js, a new test was added in test/e2e/tests/navigation.spec.js to ensure that navigating all the way back works without remounting, only patching. The test confirms that network events show only patch navigation and that the expected number of live patches were applied during the navigation process.

Files changed

  • assets/js/phoenix_live_view/view.js
  • test/e2e/tests/navigation.spec.js
2024-07-18T14:21:50 See commit

This commit addresses an issue where using JS.dispatch to trigger an input event only worked when targeting an input element (input, select, textarea), not the form element itself. The commit adds a check to throw a useful error if the target of the event is invalid, specifically when dispatching a custom event on elements other than input elements inside a form. This error message provides clarity and guidance for developers encountering this issue.

The changes made in the commit are limited to the assets/js/phoenix_live_view/live_socket.js file, with modifications that include adding 3 lines of code to implement the error-throwing check. The commit references issue #3328, indicating that it addresses a specific problem reported in that issue. Overall, this commit enhances the error-handling functionality for dispatching input events on invalid targets, improving the developer experience when working with LiveSocket in Phoenix.

Files changed

  • assets/js/phoenix_live_view/live_socket.js