phoenix_live_view changelog 

Welcome to the latest update! We've made some nifty improvements and squashed a few bugs. Let's dive into the details! 🚀

### New Features & Improvements
- **Update socket lifecycle docs**: Clarified that `phx-connect` and `phx-disconnected` are bindings, not events. This helps avoid confusion with JavaScript events or LiveView socket events. The docs now show how to use these bindings to manage connection lifecycle events with JavaScript. 📚
- **Consistent capitalization**: Ensured that references to CSS and JavaScript are consistently capitalized across the board. This includes documentation updates and some snazzy new features like CSS loading states for Phoenix-bound elements, event-specific CSS classes, and a client-side latency simulator. 🎨
- **Better assigns-eex.md**: Enhanced the Elixir guides to explain common pitfalls and best practices when using variables in LiveViews and LiveComponents. Emphasized the use of `assign/2`, `assign/3`, `assign_new/3`, and `update/3` functions over direct access in templates. 🛠️

Enjoy the smoother, clearer, and more consistent experience! 🌟

Included Commits

2024-06-07T21:22:19 See commit

This commit updates the socket lifecycle documentation to clarify that phx-connect and phx-disconnected are bindings, not events themselves. This distinction is important to avoid confusion with JavaScript events or LiveView socket events. The changes made in the commit include modifying the guides/client/bindings.md file, with 4 additions, 2 deletions, and a total of 6 changes. The example provided in the documentation now shows how to use phx-connected and phx-disconnected bindings to react to connection lifecycle events with JavaScript commands, such as showing an element when the LiveView loses its connection and hiding it when the connection recovers.

Overall, this commit updates the documentation to provide clearer information about the phx-connect and phx-disconnected bindings in the context of LiveView socket lifecycle events. By emphasizing that these are bindings and not events themselves, readers can better understand how to use them to react to connection lifecycle events using JavaScript commands.

Files changed

  • guides/client/bindings.md
2024-06-07T21:22:44 See commit

This commit focuses on ensuring consistent capitalization in references to CSS and JavaScript throughout the codebase. Specifically, changes were made to update instances of "css" to "CSS" and "javascript" to "JavaScript" in various parts of the code, including the documentation and changelog. Additionally, the commit includes enhancements such as adding CSS loading states to Phoenix-bound elements with event-specific CSS classes, dispatching loading events for live navigation, and integrating a client-side latency simulator. The commit also includes updates to the client bindings documentation to reflect the use of CSS loading classes and customization options for events.

Overall, the commit aims to maintain consistency in capitalization when referring to CSS and JavaScript and includes enhancements related to CSS loading states, event customization, and client-side latency simulation. It also updates the documentation to provide clear instructions on utilizing CSS loading classes and customizing event behavior in Phoenix-bound elements.

Files changed

  • CHANGELOG.md
  • guides/client/bindings.md
  • guides/client/uploads-external.md
2024-06-09T08:38:14 See commit

This commit improves the assigns-eex.md file in the Elixir guides, making changes to better explain common pitfalls and best practices when using variables in LiveViews and LiveComponents. It emphasizes the use of assign/2, assign/3, assign_new/3, and update/3 functions to compute variables, rather than accessing them directly inside templates. The commit also discusses the assigns special variable and advises against accessing it directly in templates, recommending the use of @ to access specific keys instead.

Overall, the commit aims to provide clearer guidance on handling variables in LiveViews and LiveComponents, highlighting best practices to avoid common pitfalls and improve performance by utilizing the recommended functions for computing variables. It emphasizes the importance of avoiding direct access to variables and the assigns variable in templates, providing examples and explanations to help developers better understand and implement these practices effectively.

Files changed

  • guides/server/assigns-eex.md