Doing any of the following things fixes it:
86 |-
87 |
- Setting the `phx-hook` to use a fixed id. 88 |
- Removing the `pushEvent` from the OuterHook `mounted` callback. 89 |
- Deferring the pushEvent by wrapping it in a setTimeout. 90 |
The LiveView content goes here
54 | """ 55 | end 56 | end 57 | 58 | defmodule Example.Router do 59 | use Phoenix.Router 60 | import Phoenix.LiveView.Router 61 | 62 | pipeline :browser do 63 | plug(:accepts, ["html"]) 64 | end 65 | 66 | scope "/", Example do 67 | pipe_through(:browser) 68 | 69 | live("/", HomeLive, :index) 70 | end 71 | end 72 | 73 | defmodule Example.Endpoint do 74 | use Phoenix.Endpoint, otp_app: :phoenix 75 | socket("/live", Phoenix.LiveView.Socket) 76 | plug Plug.Static, from: {:phoenix, "priv/static"}, at: "/assets/phoenix" 77 | plug Plug.Static, from: {:phoenix_live_view, "priv/static"}, at: "/assets/phoenix_live_view" 78 | plug(Example.Router) 79 | end 80 | 81 | defmodule Example.HomeLiveTest do 82 | use ExUnit.Case 83 | 84 | import Phoenix.ConnTest 85 | import Plug.Conn 86 | import Phoenix.LiveViewTest 87 | 88 | @endpoint Example.Endpoint 89 | 90 | test "works properly" do 91 | conn = Phoenix.ConnTest.build_conn() 92 | 93 | {:ok, _view, html} = live(conn, "/") 94 | 95 | assert html =~ "The LiveView content goes here" 96 | end 97 | end 98 | 99 | {:ok, _} = Supervisor.start_link([Example.Endpoint], strategy: :one_for_one) 100 | ExUnit.run() 101 | Process.sleep(:infinity) 102 | -------------------------------------------------------------------------------- /.github/workflows/assets.yml: -------------------------------------------------------------------------------- 1 | name: Assets 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | - "v*.*" 8 | 9 | jobs: 10 | build: 11 | runs-on: ubuntu-22.04 12 | env: 13 | elixir: 1.18.1 14 | otp: 27.2 15 | steps: 16 | - name: Checkout 17 | uses: actions/checkout@v4 18 | 19 | - name: Set up Elixir 20 | uses: erlef/setup-beam@v1 21 | with: 22 | elixir-version: ${{ env.elixir }} 23 | otp-version: ${{ env.otp }} 24 | 25 | - name: Restore deps and _build cache 26 | uses: actions/cache@v4 27 | with: 28 | path: | 29 | deps 30 | _build 31 | key: ${{ runner.os }}-mix-${{ env.elixir }}-${{ env.otp }}-${{ hashFiles('**/mix.lock') }}-dev 32 | restore-keys: | 33 | ${{ runner.os }}-mix-${{ env.elixir }}-${{ env.otp }}- 34 | - name: Install Dependencies 35 | run: mix deps.get --only dev 36 | 37 | - name: Set up Node.js 20.x 38 | uses: actions/setup-node@v4 39 | with: 40 | node-version: 20.x 41 | 42 | - name: Restore npm cache 43 | uses: actions/cache@v4 44 | with: 45 | path: ~/.npm 46 | key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} 47 | restore-keys: | 48 | ${{ runner.os }}-node- 49 | 50 | - name: Install npm dependencies 51 | run: npm ci 52 | 53 | - name: Build assets 54 | run: mix assets.build 55 | 56 | - name: Push updated assets 57 | id: push_assets 58 | uses: stefanzweifel/git-auto-commit-action@v5 59 | with: 60 | commit_message: Update assets 61 | file_pattern: priv/static 62 | -------------------------------------------------------------------------------- /.github/workflows/docs.yml: -------------------------------------------------------------------------------- 1 | name: Docs 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | permissions: 9 | contents: read 10 | pages: write 11 | id-token: write 12 | 13 | jobs: 14 | build: 15 | runs-on: ubuntu-22.04 16 | env: 17 | elixir: 1.18.1 18 | otp: 27.2 19 | steps: 20 | - name: Checkout 21 | uses: actions/checkout@v4 22 | 23 | - name: Set up Elixir 24 | uses: erlef/setup-beam@v1 25 | with: 26 | elixir-version: ${{ env.elixir }} 27 | otp-version: ${{ env.otp }} 28 | 29 | - name: Restore deps and _build cache 30 | uses: actions/cache@v4 31 | with: 32 | path: | 33 | deps 34 | _build 35 | key: ${{ runner.os }}-mix-${{ env.elixir }}-${{ env.otp }}-${{ hashFiles('**/mix.lock') }}-docs 36 | restore-keys: | 37 | ${{ runner.os }}-mix-${{ env.elixir }}-${{ env.otp }}- 38 | - name: Install Dependencies 39 | run: mix deps.get --only docs 40 | 41 | - name: Build docs 42 | run: mix docs 43 | 44 | - name: Upload artifact 45 | uses: actions/upload-pages-artifact@v3 46 | with: 47 | path: doc/ 48 | 49 | # Deployment job 50 | deploy: 51 | environment: 52 | name: github-pages 53 | url: ${{steps.deployment.outputs.page_url}} 54 | runs-on: ubuntu-latest 55 | needs: build 56 | steps: 57 | - name: Deploy to GitHub Pages 58 | id: deployment 59 | uses: actions/deploy-pages@v4 60 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # The directory Mix will write compiled artifacts to. 2 | /_build/ 3 | 4 | # If you run "mix test --cover", coverage assets end up here. 5 | /cover/ 6 | 7 | # The directory Mix downloads your dependencies sources to. 8 | /deps/ 9 | 10 | # Where 3rd-party dependencies like ExDoc output generated docs. 11 | /doc/ 12 | 13 | # Ignore .fetch files in case you like to edit your project deps locally. 14 | /.fetch 15 | 16 | # If the VM crashes, it generates a dump, let's ignore it too. 17 | erl_crash.dump 18 | 19 | # Also ignore archive artifacts (built via "mix archive.build"). 20 | *.ez 21 | 22 | # Ignore package tarball (built via "mix hex.build"). 23 | phoenix_live_view-*.tar 24 | 25 | node_modules 26 | 27 | /test/e2e/test-results/ 28 | /playwright-report/ 29 | /coverage/ 30 | /assets/js/types/ 31 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # MIT License 2 | 3 | Copyright (c) 2018 Chris McCord 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | "Software"), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /assets/.prettierignore: -------------------------------------------------------------------------------- 1 | js/types/ 2 | -------------------------------------------------------------------------------- /assets/.prettierrc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phoenixframework/phoenix_live_view/e29a95ffdbf8e630a2e149b19590036a7c855c5c/assets/.prettierrc -------------------------------------------------------------------------------- /assets/js/phoenix_live_view/aria.js: -------------------------------------------------------------------------------- 1 | const ARIA = { 2 | anyOf(instance, classes) { 3 | return classes.find((name) => instance instanceof name); 4 | }, 5 | 6 | isFocusable(el, interactiveOnly) { 7 | return ( 8 | (el instanceof HTMLAnchorElement && el.rel !== "ignore") || 9 | (el instanceof HTMLAreaElement && el.href !== undefined) || 10 | (!el.disabled && 11 | this.anyOf(el, [ 12 | HTMLInputElement, 13 | HTMLSelectElement, 14 | HTMLTextAreaElement, 15 | HTMLButtonElement, 16 | ])) || 17 | el instanceof HTMLIFrameElement || 18 | el.tabIndex >= 0 || 19 | (!interactiveOnly && 20 | el.getAttribute("tabindex") !== null && 21 | el.getAttribute("aria-hidden") !== "true") 22 | ); 23 | }, 24 | 25 | attemptFocus(el, interactiveOnly) { 26 | if (this.isFocusable(el, interactiveOnly)) { 27 | try { 28 | el.focus(); 29 | } catch { 30 | // that's fine 31 | } 32 | } 33 | return !!document.activeElement && document.activeElement.isSameNode(el); 34 | }, 35 | 36 | focusFirstInteractive(el) { 37 | let child = el.firstElementChild; 38 | while (child) { 39 | if (this.attemptFocus(child, true) || this.focusFirstInteractive(child)) { 40 | return true; 41 | } 42 | child = child.nextElementSibling; 43 | } 44 | }, 45 | 46 | focusFirst(el) { 47 | let child = el.firstElementChild; 48 | while (child) { 49 | if (this.attemptFocus(child) || this.focusFirst(child)) { 50 | return true; 51 | } 52 | child = child.nextElementSibling; 53 | } 54 | }, 55 | 56 | focusLast(el) { 57 | let child = el.lastElementChild; 58 | while (child) { 59 | if (this.attemptFocus(child) || this.focusLast(child)) { 60 | return true; 61 | } 62 | child = child.previousElementSibling; 63 | } 64 | }, 65 | }; 66 | export default ARIA; 67 | -------------------------------------------------------------------------------- /assets/js/phoenix_live_view/dom_post_morph_restorer.js: -------------------------------------------------------------------------------- 1 | import { maybe } from "./utils"; 2 | 3 | import DOM from "./dom"; 4 | 5 | export default class DOMPostMorphRestorer { 6 | constructor(containerBefore, containerAfter, updateType) { 7 | const idsBefore = new Set(); 8 | const idsAfter = new Set( 9 | [...containerAfter.children].map((child) => child.id), 10 | ); 11 | 12 | const elementsToModify = []; 13 | 14 | Array.from(containerBefore.children).forEach((child) => { 15 | if (child.id) { 16 | // all of our children should be elements with ids 17 | idsBefore.add(child.id); 18 | if (idsAfter.has(child.id)) { 19 | const previousElementId = 20 | child.previousElementSibling && child.previousElementSibling.id; 21 | elementsToModify.push({ 22 | elementId: child.id, 23 | previousElementId: previousElementId, 24 | }); 25 | } 26 | } 27 | }); 28 | 29 | this.containerId = containerAfter.id; 30 | this.updateType = updateType; 31 | this.elementsToModify = elementsToModify; 32 | this.elementIdsToAdd = [...idsAfter].filter((id) => !idsBefore.has(id)); 33 | } 34 | 35 | // We do the following to optimize append/prepend operations: 36 | // 1) Track ids of modified elements & of new elements 37 | // 2) All the modified elements are put back in the correct position in the DOM tree 38 | // by storing the id of their previous sibling 39 | // 3) New elements are going to be put in the right place by morphdom during append. 40 | // For prepend, we move them to the first position in the container 41 | perform() { 42 | const container = DOM.byId(this.containerId); 43 | if (!container) { 44 | return; 45 | } 46 | this.elementsToModify.forEach((elementToModify) => { 47 | if (elementToModify.previousElementId) { 48 | maybe( 49 | document.getElementById(elementToModify.previousElementId), 50 | (previousElem) => { 51 | maybe( 52 | document.getElementById(elementToModify.elementId), 53 | (elem) => { 54 | const isInRightPlace = 55 | elem.previousElementSibling && 56 | elem.previousElementSibling.id == previousElem.id; 57 | if (!isInRightPlace) { 58 | previousElem.insertAdjacentElement("afterend", elem); 59 | } 60 | }, 61 | ); 62 | }, 63 | ); 64 | } else { 65 | // This is the first element in the container 66 | maybe(document.getElementById(elementToModify.elementId), (elem) => { 67 | const isInRightPlace = elem.previousElementSibling == null; 68 | if (!isInRightPlace) { 69 | container.insertAdjacentElement("afterbegin", elem); 70 | } 71 | }); 72 | } 73 | }); 74 | 75 | if (this.updateType == "prepend") { 76 | this.elementIdsToAdd.reverse().forEach((elemId) => { 77 | maybe(document.getElementById(elemId), (elem) => 78 | container.insertAdjacentElement("afterbegin", elem), 79 | ); 80 | }); 81 | } 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /assets/js/phoenix_live_view/entry_uploader.js: -------------------------------------------------------------------------------- 1 | import { logError } from "./utils"; 2 | 3 | export default class EntryUploader { 4 | constructor(entry, config, liveSocket) { 5 | const { chunk_size, chunk_timeout } = config; 6 | this.liveSocket = liveSocket; 7 | this.entry = entry; 8 | this.offset = 0; 9 | this.chunkSize = chunk_size; 10 | this.chunkTimeout = chunk_timeout; 11 | this.chunkTimer = null; 12 | this.errored = false; 13 | this.uploadChannel = liveSocket.channel(`lvu:${entry.ref}`, { 14 | token: entry.metadata(), 15 | }); 16 | } 17 | 18 | error(reason) { 19 | if (this.errored) { 20 | return; 21 | } 22 | this.uploadChannel.leave(); 23 | this.errored = true; 24 | clearTimeout(this.chunkTimer); 25 | this.entry.error(reason); 26 | } 27 | 28 | upload() { 29 | this.uploadChannel.onError((reason) => this.error(reason)); 30 | this.uploadChannel 31 | .join() 32 | .receive("ok", (_data) => this.readNextChunk()) 33 | .receive("error", (reason) => this.error(reason)); 34 | } 35 | 36 | isDone() { 37 | return this.offset >= this.entry.file.size; 38 | } 39 | 40 | readNextChunk() { 41 | const reader = new window.FileReader(); 42 | const blob = this.entry.file.slice( 43 | this.offset, 44 | this.chunkSize + this.offset, 45 | ); 46 | reader.onload = (e) => { 47 | if (e.target.error === null) { 48 | this.offset += /** @type {ArrayBuffer} */ (e.target.result).byteLength; 49 | this.pushChunk(/** @type {ArrayBuffer} */ (e.target.result)); 50 | } else { 51 | return logError("Read error: " + e.target.error); 52 | } 53 | }; 54 | reader.readAsArrayBuffer(blob); 55 | } 56 | 57 | pushChunk(chunk) { 58 | if (!this.uploadChannel.isJoined()) { 59 | return; 60 | } 61 | this.uploadChannel 62 | .push("chunk", chunk, this.chunkTimeout) 63 | .receive("ok", () => { 64 | this.entry.progress((this.offset / this.entry.file.size) * 100); 65 | if (!this.isDone()) { 66 | this.chunkTimer = setTimeout( 67 | () => this.readNextChunk(), 68 | this.liveSocket.getLatencySim() || 0, 69 | ); 70 | } 71 | }) 72 | .receive("error", ({ reason }) => this.error(reason)); 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /assets/js/phoenix_live_view/global.d.ts: -------------------------------------------------------------------------------- 1 | declare let LV_VSN: string; 2 | -------------------------------------------------------------------------------- /assets/js/phoenix_live_view/utils.js: -------------------------------------------------------------------------------- 1 | import { PHX_VIEW_SELECTOR } from "./constants"; 2 | 3 | import EntryUploader from "./entry_uploader"; 4 | 5 | export const logError = (msg, obj) => console.error && console.error(msg, obj); 6 | 7 | export const isCid = (cid) => { 8 | const type = typeof cid; 9 | return type === "number" || (type === "string" && /^(0|[1-9]\d*)$/.test(cid)); 10 | }; 11 | 12 | export function detectDuplicateIds() { 13 | const ids = new Set(); 14 | const elems = document.querySelectorAll("*[id]"); 15 | for (let i = 0, len = elems.length; i < len; i++) { 16 | if (ids.has(elems[i].id)) { 17 | console.error( 18 | `Multiple IDs detected: ${elems[i].id}. Ensure unique element ids.`, 19 | ); 20 | } else { 21 | ids.add(elems[i].id); 22 | } 23 | } 24 | } 25 | 26 | export function detectInvalidStreamInserts(inserts) { 27 | const errors = new Set(); 28 | Object.keys(inserts).forEach((id) => { 29 | const streamEl = document.getElementById(id); 30 | if ( 31 | streamEl && 32 | streamEl.parentElement && 33 | streamEl.parentElement.getAttribute("phx-update") !== "stream" 34 | ) { 35 | errors.add( 36 | `The stream container with id "${streamEl.parentElement.id}" is missing the phx-update="stream" attribute. Ensure it is set for streams to work properly.`, 37 | ); 38 | } 39 | }); 40 | errors.forEach((error) => console.error(error)); 41 | } 42 | 43 | export const debug = (view, kind, msg, obj) => { 44 | if (view.liveSocket.isDebugEnabled()) { 45 | console.log(`${view.id} ${kind}: ${msg} - `, obj); 46 | } 47 | }; 48 | 49 | // wraps value in closure or returns closure 50 | export const closure = (val) => 51 | typeof val === "function" 52 | ? val 53 | : function () { 54 | return val; 55 | }; 56 | 57 | export const clone = (obj) => { 58 | return JSON.parse(JSON.stringify(obj)); 59 | }; 60 | 61 | export const closestPhxBinding = (el, binding, borderEl) => { 62 | do { 63 | if (el.matches(`[${binding}]`) && !el.disabled) { 64 | return el; 65 | } 66 | el = el.parentElement || el.parentNode; 67 | } while ( 68 | el !== null && 69 | el.nodeType === 1 && 70 | !((borderEl && borderEl.isSameNode(el)) || el.matches(PHX_VIEW_SELECTOR)) 71 | ); 72 | return null; 73 | }; 74 | 75 | export const isObject = (obj) => { 76 | return obj !== null && typeof obj === "object" && !(obj instanceof Array); 77 | }; 78 | 79 | export const isEqualObj = (obj1, obj2) => 80 | JSON.stringify(obj1) === JSON.stringify(obj2); 81 | 82 | export const isEmpty = (obj) => { 83 | for (const x in obj) { 84 | return false; 85 | } 86 | return true; 87 | }; 88 | 89 | export const maybe = (el, callback) => el && callback(el); 90 | 91 | export const channelUploader = function (entries, onError, resp, liveSocket) { 92 | entries.forEach((entry) => { 93 | const entryUploader = new EntryUploader(entry, resp.config, liveSocket); 94 | entryUploader.upload(); 95 | }); 96 | }; 97 | -------------------------------------------------------------------------------- /assets/test/globals.d.ts: -------------------------------------------------------------------------------- 1 | declare global { 2 | function setStartSystemTime(): void; 3 | function advanceTimersToNextFrame(): void; 4 | let LV_VSN: string; 5 | } 6 | 7 | export {}; 8 | -------------------------------------------------------------------------------- /assets/test/index_test.ts: -------------------------------------------------------------------------------- 1 | import { LiveSocket, isUsedInput, ViewHook } from "phoenix_live_view"; 2 | import * as LiveSocket2 from "phoenix_live_view/live_socket"; 3 | import ViewHook2 from "phoenix_live_view/view_hook"; 4 | import DOM from "phoenix_live_view/dom"; 5 | 6 | describe("Named Imports", () => { 7 | test("LiveSocket is equal to the actual LiveSocket", () => { 8 | expect(LiveSocket).toBe(LiveSocket2.default); 9 | }); 10 | 11 | test("ViewHook is equal to the actual ViewHook", () => { 12 | expect(ViewHook).toBe(ViewHook2); 13 | }); 14 | }); 15 | 16 | describe("isUsedInput", () => { 17 | test("returns true if the input is used", () => { 18 | const input = document.createElement("input"); 19 | input.type = "text"; 20 | expect(isUsedInput(input)).toBeFalsy(); 21 | DOM.putPrivate(input, "phx-has-focused", true); 22 | expect(isUsedInput(input)).toBe(true); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /assets/test/integration/event_test.ts: -------------------------------------------------------------------------------- 1 | import { Socket } from "phoenix"; 2 | import LiveSocket from "phoenix_live_view/live_socket"; 3 | 4 | const stubViewPushInput = (view, callback) => { 5 | view.pushInput = ( 6 | sourceEl, 7 | targetCtx, 8 | newCid, 9 | event, 10 | pushOpts, 11 | originalCallback, 12 | ) => { 13 | return callback( 14 | sourceEl, 15 | targetCtx, 16 | newCid, 17 | event, 18 | pushOpts, 19 | originalCallback, 20 | ); 21 | }; 22 | }; 23 | 24 | const prepareLiveViewDOM = (document, rootId) => { 25 | document.body.innerHTML = ` 26 |big!
16 |Doing any of the following things fixes it:
86 |Reconnected!
27 | """ 28 | end 29 | end 30 | -------------------------------------------------------------------------------- /test/e2e/support/js_live.ex: -------------------------------------------------------------------------------- 1 | defmodule Phoenix.LiveViewTest.E2E.JsLive do 2 | use Phoenix.LiveView 3 | 4 | alias Phoenix.LiveView.JS 5 | 6 | @impl Phoenix.LiveView 7 | def mount(_params, _session, socket) do 8 | {:ok, assign(socket, count: 0)} 9 | end 10 | 11 | @impl Phoenix.LiveView 12 | def render(assigns) do 13 | ~H""" 14 | 15 | 16 | 23 | 24 | 31 | 32 | 39 | 40 |Hello
18 | """ 19 | end 20 | end 21 | 22 | def mount(_params, _session, socket) do 23 | {:ok, assign(socket, :hello, :world)} 24 | end 25 | 26 | def render(assigns) do 27 | ~H""" 28 |Hello
30 | <.live_component id="component-1" module={Component} /> 31 |params: {inspect(@params)}
7 |uri: {URI.to_string(@uri)}
8 |trace: {inspect(@trace)}
9 |peer: {inspect(@peer, custom_options: [sort_maps: true])}
10 |x-headers: {inspect(@x_headers)}
11 |user-agent: {inspect(@user_agent)}
12 | """ 13 | end 14 | 15 | def mount(_params, _session, socket) do 16 | {:ok, 17 | assign( 18 | socket, 19 | params: get_connect_params(socket), 20 | uri: get_connect_info(socket, :uri), 21 | trace: get_connect_info(socket, :trace_context_headers), 22 | peer: get_connect_info(socket, :peer_data), 23 | x_headers: get_connect_info(socket, :x_headers), 24 | user_agent: get_connect_info(socket, :user_agent) 25 | )} 26 | end 27 | end 28 | -------------------------------------------------------------------------------- /test/support/live_views/debug_anno.exs: -------------------------------------------------------------------------------- 1 | # Note this file is intentionally a .exs file because it is loaded 2 | # in the test helper with debug_heex_annotations turned on. 3 | defmodule Phoenix.LiveViewTest.Support.DebugAnno do 4 | use Phoenix.Component 5 | 6 | def remote(assigns) do 7 | ~H"REMOTE COMPONENT: Value: {@value}" 8 | end 9 | 10 | def remote_with_tags(assigns) do 11 | ~H"URI: {@uri}
12 |LiveAction: {@live_action}
13 | <.link id="path" patch={Routes.host_path(@socket, :path)}>Path 14 | <.link id="full" patch={"https://app.example.com" <> Routes.host_path(@socket, :full)}> 15 | Full 16 | 17 | """ 18 | end 19 | end 20 | -------------------------------------------------------------------------------- /test/support/live_views/layout.ex: -------------------------------------------------------------------------------- 1 | defmodule Phoenix.LiveViewTest.Support.ParentLayoutLive do 2 | use Phoenix.LiveView 3 | 4 | def render(assigns) do 5 | ~H""" 6 | {live_render(@socket, Phoenix.LiveViewTest.Support.LayoutLive, session: @session, id: "layout")} 7 | """ 8 | end 9 | 10 | def mount(_params, session, socket) do 11 | {:ok, assign(socket, session: session)} 12 | end 13 | end 14 | 15 | defmodule Phoenix.LiveViewTest.Support.LayoutLive do 16 | use Phoenix.LiveView, layout: {Phoenix.LiveViewTest.Support.LayoutView, :live} 17 | 18 | def render(assigns), do: ~H|The value is: {@val}| 19 | 20 | def mount(_params, session, socket) do 21 | socket 22 | |> assign(val: 123) 23 | |> maybe_put_layout(session) 24 | end 25 | 26 | def handle_event("double", _, socket) do 27 | {:noreply, update(socket, :val, &(&1 * 2))} 28 | end 29 | 30 | defp maybe_put_layout(socket, %{"live_layout" => value}) do 31 | {:ok, socket, layout: value} 32 | end 33 | 34 | defp maybe_put_layout(socket, _session), do: {:ok, socket} 35 | end 36 | -------------------------------------------------------------------------------- /test/support/live_views/live_in_component.ex: -------------------------------------------------------------------------------- 1 | defmodule Phoenix.LiveViewTest.Support.LiveInComponent.Root do 2 | use Phoenix.LiveView 3 | 4 | def mount(_params, _session, socket) do 5 | {:ok, socket} 6 | end 7 | 8 | def render(assigns) do 9 | ~H"<.live_component 10 | module={Phoenix.LiveViewTest.Support.LiveInComponent.Component} 11 | id={:nested_component} 12 | />" 13 | end 14 | end 15 | 16 | defmodule Phoenix.LiveViewTest.Support.LiveInComponent.Component do 17 | use Phoenix.LiveComponent 18 | 19 | def render(assigns) do 20 | ~H""" 21 |The value is: {@val}
7 |mount: {inspect(@mount_params)}
8 |params: {inspect(@params)}
9 | """ 10 | end 11 | 12 | def mount(params, session, socket) do 13 | on_handle_params = session["on_handle_params"] 14 | 15 | {:ok, 16 | assign( 17 | socket, 18 | val: 1, 19 | mount_params: params, 20 | test_pid: session["test_pid"], 21 | connected?: connected?(socket), 22 | on_handle_params: on_handle_params && :erlang.binary_to_term(on_handle_params) 23 | )} 24 | end 25 | 26 | def handle_params(%{"from" => "handle_params"} = params, uri, socket) do 27 | send(socket.assigns.test_pid, {:handle_params, uri, socket.assigns, params}) 28 | socket.assigns.on_handle_params.(assign(socket, :params, params)) 29 | end 30 | 31 | def handle_params(params, uri, socket) do 32 | send(socket.assigns.test_pid, {:handle_params, uri, socket.assigns, params}) 33 | {:noreply, assign(socket, :params, params)} 34 | end 35 | 36 | def handle_info({:set, var, val}, socket), do: {:noreply, assign(socket, var, val)} 37 | 38 | def handle_info({:push_patch, to}, socket) do 39 | {:noreply, push_patch(socket, to: to)} 40 | end 41 | 42 | def handle_info({:push_navigate, to}, socket) do 43 | {:noreply, push_navigate(socket, to: to)} 44 | end 45 | 46 | def handle_call({:push_patch, func}, _from, socket) do 47 | func.(socket) 48 | end 49 | 50 | def handle_call({:push_navigate, func}, _from, socket) do 51 | func.(socket) 52 | end 53 | 54 | def handle_cast({:push_patch, to}, socket) do 55 | {:noreply, push_patch(socket, to: to)} 56 | end 57 | 58 | def handle_cast({:push_navigate, to}, socket) do 59 | {:noreply, push_navigate(socket, to: to)} 60 | end 61 | 62 | def handle_event("push_patch", %{"to" => to}, socket) do 63 | {:noreply, push_patch(socket, to: to)} 64 | end 65 | 66 | def handle_event("push_navigate", %{"to" => to}, socket) do 67 | {:noreply, push_navigate(socket, to: to)} 68 | end 69 | end 70 | 71 | defmodule Phoenix.LiveViewTest.Support.ActionLive do 72 | use Phoenix.LiveView 73 | 74 | def render(assigns) do 75 | ~H""" 76 |Live action: {inspect(@live_action)}
77 |Mount action: {inspect(@mount_action)}
78 |Params: {inspect(@params)}
79 | """ 80 | end 81 | 82 | def mount(_params, _session, socket) do 83 | {:ok, assign(socket, mount_action: socket.assigns.live_action)} 84 | end 85 | 86 | def handle_params(params, _url, socket) do 87 | {:noreply, assign(socket, params: params)} 88 | end 89 | 90 | def handle_event("push_patch", to, socket) do 91 | {:noreply, push_patch(socket, to: to)} 92 | end 93 | end 94 | 95 | defmodule Phoenix.LiveViewTest.Support.ErrorInHandleParamsLive do 96 | use Phoenix.LiveView 97 | 98 | def render(assigns), do: ~H|