phoenix_live_view

Phoenix LiveView

Phoenix LiveView enables rich, real-time user experiences with server-rendered HTML. For more information, see the initial announcement.

Note: Currently LiveView is under active development and we are focused on getting a stable and solid initial version out. For this reason, we will be accepting only bug reports in the issues tracker for now. We will open the issues tracker for features after the current milestone is ironed out.

Learning

As official guides are being developed, see our existing comprehensive docs and examples to get up to speed:

• Phoenix.LiveView docs for Elixir and JavaScript usage
• Phoenix.LiveViewTest for testing docs
• LiveView example repo with a handful of examples from Weather widgets, autocomplete search, and games like Snake or Pacman

Installation

There are currently two methods for installing LiveView. For projects that require more stability, it is recommended that you install using the installation guide on HexDocs. If you want to use the latest features, you should follow the instructions given in the markdown file here.

Browser Support

All current Chrome, Safari, Firefox, and MS Edge are supported. IE11 support is available with the following polyfills:

$ npm install --save --prefix assets mdn-polyfills url-search-params-polyfill formdata-polyfill child-replace-with-polyfill classlist-polyfill shim-keyboard-event-key

Note: The shim-keyboard-event-key polyfill is also required for MS Edge 12-18.

// assets/js/app.js
import "mdn-polyfills/CustomEvent"
import "mdn-polyfills/String.prototype.startsWith"
import "mdn-polyfills/Array.from"
import "mdn-polyfills/NodeList.prototype.forEach"
import "mdn-polyfills/Element.prototype.closest"
import "mdn-polyfills/Element.prototype.matches"
import "child-replace-with-polyfill"
import "url-search-params-polyfill"
import "formdata-polyfill"
import "classlist-polyfill"
import "shim-keyboard-event-key"

import {Socket} from "phoenix"
import LiveSocket from "phoenix_live_view"
...

Changelog

0.8.0 (2020-02-22)

Backwards incompatible changes

• Remove Phoenix.LiveView.Flash in favor of :fetch_live_flash imported by Phoenix.LiveView.Router
• Live layout must now access the child contents with @inner_content instead of invoking the LiveView directly
• Returning :stop tuples from LiveView mount or handle_[params|call|cast|info|event] is no longer supported. LiveViews are stopped when issuing a redirect or push_redirect

Enhancements

• Add put_live_layout plug to put the root layout used for live routes
• Allow redirect and push_redirect from mount
• Use acknowledgement tracking to avoid patching inputs until the server has processed the form event
• Add CSS loading states to all phx bound elements with event specific CSS classes
• Dispatch phx:page-loading-start and phx:page-loading-stop on window for live navigation, initial page loads, and form submits, for user controlled page loading integration
• Allow any phx bound element to specify phx-page-loading to dispatch loading events above when the event is pushed
• Add client side latency simulator with new enableLatencySim(milliseconds) and disableLatencySim()
• Add enableDebug() and disableDebug() to LiveSocket for ondemand browser debugging from the web console
• Do not connect LiveSocket WebSocket or bind client events unless a LiveView is found on the page
• Add transport_pid/1 to return the websocket transport pid when the socket is connected

Bug Fixes

• Fix issue where a failed mount from a live_redirect would reload the current URL instead of the attempted new URL