Phoenix LiveView

https://phoenix-live-view.hexdocs.pm/
Admin
Phoenix LiveView enables rich, real-time user experiences with server-rendered HTML, allowing...
Tokens:261,932
Snippets:2,063
Trust Score:9
Update:5 days ago
Show doc for...
Tokens:
Raw
### live/2 example

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveViewTest.md

Spawns a connected LiveView process. With a path, performs a GET and upgrades to LiveView; without, converts a previously rendered conn. Returns {:ok, view, html} or {:error, {:redirect, ...}}.

```elixir
{:ok, view, html} = live(conn, "/path")
assert view.module == MyLive
assert html =~ "the count is 3"

assert {:error, {:redirect, %{to: "/somewhere"}}} = live(conn, "/path")
```

--------------------------------

### Presign upload function example

Source: https://phoenix-live-view.hexdocs.pm/external-uploads.md

Example presign_upload/2 function that calls a start_session function and returns the uploader and entrypoint metadata.

```elixir
defp presign_upload(entry, socket) do
  {:ok, %{"Location" => link}} =
    SomeTube.start_session(%{
      "uploadType" => "resumable",
      "x-upload-content-length" => entry.client_size
    })

  {:ok, %{uploader: "UpChunk", entrypoint: link}, socket}
end
```

--------------------------------

### render examples

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveViewTest.md

Shows how to get the HTML string of a rendered view or element.

```elixir
{:ok, view, _html} = live(conn, "/thermo")
assert render(view) =~ ~s|<button id="alarm">Snooze</div>|
```

```elixir
assert view
       |> element("#alarm")
       |> render() == "Snooze"
```

--------------------------------

### Install UpChunk with npm

Source: https://phoenix-live-view.hexdocs.pm/external-uploads.md

Install the @mux/upchunk package into the assets directory using npm.

```shell
$ npm install --prefix assets --save @mux/upchunk
```

--------------------------------

### open_browser examples

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveViewTest.md

Demonstrates opening the browser for an element and for a form submission.

```elixir
view
|> element("#term > :first-child", "Increment")
|> open_browser()
```

```elixir
assert view
       |> form("#term", user: %{name: "hello"})
       |> open_browser()
       |> render_submit() =~ "Name updated"
```

--------------------------------

### follow_trigger_action/2 example

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveViewTest.md

Follows a phx-trigger-action HTTP form submission. The example shows creating a form, submitting it, verifying the trigger action, and following the request to assert method and params.

```elixir
form = form(live_view, selector, %{"form" => "data"})

# First we submit the form. Optionally verify that phx-trigger-action
# is now part of the form.
assert render_submit(form) =~ ~r/phx-trigger-action/

# Now follow the request made by the form
conn = follow_trigger_action(form, conn)
assert conn.method == "POST"
assert conn.params == %{"form" => "data"}
```

--------------------------------

### render_component examples

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveViewTest.md

Demonstrates rendering function components and stateful components in tests.

```elixir
assert render_component(&Weather.city/1, name: "KrakÃ³w") =~
         "some markup in component"

assert render_component(MyComponent, id: 123, user: %User{}) =~
         "some markup in component"

assert render_component(MyComponent, %{id: 123, user: %User{}}, router: SomeRouter) =~
         "some markup in component"
```

--------------------------------

### render_click view example

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveViewTest.md

Demonstrates triggering a click event directly on a view.

```elixir
{:ok, view, html} = live(conn, "/thermo")
assert html =~ "The temperature is: 30â„‰"
assert render_click(view, :inc) =~ "The temperature is: 31â„‰"
```

--------------------------------

### render_async example

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveViewTest.md

Awaits all async tasks and renders the LiveView once complete.

```elixir
{:ok, lv, html} = live(conn, "/path")
assert html =~ "loading data..."
assert render_async(lv) =~ "data loaded!"
```

--------------------------------

### render_submit examples

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveViewTest.md

Demonstrates submitting forms, including passing values and hidden inputs.

```elixir
{:ok, view, html} = live(conn, "/thermo")

assert view
       |> element("form")
       |> render_submit(%{deg: 123, avatar: upload}) =~ "123 exceeds limits"
```

```elixir
assert view
       |> form("#term", user: %{name: "hello"})
       |> render_submit(%{user: %{"hidden_field" => "example"}}) =~ "Name updated"
```

--------------------------------

### render_keyup view example

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveViewTest.md

Sends a keyup event directly to the view.

```elixir
{:ok, view, html} = live(conn, "/thermo")
assert html =~ "The temp is: 30â„‰"
assert render_keyup(view, :inc) =~ "The temp is: 31â„‰"
```

--------------------------------

### preflight_upload example

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveViewTest.md

Tests a preflight upload request for an external uploader.

```elixir
avatar = file_input(lv, "#my-form-id", :avatar, [%{name: ..., ...}, ...])
assert {:ok, %{ref: _ref, config: %{chunk_size: _}}} = preflight_upload(avatar)
```

--------------------------------

### Render file input

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.Component.md

Basic example of rendering a file input for a LiveView upload.

```heex
<.live_file_input upload={@uploads.avatar} />
```

--------------------------------

### render_click element example

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveViewTest.md

Demonstrates triggering a click event on a specific element.

```elixir
{:ok, view, html} = live(conn, "/thermo")

assert view
       |> element("button", "Increment")
       |> render_click() =~ "The temperature is: 30â„‰"
```

--------------------------------

### render_blur view example

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveViewTest.md

Demonstrates using render_blur directly on a view with an event name.

```elixir
{:ok, view, html} = live(conn, "/thermo")
assert html =~ "The temp is: 30â„‰"
assert render_blur(view, :inactive) =~ "Tap to wake"
```

--------------------------------

### render_hook examples

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveViewTest.md

Demonstrates sending hook events to the view or specific elements with phx-target.

```elixir
{:ok, view, html} = live(conn, "/thermo")
assert html =~ "The temp is: 30â„‰"
assert render_hook(view, :refresh, %{deg: 32}) =~ "The temp is: 32â„‰"
```

```elixir
{:ok, view, _html} = live(conn, "/thermo")
assert view
       |> element("#thermo-component")
       |> render_hook(:refresh, %{deg: 32}) =~ "The temp is: 32â„‰"
```

--------------------------------

### stream/4 with prepend index

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveView.md

Example of prepending items to a stream using the :at option set to 0.

```elixir
stream(socket, :songs, [song1, song2, song3], at: 0)
```

--------------------------------

### LiveSocket constructor with dom option

Source: https://phoenix-live-view.hexdocs.pm/js-interop.md

Example of creating a LiveSocket instance with a dom option that includes an onBeforeElUpdated callback to preserve attributes starting with data-js- during DOM patches.

```APIDOC
## LiveSocket constructor

### Description
Creates a LiveSocket instance with a dom option that provides an onBeforeElUpdated callback. This callback is invoked before each DOM patch operation, allowing external libraries to reinitialize DOM elements or copy attributes as needed.

### Method
Constructor

### Endpoint
new LiveSocket(endpoint, socket, opts)

### Parameters
#### Constructor Parameters
- **endpoint** (string) - Required - The WebSocket endpoint for LiveView.
- **socket** (Socket) - Required - The Phoenix Socket instance.
- **opts** (object) - Required - Options object, may include `params`, `hooks`, and `dom`.

#### dom.onBeforeElUpdated callback
- **from** (Element) - Required - The source DOM element before patch.
- **to** (Element) - Required - The target DOM element that will be patched.

### Request Example
```javascript
let liveSocket = new LiveSocket("/live", Socket, {
  params: {_csrf_token: csrfToken},
  hooks: Hooks,
  dom: {
    onBeforeElUpdated(from, to) {
      for (const attr of from.attributes) {
        if (attr.name.startsWith("data-js-")) {
          to.setAttribute(attr.name, attr.value);
        }
      }
    }
  }
})
```

### Response
No return value; the callback's return value is ignored.
```

--------------------------------

### start_async/3 and handle_async/3 workflow

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveView.md

Demonstrates starting an asynchronous task during mount and handling the success or failure results in the handle_async callback.

```elixir
def mount(%{"id" => id}, _, socket) do
  {:ok,
   socket
   |> assign(:org, AsyncResult.loading())
   |> start_async(:my_task, fn -> fetch_org!(id) end)}
end

def handle_async(:my_task, {:ok, fetched_org}, socket) do
  %{org: org} = socket.assigns
  {:noreply, assign(socket, :org, AsyncResult.ok(org, fetched_org))}
end

def handle_async(:my_task, {:exit, reason}, socket) do
  %{org: org} = socket.assigns
  {:noreply, assign(socket, :org, AsyncResult.failed(org, {:exit, reason})))}
end
```

--------------------------------

### stream_async/3

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveView.md

Inserts data into a stream asynchronously. Wraps the given function in a task linked to the caller, errors are wrapped. The key is used as the stream name and a regular assign with the same name gets assigned a Phoenix.LiveView.AsyncResult struct. The stream is initialized to an empty list before starting the asynchronous function.

```APIDOC
## stream_async/3

### Description
Inserts data into a stream asynchronously. Wraps your function in a task linked to the caller, errors are wrapped. The key passed to `stream_async/3` will be used as the stream name. Furthermore, a regular assign with the same name gets assigned a `Phoenix.LiveView.AsyncResult` struct holding the status of the operation. The stream is initialized to an empty list before starting the asynchronous function, so accessing `@streams.name` is always possible.

### Method
Macro

### Signature
`stream_async(socket, key, fun, opts \\ [])`

### Parameters
- **socket** (Phoenix.LiveView.Socket) - Required - The socket to operate on.
- **key** (atom) - Required - The stream name and assign key.
- **fun** (function) - Required - The asynchronous function. Must return `{:ok, Enumerable.t()}` or `{:ok, Enumerable.t(), opts}` where opts are the same as in `stream/4`. If it returns `{:error, any()}`, the AsyncResult is assigned as failed and the stream is not updated.
- **opts** (keyword) - Optional - Options:
  - `:supervisor` (module) - Optional - A `Task.Supervisor` to supervise the task.
  - `:reset` (boolean) - Optional - Controls whether to remove previous results during the async operation. Defaults to `false`. Note: this option controls the async assign, not the stream.

### Return Value
Returns an updated socket with the stream and assign set.

### Examples
```elixir
def mount(%{"slug" => slug}, _, socket) do
  current_scope = socket.assigns.current_scope

  {:ok,
    socket
    |> assign(:foo, "bar")
    |> assign_async(:org, fn -> {:ok, %{org: fetch_org!(current_scope)}} end)
    |> stream_async(:posts, fn -> {:ok, list_posts!(current_scope), limit: 10} end)
end
```

Note the `reset` option controls the async assign, not the stream:

```elixir
def mount(_, _, socket) do
  {:ok,
    socket
    # IMPORTANT: reset here does NOT reset the stream, but only the loading state
    |> stream_async(:my_stream, fn -> {:ok, list_items!()} end, reset: true)
    # This resets the stream
    |> stream_async(:my_reset_stream, fn -> {:ok, list_items!(), reset: true} end)
end
```

Any stream options need to be returned as optional third argument in the return value of the asynchronous function.
```

--------------------------------

### JS.push examples

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveView.JS.md

Demonstrates pushing events to the server with various options like values and page loading states.

```heex
<button phx-click={JS.push("clicked")}>click me!</button>
<button phx-click={JS.push("clicked", value: %{id: @id})}>click me!</button>
<button phx-click={JS.push("clicked", page_loading: true)}>click me!</button>
```

--------------------------------

### mount/3

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveView.md

The LiveView entry-point callback. Invoked twice for each LiveView in the root of a template: once for the initial page load and once to establish the live socket. It expects params, session, and socket arguments and must return {:ok, socket} or {:ok, socket, options}.

```APIDOC
## mount/3

### Description
The LiveView entry-point. For each LiveView in the root of a template, mount/3 is invoked twice: once to do the initial page load and again to establish the live socket.

### Callback Signature
```elixir
@callback mount(
  params :: unsigned_params() | :not_mounted_at_router,
  session :: map(),
  socket :: Phoenix.LiveView.Socket.t()
) ::
  {:ok, Phoenix.LiveView.Socket.t()}
  | {:ok, Phoenix.LiveView.Socket.t(), keyword()}
```

### Parameters
- **params** (unsigned_params() | :not_mounted_at_router) - Required - A map of string keys containing public information set by the user. Contains query params and router path parameters. If the LiveView was not mounted at the router, this argument is the atom :not_mounted_at_router.
- **session** (map()) - Required - The connection session.
- **socket** (Phoenix.LiveView.Socket.t()) - Required - The LiveView socket.

### Return Values
- **{:ok, socket}** - Success. Returns the updated socket.
- **{:ok, socket, options}** - Success with options. Options can include:
  - **:temporary_assigns** (keyword()) - Optional - A keyword list of assigns that are temporary and must be reset to their value after every render. Once reset, the value won't be re-rendered until explicitly assigned.
  - **:layout** (optional) - Optional - The optional layout to be used by the LiveView. Overrides any layout previously set via Phoenix.LiveView.Router.live_session/2 or on use Phoenix.LiveView.

### Security Note
The params argument contains untrusted data from the client. You must authorize and validate this data before using it to fetch or modify resources. See the "Security considerations" guide for more information.
```

--------------------------------

### Define a function component

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveViewTest.md

An example of a simple function component to be used in testing examples.

```elixir
def greet(assigns) do
  ~H"""
  <div>Hello, {@name}!</div>
  """
end
```

--------------------------------

### live/2

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveViewTest.md

Spawns a connected LiveView process. If a path is given, a regular get(conn, path) is done and the page is upgraded to a LiveView. If no path is given, it assumes a previously rendered %Plug.Conn{} is given, which will be converted to a LiveView immediately.

```APIDOC
## live/2

### Description
Spawns a connected LiveView process. If a path is given, a regular get(conn, path) is done and the page is upgraded to a LiveView. If no path is given, it assumes a previously rendered %Plug.Conn{} is given, which will be converted to a LiveView immediately.

### Parameters
- **conn** (connection) - Required - The connection to use.
- **path** (string) - Optional - The path to request.

### Options
- **:on_error** - Can be either :raise or :warn to control whether detected errors like duplicate IDs or live components fail the test or just log a warning. Defaults to :raise.

### Returns
- `{:ok, view, html}` - On success, with the LiveView and its rendered HTML.
- `{:error, {:redirect, %{to: path}}}` - If the LiveView redirects.

### Example
```elixir
{:ok, view, html} = live(conn, "/path")
assert view.module == MyLive
assert html =~ "the count is 3"

assert {:error, {:redirect, %{to: "/somewhere"}}} = live(conn, "/path")
```
```

--------------------------------

### cancel_async usage examples

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveView.md

Examples of how to call cancel_async with different arguments to cancel an async operation.

```elixir
cancel_async(socket, :preview)
cancel_async(socket, :preview, :my_reason)
cancel_async(socket, socket.assigns.preview)
```

--------------------------------

### Example colocated CSS tag

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveView.ColocatedCSS.md

An example of a style tag using the ColocatedCSS type for scoping.

```heex
<style :type={MyAppWeb.ColocatedCSS} data-scope="my-scope" foo={@bar}>
  .my-class { color: red; }
</style>
```

--------------------------------

### Using Phoenix.LiveView

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveView.md

Example of using the __using__ macro to configure a LiveView with a custom container, layout, and log level.

```elixir
use Phoenix.LiveView,
  container: {:tr, class: "colorized"},
  layout: {MyAppWeb.Layouts, :app},
  log: :info
```

--------------------------------

### Basic allow_upload configurations

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveView.md

Examples of configuring file uploads with specific file types and entry limits.

```elixir
allow_upload(socket, :avatar, accept: ~w(.jpg .jpeg), max_entries: 2)
allow_upload(socket, :avatar, accept: :any)
```

--------------------------------

### assert_patched example

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveViewTest.md

Example of using assert_patched to assert a live patch was performed and returns the new path.

```elixir
render_click(view, :event_that_triggers_redirect)
assert_patched view, "/path"
```

--------------------------------

### live_redirect example

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveViewTest.md

Shows how to test a live redirect between LiveViews, including a failed redirect to a different live_session.

```elixir
assert {:ok, page_live, _html} = live(conn, "/page/1")
assert {:ok, page2_live, _html} = live(conn, "/page/2")

assert {:error, {:redirect, _}} = live_redirect(page2_live, to: "/admin")
```

--------------------------------

### assert_patch examples

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveViewTest.md

Examples of using assert_patch to assert a live patch occurs within a timeout. The first example uses the default timeout, the second specifies 30 ms, and the third captures the returned path and asserts it matches a regex.

```elixir
render_click(view, :event_that_triggers_patch)
assert_patch view
```

```elixir
render_click(view, :event_that_triggers_patch)
assert_patch view, 30
```

```elixir
render_click(view, :event_that_triggers_patch)
path = assert_patch view
assert path =~ ~r/path/+/
```

--------------------------------

### Render file input with label

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.Component.md

Example of rendering a file input alongside a descriptive label.

```heex
<label for={@uploads.avatar.ref}>Avatar</label>
<.live_file_input upload={@uploads.avatar} />
```

--------------------------------

### Example: Phone number hook

Source: https://phoenix-live-view.hexdocs.pm/js-interop.md

Example of defining a hook object for phone number formatting and passing it to the LiveSocket.

```APIDOC
## Example: Phone number hook

### Description
Example of defining a hook object for phone number formatting and passing it to the LiveSocket.

### Markup
```heex
<input type="text" name="user[phone_number]" id="user-phone-number" phx-hook="PhoneNumber" />
```

### JavaScript
```javascript
/**
 * @type {import("phoenix_live_view").HooksOptions}
 */
let Hooks = {}
Hooks.PhoneNumber = {
  mounted() {
    this.el.addEventListener("input", e => {
      let match = this.el.value.replace(/\D/g, "").match(/^(\d{3})(\d{3})(\d{4})$/) 
      if(match) {
        this.el.value = `${match[1]}-${match[2]}-${match[3]}`
      }
    })
  }
}

let liveSocket = new LiveSocket("/live", Socket, {hooks: Hooks, ...})
```
```

--------------------------------

### init/1

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveView.UploadWriter.md

Callback to initialize the upload writer with options. It receives the writer options and returns an initial state or an error.

```APIDOC
## init/1

### Description
Callback to initialize the upload writer with options. It receives the writer options and returns an initial state or an error.

### Callback
`init(opts :: term()) :: {:ok, state :: term()} | {:error, term()}`

### Parameters
- **opts** (term) - Required - Options passed to the writer when initializing.

### Returns
- `{:ok, state}` - Success with initial state.
- `{:error, term()}` - Failure with error reason.

### Example
```elixir
@impl true
def init(opts) do
  {:ok, %{total: 0, level: Keyword.fetch!(opts, :level)}}
end
```
```

--------------------------------

### stream_insert update and move example

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveView.md

Example of updating an item and moving it to a new position by combining stream_delete and stream_insert.

```elixir
song = get_song!(id)

socket
|> stream_delete(:songs, song)
|> stream_insert(:songs, song, at: -1)
```

--------------------------------

### stream_delete_by_dom_id usage example

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveView.md

Example showing how to render a stream and handle a delete event using the DOM ID.

```elixir
def render(assigns) do
  ~H"""
  <table>
    <tbody id="songs" phx-update="stream">
      <tr
        :for={{dom_id, song} <- @streams.songs}
        id={dom_id}
      >
        <td>{song.title}</td>
        <td><button phx-click={JS.push("delete", value: %{id: dom_id})}>delete</button></td>
      </tr>
    </tbody>
  </table>
  """
end

def handle_event("delete", %{"id" => dom_id}, socket) do
  {:noreply, stream_delete_by_dom_id(socket, :songs, dom_id)}
end
```

--------------------------------

### Directory listing for embed_templates example

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.Component.md

Shows the directory structure with components.ex and a cards directory containing two .html.heex template files.

```plain
├── components.ex
├── cards
│   ├── pricing_card.html.heex
│   └── features_card.html.heex
```

--------------------------------

### HEEx template script tag example

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveView.HTMLFormatter.TagFormatter.md

An example of a script tag in a HEEx template that would trigger the tag formatter.

```heex
<script :type={ColocatedHook} manifest="foo.ts">
  export default {
    mounted() {
      console.log("mounted");
    }
  }
</script>
```

--------------------------------

### live_children/1 example

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveViewTest.md

Returns the list of LiveView children for a parent LiveView, in rendered order. The example shows asserting a single child and clicking it.

```elixir
{:ok, view, _html} = live(conn, "/thermo")
assert [clock_view] = live_children(view)
assert render_click(clock_view, :snooze) =~ "snoozing"
```

--------------------------------

### transition(time, onStart, onDone?)

Source: https://phoenix-live-view.hexdocs.pm/js/classes/_internal_.default.html

Performs a transition.

```APIDOC
## transition(time, onStart, onDone?)

### Description
Performs a transition.

### Parameters
- **time** (any) - Required - The time.
- **onStart** (any) - Required - Callback on start.
- **onDone** (() => void) - Optional - Callback on done.

### Returns
void
```

--------------------------------

### HEEx template example with ~H

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.Component.md

A basic example of using the ~H sigil to define a template containing HTML, dynamic attributes, and a function component.

```heex
~H"""
<div title="My div" class={@class}>
  <p>Hello {@name}</p>
  <MyApp.Weather.city name="KrakÃ³w"/>
</div>
"""
```

--------------------------------

### __using__/1

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveComponent.md

Macro that uses LiveComponent in the current module. It accepts options such as :global_prefixes for component prefixes.

```APIDOC
## __using__/1

### Description
Macro that uses LiveComponent in the current module.

### Usage
```elixir
use Phoenix.LiveComponent
```

### Options
- **:global_prefixes** (list) - Optional - The global prefixes to use for components. See `Global Attributes` in `Phoenix.Component` for more information.
```

--------------------------------

### Example payload for Escape key press

Source: https://phoenix-live-view.hexdocs.pm/bindings.md

When a key is pressed, the value sent to the server contains the "key" that was pressed. This example shows the payload for pressing the Escape key.

```elixir
%{"key" => "Escape"}
```

--------------------------------

### assert_patch with path examples

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveViewTest.md

Examples of using assert_patch to assert a live patch to a specific path within a timeout. The first uses the default timeout, the second specifies 30 ms.

```elixir
render_click(view, :event_that_triggers_patch)
assert_patch view, "/path"
```

```elixir
render_click(view, :event_that_triggers_patch)
assert_patch view, "/path", 30
```

--------------------------------

### Using :for and :let in slots

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.Component.md

Demonstrates how to use :for and :let attributes together within a slot.

```heex
<.table id="my-table" rows={@users}>
  <:col :for={header <- @headers} :let={user}>
    <td>{user[header]}</td>
  </:col>
<.table>
```

--------------------------------

### refute_redirected example

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveViewTest.md

Asserts that a redirect to a given path was not performed.

```elixir
render_click(view, :event_that_triggers_redirect_to_path)
:ok = refute_redirected view, "/wrong_path"
```

--------------------------------

### Phoenix LiveView HTML template example

Source: https://phoenix-live-view.hexdocs.pm/html-attrs.md

Demonstrates the use of phx-click to trigger a server-side event with a parameter and a client-side JS command.

```heex
<button type="button" phx-click="click" phx-value-user={@current_user.id}>Click Me</button>
<button type="button" phx-click={JS.toggle(to: "#example")}>Toggle</button>
```

--------------------------------

### Render LiveComponent

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveComponent.md

Example of rendering a UserComponent within a template.

```heex
<.live_component module={UserComponent} id={user_id} />
```

--------------------------------

### LiveView mount and paginate_posts with stream

Source: https://phoenix-live-view.hexdocs.pm/bindings.md

Sets up the initial socket assigns and defines paginate_posts to fetch a page of posts, prepend or append to the stream based on paging direction, and set end_of_timeline? and page assigns. The stream limit is three times per_page to maintain UI performance.

```elixir
def mount(_, _, socket) do
  {:ok,
    socket
    |> assign(page: 1, per_page: 20)
    |> paginate_posts(1)}
end

defp paginate_posts(socket, new_page) when new_page >= 1 do
  %{per_page: per_page, page: cur_page} = socket.assigns
  posts = Blog.list_posts(offset: (new_page - 1) * per_page, limit: per_page)

  {posts, at, limit} =
    if new_page >= cur_page do
      {posts, -1, per_page * 3 * -1}
    else
      {Enum.reverse(posts), 0, per_page * 3}
    end

  case posts do
    [] ->
      assign(socket, end_of_timeline?: at == -1)

    [_ | _] = posts ->
      socket
      |> assign(end_of_timeline?: false)
      |> assign(:page, new_page)
      |> stream(:posts, posts, at: at, limit: limit)
  end
end
```

--------------------------------

### Define LiveView route

Source: https://phoenix-live-view.hexdocs.pm/live-navigation.md

Example router definition for a UserTable LiveView.

```elixir
live "/users", UserTable
```

--------------------------------

### render_keyup element example

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveViewTest.md

Sends a keyup event to a specific element.

```elixir
{:ok, view, html} = live(conn, "/thermo")
assert html =~ "The temp is: 30â„‰"
assert view |> element("#inc") |> render_keyup() =~ "The temp is: 31â„‰"
```

--------------------------------

### transition(el: HTMLElement, transition: string | string[], opts?: TransitionCommandOpts): void

Source: https://phoenix-live-view.hexdocs.pm/js/interfaces/_internal_.HookJSCommands.html

Applies a transition to an element.

```APIDOC
## transition

### Description
Applies a transition to an element.

### Method
transition

### Signature
transition(el: HTMLElement, transition: string | string[], opts?: TransitionCommandOpts): void

### Parameters
- **el** (HTMLElement) - Required - The element to apply the transition to.
- **transition** (string | string[]) - Required - The transition name(s) to apply.
- **opts** (TransitionCommandOpts) - Optional - Optional settings. Accepts: `time`, `delay`, and `blocking`.

### Returns
void
```

--------------------------------

### __using__

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveView.md

Macro that uses LiveView in the current module to mark it as a LiveView. Configures container, layout, logging, and global prefixes.

```APIDOC
## __using__

### Description
Uses LiveView in the current module to mark it a LiveView. This macro sets up the module with LiveView functionality and accepts configuration options.

### Usage
```elixir
use Phoenix.LiveView,
  container: {:tr, class: "colorized"},
  layout: {MyAppWeb.Layouts, :app},
  log: :info
```

### Options
- **:container** (tuple) - Optional. HTML tag and DOM attributes for the LiveView container. Example: `{:li, style: "color: blue;"}`.
- **:global_prefixes** (list) - Optional. Global prefixes to use for components. See `Global Attributes` in `Phoenix.Component`.
- **:layout** (tuple) - Optional. Layout the LiveView will be rendered in. Can be overridden by `c:mount/3` or `:layout` option in `Phoenix.LiveView.Router.live_session/2`.
- **:log** (atom or false) - Optional. Log level for the LiveView, either `false` or a log level.
```

--------------------------------

### render_keydown view example

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveViewTest.md

Sends a keydown event directly to the view.

```elixir
{:ok, view, html} = live(conn, "/thermo")
assert html =~ "The temp is: 30â„‰"
assert render_keydown(view, :inc) =~ "The temp is: 31â„‰"
```

--------------------------------

### render_keydown element example

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveViewTest.md

Sends a keydown event to a specific element.

```elixir
{:ok, view, html} = live(conn, "/thermo")
assert html =~ "The temp is: 30â„‰"
assert view |> element("#inc") |> render_keydown() =~ "The temp is: 31â„‰"
```

--------------------------------

### render_focus view example

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveViewTest.md

Sends a focus event directly to the view.

```elixir
{:ok, view, html} = live(conn, "/thermo")
assert html =~ "The temp is: 30â„‰"
assert render_focus(view, :inactive) =~ "Tap to wake"
```

--------------------------------

### Auto-upload with progress handling

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveView.md

Example of configuring auto-uploads and a progress function to consume files as they complete.

```elixir
allow_upload(socket, :avatar, accept: :any, progress: &handle_progress/3, auto_upload: true)

defp handle_progress(:avatar, entry, socket) do
  if entry.done? do
    uploaded_file =
      consume_uploaded_entry(socket, entry, fn %{} = meta ->
        {:ok, ...}
      end)

    {:noreply, put_flash(socket, :info, "file #{uploaded_file.name} uploaded")}
  else
    {:noreply, socket}
  end
end
```

--------------------------------

### push_focus examples

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveView.JS.md

Shows two calls to JS.push_focus: one with no arguments and one with the :to option to specify a target selector.

```elixir
JS.push_focus()
JS.push_focus(to: "#my-button")
```

--------------------------------

### refute_push_event example

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveViewTest.md

Refutes that an event will be pushed within the default timeout.

```elixir
refute_push_event view, "scores", %{points: _, user: "josÃ©"}
```

--------------------------------

### render_focus element example

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveViewTest.md

Demonstrates using element/3 to target an element with phx-focus and triggering the event.

```elixir
{:ok, view, html} = live(conn, "/thermo")

assert view
       |> element("#inactive")
       |> render_focus() =~ "Tap to wake"
```

--------------------------------

### refute_patched example

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveViewTest.md

Asserts that a live patch to a given path was not performed.

```elixir
render_click(view, :event_that_triggers_patch_to_path)
:ok = refute_patched view, "/wrong_path"
```

--------------------------------

### Combine regular HTTP routes and live routes with same authentication

Source: https://phoenix-live-view.hexdocs.pm/Phoenix.LiveView.Router.md

Shows how to define a regular HTTP route and live routes with the same authentication rules, using a plug for regular routes and on_mount for live routes.

```elixir
scope "/" do
  # Regular routes
  pipe_through [MyAppWeb.AdminPlugAuth]
  get "/admin/health", AdminHealthController, :index

  # Live routes
  live_session :admin, on_mount: MyAppWeb.AdminLiveAuth do
    live "/admin", AdminDashboardLive, :index
    live "/admin/posts", AdminPostLive, :index
  end
end
```
Tokens:
Raw