[ { "path": ".formatter.exs", "content": "[\n import_deps: [:phoenix],\n plugins: [Phoenix.LiveView.HTMLFormatter],\n inputs: [\"*.{ex,exs}\", \"{config,lib,test}/**/*.{ex,exs}\"],\n tag_formatters: %{script: Prettier}\n]\n" }, { "path": ".github/ISSUE_TEMPLATE/bug_report.md", "content": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n### Environment\n\n* Elixir version (please paste the output of `elixir -v`):\n```\n\n```\n* Phoenix and LiveView versions (`mix deps | grep -w 'phoenix\\|phoenix_live_view'`):\n```\n\n```\n* Operating system:\n- [ ] Windows\n- [ ] MacOS\n- [ ] Linux\n- [ ] Other (please specify): \n* Browsers (including version) you attempted to reproduce this bug on (the more the merrier):\n```\n\n```\n\n### Actual behavior\n\n\n\n### Expected behavior\n\n" }, { "path": ".github/ISSUE_TEMPLATE/config.yml", "content": "---\nblank_issues_enabled: true\n\ncontact_links:\n - name: Ask questions, support, and general discussions\n url: https://elixirforum.com/c/phoenix-forum\n about: Ask questions, provide support, and more on Elixir Forum\n\n - name: Propose new features\n url: https://elixirforum.com/c/phoenix-forum\n about: Propose new features on Elixir Forum\n" }, { "path": ".github/extract-changelog.sh", "content": "#!/usr/bin/env bash\n#\n# Extract changelog for a specific version from CHANGELOG.md\n#\n# Usage: ./extract-changelog.sh \n# Example: ./extract-changelog.sh v1.1.22\n\nset -euo pipefail\n\nVERSION=\"${1:-}\"\n\nif [[ -z \"$VERSION\" ]]; then\n echo \"Usage: $0 \" >&2\n echo \"Example: $0 v1.1.22\" >&2\n exit 1\nfi\n\n# Normalize version to include 'v' prefix\nVERSION=\"${VERSION#v}\" # Remove 'v' if present\nVERSION=\"v${VERSION}\" # Add 'v' prefix\n\nSCRIPT_DIR=\"$(cd \"$(dirname \"${BASH_SOURCE[0]}\")\" && pwd)\"\nCHANGELOG_PATH=\"${SCRIPT_DIR}/../CHANGELOG.md\"\n\nif [[ ! -f \"$CHANGELOG_PATH\" ]]; then\n echo \"Error: CHANGELOG.md not found at $CHANGELOG_PATH\" >&2\n exit 1\nfi\n\n# Extract the section for the specified version\n# Match from \"## vX.Y.Z\" until the next \"## v\" header\nawk -v version=\"$VERSION\" '\n BEGIN { found = 0; printing = 0 }\n\n # Match the start of our target version section\n /^## v[0-9]/ {\n if (printing) {\n # We hit the next version, stop printing\n exit\n }\n # Check if this line contains our version\n if (index($0, \"## \" version \" \") > 0) {\n found = 1\n printing = 1\n next # Skip the version header line\n }\n }\n\n printing { print }\n\n END {\n if (!found) {\n print \"Error: Version \" version \" not found in changelog\" > \"/dev/stderr\"\n exit 1\n }\n }\n' \"$CHANGELOG_PATH\"\n" }, { "path": ".github/single-file-samples/main.exs", "content": "Application.put_env(:sample, Example.Endpoint,\n http: [ip: {127, 0, 0, 1}, port: 5001],\n adapter: Bandit.PhoenixAdapter,\n server: true,\n live_view: [signing_salt: \"aaaaaaaa\"],\n secret_key_base: String.duplicate(\"a\", 64)\n)\n\nMix.install(\n [\n {:bandit, \"~> 1.8\"},\n {:jason, \"~> 1.0\"},\n {:phoenix, \"~> 1.8\"},\n {:phoenix_html, \"~> 4.0\"},\n # please test your issue using the latest version of LV from GitHub!\n {:phoenix_live_view,\n github: \"phoenixframework/phoenix_live_view\", branch: \"main\", override: true}\n ]\n)\n\n# if you're trying to test a specific LV commit, it may be necessary to manually build\n# the JS assets. To do this, uncomment the following lines:\n# this needs mix and npm available in your path!\n#\n# path = Phoenix.LiveView.__info__(:compile)[:source] |> Path.dirname() |> Path.join(\"../\")\n# System.cmd(\"mix\", [\"deps.get\"], cd: path, into: IO.binstream())\n# System.cmd(\"npm\", [\"install\"], cd: Path.join(path, \"./assets\"), into: IO.binstream())\n# System.cmd(\"mix\", [\"assets.build\"], cd: path, into: IO.binstream())\n\ndefmodule Example.ErrorView do\n def render(template, _), do: Phoenix.Controller.status_message_from_template(template)\nend\n\ndefmodule Example.HomeLive do\n use Phoenix.LiveView, layout: {__MODULE__, :live}\n\n def mount(_params, _session, socket) do\n {:ok, assign(socket, :count, 0)}\n end\n\n def render(\"live.html\", assigns) do\n ~H\"\"\"\n \n \n \n <%!-- uncomment to use enable tailwind --%>\n <%!-- --%>\n \n \n {@inner_content}\n \"\"\"\n end\n\n def render(assigns) do\n ~H\"\"\"\n {@count}\n \n \n \"\"\"\n end\n\n def handle_event(\"inc\", _params, socket) do\n {:noreply, assign(socket, :count, socket.assigns.count + 1)}\n end\n\n def handle_event(\"dec\", _params, socket) do\n {:noreply, assign(socket, :count, socket.assigns.count - 1)}\n end\nend\n\ndefmodule Example.Router do\n use Phoenix.Router\n import Phoenix.LiveView.Router\n\n pipeline :browser do\n plug(:accepts, [\"html\"])\n end\n\n scope \"/\", Example do\n pipe_through(:browser)\n\n live(\"/\", HomeLive, :index)\n end\nend\n\ndefmodule Example.Endpoint do\n use Phoenix.Endpoint, otp_app: :sample\n socket(\"/live\", Phoenix.LiveView.Socket)\n\n plug Plug.Static, from: {:phoenix, \"priv/static\"}, at: \"/assets/phoenix\"\n plug Plug.Static, from: {:phoenix_live_view, \"priv/static\"}, at: \"/assets/phoenix_live_view\"\n plug Plug.Static, from: {:phoenix_html, \"priv/static\"}, at: \"/assets/phoenix_html\"\n\n plug(Example.Router)\nend\n\n{:ok, _} = Supervisor.start_link([Example.Endpoint], strategy: :one_for_one)\nProcess.sleep(:infinity)\n" }, { "path": ".github/single-file-samples/test.exs", "content": "Application.put_env(:phoenix, Example.Endpoint,\n http: [ip: {127, 0, 0, 1}, port: 5001],\n adapter: Bandit.PhoenixAdapter,\n server: true,\n live_view: [signing_salt: \"aaaaaaaa\"],\n secret_key_base: String.duplicate(\"a\", 64)\n)\n\nMix.install(\n [\n {:bandit, \"~> 1.8\"},\n {:jason, \"~> 1.0\"},\n {:phoenix, \"~> 1.8\"},\n # please test your issue using the latest version of LV from GitHub!\n {:phoenix_live_view,\n github: \"phoenixframework/phoenix_live_view\", branch: \"main\", override: true},\n {:lazy_html, \">= 0.1.0\"}\n ]\n)\n\nExUnit.start()\n\ndefmodule Example.ErrorView do\n def render(template, _), do: Phoenix.Controller.status_message_from_template(template)\nend\n\ndefmodule Example.HomeLive do\n use Phoenix.LiveView, layout: {__MODULE__, :live}\n\n def mount(_params, _session, socket) do\n socket\n |> then(&{:ok, &1})\n end\n\n def render(\"live.html\", assigns) do\n ~H\"\"\"\n \n \n \n \n \n {@inner_content}\n \"\"\"\n end\n\n def render(assigns) do\n ~H\"\"\"\n

The LiveView content goes here

\n \"\"\"\n end\nend\n\ndefmodule Example.Router do\n use Phoenix.Router\n import Phoenix.LiveView.Router\n\n pipeline :browser do\n plug(:accepts, [\"html\"])\n end\n\n scope \"/\", Example do\n pipe_through(:browser)\n\n live(\"/\", HomeLive, :index)\n end\nend\n\ndefmodule Example.Endpoint do\n use Phoenix.Endpoint, otp_app: :phoenix\n socket(\"/live\", Phoenix.LiveView.Socket)\n plug Plug.Static, from: {:phoenix, \"priv/static\"}, at: \"/assets/phoenix\"\n plug Plug.Static, from: {:phoenix_live_view, \"priv/static\"}, at: \"/assets/phoenix_live_view\"\n plug Plug.Static, from: {:phoenix_html, \"priv/static\"}, at: \"/assets/phoenix_html\"\n plug(Example.Router)\nend\n\ndefmodule Example.HomeLiveTest do\n use ExUnit.Case\n\n import Phoenix.ConnTest\n import Plug.Conn\n import Phoenix.LiveViewTest\n\n @endpoint Example.Endpoint\n\n test \"works properly\" do\n conn = Phoenix.ConnTest.build_conn()\n\n {:ok, _view, html} = live(conn, \"/\")\n\n assert html =~ \"The LiveView content goes here\"\n end\nend\n\n{:ok, _} = Supervisor.start_link([Example.Endpoint], strategy: :one_for_one)\nExUnit.run()\nProcess.sleep(:infinity)\n" }, { "path": ".github/workflows/assets.yml", "content": "name: Assets\n\non:\n push:\n branches:\n - main\n - \"v*.*\"\n\njobs:\n build:\n runs-on: ubuntu-22.04\n env:\n elixir: 1.18.1\n otp: 27.2\n steps:\n - name: Checkout\n uses: actions/checkout@v4\n\n - name: Set up Elixir\n uses: erlef/setup-beam@v1\n with:\n elixir-version: ${{ env.elixir }}\n otp-version: ${{ env.otp }}\n\n - name: Restore deps and _build cache\n uses: actions/cache@v4\n with:\n path: |\n deps\n _build\n key: ${{ runner.os }}-mix-${{ env.elixir }}-${{ env.otp }}-${{ hashFiles('**/mix.lock') }}-dev\n restore-keys: |\n ${{ runner.os }}-mix-${{ env.elixir }}-${{ env.otp }}-\n - name: Install Dependencies\n run: mix deps.get --only dev\n\n - name: Set up Node.js 20.x\n uses: actions/setup-node@v4\n with:\n node-version: 20.x\n\n - name: Restore npm cache\n uses: actions/cache@v4\n with:\n path: ~/.npm\n key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}\n restore-keys: |\n ${{ runner.os }}-node-\n\n - name: Install npm dependencies\n run: npm ci\n\n - name: Build assets\n run: mix assets.build\n\n - name: Push updated assets\n id: push_assets\n uses: stefanzweifel/git-auto-commit-action@v5\n with:\n commit_message: Update assets\n file_pattern: priv/static\n" }, { "path": ".github/workflows/ci.yml", "content": "name: CI\n\non:\n push:\n pull_request:\n branches:\n - main\n\njobs:\n mix_test:\n name: mix test (OTP ${{matrix.otp}} | Elixir ${{matrix.elixir}})\n\n strategy:\n fail-fast: false\n matrix:\n include:\n - elixir: 1.15.4\n otp: 25.3\n\n - elixir: 1.16.3\n otp: 26.2\n\n - elixir: 1.18.4\n otp: 27.3\n\n # update coverage report as well\n - elixir: 1.19.1\n otp: 28.1\n lint: lint\n\n # run against latest Elixir to catch warnings early\n - elixir: main-otp-28\n otp: maint-28\n\n runs-on: ubuntu-latest\n\n steps:\n - name: Install inotify-tools\n run: |\n sudo apt update\n sudo apt install -y inotify-tools\n - name: Checkout\n uses: actions/checkout@v4\n\n - name: Set up Elixir\n uses: erlef/setup-beam@v1\n with:\n elixir-version: ${{ matrix.elixir }}\n otp-version: ${{ matrix.otp }}\n\n - name: Restore deps and _build cache\n uses: actions/cache@v4\n with:\n path: |\n deps\n _build\n key: deps-${{ runner.os }}-${{ matrix.otp }}-${{ matrix.elixir }}-${{ hashFiles('**/mix.lock') }}\n restore-keys: |\n deps-${{ runner.os }}-${{ matrix.otp }}-${{ matrix.elixir }}\n\n - name: Install dependencies\n run: mix deps.get\n\n - name: Remove compiled application files\n run: mix clean\n\n - name: Compile dependencies\n run: mix compile\n if: ${{ !matrix.lint }}\n env:\n MIX_ENV: test\n\n - name: Compile & lint dependencies\n run: mix compile --warnings-as-errors\n if: ${{ matrix.lint }} or ${{ matrix.elixir == 'main' }}\n env:\n MIX_ENV: test\n\n - name: Compile without optional deps\n run: mix compile --no-optional-deps\n env:\n MIX_ENV: dev\n\n - name: Check if formatted\n run: mix format --check-formatted\n if: ${{ matrix.lint }}\n env:\n MIX_ENV: test\n\n - name: Run tests\n run: mix test --cover --export-coverage default --warnings-as-errors\n\n - uses: actions/upload-artifact@v4\n if: always()\n with:\n name: mix-test-coverage-${{ matrix.otp }}-${{ matrix.elixir }}\n path: cover/default.coverdata\n retention-days: 7\n\n npm_test:\n name: npm test\n\n strategy:\n matrix:\n include:\n - elixir: 1.19.1\n otp: 28.1\n\n runs-on: ubuntu-latest\n steps:\n - name: Checkout\n uses: actions/checkout@v4\n\n - name: Set up Elixir\n uses: erlef/setup-beam@v1\n with:\n elixir-version: ${{ matrix.elixir }}\n otp-version: ${{ matrix.otp }}\n\n - name: Restore deps and _build cache\n uses: actions/cache@v4\n with:\n path: |\n deps\n _build\n key: deps-${{ runner.os }}-${{ matrix.otp }}-${{ matrix.elixir }}-${{ hashFiles('**/mix.lock') }}\n restore-keys: |\n deps-${{ runner.os }}-${{ matrix.otp }}-${{ matrix.elixir }}\n\n - name: Install dependencies\n run: mix deps.get --only test\n\n - name: Set up Node.js 20.x\n uses: actions/setup-node@v4\n with:\n node-version: 20.x\n\n - name: Restore npm cache\n uses: actions/cache@v4\n with:\n path: ~/.npm\n key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}\n restore-keys: |\n ${{ runner.os }}-node-\n\n - name: setup JS\n run: npm run setup\n\n - name: typecheck\n run: npm run build && npm run typecheck:tests\n\n - name: check lint and format\n run: npm run js:lint && npm run js:format.check\n\n - name: test\n run: npm run js:test\n\n - uses: actions/upload-artifact@v4\n if: always()\n with:\n name: js-unit-coverage\n path: coverage/\n retention-days: 7\n\n e2e_test:\n name: e2e test\n\n strategy:\n matrix:\n include:\n - elixir: 1.19.1\n otp: 28.1\n\n runs-on: ubuntu-latest\n container:\n image: mcr.microsoft.com/playwright:v1.58.2-noble\n env:\n ImageOS: ubuntu22\n HOME: /root\n steps:\n - name: Checkout\n uses: actions/checkout@v4\n\n - name: install unzip\n run: apt update && apt -y install unzip\n\n - name: Set up Elixir\n uses: erlef/setup-beam@v1\n with:\n elixir-version: ${{ matrix.elixir }}\n otp-version: ${{ matrix.otp }}\n\n - name: Restore deps and _build cache\n uses: actions/cache@v4\n with:\n path: |\n deps\n _build\n key: deps-${{ runner.os }}-${{ matrix.otp }}-${{ matrix.elixir }}-${{ hashFiles('**/mix.lock') }}\n restore-keys: |\n deps-${{ runner.os }}-${{ matrix.otp }}-${{ matrix.elixir }}\n\n - name: Install dependencies\n run: mix deps.get\n\n - name: Restore npm cache\n uses: actions/cache@v4\n with:\n path: ~/.npm\n key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}\n restore-keys: |\n ${{ runner.os }}-node-\n\n - name: setup\n run: npm run setup\n\n - name: Run e2e tests\n run: npm run e2e:test\n\n - uses: actions/upload-artifact@v4\n if: always()\n with:\n name: playwright-report\n path: playwright-report/\n retention-days: 7\n\n - uses: actions/upload-artifact@v4\n if: always()\n with:\n name: e2e-test-results\n path: test/e2e/test-results/\n retention-days: 7\n\n - uses: actions/upload-artifact@v4\n if: always()\n with:\n name: mix-e2e-coverage\n path: cover/e2e.coverdata\n retention-days: 7\n\n coverage_report:\n name: coverage report\n\n runs-on: ubuntu-latest\n needs: [mix_test, npm_test, e2e_test]\n\n strategy:\n matrix:\n include:\n - elixir: 1.19.1\n otp: 28.1\n\n steps:\n - name: Checkout\n uses: actions/checkout@v4\n\n - name: Set up Elixir\n uses: erlef/setup-beam@v1\n with:\n elixir-version: ${{ matrix.elixir }}\n otp-version: ${{ matrix.otp }}\n\n - name: Download mix unit coverage\n uses: actions/download-artifact@v4\n with:\n # This needs to be updated when changing the test matrix\n name: mix-test-coverage-${{ matrix.otp }}-${{ matrix.elixir }}\n path: cover/\n\n - name: Download mix e2e coverage\n uses: actions/download-artifact@v4\n with:\n name: mix-e2e-coverage\n path: cover/\n\n - name: Restore deps and _build cache\n uses: actions/cache@v4\n with:\n path: |\n deps\n _build\n key: deps-${{ runner.os }}-${{ matrix.otp }}-${{ matrix.elixir }}-${{ hashFiles('**/mix.lock') }}\n restore-keys: |\n deps-${{ runner.os }}-${{ matrix.otp }}-${{ matrix.elixir }}\n\n - name: Generate mix coverage report\n run: mix test.coverage\n\n - name: Download js-unit-coverage artifact\n uses: actions/download-artifact@v4\n with:\n name: js-unit-coverage\n path: coverage/\n\n - name: Download e2e-test-results artifact\n uses: actions/download-artifact@v4\n with:\n name: e2e-test-results\n path: test/e2e/test-results/\n\n - name: Set up Node.js 20.x\n uses: actions/setup-node@v4\n with:\n node-version: 20.x\n\n - name: Merge coverage reports\n run: npm install && npm run cover:merge\n\n - name: Upload coverage report\n uses: actions/upload-artifact@v4\n with:\n name: overall-coverage\n path: cover/\n retention-days: 7\n" }, { "path": ".github/workflows/docs.yml", "content": "name: Docs\n\non:\n push:\n branches:\n - main\n\npermissions:\n contents: read\n pages: write\n id-token: write\n\njobs:\n build:\n runs-on: ubuntu-22.04\n env:\n elixir: 1.18.1\n otp: 27.2\n steps:\n - name: Checkout\n uses: actions/checkout@v4\n\n - name: Set up Elixir\n uses: erlef/setup-beam@v1\n with:\n elixir-version: ${{ env.elixir }}\n otp-version: ${{ env.otp }}\n\n - name: Restore deps and _build cache\n uses: actions/cache@v4\n with:\n path: |\n deps\n _build\n key: ${{ runner.os }}-mix-${{ env.elixir }}-${{ env.otp }}-${{ hashFiles('**/mix.lock') }}-docs\n restore-keys: |\n ${{ runner.os }}-mix-${{ env.elixir }}-${{ env.otp }}-\n - name: Install Dependencies\n run: mix deps.get --only docs\n\n - name: Build docs\n run: mix docs\n\n - name: Upload artifact\n uses: actions/upload-pages-artifact@v3\n with:\n path: doc/\n\n # Deployment job\n deploy:\n environment:\n name: github-pages\n url: ${{steps.deployment.outputs.page_url}}\n runs-on: ubuntu-latest\n needs: build\n steps:\n - name: Deploy to GitHub Pages\n id: deployment\n uses: actions/deploy-pages@v4\n" }, { "path": ".github/workflows/github_release.yml", "content": "name: Creates a GitHub Release\n\non:\n push:\n tags:\n - \"v*\"\n\njobs:\n release:\n runs-on: ubuntu-latest\n permissions:\n contents: write\n env:\n GITHUB_TOKEN: ${{ github.token }}\n steps:\n - name: Checkout code\n uses: actions/checkout@v4\n\n - name: Extract version from tag\n id: version\n run: echo \"version=${GITHUB_REF_NAME}\" >> \"$GITHUB_OUTPUT\"\n\n - name: Extract changelog for version\n run: bash .github/extract-changelog.sh \"${{ steps.version.outputs.version }}\" > release_notes.md\n\n - name: Create GitHub Release\n run: |\n PRERELEASE_FLAG=\"\"\n if [[ \"${{ steps.version.outputs.version }}\" == *-rc* ]]; then\n PRERELEASE_FLAG=\"--prerelease\"\n fi\n gh release create \"${{ steps.version.outputs.version }}\" \\\n --title \"${{ steps.version.outputs.version }}\" \\\n --notes-file release_notes.md \\\n $PRERELEASE_FLAG\n" }, { "path": ".github/workflows/npm-publish.yml", "content": "# https://docs.npmjs.com/trusted-publishers\nname: NPM Publish\n\non:\n push:\n tags:\n - \"v*\"\n\npermissions:\n id-token: write # Required for OIDC\n contents: read\n\njobs:\n publish:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n\n - uses: actions/setup-node@v4\n with:\n node-version: \"20\"\n registry-url: \"https://registry.npmjs.org\"\n\n # Ensure npm 11.5.1 or later is installed\n - name: Update npm\n run: npm install -g npm@latest\n\n - name: Determine npm tag\n id: npm-tag\n run: |\n TAG=${GITHUB_REF#refs/tags/}\n # Update this condition when bumping the major version!\n if [[ $TAG == v1.0.* ]]; then\n echo \"tag=old-version\" >> $GITHUB_OUTPUT\n elif [[ $TAG == *-rc* ]]; then\n echo \"tag=rc\" >> $GITHUB_OUTPUT\n else\n echo \"tag=latest\" >> $GITHUB_OUTPUT\n fi\n\n - name: Publish to npm\n run: npm publish --tag ${{ steps.npm-tag.outputs.tag }}" }, { "path": ".gitignore", "content": "# The directory Mix will write compiled artifacts to.\n/_build/\n\n# If you run \"mix test --cover\", coverage assets end up here.\n/cover/\n\n# The directory Mix downloads your dependencies sources to.\n/deps/\n\n# Where 3rd-party dependencies like ExDoc output generated docs.\n/doc/\n\n# Ignore .fetch files in case you like to edit your project deps locally.\n/.fetch\n\n# If the VM crashes, it generates a dump, let's ignore it too.\nerl_crash.dump\n\n# Also ignore archive artifacts (built via \"mix archive.build\").\n*.ez\n\n# Ignore package tarball (built via \"mix hex.build\").\nphoenix_live_view-*.tar\n\nnode_modules\n\n/test/e2e/test-results/\n/playwright-report/\n/coverage/\n/assets/js/types/\n" }, { "path": ".igniter.exs", "content": "# This is a configuration file for igniter.\n# For option documentation, see https://hexdocs.pm/igniter/Igniter.Project.IgniterConfig.html\n# To keep it up to date, use `mix igniter.setup`\n[\n module_location: :outside_matching_folder,\n extensions: [],\n deps_location: :last_list_literal,\n source_folders: [\"lib\", \"test/support\"],\n dont_move_files: [~r\"lib/mix\"]\n]\n" }, { "path": "CHANGELOG.md", "content": "# Changelog for v1.2\n\n## v1.2.0-rc.0 (Unreleased)\n\n### Enhancements\n\n* Add `phx-no-unused-field` to prevent sending `_unused` parameters to the server ([#3577](https://github.com/phoenixframework/phoenix_live_view/issues/3577))\n* Add `Phoenix.LiveView.JS.to_encodable/1` pushing JS commands via events ([#4060](https://github.com/phoenixframework/phoenix_live_view/pull/4060))\n * `%JS{}` now also implements the `JSON.Encoder` and `Jason.Encoder` protocols\n* HTMLFormatter: Better preserve whitespace around tags and inside inline elements ([#3718](https://github.com/phoenixframework/phoenix_live_view/issues/3718))\n* HEEx: Allow to opt out of debug annotations for a module ([#4119](https://github.com/phoenixframework/phoenix_live_view/pull/4119))\n* HEEx: warn when missing a space between attributes ([#3999](https://github.com/phoenixframework/phoenix_live_view/issues/3999))\n* HTMLFormatter: Add `TagFormatter` behaviour for formatting `\" <> rest, line, column, buffer, acc, state) do\n acc = [\n {:close, :tag, \"style\", %{line: line, column: column, inner_location: {line, column}}}\n | text_to_acc(buffer, acc, line, column, [])\n ]\n\n handle_text(rest, line, column + 9, [], acc, state)\n end\n\n defp handle_style(\"\\r\\n\" <> rest, line, _column, buffer, acc, state) do\n handle_style(rest, line + 1, state.column_offset, [\"\\r\\n\" | buffer], acc, state)\n end\n\n defp handle_style(\"\\n\" <> rest, line, _column, buffer, acc, state) do\n handle_style(rest, line + 1, state.column_offset, [\"\\n\" | buffer], acc, state)\n end\n\n defp handle_style(<>, line, column, buffer, acc, state) do\n handle_style(rest, line, column + 1, [char_or_bin(c) | buffer], acc, state)\n end\n\n defp handle_style(<<>>, line, column, buffer, acc, _state) do\n ok(text_to_acc(buffer, acc, line, column, []), :style)\n end\n\n ## handle_comment\n\n defp handle_comment(rest, line, column, buffer, acc, state) do\n case handle_comment(rest, line, column, buffer, state) do\n {:text, rest, line, column, buffer} ->\n state = update_in(state.context, &[:comment_end | &1])\n handle_text(rest, line, column, buffer, acc, state)\n\n {:ok, line_end, column_end, buffer} ->\n acc = text_to_acc(buffer, acc, line_end, column_end, state.context)\n # We do column - 4 to point to the opening \" <> rest, line, column, buffer, _state) do\n {:text, rest, line, column + 3, [\"-->\" | buffer]}\n end\n\n defp handle_comment(<>, line, column, buffer, state) do\n handle_comment(rest, line, column + 1, [char_or_bin(c) | buffer], state)\n end\n\n defp handle_comment(<<>>, line, column, buffer, _state) do\n {:ok, line, column, buffer}\n end\n\n ## handle_tag_open\n\n defp handle_tag_open(text, line, column, acc, state) do\n case handle_tag_name(text, column, []) do\n {:ok, name, new_column, rest} ->\n meta = %{line: line, column: column - 1, inner_location: nil, tag_name: name}\n\n case state.tag_handler.classify_type(name) do\n {:error, message} ->\n raise_syntax_error!(message, %{line: line, column: column}, state)\n\n {type, name} ->\n acc = [{type, name, [], meta} | acc]\n handle_maybe_tag_open_end(rest, line, new_column, acc, state)\n end\n\n :error ->\n message =\n \"expected tag name after <. If you meant to use < as part of a text, use < instead\"\n\n meta = %{line: line, column: column}\n\n raise_syntax_error!(message, meta, state)\n end\n end\n\n ## handle_tag_close\n\n defp handle_tag_close(text, line, column, acc, state) do\n case handle_tag_name(text, column, []) do\n {:ok, name, new_column, \">\" <> rest} ->\n meta = %{\n line: line,\n column: column - 2,\n inner_location: {line, column - 2},\n tag_name: name\n }\n\n case state.tag_handler.classify_type(name) do\n {:error, message} ->\n raise_syntax_error!(message, meta, state)\n\n {type, name} ->\n acc = [{:close, type, name, meta} | acc]\n handle_text(rest, line, new_column + 1, [], acc, pop_braces(state))\n end\n\n {:ok, _, new_column, _} ->\n message = \"expected closing `>`\"\n meta = %{line: line, column: new_column}\n raise_syntax_error!(message, meta, state)\n\n :error ->\n message = \"expected tag name after > = text, column, buffer)\n when c in @stop_chars do\n done_tag_name(text, column, buffer)\n end\n\n defp handle_tag_name(<>, column, buffer) do\n handle_tag_name(rest, column + 1, [char_or_bin(c) | buffer])\n end\n\n defp handle_tag_name(<<>>, column, buffer) do\n done_tag_name(<<>>, column, buffer)\n end\n\n defp done_tag_name(_text, _column, []) do\n :error\n end\n\n defp done_tag_name(text, column, buffer) do\n {:ok, buffer_to_string(buffer), column, text}\n end\n\n ## handle_maybe_tag_open_end\n\n defp handle_maybe_tag_open_end(\"\\r\\n\" <> rest, line, _column, acc, state) do\n handle_maybe_tag_open_end(rest, line + 1, state.column_offset, acc, state)\n end\n\n defp handle_maybe_tag_open_end(\"\\n\" <> rest, line, _column, acc, state) do\n handle_maybe_tag_open_end(rest, line + 1, state.column_offset, acc, state)\n end\n\n defp handle_maybe_tag_open_end(<>, line, column, acc, state)\n when c in @space_chars do\n handle_maybe_tag_open_end(rest, line, column + 1, acc, state)\n end\n\n defp handle_maybe_tag_open_end(\"/>\" <> rest, line, column, acc, state) do\n acc = normalize_tag(acc, line, column + 2, true, state)\n handle_text(rest, line, column + 2, [], acc, state)\n end\n\n defp handle_maybe_tag_open_end(\">\" <> rest, line, column, acc, state) do\n case normalize_tag(acc, line, column + 1, false, state) do\n [{:tag, \"script\", _, _} | _] = acc ->\n handle_script(rest, line, column + 1, [], acc, state)\n\n [{:tag, \"style\", _, _} | _] = acc ->\n handle_style(rest, line, column + 1, [], acc, state)\n\n acc ->\n handle_text(rest, line, column + 1, [], acc, push_braces(state))\n end\n end\n\n defp handle_maybe_tag_open_end(\"{\" <> rest, line, column, acc, state) do\n handle_root_attribute(rest, line, column + 1, acc, state)\n end\n\n defp handle_maybe_tag_open_end(<<>>, line, column, _acc, state) do\n message = ~S\"\"\"\n expected closing `>` or `/>`\n\n Make sure the tag is properly closed. This may happen if there\n is an EEx interpolation inside a tag, which is not supported.\n For instance, instead of\n\n
\">Content
\n\n do\n\n
Content
\n\n If @id is nil or false, then no attribute is sent at all.\n\n Inside {...} you can place any Elixir expression. If you want\n to interpolate in the middle of an attribute value, instead of\n\n \">Text\n\n you can pass an Elixir string with interpolation:\n\n Text\n \"\"\"\n\n raise_syntax_error!(message, %{line: line, column: column}, state)\n end\n\n defp handle_maybe_tag_open_end(text, line, column, acc, state) do\n handle_attribute(text, line, column, acc, state)\n end\n\n ## handle_attribute\n\n defp handle_attribute(text, line, column, acc, state) do\n case handle_attr_name(text, column, []) do\n {:ok, name, new_column, rest} ->\n attr_meta = %{line: line, column: column}\n {text, line, column, value} = handle_maybe_attr_value(rest, line, new_column, state)\n acc = put_attr(acc, name, attr_meta, value)\n maybe_warn_missing_attr_space(value, text, line, column, state)\n\n state =\n if name == \"phx-no-curly-interpolation\" and state.braces == :enabled and\n not script_or_style?(acc) do\n %{state | braces: 0}\n else\n state\n end\n\n handle_maybe_tag_open_end(text, line, column, acc, state)\n\n {:error, message, column} ->\n meta = %{line: line, column: column}\n raise_syntax_error!(message, meta, state)\n end\n end\n\n defp maybe_warn_missing_attr_space(nil, _text, _line, _column, _state), do: :ok\n\n defp maybe_warn_missing_attr_space(_value, <>, line, column, state)\n when c not in @space_chars and c not in ~c\">/\\r\\n\" do\n IO.warn(\n \"missing space before attribute\",\n line: line,\n column: column,\n file: state.file\n )\n end\n\n defp maybe_warn_missing_attr_space(_value, _text, _line, _column, _state), do: :ok\n\n defp script_or_style?([{:tag, name, _, _} | _]) when name in ~w(script style), do: true\n defp script_or_style?(_), do: false\n\n ## handle_root_attribute\n\n defp handle_root_attribute(text, line, column, acc, state) do\n case handle_interpolation(text, line, column, [], 0, state) do\n {:ok, value, new_line, new_column, rest} ->\n meta = %{line: line, column: column}\n acc = put_attr(acc, :root, meta, {:expr, value, meta})\n handle_maybe_tag_open_end(rest, new_line, new_column, acc, state)\n\n {:error, message} ->\n # We do column - 1 to point to the opening {\n meta = %{line: line, column: column - 1}\n raise_syntax_error!(message, meta, state)\n end\n end\n\n ## handle_attr_name\n\n defp handle_attr_name(<<\"}\"::utf8, _rest::binary>>, column, _buffer) do\n {:error, \"expected attribute, but found end of interpolation: }\", column}\n end\n\n defp handle_attr_name(<>, column, _buffer)\n when c in @quote_chars do\n {:error, \"invalid character in attribute name: #{<>}\", column}\n end\n\n defp handle_attr_name(<>, column, [])\n when c in @stop_chars do\n {:error, \"expected attribute name\", column}\n end\n\n defp handle_attr_name(<> = text, column, buffer)\n when c in @stop_chars do\n {:ok, buffer_to_string(buffer), column, text}\n end\n\n defp handle_attr_name(<>, column, buffer) do\n handle_attr_name(rest, column + 1, [char_or_bin(c) | buffer])\n end\n\n defp handle_attr_name(<<>>, column, _buffer) do\n {:error, \"unexpected end of string inside tag\", column}\n end\n\n ## handle_maybe_attr_value\n\n defp handle_maybe_attr_value(\"\\r\\n\" <> rest, line, _column, state) do\n handle_maybe_attr_value(rest, line + 1, state.column_offset, state)\n end\n\n defp handle_maybe_attr_value(\"\\n\" <> rest, line, _column, state) do\n handle_maybe_attr_value(rest, line + 1, state.column_offset, state)\n end\n\n defp handle_maybe_attr_value(<>, line, column, state)\n when c in @space_chars do\n handle_maybe_attr_value(rest, line, column + 1, state)\n end\n\n defp handle_maybe_attr_value(\"=\" <> rest, line, column, state) do\n handle_attr_value_begin(rest, line, column + 1, state)\n end\n\n defp handle_maybe_attr_value(text, line, column, _state) do\n {text, line, column, nil}\n end\n\n ## handle_attr_value_begin\n\n defp handle_attr_value_begin(\"\\r\\n\" <> rest, line, _column, state) do\n handle_attr_value_begin(rest, line + 1, state.column_offset, state)\n end\n\n defp handle_attr_value_begin(\"\\n\" <> rest, line, _column, state) do\n handle_attr_value_begin(rest, line + 1, state.column_offset, state)\n end\n\n defp handle_attr_value_begin(<>, line, column, state)\n when c in @space_chars do\n handle_attr_value_begin(rest, line, column + 1, state)\n end\n\n defp handle_attr_value_begin(\"\\\"\" <> rest, line, column, state) do\n handle_attr_value_quote(rest, ?\", line, column + 1, [], state)\n end\n\n defp handle_attr_value_begin(\"'\" <> rest, line, column, state) do\n handle_attr_value_quote(rest, ?', line, column + 1, [], state)\n end\n\n defp handle_attr_value_begin(\"{\" <> rest, line, column, state) do\n handle_attr_value_as_expr(rest, line, column + 1, state)\n end\n\n defp handle_attr_value_begin(_text, line, column, state) do\n message =\n \"invalid attribute value after `=`. Expected either a value between quotes \" <>\n \"(such as \\\"value\\\" or \\'value\\') or an Elixir expression between curly braces (such as `{expr}`)\"\n\n meta = %{line: line, column: column}\n raise_syntax_error!(message, meta, state)\n end\n\n ## handle_attr_value_quote\n\n defp handle_attr_value_quote(\"\\r\\n\" <> rest, delim, line, _column, buffer, state) do\n column = state.column_offset\n handle_attr_value_quote(rest, delim, line + 1, column, [\"\\r\\n\" | buffer], state)\n end\n\n defp handle_attr_value_quote(\"\\n\" <> rest, delim, line, _column, buffer, state) do\n column = state.column_offset\n handle_attr_value_quote(rest, delim, line + 1, column, [\"\\n\" | buffer], state)\n end\n\n defp handle_attr_value_quote(<>, delim, line, column, buffer, _state) do\n value = buffer_to_string(buffer)\n {rest, line, column + 1, {:string, value, %{delimiter: delim}}}\n end\n\n defp handle_attr_value_quote(<>, delim, line, column, buffer, state) do\n handle_attr_value_quote(rest, delim, line, column + 1, [char_or_bin(c) | buffer], state)\n end\n\n defp handle_attr_value_quote(<<>>, delim, line, column, _buffer, state) do\n message = \"\"\"\n expected closing `#{<>}` for attribute value\n\n Make sure the attribute is properly closed. This may also happen if\n there is an EEx interpolation inside a tag, which is not supported.\n Instead of\n\n
>\n
\n\n do\n\n
\n
\n\n Where @some_attributes must be a keyword list or a map.\n \"\"\"\n\n meta = %{line: line, column: column}\n raise_syntax_error!(message, meta, state)\n end\n\n ## handle_attr_value_as_expr\n\n defp handle_attr_value_as_expr(text, line, column, state) do\n case handle_interpolation(text, line, column, [], 0, state) do\n {:ok, value, new_line, new_column, rest} ->\n {rest, new_line, new_column, {:expr, value, %{line: line, column: column}}}\n\n {:error, message} ->\n # We do column - 1 to point to the opening {\n meta = %{line: line, column: column - 1}\n raise_syntax_error!(message, meta, state)\n end\n end\n\n ## handle_interpolation\n\n defp handle_interpolation(\"\\r\\n\" <> rest, line, _column, buffer, braces, state) do\n handle_interpolation(rest, line + 1, state.column_offset, [\"\\r\\n\" | buffer], braces, state)\n end\n\n defp handle_interpolation(\"\\n\" <> rest, line, _column, buffer, braces, state) do\n handle_interpolation(rest, line + 1, state.column_offset, [\"\\n\" | buffer], braces, state)\n end\n\n defp handle_interpolation(\"}\" <> rest, line, column, buffer, 0, _state) do\n value = buffer_to_string(buffer)\n {:ok, value, line, column + 1, rest}\n end\n\n defp handle_interpolation(~S(\\}) <> rest, line, column, buffer, braces, state) do\n handle_interpolation(rest, line, column + 2, [~S(\\}) | buffer], braces, state)\n end\n\n defp handle_interpolation(~S(\\{) <> rest, line, column, buffer, braces, state) do\n handle_interpolation(rest, line, column + 2, [~S(\\{) | buffer], braces, state)\n end\n\n defp handle_interpolation(\"}\" <> rest, line, column, buffer, braces, state) do\n handle_interpolation(rest, line, column + 1, [\"}\" | buffer], braces - 1, state)\n end\n\n defp handle_interpolation(\"{\" <> rest, line, column, buffer, braces, state) do\n handle_interpolation(rest, line, column + 1, [\"{\" | buffer], braces + 1, state)\n end\n\n defp handle_interpolation(<>, line, column, buffer, braces, state) do\n handle_interpolation(rest, line, column + 1, [char_or_bin(c) | buffer], braces, state)\n end\n\n defp handle_interpolation(<<>>, _line, _column, _buffer, _braces, _state) do\n {:error,\n \"\"\"\n expected closing `}` for expression\n\n In case you don't want `{` to begin a new interpolation, \\\n you may write it using `{` or using `<%= \"{\" %>`\\\n \"\"\"}\n end\n\n ## helpers\n\n @compile {:inline, ok: 2, char_or_bin: 1}\n defp ok(acc, cont), do: {acc, cont}\n\n defp char_or_bin(c) when c <= 127, do: c\n defp char_or_bin(c), do: <>\n\n defp buffer_to_string(buffer) do\n IO.iodata_to_binary(Enum.reverse(buffer))\n end\n\n defp text_to_acc(buffer, acc, line, column, context)\n\n defp text_to_acc([], acc, _line, _column, _context),\n do: acc\n\n defp text_to_acc(buffer, acc, line, column, context) do\n meta = %{line_end: line, column_end: column}\n\n meta =\n if context == [] do\n meta\n else\n Map.put(meta, :context, trim_context(context))\n end\n\n [{:text, buffer_to_string(buffer), meta} | acc]\n end\n\n defp trim_context([:comment_end, :comment_start | [_ | _] = rest]), do: trim_context(rest)\n defp trim_context(rest), do: Enum.reverse(rest)\n\n defp push_braces(%{braces: :enabled} = state), do: state\n defp push_braces(%{braces: braces} = state), do: %{state | braces: braces + 1}\n\n defp pop_braces(%{braces: :enabled} = state), do: state\n defp pop_braces(%{braces: 1} = state), do: %{state | braces: :enabled}\n defp pop_braces(%{braces: braces} = state), do: %{state | braces: braces - 1}\n\n defp put_attr([{type, name, attrs, meta} | acc], attr, attr_meta, value) do\n attrs = [{attr, value, attr_meta} | attrs]\n [{type, name, attrs, meta} | acc]\n end\n\n defp normalize_tag([{type, name, attrs, meta} | acc], line, column, self_close?, state) do\n attrs = Enum.reverse(attrs)\n meta = %{meta | inner_location: {line, column}}\n\n meta =\n cond do\n type == :tag and state.tag_handler.void?(name) -> Map.put(meta, :closing, :void)\n self_close? -> Map.put(meta, :closing, :self)\n true -> meta\n end\n\n [{type, name, attrs, meta} | acc]\n end\n\n defp strip_text_token_fully(tokens) do\n with [{:text, text, _} | rest] <- tokens,\n \"\" <- String.trim_leading(text) do\n strip_text_token_fully(rest)\n else\n _ -> tokens\n end\n end\n\n defp raise_syntax_error!(message, meta, state) do\n raise ParseError,\n file: state.file,\n line: meta.line,\n column: meta.column,\n description: message <> ParseError.code_snippet(state.source, meta, state.indentation)\n end\nend\n" }, { "path": "lib/phoenix_live_view/tag_engine.ex", "content": "defmodule Phoenix.LiveView.TagEngine do\n @moduledoc \"\"\"\n Building blocks for tag based `Phoenix.Template.Engine`s.\n\n This cannot be directly used by Phoenix applications.\n Instead, it is the building block for engines such as\n `Phoenix.LiveView.HTMLEngine`.\n\n It is typically invoked like this:\n\n Phoenix.LiveView.TagEngine.compile(source,\n line: 1,\n file: path,\n caller: __CALLER__,\n source: source,\n tag_handler: FooBarEngine\n )\n\n Where `:tag_handler` implements the behaviour defined by this module.\n \"\"\"\n\n alias Phoenix.LiveView.TagEngine\n\n @doc \"\"\"\n Compiles the given string into Elixir AST.\n\n The accepted options are:\n\n * `tag_handler` - Required. The module implementing the `Phoenix.LiveView.TagEngine` behavior.\n * `caller` - Required. The `Macro.Env`.\n * `line` - the starting line offset. Defaults to 1.\n * `file` - the file of the template. Defaults to `\"nofile\"`.\n * `indentation` - the indentation of the template. Defaults to 0.\n\n \"\"\"\n def compile(source, options) do\n options =\n Keyword.validate!(options, [\n :caller,\n :tag_handler,\n :trim,\n line: 1,\n indentation: 0,\n file: \"nofile\",\n engine: Phoenix.LiveView.Engine\n ])\n |> Keyword.merge(source: source, trim_eex: false, strip_eex_comments: true)\n\n source\n |> TagEngine.Parser.parse!(options)\n |> TagEngine.Compiler.compile(options)\n end\n\n @doc \"\"\"\n Classify the tag type from the given binary.\n\n This must return a tuple containing the type of the tag and the name of tag.\n For instance, for LiveView which uses HTML as default tag handler this would\n return `{:tag, 'div'}` in case the given binary is identified as HTML tag.\n\n You can also return `{:error, \"reason\"}` so that the compiler will display this\n error.\n \"\"\"\n @callback classify_type(name :: binary()) :: {type :: atom(), name :: binary()}\n\n @doc \"\"\"\n Returns if the given tag name is void or not.\n\n That's mainly useful for HTML tags and used internally by the compiler. You\n can just implement as `def void?(_), do: false` if you want to ignore this.\n \"\"\"\n @callback void?(name :: binary()) :: boolean()\n\n @doc \"\"\"\n Implements processing of attributes.\n\n It returns a quoted expression or attributes. If attributes are returned,\n the second element is a list where each element in the list represents\n one attribute. If the list element is a two-element tuple, it is assumed\n the key is the name to be statically written in the template. The second\n element is the value which is also statically written to the template whenever\n possible (such as binaries or binaries inside a list).\n \"\"\"\n @callback handle_attributes(ast :: Macro.t(), meta :: keyword) ::\n {:attributes, [{binary(), Macro.t()} | Macro.t()]} | {:quoted, Macro.t()}\n\n @doc \"\"\"\n Callback invoked to add annotations around the whole body of a template.\n \"\"\"\n @callback annotate_body(caller :: Macro.Env.t()) :: {String.t(), String.t()} | nil\n\n @doc \"\"\"\n Callback invoked to add annotations around each slot of a template.\n\n In case the slot is an implicit inner block, the tag meta points to\n the component.\n \"\"\"\n @callback annotate_slot(\n name :: atom(),\n tag_meta :: %{line: non_neg_integer(), column: non_neg_integer()},\n close_tag_meta :: %{line: non_neg_integer(), column: non_neg_integer()},\n caller :: Macro.Env.t()\n ) :: {String.t(), String.t()} | nil\n\n @doc \"\"\"\n Callback invoked to add caller annotations before a function component is invoked.\n \"\"\"\n @callback annotate_caller(file :: String.t(), line :: integer(), caller :: Macro.Env.t()) ::\n String.t() | nil\n\n @doc \"\"\"\n Renders a component defined by the given function.\n\n This function is rarely invoked directly by users. Instead, it is used by `~H`\n and other engine implementations to render `Phoenix.Component`s. For example,\n the following:\n\n ```heex\n \n ```\n\n Is the same as:\n\n ```heex\n <%= component(\n &MyApp.Weather.city/1,\n [name: \"Kraków\"],\n {__ENV__.module, __ENV__.function, __ENV__.file, __ENV__.line}\n ) %>\n ```\n\n \"\"\"\n def component(func, assigns, caller)\n when (is_function(func, 1) and is_list(assigns)) or is_map(assigns) do\n assigns =\n case assigns do\n %{__changed__: _} -> assigns\n _ -> assigns |> Map.new() |> Map.put_new(:__changed__, nil)\n end\n\n case func.(assigns) do\n %Phoenix.LiveView.Rendered{} = rendered ->\n %{rendered | caller: caller}\n\n %Phoenix.LiveView.Component{} = component ->\n component\n\n other ->\n raise RuntimeError, \"\"\"\n expected #{inspect(func)} to return a %Phoenix.LiveView.Rendered{} struct\n\n Ensure your render function uses ~H to define its template.\n\n Got:\n\n #{inspect(other)}\n\n \"\"\"\n end\n end\n\n @doc \"\"\"\n Define a inner block, generally used by slots.\n\n This macro is mostly used by custom HTML engines that provide\n a `slot` implementation and rarely called directly. The\n `name` must be the assign name the slot/block will be stored\n under.\n\n If you're using HEEx templates, you should use its higher\n level `<:slot>` notation instead. See `Phoenix.Component`\n for more information.\n \"\"\"\n defmacro inner_block(name, do: do_block) do\n # TODO: Remove the catch-all clause, it is no longer used\n case do_block do\n [{:->, meta, _} | _] ->\n inner_fun = {:fn, meta, do_block}\n\n quote do\n fn parent_changed, arg ->\n var!(assigns) =\n unquote(__MODULE__).__assigns__(var!(assigns), unquote(name), parent_changed)\n\n _ = var!(assigns)\n unquote(inner_fun).(arg)\n end\n end\n\n _ ->\n quote do\n fn parent_changed, arg ->\n var!(assigns) =\n unquote(__MODULE__).__assigns__(var!(assigns), unquote(name), parent_changed)\n\n _ = var!(assigns)\n unquote(do_block)\n end\n end\n end\n end\n\n @doc false\n def __assigns__(assigns, key, parent_changed) do\n # If the component is in its initial render (parent_changed == nil)\n # or the slot/block key is in parent_changed, then we render the\n # function with the assigns as is.\n #\n # Otherwise, we will set changed to an empty list, which is the same\n # as marking everything as not changed. This is correct because\n # parent_changed will always be marked as changed whenever any of the\n # assigns it references inside is changed. It will also be marked as\n # changed if it has any variable (such as the ones coming from let).\n if is_nil(parent_changed) or Map.has_key?(parent_changed, key) do\n assigns\n else\n Map.put(assigns, :__changed__, %{})\n end\n end\n\n @doc false\n def __unmatched_let__!(pattern, value) do\n message = \"\"\"\n cannot match arguments sent from render_slot/2 against the pattern in :let.\n\n Expected a value matching `#{pattern}`, got: #{inspect(value)}\\\n \"\"\"\n\n stacktrace =\n self()\n |> Process.info(:current_stacktrace)\n |> elem(1)\n |> Enum.drop(2)\n\n reraise(message, stacktrace)\n end\n\n @behaviour EEx.Engine\n\n @impl true\n def init(opts) do\n IO.warn(\"\"\"\n Using Phoenix.LiveView.TagEngine as an EEx.Engine is deprecated!\n\n To compile HEEx, use Phoenix.LiveView.TagEngine.compile/2 instead.\n \"\"\")\n\n {subengine, opts} = Keyword.pop(opts, :subengine, Phoenix.LiveView.Engine)\n tag_handler = Keyword.fetch!(opts, :tag_handler)\n caller = Keyword.fetch!(opts, :caller)\n\n %{\n subengine: subengine,\n substate: subengine.init(opts),\n file: Keyword.get(opts, :file, \"nofile\"),\n line: Keyword.get(opts, :line, caller.line),\n indentation: Keyword.get(opts, :indentation, 0),\n caller: caller,\n source: Keyword.fetch!(opts, :source),\n tag_handler: tag_handler\n }\n end\n\n ## EEx.Engine callbacks\n ## These delegate to the subengine to satisfy EEx's expectations,\n ## but handle_body ignores everything and reparses with TagEngine.Parser + TagEngine.Compiler.\n\n @impl true\n def handle_body(state) do\n trim = Application.get_env(:phoenix, :trim_on_html_eex_engine, true)\n\n %{\n source: source,\n file: file,\n line: line,\n caller: caller,\n tag_handler: tag_handler,\n subengine: subengine,\n indentation: indentation\n } = state\n\n options = [\n engine: subengine,\n file: file,\n line: line,\n caller: caller,\n indentation: indentation,\n source: source,\n tag_handler: tag_handler,\n trim_tokens: true,\n trim: trim\n ]\n\n compile(source, options)\n end\n\n @impl true\n def handle_end(_state) do\n nil\n end\n\n @impl true\n def handle_begin(_state) do\n nil\n end\n\n @impl true\n def handle_text(state, _meta, _text) do\n state\n end\n\n @impl true\n def handle_expr(state, _marker, _expr) do\n state\n end\nend\n" }, { "path": "lib/phoenix_live_view/test/client_proxy.ex", "content": "defmodule Phoenix.LiveViewTest.ClientProxy do\n @moduledoc false\n use GenServer\n\n @data_phx_upload_ref \"data-phx-upload-ref\"\n @events :e\n @title :t\n @reply :r\n\n defstruct session_token: nil,\n static_token: nil,\n module: nil,\n endpoint: nil,\n router: nil,\n pid: nil,\n proxy: nil,\n topic: nil,\n ref: nil,\n rendered: nil,\n children: [],\n child_statics: %{},\n id: nil,\n uri: nil,\n connect_params: %{},\n connect_info: %{},\n on_error: nil\n\n alias Plug.Conn.Query\n alias Phoenix.LiveViewTest.{ClientProxy, DOM, Diff, Element, TreeDOM, Upload, View}\n import Phoenix.LiveViewTest.Utils, only: [stringify: 2]\n\n @doc \"\"\"\n Encoding used by the Channel serializer.\n \"\"\"\n def encode!(msg), do: msg\n\n @doc \"\"\"\n Stops the client proxy gracefully.\n \"\"\"\n def stop(proxy_pid, reason) do\n GenServer.call(proxy_pid, {:stop, reason})\n end\n\n @doc \"\"\"\n Returns the tokens of the root view.\n \"\"\"\n def root_view(proxy_pid) do\n GenServer.call(proxy_pid, :root_view)\n end\n\n @doc \"\"\"\n Reports upload progress to the proxy.\n \"\"\"\n def report_upload_progress(proxy_pid, from, element, entry_ref, percent, cid) do\n GenServer.call(proxy_pid, {:upload_progress, from, element, entry_ref, percent, cid})\n end\n\n @doc \"\"\"\n Starts a client proxy.\n\n ## Options\n\n * `:caller` - the required `{ref, pid}` pair identifying the caller.\n * `:view` - the required `%Phoenix.LiveViewTest.View{}`\n * `:html` - the required string of HTML for the document.\n\n \"\"\"\n def start_link(opts) do\n GenServer.start_link(__MODULE__, opts)\n end\n\n def init(opts) do\n # Since we are always running in the test client, we will disable\n # our own logging and let the client do the job.\n Logger.put_process_level(self(), :none)\n\n %{\n caller: {_, ref} = caller,\n html: response_html,\n connect_params: connect_params,\n connect_info: connect_info,\n live_module: module,\n endpoint: endpoint,\n router: router,\n session: session,\n url: url,\n test_supervisor: test_supervisor,\n on_error: on_error,\n start_location: start_location\n } = opts\n\n # We can assume there is at least one LiveView\n # because the live_module assign was set.\n #\n # On live_redirect, we only have a fragment of the full HTML response,\n # because the root layout is not included in the redirect response.\n html =\n case response_html do\n {:document, html} ->\n DOM.parse_document(html, fn type, msg -> send(self(), {:test_error, type, msg}) end)\n\n {:fragment, html} ->\n DOM.parse_fragment(html, fn type, msg -> send(self(), {:test_error, type, msg}) end)\n end\n\n {lazy_html, html_tree} = html\n\n {id, session_token, static_token, redirect_url} =\n case Map.fetch(opts, :live_redirect) do\n {:ok, {id, session_token, static_token}} ->\n {id, session_token, static_token, url}\n\n :error ->\n [{id, session_token, static_token} | _] = TreeDOM.find_live_views(html_tree)\n {id, session_token, static_token, nil}\n end\n\n root_view = %ClientProxy{\n id: id,\n ref: ref,\n connect_params: connect_params,\n connect_info: connect_info,\n session_token: session_token,\n static_token: static_token,\n module: module,\n endpoint: endpoint,\n router: router,\n uri: URI.parse(url),\n child_statics: Map.delete(DOM.find_static_views(lazy_html), id),\n topic: \"lv:#{id}\",\n # we store on_error in the view ClientProxy struct as well\n # to pass it when live_redirecting\n on_error: on_error\n }\n\n # We build an absolute path to any relative\n # static assets through the root LiveView's endpoint.\n priv_dir = :otp_app |> endpoint.config() |> Application.app_dir(\"priv\")\n static_url = endpoint.config(:static_url) || []\n\n static_path =\n case Keyword.get(static_url, :path) do\n nil ->\n Path.join(priv_dir, \"static\")\n\n _path ->\n priv_dir\n end\n\n # clear stream elements from static render\n html_tree = TreeDOM.remove_stream_children(html_tree)\n\n state = %{\n join_ref: 0,\n ref: 0,\n caller: caller,\n views: %{},\n ids: %{},\n pids: %{},\n replies: %{},\n dropped_replies: %{},\n root_view: nil,\n html_tree: html_tree,\n lazy_cache: %{root_view.id => DOM.by_id!(lazy_html, root_view.id)},\n static_path: static_path,\n session: session,\n test_supervisor: test_supervisor,\n url: url,\n page_title: :unset,\n on_error: on_error,\n start_location: start_location\n }\n\n try do\n {root_view, rendered, resp} = mount_view(state, root_view, url, redirect_url)\n\n new_state =\n state\n |> maybe_put_container(resp)\n |> Map.put(:root_view, root_view)\n |> put_view(root_view, rendered)\n |> detect_added_or_removed_children(root_view, html_tree, [])\n\n send_caller(\n new_state,\n {:ok, build_client_view(root_view), TreeDOM.to_html(new_state.html_tree)}\n )\n\n {:ok, new_state}\n catch\n :throw, {:stop, {:shutdown, reason}, _state} ->\n send_caller(state, {:error, reason})\n :ignore\n\n :throw, {:stop, reason, _} ->\n Process.unlink(elem(caller, 0))\n {:stop, reason}\n end\n end\n\n defp maybe_put_container(state, %{container: container}) do\n [tag, attrs] = container\n\n %{\n state\n | html_tree: TreeDOM.replace_root_container(state.html_tree, tag, attrs),\n lazy_cache: %{}\n }\n end\n\n defp maybe_put_container(state, %{} = _resp), do: state\n\n defp build_client_view(%ClientProxy{} = proxy) do\n %{id: id, ref: ref, topic: topic, module: module, endpoint: endpoint, pid: pid} = proxy\n %View{id: id, pid: pid, proxy: {ref, topic, self()}, module: module, endpoint: endpoint}\n end\n\n defp mount_view(state, view, url, redirect_url) do\n ref = make_ref()\n\n case start_supervised_channel(state, view, ref, url, redirect_url) do\n {:ok, pid} ->\n mon_ref = Process.monitor(pid)\n\n receive do\n {^ref, {:ok, %{rendered: rendered} = resp}} ->\n Process.demonitor(mon_ref, [:flush])\n {%{view | pid: pid}, Diff.merge_diff(%{}, rendered), resp}\n\n {^ref, {:error, %{live_redirect: opts}}} ->\n throw(stop_redirect(state, view.topic, {:live_redirect, opts}))\n\n {^ref, {:error, %{redirect: opts}}} ->\n throw(stop_redirect(state, view.topic, {:redirect, opts}))\n\n {^ref, {:error, %{reason: reason}}} when reason in ~w(stale unauthorized) ->\n redir_to =\n case redirect_url do\n %URI{} = uri -> URI.to_string(uri)\n nil -> url\n end\n\n throw(stop_redirect(state, view.topic, {:redirect, %{to: redir_to}}))\n\n {^ref, {:error, reason}} ->\n throw({:stop, reason, state})\n\n {:DOWN, ^mon_ref, _, _, reason} ->\n throw({:stop, reason, state})\n end\n\n {:error, reason} ->\n throw({:stop, reason, state})\n end\n end\n\n defp start_supervised_channel(state, view, ref, url, redirect_url) do\n socket = %Phoenix.Socket{\n transport_pid: self(),\n serializer: __MODULE__,\n channel: view.module,\n endpoint: view.endpoint,\n private: %{connect_info: Map.put_new(view.connect_info, :session, state.session)},\n topic: view.topic,\n join_ref: state.join_ref\n }\n\n params = %{\n \"session\" => view.session_token,\n \"static\" => view.static_token,\n \"params\" => Map.put(view.connect_params, \"_mounts\", 0),\n \"caller\" => state.caller\n }\n\n params = put_non_nil(params, \"url\", url)\n params = put_non_nil(params, \"redirect\", redirect_url)\n\n from = {self(), ref}\n\n spec = %{\n id: make_ref(),\n start: {Phoenix.LiveView.Channel, :start_link, [{view.endpoint, from}]},\n restart: :temporary\n }\n\n with {:ok, pid} <- Supervisor.start_child(state.test_supervisor, spec) do\n send(pid, {Phoenix.Channel, params, from, socket})\n {:ok, pid}\n end\n end\n\n defp put_non_nil(%{} = map, _key, nil), do: map\n defp put_non_nil(%{} = map, key, val), do: Map.put(map, key, val)\n\n def handle_info({:sync_children, topic, from}, state) do\n view = fetch_view_by_topic!(state, topic)\n\n children =\n Enum.flat_map(view.children, fn {id, _session} ->\n case fetch_view_by_id(state, id) do\n {:ok, child} -> [build_client_view(child)]\n :error -> []\n end\n end)\n\n GenServer.reply(from, {:ok, children})\n {:noreply, state}\n end\n\n def handle_info({:sync_render_element, operation, topic_or_element, from}, state) do\n view = fetch_view_by_topic!(state, proxy_topic(topic_or_element))\n\n render_with_selector = fn topic_or_element ->\n {state, root} = root(state, view)\n result = select_node(root, topic_or_element)\n\n {state,\n case {operation, result} do\n {:find_element, {:ok, node}} -> {:ok, node}\n {:find_element, {:error, _, message}} -> {:raise, ArgumentError.exception(message)}\n {:has_element?, {:error, :none, _}} -> {:ok, false}\n {:has_element?, _} -> {:ok, true}\n end}\n end\n\n {state, reply} =\n case topic_or_element do\n %Element{} = element ->\n render_with_selector.(element)\n\n {_, _, nil} ->\n {state, {:ok, TreeDOM.by_id!(state.html_tree, view.id)}}\n\n {_, _, selector} when not is_nil(selector) ->\n render_with_selector.(selector)\n end\n\n GenServer.reply(from, reply)\n {:noreply, state}\n end\n\n def handle_info({:sync_render_event, topic_or_element, type, value, from}, state) do\n {state, result} =\n case topic_or_element do\n {topic, event, selector} ->\n view = fetch_view_by_topic!(state, topic)\n {state, root} = root(state, view)\n\n cids =\n if selector do\n DOM.targets_from_selector(root, selector)\n else\n [nil]\n end\n\n {values, upload} =\n case value do\n %Upload{} = upload -> {%{}, upload}\n _ -> {stringify(value, & &1), nil}\n end\n\n {state, [{:event, view, cids, event, values, upload}]}\n\n %Element{} = element ->\n view = fetch_view_by_topic!(state, proxy_topic(element))\n {state, root} = root(state, view)\n\n result =\n with {:ok, node} <- select_node(root, element),\n :ok <- maybe_enabled(type, node, element),\n {:ok, event_or_js, fallback} <- maybe_event(type, node, element),\n {:ok, dom_values} <- maybe_values(type, root, node, element) do\n case maybe_js_commands(event_or_js, root, view, node, value, dom_values) do\n [] when fallback != [] ->\n fallback\n\n [] ->\n {:error, :invalid,\n \"no push or navigation command found within JS commands: #{event_or_js}\"}\n\n events ->\n events\n end\n end\n\n {state, result}\n end\n\n case result do\n [_ | _] = events ->\n last_event = length(events) - 1\n\n events\n |> Enum.with_index()\n |> Enum.reduce({:noreply, state}, fn\n {event, event_index}, {:noreply, state} ->\n case event do\n {:event, view, cids, event, values, upload} ->\n last_cid = length(cids) - 1\n\n state =\n cids\n |> Enum.with_index()\n |> Enum.reduce(state, fn {cid, cid_index}, acc ->\n {acc, root} = root(acc, view)\n\n payload =\n encode_payload(type, event, values)\n |> maybe_put_cid(cid)\n |> maybe_put_uploads(root, upload)\n\n push_with_callback(acc, from, view, \"event\", payload, fn reply, state ->\n if event_index == last_event and cid_index == last_cid do\n {:noreply, render_reply(reply, from, state)}\n else\n {:noreply, state}\n end\n end)\n end)\n\n {:noreply, state}\n\n {:patch, topic, path} ->\n handle_call({:render_patch, topic, path}, from, state)\n\n {:allow_upload, topic, ref} ->\n handle_call({:render_allow_upload, topic, ref, value}, from, state)\n\n {:upload_progress, topic, upload_ref} ->\n payload = Map.put(value, \"ref\", upload_ref)\n view = fetch_view_by_topic!(state, topic)\n {:noreply, push_with_reply(state, from, view, \"progress\", payload)}\n\n {:stop, topic, reason} ->\n stop_redirect(state, topic, reason)\n end\n\n {_event, _event_index}, return ->\n return\n end)\n\n {:error, _, message} ->\n GenServer.reply(from, {:raise, ArgumentError.exception(message)})\n {:noreply, state}\n end\n end\n\n def handle_info(\n %Phoenix.Socket.Message{\n event: \"redirect\",\n topic: _topic,\n payload: %{to: _to} = opts\n },\n state\n ) do\n stop_redirect(state, state.root_view.topic, {:redirect, opts})\n end\n\n def handle_info(\n %Phoenix.Socket.Message{\n event: \"live_patch\",\n topic: _topic,\n payload: %{to: _to} = opts\n },\n state\n ) do\n send_patch(state, state.root_view.topic, opts)\n {:noreply, state}\n end\n\n def handle_info(\n %Phoenix.Socket.Message{\n event: \"live_redirect\",\n topic: _topic,\n payload: %{to: _to} = opts\n },\n state\n ) do\n stop_redirect(state, state.root_view.topic, {:live_redirect, opts})\n end\n\n def handle_info(\n %Phoenix.Socket.Message{\n event: \"diff\",\n topic: topic,\n payload: diff\n },\n state\n ) do\n {:noreply, merge_rendered(state, topic, diff)}\n end\n\n def handle_info(%Phoenix.Socket.Reply{ref: ref} = reply, state) do\n case fetch_reply(state, ref) do\n {:ok, {_pid, _from, callback}} ->\n case handle_reply(state, reply) do\n {:ok, new_state} -> callback.(reply, drop_reply(new_state, ref))\n other -> other\n end\n\n :error ->\n case Map.fetch(state.dropped_replies, ref) do\n {:ok, from} ->\n from && GenServer.reply(from, {:ok, nil})\n {:noreply, %{state | dropped_replies: Map.delete(state.dropped_replies, ref)}}\n\n :error ->\n {:noreply, state}\n end\n end\n end\n\n def handle_info({:DOWN, _ref, :process, pid, reason}, state) do\n case fetch_view_by_pid(state, pid) do\n {:ok, _view} ->\n {:stop, reason, state}\n\n :error ->\n {:noreply, state}\n end\n end\n\n def handle_info({:socket_close, pid, reason}, state) do\n case fetch_view_by_pid(state, pid) do\n {:ok, view} ->\n {:noreply, drop_view_by_id(state, view.id, reason)}\n\n :error ->\n {:noreply, state}\n end\n end\n\n def handle_info({:test_error, type, message}, state) do\n case {configured_test_warning(type, state.on_error), default_test_error(type)} do\n {nil, :raise} ->\n raise \"\"\"\n #{String.trim(message)}\n\n You can change this error by setting\n\n config :phoenix_live_view, :test_warnings,\n #{inspect(type)}: :warn # can be one of :warn, :raise, or :ignore\n\n See the `Phoenix.LiveViewTest` documentation for more details.\n \"\"\"\n\n {nil, :warn} ->\n IO.warn(\n \"\"\"\n #{String.trim(message)}\n\n You can change this warning by setting\n\n config :phoenix_live_view, :test_warnings,\n #{inspect(type)}: :raise # can be one of :warn, :raise, or :ignore\n\n See the `Phoenix.LiveViewTest` documentation for more details.\n \"\"\",\n state.start_location\n )\n\n {:raise, _} ->\n raise message\n\n {:warn, _} ->\n IO.warn(message, state.start_location)\n\n {:ignore, _} ->\n :noop\n end\n\n {:noreply, state}\n end\n\n defp configured_test_warning(type, on_error) do\n case on_error do\n nil ->\n Phoenix.LiveViewTest.configured_test_warning(type)\n\n generic when is_atom(generic) ->\n generic\n\n config when is_list(config) ->\n Keyword.get_lazy(config, type, fn ->\n Phoenix.LiveViewTest.configured_test_warning(type)\n end)\n end\n end\n\n # We only warn for missing form IDs, because it is not necessarily an error\n # Note: remember to add a clause handling :ignore if we default some checks\n # to :ignore in the future.\n defp default_test_error(:missing_form_id), do: :warn\n defp default_test_error(_), do: :raise\n\n def handle_call({:upload_progress, from, %Element{} = el, entry_ref, progress, cid}, _, state) do\n payload = maybe_put_cid(%{\"entry_ref\" => entry_ref, \"progress\" => progress}, cid)\n topic = proxy_topic(el)\n %{pid: pid} = fetch_view_by_topic!(state, topic)\n\n ping!(pid, state, fn ->\n send(self(), {:sync_render_event, el, :upload_progress, payload, from})\n {:reply, :ok, state}\n end)\n end\n\n def handle_call(:page_title, _from, %{page_title: :unset} = state) do\n state = %{state | page_title: root_page_title(state.html_tree)}\n {:reply, {:ok, state.page_title}, state}\n end\n\n def handle_call(:page_title, _from, state) do\n {:reply, {:ok, state.page_title}, state}\n end\n\n def handle_call(:url, _from, state) do\n {:reply, {:ok, state.url}, state}\n end\n\n def handle_call(:html, _from, state) do\n {:reply, {:ok, {state.html_tree, state.static_path}}, state}\n end\n\n def handle_call(:root_view, _from, state) do\n {:reply, {state.session, state.root_view}, state}\n end\n\n def handle_call({:live_children, topic}, from, state) do\n view = fetch_view_by_topic!(state, topic)\n\n ping!(view.pid, state, fn ->\n send(self(), {:sync_children, view.topic, from})\n {:noreply, state}\n end)\n end\n\n def handle_call({:render_element, operation, topic_or_element}, from, state) do\n topic = proxy_topic(topic_or_element)\n %{pid: pid} = fetch_view_by_topic!(state, topic)\n\n ping!(pid, state, fn ->\n send(self(), {:sync_render_element, operation, topic_or_element, from})\n {:noreply, state}\n end)\n end\n\n def handle_call({:async_pids, topic_or_element}, _from, state) do\n topic = proxy_topic(topic_or_element)\n %{pid: pid} = fetch_view_by_topic!(state, topic)\n {:reply, Phoenix.LiveView.Channel.async_pids(pid), state}\n end\n\n def handle_call({:render_event, topic_or_element, type, value}, from, state) do\n topic = proxy_topic(topic_or_element)\n %{pid: pid} = fetch_view_by_topic!(state, topic)\n\n ping!(pid, state, fn ->\n send(self(), {:sync_render_event, topic_or_element, type, value, from})\n {:noreply, state}\n end)\n end\n\n def handle_call({:render_patch, topic, path}, from, state) do\n view = fetch_view_by_topic!(state, topic)\n path = URI.merge(state.root_view.uri, URI.parse(path)) |> to_string()\n state = push_with_reply(state, from, view, \"live_patch\", %{\"url\" => path})\n send_patch(state, state.root_view.topic, %{to: path})\n {:noreply, state}\n end\n\n def handle_call({:render_allow_upload, topic, ref, {entries, cid}}, from, state) do\n view = fetch_view_by_topic!(state, topic)\n payload = maybe_put_cid(%{\"ref\" => ref, \"entries\" => entries}, cid)\n\n new_state =\n push_with_callback(state, from, view, \"allow_upload\", payload, fn reply, state ->\n GenServer.reply(from, {:ok, reply.payload})\n {:noreply, state}\n end)\n\n {:noreply, new_state}\n end\n\n def handle_call({:stop, reason}, _from, state) do\n %{caller: {pid, _}} = state\n Process.unlink(pid)\n {:stop, :ok, reason, state}\n end\n\n def handle_call({:sync_with_root, topic}, _from, state) do\n view = fetch_view_by_topic!(state, topic)\n\n ping!(view.pid, state, fn ->\n # if we target a child view, we ping the root view as well\n if view.pid !== state.root_view.pid do\n ping!(state.root_view.pid, state, fn ->\n {:reply, :ok, state}\n end)\n else\n {:reply, :ok, state}\n end\n end)\n end\n\n def handle_call({:get_lazy, %Element{} = element}, _from, state) do\n view = fetch_view_by_topic!(state, proxy_topic(element))\n {state, root} = root(state, view.id)\n {:reply, {:ok, root}, state}\n end\n\n def handle_call({:get_lazy, id}, _from, state) do\n {state, root} = root(state, id)\n {:reply, {:ok, root}, state}\n end\n\n defp ping!(pid, state, fun) do\n try do\n # We send a message to the channel for synchronization purposes.\n #\n # It can happen that the channel shuts down before the ping is processed,\n # or even that the channel is already dead, therefore we catch the exit\n # and let it be handled by the regular handle_info callback for\n # the DOWN message.\n Phoenix.LiveView.Channel.ping(pid)\n catch\n :exit, _ ->\n receive do\n {:DOWN, _ref, :process, ^pid, _reason} = down ->\n handle_info(down, state)\n end\n else\n :ok -> fun.()\n end\n end\n\n defp drop_view_by_id(state, id, reason) do\n {:ok, view} = fetch_view_by_id(state, id)\n state = push(state, view, \"phx_leave\", %{})\n\n state =\n Enum.reduce(view.children, state, fn {child_id, _child_session}, acc ->\n drop_view_by_id(acc, child_id, reason)\n end)\n\n flush_replies(\n %{\n state\n | ids: Map.delete(state.ids, view.id),\n views: Map.delete(state.views, view.topic),\n pids: Map.delete(state.pids, view.pid)\n },\n view.pid\n )\n end\n\n defp flush_replies(state, pid) do\n Enum.reduce(state.replies, state, fn\n {ref, {^pid, _from, _callback}}, acc -> drop_reply(acc, ref)\n {_ref, {_pid, _from, _callback}}, acc -> acc\n end)\n end\n\n defp fetch_reply(state, ref) do\n Map.fetch(state.replies, ref)\n end\n\n defp put_reply(state, ref, pid, from, callback) do\n %{state | replies: Map.put(state.replies, ref, {pid, from, callback})}\n end\n\n defp drop_reply(state, ref) do\n dropped_replies =\n case Map.fetch(state.replies, ref) do\n {:ok, {_pid, from, _callback}} -> Map.put(state.dropped_replies, ref, from)\n :error -> state.dropped_replies\n end\n\n %{\n state\n | replies: Map.delete(state.replies, ref),\n dropped_replies: dropped_replies\n }\n end\n\n defp put_child(state, %ClientProxy{} = parent, id, session) do\n update_in(state.views[parent.topic], fn %ClientProxy{} = parent ->\n %{parent | children: [{id, session} | parent.children]}\n end)\n end\n\n defp drop_child(state, %ClientProxy{} = parent, id, reason) do\n update_in(state.views[parent.topic], fn %ClientProxy{} = parent ->\n new_children = Enum.reject(parent.children, fn {cid, _session} -> id == cid end)\n %{parent | children: new_children}\n end)\n |> drop_view_by_id(id, reason)\n end\n\n defp verify_session(%ClientProxy{} = view) do\n Phoenix.LiveView.Session.verify_session(\n view.endpoint,\n view.topic,\n view.session_token,\n view.static_token\n )\n end\n\n defp put_view(state, %ClientProxy{pid: pid} = view, rendered) do\n {:ok, %Phoenix.LiveView.Session{view: module}} = verify_session(view)\n new_view = %{view | module: module, proxy: self(), pid: pid, rendered: rendered}\n Process.monitor(pid)\n\n rendered = maybe_push_events(rendered, state)\n\n patch_view(\n %{\n state\n | views: Map.put(state.views, new_view.topic, new_view),\n pids: Map.put(state.pids, pid, new_view.topic),\n ids: Map.put(state.ids, new_view.id, new_view.topic)\n },\n view,\n Diff.render_diff(rendered),\n rendered.streams\n )\n end\n\n defp patch_view(state, view, child_html, streams) do\n result =\n TreeDOM.patch_id(view.id, state.html_tree, child_html, streams, fn type, msg ->\n send(self(), {:test_error, type, msg})\n end)\n\n # IO.puts(\"PATCH VIEW #{view.id}\")\n # dbg(child_html)\n\n case result do\n {new_html, [_ | _] = will_destroy_cids} ->\n topic = view.topic\n state = %{state | html_tree: new_html, lazy_cache: %{}}\n payload = %{\"cids\" => will_destroy_cids}\n\n push_with_callback(state, nil, view, \"cids_will_destroy\", payload, fn _, state ->\n still_there_cids = TreeDOM.component_ids(view.id, state.html_tree)\n payload = %{\"cids\" => Enum.reject(will_destroy_cids, &(&1 in still_there_cids))}\n\n state =\n push_with_callback(state, nil, view, \"cids_destroyed\", payload, fn reply, state ->\n cids = reply.payload.cids\n {:noreply, update_in(state.views[topic].rendered, &Diff.drop_cids(&1, cids))}\n end)\n\n {:noreply, state}\n end)\n\n {new_html, [] = _deleted_cids} ->\n %{state | html_tree: new_html, lazy_cache: %{}}\n end\n end\n\n defp stop_redirect(%{caller: {pid, _}} = state, topic, {_kind, opts} = reason)\n when is_binary(topic) do\n send_caller(state, {:redirect, topic, opts})\n Process.unlink(pid)\n {:stop, {:shutdown, reason}, state}\n end\n\n defp fetch_view_by_topic!(state, topic), do: Map.fetch!(state.views, topic)\n defp fetch_view_by_topic(state, topic), do: Map.fetch(state.views, topic)\n\n defp fetch_view_by_pid(state, pid) when is_pid(pid) do\n with {:ok, topic} <- Map.fetch(state.pids, pid) do\n fetch_view_by_topic(state, topic)\n end\n end\n\n defp fetch_view_by_id(state, id) do\n with {:ok, topic} <- Map.fetch(state.ids, id) do\n fetch_view_by_topic(state, topic)\n end\n end\n\n defp render_reply(reply, from, state) do\n case fetch_view_by_topic(state, reply.topic) do\n {:ok, view} ->\n GenServer.reply(\n from,\n {:ok, state.html_tree |> TreeDOM.inner_html!(view.id) |> TreeDOM.to_html()}\n )\n\n state\n\n :error ->\n state\n end\n end\n\n defp merge_rendered(state, topic, %{diff: diff}), do: merge_rendered(state, topic, diff)\n\n defp merge_rendered(%{html_tree: html_before} = state, topic, %{} = diff) do\n {diff, state} =\n diff\n |> maybe_push_events(state)\n |> maybe_push_reply(state)\n |> maybe_push_title(state)\n\n if diff == %{} do\n state\n else\n case fetch_view_by_topic(state, topic) do\n {:ok, %ClientProxy{} = view} ->\n rendered = Diff.merge_diff(view.rendered, diff)\n new_view = %{view | rendered: rendered}\n streams = Diff.extract_streams(rendered, rendered.streams)\n\n %{state | views: Map.update!(state.views, topic, fn _ -> new_view end)}\n |> patch_view(new_view, Diff.render_diff(rendered), streams)\n |> detect_added_or_removed_children(new_view, html_before, streams)\n\n :error ->\n state\n end\n end\n end\n\n defp detect_added_or_removed_children(state, view, html_before, streams) do\n new_state = recursive_detect_added_or_removed_children(state, view, html_before, streams)\n {:ok, new_view} = fetch_view_by_topic(new_state, view.topic)\n\n ids_after =\n new_state.html_tree\n |> TreeDOM.reverse_filter(&TreeDOM.attribute(&1, \"data-phx-session\"))\n |> TreeDOM.all_attributes(\"id\")\n |> MapSet.new()\n\n Enum.reduce(new_view.children, new_state, fn {id, _session}, acc ->\n if id in ids_after do\n acc\n else\n drop_child(acc, new_view, id, {:shutdown, :left})\n end\n end)\n end\n\n defp recursive_detect_added_or_removed_children(state, view, html_before, streams) do\n state.html_tree\n |> TreeDOM.inner_html!(view.id)\n |> TreeDOM.find_live_views()\n |> Enum.reduce(state, fn {id, session, static}, acc ->\n case fetch_view_by_id(acc, id) do\n {:ok, view} ->\n streams = Diff.extract_streams(view.rendered, streams)\n patch_view(acc, view, TreeDOM.inner_html!(html_before, view.id), streams)\n\n :error ->\n static = static || Map.get(state.root_view.child_statics, id)\n child_view = build_child(view, id: id, session_token: session, static_token: static)\n\n {child_view, rendered, _resp} = mount_view(acc, child_view, nil, nil)\n streams = Diff.extract_streams(rendered, streams)\n\n acc\n |> put_view(child_view, rendered)\n |> put_child(view, id, child_view.session_token)\n |> recursive_detect_added_or_removed_children(child_view, acc.html_tree, streams)\n end\n end)\n end\n\n defp send_caller(%{caller: {pid, ref}}, msg) when is_pid(pid) do\n send(pid, {ref, msg})\n end\n\n defp send_patch(state, topic, %{to: to} = opts) do\n relative =\n case URI.parse(to) do\n %{path: nil} -> \"\"\n %{path: path, query: nil} -> path\n %{path: path, query: query} -> path <> \"?\" <> query\n end\n\n send_caller(state, {:patch, topic, %{opts | to: relative}})\n end\n\n defp push(state, view, event, payload) do\n ref = state.ref + 1\n\n message = %Phoenix.Socket.Message{\n join_ref: state.join_ref,\n topic: view.topic,\n event: event,\n payload: payload,\n ref: to_string(ref)\n }\n\n send(view.pid, message)\n\n %{state | ref: ref}\n end\n\n defp push_with_reply(state, from, view, event, payload) do\n push_with_callback(state, from, view, event, payload, fn reply, state ->\n {:noreply, render_reply(reply, from, state)}\n end)\n end\n\n defp handle_reply(state, reply) do\n %{payload: payload, topic: topic} = reply\n\n new_state =\n case payload do\n %{diff: diff} -> merge_rendered(state, topic, diff)\n %{} = diff -> merge_rendered(state, topic, diff)\n end\n\n case payload do\n %{live_redirect: %{to: _to} = opts} ->\n stop_redirect(new_state, topic, {:live_redirect, opts})\n\n %{live_patch: %{to: _to} = opts} ->\n send_patch(new_state, topic, opts)\n {:ok, new_state}\n\n %{redirect: %{to: _to} = opts} ->\n stop_redirect(new_state, topic, {:redirect, opts})\n\n %{} ->\n {:ok, new_state}\n end\n end\n\n defp push_with_callback(state, from, view, event, payload, callback) do\n ref = to_string(state.ref + 1)\n\n state\n |> push(view, event, payload)\n |> put_reply(ref, view.pid, from, callback)\n end\n\n defp build_child(%ClientProxy{ref: ref, proxy: proxy, endpoint: endpoint}, attrs) do\n attrs_with_defaults =\n Keyword.merge(attrs,\n ref: ref,\n proxy: proxy,\n endpoint: endpoint,\n topic: \"lv:#{Keyword.fetch!(attrs, :id)}\"\n )\n\n struct!(__MODULE__, attrs_with_defaults)\n end\n\n ## Element helpers\n\n defp encode_payload(type, event, value) when type in [:change, :submit],\n do: %{\n \"type\" => \"form\",\n \"event\" => event,\n \"value\" => Plug.Conn.Query.encode(value)\n }\n\n defp encode_payload(type, event, value),\n do: %{\n \"type\" => Atom.to_string(type),\n \"event\" => event,\n \"value\" => value\n }\n\n defp proxy_topic({topic, _, _}) when is_binary(topic), do: topic\n defp proxy_topic(%{proxy: {_ref, topic, _pid}}), do: topic\n\n defp root(state, %ClientProxy{id: id}), do: root(state, id)\n\n defp root(state, id) when is_binary(id) do\n case state.lazy_cache do\n %{^id => lazy} ->\n {state, lazy}\n\n _ ->\n view_tree = TreeDOM.by_id!(state.html_tree, id)\n lazy = DOM.to_lazy(List.wrap(view_tree))\n lazy_cache = Map.put(state.lazy_cache, id, lazy)\n {%{state | lazy_cache: lazy_cache}, lazy}\n end\n end\n\n defp select_node(root, %Element{selector: selector, text_filter: nil}) do\n select_node(root, selector)\n end\n\n defp select_node(root, %Element{selector: selector, text_filter: text_filter}) do\n nodes =\n root\n |> DOM.child_nodes()\n |> DOM.all(selector)\n |> DOM.to_tree()\n\n select_node_by_text(root, nodes, text_filter, selector)\n end\n\n defp select_node(root, selector) when is_binary(selector) do\n case root\n |> DOM.child_nodes()\n |> DOM.maybe_one(selector) do\n {:ok, result} -> {:ok, DOM.to_tree(result) |> hd()}\n error -> error\n end\n end\n\n defp select_node_by_text(root, nodes, text_filter, selector) do\n filtered_nodes = Enum.filter(nodes, &(TreeDOM.to_text(&1) =~ text_filter))\n\n case {nodes, filtered_nodes} do\n {_, [filtered_node]} ->\n {:ok, filtered_node}\n\n {[], _} ->\n {:error, :none,\n \"selector #{inspect(selector)} did not return any element within: \\n\\n\" <>\n DOM.to_html(root)}\n\n {[node], []} ->\n {:error, :none,\n \"selector #{inspect(selector)} did not match text filter #{inspect(text_filter)}, \" <>\n \"got: \\n\\n#{TreeDOM.inspect_html(node)}\"}\n\n {_, []} ->\n {:error, :none,\n \"selector #{inspect(selector)} returned #{length(nodes)} elements \" <>\n \"but none matched the text filter #{inspect(text_filter)}: \\n\\n\" <>\n TreeDOM.inspect_html(nodes)}\n\n {_, _} ->\n {:error, :many,\n \"selector #{inspect(selector)} returned #{length(nodes)} elements \" <>\n \"and #{length(filtered_nodes)} of them matched the text filter #{inspect(text_filter)}: \\n\\n \" <>\n TreeDOM.inspect_html(filtered_nodes)}\n end\n end\n\n defp maybe_event(:upload_progress, node, %Element{} = element) do\n if ref = TreeDOM.attribute(node, @data_phx_upload_ref) do\n [{:upload_progress, proxy_topic(element), ref}]\n else\n {:error, :invalid,\n \"element selected by #{inspect(element.selector)} does not have a #{@data_phx_upload_ref} attribute\"}\n end\n end\n\n defp maybe_event(:allow_upload, node, %Element{} = element) do\n if ref = TreeDOM.attribute(node, @data_phx_upload_ref) do\n [{:allow_upload, proxy_topic(element), ref}]\n else\n {:error, :invalid,\n \"element selected by #{inspect(element.selector)} does not have a #{@data_phx_upload_ref} attribute\"}\n end\n end\n\n defp maybe_event(:hook, node, %Element{event: event} = element) do\n true = is_binary(event)\n\n cond do\n TreeDOM.attribute(node, \"phx-hook\") ->\n if TreeDOM.attribute(node, \"id\") do\n {:ok, event, []}\n else\n {:error, :invalid,\n \"element selected by #{inspect(element.selector)} for phx-hook does not have an ID\"}\n end\n\n TreeDOM.attribute(node, \"phx-viewport-top\") ||\n TreeDOM.attribute(node, \"phx-viewport-bottom\") ->\n {:ok, event, []}\n\n true ->\n {:error, :invalid,\n \"element selected by #{inspect(element.selector)} does not have phx-hook attribute\"}\n end\n end\n\n defp maybe_event(:click, {\"a\", _, _} = node, element) do\n # If there is a phx-click, that's what we will use, otherwise fallback to href\n fallback =\n if to = TreeDOM.attribute(node, \"href\") do\n case TreeDOM.attribute(node, \"data-phx-link\") do\n \"patch\" ->\n [{:patch, proxy_topic(element), to}]\n\n \"redirect\" ->\n kind = TreeDOM.attribute(node, \"data-phx-link-state\") || \"push\"\n opts = %{to: to, kind: String.to_atom(kind)}\n [{:stop, proxy_topic(element), {:live_redirect, opts}}]\n\n nil ->\n [{:stop, proxy_topic(element), {:redirect, %{to: to}}}]\n end\n else\n []\n end\n\n cond do\n event = TreeDOM.attribute(node, \"phx-click\") ->\n {:ok, event, fallback}\n\n fallback != [] ->\n fallback\n\n true ->\n message =\n \"clicked link selected by #{inspect(element.selector)} does not have phx-click or href attributes\"\n\n {:error, :invalid, message}\n end\n end\n\n defp maybe_event(type, node, element) when type in [:keyup, :keydown] do\n cond do\n event = TreeDOM.attribute(node, \"phx-#{type}\") ->\n {:ok, event, []}\n\n event = TreeDOM.attribute(node, \"phx-window-#{type}\") ->\n {:ok, event, []}\n\n true ->\n {:error, :invalid,\n \"element selected by #{inspect(element.selector)} does not have \" <>\n \"phx-#{type} or phx-window-#{type} attributes\"}\n end\n end\n\n defp maybe_event(type, node, element) do\n if event = TreeDOM.attribute(node, \"phx-#{type}\") do\n {:ok, event, []}\n else\n {:error, :invalid,\n \"element selected by #{inspect(element.selector)} does not have phx-#{type} attribute\"}\n end\n end\n\n defp maybe_js_decode(\"[\" <> _ = encoded_js), do: Phoenix.json_library().decode!(encoded_js)\n defp maybe_js_decode(event), do: [[\"push\", %{\"event\" => event}]]\n\n defp maybe_js_commands(event_or_js, root, view, node, value, dom_values) do\n event_or_js\n |> maybe_js_decode()\n |> Enum.flat_map(fn\n [\"push\", %{\"event\" => event} = args] ->\n js_values = args[\"value\"] || %{}\n js_target_selector = args[\"target\"]\n event_values = Map.merge(dom_values, js_values)\n\n {values, uploads} =\n case value do\n %Upload{} = upload -> {event_values, upload}\n other -> {deep_merge(event_values, stringify(other, & &1)), nil}\n end\n\n js_targets = DOM.targets_from_selector(root, js_target_selector)\n node_targets = DOM.targets_from_node(root, node)\n\n targets =\n case {js_targets, node_targets} do\n {[nil], right} -> right\n {left, [nil]} -> left\n {left, right} -> Enum.uniq(left ++ right)\n end\n\n [{:event, view, targets, event, values, uploads}]\n\n [\"patch\", %{\"href\" => to}] ->\n [{:patch, view.topic, to}]\n\n [\"navigate\", %{\"href\" => to, \"replace\" => true}] ->\n [{:stop, view.topic, {:live_redirect, %{to: to, kind: :replace}}}]\n\n [\"navigate\", %{\"href\" => to}] ->\n [{:stop, view.topic, {:live_redirect, %{to: to, kind: :push}}}]\n\n _ ->\n []\n end)\n end\n\n defp maybe_enabled(_type, {tag, _, _}, %{form_data: form_data})\n when tag != \"form\" and form_data != nil do\n {:error, :invalid,\n \"a form element was given but the selected node is not a form, got #{inspect(tag)}}\"}\n end\n\n defp maybe_enabled(type, node, element) do\n if TreeDOM.attribute(node, \"disabled\") do\n {:error, :invalid,\n \"cannot #{type} element #{inspect(element.selector)} because it is disabled\"}\n else\n :ok\n end\n end\n\n defp maybe_values(:hook, _root, _node, _element), do: {:ok, %{}}\n\n defp maybe_values(type, root, {tag, _, _} = node, element)\n when type in [:change, :submit] do\n cond do\n tag == \"form\" ->\n value_inputs = DOM.all_value_inputs(node, root)\n defaults = DOM.collect_form_values(node, root, fn defaults -> defaults end)\n\n lazy_submitter =\n case TreeDOM.attribute(node, \"id\") do\n nil ->\n # to collect the submitter by selector,\n # need to convert the tree to a lazy here :(\n fn -> DOM.to_lazy([node]) end\n\n id ->\n # a lazy function that returns a lazy node with all form inputs\n # that could be the submitter to collect the submitter by selector\n fn -> DOM.all(root, ~s<\n ##{id} :is(input, button):not([form]:not([form=\"#{id}\"])),\n :is(input, button)[form=\"#{id}\"]\n >) end\n end\n\n with {:ok, defaults} <-\n maybe_submitter(defaults, type, lazy_submitter, element),\n {:ok, value} <-\n fill_in_map(Enum.to_list(element.form_data || %{}), \"\", value_inputs, []) do\n {:ok,\n defaults\n |> Query.decode_done()\n |> deep_merge(TreeDOM.all_values(node))\n |> deep_merge(value)}\n else\n {:error, _, _} = error -> error\n end\n\n type == :change and tag in ~w(input select textarea) ->\n {:ok, DOM.collect_input_values(node)}\n\n true ->\n {:error, :invalid, \"phx-#{type} is only allowed in forms, got #{inspect(tag)}\"}\n end\n end\n\n defp maybe_values(_type, _root, node, _element) do\n {:ok, TreeDOM.all_values(node)}\n end\n\n defp deep_merge(%{} = target, %{} = source),\n do: Map.merge(target, source, fn _, t, s -> deep_merge(t, s) end)\n\n defp deep_merge(_target, source),\n do: source\n\n defp maybe_submitter(defaults, :submit, lazy, %Element{meta: %{submitter: element}}) do\n base = lazy.()\n\n case DOM.maybe_one(base, element.selector) do\n {:ok, node} -> collect_submitter(node, base, element, defaults)\n {:error, _, msg} -> {:error, :invalid, \"invalid form submitter, \" <> msg}\n end\n end\n\n defp maybe_submitter(defaults, _, _, _), do: {:ok, defaults}\n\n defp collect_submitter(node, base, element, defaults) do\n name = DOM.attribute(node, \"name\")\n\n cond do\n is_nil(name) ->\n {:error, :invalid,\n \"form submitter selected by #{inspect(element.selector)} must have a name\"}\n\n submitter?(node) and is_nil(DOM.attribute(node, \"disabled\")) ->\n {:ok, Plug.Conn.Query.decode_each({name, DOM.attribute(node, \"value\")}, defaults)}\n\n true ->\n {:error, :invalid,\n \"could not find non-disabled submit input or button with name #{inspect(name)} within:\\n\\n\" <>\n DOM.to_html(base)}\n end\n end\n\n defp submitter?(node) do\n case DOM.tag(node) do\n \"input\" ->\n DOM.attribute(node, \"type\") == \"submit\"\n\n \"button\" ->\n DOM.attribute(node, \"type\") in [\"submit\", nil]\n\n _ ->\n false\n end\n end\n\n defp maybe_push_events(diff, state) do\n case diff do\n %{@events => events} ->\n for [name, payload] <- events, do: send_caller(state, {:push_event, name, payload})\n Map.delete(diff, @events)\n\n %{} ->\n diff\n end\n end\n\n defp maybe_push_reply(diff, state) do\n case diff do\n %{@reply => reply} ->\n send_caller(state, {:reply, reply})\n Map.delete(diff, @reply)\n\n %{} ->\n diff\n end\n end\n\n defp maybe_push_title(diff, state) do\n case diff do\n %{@title => title} ->\n escaped_title =\n title\n |> Phoenix.HTML.html_escape()\n |> Phoenix.HTML.safe_to_string()\n\n {Map.delete(diff, @title), %{state | page_title: escaped_title}}\n\n %{} ->\n {diff, state}\n end\n end\n\n defp fill_in_map([{key, value} | rest], prefix, node, acc) do\n key = to_string(key)\n\n case fill_in_type(value, fill_in_name(prefix, key), node) do\n {:ok, value} -> fill_in_map(rest, prefix, node, [{key, value} | acc])\n {:error, _, _} = error -> error\n end\n end\n\n defp fill_in_map([], _prefix, _node, acc) do\n {:ok, Map.new(acc)}\n end\n\n defp fill_in_type([{_, _} | _] = value, key, node), do: fill_in_map(value, key, node, [])\n defp fill_in_type(%_{} = value, key, node), do: fill_in_value(value, key, node)\n defp fill_in_type(%{} = value, key, node), do: fill_in_map(Map.to_list(value), key, node, [])\n defp fill_in_type(value, key, node), do: fill_in_value(value, key, node)\n\n @limited [\"select\", \"multiple select\", \"checkbox\", \"radio\", \"hidden\"]\n @forbidden [\"submit\", \"image\"]\n\n defp fill_in_value(non_string_value, name, node) do\n value = stringify(non_string_value, &to_string/1)\n name = if is_list(value), do: name <> \"[]\", else: name\n\n {types, dom_values} =\n node\n |> TreeDOM.filter(fn node ->\n TreeDOM.attribute(node, \"name\") == name and is_nil(TreeDOM.attribute(node, \"disabled\"))\n end)\n |> collect_values([], [])\n\n limited? = Enum.all?(types, &(&1 in @limited))\n\n cond do\n calendar_value = calendar_value(types, non_string_value, name, node) ->\n {:ok, calendar_value}\n\n types == [] ->\n {:error, :invalid,\n \"could not find non-disabled input, select or textarea with name #{inspect(name)} within:\\n\\n\" <>\n TreeDOM.to_html(TreeDOM.filter(node, fn node -> TreeDOM.attribute(node, \"name\") end))}\n\n forbidden_type = Enum.find(types, &(&1 in @forbidden)) ->\n {:error, :invalid,\n \"cannot provide value to #{inspect(name)} because #{forbidden_type} inputs are never submitted\"}\n\n forbidden_value = limited? && value |> List.wrap() |> Enum.find(&(&1 not in dom_values)) ->\n {:error, :invalid,\n \"value for #{hd(types)} #{inspect(name)} must be one of #{inspect(dom_values)}, \" <>\n \"got: #{inspect(forbidden_value)}\"}\n\n true ->\n {:ok, value}\n end\n end\n\n @calendar_fields ~w(year month day hour minute second)a\n\n defp calendar_value([], %{calendar: _} = calendar_type, name, node) do\n @calendar_fields\n |> Enum.flat_map(fn field ->\n string_field = Atom.to_string(field)\n\n with value when not is_nil(value) <- Map.get(calendar_type, field),\n {:ok, string_value} <- fill_in_value(value, name <> \"[\" <> string_field <> \"]\", node) do\n [{string_field, string_value}]\n else\n _ -> []\n end\n end)\n |> case do\n [] -> nil\n pairs -> Map.new(pairs)\n end\n end\n\n defp calendar_value(_, _, _, _) do\n nil\n end\n\n defp collect_values(nodes, types, values) do\n {types, values} =\n Enum.reduce(nodes, {types, values}, fn node, {types, values} ->\n tag = TreeDOM.tag(node)\n collect_values(tag, node, types, values)\n end)\n\n {types, Enum.reverse(values)}\n end\n\n defp collect_values(\"textarea\", _node, types, values) do\n {[\"textarea\" | types], values}\n end\n\n defp collect_values(\"input\", node, types, values) do\n type = TreeDOM.attribute(node, \"type\") || \"text\"\n\n if type in [\"radio\", \"checkbox\", \"hidden\"] do\n value = TreeDOM.attribute(node, \"value\") || DOM.default_value(type)\n {[type | types], [value | values]}\n else\n {[type | types], values}\n end\n end\n\n defp collect_values(\"select\", node, types, values) do\n options =\n node\n |> TreeDOM.filter(&(TreeDOM.tag(&1) == \"option\"))\n |> Enum.map(&(TreeDOM.attribute(&1, \"value\") || \"\"))\n\n if TreeDOM.attribute(node, \"multiple\") do\n {[\"multiple select\" | types], Enum.reverse(options, values)}\n else\n {[\"select\" | types], Enum.reverse(options, values)}\n end\n end\n\n defp collect_values(_tag, _node, types, values) do\n {types, values}\n end\n\n defp fill_in_name(\"\", name), do: name\n defp fill_in_name(prefix, name), do: prefix <> \"[\" <> name <> \"]\"\n\n defp maybe_put_uploads(payload, root, %Upload{} = upload) do\n {:ok, node} = select_node(root, upload.element)\n ref = TreeDOM.attribute(node, \"data-phx-upload-ref\")\n Map.put(payload, \"uploads\", %{ref => upload.entries})\n end\n\n defp maybe_put_uploads(payload, _root, nil), do: payload\n\n defp maybe_put_cid(payload, nil), do: payload\n defp maybe_put_cid(payload, cid), do: Map.put(payload, \"cid\", cid)\n\n defp root_page_title(root_html) do\n case TreeDOM.filter(root_html, fn node -> TreeDOM.tag(node) == \"head\" end) do\n [node] ->\n case TreeDOM.filter(node, fn node -> TreeDOM.tag(node) == \"title\" end) do\n [title] -> TreeDOM.to_text(title)\n _ -> nil\n end\n\n _ ->\n nil\n end\n end\nend\n" }, { "path": "lib/phoenix_live_view/test/diff.ex", "content": "defmodule Phoenix.LiveViewTest.Diff do\n @moduledoc false\n\n alias Phoenix.LiveViewTest.DOM\n\n @components :c\n @static :s\n @keyed :k\n @keyed_count :kc\n @stream_id :stream\n @template :p\n @phx_component \"data-phx-component\"\n\n def merge_diff(rendered, diff) do\n old = Map.get(rendered, @components, %{})\n # must extract streams from diff before we pop components\n streams = extract_streams(diff, [])\n {new, diff} = Map.pop(diff, @components)\n rendered = deep_merge_diff(rendered, diff)\n\n # If we have any component, we need to get the components\n # sent by the diff and remove any link between components\n # statics. We cannot let those links reside in the diff\n # as components can be removed at any time.\n rendered =\n cond do\n new ->\n {acc, _} =\n Enum.reduce(new, {old, %{}}, fn {cid, cdiff}, {acc, cache} ->\n {value, cache} = find_component(cid, cdiff, old, new, cache)\n {Map.put(acc, cid, value), cache}\n end)\n\n Map.put(rendered, @components, acc)\n\n old != %{} ->\n Map.put(rendered, @components, old)\n\n true ->\n rendered\n end\n\n Map.put(rendered, :streams, streams)\n end\n\n defp find_component(cid, cdiff, old, new, cache) do\n case cache do\n %{^cid => cached} ->\n {cached, cache}\n\n %{} ->\n {res, cache} =\n case cdiff do\n %{@static => cid} when is_integer(cid) and cid > 0 ->\n {res, cache} = find_component(cid, new[cid], old, new, cache)\n {deep_merge_diff(res, Map.delete(cdiff, @static)), cache}\n\n %{@static => cid} when is_integer(cid) and cid < 0 ->\n {deep_merge_diff(old[-cid], Map.delete(cdiff, @static)), cache}\n\n %{} ->\n {deep_merge_diff(Map.get(old, cid, %{}), cdiff), cache}\n end\n\n {res, Map.put(cache, cid, res)}\n end\n end\n\n def drop_cids(rendered, cids) do\n update_in(rendered[@components], &Map.drop(&1, cids))\n end\n\n defp deep_merge_diff(target, %{@template => template} = source),\n do: deep_merge_diff(target, resolve_templates(Map.delete(source, @template), template))\n\n defp deep_merge_diff(target, %{@keyed => source_keyed} = source) when is_map(target) do\n target_keyed = target[@keyed]\n\n merged_keyed =\n case source_keyed[@keyed_count] do\n 0 ->\n %{@keyed_count => 0}\n\n count ->\n for pos <- 0..(count - 1), into: %{@keyed_count => count} do\n value =\n case source_keyed[pos] do\n nil -> target_keyed[pos]\n value when is_number(value) -> target_keyed[value]\n value when is_map(value) -> deep_merge_diff(target_keyed[pos], value)\n [old_pos, value] -> deep_merge_diff(target_keyed[old_pos], value)\n end\n\n {pos, value}\n end\n end\n\n merged = deep_merge_diff(Map.delete(target, @keyed), Map.delete(source, @keyed))\n Map.put(merged, @keyed, merged_keyed)\n end\n\n defp deep_merge_diff(_target, %{@static => _} = source),\n do: source\n\n defp deep_merge_diff(%{} = target, %{} = source),\n do: Map.merge(target, source, fn _, t, s -> deep_merge_diff(t, s) end)\n\n defp deep_merge_diff(_target, source),\n do: source\n\n # we resolve any templates when merging, because subsequent patches can\n # contain more templates that are not compatible with previous diffs\n defp resolve_templates(%{@template => template} = rendered, nil) do\n resolve_templates(Map.delete(rendered, @template), template)\n end\n\n defp resolve_templates(%{@static => static} = rendered, template) when is_integer(static) do\n resolve_templates(Map.put(rendered, @static, Map.fetch!(template, static)), template)\n end\n\n defp resolve_templates(rendered, template) when is_map(rendered) and not is_struct(rendered) do\n Map.new(rendered, fn {k, v} -> {k, resolve_templates(v, template)} end)\n end\n\n defp resolve_templates(other, _template), do: other\n\n def extract_streams(%{} = source, streams) when not is_struct(source) do\n Enum.reduce(source, streams, fn\n {@stream_id, stream}, acc -> [stream | acc]\n {_key, value}, acc -> extract_streams(value, acc)\n end)\n end\n\n # streams can also be in the dynamic part of the diff\n def extract_streams(source, streams) when is_list(source) do\n Enum.reduce(source, streams, fn el, acc -> extract_streams(el, acc) end)\n end\n\n def extract_streams(_value, acc), do: acc\n\n # Diff rendering\n\n def render_diff(rendered) do\n rendered\n |> Phoenix.LiveView.Diff.to_iodata(&add_cid_attr/2)\n |> IO.iodata_to_binary()\n |> DOM.parse_fragment()\n |> elem(1)\n end\n\n defp add_cid_attr(cid, [head | tail]) do\n head_with_cid =\n Regex.replace(\n ~r/^(\\s*(?:\\s*)*)<([^\\s\\/>]+)/,\n IO.iodata_to_binary(head),\n \"\\\\0 #{@phx_component}=\\\"#{to_string(cid)}\\\"\",\n global: false\n )\n\n [head_with_cid | tail]\n end\nend\n" }, { "path": "lib/phoenix_live_view/test/dom.ex", "content": "defmodule Phoenix.LiveViewTest.DOM do\n @moduledoc false\n\n @phx_component \"data-phx-component\"\n\n alias Phoenix.LiveViewTest.TreeDOM, as: Tree\n alias Plug.Conn.Query\n\n import Phoenix.LiveViewTest, only: [configured_test_warning: 1]\n\n defguardp is_lazy(html) when is_struct(html, LazyHTML)\n\n def ensure_loaded! do\n if not Code.ensure_loaded?(LazyHTML) do\n raise \"\"\"\n Phoenix LiveView requires lazy_html as a test dependency.\n Please add to your mix.exs:\n\n {:lazy_html, \">= 0.1.0\", only: :test}\n \"\"\"\n end\n end\n\n @spec parse_document(binary) :: {LazyHTML.t(), LazyHTML.Tree.t()}\n def parse_document(html, error_reporter \\\\ nil) do\n lazydoc = LazyHTML.from_document(html)\n tree = LazyHTML.to_tree(lazydoc)\n run_checks(lazydoc, error_reporter)\n\n {lazydoc, tree}\n end\n\n @spec parse_fragment(binary) :: {LazyHTML.t(), LazyHTML.Tree.t()}\n def parse_fragment(html, error_reporter \\\\ nil) do\n lazydoc = LazyHTML.from_fragment(html)\n tree = LazyHTML.to_tree(lazydoc)\n run_checks(lazydoc, error_reporter)\n\n {lazydoc, tree}\n end\n\n defp run_checks(lazydoc, error_reporter) do\n if is_function(error_reporter, 2) do\n if configured_test_warning(:duplicate_id) != :ignore,\n do: detect_duplicate_ids(lazydoc, error_reporter)\n\n if configured_test_warning(:missing_form_id) != :ignore,\n do: detect_forms_without_id(lazydoc, error_reporter)\n end\n end\n\n defp detect_duplicate_ids(lazydoc, error_reporter) do\n lazydoc\n |> LazyHTML.query(\"[id]\")\n |> LazyHTML.attribute(\"id\")\n |> Enum.frequencies()\n |> Enum.each(fn {id, count} ->\n if count > 1 do\n error_reporter.(:duplicate_id, \"\"\"\n Duplicate id found while testing LiveView: #{id}\n\n #{lazydoc |> by_id!(id) |> to_tree() |> Tree.inspect_html()}\n\n LiveView requires that all elements have unique ids, duplicate IDs will cause\n undefined behavior at runtime, as DOM patching will not be able to target the correct\n elements.\n \"\"\")\n end\n end)\n end\n\n defp detect_forms_without_id(lazydoc, error_reporter) do\n lazydoc\n |> LazyHTML.query(\"form:not([id])\")\n |> Enum.each(fn el ->\n error_reporter.(:missing_form_id, \"\"\"\n Detected a form with phx-change but missing id:\n\n #{el |> to_tree() |> Tree.inspect_html()}\n\n Without an id, LiveView will not be able to perform form recovery,\n for more information see:\n\n https://hexdocs.pm/phoenix_live_view/form-bindings.html#recovery-following-crashes-or-disconnects\n \"\"\")\n end)\n end\n\n def all(lazy, selector) do\n LazyHTML.query(lazy, selector)\n end\n\n def maybe_one(lazy, selector, type \\\\ :selector) do\n result = all(lazy, selector)\n count = Enum.count(result)\n\n case count do\n 1 ->\n {:ok, result}\n\n 0 ->\n {:error, :none,\n \"expected #{type} #{inspect(selector)} to return a single element, but got none \" <>\n \"within: \\n\\n\" <> to_html(lazy)}\n\n _ ->\n {:error, :many,\n \"expected #{type} #{inspect(selector)} to return a single element, \" <>\n \"but got #{count}: \\n\\n\" <> to_html(result)}\n end\n end\n\n def targets_from_node(lazy, node) do\n case node && Tree.all_attributes(node, \"phx-target\") do\n nil -> [nil]\n [] -> [nil]\n [selector] -> targets_from_selector(lazy, selector)\n end\n end\n\n def targets_from_selector(lazy, selector)\n\n def targets_from_selector(_lazy, nil), do: [nil]\n\n def targets_from_selector(_lazy, cid) when is_integer(cid), do: [cid]\n\n def targets_from_selector(lazy, selector) when is_binary(selector) do\n case Integer.parse(selector) do\n {cid, \"\"} ->\n [cid]\n\n _ ->\n result =\n for element <- all(lazy, selector) do\n if cid = component_id(element) do\n String.to_integer(cid)\n end\n end\n\n if result == [] do\n [nil]\n else\n result\n end\n end\n end\n\n defp component_id(tree) do\n LazyHTML.attribute(tree, @phx_component)\n |> List.first()\n end\n\n def tag(node) do\n case LazyHTML.tag(node) do\n [tag | _] -> tag\n _ -> nil\n end\n end\n\n def attribute(node, key) do\n case LazyHTML.attribute(node, key) do\n [value | _] -> value\n _ -> nil\n end\n end\n\n def to_html(lazy) when is_lazy(lazy) do\n LazyHTML.to_html(lazy, skip_whitespace_nodes: true)\n end\n\n def to_text(node) do\n LazyHTML.text(node)\n |> String.replace(~r/[\\s]+/, \" \")\n |> String.trim()\n end\n\n def child_nodes(lazy) when is_lazy(lazy) do\n LazyHTML.child_nodes(lazy)\n end\n\n def by_id!(lazy, id) do\n LazyHTML.query_by_id(lazy, id)\n end\n\n @doc \"\"\"\n Turns a lazy into a tree.\n \"\"\"\n def to_tree(lazy, opts \\\\ []) when is_struct(lazy, LazyHTML), do: LazyHTML.to_tree(lazy, opts)\n\n @doc \"\"\"\n Turns a tree into a lazy.\n \"\"\"\n def to_lazy(tree), do: LazyHTML.from_tree(tree)\n\n @doc \"\"\"\n Escapes a string for use as a CSS identifier.\n\n ## Examples\n\n iex> css_escape(\"hello world\")\n \"hello\\\\\\\\ world\"\n\n iex> css_escape(\"-123\")\n \"-\\\\\\\\31 23\"\n\n \"\"\"\n @spec css_escape(String.t()) :: String.t()\n def css_escape(value) when is_binary(value) do\n # This is a direct translation of\n # https://github.com/mathiasbynens/CSS.escape/blob/master/css.escape.js\n # into Elixir.\n value\n |> String.to_charlist()\n |> escape_css_chars()\n |> IO.iodata_to_binary()\n end\n\n defp escape_css_chars(chars) do\n case chars do\n # If the character is the first character and is a `-` (U+002D), and\n # there is no second character, […]\n [?- | []] -> [\"\\\\-\"]\n _ -> escape_css_chars(chars, 0, [])\n end\n end\n\n defp escape_css_chars([], _, acc), do: Enum.reverse(acc)\n\n defp escape_css_chars([char | rest], index, acc) do\n escaped =\n cond do\n # If the character is NULL (U+0000), then the REPLACEMENT CHARACTER\n # (U+FFFD).\n char == 0 ->\n <<0xFFFD::utf8>>\n\n # If the character is in the range [\\1-\\1F] (U+0001 to U+001F) or is\n # U+007F,\n # if the character is the first character and is in the range [0-9]\n # (U+0030 to U+0039),\n # if the character is the second character and is in the range [0-9]\n # (U+0030 to U+0039) and the first character is a `-` (U+002D),\n char in 0x0001..0x001F or char == 0x007F or\n (index == 0 and char in ?0..?9) or\n (index == 1 and char in ?0..?9 and hd(acc) == \"-\") ->\n # https://drafts.csswg.org/cssom/#escape-a-character-as-code-point\n [\"\\\\\", Integer.to_string(char, 16), \" \"]\n\n # If the character is not handled by one of the above rules and is\n # greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or\n # is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to\n # U+005A), or [a-z] (U+0061 to U+007A), […]\n char >= 0x0080 or char in [?-, ?_] or char in ?0..?9 or char in ?A..?Z or char in ?a..?z ->\n # the character itself\n <>\n\n true ->\n # Otherwise, the escaped character.\n # https://drafts.csswg.org/cssom/#escape-a-character\n [\"\\\\\", <>]\n end\n\n escape_css_chars(rest, index + 1, [escaped | acc])\n end\n\n ## Functions specific for LiveView\n\n @doc \"\"\"\n Find static information in the given HTML tree.\n \"\"\"\n def find_static_views(lazy) do\n all(lazy, \"[data-phx-static]\")\n |> Enum.into(%{}, fn node ->\n {attribute(node, \"id\"), attribute(node, \"data-phx-static\")}\n end)\n end\n\n ## Forms\n\n def all_value_inputs({\"form\", attrs, _} = form, root) do\n form_inputs = filtered_inputs(form)\n\n case Enum.into(attrs, %{}) do\n %{\"id\" => id} ->\n by_form_id = all(root, ~s<[form=\"#{id}\"]>) |> to_tree()\n named_inputs = filtered_inputs(by_form_id)\n\n # All inputs including buttons\n # Remove the named inputs first to remove any possible\n # duplicates if the child inputs also had a form attribite.\n (form_inputs -- named_inputs) ++ named_inputs\n\n _ ->\n form_inputs\n end\n end\n\n def collect_form_values(form, root, done \\\\ &Query.decode_done/1) do\n form\n |> all_value_inputs(root)\n |> Enum.reduce(Query.decode_init(), &form_defaults/2)\n |> then(done)\n end\n\n def collect_input_values(node) do\n form_defaults(node, Query.decode_init()) |> Query.decode_done()\n end\n\n defp form_defaults(node, acc) do\n tag = Tree.tag(node)\n\n if name = Tree.attribute(node, \"name\") do\n form_defaults(tag, node, name, acc)\n else\n acc\n end\n end\n\n # Selectedness algorithm as outlined in\n # https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element\n defp form_defaults(\"select\", node, name, acc) do\n options = Tree.filter(node, &(Tree.tag(&1) == \"option\"))\n\n multiple_display_size =\n case valid_display_size(node) do\n int when is_integer(int) and int > 1 -> true\n _ -> false\n end\n\n all_selected =\n if Tree.attribute(node, \"multiple\") || multiple_display_size do\n Enum.filter(options, &Tree.attribute(&1, \"selected\"))\n else\n List.wrap(\n Enum.find(Enum.reverse(options), &Tree.attribute(&1, \"selected\")) ||\n Enum.find(options, &(!Tree.attribute(&1, \"disabled\")))\n )\n end\n\n Enum.reduce(all_selected, acc, fn selected, acc ->\n Plug.Conn.Query.decode_each({name, Tree.attribute(selected, \"value\")}, acc)\n end)\n end\n\n defp form_defaults(\"textarea\", node, name, acc) do\n value = Tree.to_text(node, false)\n\n if value == \"\" do\n Plug.Conn.Query.decode_each({name, \"\"}, acc)\n else\n Plug.Conn.Query.decode_each({name, String.replace_prefix(value, \"\\n\", \"\")}, acc)\n end\n end\n\n defp form_defaults(\"input\", node, name, acc) do\n type = Tree.attribute(node, \"type\") || \"text\"\n value = Tree.attribute(node, \"value\") || default_value(type)\n\n cond do\n type in [\"radio\", \"checkbox\"] ->\n if Tree.attribute(node, \"checked\") do\n Plug.Conn.Query.decode_each({name, value}, acc)\n else\n acc\n end\n\n type in [\"image\", \"submit\"] ->\n acc\n\n true ->\n Plug.Conn.Query.decode_each({name, value}, acc)\n end\n end\n\n def default_value(\"checkbox\"), do: \"on\"\n def default_value(_type), do: \"\"\n\n defp valid_display_size(node) do\n with size when not is_nil(size) <- Tree.attribute(node, \"size\"),\n {int, \"\"} when int > 0 <- Integer.parse(size) do\n int\n else\n _ -> nil\n end\n end\n\n defp filtered_inputs(nodes) do\n Tree.filter(nodes, fn node ->\n Tree.tag(node) in ~w(input textarea select) and\n is_nil(Tree.attribute(node, \"disabled\"))\n end)\n end\nend\n" }, { "path": "lib/phoenix_live_view/test/live_view_test.ex", "content": "defmodule Phoenix.LiveViewTest do\n @moduledoc ~S'''\n Conveniences for testing function components as well as\n LiveViews and LiveComponents.\n\n ## Testing function components\n\n There are two mechanisms for testing function components. Imagine the\n following component:\n\n def greet(assigns) do\n ~H\"\"\"\n
Hello, {@name}!
\n \"\"\"\n end\n\n You can test it by using `render_component/3`, passing the function\n reference to the component as first argument:\n\n import Phoenix.LiveViewTest\n\n test \"greets\" do\n assert render_component(&MyComponents.greet/1, name: \"Mary\") ==\n \"
Hello, Mary!
\"\n end\n\n However, for complex components, often the simplest way to test them\n is by using the `~H` sigil itself:\n\n import Phoenix.Component\n import Phoenix.LiveViewTest\n\n test \"greets\" do\n assigns = %{}\n assert rendered_to_string(~H\"\"\"\n \n \"\"\") ==\n \"
Hello, Mary!
\"\n end\n\n The difference is that we use `rendered_to_string/1` to convert the rendered\n template to a string for testing.\n\n ## Testing LiveViews and LiveComponents\n\n In LiveComponents and LiveView tests, we interact with views\n via process communication in substitution of a browser.\n Like a browser, our test process receives messages about the\n rendered updates from the view which can be asserted against\n to test the life-cycle and behavior of LiveViews and their\n children.\n\n ### Testing LiveViews\n\n The life-cycle of a LiveView as outlined in the `Phoenix.LiveView`\n docs details how a view starts as a stateless HTML render in a disconnected\n socket state. Once the browser receives the HTML, it connects to the\n server and a new LiveView process is started, remounted in a connected\n socket state, and the view continues statefully. The LiveView test functions\n support testing both disconnected and connected mounts separately, for example:\n\n import Plug.Conn\n import Phoenix.ConnTest\n import Phoenix.LiveViewTest\n @endpoint MyEndpoint\n\n test \"disconnected and connected mount\", %{conn: conn} do\n conn = get(conn, \"/my-path\")\n assert html_response(conn, 200) =~ \"

My Disconnected View

\"\n\n {:ok, view, html} = live(conn)\n end\n\n test \"redirected mount\", %{conn: conn} do\n assert {:error, {:redirect, %{to: \"/somewhere\"}}} = live(conn, \"my-path\")\n end\n\n Here, we start by using the familiar `Phoenix.ConnTest` function, `get/2` to\n test the regular HTTP GET request which invokes mount with a disconnected socket.\n Next, `live/1` is called with our sent connection to mount the view in a connected\n state, which starts our stateful LiveView process.\n\n In general, it's often more convenient to test the mounting of a view\n in a single step, provided you don't need the result of the stateless HTTP\n render. This is done with a single call to `live/2`, which performs the\n `get` step for us:\n\n test \"connected mount\", %{conn: conn} do\n {:ok, _view, html} = live(conn, \"/my-path\")\n assert html =~ \"

My Connected View

\"\n end\n\n ### Testing Events\n\n The browser can send a variety of events to a LiveView via `phx-` bindings,\n which are sent to the `handle_event/3` callback. To test events sent by the\n browser and assert on the rendered side effect of the event, use the\n `render_*` functions:\n\n * `render_click/1` - sends a phx-click event and value, returning\n the rendered result of the `handle_event/3` callback.\n\n * `render_focus/2` - sends a phx-focus event and value, returning\n the rendered result of the `handle_event/3` callback.\n\n * `render_blur/1` - sends a phx-blur event and value, returning\n the rendered result of the `handle_event/3` callback.\n\n * `render_submit/1` - sends a form phx-submit event and value, returning\n the rendered result of the `handle_event/3` callback.\n\n * `render_change/1` - sends a form phx-change event and value, returning\n the rendered result of the `handle_event/3` callback.\n\n * `render_keydown/1` - sends a form phx-keydown event and value, returning\n the rendered result of the `handle_event/3` callback.\n\n * `render_keyup/1` - sends a form phx-keyup event and value, returning\n the rendered result of the `handle_event/3` callback.\n\n * `render_hook/3` - sends a hook event and value, returning\n the rendered result of the `handle_event/3` callback.\n\n For example:\n\n {:ok, view, _html} = live(conn, \"/thermo\")\n\n assert view\n |> element(\"button#inc\")\n |> render_click() =~ \"The temperature is: 31℉\"\n\n In the example above, we are looking for a particular element on the page\n and triggering its phx-click event. LiveView takes care of making sure the\n element has a phx-click and automatically sends its values to the server.\n\n You can also bypass the element lookup and directly trigger the LiveView\n event in most functions:\n\n assert render_click(view, :inc, %{}) =~ \"The temperature is: 31℉\"\n\n The `element` style is preferred as much as possible, as it helps LiveView\n perform validations and ensure the events in the HTML actually matches the\n event names on the server.\n\n ### Testing regular messages\n\n LiveViews are `GenServer`'s under the hood, and can send and receive messages\n just like any other server. To test the side effects of sending or receiving\n messages, simply message the view and use the `render` function to test the\n result:\n\n send(view.pid, {:set_temp, 50})\n assert render(view) =~ \"The temperature is: 50℉\"\n\n ### Testing LiveComponents\n\n LiveComponents can be tested in two ways. One way is to use the same\n `render_component/2` function as function components. This will mount\n the LiveComponent and render it once, without testing any of its events:\n\n assert render_component(MyComponent, id: 123, user: %User{}) =~\n \"some markup in component\"\n\n However, if you want to test how components are mounted by a LiveView\n and interact with DOM events, you must use the regular `live/2` macro\n to build the LiveView with the component and then scope events by\n passing the view and a **DOM selector** in a list:\n\n {:ok, view, html} = live(conn, \"/users\")\n html = view |> element(\"#user-13 a\", \"Delete\") |> render_click()\n refute html =~ \"user-13\"\n refute view |> element(\"#user-13\") |> has_element?()\n\n In the example above, LiveView will lookup for an element with\n ID=user-13 and retrieve its `phx-target`. If `phx-target` points\n to a component, that will be the component used, otherwise it will\n fallback to the view.\n\n ### Optional test warnings\n\n During LiveView tests (using `live/3` or `live_isolated/3`), LiveView performs\n some additional checks by default. Those include detection of duplicate DOM IDs\n and LiveComponents. When LiveViewTest detects such an issue, it is either raised\n as an exception or as a warning.\n\n You can configure this behavior in two ways:\n\n 1. Application environment config\n\n You can configure specific issue types in your application config:\n\n ```elixir\n config :phoenix_live_view, :test_warnings,\n duplicate_id: :warn, # one of :warn, :raise, :ignore\n ...\n ```\n\n The supported keys are:\n\n - `:duplicate_id` - when LiveViewTest detects a duplicate DOM ID\n - `:duplicate_live_component` - when LiveViewTest detects a LiveComponent being rendered multiple times with the same ID\n - `:missing_form_id` - when LiveViewTest detects a form without an ID attribute (this prevents [form recovery](form-bindings.html#recovery-following-crashes-or-disconnects))\n\n The supported values are:\n\n - `:raise` - crashes the test, default\n - `:warn` - only emits a warning (will still fail tests if combined with `--warnings-as-errors`)\n - `:ignore` - ignores the check\n\n 2. `on_error` option on `live/3` or `live_isolated/3`:\n\n By writing `live(conn, \"/path\", on_error: :warn)`, the default for this specific test\n can be changed. This example sets all detection types to `:warn`. You can also override\n specific types only:\n\n ```elixir\n {:ok, view, html} = live(conn, \"/path\", on_error: [duplicate_id: :ignore])\n ```\n\n which will be merged with the global configuration.\n\n Note that if a check is marked as `:ignore` in the config, it cannot be re-enabled in `on_error`.\n '''\n\n @flash_cookie \"__phoenix_flash__\"\n\n alias Phoenix.LiveView.{Diff, Socket}\n alias Phoenix.LiveViewTest.{ClientProxy, DOM, TreeDOM, Element, View, Upload, UploadClient}\n\n @doc \"\"\"\n Puts connect params to be used on LiveView connections.\n\n See `Phoenix.LiveView.get_connect_params/1`.\n \"\"\"\n def put_connect_params(conn, params) when is_map(params) do\n Plug.Conn.put_private(conn, :live_view_connect_params, params)\n end\n\n @doc \"\"\"\n Spawns a connected LiveView process.\n\n If a `path` is given, then a regular `get(conn, path)`\n is done and the page is upgraded to a LiveView. If\n no path is given, it assumes a previously rendered\n `%Plug.Conn{}` is given, which will be converted to\n a LiveView immediately.\n\n ## Options\n\n * `:on_error` - Can be either `:raise` or `:warn` to control whether\n detected errors like duplicate IDs or live components fail the test or just log\n a warning. Defaults to `:raise`.\n\n ## Examples\n\n {:ok, view, html} = live(conn, \"/path\")\n assert view.module == MyLive\n assert html =~ \"the count is 3\"\n\n assert {:error, {:redirect, %{to: \"/somewhere\"}}} = live(conn, \"/path\")\n\n \"\"\"\n defmacro live(conn, path \\\\ nil, opts \\\\ []) do\n quote bind_quoted: binding(), generated: true do\n cond do\n is_binary(path) ->\n Phoenix.LiveViewTest.__live__(get(conn, path), path, opts)\n\n is_nil(path) ->\n Phoenix.LiveViewTest.__live__(conn, nil, opts)\n\n true ->\n raise RuntimeError, \"path must be nil or a binary, got: #{inspect(path)}\"\n end\n end\n end\n\n @doc \"\"\"\n Spawns a connected LiveView process mounted in isolation as the sole rendered element.\n\n Useful for testing LiveViews that are not directly routable, such as those\n built as small components to be re-used in multiple parents. Testing routable\n LiveViews is still recommended whenever possible since features such as\n live navigation require routable LiveViews.\n\n ## Options\n\n * `:session` - the session to be given to the LiveView\n * `:on_error` - Can be either `:raise` or `:warn` to control whether\n detected errors like duplicate IDs or live components fail the test or just log\n a warning. Defaults to `:raise`.\n\n All other options are forwarded to the LiveView for rendering. Refer to\n `Phoenix.Component.live_render/3` for a list of supported render\n options.\n\n ## Examples\n\n {:ok, view, html} =\n live_isolated(conn, MyAppWeb.ClockLive, session: %{\"tz\" => \"EST\"})\n\n Use `put_connect_params/2` to put connect params for a call to\n `Phoenix.LiveView.get_connect_params/1` in `c:Phoenix.LiveView.mount/3`:\n\n {:ok, view, html} =\n conn\n |> put_connect_params(%{\"param\" => \"value\"})\n |> live_isolated(AppWeb.ClockLive, session: %{\"tz\" => \"EST\"})\n\n\n \"\"\"\n defmacro live_isolated(conn, live_view, opts \\\\ []) do\n endpoint = Module.get_attribute(__CALLER__.module, :endpoint)\n\n quote bind_quoted: binding(), unquote: true do\n unquote(__MODULE__).__isolated__(conn, endpoint, live_view, opts)\n end\n end\n\n @doc false\n def __isolated__(conn, endpoint, live_view, opts) do\n put_in(conn.private[:phoenix_endpoint], endpoint || raise(\"no @endpoint set in test module\"))\n |> Plug.Test.init_test_session(%{})\n |> Phoenix.LiveView.Router.fetch_live_flash([])\n |> Phoenix.LiveView.Controller.live_render(live_view, opts)\n |> connect_from_static_token(nil, opts)\n end\n\n @doc false\n def __live__(%Plug.Conn{state: state, status: status} = conn, _path = nil, opts) do\n path = rebuild_path(conn)\n\n case {state, status} do\n {:sent, 200} ->\n connect_from_static_token(conn, path, opts)\n\n {:sent, 302} ->\n error_redirect_conn(conn)\n\n {:sent, _} ->\n raise ArgumentError,\n \"request to #{conn.request_path} received unexpected #{status} response\"\n\n {_, _} ->\n raise ArgumentError, \"\"\"\n a request has not yet been sent.\n\n live/1 must use a connection with a sent response. Either call get/2\n prior to live/1, or use live/2 while providing a path to have a get\n request issued for you. For example issuing a get yourself:\n\n {:ok, view, _html} =\n conn\n |> get(\"#{path}\")\n |> live()\n\n or performing the GET and live connect in a single step:\n\n {:ok, view, _html} = live(conn, \"#{path}\")\n \"\"\"\n end\n end\n\n @doc false\n def __live__(conn, path, opts) do\n connect_from_static_token(conn, path, opts)\n end\n\n defp connect_from_static_token(\n %Plug.Conn{status: 200, assigns: %{live_module: live_module}} = conn,\n path,\n opts\n ) do\n DOM.ensure_loaded!()\n\n router =\n try do\n Phoenix.Controller.router_module(conn)\n rescue\n KeyError -> nil\n end\n\n start_location =\n case Process.info(self(), :current_stacktrace) do\n {:current_stacktrace,\n [\n {Process, :info, 2, _},\n {Phoenix.LiveViewTest, :connect_from_static_token, _, _},\n {_user_module, _test_name, 1, meta} | _\n ]} ->\n meta\n\n _ ->\n []\n end\n\n start_proxy(path, %{\n response: {:document, Phoenix.ConnTest.response(conn, 200)},\n connect_params: conn.private[:live_view_connect_params] || %{},\n connect_info: conn.private[:live_view_connect_info] || prune_conn(conn),\n live_module: live_module,\n router: router,\n endpoint: Phoenix.Controller.endpoint_module(conn),\n session: maybe_get_session(conn),\n url: Plug.Conn.request_url(conn),\n on_error: opts[:on_error],\n start_location: start_location\n })\n end\n\n defp connect_from_static_token(%Plug.Conn{status: 200}, _path, _opts) do\n {:error, :nosession}\n end\n\n defp connect_from_static_token(%Plug.Conn{status: redir} = conn, _path, _opts)\n when redir in [301, 302, 303] do\n error_redirect_conn(conn)\n end\n\n defp prune_conn(conn) do\n %{conn | resp_body: nil, resp_headers: []}\n end\n\n defp error_redirect_conn(conn) do\n to = hd(Plug.Conn.get_resp_header(conn, \"location\"))\n\n opts =\n if flash = conn.assigns[:flash] || conn.private[:phoenix_flash] do\n %{to: to, flash: flash}\n else\n %{to: to}\n end\n\n {:error, {error_redirect_key(conn), opts}}\n end\n\n defp error_redirect_key(%{private: %{phoenix_live_redirect: true}}), do: :live_redirect\n defp error_redirect_key(_), do: :redirect\n\n defp start_proxy(path, %{} = opts) do\n ref = make_ref()\n\n opts =\n Map.merge(opts, %{\n caller: {self(), ref},\n html: opts.response,\n connect_params: opts.connect_params,\n connect_info: opts.connect_info,\n live_module: opts.live_module,\n endpoint: opts.endpoint,\n session: opts.session,\n url: opts.url,\n test_supervisor: fetch_test_supervisor!(),\n on_error: opts.on_error\n })\n\n case ClientProxy.start_link(opts) do\n {:ok, _pid} ->\n receive do\n {^ref, {:ok, view, html}} -> {:ok, view, html}\n end\n\n {:error, reason} ->\n exit({reason, {__MODULE__, :live, [path]}})\n\n :ignore ->\n receive do\n {^ref, {:error, reason}} -> {:error, reason}\n end\n end\n end\n\n defp fetch_test_supervisor!() do\n case ExUnit.fetch_test_supervisor() do\n {:ok, sup} -> sup\n :error -> raise ArgumentError, \"LiveView helpers can only be invoked from the test process\"\n end\n end\n\n defp maybe_get_session(%Plug.Conn{} = conn) do\n try do\n Plug.Conn.get_session(conn)\n rescue\n _ -> %{}\n end\n end\n\n defp rebuild_path(%Plug.Conn{request_path: request_path, query_string: \"\"}),\n do: request_path\n\n defp rebuild_path(%Plug.Conn{request_path: request_path, query_string: query_string}),\n do: request_path <> \"?\" <> query_string\n\n @doc \"\"\"\n Renders a component.\n\n The first argument may either be a function component, as an\n anonymous function:\n\n assert render_component(&Weather.city/1, name: \"Kraków\") =~\n \"some markup in component\"\n\n Or a stateful component as a module. In this case, this function\n will mount, update, and render the component. The `:id` option is\n a required argument:\n\n assert render_component(MyComponent, id: 123, user: %User{}) =~\n \"some markup in component\"\n\n If your component is using the router, you can pass it as argument:\n\n assert render_component(MyComponent, %{id: 123, user: %User{}}, router: SomeRouter) =~\n \"some markup in component\"\n\n \"\"\"\n defmacro render_component(component, assigns \\\\ Macro.escape(%{}), opts \\\\ []) do\n endpoint = Module.get_attribute(__CALLER__.module, :endpoint)\n\n component =\n if is_atom(component) do\n quote do\n unquote(component).__live__()\n unquote(component)\n end\n else\n component\n end\n\n quote do\n Phoenix.LiveViewTest.__render_component__(\n unquote(endpoint),\n unquote(component),\n unquote(assigns),\n unquote(opts)\n )\n end\n end\n\n @doc false\n def __render_component__(endpoint, component, assigns, opts) when is_atom(component) do\n socket = %Socket{endpoint: endpoint, router: opts[:router]}\n\n assigns = Map.new(assigns)\n\n # TODO: Make the ID required once we support only stateful module components as live_component\n mount_assigns = if assigns[:id], do: %{myself: %Phoenix.LiveComponent.CID{cid: -1}}, else: %{}\n\n socket\n |> Diff.component_to_rendered(component, assigns, mount_assigns)\n |> rendered_to_diff_string(socket)\n end\n\n def __render_component__(endpoint, function, assigns, opts) when is_function(function, 1) do\n socket = %Socket{endpoint: endpoint, router: opts[:router]}\n\n assigns\n |> Map.new()\n |> Map.put_new(:__changed__, %{})\n |> function.()\n |> rendered_to_diff_string(socket)\n end\n\n defp rendered_to_diff_string(rendered, socket) do\n {diff, _, _} =\n Diff.render(socket, rendered, Diff.new_fingerprints(), Diff.new_components())\n\n diff |> Diff.to_iodata() |> IO.iodata_to_binary()\n end\n\n @doc ~S'''\n Converts a rendered template to a string.\n\n ## Examples\n\n import Phoenix.Component\n import Phoenix.LiveViewTest\n\n test \"greets\" do\n assigns = %{}\n assert rendered_to_string(~H\"\"\"\n \n \"\"\") ==\n \"
Hello, Mary!
\"\n end\n\n '''\n def rendered_to_string(rendered) do\n rendered\n |> Phoenix.HTML.html_escape()\n |> Phoenix.HTML.safe_to_string()\n end\n\n @doc \"\"\"\n Sends a click event given by `element` and returns the rendered result.\n\n The `element` is created with `element/3` and must point to a single\n element on the page with a `phx-click` attribute in it. The event name\n given set on `phx-click` is then sent to the appropriate LiveView\n (or component if `phx-target` is set accordingly). All `phx-value-*`\n entries in the element are sent as values. Extra values can be given\n with the `value` argument.\n\n If the element does not have a `phx-click` attribute but it is\n a link (the `` tag), the link will be followed accordingly:\n\n * if the link is a `patch`, the current view will be patched\n * if the link is a `navigate`, this function will return\n `{:error, {:live_redirect, %{to: url}}}`, which can be followed\n with `follow_redirect/2`\n * if the link is a regular link, this function will return\n `{:error, {:redirect, %{to: url}}}`, which can be followed\n with `follow_redirect/2`\n\n It returns the contents of the whole LiveView or an `{:error, redirect}`\n tuple.\n\n ## Examples\n\n {:ok, view, html} = live(conn, \"/thermo\")\n\n assert view\n |> element(\"button\", \"Increment\")\n |> render_click() =~ \"The temperature is: 30℉\"\n \"\"\"\n def render_click(element, value \\\\ %{})\n def render_click(%Element{} = element, value), do: render_event(element, :click, value)\n def render_click(view, event), do: render_click(view, event, %{})\n\n @doc \"\"\"\n Sends a click `event` to the `view` with `value` and returns the rendered result.\n\n It returns the contents of the whole LiveView or an `{:error, redirect}`\n tuple.\n\n ## Examples\n\n {:ok, view, html} = live(conn, \"/thermo\")\n assert html =~ \"The temperature is: 30℉\"\n assert render_click(view, :inc) =~ \"The temperature is: 31℉\"\n\n \"\"\"\n def render_click(view, event, value) do\n render_event(view, :click, event, value)\n end\n\n @doc \"\"\"\n Puts the submitter `element_or_selector` on the given `form` element.\n\n A submitter is an element that initiates the form's submit event on the client. When a submitter\n is put on an element created with `form/3` and then the form is submitted via `render_submit/2`,\n the name/value pair of the submitter will be included in the submit event payload.\n\n The given element or selector must exist within the form and match one of the following:\n\n - A `button` or `input` element with `type=\"submit\"`.\n\n - A `button` element without a `type` attribute.\n\n ## Examples\n\n form = view |> form(\"#my-form\")\n\n assert form\n |> put_submitter(\"button[name=example]\")\n |> render_submit() =~ \"Submitted example\"\n \"\"\"\n def put_submitter(form, element_or_selector)\n\n def put_submitter(%Element{proxy: proxy} = form, submitter) when is_binary(submitter) do\n put_submitter(form, %Element{proxy: proxy, selector: submitter})\n end\n\n def put_submitter(%Element{} = form, %Element{} = submitter) do\n %{form | meta: Map.put(form.meta, :submitter, submitter)}\n end\n\n @doc ~S'''\n Sends a form submit event given by `element` and returns the rendered result.\n\n The `element` is created with `element/3` and must point to a single\n element on the page with a `phx-submit` attribute in it. The event name\n given set on `phx-submit` is then sent to the appropriate LiveView\n (or component if `phx-target` is set accordingly). All `phx-value-*`\n entries in the element are sent as values. Extra values, including hidden\n input fields, can be given with the `value` argument.\n\n It returns the contents of the whole LiveView or an `{:error, redirect}`\n tuple.\n\n ## Examples\n\n {:ok, view, html} = live(conn, \"/thermo\")\n\n assert view\n |> element(\"form\")\n |> render_submit(%{deg: 123, avatar: upload}) =~ \"123 exceeds limits\"\n\n To submit a form along with some hidden input values:\n\n assert view\n |> form(\"#term\", user: %{name: \"hello\"})\n |> render_submit(%{user: %{\"hidden_field\" => \"example\"}}) =~ \"Name updated\"\n\n To submit a form by a specific submit element via `put_submitter/2`:\n\n assert view\n |> form(\"#term\", user: %{name: \"hello\"})\n |> put_submitter(\"button[name=example_action]\")\n |> render_submit() =~ \"Action taken\"\n\n > #### Anti-pattern: bypassing LiveViewTest's form validation unnecessarily {: .warning}\n >\n > **DO NOT** use the value parameter to pass data that you expect to be filled\n > by regular input fields in the form. Values given directly to `render_submit`\n > are not checked against the inputs rendered as part of the form.\n >\n > Imagine you have this code:\n >\n > ```elixir\n > def render(assigns) do\n > ~H\"\"\"\n >
\n > \n > \n >
\n > \"\"\"\n > end\n >\n > def handle_event(\"save\", %{\"name\" => name}, socket) do\n > ...\n > end\n > ```\n >\n > And you test it with:\n >\n > ```elixir\n > view |> form(\"form\") |> render_submit(%{name: \"hello\"})\n > ```\n >\n > Because the values given to `render_submit` are not checked against the\n > form, if you later change the input name to something, the test will not fail.\n > Instead, you should always pass values that are part of visible input fields\n > as part of the `form/3` call:\n >\n > ```elixir\n > view |> form(\"form\", %{name: \"hello\"}) |> render_submit()\n > ```\n >\n > This way, if you run the tests and your input field is called ``,\n > you will get an error:\n >\n > ```text\n > ** (ArgumentError) could not find non-disabled input, select or textarea with name \"name\" within:\n >\n > \n > ```\n >\n > Only use the `value` parameter to pass values for hidden input fields or submit events from a hook\n > that cannot be passed to `form/3`. The same applies to `render_change/2`.\n\n '''\n def render_submit(element, value \\\\ %{})\n def render_submit(%Element{} = element, value), do: render_event(element, :submit, value)\n def render_submit(view, event), do: render_submit(view, event, %{})\n\n @doc \"\"\"\n Sends a form submit event to the view and returns the rendered result.\n\n It returns the contents of the whole LiveView or an `{:error, redirect}`\n tuple.\n\n ## Examples\n\n {:ok, view, html} = live(conn, \"/thermo\")\n assert html =~ \"The temp is: 30℉\"\n assert render_submit(view, :refresh, %{deg: 32}) =~ \"The temp is: 32℉\"\n \"\"\"\n def render_submit(view, event, value) do\n render_event(view, :submit, event, value)\n end\n\n @doc \"\"\"\n Sends a form change event given by `element` and returns the rendered result.\n\n The `element` is created with `element/3` and must point to a single\n element on the page with a `phx-change` attribute in it. The event name\n given set on `phx-change` is then sent to the appropriate LiveView\n (or component if `phx-target` is set accordingly). All `phx-value-*`\n entries in the element are sent as values.\n\n If you need to pass any extra values or metadata, such as the \"_target\"\n parameter, you can do so by giving a map under the `value` argument.\n\n It returns the contents of the whole LiveView or an `{:error, redirect}`\n tuple.\n\n ## Examples\n\n {:ok, view, html} = live(conn, \"/thermo\")\n\n assert view\n |> element(\"form\")\n |> render_change(%{deg: 123}) =~ \"123 exceeds limits\"\n\n # Passing metadata\n {:ok, view, html} = live(conn, \"/thermo\")\n\n assert view\n |> element(\"form\")\n |> render_change(%{_target: [\"deg\"], deg: 123}) =~ \"123 exceeds limits\"\n\n As with `render_submit/2`, hidden input field values can be provided like so:\n\n refute view\n |> form(\"#term\", user: %{name: \"hello\"})\n |> render_change(%{user: %{\"hidden_field\" => \"example\"}}) =~ \"can't be blank\"\n\n \"\"\"\n def render_change(element, value \\\\ %{})\n def render_change(%Element{} = element, value), do: render_event(element, :change, value)\n def render_change(view, event), do: render_change(view, event, %{})\n\n @doc \"\"\"\n Sends a form change event to the view and returns the rendered result.\n\n It returns the contents of the whole LiveView or an `{:error, redirect}`\n tuple.\n\n ## Examples\n\n {:ok, view, html} = live(conn, \"/thermo\")\n assert html =~ \"The temp is: 30℉\"\n assert render_change(view, :validate, %{deg: 123}) =~ \"123 exceeds limits\"\n \"\"\"\n def render_change(view, event, value) do\n render_event(view, :change, event, value)\n end\n\n @doc \"\"\"\n Sends a keydown event given by `element` and returns the rendered result.\n\n The `element` is created with `element/3` and must point to a single element\n on the page with a `phx-keydown` or `phx-window-keydown` attribute in it.\n The event name given set on `phx-keydown` is then sent to the appropriate\n LiveView (or component if `phx-target` is set accordingly). All `phx-value-*`\n entries in the element are sent as values. Extra values can be given with\n the `value` argument.\n\n It returns the contents of the whole LiveView or an `{:error, redirect}`\n tuple.\n\n ## Examples\n\n {:ok, view, html} = live(conn, \"/thermo\")\n assert html =~ \"The temp is: 30℉\"\n assert view |> element(\"#inc\") |> render_keydown() =~ \"The temp is: 31℉\"\n\n \"\"\"\n def render_keydown(element, value \\\\ %{})\n\n def render_keydown(%Element{} = element, value),\n do: render_event(element, :keydown, value)\n\n def render_keydown(view, event), do: render_keydown(view, event, %{})\n\n @doc \"\"\"\n Sends a keydown event to the view and returns the rendered result.\n\n It returns the contents of the whole LiveView or an `{:error, redirect}`\n tuple.\n\n ## Examples\n\n {:ok, view, html} = live(conn, \"/thermo\")\n assert html =~ \"The temp is: 30℉\"\n assert render_keydown(view, :inc) =~ \"The temp is: 31℉\"\n\n \"\"\"\n def render_keydown(view, event, value) do\n render_event(view, :keydown, event, value)\n end\n\n @doc \"\"\"\n Sends a keyup event given by `element` and returns the rendered result.\n\n The `element` is created with `element/3` and must point to a single\n element on the page with a `phx-keyup` or `phx-window-keyup` attribute\n in it. The event name given set on `phx-keyup` is then sent to the\n appropriate LiveView (or component if `phx-target` is set accordingly).\n All `phx-value-*` entries in the element are sent as values. Extra values\n can be given with the `value` argument.\n\n It returns the contents of the whole LiveView or an `{:error, redirect}`\n tuple.\n\n ## Examples\n\n {:ok, view, html} = live(conn, \"/thermo\")\n assert html =~ \"The temp is: 30℉\"\n assert view |> element(\"#inc\") |> render_keyup() =~ \"The temp is: 31℉\"\n\n \"\"\"\n def render_keyup(element, value \\\\ %{})\n def render_keyup(%Element{} = element, value), do: render_event(element, :keyup, value)\n def render_keyup(view, event), do: render_keyup(view, event, %{})\n\n @doc \"\"\"\n Sends a keyup event to the view and returns the rendered result.\n\n It returns the contents of the whole LiveView or an `{:error, redirect}`\n tuple.\n\n ## Examples\n\n {:ok, view, html} = live(conn, \"/thermo\")\n assert html =~ \"The temp is: 30℉\"\n assert render_keyup(view, :inc) =~ \"The temp is: 31℉\"\n\n \"\"\"\n def render_keyup(view, event, value) do\n render_event(view, :keyup, event, value)\n end\n\n @doc \"\"\"\n Sends a blur event given by `element` and returns the rendered result.\n\n The `element` is created with `element/3` and must point to a single\n element on the page with a `phx-blur` attribute in it. The event name\n given set on `phx-blur` is then sent to the appropriate LiveView\n (or component if `phx-target` is set accordingly). All `phx-value-*`\n entries in the element are sent as values. Extra values can be given\n with the `value` argument.\n\n It returns the contents of the whole LiveView or an `{:error, redirect}`\n tuple.\n\n ## Examples\n\n {:ok, view, html} = live(conn, \"/thermo\")\n\n assert view\n |> element(\"#inactive\")\n |> render_blur() =~ \"Tap to wake\"\n \"\"\"\n def render_blur(element, value \\\\ %{})\n def render_blur(%Element{} = element, value), do: render_event(element, :blur, value)\n def render_blur(view, event), do: render_blur(view, event, %{})\n\n @doc \"\"\"\n Sends a blur event to the view and returns the rendered result.\n\n It returns the contents of the whole LiveView or an `{:error, redirect}`\n tuple.\n\n ## Examples\n\n {:ok, view, html} = live(conn, \"/thermo\")\n assert html =~ \"The temp is: 30℉\"\n assert render_blur(view, :inactive) =~ \"Tap to wake\"\n\n \"\"\"\n def render_blur(view, event, value) do\n render_event(view, :blur, event, value)\n end\n\n @doc \"\"\"\n Sends a focus event given by `element` and returns the rendered result.\n\n The `element` is created with `element/3` and must point to a single\n element on the page with a `phx-focus` attribute in it. The event name\n given set on `phx-focus` is then sent to the appropriate LiveView\n (or component if `phx-target` is set accordingly). All `phx-value-*`\n entries in the element are sent as values. Extra values can be given\n with the `value` argument.\n\n It returns the contents of the whole LiveView or an `{:error, redirect}`\n tuple.\n\n ## Examples\n\n {:ok, view, html} = live(conn, \"/thermo\")\n\n assert view\n |> element(\"#inactive\")\n |> render_focus() =~ \"Tap to wake\"\n \"\"\"\n def render_focus(element, value \\\\ %{})\n def render_focus(%Element{} = element, value), do: render_event(element, :focus, value)\n def render_focus(view, event), do: render_focus(view, event, %{})\n\n @doc \"\"\"\n Sends a focus event to the view and returns the rendered result.\n\n It returns the contents of the whole LiveView or an `{:error, redirect}`\n tuple.\n\n ## Examples\n\n {:ok, view, html} = live(conn, \"/thermo\")\n assert html =~ \"The temp is: 30℉\"\n assert render_focus(view, :inactive) =~ \"Tap to wake\"\n\n \"\"\"\n def render_focus(view, event, value) do\n render_event(view, :focus, event, value)\n end\n\n @doc \"\"\"\n Sends a hook event to the view or an element and returns the rendered result.\n\n It returns the contents of the whole LiveView or an `{:error, redirect}`\n tuple.\n\n ## Examples\n\n {:ok, view, html} = live(conn, \"/thermo\")\n assert html =~ \"The temp is: 30℉\"\n assert render_hook(view, :refresh, %{deg: 32}) =~ \"The temp is: 32℉\"\n\n If you are pushing events from a hook to a component, then you must pass\n an `element`, created with `element/3`, as first argument and it must point\n to a single element on the page with a `phx-target` attribute in it:\n\n {:ok, view, _html} = live(conn, \"/thermo\")\n assert view\n |> element(\"#thermo-component\")\n |> render_hook(:refresh, %{deg: 32}) =~ \"The temp is: 32℉\"\n\n \"\"\"\n def render_hook(view_or_element, event, value \\\\ %{})\n\n def render_hook(%Element{} = element, event, value) do\n render_event(%{element | event: to_string(event)}, :hook, value)\n end\n\n def render_hook(view, event, value) do\n render_event(view, :hook, event, value)\n end\n\n defp render_event(%Element{} = element, type, value) when is_map(value) or is_list(value) do\n call(element, {:render_event, element, type, value})\n end\n\n defp render_event(%View{} = view, type, event, value) when is_map(value) or is_list(value) do\n call(view, {:render_event, {proxy_topic(view), to_string(event), view.target}, type, value})\n end\n\n @doc \"\"\"\n Awaits all current `assign_async`, `stream_async` and `start_async` tasks\n for a given LiveView or element.\n\n It renders the LiveView or Element once complete and returns the result.\n The default `timeout` is [ExUnit](https://hexdocs.pm/ex_unit/ExUnit.html#configure/1)'s\n `assert_receive_timeout` (100 ms).\n\n ## Examples\n\n {:ok, lv, html} = live(conn, \"/path\")\n assert html =~ \"loading data...\"\n assert render_async(lv) =~ \"data loaded!\"\n \"\"\"\n def render_async(\n view_or_element,\n timeout \\\\ Application.fetch_env!(:ex_unit, :assert_receive_timeout)\n ) do\n pids =\n case view_or_element do\n %View{} = view -> call(view, {:async_pids, {proxy_topic(view), nil, nil}})\n %Element{} = element -> call(element, {:async_pids, element})\n end\n\n timeout_ref = make_ref()\n Process.send_after(self(), {timeout_ref, :timeout}, timeout)\n\n pids\n |> Enum.map(&Process.monitor(&1))\n |> Enum.each(fn ref ->\n receive do\n {^timeout_ref, :timeout} ->\n raise RuntimeError, \"expected async processes to finish within #{timeout}ms\"\n\n {:DOWN, ^ref, :process, _pid, _reason} ->\n :ok\n end\n end)\n\n if !Process.cancel_timer(timeout_ref) do\n receive do\n {^timeout_ref, :timeout} -> :noop\n after\n 0 -> :noop\n end\n end\n\n render(view_or_element)\n end\n\n @doc \"\"\"\n Simulates a `push_patch` to the given `path` and returns the rendered result.\n \"\"\"\n def render_patch(%View{} = view, path) when is_binary(path) do\n call(view, {:render_patch, proxy_topic(view), path})\n end\n\n @doc \"\"\"\n Returns the current list of LiveView children for the `parent` LiveView.\n\n Children are returned in the order they appear in the rendered HTML.\n\n ## Examples\n\n {:ok, view, _html} = live(conn, \"/thermo\")\n assert [clock_view] = live_children(view)\n assert render_click(clock_view, :snooze) =~ \"snoozing\"\n \"\"\"\n def live_children(%View{} = parent) do\n call(parent, {:live_children, proxy_topic(parent)})\n end\n\n @doc \"\"\"\n Gets the nested LiveView child by `child_id` from the `parent` LiveView.\n\n ## Examples\n\n {:ok, view, _html} = live(conn, \"/thermo\")\n assert clock_view = find_live_child(view, \"clock\")\n assert render_click(clock_view, :snooze) =~ \"snoozing\"\n \"\"\"\n def find_live_child(%View{} = parent, child_id) do\n parent\n |> live_children()\n |> Enum.find(fn %View{id: id} -> id == child_id end)\n end\n\n @doc \"\"\"\n Checks if the given element exists on the page.\n\n ## Examples\n\n assert view |> element(\"#some-element\") |> has_element?()\n\n \"\"\"\n def has_element?(%Element{} = element) do\n call(element, {:render_element, :has_element?, element})\n end\n\n defguardp is_text_filter(text_filter)\n when is_binary(text_filter) or is_struct(text_filter, Regex) or is_nil(text_filter)\n\n @doc \"\"\"\n Checks if the given `selector` with `text_filter` is on `view`.\n\n See `element/3` for more information.\n\n ## Examples\n\n assert has_element?(view, \"#some-element\")\n\n \"\"\"\n def has_element?(%View{} = view, selector, text_filter \\\\ nil)\n when is_binary(selector) and is_text_filter(text_filter) do\n has_element?(element(view, selector, text_filter))\n end\n\n @doc \"\"\"\n Returns the HTML string of the rendered view or element.\n\n If a view is provided, the entire LiveView is rendered.\n If a view after calling `with_target/2` or an element\n are given, only that particular context is returned.\n\n ## Examples\n\n {:ok, view, _html} = live(conn, \"/thermo\")\n assert render(view) =~ ~s|\n <% end %>\n ```\n\n def handle_event(\"cancel-upload\", %{\"ref\" => ref}, socket) do\n {:noreply, cancel_upload(socket, :avatar, ref)}\n end\n \"\"\"\n defdelegate cancel_upload(socket, name, entry_ref), to: Phoenix.LiveView.Upload\n\n @doc \"\"\"\n Returns the completed and in progress entries for the upload.\n\n ## Examples\n\n case uploaded_entries(socket, :photos) do\n {[_ | _] = completed, []} ->\n # all entries are completed\n\n {[], [_ | _] = in_progress} ->\n # all entries are still in progress\n end\n \"\"\"\n defdelegate uploaded_entries(socket, name), to: Phoenix.LiveView.Upload\n\n @doc ~S\"\"\"\n Consumes the uploaded entries.\n\n Raises when there are still entries in progress.\n Typically called when submitting a form to handle the\n uploaded entries alongside the form data. For form submissions,\n it is guaranteed that all entries have completed before the submit event\n is invoked. Once entries are consumed, they are removed from the upload.\n\n The function passed to consume may return a tagged tuple of the form\n `{:ok, my_result}` to collect results about the consumed entries, or\n `{:postpone, my_result}` to collect results, but postpone the file\n consumption to be performed later.\n\n A list of all `my_result` values produced by the passed function is\n returned, regardless of whether they were consumed or postponed.\n\n ## Examples\n\n def handle_event(\"save\", _params, socket) do\n uploaded_files =\n consume_uploaded_entries(socket, :avatar, fn %{path: path}, _entry ->\n dest = Path.join(\"priv/static/uploads\", Path.basename(path))\n File.cp!(path, dest)\n {:ok, ~p\"/uploads/#{Path.basename(dest)}\"}\n end)\n {:noreply, update(socket, :uploaded_files, &(&1 ++ uploaded_files))}\n end\n \"\"\"\n defdelegate consume_uploaded_entries(socket, name, func), to: Phoenix.LiveView.Upload\n\n @doc ~S\"\"\"\n Consumes an individual uploaded entry.\n\n Raises when the entry is still in progress.\n Typically called when submitting a form to handle the\n uploaded entries alongside the form data. Once entries are consumed,\n they are removed from the upload.\n\n This is a lower-level feature than `consume_uploaded_entries/3` and useful\n for scenarios where you want to consume entries as they are individually completed.\n\n Like `consume_uploaded_entries/3`, the function passed to consume may return\n a tagged tuple of the form `{:ok, my_result}` to collect results about the\n consumed entries, or `{:postpone, my_result}` to collect results,\n but postpone the file consumption to be performed later.\n\n ## Examples\n\n def handle_event(\"save\", _params, socket) do\n case uploaded_entries(socket, :avatar) do\n {[_|_] = entries, []} ->\n uploaded_files = for entry <- entries do\n consume_uploaded_entry(socket, entry, fn %{path: path} ->\n dest = Path.join(\"priv/static/uploads\", Path.basename(path))\n File.cp!(path, dest)\n {:ok, ~p\"/uploads/#{Path.basename(dest)}\"}\n end)\n end\n {:noreply, update(socket, :uploaded_files, &(&1 ++ uploaded_files))}\n\n _ ->\n {:noreply, socket}\n end\n end\n \"\"\"\n defdelegate consume_uploaded_entry(socket, entry, func), to: Phoenix.LiveView.Upload\n\n @doc \"\"\"\n Annotates the socket for redirect to a destination path.\n\n *Note*: LiveView redirects rely on instructing client\n to perform a `window.location` update on the provided\n redirect location. The whole page will be reloaded and\n all state will be discarded.\n\n Calling redirect shuts down the LiveView channel. If you need\n to programatically open an external link without causing the\n LiveView to shut down, for example because of `mailto:` or `tel:`\n URL schemes, consider using `push_event/3` with a custom client-side\n handler instead.\n\n ## Options\n\n * `:to` - the path to redirect to. It must always be a local path\n * `:status` - the HTTP status code to use for the redirect. Defaults to 302.\n * `:external` - an external path to redirect to. Either a string\n or `{scheme, url}` to redirect to a custom scheme\n\n ## Examples\n\n {:noreply, redirect(socket, to: \"/\")}\n {:noreply, redirect(socket, to: \"/\", status: 301)}\n {:noreply, redirect(socket, external: \"https://example.com\")}\n\n \"\"\"\n def redirect(socket, opts \\\\ []) do\n status = Keyword.get(opts, :status, 302)\n\n cond do\n Keyword.has_key?(opts, :to) ->\n do_internal_redirect(socket, Keyword.fetch!(opts, :to), status)\n\n Keyword.has_key?(opts, :external) ->\n do_external_redirect(socket, Keyword.fetch!(opts, :external), status)\n\n true ->\n raise ArgumentError, \"expected :to or :external option in redirect/2\"\n end\n end\n\n defp do_internal_redirect(%Socket{} = socket, url, redirect_status) do\n validate_local_url!(url, \"redirect/2\")\n\n put_redirect(socket, {:redirect, %{to: url, status: redirect_status}})\n end\n\n defp do_external_redirect(%Socket{} = socket, url, redirect_status) do\n case url do\n {scheme, rest} ->\n put_redirect(\n socket,\n {:redirect, %{external: \"#{scheme}:#{rest}\", status: redirect_status}}\n )\n\n url when is_binary(url) ->\n external_url = Phoenix.LiveView.Utils.valid_string_destination!(url, \"redirect/2\")\n\n put_redirect(\n socket,\n {:redirect, %{external: external_url, status: redirect_status}}\n )\n\n other ->\n raise ArgumentError,\n \"expected :external option in redirect/2 to be valid URL, got: #{inspect(other)}\"\n end\n end\n\n @doc \"\"\"\n Annotates the socket for navigation within the current LiveView.\n\n When navigating to the current LiveView, `c:handle_params/3` is\n immediately invoked to handle the change of params and URL state.\n Then the new state is pushed to the client, without reloading the\n whole page while also maintaining the current scroll position.\n For live navigation to another LiveView in the same `live_session`,\n use `push_navigate/2`. Otherwise, use `redirect/2`.\n\n ## Options\n\n * `:to` - the required path to link to. It must always be a local path\n * `:replace` - the flag to replace the current history or push a new state.\n Defaults `false`.\n\n ## Examples\n\n {:noreply, push_patch(socket, to: \"/\")}\n {:noreply, push_patch(socket, to: \"/\", replace: true)}\n\n \"\"\"\n def push_patch(%Socket{} = socket, opts) do\n opts = push_opts!(opts, \"push_patch/2\")\n put_redirect(socket, {:live, :patch, opts})\n end\n\n @doc \"\"\"\n Annotates the socket for navigation to another LiveView in the same `live_session`.\n\n The current LiveView will be shutdown and a new one will be mounted\n in its place, without reloading the whole page. This can\n also be used to remount the same LiveView, in case you want to start\n fresh. If you want to navigate to the same LiveView without remounting\n it, use `push_patch/2` instead.\n\n ## Options\n\n * `:to` - the required path to link to. It must always be a local path\n * `:replace` - the flag to replace the current history or push a new state.\n Defaults `false`.\n\n ## Examples\n\n {:noreply, push_navigate(socket, to: \"/\")}\n {:noreply, push_navigate(socket, to: \"/\", replace: true)}\n\n \"\"\"\n def push_navigate(%Socket{} = socket, opts) do\n opts = push_opts!(opts, \"push_navigate/2\")\n put_redirect(socket, {:live, :redirect, opts})\n end\n\n @doc false\n @deprecated \"Use push_navigate/2 instead\"\n def push_redirect(%Socket{} = socket, opts) do\n opts = push_opts!(opts, \"push_redirect/2\")\n put_redirect(socket, {:live, :redirect, opts})\n end\n\n defp push_opts!(opts, context) do\n to = Keyword.fetch!(opts, :to)\n validate_local_url!(to, context)\n kind = if opts[:replace], do: :replace, else: :push\n %{to: to, kind: kind}\n end\n\n defp put_redirect(%Socket{redirected: nil} = socket, command) do\n %{socket | redirected: command}\n end\n\n defp put_redirect(%Socket{redirected: to} = _socket, _command) do\n raise ArgumentError, \"socket already prepared to redirect with #{inspect(to)}\"\n end\n\n @invalid_local_url_chars [\"\\\\\"]\n\n defp validate_local_url!(\"//\" <> _ = to, where) do\n raise_invalid_local_url!(to, where)\n end\n\n defp validate_local_url!(\"/\" <> _ = to, where) do\n if String.contains?(to, @invalid_local_url_chars) do\n raise ArgumentError, \"unsafe characters detected for #{where} in URL #{inspect(to)}\"\n else\n to\n end\n end\n\n defp validate_local_url!(to, where) do\n raise_invalid_local_url!(to, where)\n end\n\n defp raise_invalid_local_url!(to, where) do\n raise ArgumentError, \"the :to option in #{where} expects a path but was #{inspect(to)}\"\n end\n\n @doc \"\"\"\n Accesses the connect params sent by the client for use on connected mount.\n\n Connect params are sent from the client on every connection and reconnection.\n The parameters in the client can be computed dynamically, allowing you to pass\n client state to the server. For example, you could use it to compute and pass\n the user time zone from a JavaScript client:\n\n ```javascript\n let liveSocket = new LiveSocket(\"/live\", Socket, {\n longPollFallbackMs: 2500,\n params: (_liveViewName) => {\n return {\n _csrf_token: csrfToken,\n time_zone: Intl.DateTimeFormat().resolvedOptions().timeZone\n }\n }\n })\n ```\n\n By computing the parameters with a function, reconnections will reevalute\n the code, allowing you to fetch the latest data.\n\n On the LiveView, you will use `get_connect_params/1` to read the data,\n which only remains available during mount. `nil` is returned when called\n in a disconnected state and a `RuntimeError` is raised if called after\n mount.\n\n ## Reserved params\n\n The following params have special meaning in LiveView:\n\n * `\"_csrf_token\"` - the CSRF Token which must be explicitly set by the user\n when connecting\n * `\"_mounts\"` - the number of times the current LiveView is mounted.\n It is 0 on first mount, then increases on each reconnect. It resets\n when navigating away from the current LiveView or on errors\n * `\"_track_static\"` - set automatically with a list of all href/src from\n tags with the `phx-track-static` annotation in them. If there are no\n such tags, nothing is sent\n * `\"_live_referer\"` - sent by the client as the referer URL when a\n live navigation has occurred from `push_navigate` or client link navigate.\n\n ## Examples\n\n def mount(_params, _session, socket) do\n {:ok, assign(socket, width: get_connect_params(socket)[\"width\"] || @width)}\n end\n \"\"\"\n def get_connect_params(%Socket{private: private} = socket) do\n if connect_params = private[:connect_params] do\n if connected?(socket), do: connect_params, else: nil\n else\n raise_root_and_mount_only!(socket, \"connect_params\")\n end\n end\n\n @doc \"\"\"\n Accesses a given connect info key from the socket.\n\n The following keys are supported: `:peer_data`, `:trace_context_headers`,\n `:x_headers`, `:uri`, and `:user_agent`.\n\n The connect information is available only during mount. During disconnected\n render, all keys are available. On connected render, only the keys explicitly\n declared in your socket are available. See `Phoenix.Endpoint.socket/3` for\n a complete description of the keys.\n\n ## Examples\n\n The first step is to declare the `connect_info` you want to receive.\n Typically, it includes at least the session, but you must include all\n other keys you want to access on connected mount, such as `:peer_data`:\n\n socket \"/live\", Phoenix.LiveView.Socket,\n websocket: [connect_info: [:peer_data, session: @session_options]]\n\n Those values can now be accessed on the connected mount as\n `get_connect_info/2`:\n\n def mount(_params, _session, socket) do\n peer_data = get_connect_info(socket, :peer_data)\n {:ok, assign(socket, ip: peer_data.address)}\n end\n\n If the key is not available, usually because it was not specified\n in `connect_info`, it returns nil.\n \"\"\"\n def get_connect_info(%Socket{private: private} = socket, key) when is_atom(key) do\n if connect_info = private[:connect_info] do\n case connect_info do\n %Plug.Conn{} -> conn_connect_info(connect_info, key)\n %{} -> connect_info[key]\n end\n else\n raise_root_and_mount_only!(socket, \"connect_info\")\n end\n end\n\n defp conn_connect_info(conn, :peer_data) do\n Plug.Conn.get_peer_data(conn)\n end\n\n defp conn_connect_info(conn, :x_headers) do\n for {header, _} = pair <- conn.req_headers,\n String.starts_with?(header, \"x-\"),\n do: pair\n end\n\n defp conn_connect_info(conn, :trace_context_headers) do\n for {header, _} = pair <- conn.req_headers,\n header in [\"traceparent\", \"tracestate\"],\n do: pair\n end\n\n defp conn_connect_info(conn, :uri) do\n %URI{\n scheme: to_string(conn.scheme),\n query: conn.query_string,\n port: conn.port,\n host: conn.host,\n path: conn.request_path\n }\n end\n\n defp conn_connect_info(conn, :user_agent) do\n with {_, value} <- List.keyfind(conn.req_headers, \"user-agent\", 0) do\n value\n end\n end\n\n @doc \"\"\"\n Returns true if the socket is connected and the tracked static assets have changed.\n\n This function is useful to detect if the client is running on an outdated\n version of the marked static files. It works by comparing the static paths\n sent by the client with the one on the server.\n\n **Note:** this functionality requires Phoenix v1.5.2 or later.\n\n To use this functionality, the first step is to annotate which static files\n you want to be tracked by LiveView, with the `phx-track-static`. For example:\n\n ```heex\n \n \n ```\n\n Now, whenever LiveView connects to the server, it will send a copy `src`\n or `href` attributes of all tracked statics and compare those values with\n the latest entries computed by `mix phx.digest` in the server.\n\n The tracked statics on the client will match the ones on the server the\n huge majority of times. However, if there is a new deployment, those values\n may differ. You can use this function to detect those cases and show a\n banner to the user, asking them to reload the page. To do so, first set the\n assign on mount:\n\n def mount(params, session, socket) do\n {:ok, assign(socket, static_changed?: static_changed?(socket))}\n end\n\n And then in your views:\n\n ```heex\n
\n The app has been updated. Click here to reload.\n
\n ```\n\n For larger projects, you can extract this into [a hook](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#on_mount/1):\n\n # MyAppWeb.CheckStaticChanged\n def on_mount(:default, _params, _session, socket) do\n {:cont, assign(socket, static_changed?: static_changed?(socket))}\n end\n\n And then add it to the existing `live_view` macro in your `my_app_web.ex` file or add it as part\n of your `live_session` hooks.\n If you prefer, you can also send a JavaScript script that immediately\n reloads the page, but this will cause the client-side to lose all work in progress.\n\n **Note:** only set `phx-track-static` on your own assets. For example, do\n not set it in external JavaScript files:\n\n ```heex\n \n ```\n\n Because you don't actually serve the file above, LiveView will interpret\n the static above as missing, and this function will return true.\n \"\"\"\n def static_changed?(%Socket{private: private, endpoint: endpoint} = socket) do\n if connect_params = private[:connect_params] do\n connected?(socket) and\n static_changed?(\n connect_params[\"_track_static\"],\n endpoint.config(:cache_static_manifest_latest)\n )\n else\n raise_root_and_mount_only!(socket, \"static_changed?\")\n end\n end\n\n defp static_changed?([_ | _] = statics, %{} = latest) do\n latest = Map.to_list(latest)\n\n not Enum.all?(statics, fn static ->\n [static | _] = :binary.split(static, \"?\")\n\n Enum.any?(latest, fn {non_digested, digested} ->\n String.ends_with?(static, non_digested) or String.ends_with?(static, digested)\n end)\n end)\n end\n\n defp static_changed?(_, _), do: false\n\n defp raise_root_and_mount_only!(socket, fun) do\n if child?(socket) do\n raise RuntimeError, \"\"\"\n attempted to read #{fun} from a nested child LiveView #{inspect(socket.view)}.\n\n Only the root LiveView has access to #{fun}.\n \"\"\"\n else\n raise RuntimeError, \"\"\"\n attempted to read #{fun} outside of #{inspect(socket.view)}.mount/3.\n\n #{fun} only exists while mounting. If you require access to this information\n after mount, store the state in socket assigns.\n \"\"\"\n end\n end\n\n @doc ~S'''\n Asynchronously updates a `Phoenix.LiveComponent` with new assigns.\n\n The `pid` argument is optional and it defaults to the current process,\n which means the update instruction will be sent to a component running\n on the same LiveView. If the current process is not a LiveView or you\n want to send updates to a live component running on another LiveView,\n you should explicitly pass the LiveView's pid instead.\n\n The second argument can be either the value of the `@myself` or the module of\n the live component. If you pass the module, then the `:id` that identifies\n the component must be passed as part of the assigns.\n\n When the component receives the update,\n [`update_many/1`](`c:Phoenix.LiveComponent.update_many/1`) will be invoked if\n it is defined, otherwise [`update/2`](`c:Phoenix.LiveComponent.update/2`) is\n invoked with the new assigns. If\n [`update/2`](`c:Phoenix.LiveComponent.update/2`) is not defined all assigns\n are simply merged into the socket. The assigns received as the first argument\n of the [`update/2`](`c:Phoenix.LiveComponent.update/2`) callback will only\n include the _new_ assigns passed from this function. Pre-existing assigns may\n be found in `socket.assigns`.\n\n While a component may always be updated from the parent by updating some\n parent assigns which will re-render the child, thus invoking\n [`update/2`](`c:Phoenix.LiveComponent.update/2`) on the child component,\n `send_update/3` is useful for updating a component that entirely manages its\n own state, as well as messaging between components mounted in the same\n LiveView.\n\n ## Examples\n\n def handle_event(\"cancel-order\", _, socket) do\n ...\n send_update(Cart, id: \"cart\", status: \"cancelled\")\n {:noreply, socket}\n end\n\n def handle_event(\"cancel-order-asynchronously\", _, socket) do\n ...\n pid = self()\n\n Task.Supervisor.start_child(MyTaskSup, fn ->\n # Do something asynchronously\n send_update(pid, Cart, id: \"cart\", status: \"cancelled\")\n end)\n\n {:noreply, socket}\n end\n\n def render(assigns) do\n ~H\"\"\"\n <.some_component on_complete={&send_update(@myself, completed: &1)} />\n \"\"\"\n end\n '''\n def send_update(pid \\\\ self(), module_or_cid, assigns)\n\n def send_update(pid, module, assigns) when is_atom(module) and is_pid(pid) do\n assigns = Enum.into(assigns, %{})\n\n id =\n assigns[:id] ||\n raise ArgumentError, \"missing required :id in send_update. Got: #{inspect(assigns)}\"\n\n Phoenix.LiveView.Channel.send_update(pid, {module, id}, assigns)\n end\n\n def send_update(pid, %Phoenix.LiveComponent.CID{} = cid, assigns) when is_pid(pid) do\n assigns = Enum.into(assigns, %{})\n\n Phoenix.LiveView.Channel.send_update(pid, cid, assigns)\n end\n\n @doc \"\"\"\n Similar to `send_update/3` but the update will be delayed according to the given `time_in_milliseconds`.\n\n It returns a reference which can be cancelled with `Process.cancel_timer/1`.\n\n ## Examples\n\n def handle_event(\"cancel-order\", _, socket) do\n ...\n send_update_after(Cart, [id: \"cart\", status: \"cancelled\"], 3000)\n {:noreply, socket}\n end\n\n def handle_event(\"cancel-order-asynchronously\", _, socket) do\n ...\n pid = self()\n\n Task.start(fn ->\n # Do something asynchronously\n send_update_after(pid, Cart, [id: \"cart\", status: \"cancelled\"], 3000)\n end)\n\n {:noreply, socket}\n end\n \"\"\"\n def send_update_after(pid \\\\ self(), module_or_cid, assigns, time_in_milliseconds)\n\n def send_update_after(pid, %Phoenix.LiveComponent.CID{} = cid, assigns, time_in_milliseconds)\n when is_integer(time_in_milliseconds) and is_pid(pid) do\n assigns = Enum.into(assigns, %{})\n\n Phoenix.LiveView.Channel.send_update_after(pid, cid, assigns, time_in_milliseconds)\n end\n\n def send_update_after(pid, module, assigns, time_in_milliseconds)\n when is_atom(module) and is_integer(time_in_milliseconds) and is_pid(pid) do\n assigns = Enum.into(assigns, %{})\n\n id =\n assigns[:id] ||\n raise ArgumentError, \"missing required :id in send_update_after. Got: #{inspect(assigns)}\"\n\n Phoenix.LiveView.Channel.send_update_after(pid, {module, id}, assigns, time_in_milliseconds)\n end\n\n @doc \"\"\"\n Returns the transport pid of the socket.\n\n Raises `ArgumentError` if the socket is not connected.\n\n ## Examples\n\n iex> transport_pid(socket)\n #PID<0.107.0>\n \"\"\"\n def transport_pid(%Socket{}) do\n case Process.get(:\"$callers\") do\n [transport_pid | _] -> transport_pid\n _ -> raise ArgumentError, \"transport_pid/1 may only be called when the socket is connected.\"\n end\n end\n\n defp child?(%Socket{parent_pid: pid}), do: is_pid(pid)\n\n @doc \"\"\"\n Attaches the given `fun` by `name` for the lifecycle `stage` into `socket`.\n\n > Note: This function is for server-side lifecycle callbacks.\n > For client-side hooks, see the\n > [JS Interop guide](js-interop.html#client-hooks-via-phx-hook).\n\n Hooks provide a mechanism to tap into key stages of the LiveView\n lifecycle in order to bind/update assigns, intercept events,\n patches, and regular messages when necessary, and to inject\n common functionality. Use `attach_hook/4` on any of the following\n lifecycle stages: `:handle_params`, `:handle_event`, `:handle_info`, `:handle_async`, and\n `:after_render`. To attach a hook to the `:mount` stage, use `on_mount/1`.\n\n > Note: only `:after_render`, `:handle_event` and `:handle_async` hooks are currently supported in\n > LiveComponents.\n\n ## Return Values\n\n Lifecycle hooks take place immediately before a given lifecycle\n callback is invoked on the LiveView. With the exception of `:after_render`,\n a hook may return `{:halt, socket}` to halt the reduction, otherwise\n it must return `{:cont, socket}` so the operation may continue until\n all hooks have been invoked for the current stage.\n\n For `:after_render` hooks, the `socket` itself must be returned.\n Any updates to the socket assigns *will not* trigger a new render\n or diff calculation to the client.\n\n ## Halting the lifecycle\n\n Note that halting from a hook _will halt the entire lifecycle stage_.\n This means that when a hook returns `{:halt, socket}` then the\n LiveView callback will **not** be invoked. This has some\n implications.\n\n ### Implications for plugin authors\n\n When defining a plugin that matches on specific callbacks, you **must**\n define a catch-all clause, as your hook will be invoked even for events\n you may not be interested in.\n\n ### Implications for end-users\n\n Allowing a hook to halt the invocation of the callback means that you can\n attach hooks to intercept specific events before detaching themselves,\n while allowing other events to continue normally.\n\n ## Replying to events\n\n Hooks attached to the `:handle_event` stage are able to reply to client events\n by returning `{:halt, reply, socket}`. This is useful especially for [JavaScript\n interoperability](js-interop.html#client-hooks-via-phx-hook) because a client hook\n can push an event and receive a reply.\n\n ## Sharing event handling logic\n\n Lifecycle hooks are an excellent way to extract related events out of the parent LiveView and\n into separate modules without resorting unnecessarily to LiveComponents for organization.\n\n defmodule DemoLive do\n use Phoenix.LiveView\n\n def render(assigns) do\n ~H\\\"\"\"\n
\n
\n Counter: {@counter}\n \n
\n\n \n
\n \\\"\"\"\n end\n\n def mount(_params, _session, socket) do\n first_list = for(i <- 1..9, do: \"First List \\#{i}\") |> Enum.shuffle()\n second_list = for(i <- 1..9, do: \"Second List \\#{i}\") |> Enum.shuffle()\n\n socket =\n socket\n |> assign(:counter, 0)\n |> assign(first_list: first_list)\n |> assign(second_list: second_list)\n |> attach_hook(:sort, :handle_event, &MySortComponent.hooked_event/3) # 2) Delegated events\n {:ok, socket}\n end\n\n # 1) Normal event\n def handle_event(\"inc\", _params, socket) do\n {:noreply, update(socket, :counter, &(&1 + 1))}\n end\n end\n\n defmodule MySortComponent do\n use Phoenix.Component\n\n def display(assigns) do\n ~H\\\"\"\"\n
\n
  • {item}
\n \n \n
\n \\\"\"\"\n end\n\n def hooked_event(\"shuffle\", %{\"list\" => key}, socket) do\n key = String.to_existing_atom(key)\n shuffled = Enum.shuffle(socket.assigns[key])\n\n {:halt, assign(socket, key, shuffled)}\n end\n\n def hooked_event(\"sort\", %{\"list\" => key}, socket) do\n key = String.to_existing_atom(key)\n sorted = Enum.sort(socket.assigns[key])\n\n {:halt, assign(socket, key, sorted)}\n end\n\n def hooked_event(_event, _params, socket), do: {:cont, socket}\n end\n\n ## Other examples\n\n Attaching and detaching a hook:\n\n def mount(_params, _session, socket) do\n socket =\n attach_hook(socket, :my_hook, :handle_event, fn\n \"very-special-event\", _params, socket ->\n # Handle the very special event and then detach the hook\n {:halt, detach_hook(socket, :my_hook, :handle_event)}\n\n _event, _params, socket ->\n {:cont, socket}\n end)\n\n {:ok, socket}\n end\n\n Replying to a client event:\n\n ```javascript\n /**\n * @type {import(\"phoenix_live_view\").HooksOption}\n */\n let Hooks = {}\n Hooks.ClientHook = {\n mounted() {\n this.pushEvent(\"ClientHook:mounted\", {hello: \"world\"}, (reply) => {\n console.log(\"received reply:\", reply)\n })\n }\n }\n let liveSocket = new LiveSocket(\"/live\", Socket, {hooks: Hooks, ...})\n ```\n\n def render(assigns) do\n ~H\"\\\"\"\n
\n \"\\\"\"\n end\n\n def mount(_params, _session, socket) do\n socket =\n attach_hook(socket, :reply_on_client_hook_mounted, :handle_event, fn\n \"ClientHook:mounted\", params, socket ->\n {:halt, params, socket}\n\n _, _, socket ->\n {:cont, socket}\n end)\n\n {:ok, socket}\n end\n \"\"\"\n defdelegate attach_hook(socket, name, stage, fun), to: Phoenix.LiveView.Lifecycle\n\n @doc \"\"\"\n Detaches a hook with the given `name` from the lifecycle `stage`.\n\n > Note: This function is for server-side lifecycle callbacks.\n > For client-side hooks, see the\n > [JS Interop guide](js-interop.html#client-hooks-via-phx-hook).\n\n If no hook is found, this function is a no-op.\n\n ## Examples\n\n def handle_event(_, socket) do\n {:noreply, detach_hook(socket, :hook_that_was_attached, :handle_event)}\n end\n \"\"\"\n defdelegate detach_hook(socket, name, stage), to: Phoenix.LiveView.Lifecycle\n\n @doc ~S\"\"\"\n Assigns a new stream to the socket or inserts items into an existing stream.\n Returns an updated `socket`.\n\n Streams are a mechanism for managing large collections on the client without\n keeping the resources on the server.\n\n * `name` - A string or atom name of the key to place under the\n `@streams` assign.\n * `items` - An enumerable of items to insert.\n\n The following options are supported:\n\n * `:at` - The index to insert or update the items in the\n collection on the client. By default `-1` is used, which appends the items\n to the parent DOM container. A value of `0` prepends the items.\n\n Note that this operation is equal to inserting the items one by one, each at\n the given index. Therefore, when inserting multiple items at an index other than `-1`,\n the UI will display the items in reverse order:\n\n stream(socket, :songs, [song1, song2, song3], at: 0)\n\n In this case the UI will prepend `song1`, then `song2` and then `song3`, so it will show\n `song3`, `song2`, `song1` and then any previously inserted items.\n\n To insert in the order of the list, use `Enum.reverse/1`:\n\n stream(socket, :songs, Enum.reverse([song1, song2, song3]), at: 0)\n\n * `:reset` - A boolean to reset the stream on the client or not. Defaults\n to `false`.\n\n * `:limit` - An optional positive or negative number of results to limit\n on the UI on the client. As new items are streamed, the UI will remove existing\n items to maintain the limit. For example, to limit the stream to the last 10 items\n in the UI while appending new items, pass a negative value:\n\n stream(socket, :songs, songs, at: -1, limit: -10)\n\n Likewise, to limit the stream to the first 10 items, while prepending new items,\n pass a positive value:\n\n stream(socket, :songs, songs, at: 0, limit: 10)\n\n Once a stream is defined, a new `@streams` assign is available containing\n the name of the defined streams. For example, in the above definition, the\n stream may be referenced as `@streams.songs` in your template. Stream items\n are temporary and freed from socket state immediately after the `render/1`\n function is invoked (or a template is rendered from disk).\n\n By default, calling `stream/4` on an existing stream will bulk insert the new items\n on the client while leaving the existing items in place. Streams may also be reset\n when calling `stream/4`, which we discuss below.\n\n ## Resetting a stream\n\n To empty a stream container on the client, you can pass `:reset` with an empty list:\n\n stream(socket, :songs, [], reset: true)\n\n Or you can replace the entire stream on the client with a new collection:\n\n stream(socket, :songs, new_songs, reset: true)\n\n ## Limiting a stream\n\n It is often useful to limit the number of items in the UI while allowing the\n server to stream new items in a fire-and-forget fashion. This prevents\n the server from overwhelming the client with new results while also opening up\n powerful features like virtualized infinite scrolling. See a complete\n bidirectional infinite scrolling example with stream limits in the\n [scroll events guide](bindings.md#scroll-events-and-infinite-pagination)\n\n When a stream exceeds the limit on the client, the existing items will be pruned\n based on the number of items in the stream container and the limit direction. A\n positive limit will prune items from the end of the container, while a negative\n limit will prune items from the beginning of the container.\n\n Note that the limit is not enforced on the first `c:mount/3` render (when no websocket\n connection was established yet), as it means more data than necessary has been\n loaded. In such cases, you should only load and pass the desired amount of items\n to the stream.\n\n When inserting single items using `stream_insert/4`, the limit needs to be passed\n as an option for it to be enforced on the client:\n\n stream_insert(socket, :songs, song, limit: -10)\n\n ## Required DOM attributes\n\n For stream items to be trackable on the client, the following requirements\n must be met:\n\n 1. The parent DOM container must include a `phx-update=\"stream\"` attribute,\n along with a unique DOM id.\n 2. Each stream item must include its DOM id on the item's element.\n\n > #### Note {: .warning}\n >\n > Failing to place `phx-update=\"stream\"` on the **immediate parent** for\n > **each stream** will result in broken behavior.\n >\n > Also, do not alter the generated DOM ids, e.g., by prefixing them. Doing so will\n > result in broken behavior.\n\n When consuming a stream in a template, the DOM id and item is passed as a tuple,\n allowing convenient inclusion of the DOM id for each item. For example:\n\n ```heex\n \n \n \n \n \n \n \n
{song.title}{song.duration}
\n ```\n\n We consume the stream in a for comprehension by referencing the\n `@streams.songs` assign. We used the computed DOM id to populate\n the `` id, then we render the table row as usual.\n\n Now `stream_insert/3` and `stream_delete/3` may be issued and new rows will\n be inserted or deleted from the client.\n\n ## Handling the empty case\n\n When rendering a list of items, it is common to show a message for the empty case.\n But when using streams, we cannot rely on `Enum.empty?/1` or similar approaches to\n check if the list is empty. Instead we can use the CSS `:only-child` selector\n and show the message client side:\n\n ```heex\n \n \n \n \n \n \n \n \n \n \n
No songs found
{song.title}{song.duration}
\n ```\n\n It is important to set a unique ID on the empty row, otherwise it cannot be tracked\n in the stream container and subsequent patches will duplicate the node.\n\n ## Non-stream items in stream containers\n\n In the section on handling the empty case, we showed how to render a message when\n the stream is empty by rendering a non-stream item inside the stream container.\n\n Note that for non-stream items inside a `phx-update=\"stream\"` container, the following\n needs to be considered:\n\n 1. Non-stream items must have a unique DOM id.\n\n 2. Items can be added and updated, but not removed, even if the stream is reset.\n\n This means that if you try to conditionally render a non-stream item inside a stream container,\n it won't be removed if it was rendered once.\n\n 3. Items are affected by the `:at` option.\n\n For example, when you render a non-stream item at the beginning of the stream container and then\n prepend items (with `at: 0`) to the stream, the non-stream item will be pushed down.\n\n \"\"\"\n @spec stream(\n socket :: Socket.t(),\n name :: atom | String.t(),\n items :: Enumerable.t(),\n opts :: Keyword.t()\n ) ::\n Socket.t()\n def stream(%Socket{} = socket, name, items, opts \\\\ []) do\n socket\n |> ensure_streams()\n |> assign_stream(name, items, opts)\n end\n\n @doc ~S\"\"\"\n Configures a stream.\n\n The following options are supported:\n\n * `:dom_id` - An optional function to generate each stream item's DOM id.\n The function accepts each stream item and converts the item to a string id.\n By default, the `:id` field of a map or struct will be used if the item has\n such a field, and will be prefixed by the `name` hyphenated with the id.\n For example, the following examples are equivalent:\n\n stream(socket, :songs, songs)\n\n socket\n |> stream_configure(:songs, dom_id: &(\"songs-#{&1.id}\"))\n |> stream(:songs, songs)\n\n A stream must be configured before items are inserted, and once configured,\n a stream may not be re-configured. To ensure a stream is only configured a\n single time in a LiveComponent, use the `mount/1` callback. For example:\n\n def mount(socket) do\n {:ok, stream_configure(socket, :songs, dom_id: &(\"songs-#{&1.id}\"))}\n end\n\n def update(assigns, socket) do\n {:ok, stream(socket, :songs, ...)}\n end\n\n Returns an updated `socket`.\n \"\"\"\n @spec stream_configure(socket :: Socket.t(), name :: atom | String.t(), opts :: Keyword.t()) ::\n Socket.t()\n def stream_configure(%Socket{} = socket, name, opts) when is_list(opts) do\n new_socket = ensure_streams(socket)\n\n case new_socket.assigns.streams do\n %{^name => %LiveStream{}} ->\n raise ArgumentError, \"cannot configure stream :#{name} after it has been streamed\"\n\n %{__configured__: %{^name => _opts}} ->\n raise ArgumentError, \"cannot re-configure stream :#{name} after it has been configured\"\n\n %{} ->\n Phoenix.Component.update(new_socket, :streams, fn streams ->\n Map.update!(streams, :__configured__, fn conf -> Map.put(conf, name, opts) end)\n end)\n end\n end\n\n defp ensure_streams(%Socket{} = socket) do\n # don't use assign_new here because we DON'T want to copy parent streams\n # during the dead render of nested or sticky LiveViews\n case socket.assigns do\n %{streams: _} ->\n socket\n\n _ ->\n Phoenix.LiveView.Utils.assign(socket, :streams, %{\n __ref__: 0,\n __changed__: MapSet.new(),\n __configured__: %{}\n })\n end\n end\n\n @doc \"\"\"\n Inserts a new item or updates an existing item in the stream.\n\n Returns an updated `socket`.\n\n See `stream/4` for inserting multiple items at once.\n\n The following options are supported:\n\n * `:at` - The index to insert or update the item in the collection on the client.\n By default, the item is appended to the parent DOM container. This is the same as\n passing a value of `-1`.\n If the item already exists in the parent DOM container then it will be\n updated in place.\n\n * `:limit` - A limit of items to maintain in the UI. A limit passed to `stream/4` does\n not affect subsequent calls to `stream_insert/4`, therefore the limit must be passed\n here as well in order to be enforced. See `stream/4` for more information on\n limiting streams.\n\n * `:update_only` - A boolean to only update the item in the stream. If the item does not\n exist on the client, it will not be inserted. Defaults to `false`.\n\n ## Examples\n\n Imagine you define a stream on mount with a single item:\n\n stream(socket, :songs, [%Song{id: 1, title: \"Song 1\"}])\n\n Then, in a callback such as `handle_info` or `handle_event`, you\n can append a new song:\n\n stream_insert(socket, :songs, %Song{id: 2, title: \"Song 2\"})\n\n Or prepend a new song with `at: 0`:\n\n stream_insert(socket, :songs, %Song{id: 2, title: \"Song 2\"}, at: 0)\n\n Or update an existing song (in this case the `:at` option has no effect):\n\n stream_insert(socket, :songs, %Song{id: 1, title: \"Song 1 updated\"}, at: 0)\n\n Or append a new song while limiting the stream to the last 10 items:\n\n stream_insert(socket, :songs, %Song{id: 2, title: \"Song 2\"}, limit: -10)\n\n ## Updating Items\n\n As shown, an existing item on the client can be updated by issuing a `stream_insert`\n for the existing item. When the client updates an existing item, the item will remain\n in the same location as it was previously, and will not be moved to the end of the\n parent children. To both update an existing item and move it to another position,\n issue a `stream_delete`, followed by a `stream_insert`. For example:\n\n song = get_song!(id)\n\n socket\n |> stream_delete(:songs, song)\n |> stream_insert(:songs, song, at: -1)\n\n See `stream_delete/3` for more information on deleting items.\n \"\"\"\n @spec stream_insert(\n socket :: Socket.t(),\n name :: atom | String.t(),\n item :: any,\n opts :: Keyword.t()\n ) ::\n Socket.t()\n def stream_insert(%Socket{} = socket, name, item, opts \\\\ []) do\n at = Keyword.get(opts, :at, -1)\n limit = Keyword.get(opts, :limit)\n update_only = Keyword.get(opts, :update_only, false)\n\n update_stream(socket, name, &LiveStream.insert_item(&1, item, at, limit, update_only))\n end\n\n @doc \"\"\"\n Deletes an item from the stream.\n\n The item's DOM is computed from the `:dom_id` provided in the `stream/3` definition.\n Delete information for this DOM id is sent to the client and the item's element\n is removed from the DOM, following the same behavior of element removal, such as\n invoking `phx-remove` commands and executing client hook `destroyed()` callbacks.\n\n ## Examples\n\n def handle_event(\"delete\", %{\"id\" => id}, socket) do\n song = get_song!(id)\n {:noreply, stream_delete(socket, :songs, song)}\n end\n\n See `stream_delete_by_dom_id/3` to remove an item without requiring the\n original data structure.\n\n Returns an updated `socket`.\n \"\"\"\n @spec stream_delete(socket :: Socket.t(), name :: atom | String.t(), item :: any) :: Socket.t()\n def stream_delete(%Socket{} = socket, name, item) do\n update_stream(socket, name, &LiveStream.delete_item(&1, item))\n end\n\n @doc ~S'''\n Deletes an item from the stream given its computed DOM id.\n\n Returns an updated `socket`.\n\n Behaves just like `stream_delete/3`, but accept the precomputed DOM id,\n which allows deleting from a stream without fetching or building the original\n stream data structure.\n\n ## Examples\n\n def render(assigns) do\n ~H\"\"\"\n \n \n \n \n \n \n \n
{song.title}
\n \"\"\"\n end\n\n def handle_event(\"delete\", %{\"id\" => dom_id}, socket) do\n {:noreply, stream_delete_by_dom_id(socket, :songs, dom_id)}\n end\n '''\n @spec stream_delete_by_dom_id(socket :: Socket.t(), name :: atom | String.t(), id :: String.t()) ::\n Socket.t()\n def stream_delete_by_dom_id(%Socket{} = socket, name, id) do\n update_stream(socket, name, &LiveStream.delete_item_by_dom_id(&1, id))\n end\n\n defp assign_stream(%Socket{} = socket, name, items, opts) do\n streams = socket.assigns.streams\n\n case streams do\n %{^name => %LiveStream{}} ->\n new_socket =\n if opts[:reset] do\n update_stream(socket, name, &LiveStream.reset(&1))\n else\n socket\n end\n\n Enum.reduce(items, new_socket, fn item, acc -> stream_insert(acc, name, item, opts) end)\n\n %{} ->\n config = get_in(streams, [:__configured__, name]) || []\n opts = Keyword.merge(opts, config)\n\n ref =\n if cid = socket.assigns[:myself] do\n \"#{cid}-#{streams.__ref__}\"\n else\n to_string(streams.__ref__)\n end\n\n stream = LiveStream.new(name, ref, items, opts)\n\n socket\n |> Phoenix.Component.update(:streams, fn streams ->\n %{streams | __ref__: streams.__ref__ + 1}\n |> Map.put(name, stream)\n |> Map.update!(:__changed__, &MapSet.put(&1, name))\n end)\n |> attach_hook(name, :after_render, fn hook_socket ->\n if name in hook_socket.assigns.streams.__changed__ do\n Phoenix.Component.update(hook_socket, :streams, fn streams ->\n streams\n |> Map.update!(:__changed__, &MapSet.delete(&1, name))\n |> Map.update!(name, &LiveStream.prune(&1))\n end)\n else\n hook_socket\n end\n end)\n end\n end\n\n defp update_stream(%Socket{} = socket, name, func) do\n Phoenix.Component.update(socket, :streams, fn streams ->\n stream =\n case Map.fetch(streams, name) do\n {:ok, stream} -> stream\n :error -> raise ArgumentError, \"no stream with name #{inspect(name)} previously defined\"\n end\n\n streams\n |> Map.put(name, func.(stream))\n |> Map.update!(:__changed__, &MapSet.put(&1, name))\n end)\n end\n\n @doc \"\"\"\n Assigns keys asynchronously.\n\n Wraps your function in a task linked to the caller, errors are wrapped.\n Each key passed to `assign_async/3` will be assigned to\n an `Phoenix.LiveView.AsyncResult` struct holding the status of the operation\n and the result when the function completes.\n\n The function must return either a map or a keyword list with the assigns\n to merge into the socket.\n\n The task is only started when the socket is connected.\n\n ## Options\n\n * `:supervisor` - allows you to specify a `Task.Supervisor` to supervise the task.\n * `:reset` - remove previous results during async operation when true. Possible values are\n `true`, `false`, or a list of keys to reset. Defaults to `false`.\n\n ## Examples\n\n ```elixir\n def mount(%{\"slug\" => slug}, _, socket) do\n {:ok,\n socket\n |> assign(:foo, \"bar\")\n |> assign_async(:org, fn -> {:ok, %{org: fetch_org!(slug)}} end)\n |> assign_async([:profile, :rank], fn -> {:ok, %{profile: ..., rank: ...}} end)}\n end\n ```\n\n See [Async Operations](#module-async-operations) for more information.\n\n ## `assign_async/3` and `send_update/3`\n\n Since the code inside `assign_async/3` runs in a separate process,\n `send_update(Component, data)` does not work inside `assign_async/3`,\n since `send_update/2` assumes it is running inside the LiveView process.\n The solution is to explicitly send the update to the LiveView:\n\n ```elixir\n parent = self()\n assign_async(socket, :org, fn ->\n # ...\n send_update(parent, Component, data)\n end)\n ```\n\n ## Testing async operations\n\n When testing LiveViews and LiveComponents with async assigns, use\n `Phoenix.LiveViewTest.render_async/2` to ensure the test waits until the async operations\n are complete before proceeding with assertions or before ending the test. For example:\n\n ```elixir\n {:ok, view, _html} = live(conn, \"/my_live_view\")\n html = render_async(view)\n assert html =~ \"My assertion\"\n ```\n\n Not calling `render_async/2` to ensure all async assigns have finished might result in errors in\n cases where your process has side effects:\n\n ```\n [error] MyXQL.Connection (#PID<0.308.0>) disconnected: ** (DBConnection.ConnectionError) client #PID<0.794.0>\n ```\n\n \"\"\"\n defmacro assign_async(socket, key_or_keys, func, opts \\\\ []) do\n Async.assign_async(socket, key_or_keys, func, opts, __CALLER__)\n end\n\n @doc \"\"\"\n Wraps your function in an asynchronous task and invokes a callback `name` to\n handle the result.\n\n The task is linked to the caller and errors/exits are wrapped.\n The result of the task is sent to the `c:handle_async/3` callback\n of the caller LiveView or LiveComponent.\n\n If there is an in-flight task with the same `name`, the later `start_async` wins and the previous task’s result is ignored.\n If you wish to replace an existing task, you can use `cancel_async/3` before `start_async/3`.\n You are not restricted to just atoms for `name`, it can be any term such as a tuple.\n\n The task is only started when the socket is connected.\n\n ## Options\n\n * `:supervisor` - allows you to specify a `Task.Supervisor` to supervise the task.\n\n ## Examples\n\n def mount(%{\"id\" => id}, _, socket) do\n {:ok,\n socket\n |> assign(:org, AsyncResult.loading())\n |> start_async(:my_task, fn -> fetch_org!(id) end)}\n end\n\n def handle_async(:my_task, {:ok, fetched_org}, socket) do\n %{org: org} = socket.assigns\n {:noreply, assign(socket, :org, AsyncResult.ok(org, fetched_org))}\n end\n\n def handle_async(:my_task, {:exit, reason}, socket) do\n %{org: org} = socket.assigns\n {:noreply, assign(socket, :org, AsyncResult.failed(org, {:exit, reason}))}\n end\n\n See the moduledoc for more information.\n \"\"\"\n defmacro start_async(socket, name, func, opts \\\\ []) do\n Async.start_async(socket, name, func, opts, __CALLER__)\n end\n\n @doc \"\"\"\n Inserts data into a stream asynchronously.\n\n Wraps your function in a task linked to the caller, errors are wrapped.\n The key passed to `stream_async/3` will be used as the stream name. Furthermore,\n a regular assign with the same name gets assigned a `Phoenix.LiveView.AsyncResult`\n struct holding the status of the operation. The stream is initialized to an empty list\n before starting the asynchronous function, so accessing `@streams.name` is always possible.\n\n The function must return `{:ok, Enumerable.t()}` or `{:ok, Enumerable.t(), opts}`\n where the opts are the same as in `stream/4`. The enumerable contains the values to be streamed.\n\n If the function returns `{:error, any()}`, the `AsyncResult` is assigned as failed and\n the stream is not updated.\n\n The task is only started when the socket is connected.\n\n ## Options\n\n * `:supervisor` - allows you to specify a `Task.Supervisor` to supervise the task.\n * `:reset` - remove previous results during async operation when true. Possible values are\n `true`, `false`, or a list of keys to reset. Defaults to `false`.\n\n ## Examples\n\n def mount(%{\"slug\" => slug}, _, socket) do\n current_scope = socket.assigns.current_scope\n\n {:ok,\n socket\n |> assign(:foo, \"bar\")\n |> assign_async(:org, fn -> {:ok, %{org: fetch_org!(current_scope)}} end)\n |> stream_async(:posts, fn -> {:ok, list_posts!(current_scope), limit: 10} end)\n end\n\n Note the `reset` option controls the async assign, not the stream:\n\n def mount(_, _, socket) do\n {:ok,\n socket\n # IMPORTANT: reset here does NOT reset the stream, but only the loading state\n |> stream_async(:my_stream, fn -> {:ok, list_items!()} end, reset: true)\n # This resets the stream\n |> stream_async(:my_reset_stream, fn -> {:ok, list_items!(), reset: true} end)\n end\n\n Any stream options need to be returned as optional third argument in the return value\n of the asynchronous function.\n\n \"\"\"\n defmacro stream_async(socket, name, func, opts \\\\ []) do\n Async.stream_async(socket, name, func, opts, __CALLER__)\n end\n\n @doc \"\"\"\n Cancels an async operation if one exists.\n\n Accepts either the `%AsyncResult{}` when using `assign_async/3` or\n the key passed to `start_async/3`.\n\n The underlying process will be killed with the provided reason, or\n with `{:shutdown, :cancel}` if no reason is passed. For `assign_async/3`\n operations, the `:failed` field will be set to `{:exit, reason}`.\n For `start_async/3`, the `c:handle_async/3` callback will receive\n `{:exit, reason}` as the result.\n\n Returns the `%Phoenix.LiveView.Socket{}`.\n\n ## Examples\n\n cancel_async(socket, :preview)\n cancel_async(socket, :preview, :my_reason)\n cancel_async(socket, socket.assigns.preview)\n \"\"\"\n def cancel_async(socket, async_or_keys, reason \\\\ {:shutdown, :cancel}) do\n Async.cancel_async(socket, async_or_keys, reason)\n end\nend\n" }, { "path": "lib/prettier.ex", "content": "if Mix.env() == :dev do\n defmodule Prettier do\n @moduledoc false\n\n @behaviour Phoenix.LiveView.HTMLFormatter.TagFormatter\n\n require Logger\n\n @impl true\n def render_tag({\"script\", attrs, content}, _opts)\n when not is_map_key(attrs, \"runtime\") do\n manifest = Map.get(attrs, \"manifest\", \"index.js\")\n\n tmp_file =\n Path.join(System.tmp_dir!(), \"prettier_#{System.unique_integer([:positive])}_#{manifest}\")\n\n try do\n File.write!(tmp_file, content)\n\n case System.cmd(\"npx\", [\"prettier\", tmp_file], stderr_to_stdout: true) do\n {output, 0} ->\n {:ok, String.trim(output)}\n\n {error, _} ->\n Logger.error(\"Failed to format with prettier: #{error}\")\n :skip\n end\n after\n File.rm(tmp_file)\n end\n end\n\n def render_tag({_other, _attrs, _content}, _opts) do\n :skip\n end\n end\nend\n" }, { "path": "mix.exs", "content": "defmodule Phoenix.LiveView.MixProject do\n use Mix.Project\n\n @version \"1.2.0-dev\"\n\n def project do\n [\n app: :phoenix_live_view,\n version: @version,\n elixir: \"~> 1.15\",\n start_permanent: Mix.env() == :prod,\n elixirc_paths: elixirc_paths(Mix.env()),\n test_options: [docs: true],\n test_coverage: [summary: [threshold: 85], ignore_modules: coverage_ignore_modules()],\n xref: [exclude: [LazyHTML, LazyHTML.Tree]],\n package: package(),\n deps: deps(),\n aliases: aliases(),\n docs: &docs/0,\n name: \"Phoenix LiveView\",\n homepage_url: \"http://www.phoenixframework.org\",\n description: \"\"\"\n Rich, real-time user experiences with server-rendered HTML\n \"\"\",\n listeners: [Phoenix.CodeReloader],\n # ignore misnamed test file warnings for e2e support files\n test_ignore_filters: [&String.starts_with?(&1, \"test/e2e/support\")]\n ]\n end\n\n def cli do\n [preferred_envs: [docs: :docs]]\n end\n\n defp elixirc_paths(:e2e), do: [\"lib\", \"test/support\", \"test/e2e/support\"]\n defp elixirc_paths(:test), do: [\"lib\", \"test/support\"]\n defp elixirc_paths(_), do: [\"lib\"]\n\n def application do\n [\n mod: {Phoenix.LiveView.Application, []},\n extra_applications: [:logger]\n ]\n end\n\n defp deps do\n [\n {:igniter, \"~> 0.6 and >= 0.6.16\", optional: true},\n {:phoenix, \"~> 1.6.15 or ~> 1.7.0 or ~> 1.8.0\"},\n {:plug, \"~> 1.15\"},\n {:phoenix_template, \"~> 1.0\"},\n {:phoenix_html, \"~> 3.3 or ~> 4.0 or ~> 4.1\"},\n {:telemetry, \"~> 0.4.2 or ~> 1.0\"},\n {:esbuild, \"~> 0.2\", only: :dev},\n {:phoenix_view, \"~> 2.0\", optional: true},\n {:jason, \"~> 1.0\", optional: true},\n {:lazy_html, \"~> 0.1.0\", optional: true},\n {:ex_doc, \"~> 0.29\", only: :docs},\n {:makeup_elixir, \"~> 1.0.1 or ~> 1.1\", only: [:docs, :e2e]},\n {:makeup_eex, \"~> 2.0\", only: [:docs, :e2e]},\n {:makeup_syntect, \"~> 0.1.0\", only: [:docs, :e2e]},\n {:html_entities, \">= 0.0.0\", only: :test},\n {:phoenix_live_reload, \"~> 1.4\", only: :test},\n {:phoenix_html_helpers, \"~> 1.0\", only: :test},\n {:bandit, \"~> 1.5\", only: :e2e},\n {:ecto, \"~> 3.11\", only: :e2e},\n {:phoenix_ecto, \"~> 4.5\", only: :e2e}\n ]\n end\n\n defp docs do\n [\n main: \"welcome\",\n source_ref: \"v#{@version}\",\n source_url: \"https://github.com/phoenixframework/phoenix_live_view\",\n extra_section: \"GUIDES\",\n extras: extras(),\n groups_for_extras: groups_for_extras(),\n groups_for_modules: groups_for_modules(),\n groups_for_docs: [\n Components: &(&1[:type] == :component),\n Macros: &(&1[:type] == :macro)\n ],\n skip_undefined_reference_warnings_on: [\"CHANGELOG.md\"],\n before_closing_body_tag: &before_closing_body_tag/1\n ]\n end\n\n defp before_closing_body_tag(:html) do\n \"\"\"\n \n \n \"\"\"\n end\n\n defp before_closing_body_tag(_), do: \"\"\n\n defp extras do\n [\"CHANGELOG.md\"] ++\n Path.wildcard(\"guides/*/*.md\") ++\n Path.wildcard(\"guides/cheatsheets/*.cheatmd\")\n end\n\n defp groups_for_extras do\n [\n Introduction: ~r\"guides/introduction/\",\n \"Server-side features\": ~r\"guides/server/\",\n \"Client-side integration\": ~r\"guides/client/\",\n Cheatsheets: ~r\"guides/cheatsheets/\"\n ]\n end\n\n defp groups_for_modules do\n # Ungrouped Modules:\n #\n # Phoenix.Component\n # Phoenix.LiveComponent\n # Phoenix.LiveView\n # Phoenix.LiveView.Controller\n # Phoenix.LiveView.JS\n # Phoenix.LiveView.Router\n # Phoenix.LiveViewTest\n\n [\n Configuration: [\n Phoenix.LiveView.HTMLFormatter,\n Phoenix.LiveView.Logger,\n Phoenix.LiveView.Socket\n ],\n \"Testing structures\": [\n Phoenix.LiveViewTest.Element,\n Phoenix.LiveViewTest.Upload,\n Phoenix.LiveViewTest.View\n ],\n \"Upload structures\": [\n Phoenix.LiveView.UploadConfig,\n Phoenix.LiveView.UploadEntry,\n Phoenix.LiveView.UploadWriter\n ],\n \"Plugin API\": [\n Phoenix.LiveComponent.CID,\n Phoenix.LiveView.Engine,\n Phoenix.LiveView.TagEngine,\n Phoenix.LiveView.HTMLEngine,\n Phoenix.LiveView.Component,\n Phoenix.LiveView.Rendered,\n Phoenix.LiveView.Comprehension\n ]\n ]\n end\n\n defp package do\n [\n maintainers: [\"Chris McCord\", \"José Valim\", \"Gary Rennie\", \"Alex Garibay\", \"Scott Newcomer\"],\n licenses: [\"MIT\"],\n links: %{\n Changelog: \"https://hexdocs.pm/phoenix_live_view/changelog.html\",\n GitHub: \"https://github.com/phoenixframework/phoenix_live_view\"\n },\n files:\n ~w(assets/js lib priv) ++\n ~w(CHANGELOG.md LICENSE.md mix.exs package.json README.md .formatter.exs)\n ]\n end\n\n defp aliases do\n [\n \"assets.build\": [\n \"cmd npm run build\",\n \"esbuild module\",\n \"esbuild cdn\",\n \"esbuild cdn_min\",\n \"esbuild main\"\n ],\n \"assets.watch\": [\"cmd npm run build -- --watch\", \"esbuild module --watch\"]\n ]\n end\n\n defp coverage_ignore_modules do\n [\n ~r/Phoenix\\.LiveViewTest\\.Support\\..*/,\n ~r/Phoenix\\.LiveViewTest\\.E2E\\..*/,\n ~r/Inspect\\..*/\n ]\n end\nend\n" }, { "path": "package.json", "content": "{\n \"name\": \"phoenix_live_view\",\n \"version\": \"1.2.0-dev\",\n \"description\": \"The Phoenix LiveView JavaScript client.\",\n \"license\": \"MIT\",\n \"type\": \"module\",\n \"module\": \"./priv/static/phoenix_live_view.esm.js\",\n \"main\": \"./priv/static/phoenix_live_view.cjs.js\",\n \"unpkg\": \"./priv/static/phoenix_live_view.min.js\",\n \"jsdelivr\": \"./priv/static/phoenix_live_view.min.js\",\n \"exports\": {\n \"import\": {\n \"types\": \"./assets/js/types/index.d.ts\",\n \"default\": \"./priv/static/phoenix_live_view.esm.js\"\n },\n \"require\": \"./priv/static/phoenix_live_view.cjs.js\"\n },\n \"author\": \"Chris McCord (http://www.phoenixframework.org)\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git://github.com/phoenixframework/phoenix_live_view.git\"\n },\n \"files\": [\n \"README.md\",\n \"LICENSE.md\",\n \"package.json\",\n \"priv/static/*\",\n \"assets/js/**\"\n ],\n \"types\": \"./assets/js/types/index.d.ts\",\n \"dependencies\": {\n \"morphdom\": \"2.7.8\"\n },\n \"devDependencies\": {\n \"@babel/cli\": \"7.27.2\",\n \"@babel/core\": \"7.27.4\",\n \"@babel/preset-env\": \"7.27.2\",\n \"@babel/preset-typescript\": \"^7.27.1\",\n \"@eslint/js\": \"^9.29.0\",\n \"@playwright/test\": \"^1.58.2\",\n \"@types/jest\": \"^30.0.0\",\n \"@types/phoenix\": \"^1.6.6\",\n \"css.escape\": \"^1.5.1\",\n \"eslint\": \"9.29.0\",\n \"eslint-plugin-jest\": \"28.14.0\",\n \"eslint-plugin-playwright\": \"^2.2.0\",\n \"globals\": \"^16.2.0\",\n \"jest\": \"^30.0.0\",\n \"jest-environment-jsdom\": \"^30.0.0\",\n \"jest-monocart-coverage\": \"^1.1.1\",\n \"monocart-reporter\": \"^2.9.21\",\n \"phoenix\": \"1.7.21\",\n \"prettier\": \"3.5.3\",\n \"ts-jest\": \"^29.4.0\",\n \"typescript\": \"^5.8.3\",\n \"typescript-eslint\": \"^8.34.0\"\n },\n \"scripts\": {\n \"setup\": \"mix deps.get && npm install\",\n \"build\": \"tsc\",\n \"e2e:server\": \"MIX_ENV=e2e mix test --cover --export-coverage e2e test/e2e/test_helper.exs\",\n \"e2e:test\": \"mix assets.build && cd test/e2e && npx playwright install && npx playwright test\",\n \"js:test\": \"npm run build && jest\",\n \"js:test.coverage\": \"npm run build && jest --coverage\",\n \"js:test.watch\": \"npm run build && jest --watch\",\n \"js:lint\": \"eslint\",\n \"js:format\": \"prettier --write assets --log-level warn && prettier --write test/e2e --log-level warn\",\n \"js:format.check\": \"prettier --check assets --log-level warn && prettier --check test/e2e --log-level warn\",\n \"test\": \"npm run js:test && npm run e2e:test\",\n \"typecheck:tests\": \"tsc -p assets/test/tsconfig.json\",\n \"cover:merge\": \"node test/e2e/merge-coverage.js\",\n \"cover\": \"npm run test && npm run cover:merge\",\n \"cover:report\": \"npx monocart show-report cover/merged-js/index.html\"\n }\n}\n" }, { "path": "priv/static/phoenix_live_view.cjs.js", "content": "var __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n for (var name in all)\n __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n if (from && typeof from === \"object\" || typeof from === \"function\") {\n for (let key of __getOwnPropNames(from))\n if (!__hasOwnProp.call(to, key) && key !== except)\n __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n }\n return to;\n};\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\n\n// js/phoenix_live_view/index.ts\nvar phoenix_live_view_exports = {};\n__export(phoenix_live_view_exports, {\n LiveSocket: () => LiveSocket2,\n ViewHook: () => ViewHook,\n createHook: () => createHook,\n isUsedInput: () => isUsedInput\n});\nmodule.exports = __toCommonJS(phoenix_live_view_exports);\n\n// js/phoenix_live_view/constants.js\nvar CONSECUTIVE_RELOADS = \"consecutive-reloads\";\nvar MAX_RELOADS = 10;\nvar RELOAD_JITTER_MIN = 5e3;\nvar RELOAD_JITTER_MAX = 1e4;\nvar FAILSAFE_JITTER = 3e4;\nvar PHX_EVENT_CLASSES = [\n \"phx-click-loading\",\n \"phx-change-loading\",\n \"phx-submit-loading\",\n \"phx-keydown-loading\",\n \"phx-keyup-loading\",\n \"phx-blur-loading\",\n \"phx-focus-loading\",\n \"phx-hook-loading\"\n];\nvar PHX_DROP_TARGET_ACTIVE_CLASS = \"phx-drop-target-active\";\nvar PHX_COMPONENT = \"data-phx-component\";\nvar PHX_VIEW_REF = \"data-phx-view\";\nvar PHX_LIVE_LINK = \"data-phx-link\";\nvar PHX_TRACK_STATIC = \"track-static\";\nvar PHX_LINK_STATE = \"data-phx-link-state\";\nvar PHX_REF_LOADING = \"data-phx-ref-loading\";\nvar PHX_REF_SRC = \"data-phx-ref-src\";\nvar PHX_REF_LOCK = \"data-phx-ref-lock\";\nvar PHX_PENDING_REFS = \"phx-pending-refs\";\nvar PHX_TRACK_UPLOADS = \"track-uploads\";\nvar PHX_UPLOAD_REF = \"data-phx-upload-ref\";\nvar PHX_PREFLIGHTED_REFS = \"data-phx-preflighted-refs\";\nvar PHX_DONE_REFS = \"data-phx-done-refs\";\nvar PHX_DROP_TARGET = \"drop-target\";\nvar PHX_ACTIVE_ENTRY_REFS = \"data-phx-active-refs\";\nvar PHX_LIVE_FILE_UPDATED = \"phx:live-file:updated\";\nvar PHX_SKIP = \"data-phx-skip\";\nvar PHX_MAGIC_ID = \"data-phx-id\";\nvar PHX_PRUNE = \"data-phx-prune\";\nvar PHX_CONNECTED_CLASS = \"phx-connected\";\nvar PHX_LOADING_CLASS = \"phx-loading\";\nvar PHX_ERROR_CLASS = \"phx-error\";\nvar PHX_CLIENT_ERROR_CLASS = \"phx-client-error\";\nvar PHX_SERVER_ERROR_CLASS = \"phx-server-error\";\nvar PHX_PARENT_ID = \"data-phx-parent-id\";\nvar PHX_MAIN = \"data-phx-main\";\nvar PHX_ROOT_ID = \"data-phx-root-id\";\nvar PHX_VIEWPORT_TOP = \"viewport-top\";\nvar PHX_VIEWPORT_BOTTOM = \"viewport-bottom\";\nvar PHX_VIEWPORT_OVERRUN_TARGET = \"viewport-overrun-target\";\nvar PHX_TRIGGER_ACTION = \"trigger-action\";\nvar PHX_HAS_FOCUSED = \"phx-has-focused\";\nvar FOCUSABLE_INPUTS = [\n \"text\",\n \"textarea\",\n \"number\",\n \"email\",\n \"password\",\n \"search\",\n \"tel\",\n \"url\",\n \"date\",\n \"time\",\n \"datetime-local\",\n \"color\",\n \"range\"\n];\nvar CHECKABLE_INPUTS = [\"checkbox\", \"radio\"];\nvar PHX_HAS_SUBMITTED = \"phx-has-submitted\";\nvar PHX_SESSION = \"data-phx-session\";\nvar PHX_VIEW_SELECTOR = `[${PHX_SESSION}]`;\nvar PHX_STICKY = \"data-phx-sticky\";\nvar PHX_STATIC = \"data-phx-static\";\nvar PHX_READONLY = \"data-phx-readonly\";\nvar PHX_DISABLED = \"data-phx-disabled\";\nvar PHX_DISABLE_WITH = \"disable-with\";\nvar PHX_DISABLE_WITH_RESTORE = \"data-phx-disable-with-restore\";\nvar PHX_HOOK = \"hook\";\nvar PHX_DEBOUNCE = \"debounce\";\nvar PHX_THROTTLE = \"throttle\";\nvar PHX_UPDATE = \"update\";\nvar PHX_STREAM = \"stream\";\nvar PHX_STREAM_REF = \"data-phx-stream\";\nvar PHX_PORTAL = \"data-phx-portal\";\nvar PHX_TELEPORTED_REF = \"data-phx-teleported\";\nvar PHX_TELEPORTED_SRC = \"data-phx-teleported-src\";\nvar PHX_RUNTIME_HOOK = \"data-phx-runtime-hook\";\nvar PHX_LV_PID = \"data-phx-pid\";\nvar PHX_KEY = \"key\";\nvar PHX_PRIVATE = \"phxPrivate\";\nvar PHX_AUTO_RECOVER = \"auto-recover\";\nvar PHX_NO_UNUSED_FIELD = \"no-unused-field\";\nvar PHX_LV_DEBUG = \"phx:live-socket:debug\";\nvar PHX_LV_PROFILE = \"phx:live-socket:profiling\";\nvar PHX_LV_LATENCY_SIM = \"phx:live-socket:latency-sim\";\nvar PHX_LV_HISTORY_POSITION = \"phx:nav-history-position\";\nvar PHX_PROGRESS = \"progress\";\nvar PHX_MOUNTED = \"mounted\";\nvar PHX_RELOAD_STATUS = \"__phoenix_reload_status__\";\nvar LOADER_TIMEOUT = 1;\nvar MAX_CHILD_JOIN_ATTEMPTS = 3;\nvar BEFORE_UNLOAD_LOADER_TIMEOUT = 200;\nvar DISCONNECTED_TIMEOUT = 500;\nvar BINDING_PREFIX = \"phx-\";\nvar PUSH_TIMEOUT = 3e4;\nvar DEBOUNCE_TRIGGER = \"debounce-trigger\";\nvar THROTTLED = \"throttled\";\nvar DEBOUNCE_PREV_KEY = \"debounce-prev-key\";\nvar DEFAULTS = {\n debounce: 300,\n throttle: 300\n};\nvar PHX_PENDING_ATTRS = [PHX_REF_LOADING, PHX_REF_SRC, PHX_REF_LOCK];\nvar STATIC = \"s\";\nvar ROOT = \"r\";\nvar COMPONENTS = \"c\";\nvar KEYED = \"k\";\nvar KEYED_COUNT = \"kc\";\nvar EVENTS = \"e\";\nvar REPLY = \"r\";\nvar TITLE = \"t\";\nvar TEMPLATES = \"p\";\nvar STREAM = \"stream\";\n\n// js/phoenix_live_view/entry_uploader.js\nvar EntryUploader = class {\n constructor(entry, config, liveSocket) {\n const { chunk_size, chunk_timeout } = config;\n this.liveSocket = liveSocket;\n this.entry = entry;\n this.offset = 0;\n this.chunkSize = chunk_size;\n this.chunkTimeout = chunk_timeout;\n this.chunkTimer = null;\n this.errored = false;\n this.uploadChannel = liveSocket.channel(`lvu:${entry.ref}`, {\n token: entry.metadata()\n });\n }\n error(reason) {\n if (this.errored) {\n return;\n }\n this.uploadChannel.leave();\n this.errored = true;\n clearTimeout(this.chunkTimer);\n this.entry.error(reason);\n }\n upload() {\n this.uploadChannel.onError((reason) => this.error(reason));\n this.uploadChannel.join().receive(\"ok\", (_data) => this.readNextChunk()).receive(\"error\", (reason) => this.error(reason));\n }\n isDone() {\n return this.offset >= this.entry.file.size;\n }\n readNextChunk() {\n const reader = new window.FileReader();\n const blob = this.entry.file.slice(\n this.offset,\n this.chunkSize + this.offset\n );\n reader.onload = (e) => {\n if (e.target.error === null) {\n this.offset += /** @type {ArrayBuffer} */\n e.target.result.byteLength;\n this.pushChunk(\n /** @type {ArrayBuffer} */\n e.target.result\n );\n } else {\n return logError(\"Read error: \" + e.target.error);\n }\n };\n reader.readAsArrayBuffer(blob);\n }\n pushChunk(chunk) {\n if (!this.uploadChannel.isJoined()) {\n return;\n }\n this.uploadChannel.push(\"chunk\", chunk, this.chunkTimeout).receive(\"ok\", () => {\n this.entry.progress(this.offset / this.entry.file.size * 100);\n if (!this.isDone()) {\n this.chunkTimer = setTimeout(\n () => this.readNextChunk(),\n this.liveSocket.getLatencySim() || 0\n );\n }\n }).receive(\"error\", ({ reason }) => this.error(reason));\n }\n};\n\n// js/phoenix_live_view/utils.js\nvar logError = (msg, obj) => console.error && console.error(msg, obj);\nvar isCid = (cid) => {\n const type = typeof cid;\n return type === \"number\" || type === \"string\" && /^(0|[1-9]\\d*)$/.test(cid);\n};\nfunction detectDuplicateIds() {\n const ids = /* @__PURE__ */ new Set();\n const elems = document.querySelectorAll(\"*[id]\");\n for (let i = 0, len = elems.length; i < len; i++) {\n if (ids.has(elems[i].id)) {\n console.error(\n `Multiple IDs detected: ${elems[i].id}. Ensure unique element ids.`\n );\n } else {\n ids.add(elems[i].id);\n }\n }\n}\nfunction detectInvalidStreamInserts(inserts) {\n const errors = /* @__PURE__ */ new Set();\n Object.keys(inserts).forEach((id) => {\n const streamEl = document.getElementById(id);\n if (streamEl && streamEl.parentElement && streamEl.parentElement.getAttribute(\"phx-update\") !== \"stream\") {\n errors.add(\n `The stream container with id \"${streamEl.parentElement.id}\" is missing the phx-update=\"stream\" attribute. Ensure it is set for streams to work properly.`\n );\n }\n });\n errors.forEach((error) => console.error(error));\n}\nvar debug = (view, kind, msg, obj) => {\n if (view.liveSocket.isDebugEnabled()) {\n console.log(`${view.id} ${kind}: ${msg} - `, obj);\n }\n};\nvar closure = (val) => typeof val === \"function\" ? val : function() {\n return val;\n};\nvar clone = (obj) => {\n return JSON.parse(JSON.stringify(obj));\n};\nvar closestPhxBinding = (el, binding, borderEl) => {\n do {\n if (el.matches(`[${binding}]`) && !el.disabled) {\n return el;\n }\n el = el.parentElement || el.parentNode;\n } while (el !== null && el.nodeType === 1 && !(borderEl && borderEl.isSameNode(el) || el.matches(PHX_VIEW_SELECTOR)));\n return null;\n};\nvar isObject = (obj) => {\n return obj !== null && typeof obj === \"object\" && !(obj instanceof Array);\n};\nvar isEqualObj = (obj1, obj2) => JSON.stringify(obj1) === JSON.stringify(obj2);\nvar isEmpty = (obj) => {\n for (const x in obj) {\n return false;\n }\n return true;\n};\nvar maybe = (el, callback) => el && callback(el);\nvar channelUploader = function(entries, onError, resp, liveSocket) {\n entries.forEach((entry) => {\n const entryUploader = new EntryUploader(entry, resp.config, liveSocket);\n entryUploader.upload();\n });\n};\nvar eventContainsFiles = (e) => {\n if (e.dataTransfer.types) {\n for (let i = 0; i < e.dataTransfer.types.length; i++) {\n if (e.dataTransfer.types[i] === \"Files\") {\n return true;\n }\n }\n }\n return false;\n};\n\n// js/phoenix_live_view/browser.js\nvar Browser = {\n canPushState() {\n return typeof history.pushState !== \"undefined\";\n },\n dropLocal(localStorage, namespace, subkey) {\n return localStorage.removeItem(this.localKey(namespace, subkey));\n },\n updateLocal(localStorage, namespace, subkey, initial, func) {\n const current = this.getLocal(localStorage, namespace, subkey);\n const key = this.localKey(namespace, subkey);\n const newVal = current === null ? initial : func(current);\n localStorage.setItem(key, JSON.stringify(newVal));\n return newVal;\n },\n getLocal(localStorage, namespace, subkey) {\n return JSON.parse(localStorage.getItem(this.localKey(namespace, subkey)));\n },\n updateCurrentState(callback) {\n if (!this.canPushState()) {\n return;\n }\n history.replaceState(\n callback(history.state || {}),\n \"\",\n window.location.href\n );\n },\n pushState(kind, meta, to) {\n if (this.canPushState()) {\n if (to !== window.location.href) {\n if (meta.type == \"redirect\" && meta.scroll) {\n const currentState = history.state || {};\n currentState.scroll = meta.scroll;\n history.replaceState(currentState, \"\", window.location.href);\n }\n delete meta.scroll;\n history[kind + \"State\"](meta, \"\", to || null);\n window.requestAnimationFrame(() => {\n const hashEl = this.getHashTargetEl(window.location.hash);\n if (hashEl) {\n hashEl.scrollIntoView();\n } else if (meta.type === \"redirect\") {\n window.scroll(0, 0);\n }\n });\n }\n } else {\n this.redirect(to);\n }\n },\n setCookie(name, value, maxAgeSeconds) {\n const expires = typeof maxAgeSeconds === \"number\" ? ` max-age=${maxAgeSeconds};` : \"\";\n document.cookie = `${name}=${value};${expires} path=/`;\n },\n getCookie(name) {\n return document.cookie.replace(\n new RegExp(`(?:(?:^|.*;s*)${name}s*=s*([^;]*).*$)|^.*$`),\n \"$1\"\n );\n },\n deleteCookie(name) {\n document.cookie = `${name}=; max-age=-1; path=/`;\n },\n redirect(toURL, flash, navigate = (url) => {\n window.location.href = url;\n }) {\n if (flash) {\n this.setCookie(\"__phoenix_flash__\", flash, 60);\n }\n navigate(toURL);\n },\n localKey(namespace, subkey) {\n return `${namespace}-${subkey}`;\n },\n getHashTargetEl(maybeHash) {\n const hash = maybeHash.toString().substring(1);\n if (hash === \"\") {\n return;\n }\n return document.getElementById(hash) || document.querySelector(`a[name=\"${hash}\"]`);\n }\n};\nvar browser_default = Browser;\n\n// js/phoenix_live_view/dom.js\nvar DOM = {\n byId(id) {\n return document.getElementById(id) || logError(`no id found for ${id}`);\n },\n removeClass(el, className) {\n el.classList.remove(className);\n if (el.classList.length === 0) {\n el.removeAttribute(\"class\");\n }\n },\n all(node, query, callback) {\n if (!node) {\n return [];\n }\n const array = Array.from(node.querySelectorAll(query));\n if (callback) {\n array.forEach(callback);\n }\n return array;\n },\n childNodeLength(html) {\n const template = document.createElement(\"template\");\n template.innerHTML = html;\n return template.content.childElementCount;\n },\n isUploadInput(el) {\n return el.type === \"file\" && el.getAttribute(PHX_UPLOAD_REF) !== null;\n },\n isAutoUpload(inputEl) {\n return inputEl.hasAttribute(\"data-phx-auto-upload\");\n },\n findUploadInputs(node) {\n const formId = node.id;\n const inputsOutsideForm = this.all(\n document,\n `input[type=\"file\"][${PHX_UPLOAD_REF}][form=\"${formId}\"]`\n );\n return this.all(node, `input[type=\"file\"][${PHX_UPLOAD_REF}]`).concat(\n inputsOutsideForm\n );\n },\n findComponentNodeList(viewId, cid, doc2 = document) {\n return this.all(\n doc2,\n `[${PHX_VIEW_REF}=\"${viewId}\"][${PHX_COMPONENT}=\"${cid}\"]`\n );\n },\n isPhxDestroyed(node) {\n return node.id && DOM.private(node, \"destroyed\") ? true : false;\n },\n wantsNewTab(e) {\n const wantsNewTab = e.ctrlKey || e.shiftKey || e.metaKey || e.button && e.button === 1;\n const isDownload = e.target instanceof HTMLAnchorElement && e.target.hasAttribute(\"download\");\n const isTargetBlank = e.target.hasAttribute(\"target\") && e.target.getAttribute(\"target\").toLowerCase() === \"_blank\";\n const isTargetNamedTab = e.target.hasAttribute(\"target\") && !e.target.getAttribute(\"target\").startsWith(\"_\");\n return wantsNewTab || isTargetBlank || isDownload || isTargetNamedTab;\n },\n isUnloadableFormSubmit(e) {\n const isDialogSubmit = e.target && e.target.getAttribute(\"method\") === \"dialog\" || e.submitter && e.submitter.getAttribute(\"formmethod\") === \"dialog\";\n if (isDialogSubmit) {\n return false;\n } else {\n return !e.defaultPrevented && !this.wantsNewTab(e);\n }\n },\n isNewPageClick(e, currentLocation) {\n const href = e.target instanceof HTMLAnchorElement ? e.target.getAttribute(\"href\") : null;\n let url;\n if (e.defaultPrevented || href === null || this.wantsNewTab(e)) {\n return false;\n }\n if (href.startsWith(\"mailto:\") || href.startsWith(\"tel:\")) {\n return false;\n }\n if (e.target.isContentEditable) {\n return false;\n }\n try {\n url = new URL(href);\n } catch {\n try {\n url = new URL(href, currentLocation);\n } catch {\n return true;\n }\n }\n if (url.host === currentLocation.host && url.protocol === currentLocation.protocol) {\n if (url.pathname === currentLocation.pathname && url.search === currentLocation.search) {\n return url.hash === \"\" && !url.href.endsWith(\"#\");\n }\n }\n return url.protocol.startsWith(\"http\");\n },\n markPhxChildDestroyed(el) {\n if (this.isPhxChild(el)) {\n el.setAttribute(PHX_SESSION, \"\");\n }\n this.putPrivate(el, \"destroyed\", true);\n },\n findPhxChildrenInFragment(html, parentId) {\n const template = document.createElement(\"template\");\n template.innerHTML = html;\n return this.findPhxChildren(template.content, parentId);\n },\n isIgnored(el, phxUpdate) {\n return (el.getAttribute(phxUpdate) || el.getAttribute(\"data-phx-update\")) === \"ignore\";\n },\n isPhxUpdate(el, phxUpdate, updateTypes) {\n return el.getAttribute && updateTypes.indexOf(el.getAttribute(phxUpdate)) >= 0;\n },\n findPhxSticky(el) {\n return this.all(el, `[${PHX_STICKY}]`);\n },\n findPhxChildren(el, parentId) {\n return this.all(el, `${PHX_VIEW_SELECTOR}[${PHX_PARENT_ID}=\"${parentId}\"]`);\n },\n findExistingParentCIDs(viewId, cids) {\n const parentCids = /* @__PURE__ */ new Set();\n const childrenCids = /* @__PURE__ */ new Set();\n cids.forEach((cid) => {\n this.all(\n document,\n `[${PHX_VIEW_REF}=\"${viewId}\"][${PHX_COMPONENT}=\"${cid}\"]`\n ).forEach((parent) => {\n parentCids.add(cid);\n this.all(parent, `[${PHX_VIEW_REF}=\"${viewId}\"][${PHX_COMPONENT}]`).map((el) => parseInt(el.getAttribute(PHX_COMPONENT))).forEach((childCID) => childrenCids.add(childCID));\n });\n });\n childrenCids.forEach((childCid) => parentCids.delete(childCid));\n return parentCids;\n },\n private(el, key) {\n return el[PHX_PRIVATE] && el[PHX_PRIVATE][key];\n },\n deletePrivate(el, key) {\n el[PHX_PRIVATE] && delete el[PHX_PRIVATE][key];\n },\n putPrivate(el, key, value) {\n if (!el[PHX_PRIVATE]) {\n el[PHX_PRIVATE] = {};\n }\n el[PHX_PRIVATE][key] = value;\n },\n updatePrivate(el, key, defaultVal, updateFunc) {\n const existing = this.private(el, key);\n if (existing === void 0) {\n this.putPrivate(el, key, updateFunc(defaultVal));\n } else {\n this.putPrivate(el, key, updateFunc(existing));\n }\n },\n syncPendingAttrs(fromEl, toEl) {\n if (!fromEl.hasAttribute(PHX_REF_SRC)) {\n return;\n }\n PHX_EVENT_CLASSES.forEach((className) => {\n fromEl.classList.contains(className) && toEl.classList.add(className);\n });\n PHX_PENDING_ATTRS.filter((attr) => fromEl.hasAttribute(attr)).forEach(\n (attr) => {\n toEl.setAttribute(attr, fromEl.getAttribute(attr));\n }\n );\n },\n copyPrivates(target, source) {\n if (source[PHX_PRIVATE]) {\n target[PHX_PRIVATE] = source[PHX_PRIVATE];\n }\n },\n putTitle(str) {\n const titleEl = document.querySelector(\"title\");\n if (titleEl) {\n const { prefix, suffix, default: defaultTitle } = titleEl.dataset;\n const isEmpty2 = typeof str !== \"string\" || str.trim() === \"\";\n if (isEmpty2 && typeof defaultTitle !== \"string\") {\n return;\n }\n const inner = isEmpty2 ? defaultTitle : str;\n document.title = `${prefix || \"\"}${inner || \"\"}${suffix || \"\"}`;\n } else {\n document.title = str;\n }\n },\n debounce(el, event, phxDebounce, defaultDebounce, phxThrottle, defaultThrottle, asyncFilter, callback) {\n let debounce = el.getAttribute(phxDebounce);\n let throttle = el.getAttribute(phxThrottle);\n if (debounce === \"\") {\n debounce = defaultDebounce;\n }\n if (throttle === \"\") {\n throttle = defaultThrottle;\n }\n const value = debounce || throttle;\n switch (value) {\n case null:\n return callback();\n case \"blur\":\n this.incCycle(el, \"debounce-blur-cycle\", () => {\n if (asyncFilter()) {\n callback();\n }\n });\n if (this.once(el, \"debounce-blur\")) {\n el.addEventListener(\n \"blur\",\n () => this.triggerCycle(el, \"debounce-blur-cycle\")\n );\n }\n return;\n default:\n const timeout = parseInt(value);\n const trigger = () => throttle ? this.deletePrivate(el, THROTTLED) : callback();\n const currentCycle = this.incCycle(el, DEBOUNCE_TRIGGER, trigger);\n if (isNaN(timeout)) {\n return logError(`invalid throttle/debounce value: ${value}`);\n }\n if (throttle) {\n let newKeyDown = false;\n if (event.type === \"keydown\") {\n const prevKey = this.private(el, DEBOUNCE_PREV_KEY);\n this.putPrivate(el, DEBOUNCE_PREV_KEY, event.key);\n newKeyDown = prevKey !== event.key;\n }\n if (!newKeyDown && this.private(el, THROTTLED)) {\n return false;\n } else {\n callback();\n const t = setTimeout(() => {\n if (asyncFilter()) {\n this.triggerCycle(el, DEBOUNCE_TRIGGER);\n }\n }, timeout);\n this.putPrivate(el, THROTTLED, t);\n }\n } else {\n setTimeout(() => {\n if (asyncFilter()) {\n this.triggerCycle(el, DEBOUNCE_TRIGGER, currentCycle);\n }\n }, timeout);\n }\n const form = el.form;\n if (form && this.once(form, \"bind-debounce\")) {\n form.addEventListener(\"submit\", () => {\n Array.from(new FormData(form).entries(), ([name]) => {\n const namedItem = form.elements.namedItem(name);\n const input = namedItem instanceof RadioNodeList ? namedItem[0] : namedItem;\n if (input) {\n this.incCycle(input, DEBOUNCE_TRIGGER);\n this.deletePrivate(input, THROTTLED);\n }\n });\n });\n }\n if (this.once(el, \"bind-debounce\")) {\n el.addEventListener(\"blur\", () => {\n clearTimeout(this.private(el, THROTTLED));\n this.triggerCycle(el, DEBOUNCE_TRIGGER);\n });\n }\n }\n },\n triggerCycle(el, key, currentCycle) {\n const [cycle, trigger] = this.private(el, key);\n if (!currentCycle) {\n currentCycle = cycle;\n }\n if (currentCycle === cycle) {\n this.incCycle(el, key);\n trigger();\n }\n },\n once(el, key) {\n if (this.private(el, key) === true) {\n return false;\n }\n this.putPrivate(el, key, true);\n return true;\n },\n incCycle(el, key, trigger = function() {\n }) {\n let [currentCycle] = this.private(el, key) || [0, trigger];\n currentCycle++;\n this.putPrivate(el, key, [currentCycle, trigger]);\n return currentCycle;\n },\n // maintains or adds privately used hook information\n // fromEl and toEl can be the same element in the case of a newly added node\n // fromEl and toEl can be any HTML node type, so we need to check if it's an element node\n maintainPrivateHooks(fromEl, toEl, phxViewportTop, phxViewportBottom) {\n if (fromEl.hasAttribute && fromEl.hasAttribute(\"data-phx-hook\") && !toEl.hasAttribute(\"data-phx-hook\")) {\n toEl.setAttribute(\"data-phx-hook\", fromEl.getAttribute(\"data-phx-hook\"));\n }\n if (toEl.hasAttribute && (toEl.hasAttribute(phxViewportTop) || toEl.hasAttribute(phxViewportBottom))) {\n toEl.setAttribute(\"data-phx-hook\", \"Phoenix.InfiniteScroll\");\n }\n },\n putCustomElHook(el, hook) {\n if (el.isConnected) {\n el.setAttribute(\"data-phx-hook\", \"\");\n } else {\n console.error(`\n hook attached to non-connected DOM element\n ensure you are calling createHook within your connectedCallback. ${el.outerHTML}\n `);\n }\n this.putPrivate(el, \"custom-el-hook\", hook);\n },\n getCustomElHook(el) {\n return this.private(el, \"custom-el-hook\");\n },\n isUsedInput(el) {\n return el.nodeType === Node.ELEMENT_NODE && (this.private(el, PHX_HAS_FOCUSED) || this.private(el, PHX_HAS_SUBMITTED));\n },\n resetForm(form) {\n Array.from(form.elements).forEach((input) => {\n this.deletePrivate(input, PHX_HAS_FOCUSED);\n this.deletePrivate(input, PHX_HAS_SUBMITTED);\n });\n },\n isPhxChild(node) {\n return node.getAttribute && node.getAttribute(PHX_PARENT_ID);\n },\n isPhxSticky(node) {\n return node.getAttribute && node.getAttribute(PHX_STICKY) !== null;\n },\n isChildOfAny(el, parents) {\n return !!parents.find((parent) => parent.contains(el));\n },\n firstPhxChild(el) {\n return this.isPhxChild(el) ? el : this.all(el, `[${PHX_PARENT_ID}]`)[0];\n },\n isPortalTemplate(el) {\n return el.tagName === \"TEMPLATE\" && el.hasAttribute(PHX_PORTAL);\n },\n closestViewEl(el) {\n const portalOrViewEl = el.closest(\n `[${PHX_TELEPORTED_REF}],${PHX_VIEW_SELECTOR}`\n );\n if (!portalOrViewEl) {\n return null;\n }\n if (portalOrViewEl.hasAttribute(PHX_TELEPORTED_REF)) {\n return this.byId(portalOrViewEl.getAttribute(PHX_TELEPORTED_REF));\n } else if (portalOrViewEl.hasAttribute(PHX_SESSION)) {\n return portalOrViewEl;\n }\n return null;\n },\n dispatchEvent(target, name, opts = {}) {\n let defaultBubble = true;\n const isUploadTarget = target.nodeName === \"INPUT\" && target.type === \"file\";\n if (isUploadTarget && name === \"click\") {\n defaultBubble = false;\n }\n const bubbles = opts.bubbles === void 0 ? defaultBubble : !!opts.bubbles;\n const eventOpts = {\n bubbles,\n cancelable: true,\n detail: opts.detail || {}\n };\n const event = name === \"click\" ? new MouseEvent(\"click\", eventOpts) : new CustomEvent(name, eventOpts);\n target.dispatchEvent(event);\n },\n cloneNode(node, html) {\n if (typeof html === \"undefined\") {\n return node.cloneNode(true);\n } else {\n const cloned = node.cloneNode(false);\n cloned.innerHTML = html;\n return cloned;\n }\n },\n // merge attributes from source to target\n // if an element is ignored, we only merge data attributes\n // including removing data attributes that are no longer in the source\n mergeAttrs(target, source, opts = {}) {\n const exclude = new Set(opts.exclude || []);\n const isIgnored = opts.isIgnored;\n const sourceAttrs = source.attributes;\n for (let i = sourceAttrs.length - 1; i >= 0; i--) {\n const name = sourceAttrs[i].name;\n if (!exclude.has(name)) {\n const sourceValue = source.getAttribute(name);\n if (target.getAttribute(name) !== sourceValue && (!isIgnored || isIgnored && name.startsWith(\"data-\"))) {\n target.setAttribute(name, sourceValue);\n }\n } else {\n if (name === \"value\") {\n const sourceValue = source.value ?? source.getAttribute(name);\n if (target.value === sourceValue) {\n target.setAttribute(\"value\", source.getAttribute(name));\n }\n }\n }\n }\n const targetAttrs = target.attributes;\n for (let i = targetAttrs.length - 1; i >= 0; i--) {\n const name = targetAttrs[i].name;\n if (isIgnored) {\n if (name.startsWith(\"data-\") && !source.hasAttribute(name) && !PHX_PENDING_ATTRS.includes(name)) {\n target.removeAttribute(name);\n }\n } else {\n if (!source.hasAttribute(name)) {\n target.removeAttribute(name);\n }\n }\n }\n },\n mergeFocusedInput(target, source) {\n if (!(target instanceof HTMLSelectElement)) {\n DOM.mergeAttrs(target, source, { exclude: [\"value\"] });\n }\n if (source.readOnly) {\n target.setAttribute(\"readonly\", true);\n } else {\n target.removeAttribute(\"readonly\");\n }\n },\n hasSelectionRange(el) {\n return el.setSelectionRange && (el.type === \"text\" || el.type === \"textarea\");\n },\n restoreFocus(focused, selectionStart, selectionEnd) {\n if (focused instanceof HTMLSelectElement) {\n focused.focus();\n }\n if (!DOM.isTextualInput(focused)) {\n return;\n }\n const wasFocused = focused.matches(\":focus\");\n if (!wasFocused) {\n focused.focus();\n }\n if (this.hasSelectionRange(focused)) {\n focused.setSelectionRange(selectionStart, selectionEnd);\n }\n },\n isFormInput(el) {\n if (el.localName && customElements.get(el.localName)) {\n return customElements.get(el.localName)[`formAssociated`];\n }\n return /^(?:input|select|textarea)$/i.test(el.tagName) && el.type !== \"button\";\n },\n syncAttrsToProps(el) {\n if (el instanceof HTMLInputElement && CHECKABLE_INPUTS.indexOf(el.type.toLocaleLowerCase()) >= 0) {\n el.checked = el.getAttribute(\"checked\") !== null;\n }\n },\n isTextualInput(el) {\n return FOCUSABLE_INPUTS.indexOf(el.type) >= 0;\n },\n isNowTriggerFormExternal(el, phxTriggerExternal) {\n return el.getAttribute && el.getAttribute(phxTriggerExternal) !== null && document.body.contains(el);\n },\n cleanChildNodes(container, phxUpdate) {\n if (DOM.isPhxUpdate(container, phxUpdate, [\"append\", \"prepend\", PHX_STREAM])) {\n const toRemove = [];\n container.childNodes.forEach((childNode) => {\n if (!childNode.id) {\n const isEmptyTextNode = childNode.nodeType === Node.TEXT_NODE && childNode.nodeValue.trim() === \"\";\n if (!isEmptyTextNode && childNode.nodeType !== Node.COMMENT_NODE) {\n logError(\n `only HTML element tags with an id are allowed inside containers with phx-update.\n\nremoving illegal node: \"${(childNode.outerHTML || childNode.nodeValue).trim()}\"\n\n`\n );\n }\n toRemove.push(childNode);\n }\n });\n toRemove.forEach((childNode) => childNode.remove());\n }\n },\n replaceRootContainer(container, tagName, attrs) {\n const retainedAttrs = /* @__PURE__ */ new Set([\n \"id\",\n PHX_SESSION,\n PHX_STATIC,\n PHX_MAIN,\n PHX_ROOT_ID\n ]);\n if (container.tagName.toLowerCase() === tagName.toLowerCase()) {\n Array.from(container.attributes).filter((attr) => !retainedAttrs.has(attr.name.toLowerCase())).forEach((attr) => container.removeAttribute(attr.name));\n Object.keys(attrs).filter((name) => !retainedAttrs.has(name.toLowerCase())).forEach((attr) => container.setAttribute(attr, attrs[attr]));\n return container;\n } else {\n const newContainer = document.createElement(tagName);\n Object.keys(attrs).forEach(\n (attr) => newContainer.setAttribute(attr, attrs[attr])\n );\n retainedAttrs.forEach(\n (attr) => newContainer.setAttribute(attr, container.getAttribute(attr))\n );\n newContainer.innerHTML = container.innerHTML;\n container.replaceWith(newContainer);\n return newContainer;\n }\n },\n getSticky(el, name, defaultVal) {\n const op = (DOM.private(el, \"sticky\") || []).find(\n ([existingName]) => name === existingName\n );\n if (op) {\n const [_name, _op, stashedResult] = op;\n return stashedResult;\n } else {\n return typeof defaultVal === \"function\" ? defaultVal() : defaultVal;\n }\n },\n deleteSticky(el, name) {\n this.updatePrivate(el, \"sticky\", [], (ops) => {\n return ops.filter(([existingName, _]) => existingName !== name);\n });\n },\n putSticky(el, name, op) {\n const stashedResult = op(el);\n this.updatePrivate(el, \"sticky\", [], (ops) => {\n const existingIndex = ops.findIndex(\n ([existingName]) => name === existingName\n );\n if (existingIndex >= 0) {\n ops[existingIndex] = [name, op, stashedResult];\n } else {\n ops.push([name, op, stashedResult]);\n }\n return ops;\n });\n },\n applyStickyOperations(el) {\n const ops = DOM.private(el, \"sticky\");\n if (!ops) {\n return;\n }\n ops.forEach(([name, op, _stashed]) => this.putSticky(el, name, op));\n },\n isLocked(el) {\n return el.hasAttribute && el.hasAttribute(PHX_REF_LOCK);\n },\n attributeIgnored(attribute, ignoredAttributes) {\n return ignoredAttributes.some(\n (toIgnore) => attribute.name == toIgnore || toIgnore === \"*\" || toIgnore.includes(\"*\") && attribute.name.match(toIgnore) != null\n );\n }\n};\nvar dom_default = DOM;\n\n// js/phoenix_live_view/upload_entry.js\nvar UploadEntry = class {\n static isActive(fileEl, file) {\n const isNew = file._phxRef === void 0;\n const activeRefs = fileEl.getAttribute(PHX_ACTIVE_ENTRY_REFS).split(\",\");\n const isActive = activeRefs.indexOf(LiveUploader.genFileRef(file)) >= 0;\n return file.size > 0 && (isNew || isActive);\n }\n static isPreflighted(fileEl, file) {\n const preflightedRefs = fileEl.getAttribute(PHX_PREFLIGHTED_REFS).split(\",\");\n const isPreflighted = preflightedRefs.indexOf(LiveUploader.genFileRef(file)) >= 0;\n return isPreflighted && this.isActive(fileEl, file);\n }\n static isPreflightInProgress(file) {\n return file._preflightInProgress === true;\n }\n static markPreflightInProgress(file) {\n file._preflightInProgress = true;\n }\n constructor(fileEl, file, view, autoUpload) {\n this.ref = LiveUploader.genFileRef(file);\n this.fileEl = fileEl;\n this.file = file;\n this.view = view;\n this.meta = null;\n this._isCancelled = false;\n this._isDone = false;\n this._progress = 0;\n this._lastProgressSent = -1;\n this._onDone = function() {\n };\n this._onElUpdated = this.onElUpdated.bind(this);\n this.fileEl.addEventListener(PHX_LIVE_FILE_UPDATED, this._onElUpdated);\n this.autoUpload = autoUpload;\n }\n metadata() {\n return this.meta;\n }\n progress(progress) {\n this._progress = Math.floor(progress);\n if (this._progress > this._lastProgressSent) {\n if (this._progress >= 100) {\n this._progress = 100;\n this._lastProgressSent = 100;\n this._isDone = true;\n this.view.pushFileProgress(this.fileEl, this.ref, 100, () => {\n LiveUploader.untrackFile(this.fileEl, this.file);\n this._onDone();\n });\n } else {\n this._lastProgressSent = this._progress;\n this.view.pushFileProgress(this.fileEl, this.ref, this._progress);\n }\n }\n }\n isCancelled() {\n return this._isCancelled;\n }\n cancel() {\n this.file._preflightInProgress = false;\n this._isCancelled = true;\n this._isDone = true;\n this._onDone();\n }\n isDone() {\n return this._isDone;\n }\n error(reason = \"failed\") {\n this.fileEl.removeEventListener(PHX_LIVE_FILE_UPDATED, this._onElUpdated);\n this.view.pushFileProgress(this.fileEl, this.ref, { error: reason });\n if (!this.isAutoUpload()) {\n LiveUploader.clearFiles(this.fileEl);\n }\n }\n isAutoUpload() {\n return this.autoUpload;\n }\n //private\n onDone(callback) {\n this._onDone = () => {\n this.fileEl.removeEventListener(PHX_LIVE_FILE_UPDATED, this._onElUpdated);\n callback();\n };\n }\n onElUpdated() {\n const activeRefs = this.fileEl.getAttribute(PHX_ACTIVE_ENTRY_REFS).split(\",\");\n if (activeRefs.indexOf(this.ref) === -1) {\n LiveUploader.untrackFile(this.fileEl, this.file);\n this.cancel();\n }\n }\n toPreflightPayload() {\n return {\n last_modified: this.file.lastModified,\n name: this.file.name,\n relative_path: this.file.webkitRelativePath,\n size: this.file.size,\n type: this.file.type,\n ref: this.ref,\n meta: typeof this.file.meta === \"function\" ? this.file.meta() : void 0\n };\n }\n uploader(uploaders) {\n if (this.meta.uploader) {\n const callback = uploaders[this.meta.uploader] || logError(`no uploader configured for ${this.meta.uploader}`);\n return { name: this.meta.uploader, callback };\n } else {\n return { name: \"channel\", callback: channelUploader };\n }\n }\n zipPostFlight(resp) {\n this.meta = resp.entries[this.ref];\n if (!this.meta) {\n logError(`no preflight upload response returned with ref ${this.ref}`, {\n input: this.fileEl,\n response: resp\n });\n }\n }\n};\n\n// js/phoenix_live_view/live_uploader.js\nvar liveUploaderFileRef = 0;\nvar LiveUploader = class _LiveUploader {\n static genFileRef(file) {\n const ref = file._phxRef;\n if (ref !== void 0) {\n return ref;\n } else {\n file._phxRef = (liveUploaderFileRef++).toString();\n return file._phxRef;\n }\n }\n static getEntryDataURL(inputEl, ref, callback) {\n const file = this.activeFiles(inputEl).find(\n (file2) => this.genFileRef(file2) === ref\n );\n callback(URL.createObjectURL(file));\n }\n static hasUploadsInProgress(formEl) {\n let active = 0;\n dom_default.findUploadInputs(formEl).forEach((input) => {\n if (input.getAttribute(PHX_PREFLIGHTED_REFS) !== input.getAttribute(PHX_DONE_REFS)) {\n active++;\n }\n });\n return active > 0;\n }\n static serializeUploads(inputEl) {\n const files = this.activeFiles(inputEl);\n const fileData = {};\n files.forEach((file) => {\n const entry = { path: inputEl.name };\n const uploadRef = inputEl.getAttribute(PHX_UPLOAD_REF);\n fileData[uploadRef] = fileData[uploadRef] || [];\n entry.ref = this.genFileRef(file);\n entry.last_modified = file.lastModified;\n entry.name = file.name || entry.ref;\n entry.relative_path = file.webkitRelativePath;\n entry.type = file.type;\n entry.size = file.size;\n if (typeof file.meta === \"function\") {\n entry.meta = file.meta();\n }\n fileData[uploadRef].push(entry);\n });\n return fileData;\n }\n static clearFiles(inputEl) {\n inputEl.value = null;\n inputEl.removeAttribute(PHX_UPLOAD_REF);\n dom_default.putPrivate(inputEl, \"files\", []);\n }\n static untrackFile(inputEl, file) {\n dom_default.putPrivate(\n inputEl,\n \"files\",\n dom_default.private(inputEl, \"files\").filter((f) => !Object.is(f, file))\n );\n }\n /**\n * @param {HTMLInputElement} inputEl\n * @param {Array} files\n * @param {DataTransfer} [dataTransfer]\n */\n static trackFiles(inputEl, files, dataTransfer) {\n if (inputEl.getAttribute(\"multiple\") !== null) {\n const newFiles = files.filter(\n (file) => !this.activeFiles(inputEl).find((f) => Object.is(f, file))\n );\n dom_default.updatePrivate(\n inputEl,\n \"files\",\n [],\n (existing) => existing.concat(newFiles)\n );\n inputEl.value = null;\n } else {\n if (dataTransfer && dataTransfer.files.length > 0) {\n inputEl.files = dataTransfer.files;\n }\n dom_default.putPrivate(inputEl, \"files\", files);\n }\n }\n static activeFileInputs(formEl) {\n const fileInputs = dom_default.findUploadInputs(formEl);\n return Array.from(fileInputs).filter(\n (el) => el.files && this.activeFiles(el).length > 0\n );\n }\n static activeFiles(input) {\n return (dom_default.private(input, \"files\") || []).filter(\n (f) => UploadEntry.isActive(input, f)\n );\n }\n static inputsAwaitingPreflight(formEl) {\n const fileInputs = dom_default.findUploadInputs(formEl);\n return Array.from(fileInputs).filter(\n (input) => this.filesAwaitingPreflight(input).length > 0\n );\n }\n static filesAwaitingPreflight(input) {\n return this.activeFiles(input).filter(\n (f) => !UploadEntry.isPreflighted(input, f) && !UploadEntry.isPreflightInProgress(f)\n );\n }\n static markPreflightInProgress(entries) {\n entries.forEach((entry) => UploadEntry.markPreflightInProgress(entry.file));\n }\n constructor(inputEl, view, onComplete) {\n this.autoUpload = dom_default.isAutoUpload(inputEl);\n this.view = view;\n this.onComplete = onComplete;\n this._entries = Array.from(\n _LiveUploader.filesAwaitingPreflight(inputEl) || []\n ).map((file) => new UploadEntry(inputEl, file, view, this.autoUpload));\n _LiveUploader.markPreflightInProgress(this._entries);\n this.numEntriesInProgress = this._entries.length;\n }\n isAutoUpload() {\n return this.autoUpload;\n }\n entries() {\n return this._entries;\n }\n initAdapterUpload(resp, onError, liveSocket) {\n this._entries = this._entries.map((entry) => {\n if (entry.isCancelled()) {\n this.numEntriesInProgress--;\n if (this.numEntriesInProgress === 0) {\n this.onComplete();\n }\n } else {\n entry.zipPostFlight(resp);\n entry.onDone(() => {\n this.numEntriesInProgress--;\n if (this.numEntriesInProgress === 0) {\n this.onComplete();\n }\n });\n }\n return entry;\n });\n const groupedEntries = this._entries.reduce((acc, entry) => {\n if (!entry.meta) {\n return acc;\n }\n const { name, callback } = entry.uploader(liveSocket.uploaders);\n acc[name] = acc[name] || { callback, entries: [] };\n acc[name].entries.push(entry);\n return acc;\n }, {});\n for (const name in groupedEntries) {\n const { callback, entries } = groupedEntries[name];\n callback(entries, onError, resp, liveSocket);\n }\n }\n};\n\n// js/phoenix_live_view/aria.js\nvar ARIA = {\n anyOf(instance, classes) {\n return classes.find((name) => instance instanceof name);\n },\n isFocusable(el, interactiveOnly) {\n return el instanceof HTMLAnchorElement && el.rel !== \"ignore\" || el instanceof HTMLAreaElement && el.href !== void 0 || !el.disabled && this.anyOf(el, [\n HTMLInputElement,\n HTMLSelectElement,\n HTMLTextAreaElement,\n HTMLButtonElement\n ]) || el instanceof HTMLIFrameElement || el.tabIndex >= 0 && el.getAttribute(\"aria-hidden\") !== \"true\" || !interactiveOnly && el.getAttribute(\"tabindex\") !== null && el.getAttribute(\"aria-hidden\") !== \"true\";\n },\n attemptFocus(el, interactiveOnly) {\n if (this.isFocusable(el, interactiveOnly)) {\n try {\n el.focus();\n } catch {\n }\n }\n return !!document.activeElement && document.activeElement.isSameNode(el);\n },\n focusFirstInteractive(el) {\n let child = el.firstElementChild;\n while (child) {\n if (this.attemptFocus(child, true) || this.focusFirstInteractive(child)) {\n return true;\n }\n child = child.nextElementSibling;\n }\n },\n focusFirst(el) {\n let child = el.firstElementChild;\n while (child) {\n if (this.attemptFocus(child) || this.focusFirst(child)) {\n return true;\n }\n child = child.nextElementSibling;\n }\n },\n focusLast(el) {\n let child = el.lastElementChild;\n while (child) {\n if (this.attemptFocus(child) || this.focusLast(child)) {\n return true;\n }\n child = child.previousElementSibling;\n }\n }\n};\nvar aria_default = ARIA;\n\n// js/phoenix_live_view/hooks.js\nvar Hooks = {\n LiveFileUpload: {\n activeRefs() {\n return this.el.getAttribute(PHX_ACTIVE_ENTRY_REFS);\n },\n preflightedRefs() {\n return this.el.getAttribute(PHX_PREFLIGHTED_REFS);\n },\n mounted() {\n this.js().ignoreAttributes(this.el, [\"value\"]);\n this.preflightedWas = this.preflightedRefs();\n },\n updated() {\n const newPreflights = this.preflightedRefs();\n if (this.preflightedWas !== newPreflights) {\n this.preflightedWas = newPreflights;\n if (newPreflights === \"\") {\n this.__view().cancelSubmit(this.el.form);\n }\n }\n if (this.activeRefs() === \"\") {\n this.el.value = null;\n }\n this.el.dispatchEvent(new CustomEvent(PHX_LIVE_FILE_UPDATED));\n }\n },\n LiveImgPreview: {\n mounted() {\n this.ref = this.el.getAttribute(\"data-phx-entry-ref\");\n this.inputEl = document.getElementById(\n this.el.getAttribute(PHX_UPLOAD_REF)\n );\n LiveUploader.getEntryDataURL(this.inputEl, this.ref, (url) => {\n this.url = url;\n this.el.src = url;\n });\n },\n destroyed() {\n URL.revokeObjectURL(this.url);\n }\n },\n FocusWrap: {\n mounted() {\n this.focusStart = this.el.firstElementChild;\n this.focusEnd = this.el.lastElementChild;\n this.focusStart.addEventListener(\"focus\", (e) => {\n if (!e.relatedTarget || !this.el.contains(e.relatedTarget)) {\n const nextFocus = e.target.nextElementSibling;\n aria_default.attemptFocus(nextFocus) || aria_default.focusFirst(nextFocus);\n } else {\n aria_default.focusLast(this.el);\n }\n });\n this.focusEnd.addEventListener(\"focus\", (e) => {\n if (!e.relatedTarget || !this.el.contains(e.relatedTarget)) {\n const nextFocus = e.target.previousElementSibling;\n aria_default.attemptFocus(nextFocus) || aria_default.focusLast(nextFocus);\n } else {\n aria_default.focusFirst(this.el);\n }\n });\n if (!this.el.contains(document.activeElement)) {\n this.el.addEventListener(\"phx:show-end\", () => this.el.focus());\n if (window.getComputedStyle(this.el).display !== \"none\") {\n aria_default.focusFirst(this.el);\n }\n }\n }\n }\n};\nvar findScrollContainer = (el) => {\n if ([\"HTML\", \"BODY\"].indexOf(el.nodeName.toUpperCase()) >= 0)\n return null;\n if ([\"scroll\", \"auto\"].indexOf(getComputedStyle(el).overflowY) >= 0)\n return el;\n return findScrollContainer(el.parentElement);\n};\nvar scrollTop = (scrollContainer) => {\n if (scrollContainer) {\n return scrollContainer.scrollTop;\n } else {\n return document.documentElement.scrollTop || document.body.scrollTop;\n }\n};\nvar bottom = (scrollContainer) => {\n if (scrollContainer) {\n return scrollContainer.getBoundingClientRect().bottom;\n } else {\n return window.innerHeight || document.documentElement.clientHeight;\n }\n};\nvar top = (scrollContainer) => {\n if (scrollContainer) {\n return scrollContainer.getBoundingClientRect().top;\n } else {\n return 0;\n }\n};\nvar isAtViewportTop = (el, scrollContainer) => {\n const rect = el.getBoundingClientRect();\n return Math.ceil(rect.top) >= top(scrollContainer) && Math.ceil(rect.left) >= 0 && Math.floor(rect.top) <= bottom(scrollContainer);\n};\nvar isAtViewportBottom = (el, scrollContainer) => {\n const rect = el.getBoundingClientRect();\n return Math.ceil(rect.bottom) >= top(scrollContainer) && Math.ceil(rect.left) >= 0 && Math.floor(rect.bottom) <= bottom(scrollContainer);\n};\nvar isWithinViewport = (el, scrollContainer) => {\n const rect = el.getBoundingClientRect();\n return Math.ceil(rect.top) >= top(scrollContainer) && Math.ceil(rect.left) >= 0 && Math.floor(rect.top) <= bottom(scrollContainer);\n};\nHooks.InfiniteScroll = {\n mounted() {\n this.scrollContainer = findScrollContainer(this.el);\n let scrollBefore = scrollTop(this.scrollContainer);\n let topOverran = false;\n const throttleInterval = 500;\n let pendingOp = null;\n const onTopOverrun = this.throttle(\n throttleInterval,\n (topEvent, firstChild) => {\n pendingOp = () => true;\n this.liveSocket.js().push(this.el, topEvent, {\n value: { id: firstChild.id, _overran: true },\n callback: () => {\n pendingOp = null;\n }\n });\n }\n );\n const onFirstChildAtTop = this.throttle(\n throttleInterval,\n (topEvent, firstChild) => {\n pendingOp = () => firstChild.scrollIntoView({ block: \"start\" });\n this.liveSocket.js().push(this.el, topEvent, {\n value: { id: firstChild.id },\n callback: () => {\n pendingOp = null;\n window.requestAnimationFrame(() => {\n if (!isWithinViewport(firstChild, this.scrollContainer)) {\n firstChild.scrollIntoView({ block: \"start\" });\n }\n });\n }\n });\n }\n );\n const onLastChildAtBottom = this.throttle(\n throttleInterval,\n (bottomEvent, lastChild) => {\n pendingOp = () => lastChild.scrollIntoView({ block: \"end\" });\n this.liveSocket.js().push(this.el, bottomEvent, {\n value: { id: lastChild.id },\n callback: () => {\n pendingOp = null;\n window.requestAnimationFrame(() => {\n if (!isWithinViewport(lastChild, this.scrollContainer)) {\n lastChild.scrollIntoView({ block: \"end\" });\n }\n });\n }\n });\n }\n );\n this.onScroll = (_e) => {\n const scrollNow = scrollTop(this.scrollContainer);\n if (pendingOp) {\n scrollBefore = scrollNow;\n return pendingOp();\n }\n const rect = this.findOverrunTarget();\n const topEvent = this.el.getAttribute(\n this.liveSocket.binding(\"viewport-top\")\n );\n const bottomEvent = this.el.getAttribute(\n this.liveSocket.binding(\"viewport-bottom\")\n );\n const lastChild = this.el.lastElementChild;\n const firstChild = this.el.firstElementChild;\n const isScrollingUp = scrollNow < scrollBefore;\n const isScrollingDown = scrollNow > scrollBefore;\n if (isScrollingUp && topEvent && !topOverran && rect.top >= 0) {\n topOverran = true;\n onTopOverrun(topEvent, firstChild);\n } else if (isScrollingDown && topOverran && rect.top <= 0) {\n topOverran = false;\n }\n if (topEvent && isScrollingUp && isAtViewportTop(firstChild, this.scrollContainer)) {\n onFirstChildAtTop(topEvent, firstChild);\n } else if (bottomEvent && isScrollingDown && isAtViewportBottom(lastChild, this.scrollContainer)) {\n onLastChildAtBottom(bottomEvent, lastChild);\n }\n scrollBefore = scrollNow;\n };\n if (this.scrollContainer) {\n this.scrollContainer.addEventListener(\"scroll\", this.onScroll);\n } else {\n window.addEventListener(\"scroll\", this.onScroll);\n }\n },\n destroyed() {\n if (this.scrollContainer) {\n this.scrollContainer.removeEventListener(\"scroll\", this.onScroll);\n } else {\n window.removeEventListener(\"scroll\", this.onScroll);\n }\n },\n throttle(interval, callback) {\n let lastCallAt = 0;\n let timer;\n return (...args) => {\n const now = Date.now();\n const remainingTime = interval - (now - lastCallAt);\n if (remainingTime <= 0 || remainingTime > interval) {\n if (timer) {\n clearTimeout(timer);\n timer = null;\n }\n lastCallAt = now;\n callback(...args);\n } else if (!timer) {\n timer = setTimeout(() => {\n lastCallAt = Date.now();\n timer = null;\n callback(...args);\n }, remainingTime);\n }\n };\n },\n findOverrunTarget() {\n let rect;\n const overrunTarget = this.el.getAttribute(\n this.liveSocket.binding(PHX_VIEWPORT_OVERRUN_TARGET)\n );\n if (overrunTarget) {\n const overrunEl = document.getElementById(overrunTarget);\n if (overrunEl) {\n rect = overrunEl.getBoundingClientRect();\n } else {\n throw new Error(\"did not find element with id \" + overrunTarget);\n }\n } else {\n rect = this.el.getBoundingClientRect();\n }\n return rect;\n }\n};\nvar hooks_default = Hooks;\n\n// js/phoenix_live_view/element_ref.js\nvar ElementRef = class {\n static onUnlock(el, callback) {\n if (!dom_default.isLocked(el) && !el.closest(`[${PHX_REF_LOCK}]`)) {\n return callback();\n }\n const closestLock = el.closest(`[${PHX_REF_LOCK}]`);\n const ref = closestLock.closest(`[${PHX_REF_LOCK}]`).getAttribute(PHX_REF_LOCK);\n closestLock.addEventListener(\n `phx:undo-lock:${ref}`,\n () => {\n callback();\n },\n { once: true }\n );\n }\n constructor(el) {\n this.el = el;\n this.loadingRef = el.hasAttribute(PHX_REF_LOADING) ? parseInt(el.getAttribute(PHX_REF_LOADING), 10) : null;\n this.lockRef = el.hasAttribute(PHX_REF_LOCK) ? parseInt(el.getAttribute(PHX_REF_LOCK), 10) : null;\n }\n // public\n maybeUndo(ref, phxEvent, eachCloneCallback) {\n if (!this.isWithin(ref)) {\n dom_default.updatePrivate(this.el, PHX_PENDING_REFS, [], (pendingRefs) => {\n pendingRefs.push(ref);\n return pendingRefs;\n });\n return;\n }\n this.undoLocks(ref, phxEvent, eachCloneCallback);\n this.undoLoading(ref, phxEvent);\n dom_default.updatePrivate(this.el, PHX_PENDING_REFS, [], (pendingRefs) => {\n return pendingRefs.filter((pendingRef) => {\n let opts = {\n detail: { ref: pendingRef, event: phxEvent },\n bubbles: true,\n cancelable: false\n };\n if (this.loadingRef && this.loadingRef > pendingRef) {\n this.el.dispatchEvent(\n new CustomEvent(`phx:undo-loading:${pendingRef}`, opts)\n );\n }\n if (this.lockRef && this.lockRef > pendingRef) {\n this.el.dispatchEvent(\n new CustomEvent(`phx:undo-lock:${pendingRef}`, opts)\n );\n }\n return pendingRef > ref;\n });\n });\n if (this.isFullyResolvedBy(ref)) {\n this.el.removeAttribute(PHX_REF_SRC);\n }\n }\n // private\n isWithin(ref) {\n return !(this.loadingRef !== null && this.loadingRef > ref && this.lockRef !== null && this.lockRef > ref);\n }\n // Check for cloned PHX_REF_LOCK element that has been morphed behind\n // the scenes while this element was locked in the DOM.\n // When we apply the cloned tree to the active DOM element, we must\n //\n // 1. execute pending mounted hooks for nodes now in the DOM\n // 2. undo any ref inside the cloned tree that has since been ack'd\n undoLocks(ref, phxEvent, eachCloneCallback) {\n if (!this.isLockUndoneBy(ref)) {\n return;\n }\n const clonedTree = dom_default.private(this.el, PHX_REF_LOCK);\n if (clonedTree) {\n eachCloneCallback(clonedTree);\n dom_default.deletePrivate(this.el, PHX_REF_LOCK);\n }\n this.el.removeAttribute(PHX_REF_LOCK);\n const opts = {\n detail: { ref, event: phxEvent },\n bubbles: true,\n cancelable: false\n };\n this.el.dispatchEvent(\n new CustomEvent(`phx:undo-lock:${this.lockRef}`, opts)\n );\n }\n undoLoading(ref, phxEvent) {\n if (!this.isLoadingUndoneBy(ref)) {\n if (this.canUndoLoading(ref) && this.el.classList.contains(\"phx-submit-loading\")) {\n this.el.classList.remove(\"phx-change-loading\");\n }\n return;\n }\n if (this.canUndoLoading(ref)) {\n this.el.removeAttribute(PHX_REF_LOADING);\n const disabledVal = this.el.getAttribute(PHX_DISABLED);\n const readOnlyVal = this.el.getAttribute(PHX_READONLY);\n if (readOnlyVal !== null) {\n this.el.readOnly = readOnlyVal === \"true\" ? true : false;\n this.el.removeAttribute(PHX_READONLY);\n }\n if (disabledVal !== null) {\n this.el.disabled = disabledVal === \"true\" ? true : false;\n this.el.removeAttribute(PHX_DISABLED);\n }\n const disableRestore = this.el.getAttribute(PHX_DISABLE_WITH_RESTORE);\n if (disableRestore !== null) {\n this.el.textContent = disableRestore;\n this.el.removeAttribute(PHX_DISABLE_WITH_RESTORE);\n }\n const opts = {\n detail: { ref, event: phxEvent },\n bubbles: true,\n cancelable: false\n };\n this.el.dispatchEvent(\n new CustomEvent(`phx:undo-loading:${this.loadingRef}`, opts)\n );\n }\n PHX_EVENT_CLASSES.forEach((name) => {\n if (name !== \"phx-submit-loading\" || this.canUndoLoading(ref)) {\n dom_default.removeClass(this.el, name);\n }\n });\n }\n isLoadingUndoneBy(ref) {\n return this.loadingRef === null ? false : this.loadingRef <= ref;\n }\n isLockUndoneBy(ref) {\n return this.lockRef === null ? false : this.lockRef <= ref;\n }\n isFullyResolvedBy(ref) {\n return (this.loadingRef === null || this.loadingRef <= ref) && (this.lockRef === null || this.lockRef <= ref);\n }\n // only remove the phx-submit-loading class if we are not locked\n canUndoLoading(ref) {\n return this.lockRef === null || this.lockRef <= ref;\n }\n};\n\n// js/phoenix_live_view/dom_post_morph_restorer.js\nvar DOMPostMorphRestorer = class {\n constructor(containerBefore, containerAfter, updateType) {\n const idsBefore = /* @__PURE__ */ new Set();\n const idsAfter = new Set(\n [...containerAfter.children].map((child) => child.id)\n );\n const elementsToModify = [];\n Array.from(containerBefore.children).forEach((child) => {\n if (child.id) {\n idsBefore.add(child.id);\n if (idsAfter.has(child.id)) {\n const previousElementId = child.previousElementSibling && child.previousElementSibling.id;\n elementsToModify.push({\n elementId: child.id,\n previousElementId\n });\n }\n }\n });\n this.containerId = containerAfter.id;\n this.updateType = updateType;\n this.elementsToModify = elementsToModify;\n this.elementIdsToAdd = [...idsAfter].filter((id) => !idsBefore.has(id));\n }\n // We do the following to optimize append/prepend operations:\n // 1) Track ids of modified elements & of new elements\n // 2) All the modified elements are put back in the correct position in the DOM tree\n // by storing the id of their previous sibling\n // 3) New elements are going to be put in the right place by morphdom during append.\n // For prepend, we move them to the first position in the container\n perform() {\n const container = dom_default.byId(this.containerId);\n if (!container) {\n return;\n }\n this.elementsToModify.forEach((elementToModify) => {\n if (elementToModify.previousElementId) {\n maybe(\n document.getElementById(elementToModify.previousElementId),\n (previousElem) => {\n maybe(\n document.getElementById(elementToModify.elementId),\n (elem) => {\n const isInRightPlace = elem.previousElementSibling && elem.previousElementSibling.id == previousElem.id;\n if (!isInRightPlace) {\n previousElem.insertAdjacentElement(\"afterend\", elem);\n }\n }\n );\n }\n );\n } else {\n maybe(document.getElementById(elementToModify.elementId), (elem) => {\n const isInRightPlace = elem.previousElementSibling == null;\n if (!isInRightPlace) {\n container.insertAdjacentElement(\"afterbegin\", elem);\n }\n });\n }\n });\n if (this.updateType == \"prepend\") {\n this.elementIdsToAdd.reverse().forEach((elemId) => {\n maybe(\n document.getElementById(elemId),\n (elem) => container.insertAdjacentElement(\"afterbegin\", elem)\n );\n });\n }\n }\n};\n\n// ../node_modules/morphdom/dist/morphdom-esm.js\nvar DOCUMENT_FRAGMENT_NODE = 11;\nfunction morphAttrs(fromNode, toNode) {\n var toNodeAttrs = toNode.attributes;\n var attr;\n var attrName;\n var attrNamespaceURI;\n var attrValue;\n var fromValue;\n if (toNode.nodeType === DOCUMENT_FRAGMENT_NODE || fromNode.nodeType === DOCUMENT_FRAGMENT_NODE) {\n return;\n }\n for (var i = toNodeAttrs.length - 1; i >= 0; i--) {\n attr = toNodeAttrs[i];\n attrName = attr.name;\n attrNamespaceURI = attr.namespaceURI;\n attrValue = attr.value;\n if (attrNamespaceURI) {\n attrName = attr.localName || attrName;\n fromValue = fromNode.getAttributeNS(attrNamespaceURI, attrName);\n if (fromValue !== attrValue) {\n if (attr.prefix === \"xmlns\") {\n attrName = attr.name;\n }\n fromNode.setAttributeNS(attrNamespaceURI, attrName, attrValue);\n }\n } else {\n fromValue = fromNode.getAttribute(attrName);\n if (fromValue !== attrValue) {\n fromNode.setAttribute(attrName, attrValue);\n }\n }\n }\n var fromNodeAttrs = fromNode.attributes;\n for (var d = fromNodeAttrs.length - 1; d >= 0; d--) {\n attr = fromNodeAttrs[d];\n attrName = attr.name;\n attrNamespaceURI = attr.namespaceURI;\n if (attrNamespaceURI) {\n attrName = attr.localName || attrName;\n if (!toNode.hasAttributeNS(attrNamespaceURI, attrName)) {\n fromNode.removeAttributeNS(attrNamespaceURI, attrName);\n }\n } else {\n if (!toNode.hasAttribute(attrName)) {\n fromNode.removeAttribute(attrName);\n }\n }\n }\n}\nvar range;\nvar NS_XHTML = \"http://www.w3.org/1999/xhtml\";\nvar doc = typeof document === \"undefined\" ? void 0 : document;\nvar HAS_TEMPLATE_SUPPORT = !!doc && \"content\" in doc.createElement(\"template\");\nvar HAS_RANGE_SUPPORT = !!doc && doc.createRange && \"createContextualFragment\" in doc.createRange();\nfunction createFragmentFromTemplate(str) {\n var template = doc.createElement(\"template\");\n template.innerHTML = str;\n return template.content.childNodes[0];\n}\nfunction createFragmentFromRange(str) {\n if (!range) {\n range = doc.createRange();\n range.selectNode(doc.body);\n }\n var fragment = range.createContextualFragment(str);\n return fragment.childNodes[0];\n}\nfunction createFragmentFromWrap(str) {\n var fragment = doc.createElement(\"body\");\n fragment.innerHTML = str;\n return fragment.childNodes[0];\n}\nfunction toElement(str) {\n str = str.trim();\n if (HAS_TEMPLATE_SUPPORT) {\n return createFragmentFromTemplate(str);\n } else if (HAS_RANGE_SUPPORT) {\n return createFragmentFromRange(str);\n }\n return createFragmentFromWrap(str);\n}\nfunction compareNodeNames(fromEl, toEl) {\n var fromNodeName = fromEl.nodeName;\n var toNodeName = toEl.nodeName;\n var fromCodeStart, toCodeStart;\n if (fromNodeName === toNodeName) {\n return true;\n }\n fromCodeStart = fromNodeName.charCodeAt(0);\n toCodeStart = toNodeName.charCodeAt(0);\n if (fromCodeStart <= 90 && toCodeStart >= 97) {\n return fromNodeName === toNodeName.toUpperCase();\n } else if (toCodeStart <= 90 && fromCodeStart >= 97) {\n return toNodeName === fromNodeName.toUpperCase();\n } else {\n return false;\n }\n}\nfunction createElementNS(name, namespaceURI) {\n return !namespaceURI || namespaceURI === NS_XHTML ? doc.createElement(name) : doc.createElementNS(namespaceURI, name);\n}\nfunction moveChildren(fromEl, toEl) {\n var curChild = fromEl.firstChild;\n while (curChild) {\n var nextChild = curChild.nextSibling;\n toEl.appendChild(curChild);\n curChild = nextChild;\n }\n return toEl;\n}\nfunction syncBooleanAttrProp(fromEl, toEl, name) {\n if (fromEl[name] !== toEl[name]) {\n fromEl[name] = toEl[name];\n if (fromEl[name]) {\n fromEl.setAttribute(name, \"\");\n } else {\n fromEl.removeAttribute(name);\n }\n }\n}\nvar specialElHandlers = {\n OPTION: function(fromEl, toEl) {\n var parentNode = fromEl.parentNode;\n if (parentNode) {\n var parentName = parentNode.nodeName.toUpperCase();\n if (parentName === \"OPTGROUP\") {\n parentNode = parentNode.parentNode;\n parentName = parentNode && parentNode.nodeName.toUpperCase();\n }\n if (parentName === \"SELECT\" && !parentNode.hasAttribute(\"multiple\")) {\n if (fromEl.hasAttribute(\"selected\") && !toEl.selected) {\n fromEl.setAttribute(\"selected\", \"selected\");\n fromEl.removeAttribute(\"selected\");\n }\n parentNode.selectedIndex = -1;\n }\n }\n syncBooleanAttrProp(fromEl, toEl, \"selected\");\n },\n /**\n * The \"value\" attribute is special for the element since it sets\n * the initial value. Changing the \"value\" attribute without changing the\n * \"value\" property will have no effect since it is only used to the set the\n * initial value. Similar for the \"checked\" attribute, and \"disabled\".\n */\n INPUT: function(fromEl, toEl) {\n syncBooleanAttrProp(fromEl, toEl, \"checked\");\n syncBooleanAttrProp(fromEl, toEl, \"disabled\");\n if (fromEl.value !== toEl.value) {\n fromEl.value = toEl.value;\n }\n if (!toEl.hasAttribute(\"value\")) {\n fromEl.removeAttribute(\"value\");\n }\n },\n TEXTAREA: function(fromEl, toEl) {\n var newValue = toEl.value;\n if (fromEl.value !== newValue) {\n fromEl.value = newValue;\n }\n var firstChild = fromEl.firstChild;\n if (firstChild) {\n var oldValue = firstChild.nodeValue;\n if (oldValue == newValue || !newValue && oldValue == fromEl.placeholder) {\n return;\n }\n firstChild.nodeValue = newValue;\n }\n },\n SELECT: function(fromEl, toEl) {\n if (!toEl.hasAttribute(\"multiple\")) {\n var selectedIndex = -1;\n var i = 0;\n var curChild = fromEl.firstChild;\n var optgroup;\n var nodeName;\n while (curChild) {\n nodeName = curChild.nodeName && curChild.nodeName.toUpperCase();\n if (nodeName === \"OPTGROUP\") {\n optgroup = curChild;\n curChild = optgroup.firstChild;\n if (!curChild) {\n curChild = optgroup.nextSibling;\n optgroup = null;\n }\n } else {\n if (nodeName === \"OPTION\") {\n if (curChild.hasAttribute(\"selected\")) {\n selectedIndex = i;\n break;\n }\n i++;\n }\n curChild = curChild.nextSibling;\n if (!curChild && optgroup) {\n curChild = optgroup.nextSibling;\n optgroup = null;\n }\n }\n }\n fromEl.selectedIndex = selectedIndex;\n }\n }\n};\nvar ELEMENT_NODE = 1;\nvar DOCUMENT_FRAGMENT_NODE$1 = 11;\nvar TEXT_NODE = 3;\nvar COMMENT_NODE = 8;\nfunction noop() {\n}\nfunction defaultGetNodeKey(node) {\n if (node) {\n return node.getAttribute && node.getAttribute(\"id\") || node.id;\n }\n}\nfunction morphdomFactory(morphAttrs2) {\n return function morphdom2(fromNode, toNode, options) {\n if (!options) {\n options = {};\n }\n if (typeof toNode === \"string\") {\n if (fromNode.nodeName === \"#document\" || fromNode.nodeName === \"HTML\") {\n var toNodeHtml = toNode;\n toNode = doc.createElement(\"html\");\n toNode.innerHTML = toNodeHtml;\n } else if (fromNode.nodeName === \"BODY\") {\n var toNodeBody = toNode;\n toNode = doc.createElement(\"html\");\n toNode.innerHTML = toNodeBody;\n var bodyElement = toNode.querySelector(\"body\");\n if (bodyElement) {\n toNode = bodyElement;\n }\n } else {\n toNode = toElement(toNode);\n }\n } else if (toNode.nodeType === DOCUMENT_FRAGMENT_NODE$1) {\n toNode = toNode.firstElementChild;\n }\n var getNodeKey = options.getNodeKey || defaultGetNodeKey;\n var onBeforeNodeAdded = options.onBeforeNodeAdded || noop;\n var onNodeAdded = options.onNodeAdded || noop;\n var onBeforeElUpdated = options.onBeforeElUpdated || noop;\n var onElUpdated = options.onElUpdated || noop;\n var onBeforeNodeDiscarded = options.onBeforeNodeDiscarded || noop;\n var onNodeDiscarded = options.onNodeDiscarded || noop;\n var onBeforeElChildrenUpdated = options.onBeforeElChildrenUpdated || noop;\n var skipFromChildren = options.skipFromChildren || noop;\n var addChild = options.addChild || function(parent, child) {\n return parent.appendChild(child);\n };\n var childrenOnly = options.childrenOnly === true;\n var fromNodesLookup = /* @__PURE__ */ Object.create(null);\n var keyedRemovalList = [];\n function addKeyedRemoval(key) {\n keyedRemovalList.push(key);\n }\n function walkDiscardedChildNodes(node, skipKeyedNodes) {\n if (node.nodeType === ELEMENT_NODE) {\n var curChild = node.firstChild;\n while (curChild) {\n var key = void 0;\n if (skipKeyedNodes && (key = getNodeKey(curChild))) {\n addKeyedRemoval(key);\n } else {\n onNodeDiscarded(curChild);\n if (curChild.firstChild) {\n walkDiscardedChildNodes(curChild, skipKeyedNodes);\n }\n }\n curChild = curChild.nextSibling;\n }\n }\n }\n function removeNode(node, parentNode, skipKeyedNodes) {\n if (onBeforeNodeDiscarded(node) === false) {\n return;\n }\n if (parentNode) {\n parentNode.removeChild(node);\n }\n onNodeDiscarded(node);\n walkDiscardedChildNodes(node, skipKeyedNodes);\n }\n function indexTree(node) {\n if (node.nodeType === ELEMENT_NODE || node.nodeType === DOCUMENT_FRAGMENT_NODE$1) {\n var curChild = node.firstChild;\n while (curChild) {\n var key = getNodeKey(curChild);\n if (key) {\n fromNodesLookup[key] = curChild;\n }\n indexTree(curChild);\n curChild = curChild.nextSibling;\n }\n }\n }\n indexTree(fromNode);\n function handleNodeAdded(el) {\n onNodeAdded(el);\n var curChild = el.firstChild;\n while (curChild) {\n var nextSibling = curChild.nextSibling;\n var key = getNodeKey(curChild);\n if (key) {\n var unmatchedFromEl = fromNodesLookup[key];\n if (unmatchedFromEl && compareNodeNames(curChild, unmatchedFromEl)) {\n curChild.parentNode.replaceChild(unmatchedFromEl, curChild);\n morphEl(unmatchedFromEl, curChild);\n } else {\n handleNodeAdded(curChild);\n }\n } else {\n handleNodeAdded(curChild);\n }\n curChild = nextSibling;\n }\n }\n function cleanupFromEl(fromEl, curFromNodeChild, curFromNodeKey) {\n while (curFromNodeChild) {\n var fromNextSibling = curFromNodeChild.nextSibling;\n if (curFromNodeKey = getNodeKey(curFromNodeChild)) {\n addKeyedRemoval(curFromNodeKey);\n } else {\n removeNode(\n curFromNodeChild,\n fromEl,\n true\n /* skip keyed nodes */\n );\n }\n curFromNodeChild = fromNextSibling;\n }\n }\n function morphEl(fromEl, toEl, childrenOnly2) {\n var toElKey = getNodeKey(toEl);\n if (toElKey) {\n delete fromNodesLookup[toElKey];\n }\n if (!childrenOnly2) {\n var beforeUpdateResult = onBeforeElUpdated(fromEl, toEl);\n if (beforeUpdateResult === false) {\n return;\n } else if (beforeUpdateResult instanceof HTMLElement) {\n fromEl = beforeUpdateResult;\n indexTree(fromEl);\n }\n morphAttrs2(fromEl, toEl);\n onElUpdated(fromEl);\n if (onBeforeElChildrenUpdated(fromEl, toEl) === false) {\n return;\n }\n }\n if (fromEl.nodeName !== \"TEXTAREA\") {\n morphChildren(fromEl, toEl);\n } else {\n specialElHandlers.TEXTAREA(fromEl, toEl);\n }\n }\n function morphChildren(fromEl, toEl) {\n var skipFrom = skipFromChildren(fromEl, toEl);\n var curToNodeChild = toEl.firstChild;\n var curFromNodeChild = fromEl.firstChild;\n var curToNodeKey;\n var curFromNodeKey;\n var fromNextSibling;\n var toNextSibling;\n var matchingFromEl;\n outer:\n while (curToNodeChild) {\n toNextSibling = curToNodeChild.nextSibling;\n curToNodeKey = getNodeKey(curToNodeChild);\n while (!skipFrom && curFromNodeChild) {\n fromNextSibling = curFromNodeChild.nextSibling;\n if (curToNodeChild.isSameNode && curToNodeChild.isSameNode(curFromNodeChild)) {\n curToNodeChild = toNextSibling;\n curFromNodeChild = fromNextSibling;\n continue outer;\n }\n curFromNodeKey = getNodeKey(curFromNodeChild);\n var curFromNodeType = curFromNodeChild.nodeType;\n var isCompatible = void 0;\n if (curFromNodeType === curToNodeChild.nodeType) {\n if (curFromNodeType === ELEMENT_NODE) {\n if (curToNodeKey) {\n if (curToNodeKey !== curFromNodeKey) {\n if (matchingFromEl = fromNodesLookup[curToNodeKey]) {\n if (fromNextSibling === matchingFromEl) {\n isCompatible = false;\n } else {\n fromEl.insertBefore(matchingFromEl, curFromNodeChild);\n if (curFromNodeKey) {\n addKeyedRemoval(curFromNodeKey);\n } else {\n removeNode(\n curFromNodeChild,\n fromEl,\n true\n /* skip keyed nodes */\n );\n }\n curFromNodeChild = matchingFromEl;\n curFromNodeKey = getNodeKey(curFromNodeChild);\n }\n } else {\n isCompatible = false;\n }\n }\n } else if (curFromNodeKey) {\n isCompatible = false;\n }\n isCompatible = isCompatible !== false && compareNodeNames(curFromNodeChild, curToNodeChild);\n if (isCompatible) {\n morphEl(curFromNodeChild, curToNodeChild);\n }\n } else if (curFromNodeType === TEXT_NODE || curFromNodeType == COMMENT_NODE) {\n isCompatible = true;\n if (curFromNodeChild.nodeValue !== curToNodeChild.nodeValue) {\n curFromNodeChild.nodeValue = curToNodeChild.nodeValue;\n }\n }\n }\n if (isCompatible) {\n curToNodeChild = toNextSibling;\n curFromNodeChild = fromNextSibling;\n continue outer;\n }\n if (curFromNodeKey) {\n addKeyedRemoval(curFromNodeKey);\n } else {\n removeNode(\n curFromNodeChild,\n fromEl,\n true\n /* skip keyed nodes */\n );\n }\n curFromNodeChild = fromNextSibling;\n }\n if (curToNodeKey && (matchingFromEl = fromNodesLookup[curToNodeKey]) && compareNodeNames(matchingFromEl, curToNodeChild)) {\n if (!skipFrom) {\n addChild(fromEl, matchingFromEl);\n }\n morphEl(matchingFromEl, curToNodeChild);\n } else {\n var onBeforeNodeAddedResult = onBeforeNodeAdded(curToNodeChild);\n if (onBeforeNodeAddedResult !== false) {\n if (onBeforeNodeAddedResult) {\n curToNodeChild = onBeforeNodeAddedResult;\n }\n if (curToNodeChild.actualize) {\n curToNodeChild = curToNodeChild.actualize(fromEl.ownerDocument || doc);\n }\n addChild(fromEl, curToNodeChild);\n handleNodeAdded(curToNodeChild);\n }\n }\n curToNodeChild = toNextSibling;\n curFromNodeChild = fromNextSibling;\n }\n cleanupFromEl(fromEl, curFromNodeChild, curFromNodeKey);\n var specialElHandler = specialElHandlers[fromEl.nodeName];\n if (specialElHandler) {\n specialElHandler(fromEl, toEl);\n }\n }\n var morphedNode = fromNode;\n var morphedNodeType = morphedNode.nodeType;\n var toNodeType = toNode.nodeType;\n if (!childrenOnly) {\n if (morphedNodeType === ELEMENT_NODE) {\n if (toNodeType === ELEMENT_NODE) {\n if (!compareNodeNames(fromNode, toNode)) {\n onNodeDiscarded(fromNode);\n morphedNode = moveChildren(fromNode, createElementNS(toNode.nodeName, toNode.namespaceURI));\n }\n } else {\n morphedNode = toNode;\n }\n } else if (morphedNodeType === TEXT_NODE || morphedNodeType === COMMENT_NODE) {\n if (toNodeType === morphedNodeType) {\n if (morphedNode.nodeValue !== toNode.nodeValue) {\n morphedNode.nodeValue = toNode.nodeValue;\n }\n return morphedNode;\n } else {\n morphedNode = toNode;\n }\n }\n }\n if (morphedNode === toNode) {\n onNodeDiscarded(fromNode);\n } else {\n if (toNode.isSameNode && toNode.isSameNode(morphedNode)) {\n return;\n }\n morphEl(morphedNode, toNode, childrenOnly);\n if (keyedRemovalList) {\n for (var i = 0, len = keyedRemovalList.length; i < len; i++) {\n var elToRemove = fromNodesLookup[keyedRemovalList[i]];\n if (elToRemove) {\n removeNode(elToRemove, elToRemove.parentNode, false);\n }\n }\n }\n }\n if (!childrenOnly && morphedNode !== fromNode && fromNode.parentNode) {\n if (morphedNode.actualize) {\n morphedNode = morphedNode.actualize(fromNode.ownerDocument || doc);\n }\n fromNode.parentNode.replaceChild(morphedNode, fromNode);\n }\n return morphedNode;\n };\n}\nvar morphdom = morphdomFactory(morphAttrs);\nvar morphdom_esm_default = morphdom;\n\n// js/phoenix_live_view/dom_patch.js\nvar DOMPatch = class {\n constructor(view, container, id, html, streams, targetCID, opts = {}) {\n this.view = view;\n this.liveSocket = view.liveSocket;\n this.container = container;\n this.id = id;\n this.rootID = view.root.id;\n this.html = html;\n this.streams = streams;\n this.streamInserts = {};\n this.streamComponentRestore = {};\n this.targetCID = targetCID;\n this.cidPatch = isCid(this.targetCID);\n this.pendingRemoves = [];\n this.phxRemove = this.liveSocket.binding(\"remove\");\n this.targetContainer = this.isCIDPatch() ? this.targetCIDContainer(html) : container;\n this.callbacks = {\n beforeadded: [],\n beforeupdated: [],\n beforephxChildAdded: [],\n afteradded: [],\n afterupdated: [],\n afterdiscarded: [],\n afterphxChildAdded: [],\n aftertransitionsDiscarded: []\n };\n this.withChildren = opts.withChildren || opts.undoRef || false;\n this.undoRef = opts.undoRef;\n }\n before(kind, callback) {\n this.callbacks[`before${kind}`].push(callback);\n }\n after(kind, callback) {\n this.callbacks[`after${kind}`].push(callback);\n }\n trackBefore(kind, ...args) {\n this.callbacks[`before${kind}`].forEach((callback) => callback(...args));\n }\n trackAfter(kind, ...args) {\n this.callbacks[`after${kind}`].forEach((callback) => callback(...args));\n }\n markPrunableContentForRemoval() {\n const phxUpdate = this.liveSocket.binding(PHX_UPDATE);\n dom_default.all(\n this.container,\n `[${phxUpdate}=append] > *, [${phxUpdate}=prepend] > *`,\n (el) => {\n el.setAttribute(PHX_PRUNE, \"\");\n }\n );\n }\n perform(isJoinPatch) {\n const { view, liveSocket, html, container } = this;\n let targetContainer = this.targetContainer;\n if (this.isCIDPatch() && !this.targetContainer) {\n return;\n }\n if (this.isCIDPatch()) {\n const closestLock = targetContainer.closest(`[${PHX_REF_LOCK}]`);\n if (closestLock && !closestLock.isSameNode(targetContainer)) {\n const clonedTree = dom_default.private(closestLock, PHX_REF_LOCK);\n if (clonedTree) {\n targetContainer = clonedTree.querySelector(\n `[data-phx-component=\"${this.targetCID}\"]`\n );\n }\n }\n }\n const focused = liveSocket.getActiveElement();\n const { selectionStart, selectionEnd } = focused && dom_default.hasSelectionRange(focused) ? focused : {};\n const phxUpdate = liveSocket.binding(PHX_UPDATE);\n const phxViewportTop = liveSocket.binding(PHX_VIEWPORT_TOP);\n const phxViewportBottom = liveSocket.binding(PHX_VIEWPORT_BOTTOM);\n const phxTriggerExternal = liveSocket.binding(PHX_TRIGGER_ACTION);\n const added = [];\n const updates = [];\n const appendPrependUpdates = [];\n let portalCallbacks = [];\n let externalFormTriggered = null;\n const morph = (targetContainer2, source, withChildren = this.withChildren) => {\n const morphCallbacks = {\n // normally, we are running with childrenOnly, as the patch HTML for a LV\n // does not include the LV attrs (data-phx-session, etc.)\n // when we are patching a live component, we do want to patch the root element as well;\n // another case is the recursive patch of a stream item that was kept on reset (-> onBeforeNodeAdded)\n childrenOnly: targetContainer2.getAttribute(PHX_COMPONENT) === null && !withChildren,\n getNodeKey: (node) => {\n if (dom_default.isPhxDestroyed(node)) {\n return null;\n }\n if (isJoinPatch) {\n return node.id;\n }\n return node.id || node.getAttribute && node.getAttribute(PHX_MAGIC_ID);\n },\n // skip indexing from children when container is stream\n skipFromChildren: (from) => {\n return from.getAttribute(phxUpdate) === PHX_STREAM;\n },\n // tell morphdom how to add a child\n addChild: (parent, child) => {\n const { ref, streamAt } = this.getStreamInsert(child);\n if (ref === void 0) {\n return parent.appendChild(child);\n }\n this.setStreamRef(child, ref);\n if (streamAt === 0) {\n parent.insertAdjacentElement(\"afterbegin\", child);\n } else if (streamAt === -1) {\n const lastChild = parent.lastElementChild;\n if (lastChild && !lastChild.hasAttribute(PHX_STREAM_REF)) {\n const nonStreamChild = Array.from(parent.children).find(\n (c) => !c.hasAttribute(PHX_STREAM_REF)\n );\n parent.insertBefore(child, nonStreamChild);\n } else {\n parent.appendChild(child);\n }\n } else if (streamAt > 0) {\n const sibling = Array.from(parent.children)[streamAt];\n parent.insertBefore(child, sibling);\n }\n },\n onBeforeNodeAdded: (el) => {\n if (this.getStreamInsert(el)?.updateOnly && !this.streamComponentRestore[el.id]) {\n return false;\n }\n dom_default.maintainPrivateHooks(el, el, phxViewportTop, phxViewportBottom);\n this.trackBefore(\"added\", el);\n let morphedEl = el;\n if (this.streamComponentRestore[el.id]) {\n morphedEl = this.streamComponentRestore[el.id];\n delete this.streamComponentRestore[el.id];\n morph(morphedEl, el, true);\n }\n return morphedEl;\n },\n onNodeAdded: (el) => {\n if (el.getAttribute) {\n this.maybeReOrderStream(el, true);\n }\n if (dom_default.isPortalTemplate(el)) {\n portalCallbacks.push(() => this.teleport(el, morph));\n }\n if (el instanceof HTMLImageElement && el.srcset) {\n el.srcset = el.srcset;\n } else if (el instanceof HTMLVideoElement && el.autoplay) {\n el.play();\n }\n if (dom_default.isNowTriggerFormExternal(el, phxTriggerExternal)) {\n externalFormTriggered = el;\n }\n if (dom_default.isPhxChild(el) && view.ownsElement(el) || dom_default.isPhxSticky(el) && view.ownsElement(el.parentNode)) {\n this.trackAfter(\"phxChildAdded\", el);\n }\n if (el.nodeName === \"SCRIPT\" && el.hasAttribute(PHX_RUNTIME_HOOK)) {\n this.handleRuntimeHook(el, source);\n }\n added.push(el);\n },\n onNodeDiscarded: (el) => this.onNodeDiscarded(el),\n onBeforeNodeDiscarded: (el) => {\n if (el.getAttribute && el.getAttribute(PHX_PRUNE) !== null) {\n return true;\n }\n if (el.parentElement !== null && el.id && dom_default.isPhxUpdate(el.parentElement, phxUpdate, [\n PHX_STREAM,\n \"append\",\n \"prepend\"\n ])) {\n return false;\n }\n if (el.getAttribute && el.getAttribute(PHX_TELEPORTED_REF)) {\n return false;\n }\n if (this.maybePendingRemove(el)) {\n return false;\n }\n if (this.skipCIDSibling(el)) {\n return false;\n }\n if (dom_default.isPortalTemplate(el)) {\n const teleportedEl = document.getElementById(\n el.content.firstElementChild.id\n );\n if (teleportedEl) {\n teleportedEl.remove();\n morphCallbacks.onNodeDiscarded(teleportedEl);\n this.view.dropPortalElementId(teleportedEl.id);\n }\n }\n return true;\n },\n onElUpdated: (el) => {\n if (dom_default.isNowTriggerFormExternal(el, phxTriggerExternal)) {\n externalFormTriggered = el;\n }\n updates.push(el);\n this.maybeReOrderStream(el, false);\n },\n onBeforeElUpdated: (fromEl, toEl) => {\n if (fromEl.id && fromEl.isSameNode(targetContainer2) && fromEl.id !== toEl.id) {\n morphCallbacks.onNodeDiscarded(fromEl);\n fromEl.replaceWith(toEl);\n return morphCallbacks.onNodeAdded(toEl);\n }\n dom_default.syncPendingAttrs(fromEl, toEl);\n dom_default.maintainPrivateHooks(\n fromEl,\n toEl,\n phxViewportTop,\n phxViewportBottom\n );\n dom_default.cleanChildNodes(toEl, phxUpdate);\n if (this.skipCIDSibling(toEl)) {\n this.maybeReOrderStream(fromEl);\n return false;\n }\n if (dom_default.isPhxSticky(fromEl)) {\n [PHX_SESSION, PHX_STATIC, PHX_ROOT_ID].map((attr) => [\n attr,\n fromEl.getAttribute(attr),\n toEl.getAttribute(attr)\n ]).forEach(([attr, fromVal, toVal]) => {\n if (toVal && fromVal !== toVal) {\n fromEl.setAttribute(attr, toVal);\n }\n });\n return false;\n }\n if (dom_default.isIgnored(fromEl, phxUpdate) || fromEl.form && fromEl.form.isSameNode(externalFormTriggered)) {\n this.trackBefore(\"updated\", fromEl, toEl);\n dom_default.mergeAttrs(fromEl, toEl, {\n isIgnored: dom_default.isIgnored(fromEl, phxUpdate)\n });\n updates.push(fromEl);\n dom_default.applyStickyOperations(fromEl);\n return false;\n }\n if (fromEl.type === \"number\" && fromEl.validity && fromEl.validity.badInput) {\n return false;\n }\n const isFocusedFormEl = focused && fromEl.isSameNode(focused) && dom_default.isFormInput(fromEl);\n const focusedSelectChanged = isFocusedFormEl && this.isChangedSelect(fromEl, toEl);\n if (fromEl.hasAttribute(PHX_REF_SRC)) {\n const ref = new ElementRef(fromEl);\n if (ref.lockRef && (!this.undoRef || !ref.isLockUndoneBy(this.undoRef))) {\n dom_default.applyStickyOperations(fromEl);\n const isLocked = fromEl.hasAttribute(PHX_REF_LOCK);\n const clone2 = isLocked ? dom_default.private(fromEl, PHX_REF_LOCK) || fromEl.cloneNode(true) : null;\n if (clone2) {\n dom_default.putPrivate(fromEl, PHX_REF_LOCK, clone2);\n if (!isFocusedFormEl) {\n fromEl = clone2;\n }\n }\n }\n }\n if (dom_default.isPhxChild(toEl)) {\n const prevSession = fromEl.getAttribute(PHX_SESSION);\n dom_default.mergeAttrs(fromEl, toEl, { exclude: [PHX_STATIC] });\n if (prevSession !== \"\") {\n fromEl.setAttribute(PHX_SESSION, prevSession);\n }\n fromEl.setAttribute(PHX_ROOT_ID, this.rootID);\n dom_default.applyStickyOperations(fromEl);\n return false;\n }\n if (this.undoRef && dom_default.private(toEl, PHX_REF_LOCK)) {\n dom_default.putPrivate(\n fromEl,\n PHX_REF_LOCK,\n dom_default.private(toEl, PHX_REF_LOCK)\n );\n }\n dom_default.copyPrivates(toEl, fromEl);\n if (dom_default.isPortalTemplate(toEl)) {\n portalCallbacks.push(() => this.teleport(toEl, morph));\n fromEl.content.replaceChildren(toEl.content.cloneNode(true));\n return false;\n }\n if (isFocusedFormEl && fromEl.type !== \"hidden\" && !focusedSelectChanged) {\n this.trackBefore(\"updated\", fromEl, toEl);\n dom_default.mergeFocusedInput(fromEl, toEl);\n dom_default.syncAttrsToProps(fromEl);\n updates.push(fromEl);\n dom_default.applyStickyOperations(fromEl);\n return false;\n } else {\n if (focusedSelectChanged) {\n fromEl.blur();\n }\n if (dom_default.isPhxUpdate(toEl, phxUpdate, [\"append\", \"prepend\"])) {\n appendPrependUpdates.push(\n new DOMPostMorphRestorer(\n fromEl,\n toEl,\n toEl.getAttribute(phxUpdate)\n )\n );\n }\n dom_default.syncAttrsToProps(toEl);\n dom_default.applyStickyOperations(toEl);\n this.trackBefore(\"updated\", fromEl, toEl);\n return fromEl;\n }\n }\n };\n morphdom_esm_default(targetContainer2, source, morphCallbacks);\n };\n this.trackBefore(\"added\", container);\n this.trackBefore(\"updated\", container, container);\n liveSocket.time(\"morphdom\", () => {\n this.streams.forEach(([ref, inserts, deleteIds, reset]) => {\n inserts.forEach(([key, streamAt, limit, updateOnly]) => {\n this.streamInserts[key] = { ref, streamAt, limit, reset, updateOnly };\n });\n if (reset !== void 0) {\n dom_default.all(document, `[${PHX_STREAM_REF}=\"${ref}\"]`, (child) => {\n this.removeStreamChildElement(child);\n });\n }\n deleteIds.forEach((id) => {\n const child = document.getElementById(id);\n if (child) {\n this.removeStreamChildElement(child);\n }\n });\n });\n if (isJoinPatch) {\n dom_default.all(this.container, `[${phxUpdate}=${PHX_STREAM}]`).filter((el) => this.view.ownsElement(el)).forEach((el) => {\n Array.from(el.children).forEach((child) => {\n this.removeStreamChildElement(child, true);\n });\n });\n }\n morph(targetContainer, html);\n let teleportCount = 0;\n while (portalCallbacks.length > 0 && teleportCount < 5) {\n const copy = portalCallbacks.slice();\n portalCallbacks = [];\n copy.forEach((callback) => callback());\n teleportCount++;\n }\n this.view.portalElementIds.forEach((id) => {\n const el = document.getElementById(id);\n if (el) {\n const source = document.getElementById(\n el.getAttribute(PHX_TELEPORTED_SRC)\n );\n if (!source) {\n el.remove();\n this.onNodeDiscarded(el);\n this.view.dropPortalElementId(id);\n }\n }\n });\n });\n if (liveSocket.isDebugEnabled()) {\n detectDuplicateIds();\n detectInvalidStreamInserts(this.streamInserts);\n Array.from(document.querySelectorAll(\"input[name=id]\")).forEach(\n (node) => {\n if (node instanceof HTMLInputElement && node.form) {\n console.error(\n 'Detected an input with name=\"id\" inside a form! This will cause problems when patching the DOM.\\n',\n node\n );\n }\n }\n );\n }\n if (appendPrependUpdates.length > 0) {\n liveSocket.time(\"post-morph append/prepend restoration\", () => {\n appendPrependUpdates.forEach((update) => update.perform());\n });\n }\n liveSocket.silenceEvents(\n () => dom_default.restoreFocus(focused, selectionStart, selectionEnd)\n );\n dom_default.dispatchEvent(document, \"phx:update\");\n added.forEach((el) => this.trackAfter(\"added\", el));\n updates.forEach((el) => this.trackAfter(\"updated\", el));\n this.transitionPendingRemoves();\n if (externalFormTriggered) {\n liveSocket.unload();\n const submitter = dom_default.private(externalFormTriggered, \"submitter\");\n if (submitter && submitter.name && targetContainer.contains(submitter)) {\n const input = document.createElement(\"input\");\n input.type = \"hidden\";\n const formId = submitter.getAttribute(\"form\");\n if (formId) {\n input.setAttribute(\"form\", formId);\n }\n input.name = submitter.name;\n input.value = submitter.value;\n submitter.parentElement.insertBefore(input, submitter);\n }\n Object.getPrototypeOf(externalFormTriggered).submit.call(\n externalFormTriggered\n );\n }\n return true;\n }\n onNodeDiscarded(el) {\n if (dom_default.isPhxChild(el) || dom_default.isPhxSticky(el)) {\n this.liveSocket.destroyViewByEl(el);\n }\n this.trackAfter(\"discarded\", el);\n }\n maybePendingRemove(node) {\n if (node.getAttribute && node.getAttribute(this.phxRemove) !== null) {\n this.pendingRemoves.push(node);\n return true;\n } else {\n return false;\n }\n }\n removeStreamChildElement(child, force = false) {\n if (!force && !this.view.ownsElement(child)) {\n return;\n }\n if (this.streamInserts[child.id]) {\n this.streamComponentRestore[child.id] = child;\n child.remove();\n } else {\n if (!this.maybePendingRemove(child)) {\n child.remove();\n this.onNodeDiscarded(child);\n }\n }\n }\n getStreamInsert(el) {\n const insert = el.id ? this.streamInserts[el.id] : {};\n return insert || {};\n }\n setStreamRef(el, ref) {\n dom_default.putSticky(\n el,\n PHX_STREAM_REF,\n (el2) => el2.setAttribute(PHX_STREAM_REF, ref)\n );\n }\n maybeReOrderStream(el, isNew) {\n const { ref, streamAt, reset } = this.getStreamInsert(el);\n if (streamAt === void 0) {\n return;\n }\n this.setStreamRef(el, ref);\n if (!reset && !isNew) {\n return;\n }\n if (!el.parentElement) {\n return;\n }\n if (streamAt === 0) {\n el.parentElement.insertBefore(el, el.parentElement.firstElementChild);\n } else if (streamAt > 0) {\n const children = Array.from(el.parentElement.children);\n const oldIndex = children.indexOf(el);\n if (streamAt >= children.length - 1) {\n el.parentElement.appendChild(el);\n } else {\n const sibling = children[streamAt];\n if (oldIndex > streamAt) {\n el.parentElement.insertBefore(el, sibling);\n } else {\n el.parentElement.insertBefore(el, sibling.nextElementSibling);\n }\n }\n }\n this.maybeLimitStream(el);\n }\n maybeLimitStream(el) {\n const { limit } = this.getStreamInsert(el);\n const children = limit !== null && Array.from(el.parentElement.children);\n if (limit && limit < 0 && children.length > limit * -1) {\n children.slice(0, children.length + limit).forEach((child) => this.removeStreamChildElement(child));\n } else if (limit && limit >= 0 && children.length > limit) {\n children.slice(limit).forEach((child) => this.removeStreamChildElement(child));\n }\n }\n transitionPendingRemoves() {\n const { pendingRemoves, liveSocket } = this;\n if (pendingRemoves.length > 0) {\n liveSocket.transitionRemoves(pendingRemoves, () => {\n pendingRemoves.forEach((el) => {\n const child = dom_default.firstPhxChild(el);\n if (child) {\n liveSocket.destroyViewByEl(child);\n }\n el.remove();\n });\n this.trackAfter(\"transitionsDiscarded\", pendingRemoves);\n });\n }\n }\n isChangedSelect(fromEl, toEl) {\n if (!(fromEl instanceof HTMLSelectElement) || fromEl.multiple) {\n return false;\n }\n if (fromEl.options.length !== toEl.options.length) {\n return true;\n }\n toEl.value = fromEl.value;\n return !fromEl.isEqualNode(toEl);\n }\n isCIDPatch() {\n return this.cidPatch;\n }\n skipCIDSibling(el) {\n return el.nodeType === Node.ELEMENT_NODE && el.hasAttribute(PHX_SKIP);\n }\n targetCIDContainer(html) {\n if (!this.isCIDPatch()) {\n return;\n }\n const [first, ...rest] = dom_default.findComponentNodeList(\n this.view.id,\n this.targetCID\n );\n if (rest.length === 0 && dom_default.childNodeLength(html) === 1) {\n return first;\n } else {\n return first && first.parentNode;\n }\n }\n indexOf(parent, child) {\n return Array.from(parent.children).indexOf(child);\n }\n teleport(el, morph) {\n const targetSelector = el.getAttribute(PHX_PORTAL);\n const portalContainer = document.querySelector(targetSelector);\n if (!portalContainer) {\n throw new Error(\n \"portal target with selector \" + targetSelector + \" not found\"\n );\n }\n const toTeleport = el.content.firstElementChild;\n if (this.skipCIDSibling(toTeleport)) {\n return;\n }\n if (!toTeleport?.id) {\n throw new Error(\n \"phx-portal template must have a single root element with ID!\"\n );\n }\n const existing = document.getElementById(toTeleport.id);\n let portalTarget;\n if (existing) {\n if (!portalContainer.contains(existing)) {\n portalContainer.appendChild(existing);\n }\n portalTarget = existing;\n } else {\n portalTarget = document.createElement(toTeleport.tagName);\n portalContainer.appendChild(portalTarget);\n }\n toTeleport.setAttribute(PHX_TELEPORTED_REF, this.view.id);\n toTeleport.setAttribute(PHX_TELEPORTED_SRC, el.id);\n morph(portalTarget, toTeleport, true);\n toTeleport.removeAttribute(PHX_TELEPORTED_REF);\n toTeleport.removeAttribute(PHX_TELEPORTED_SRC);\n this.view.pushPortalElementId(toTeleport.id);\n }\n handleRuntimeHook(el, source) {\n const name = el.getAttribute(PHX_RUNTIME_HOOK);\n let nonce = el.hasAttribute(\"nonce\") ? el.getAttribute(\"nonce\") : null;\n if (el.hasAttribute(\"nonce\")) {\n const template = document.createElement(\"template\");\n template.innerHTML = source;\n nonce = template.content.querySelector(`script[${PHX_RUNTIME_HOOK}=\"${CSS.escape(name)}\"]`).getAttribute(\"nonce\");\n }\n const script = document.createElement(\"script\");\n script.textContent = el.textContent;\n dom_default.mergeAttrs(script, el, { isIgnored: false });\n if (nonce) {\n script.nonce = nonce;\n }\n el.replaceWith(script);\n el = script;\n }\n};\n\n// js/phoenix_live_view/rendered.js\nvar VOID_TAGS = /* @__PURE__ */ new Set([\n \"area\",\n \"base\",\n \"br\",\n \"col\",\n \"command\",\n \"embed\",\n \"hr\",\n \"img\",\n \"input\",\n \"keygen\",\n \"link\",\n \"meta\",\n \"param\",\n \"source\",\n \"track\",\n \"wbr\"\n]);\nvar quoteChars = /* @__PURE__ */ new Set([\"'\", '\"']);\nvar modifyRoot = (html, attrs, clearInnerHTML) => {\n let i = 0;\n let insideComment = false;\n let beforeTag, afterTag, tag, tagNameEndsAt, id, newHTML;\n const lookahead = html.match(/^(\\s*(?:\\s*)*)<([^\\s\\/>]+)/);\n if (lookahead === null) {\n throw new Error(`malformed html ${html}`);\n }\n i = lookahead[0].length;\n beforeTag = lookahead[1];\n tag = lookahead[2];\n tagNameEndsAt = i;\n for (i; i < html.length; i++) {\n if (html.charAt(i) === \">\") {\n break;\n }\n if (html.charAt(i) === \"=\") {\n const isId = html.slice(i - 3, i) === \" id\";\n i++;\n const char = html.charAt(i);\n if (quoteChars.has(char)) {\n const attrStartsAt = i;\n i++;\n for (i; i < html.length; i++) {\n if (html.charAt(i) === char) {\n break;\n }\n }\n if (isId) {\n id = html.slice(attrStartsAt + 1, i);\n break;\n }\n }\n }\n }\n let closeAt = html.length - 1;\n insideComment = false;\n while (closeAt >= beforeTag.length + tag.length) {\n const char = html.charAt(closeAt);\n if (insideComment) {\n if (char === \"-\" && html.slice(closeAt - 3, closeAt) === \"\" && html.slice(closeAt - 2, closeAt) === \"--\") {\n insideComment = true;\n closeAt -= 3;\n } else if (char === \">\") {\n break;\n } else {\n closeAt -= 1;\n }\n }\n afterTag = html.slice(closeAt + 1, html.length);\n const attrsStr = Object.keys(attrs).map((attr) => attrs[attr] === true ? attr : `${attr}=\"${attrs[attr]}\"`).join(\" \");\n if (clearInnerHTML) {\n const idAttrStr = id ? ` id=\"${id}\"` : \"\";\n if (VOID_TAGS.has(tag)) {\n newHTML = `<${tag}${idAttrStr}${attrsStr === \"\" ? \"\" : \" \"}${attrsStr}/>`;\n } else {\n newHTML = `<${tag}${idAttrStr}${attrsStr === \"\" ? \"\" : \" \"}${attrsStr}>`;\n }\n } else {\n const rest = html.slice(tagNameEndsAt, closeAt + 1);\n newHTML = `<${tag}${attrsStr === \"\" ? \"\" : \" \"}${attrsStr}${rest}`;\n }\n return [newHTML, beforeTag, afterTag];\n};\nvar Rendered = class {\n static extract(diff) {\n const { [REPLY]: reply, [EVENTS]: events, [TITLE]: title } = diff;\n delete diff[REPLY];\n delete diff[EVENTS];\n delete diff[TITLE];\n return { diff, title, reply: reply || null, events: events || [] };\n }\n constructor(viewId, rendered) {\n this.viewId = viewId;\n this.rendered = {};\n this.magicId = 0;\n this.mergeDiff(rendered);\n }\n parentViewId() {\n return this.viewId;\n }\n toString(onlyCids) {\n const { buffer: str, streams } = this.recursiveToString(\n this.rendered,\n this.rendered[COMPONENTS],\n onlyCids,\n true,\n {}\n );\n return { buffer: str, streams };\n }\n recursiveToString(rendered, components = rendered[COMPONENTS], onlyCids, changeTracking, rootAttrs) {\n onlyCids = onlyCids ? new Set(onlyCids) : null;\n const output = {\n buffer: \"\",\n components,\n onlyCids,\n streams: /* @__PURE__ */ new Set()\n };\n this.toOutputBuffer(rendered, null, output, changeTracking, rootAttrs);\n return { buffer: output.buffer, streams: output.streams };\n }\n componentCIDs(diff) {\n return Object.keys(diff[COMPONENTS] || {}).map((i) => parseInt(i));\n }\n isComponentOnlyDiff(diff) {\n if (!diff[COMPONENTS]) {\n return false;\n }\n return Object.keys(diff).length === 1;\n }\n getComponent(diff, cid) {\n return diff[COMPONENTS][cid];\n }\n resetRender(cid) {\n if (this.rendered[COMPONENTS][cid]) {\n this.rendered[COMPONENTS][cid].reset = true;\n }\n }\n mergeDiff(diff) {\n const newc = diff[COMPONENTS];\n const cache = {};\n delete diff[COMPONENTS];\n this.rendered = this.mutableMerge(this.rendered, diff);\n this.rendered[COMPONENTS] = this.rendered[COMPONENTS] || {};\n if (newc) {\n const oldc = this.rendered[COMPONENTS];\n for (const cid in newc) {\n newc[cid] = this.cachedFindComponent(cid, newc[cid], oldc, newc, cache);\n }\n for (const cid in newc) {\n oldc[cid] = newc[cid];\n }\n diff[COMPONENTS] = newc;\n }\n }\n cachedFindComponent(cid, cdiff, oldc, newc, cache) {\n if (cache[cid]) {\n return cache[cid];\n } else {\n let ndiff, stat, scid = cdiff[STATIC];\n if (isCid(scid)) {\n let tdiff;\n if (scid > 0) {\n tdiff = this.cachedFindComponent(scid, newc[scid], oldc, newc, cache);\n } else {\n tdiff = oldc[-scid];\n }\n stat = tdiff[STATIC];\n ndiff = this.cloneMerge(tdiff, cdiff, true);\n ndiff[STATIC] = stat;\n } else {\n ndiff = cdiff[STATIC] !== void 0 || oldc[cid] === void 0 ? cdiff : this.cloneMerge(oldc[cid], cdiff, false);\n }\n cache[cid] = ndiff;\n return ndiff;\n }\n }\n mutableMerge(target, source) {\n if (source[STATIC] !== void 0) {\n return source;\n } else {\n this.doMutableMerge(target, source);\n return target;\n }\n }\n doMutableMerge(target, source) {\n if (source[KEYED]) {\n this.mergeKeyed(target, source);\n } else {\n for (const key in source) {\n const val = source[key];\n const targetVal = target[key];\n const isObjVal = isObject(val);\n if (isObjVal && val[STATIC] === void 0 && isObject(targetVal)) {\n this.doMutableMerge(targetVal, val);\n } else {\n target[key] = val;\n }\n }\n }\n if (target[ROOT]) {\n target.newRender = true;\n }\n }\n clone(diff) {\n if (\"structuredClone\" in window) {\n return structuredClone(diff);\n } else {\n return JSON.parse(JSON.stringify(diff));\n }\n }\n // keyed comprehensions\n mergeKeyed(target, source) {\n const clonedTarget = this.clone(target);\n Object.entries(source[KEYED]).forEach(([i, entry]) => {\n if (i === KEYED_COUNT) {\n return;\n }\n if (Array.isArray(entry)) {\n const [old_idx, diff] = entry;\n target[KEYED][i] = clonedTarget[KEYED][old_idx];\n this.doMutableMerge(target[KEYED][i], diff);\n } else if (typeof entry === \"number\") {\n const old_idx = entry;\n target[KEYED][i] = clonedTarget[KEYED][old_idx];\n } else if (typeof entry === \"object\") {\n if (!target[KEYED][i]) {\n target[KEYED][i] = {};\n }\n this.doMutableMerge(target[KEYED][i], entry);\n }\n });\n if (source[KEYED][KEYED_COUNT] < target[KEYED][KEYED_COUNT]) {\n for (let i = source[KEYED][KEYED_COUNT]; i < target[KEYED][KEYED_COUNT]; i++) {\n delete target[KEYED][i];\n }\n }\n target[KEYED][KEYED_COUNT] = source[KEYED][KEYED_COUNT];\n if (source[STREAM]) {\n target[STREAM] = source[STREAM];\n }\n if (source[TEMPLATES]) {\n target[TEMPLATES] = source[TEMPLATES];\n }\n }\n // Merges cid trees together, copying statics from source tree.\n //\n // The `pruneMagicId` is passed to control pruning the magicId of the\n // target. We must always prune the magicId when we are sharing statics\n // from another component. If not pruning, we replicate the logic from\n // mutableMerge, where we set newRender to true if there is a root\n // (effectively forcing the new version to be rendered instead of skipped)\n //\n cloneMerge(target, source, pruneMagicId) {\n let merged;\n if (source[KEYED]) {\n merged = this.clone(target);\n this.mergeKeyed(merged, source);\n } else {\n merged = { ...target, ...source };\n for (const key in merged) {\n const val = source[key];\n const targetVal = target[key];\n if (isObject(val) && val[STATIC] === void 0 && isObject(targetVal)) {\n merged[key] = this.cloneMerge(targetVal, val, pruneMagicId);\n } else if (val === void 0 && isObject(targetVal)) {\n merged[key] = this.cloneMerge(targetVal, {}, pruneMagicId);\n }\n }\n }\n if (pruneMagicId) {\n delete merged.magicId;\n delete merged.newRender;\n } else if (target[ROOT]) {\n merged.newRender = true;\n }\n return merged;\n }\n componentToString(cid) {\n const { buffer: str, streams } = this.recursiveCIDToString(\n this.rendered[COMPONENTS],\n cid,\n null\n );\n const [strippedHTML, _before, _after] = modifyRoot(str, {});\n return { buffer: strippedHTML, streams };\n }\n pruneCIDs(cids) {\n cids.forEach((cid) => delete this.rendered[COMPONENTS][cid]);\n }\n // private\n get() {\n return this.rendered;\n }\n isNewFingerprint(diff = {}) {\n return !!diff[STATIC];\n }\n templateStatic(part, templates) {\n if (typeof part === \"number\") {\n return templates[part];\n } else {\n return part;\n }\n }\n nextMagicID() {\n this.magicId++;\n return `m${this.magicId}-${this.parentViewId()}`;\n }\n // Converts rendered tree to output buffer.\n //\n // changeTracking controls if we can apply the PHX_SKIP optimization.\n toOutputBuffer(rendered, templates, output, changeTracking, rootAttrs = {}) {\n if (rendered[KEYED]) {\n return this.comprehensionToBuffer(\n rendered,\n templates,\n output,\n changeTracking\n );\n }\n if (rendered[TEMPLATES]) {\n templates = rendered[TEMPLATES];\n delete rendered[TEMPLATES];\n }\n let { [STATIC]: statics } = rendered;\n statics = this.templateStatic(statics, templates);\n rendered[STATIC] = statics;\n const isRoot = rendered[ROOT];\n const prevBuffer = output.buffer;\n if (isRoot) {\n output.buffer = \"\";\n }\n if (changeTracking && isRoot && !rendered.magicId) {\n rendered.newRender = true;\n rendered.magicId = this.nextMagicID();\n }\n output.buffer += statics[0];\n for (let i = 1; i < statics.length; i++) {\n this.dynamicToBuffer(rendered[i - 1], templates, output, changeTracking);\n output.buffer += statics[i];\n }\n if (isRoot) {\n let skip = false;\n let attrs;\n if (changeTracking || rendered.magicId) {\n skip = changeTracking && !rendered.newRender;\n attrs = { [PHX_MAGIC_ID]: rendered.magicId, ...rootAttrs };\n } else {\n attrs = rootAttrs;\n }\n if (skip) {\n attrs[PHX_SKIP] = true;\n }\n const [newRoot, commentBefore, commentAfter] = modifyRoot(\n output.buffer,\n attrs,\n skip\n );\n rendered.newRender = false;\n output.buffer = prevBuffer + commentBefore + newRoot + commentAfter;\n }\n }\n comprehensionToBuffer(rendered, templates, output, changeTracking) {\n const keyedTemplates = templates || rendered[TEMPLATES];\n const statics = this.templateStatic(rendered[STATIC], templates);\n rendered[STATIC] = statics;\n delete rendered[TEMPLATES];\n for (let i = 0; i < rendered[KEYED][KEYED_COUNT]; i++) {\n output.buffer += statics[0];\n for (let j = 1; j < statics.length; j++) {\n this.dynamicToBuffer(\n rendered[KEYED][i][j - 1],\n keyedTemplates,\n output,\n changeTracking\n );\n output.buffer += statics[j];\n }\n }\n if (rendered[STREAM]) {\n const stream = rendered[STREAM];\n const [_ref, _inserts, deleteIds, reset] = stream || [null, {}, [], null];\n if (stream !== void 0 && (rendered[KEYED][KEYED_COUNT] > 0 || deleteIds.length > 0 || reset)) {\n delete rendered[STREAM];\n rendered[KEYED] = {\n [KEYED_COUNT]: 0\n };\n output.streams.add(stream);\n }\n }\n }\n dynamicToBuffer(rendered, templates, output, changeTracking) {\n if (typeof rendered === \"number\") {\n const { buffer: str, streams } = this.recursiveCIDToString(\n output.components,\n rendered,\n output.onlyCids\n );\n output.buffer += str;\n output.streams = /* @__PURE__ */ new Set([...output.streams, ...streams]);\n } else if (isObject(rendered)) {\n this.toOutputBuffer(rendered, templates, output, changeTracking, {});\n } else {\n output.buffer += rendered;\n }\n }\n recursiveCIDToString(components, cid, onlyCids) {\n const component = components[cid] || logError(`no component for CID ${cid}`, components);\n const attrs = { [PHX_COMPONENT]: cid, [PHX_VIEW_REF]: this.viewId };\n const skip = onlyCids && !onlyCids.has(cid);\n component.newRender = !skip;\n component.magicId = `c${cid}-${this.parentViewId()}`;\n const changeTracking = !component.reset;\n const { buffer: html, streams } = this.recursiveToString(\n component,\n components,\n onlyCids,\n changeTracking,\n attrs\n );\n delete component.reset;\n return { buffer: html, streams };\n }\n};\n\n// js/phoenix_live_view/js.js\nvar focusStack = [];\nvar default_transition_time = 200;\nvar JS = {\n // private\n exec(e, eventType, phxEvent, view, sourceEl, defaults) {\n const [defaultKind, defaultArgs] = defaults || [\n null,\n { callback: defaults && defaults.callback }\n ];\n const commands = Array.isArray(phxEvent) ? phxEvent : typeof phxEvent === \"string\" && phxEvent.startsWith(\"[\") ? JSON.parse(phxEvent) : [[defaultKind, defaultArgs]];\n commands.forEach(([kind, args]) => {\n if (kind === defaultKind) {\n args = { ...defaultArgs, ...args };\n args.callback = args.callback || defaultArgs.callback;\n }\n this.filterToEls(view.liveSocket, sourceEl, args).forEach((el) => {\n this[`exec_${kind}`](e, eventType, phxEvent, view, sourceEl, el, args);\n });\n });\n },\n isVisible(el) {\n return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length > 0);\n },\n // returns true if any part of the element is inside the viewport\n isInViewport(el) {\n const rect = el.getBoundingClientRect();\n const windowHeight = window.innerHeight || document.documentElement.clientHeight;\n const windowWidth = window.innerWidth || document.documentElement.clientWidth;\n return rect.right > 0 && rect.bottom > 0 && rect.left < windowWidth && rect.top < windowHeight;\n },\n // private\n // commands\n exec_exec(e, eventType, phxEvent, view, sourceEl, el, { attr, to }) {\n const encodedJS = el.getAttribute(attr);\n if (!encodedJS) {\n throw new Error(`expected ${attr} to contain JS command on \"${to}\"`);\n }\n view.liveSocket.execJS(el, encodedJS, eventType);\n },\n exec_dispatch(e, eventType, phxEvent, view, sourceEl, el, { event, detail, bubbles, blocking }) {\n detail = detail || {};\n detail.dispatcher = sourceEl;\n if (blocking) {\n const promise = new Promise((resolve, _reject) => {\n detail.done = resolve;\n });\n view.liveSocket.asyncTransition(promise);\n }\n dom_default.dispatchEvent(el, event, { detail, bubbles });\n },\n exec_push(e, eventType, phxEvent, view, sourceEl, el, args) {\n const {\n event,\n data,\n target,\n page_loading,\n loading,\n value,\n dispatcher,\n callback\n } = args;\n const pushOpts = {\n loading,\n value,\n target,\n page_loading: !!page_loading,\n originalEvent: e\n };\n const targetSrc = eventType === \"change\" && dispatcher ? dispatcher : sourceEl;\n const phxTarget = target || targetSrc.getAttribute(view.binding(\"target\")) || targetSrc;\n const handler = (targetView, targetCtx) => {\n if (!targetView.isConnected()) {\n return;\n }\n if (eventType === \"change\") {\n let { newCid, _target } = args;\n _target = _target || (dom_default.isFormInput(sourceEl) ? sourceEl.name : void 0);\n if (_target) {\n pushOpts._target = _target;\n }\n targetView.pushInput(\n sourceEl,\n targetCtx,\n newCid,\n event || phxEvent,\n pushOpts,\n callback\n );\n } else if (eventType === \"submit\") {\n const { submitter } = args;\n targetView.submitForm(\n sourceEl,\n targetCtx,\n event || phxEvent,\n submitter,\n pushOpts,\n callback\n );\n } else {\n targetView.pushEvent(\n eventType,\n sourceEl,\n targetCtx,\n event || phxEvent,\n data,\n pushOpts,\n callback\n );\n }\n };\n if (args.targetView && args.targetCtx) {\n handler(args.targetView, args.targetCtx);\n } else {\n view.withinTargets(phxTarget, handler);\n }\n },\n exec_navigate(e, eventType, phxEvent, view, sourceEl, el, { href, replace }) {\n view.liveSocket.historyRedirect(\n e,\n href,\n replace ? \"replace\" : \"push\",\n null,\n sourceEl\n );\n },\n exec_patch(e, eventType, phxEvent, view, sourceEl, el, { href, replace }) {\n view.liveSocket.pushHistoryPatch(\n e,\n href,\n replace ? \"replace\" : \"push\",\n sourceEl\n );\n },\n exec_focus(e, eventType, phxEvent, view, sourceEl, el) {\n aria_default.attemptFocus(el);\n window.requestAnimationFrame(() => {\n window.requestAnimationFrame(() => aria_default.attemptFocus(el));\n });\n },\n exec_focus_first(e, eventType, phxEvent, view, sourceEl, el) {\n aria_default.focusFirstInteractive(el) || aria_default.focusFirst(el);\n window.requestAnimationFrame(() => {\n window.requestAnimationFrame(\n () => aria_default.focusFirstInteractive(el) || aria_default.focusFirst(el)\n );\n });\n },\n exec_push_focus(e, eventType, phxEvent, view, sourceEl, el) {\n focusStack.push(el || sourceEl);\n },\n exec_pop_focus(_e, _eventType, _phxEvent, _view, _sourceEl, _el) {\n const el = focusStack.pop();\n if (el) {\n el.focus();\n window.requestAnimationFrame(() => {\n window.requestAnimationFrame(() => el.focus());\n });\n }\n },\n exec_add_class(e, eventType, phxEvent, view, sourceEl, el, { names, transition, time, blocking }) {\n this.addOrRemoveClasses(el, names, [], transition, time, view, blocking);\n },\n exec_remove_class(e, eventType, phxEvent, view, sourceEl, el, { names, transition, time, blocking }) {\n this.addOrRemoveClasses(el, [], names, transition, time, view, blocking);\n },\n exec_toggle_class(e, eventType, phxEvent, view, sourceEl, el, { names, transition, time, blocking }) {\n this.toggleClasses(el, names, transition, time, view, blocking);\n },\n exec_toggle_attr(e, eventType, phxEvent, view, sourceEl, el, { attr: [attr, val1, val2] }) {\n this.toggleAttr(el, attr, val1, val2);\n },\n exec_ignore_attrs(e, eventType, phxEvent, view, sourceEl, el, { attrs }) {\n this.ignoreAttrs(el, attrs);\n },\n exec_transition(e, eventType, phxEvent, view, sourceEl, el, { time, transition, blocking }) {\n this.addOrRemoveClasses(el, [], [], transition, time, view, blocking);\n },\n exec_toggle(e, eventType, phxEvent, view, sourceEl, el, { display, ins, outs, time, blocking }) {\n this.toggle(eventType, view, el, display, ins, outs, time, blocking);\n },\n exec_show(e, eventType, phxEvent, view, sourceEl, el, { display, transition, time, blocking }) {\n this.show(eventType, view, el, display, transition, time, blocking);\n },\n exec_hide(e, eventType, phxEvent, view, sourceEl, el, { display, transition, time, blocking }) {\n this.hide(eventType, view, el, display, transition, time, blocking);\n },\n exec_set_attr(e, eventType, phxEvent, view, sourceEl, el, { attr: [attr, val] }) {\n this.setOrRemoveAttrs(el, [[attr, val]], []);\n },\n exec_remove_attr(e, eventType, phxEvent, view, sourceEl, el, { attr }) {\n this.setOrRemoveAttrs(el, [], [attr]);\n },\n ignoreAttrs(el, attrs) {\n dom_default.putPrivate(el, \"JS:ignore_attrs\", {\n apply: (fromEl, toEl) => {\n let fromAttributes = Array.from(fromEl.attributes);\n let fromAttributeNames = fromAttributes.map((attr) => attr.name);\n Array.from(toEl.attributes).filter((attr) => {\n return !fromAttributeNames.includes(attr.name);\n }).forEach((attr) => {\n if (dom_default.attributeIgnored(attr, attrs)) {\n toEl.removeAttribute(attr.name);\n }\n });\n fromAttributes.forEach((attr) => {\n if (dom_default.attributeIgnored(attr, attrs)) {\n toEl.setAttribute(attr.name, attr.value);\n }\n });\n }\n });\n },\n onBeforeElUpdated(fromEl, toEl) {\n const ignoreAttrs = dom_default.private(fromEl, \"JS:ignore_attrs\");\n if (ignoreAttrs) {\n ignoreAttrs.apply(fromEl, toEl);\n }\n },\n // utils for commands\n show(eventType, view, el, display, transition, time, blocking) {\n if (!this.isVisible(el)) {\n this.toggle(\n eventType,\n view,\n el,\n display,\n transition,\n null,\n time,\n blocking\n );\n }\n },\n hide(eventType, view, el, display, transition, time, blocking) {\n if (this.isVisible(el)) {\n this.toggle(\n eventType,\n view,\n el,\n display,\n null,\n transition,\n time,\n blocking\n );\n }\n },\n toggle(eventType, view, el, display, ins, outs, time, blocking) {\n time = time || default_transition_time;\n const [inClasses, inStartClasses, inEndClasses] = ins || [[], [], []];\n const [outClasses, outStartClasses, outEndClasses] = outs || [[], [], []];\n if (inClasses.length > 0 || outClasses.length > 0) {\n if (this.isVisible(el)) {\n const onStart = () => {\n this.addOrRemoveClasses(\n el,\n outStartClasses,\n inClasses.concat(inStartClasses).concat(inEndClasses)\n );\n window.requestAnimationFrame(() => {\n this.addOrRemoveClasses(el, outClasses, []);\n window.requestAnimationFrame(\n () => this.addOrRemoveClasses(el, outEndClasses, outStartClasses)\n );\n });\n };\n const onEnd = () => {\n this.addOrRemoveClasses(el, [], outClasses.concat(outEndClasses));\n dom_default.putSticky(\n el,\n \"toggle\",\n (currentEl) => currentEl.style.display = \"none\"\n );\n el.dispatchEvent(new Event(\"phx:hide-end\"));\n };\n el.dispatchEvent(new Event(\"phx:hide-start\"));\n if (blocking === false) {\n onStart();\n setTimeout(onEnd, time);\n } else {\n view.transition(time, onStart, onEnd);\n }\n } else {\n if (eventType === \"remove\") {\n return;\n }\n const onStart = () => {\n this.addOrRemoveClasses(\n el,\n inStartClasses,\n outClasses.concat(outStartClasses).concat(outEndClasses)\n );\n const stickyDisplay = display || this.defaultDisplay(el);\n window.requestAnimationFrame(() => {\n this.addOrRemoveClasses(el, inClasses, []);\n window.requestAnimationFrame(() => {\n dom_default.putSticky(\n el,\n \"toggle\",\n (currentEl) => currentEl.style.display = stickyDisplay\n );\n this.addOrRemoveClasses(el, inEndClasses, inStartClasses);\n });\n });\n };\n const onEnd = () => {\n this.addOrRemoveClasses(el, [], inClasses.concat(inEndClasses));\n el.dispatchEvent(new Event(\"phx:show-end\"));\n };\n el.dispatchEvent(new Event(\"phx:show-start\"));\n if (blocking === false) {\n onStart();\n setTimeout(onEnd, time);\n } else {\n view.transition(time, onStart, onEnd);\n }\n }\n } else {\n if (this.isVisible(el)) {\n window.requestAnimationFrame(() => {\n el.dispatchEvent(new Event(\"phx:hide-start\"));\n dom_default.putSticky(\n el,\n \"toggle\",\n (currentEl) => currentEl.style.display = \"none\"\n );\n el.dispatchEvent(new Event(\"phx:hide-end\"));\n });\n } else {\n window.requestAnimationFrame(() => {\n el.dispatchEvent(new Event(\"phx:show-start\"));\n const stickyDisplay = display || this.defaultDisplay(el);\n dom_default.putSticky(\n el,\n \"toggle\",\n (currentEl) => currentEl.style.display = stickyDisplay\n );\n el.dispatchEvent(new Event(\"phx:show-end\"));\n });\n }\n }\n },\n toggleClasses(el, classes, transition, time, view, blocking) {\n window.requestAnimationFrame(() => {\n const [prevAdds, prevRemoves] = dom_default.getSticky(el, \"classes\", [[], []]);\n const newAdds = classes.filter(\n (name) => prevAdds.indexOf(name) < 0 && !el.classList.contains(name)\n );\n const newRemoves = classes.filter(\n (name) => prevRemoves.indexOf(name) < 0 && el.classList.contains(name)\n );\n this.addOrRemoveClasses(\n el,\n newAdds,\n newRemoves,\n transition,\n time,\n view,\n blocking\n );\n });\n },\n toggleAttr(el, attr, val1, val2) {\n if (el.hasAttribute(attr)) {\n if (val2 !== void 0) {\n if (el.getAttribute(attr) === val1) {\n this.setOrRemoveAttrs(el, [[attr, val2]], []);\n } else {\n this.setOrRemoveAttrs(el, [[attr, val1]], []);\n }\n } else {\n this.setOrRemoveAttrs(el, [], [attr]);\n }\n } else {\n this.setOrRemoveAttrs(el, [[attr, val1]], []);\n }\n },\n addOrRemoveClasses(el, adds, removes, transition, time, view, blocking) {\n time = time || default_transition_time;\n const [transitionRun, transitionStart, transitionEnd] = transition || [\n [],\n [],\n []\n ];\n if (transitionRun.length > 0) {\n const onStart = () => {\n this.addOrRemoveClasses(\n el,\n transitionStart,\n [].concat(transitionRun).concat(transitionEnd)\n );\n window.requestAnimationFrame(() => {\n this.addOrRemoveClasses(el, transitionRun, []);\n window.requestAnimationFrame(\n () => this.addOrRemoveClasses(el, transitionEnd, transitionStart)\n );\n });\n };\n const onDone = () => this.addOrRemoveClasses(\n el,\n adds.concat(transitionEnd),\n removes.concat(transitionRun).concat(transitionStart)\n );\n if (blocking === false) {\n onStart();\n setTimeout(onDone, time);\n } else {\n view.transition(time, onStart, onDone);\n }\n return;\n }\n window.requestAnimationFrame(() => {\n const [prevAdds, prevRemoves] = dom_default.getSticky(el, \"classes\", [[], []]);\n const keepAdds = adds.filter(\n (name) => prevAdds.indexOf(name) < 0 && !el.classList.contains(name)\n );\n const keepRemoves = removes.filter(\n (name) => prevRemoves.indexOf(name) < 0 && el.classList.contains(name)\n );\n const newAdds = prevAdds.filter((name) => removes.indexOf(name) < 0).concat(keepAdds);\n const newRemoves = prevRemoves.filter((name) => adds.indexOf(name) < 0).concat(keepRemoves);\n dom_default.putSticky(el, \"classes\", (currentEl) => {\n currentEl.classList.remove(...newRemoves);\n currentEl.classList.add(...newAdds);\n return [newAdds, newRemoves];\n });\n });\n },\n setOrRemoveAttrs(el, sets, removes) {\n const [prevSets, prevRemoves] = dom_default.getSticky(el, \"attrs\", [[], []]);\n const alteredAttrs = sets.map(([attr, _val]) => attr).concat(removes);\n const newSets = prevSets.filter(([attr, _val]) => !alteredAttrs.includes(attr)).concat(sets);\n const newRemoves = prevRemoves.filter((attr) => !alteredAttrs.includes(attr)).concat(removes);\n dom_default.putSticky(el, \"attrs\", (currentEl) => {\n newRemoves.forEach((attr) => currentEl.removeAttribute(attr));\n newSets.forEach(([attr, val]) => currentEl.setAttribute(attr, val));\n return [newSets, newRemoves];\n });\n },\n hasAllClasses(el, classes) {\n return classes.every((name) => el.classList.contains(name));\n },\n isToggledOut(el, outClasses) {\n return !this.isVisible(el) || this.hasAllClasses(el, outClasses);\n },\n filterToEls(liveSocket, sourceEl, { to }) {\n const defaultQuery = () => {\n if (typeof to === \"string\") {\n return document.querySelectorAll(to);\n } else if (to.closest) {\n const toEl = sourceEl.closest(to.closest);\n return toEl ? [toEl] : [];\n } else if (to.inner) {\n return sourceEl.querySelectorAll(to.inner);\n }\n };\n return to ? liveSocket.jsQuerySelectorAll(sourceEl, to, defaultQuery) : [sourceEl];\n },\n defaultDisplay(el) {\n return { tr: \"table-row\", td: \"table-cell\" }[el.tagName.toLowerCase()] || \"block\";\n },\n transitionClasses(val) {\n if (!val) {\n return null;\n }\n let [trans, tStart, tEnd] = Array.isArray(val) ? val : [val.split(\" \"), [], []];\n trans = Array.isArray(trans) ? trans : trans.split(\" \");\n tStart = Array.isArray(tStart) ? tStart : tStart.split(\" \");\n tEnd = Array.isArray(tEnd) ? tEnd : tEnd.split(\" \");\n return [trans, tStart, tEnd];\n }\n};\nvar js_default = JS;\n\n// js/phoenix_live_view/js_commands.ts\nvar js_commands_default = (liveSocket, eventType) => {\n return {\n exec(el, encodedJS) {\n liveSocket.execJS(el, encodedJS, eventType);\n },\n show(el, opts = {}) {\n const owner = liveSocket.owner(el);\n js_default.show(\n eventType,\n owner,\n el,\n opts.display,\n js_default.transitionClasses(opts.transition),\n opts.time,\n opts.blocking\n );\n },\n hide(el, opts = {}) {\n const owner = liveSocket.owner(el);\n js_default.hide(\n eventType,\n owner,\n el,\n null,\n js_default.transitionClasses(opts.transition),\n opts.time,\n opts.blocking\n );\n },\n toggle(el, opts = {}) {\n const owner = liveSocket.owner(el);\n const inTransition = js_default.transitionClasses(opts.in);\n const outTransition = js_default.transitionClasses(opts.out);\n js_default.toggle(\n eventType,\n owner,\n el,\n opts.display,\n inTransition,\n outTransition,\n opts.time,\n opts.blocking\n );\n },\n addClass(el, names, opts = {}) {\n const classNames = Array.isArray(names) ? names : names.split(\" \");\n const owner = liveSocket.owner(el);\n js_default.addOrRemoveClasses(\n el,\n classNames,\n [],\n js_default.transitionClasses(opts.transition),\n opts.time,\n owner,\n opts.blocking\n );\n },\n removeClass(el, names, opts = {}) {\n const classNames = Array.isArray(names) ? names : names.split(\" \");\n const owner = liveSocket.owner(el);\n js_default.addOrRemoveClasses(\n el,\n [],\n classNames,\n js_default.transitionClasses(opts.transition),\n opts.time,\n owner,\n opts.blocking\n );\n },\n toggleClass(el, names, opts = {}) {\n const classNames = Array.isArray(names) ? names : names.split(\" \");\n const owner = liveSocket.owner(el);\n js_default.toggleClasses(\n el,\n classNames,\n js_default.transitionClasses(opts.transition),\n opts.time,\n owner,\n opts.blocking\n );\n },\n transition(el, transition, opts = {}) {\n const owner = liveSocket.owner(el);\n js_default.addOrRemoveClasses(\n el,\n [],\n [],\n js_default.transitionClasses(transition),\n opts.time,\n owner,\n opts.blocking\n );\n },\n setAttribute(el, attr, val) {\n js_default.setOrRemoveAttrs(el, [[attr, val]], []);\n },\n removeAttribute(el, attr) {\n js_default.setOrRemoveAttrs(el, [], [attr]);\n },\n toggleAttribute(el, attr, val1, val2) {\n js_default.toggleAttr(el, attr, val1, val2);\n },\n push(el, type, opts = {}) {\n liveSocket.withinOwners(el, (view) => {\n const data = opts.value || {};\n delete opts.value;\n let e = new CustomEvent(\"phx:exec\", { detail: { sourceElement: el } });\n js_default.exec(e, eventType, type, view, el, [\"push\", { data, ...opts }]);\n });\n },\n navigate(href, opts = {}) {\n const customEvent = new CustomEvent(\"phx:exec\");\n liveSocket.historyRedirect(\n customEvent,\n href,\n opts.replace ? \"replace\" : \"push\",\n null,\n null\n );\n },\n patch(href, opts = {}) {\n const customEvent = new CustomEvent(\"phx:exec\");\n liveSocket.pushHistoryPatch(\n customEvent,\n href,\n opts.replace ? \"replace\" : \"push\",\n null\n );\n },\n ignoreAttributes(el, attrs) {\n js_default.ignoreAttrs(el, Array.isArray(attrs) ? attrs : [attrs]);\n }\n };\n};\n\n// js/phoenix_live_view/view_hook.ts\nvar HOOK_ID = \"hookId\";\nvar DEAD_HOOK = \"deadHook\";\nvar viewHookID = 1;\nvar ViewHook = class _ViewHook {\n get liveSocket() {\n return this.__liveSocket();\n }\n static makeID() {\n return viewHookID++;\n }\n static elementID(el) {\n return dom_default.private(el, HOOK_ID);\n }\n static deadHook(el) {\n return dom_default.private(el, DEAD_HOOK) === true;\n }\n constructor(view, el, callbacks) {\n this.el = el;\n this.__attachView(view);\n this.__listeners = /* @__PURE__ */ new Set();\n this.__isDisconnected = false;\n dom_default.putPrivate(this.el, HOOK_ID, _ViewHook.makeID());\n if (view && view.isDead) {\n dom_default.putPrivate(this.el, DEAD_HOOK, true);\n }\n if (callbacks) {\n const protectedProps = /* @__PURE__ */ new Set([\n \"el\",\n \"liveSocket\",\n \"__view\",\n \"__listeners\",\n \"__isDisconnected\",\n \"constructor\",\n // Standard object properties\n // Core ViewHook API methods\n \"js\",\n \"pushEvent\",\n \"pushEventTo\",\n \"handleEvent\",\n \"removeHandleEvent\",\n \"upload\",\n \"uploadTo\",\n // Internal lifecycle callers\n \"__mounted\",\n \"__updated\",\n \"__beforeUpdate\",\n \"__destroyed\",\n \"__reconnected\",\n \"__disconnected\",\n \"__cleanup__\"\n ]);\n for (const key in callbacks) {\n if (Object.prototype.hasOwnProperty.call(callbacks, key)) {\n this[key] = callbacks[key];\n if (protectedProps.has(key)) {\n console.warn(\n `Hook object for element #${el.id} overwrites core property '${key}'!`\n );\n }\n }\n }\n const lifecycleMethods = [\n \"mounted\",\n \"beforeUpdate\",\n \"updated\",\n \"destroyed\",\n \"disconnected\",\n \"reconnected\"\n ];\n lifecycleMethods.forEach((methodName) => {\n if (callbacks[methodName] && typeof callbacks[methodName] === \"function\") {\n this[methodName] = callbacks[methodName];\n }\n });\n }\n }\n /** @internal */\n __attachView(view) {\n if (view) {\n this.__view = () => view;\n this.__liveSocket = () => view.liveSocket;\n } else {\n this.__view = () => {\n throw new Error(\n `hook not yet attached to a live view: ${this.el.outerHTML}`\n );\n };\n this.__liveSocket = () => {\n throw new Error(\n `hook not yet attached to a live view: ${this.el.outerHTML}`\n );\n };\n }\n }\n // Default lifecycle methods\n mounted() {\n }\n beforeUpdate() {\n }\n updated() {\n }\n destroyed() {\n }\n disconnected() {\n }\n reconnected() {\n }\n // Internal lifecycle callers - called by the View\n /** @internal */\n __mounted() {\n this.mounted();\n }\n /** @internal */\n __updated() {\n this.updated();\n }\n /** @internal */\n __beforeUpdate() {\n this.beforeUpdate();\n }\n /** @internal */\n __destroyed() {\n this.destroyed();\n dom_default.deletePrivate(this.el, HOOK_ID);\n }\n /** @internal */\n __reconnected() {\n if (this.__isDisconnected) {\n this.__isDisconnected = false;\n this.reconnected();\n }\n }\n /** @internal */\n __disconnected() {\n this.__isDisconnected = true;\n this.disconnected();\n }\n js() {\n return {\n ...js_commands_default(this.__view().liveSocket, \"hook\"),\n exec: (encodedJS) => {\n this.__view().liveSocket.execJS(this.el, encodedJS, \"hook\");\n }\n };\n }\n pushEvent(event, payload, onReply) {\n const promise = this.__view().pushHookEvent(\n this.el,\n null,\n event,\n payload || {}\n );\n if (onReply === void 0) {\n return promise.then(({ reply }) => reply);\n }\n promise.then(\n ({ reply, ref }) => onReply(reply, ref)\n ).catch(() => {\n });\n }\n pushEventTo(selectorOrTarget, event, payload, onReply) {\n if (onReply === void 0) {\n const targetPair = [];\n this.__view().withinTargets(\n selectorOrTarget,\n (view, targetCtx) => {\n targetPair.push({ view, targetCtx });\n }\n );\n const promises = targetPair.map(({ view, targetCtx }) => {\n return view.pushHookEvent(this.el, targetCtx, event, payload || {});\n });\n return Promise.allSettled(promises);\n }\n this.__view().withinTargets(\n selectorOrTarget,\n (view, targetCtx) => {\n view.pushHookEvent(this.el, targetCtx, event, payload || {}).then(\n ({ reply, ref }) => onReply(reply, ref)\n ).catch(() => {\n });\n }\n );\n }\n handleEvent(event, callback) {\n const callbackRef = {\n event,\n callback: (customEvent) => callback(customEvent.detail)\n };\n window.addEventListener(\n `phx:${event}`,\n callbackRef.callback\n );\n this.__listeners.add(callbackRef);\n return callbackRef;\n }\n removeHandleEvent(ref) {\n window.removeEventListener(\n `phx:${ref.event}`,\n ref.callback\n );\n this.__listeners.delete(ref);\n }\n upload(name, files) {\n return this.__view().dispatchUploads(null, name, files);\n }\n uploadTo(selectorOrTarget, name, files) {\n return this.__view().withinTargets(\n selectorOrTarget,\n (view, targetCtx) => {\n view.dispatchUploads(targetCtx, name, files);\n }\n );\n }\n /** @internal */\n __cleanup__() {\n this.__listeners.forEach(\n (callbackRef) => this.removeHandleEvent(callbackRef)\n );\n }\n};\n\n// js/phoenix_live_view/view.js\nvar prependFormDataKey = (key, prefix) => {\n const isArray = key.endsWith(\"[]\");\n let baseKey = isArray ? key.slice(0, -2) : key;\n baseKey = baseKey.replace(/([^\\[\\]]+)(\\]?$)/, `${prefix}$1$2`);\n if (isArray) {\n baseKey += \"[]\";\n }\n return baseKey;\n};\nvar View = class _View {\n static closestView(el) {\n const liveViewEl = el.closest(PHX_VIEW_SELECTOR);\n return liveViewEl ? dom_default.private(liveViewEl, \"view\") : null;\n }\n constructor(el, liveSocket, parentView, flash, liveReferer) {\n this.isDead = false;\n this.liveSocket = liveSocket;\n this.flash = flash;\n this.parent = parentView;\n this.root = parentView ? parentView.root : this;\n this.el = el;\n const boundView = dom_default.private(this.el, \"view\");\n if (boundView !== void 0 && boundView.isDead !== true) {\n logError(\n `The DOM element for this view has already been bound to a view.\n\n An element can only ever be associated with a single view!\n Please ensure that you are not trying to initialize multiple LiveSockets on the same page.\n This could happen if you're accidentally trying to render your root layout more than once.\n Ensure that the template set on the LiveView is different than the root layout.\n `,\n { view: boundView }\n );\n throw new Error(\"Cannot bind multiple views to the same DOM element.\");\n }\n dom_default.putPrivate(this.el, \"view\", this);\n this.id = this.el.id;\n this.ref = 0;\n this.lastAckRef = null;\n this.childJoins = 0;\n this.loaderTimer = null;\n this.disconnectedTimer = null;\n this.pendingDiffs = [];\n this.pendingForms = /* @__PURE__ */ new Set();\n this.redirect = false;\n this.href = null;\n this.joinCount = this.parent ? this.parent.joinCount - 1 : 0;\n this.joinAttempts = 0;\n this.joinPending = true;\n this.destroyed = false;\n this.joinCallback = function(onDone) {\n onDone && onDone();\n };\n this.stopCallback = function() {\n };\n this.pendingJoinOps = [];\n this.viewHooks = {};\n this.formSubmits = [];\n this.children = this.parent ? null : {};\n this.root.children[this.id] = {};\n this.formsForRecovery = {};\n this.channel = this.liveSocket.channel(`lv:${this.id}`, () => {\n const url = this.href && this.expandURL(this.href);\n return {\n redirect: this.redirect ? url : void 0,\n url: this.redirect ? void 0 : url || void 0,\n params: this.connectParams(liveReferer),\n session: this.getSession(),\n static: this.getStatic(),\n flash: this.flash,\n sticky: this.el.hasAttribute(PHX_STICKY)\n };\n });\n this.portalElementIds = /* @__PURE__ */ new Set();\n }\n setHref(href) {\n this.href = href;\n }\n setRedirect(href) {\n this.redirect = true;\n this.href = href;\n }\n isMain() {\n return this.el.hasAttribute(PHX_MAIN);\n }\n connectParams(liveReferer) {\n const params = this.liveSocket.params(this.el);\n const manifest = dom_default.all(document, `[${this.binding(PHX_TRACK_STATIC)}]`).map((node) => node.src || node.href).filter((url) => typeof url === \"string\");\n if (manifest.length > 0) {\n params[\"_track_static\"] = manifest;\n }\n params[\"_mounts\"] = this.joinCount;\n params[\"_mount_attempts\"] = this.joinAttempts;\n params[\"_live_referer\"] = liveReferer;\n this.joinAttempts++;\n return params;\n }\n isConnected() {\n return this.channel.canPush();\n }\n getSession() {\n return this.el.getAttribute(PHX_SESSION);\n }\n getStatic() {\n const val = this.el.getAttribute(PHX_STATIC);\n return val === \"\" ? null : val;\n }\n destroy(callback = function() {\n }) {\n this.destroyAllChildren();\n this.destroyPortalElements();\n this.destroyed = true;\n dom_default.deletePrivate(this.el, \"view\");\n delete this.root.children[this.id];\n if (this.parent) {\n delete this.root.children[this.parent.id][this.id];\n }\n clearTimeout(this.loaderTimer);\n const onFinished = () => {\n callback();\n for (const id in this.viewHooks) {\n this.destroyHook(this.viewHooks[id]);\n }\n };\n dom_default.markPhxChildDestroyed(this.el);\n this.log(\"destroyed\", () => [\"the child has been removed from the parent\"]);\n this.channel.leave().receive(\"ok\", onFinished).receive(\"error\", onFinished).receive(\"timeout\", onFinished);\n }\n setContainerClasses(...classes) {\n this.el.classList.remove(\n PHX_CONNECTED_CLASS,\n PHX_LOADING_CLASS,\n PHX_ERROR_CLASS,\n PHX_CLIENT_ERROR_CLASS,\n PHX_SERVER_ERROR_CLASS\n );\n this.el.classList.add(...classes);\n }\n showLoader(timeout) {\n clearTimeout(this.loaderTimer);\n if (timeout) {\n this.loaderTimer = setTimeout(() => this.showLoader(), timeout);\n } else {\n for (const id in this.viewHooks) {\n this.viewHooks[id].__disconnected();\n }\n this.setContainerClasses(PHX_LOADING_CLASS);\n }\n }\n execAll(binding) {\n dom_default.all(\n this.el,\n `[${binding}]`,\n (el) => this.liveSocket.execJS(el, el.getAttribute(binding))\n );\n }\n hideLoader() {\n clearTimeout(this.loaderTimer);\n clearTimeout(this.disconnectedTimer);\n this.setContainerClasses(PHX_CONNECTED_CLASS);\n this.execAll(this.binding(\"connected\"));\n }\n triggerReconnected() {\n for (const id in this.viewHooks) {\n this.viewHooks[id].__reconnected();\n }\n }\n log(kind, msgCallback) {\n this.liveSocket.log(this, kind, msgCallback);\n }\n transition(time, onStart, onDone = function() {\n }) {\n this.liveSocket.transition(time, onStart, onDone);\n }\n // calls the callback with the view and target element for the given phxTarget\n // targets can be:\n // * an element itself, then it is simply passed to liveSocket.owner;\n // * a CID (Component ID), then we first search the component's element in the DOM\n // * a selector, then we search the selector in the DOM and call the callback\n // for each element found with the corresponding owner view\n withinTargets(phxTarget, callback, dom = document) {\n if (phxTarget instanceof HTMLElement || phxTarget instanceof SVGElement) {\n return this.liveSocket.owner(\n phxTarget,\n (view) => callback(view, phxTarget)\n );\n }\n if (isCid(phxTarget)) {\n const targets = dom_default.findComponentNodeList(this.id, phxTarget, dom);\n if (targets.length === 0) {\n logError(`no component found matching phx-target of ${phxTarget}`);\n } else {\n callback(this, parseInt(phxTarget));\n }\n } else {\n const targets = Array.from(dom.querySelectorAll(phxTarget));\n if (targets.length === 0) {\n logError(\n `nothing found matching the phx-target selector \"${phxTarget}\"`\n );\n }\n targets.forEach(\n (target) => this.liveSocket.owner(target, (view) => callback(view, target))\n );\n }\n }\n applyDiff(type, rawDiff, callback) {\n this.log(type, () => [\"\", clone(rawDiff)]);\n const { diff, reply, events, title } = Rendered.extract(rawDiff);\n const ev = events.reduce(\n (acc, args) => {\n if (args.length === 3 && args[2] == true) {\n acc.pre.push(args.slice(0, -1));\n } else {\n acc.post.push(args);\n }\n return acc;\n },\n { pre: [], post: [] }\n );\n this.liveSocket.dispatchEvents(ev.pre);\n const update = () => {\n callback({ diff, reply, events: ev.post });\n if (typeof title === \"string\" || type == \"mount\" && this.isMain()) {\n window.requestAnimationFrame(() => dom_default.putTitle(title));\n }\n };\n if (\"onDocumentPatch\" in this.liveSocket.domCallbacks) {\n this.liveSocket.triggerDOM(\"onDocumentPatch\", [update]);\n } else {\n update();\n }\n }\n onJoin(resp) {\n const { rendered, container, liveview_version, pid } = resp;\n if (container) {\n const [tag, attrs] = container;\n this.el = dom_default.replaceRootContainer(this.el, tag, attrs);\n }\n this.childJoins = 0;\n this.joinPending = true;\n this.flash = null;\n if (this.root === this) {\n this.formsForRecovery = this.getFormsForRecovery();\n }\n if (this.isMain() && window.history.state === null) {\n browser_default.pushState(\"replace\", {\n type: \"patch\",\n id: this.id,\n position: this.liveSocket.currentHistoryPosition\n });\n }\n if (liveview_version !== this.liveSocket.version()) {\n console.warn(\n `LiveView asset version mismatch. JavaScript version ${this.liveSocket.version()} vs. server ${liveview_version}. To avoid issues, please ensure that your assets use the same version as the server.`\n );\n }\n if (pid) {\n this.el.setAttribute(PHX_LV_PID, pid);\n }\n browser_default.dropLocal(\n this.liveSocket.localStorage,\n window.location.pathname,\n CONSECUTIVE_RELOADS\n );\n this.applyDiff(\"mount\", rendered, ({ diff, events }) => {\n this.rendered = new Rendered(this.id, diff);\n const [html, streams] = this.renderContainer(null, \"join\");\n this.dropPendingRefs();\n this.joinCount++;\n this.joinAttempts = 0;\n this.maybeRecoverForms(html, () => {\n this.onJoinComplete(resp, html, streams, events);\n });\n });\n }\n dropPendingRefs() {\n dom_default.all(document, `[${PHX_REF_SRC}=\"${this.refSrc()}\"]`, (el) => {\n el.removeAttribute(PHX_REF_LOADING);\n el.removeAttribute(PHX_REF_SRC);\n el.removeAttribute(PHX_REF_LOCK);\n });\n }\n onJoinComplete({ live_patch }, html, streams, events) {\n if (this.joinCount > 1 || this.parent && !this.parent.isJoinPending()) {\n return this.applyJoinPatch(live_patch, html, streams, events);\n }\n const newChildren = dom_default.findPhxChildrenInFragment(html, this.id).filter(\n (toEl) => {\n const fromEl = toEl.id && this.el.querySelector(`[id=\"${toEl.id}\"]`);\n const phxStatic = fromEl && fromEl.getAttribute(PHX_STATIC);\n if (phxStatic) {\n toEl.setAttribute(PHX_STATIC, phxStatic);\n }\n if (fromEl) {\n fromEl.setAttribute(PHX_ROOT_ID, this.root.id);\n }\n return this.joinChild(toEl);\n }\n );\n if (newChildren.length === 0) {\n if (this.parent) {\n this.root.pendingJoinOps.push([\n this,\n () => this.applyJoinPatch(live_patch, html, streams, events)\n ]);\n this.parent.ackJoin(this);\n } else {\n this.onAllChildJoinsComplete();\n this.applyJoinPatch(live_patch, html, streams, events);\n }\n } else {\n this.root.pendingJoinOps.push([\n this,\n () => this.applyJoinPatch(live_patch, html, streams, events)\n ]);\n }\n }\n attachTrueDocEl() {\n this.el = dom_default.byId(this.id);\n this.el.setAttribute(PHX_ROOT_ID, this.root.id);\n }\n // this is invoked for dead and live views, so we must filter by\n // by owner to ensure we aren't duplicating hooks across disconnect\n // and connected states. This also handles cases where hooks exist\n // in a root layout with a LV in the body\n execNewMounted(parent = document) {\n let phxViewportTop = this.binding(PHX_VIEWPORT_TOP);\n let phxViewportBottom = this.binding(PHX_VIEWPORT_BOTTOM);\n this.all(\n parent,\n `[${phxViewportTop}], [${phxViewportBottom}]`,\n (hookEl) => {\n dom_default.maintainPrivateHooks(\n hookEl,\n hookEl,\n phxViewportTop,\n phxViewportBottom\n );\n this.maybeAddNewHook(hookEl);\n }\n );\n this.all(\n parent,\n `[${this.binding(PHX_HOOK)}], [data-phx-${PHX_HOOK}]`,\n (hookEl) => {\n this.maybeAddNewHook(hookEl);\n }\n );\n this.all(parent, `[${this.binding(PHX_MOUNTED)}]`, (el) => {\n this.maybeMounted(el);\n });\n }\n all(parent, selector, callback) {\n dom_default.all(parent, selector, (el) => {\n if (this.ownsElement(el)) {\n callback(el);\n }\n });\n }\n applyJoinPatch(live_patch, html, streams, events) {\n if (this.joinCount > 1) {\n if (this.pendingJoinOps.length) {\n this.pendingJoinOps.forEach((cb) => typeof cb === \"function\" && cb());\n this.pendingJoinOps = [];\n }\n }\n this.attachTrueDocEl();\n const patch = new DOMPatch(this, this.el, this.id, html, streams, null);\n patch.markPrunableContentForRemoval();\n this.performPatch(patch, false, true);\n this.joinNewChildren();\n this.execNewMounted();\n this.joinPending = false;\n this.liveSocket.dispatchEvents(events);\n this.applyPendingUpdates();\n if (live_patch) {\n const { kind, to } = live_patch;\n this.liveSocket.historyPatch(to, kind);\n }\n this.hideLoader();\n if (this.joinCount > 1) {\n this.triggerReconnected();\n }\n this.stopCallback();\n }\n triggerBeforeUpdateHook(fromEl, toEl) {\n this.liveSocket.triggerDOM(\"onBeforeElUpdated\", [fromEl, toEl]);\n const hook = this.getHook(fromEl);\n const isIgnored = hook && dom_default.isIgnored(fromEl, this.binding(PHX_UPDATE));\n if (hook && !fromEl.isEqualNode(toEl) && !(isIgnored && isEqualObj(fromEl.dataset, toEl.dataset))) {\n hook.__beforeUpdate();\n return hook;\n }\n }\n maybeMounted(el) {\n const phxMounted = el.getAttribute(this.binding(PHX_MOUNTED));\n const hasBeenInvoked = phxMounted && dom_default.private(el, \"mounted\");\n if (phxMounted && !hasBeenInvoked) {\n this.liveSocket.execJS(el, phxMounted);\n dom_default.putPrivate(el, \"mounted\", true);\n }\n }\n maybeAddNewHook(el) {\n const newHook = this.addHook(el);\n if (newHook) {\n newHook.__mounted();\n }\n }\n performPatch(patch, pruneCids, isJoinPatch = false) {\n const removedEls = [];\n let phxChildrenAdded = false;\n const updatedHookIds = /* @__PURE__ */ new Set();\n this.liveSocket.triggerDOM(\"onPatchStart\", [patch.targetContainer]);\n patch.after(\"added\", (el) => {\n this.liveSocket.triggerDOM(\"onNodeAdded\", [el]);\n const phxViewportTop = this.binding(PHX_VIEWPORT_TOP);\n const phxViewportBottom = this.binding(PHX_VIEWPORT_BOTTOM);\n dom_default.maintainPrivateHooks(el, el, phxViewportTop, phxViewportBottom);\n this.maybeAddNewHook(el);\n if (el.getAttribute) {\n this.maybeMounted(el);\n }\n });\n patch.after(\"phxChildAdded\", (el) => {\n if (dom_default.isPhxSticky(el)) {\n this.liveSocket.joinRootViews();\n } else {\n phxChildrenAdded = true;\n }\n });\n patch.before(\"updated\", (fromEl, toEl) => {\n const hook = this.triggerBeforeUpdateHook(fromEl, toEl);\n if (hook) {\n updatedHookIds.add(fromEl.id);\n }\n js_default.onBeforeElUpdated(fromEl, toEl);\n });\n patch.after(\"updated\", (el) => {\n if (updatedHookIds.has(el.id)) {\n this.getHook(el).__updated();\n }\n });\n patch.after(\"discarded\", (el) => {\n if (el.nodeType === Node.ELEMENT_NODE) {\n removedEls.push(el);\n }\n });\n patch.after(\n \"transitionsDiscarded\",\n (els) => this.afterElementsRemoved(els, pruneCids)\n );\n patch.perform(isJoinPatch);\n this.afterElementsRemoved(removedEls, pruneCids);\n this.liveSocket.triggerDOM(\"onPatchEnd\", [patch.targetContainer]);\n return phxChildrenAdded;\n }\n afterElementsRemoved(elements, pruneCids) {\n const destroyedCIDs = [];\n elements.forEach((parent) => {\n const components = dom_default.all(\n parent,\n `[${PHX_VIEW_REF}=\"${this.id}\"][${PHX_COMPONENT}]`\n );\n const hooks = dom_default.all(\n parent,\n `[${this.binding(PHX_HOOK)}], [data-phx-hook]`\n );\n components.concat(parent).forEach((el) => {\n const cid = this.componentID(el);\n if (isCid(cid) && destroyedCIDs.indexOf(cid) === -1 && el.getAttribute(PHX_VIEW_REF) === this.id) {\n destroyedCIDs.push(cid);\n }\n });\n hooks.concat(parent).forEach((hookEl) => {\n const hook = this.getHook(hookEl);\n hook && this.destroyHook(hook);\n });\n });\n if (pruneCids) {\n this.maybePushComponentsDestroyed(destroyedCIDs);\n }\n }\n joinNewChildren() {\n dom_default.findPhxChildren(document, this.id).forEach((el) => this.joinChild(el));\n }\n maybeRecoverForms(html, callback) {\n const phxChange = this.binding(\"change\");\n const oldForms = this.root.formsForRecovery;\n const template = document.createElement(\"template\");\n template.innerHTML = html;\n dom_default.all(template.content, `[${PHX_PORTAL}]`).forEach((portalTemplate) => {\n template.content.firstElementChild.appendChild(\n portalTemplate.content.firstElementChild\n );\n });\n const rootEl = template.content.firstElementChild;\n rootEl.id = this.id;\n rootEl.setAttribute(PHX_ROOT_ID, this.root.id);\n rootEl.setAttribute(PHX_SESSION, this.getSession());\n rootEl.setAttribute(PHX_STATIC, this.getStatic());\n rootEl.setAttribute(PHX_PARENT_ID, this.parent ? this.parent.id : null);\n const formsToRecover = (\n // we go over all forms in the new DOM; because this is only the HTML for the current\n // view, we can be sure that all forms are owned by this view:\n dom_default.all(template.content, \"form\").filter((newForm) => newForm.id && oldForms[newForm.id]).filter((newForm) => !this.pendingForms.has(newForm.id)).filter(\n (newForm) => oldForms[newForm.id].getAttribute(phxChange) === newForm.getAttribute(phxChange)\n ).map((newForm) => {\n return [oldForms[newForm.id], newForm];\n })\n );\n if (formsToRecover.length === 0) {\n return callback();\n }\n formsToRecover.forEach(([oldForm, newForm], i) => {\n this.pendingForms.add(newForm.id);\n this.pushFormRecovery(\n oldForm,\n newForm,\n template.content.firstElementChild,\n () => {\n this.pendingForms.delete(newForm.id);\n if (i === formsToRecover.length - 1) {\n callback();\n }\n }\n );\n });\n }\n getChildById(id) {\n return this.root.children[this.id][id];\n }\n getDescendentByEl(el) {\n if (el.id === this.id) {\n return this;\n } else {\n return this.children[el.getAttribute(PHX_PARENT_ID)]?.[el.id];\n }\n }\n destroyDescendent(id) {\n for (const parentId in this.root.children) {\n for (const childId in this.root.children[parentId]) {\n if (childId === id) {\n return this.root.children[parentId][childId].destroy();\n }\n }\n }\n }\n joinChild(el) {\n const child = this.getChildById(el.id);\n if (!child) {\n const view = new _View(el, this.liveSocket, this);\n this.root.children[this.id][view.id] = view;\n view.join();\n this.childJoins++;\n return true;\n }\n }\n isJoinPending() {\n return this.joinPending;\n }\n ackJoin(_child) {\n this.childJoins--;\n if (this.childJoins === 0) {\n if (this.parent) {\n this.parent.ackJoin(this);\n } else {\n this.onAllChildJoinsComplete();\n }\n }\n }\n onAllChildJoinsComplete() {\n this.pendingForms.clear();\n this.formsForRecovery = {};\n this.joinCallback(() => {\n this.pendingJoinOps.forEach(([view, op]) => {\n if (!view.isDestroyed()) {\n op();\n }\n });\n this.pendingJoinOps = [];\n });\n }\n update(diff, events, isPending = false) {\n if (this.isJoinPending() || this.liveSocket.hasPendingLink() && this.root.isMain()) {\n if (!isPending) {\n this.pendingDiffs.push({ diff, events });\n }\n return false;\n }\n this.rendered.mergeDiff(diff);\n let phxChildrenAdded = false;\n if (this.rendered.isComponentOnlyDiff(diff)) {\n this.liveSocket.time(\"component patch complete\", () => {\n const parentCids = dom_default.findExistingParentCIDs(\n this.id,\n this.rendered.componentCIDs(diff)\n );\n parentCids.forEach((parentCID) => {\n if (this.componentPatch(\n this.rendered.getComponent(diff, parentCID),\n parentCID\n )) {\n phxChildrenAdded = true;\n }\n });\n });\n } else if (!isEmpty(diff)) {\n this.liveSocket.time(\"full patch complete\", () => {\n const [html, streams] = this.renderContainer(diff, \"update\");\n const patch = new DOMPatch(this, this.el, this.id, html, streams, null);\n phxChildrenAdded = this.performPatch(patch, true);\n });\n }\n this.liveSocket.dispatchEvents(events);\n if (phxChildrenAdded) {\n this.joinNewChildren();\n }\n return true;\n }\n renderContainer(diff, kind) {\n return this.liveSocket.time(`toString diff (${kind})`, () => {\n const tag = this.el.tagName;\n const cids = diff ? this.rendered.componentCIDs(diff) : null;\n const { buffer: html, streams } = this.rendered.toString(cids);\n return [`<${tag}>${html}`, streams];\n });\n }\n componentPatch(diff, cid) {\n if (isEmpty(diff))\n return false;\n const { buffer: html, streams } = this.rendered.componentToString(cid);\n const patch = new DOMPatch(this, this.el, this.id, html, streams, cid);\n const childrenAdded = this.performPatch(patch, true);\n return childrenAdded;\n }\n getHook(el) {\n return this.viewHooks[ViewHook.elementID(el)];\n }\n addHook(el) {\n const hookElId = ViewHook.elementID(el);\n if (el.getAttribute && !this.ownsElement(el)) {\n return;\n }\n if (hookElId && !this.viewHooks[hookElId]) {\n if (ViewHook.deadHook(el)) {\n return;\n }\n const hook = dom_default.getCustomElHook(el) || logError(`no hook found for custom element: ${el.id}`);\n this.viewHooks[hookElId] = hook;\n hook.__attachView(this);\n return hook;\n } else if (hookElId || !el.getAttribute) {\n return;\n } else {\n const hookName = el.getAttribute(`data-phx-${PHX_HOOK}`) || el.getAttribute(this.binding(PHX_HOOK));\n if (!hookName) {\n return;\n }\n const hookDefinition = this.liveSocket.getHookDefinition(hookName);\n if (hookDefinition) {\n if (!el.id) {\n logError(\n `no DOM ID for hook \"${hookName}\". Hooks require a unique ID on each element.`,\n el\n );\n return;\n }\n let hookInstance;\n try {\n if (typeof hookDefinition === \"function\" && hookDefinition.prototype instanceof ViewHook) {\n hookInstance = new hookDefinition(this, el);\n } else if (typeof hookDefinition === \"object\" && hookDefinition !== null) {\n hookInstance = new ViewHook(this, el, hookDefinition);\n } else {\n logError(\n `Invalid hook definition for \"${hookName}\". Expected a class extending ViewHook or an object definition.`,\n el\n );\n return;\n }\n } catch (e) {\n const errorMessage = e instanceof Error ? e.message : String(e);\n logError(`Failed to create hook \"${hookName}\": ${errorMessage}`, el);\n return;\n }\n this.viewHooks[ViewHook.elementID(hookInstance.el)] = hookInstance;\n return hookInstance;\n } else if (hookName !== null) {\n logError(`unknown hook found for \"${hookName}\"`, el);\n }\n }\n }\n destroyHook(hook) {\n const hookId = ViewHook.elementID(hook.el);\n hook.__destroyed();\n hook.__cleanup__();\n delete this.viewHooks[hookId];\n }\n applyPendingUpdates() {\n this.pendingDiffs = this.pendingDiffs.filter(\n ({ diff, events }) => !this.update(diff, events, true)\n );\n this.eachChild((child) => child.applyPendingUpdates());\n }\n eachChild(callback) {\n const children = this.root.children[this.id] || {};\n for (const id in children) {\n callback(this.getChildById(id));\n }\n }\n onChannel(event, cb) {\n this.liveSocket.onChannel(this.channel, event, (resp) => {\n if (this.isJoinPending()) {\n if (this.joinCount > 1) {\n this.pendingJoinOps.push(() => cb(resp));\n } else {\n this.root.pendingJoinOps.push([this, () => cb(resp)]);\n }\n } else {\n this.liveSocket.requestDOMUpdate(() => cb(resp));\n }\n });\n }\n bindChannel() {\n this.liveSocket.onChannel(this.channel, \"diff\", (rawDiff) => {\n this.liveSocket.requestDOMUpdate(() => {\n this.applyDiff(\n \"update\",\n rawDiff,\n ({ diff, events }) => this.update(diff, events)\n );\n });\n });\n this.onChannel(\n \"redirect\",\n ({ to, flash }) => this.onRedirect({ to, flash })\n );\n this.onChannel(\"live_patch\", (redir) => this.onLivePatch(redir));\n this.onChannel(\"live_redirect\", (redir) => this.onLiveRedirect(redir));\n this.channel.onError((reason) => this.onError(reason));\n this.channel.onClose((reason) => this.onClose(reason));\n }\n destroyAllChildren() {\n this.eachChild((child) => child.destroy());\n }\n onLiveRedirect(redir) {\n const { to, kind, flash } = redir;\n const url = this.expandURL(to);\n const e = new CustomEvent(\"phx:server-navigate\", {\n detail: { to, kind, flash }\n });\n this.liveSocket.historyRedirect(e, url, kind, flash);\n }\n onLivePatch(redir) {\n const { to, kind } = redir;\n this.href = this.expandURL(to);\n this.liveSocket.historyPatch(to, kind);\n }\n expandURL(to) {\n return to.startsWith(\"/\") ? `${window.location.protocol}//${window.location.host}${to}` : to;\n }\n /**\n * @param {{to: string, flash?: string, reloadToken?: string}} redirect\n */\n onRedirect({ to, flash, reloadToken }) {\n this.liveSocket.redirect(to, flash, reloadToken);\n }\n isDestroyed() {\n return this.destroyed;\n }\n joinDead() {\n this.isDead = true;\n }\n joinPush() {\n this.joinPush = this.joinPush || this.channel.join();\n return this.joinPush;\n }\n join(callback) {\n this.showLoader(this.liveSocket.loaderTimeout);\n this.bindChannel();\n if (this.isMain()) {\n this.stopCallback = this.liveSocket.withPageLoading({\n to: this.href,\n kind: \"initial\"\n });\n }\n this.joinCallback = (onDone) => {\n onDone = onDone || function() {\n };\n callback ? callback(this.joinCount, onDone) : onDone();\n };\n this.wrapPush(() => this.channel.join(), {\n ok: (resp) => this.liveSocket.requestDOMUpdate(() => this.onJoin(resp)),\n error: (error) => this.onJoinError(error),\n timeout: () => this.onJoinError({ reason: \"timeout\" })\n });\n }\n onJoinError(resp) {\n if (resp.reason === \"reload\") {\n this.log(\"error\", () => [\n `failed mount with ${resp.status}. Falling back to page reload`,\n resp\n ]);\n this.onRedirect({\n to: this.liveSocket.main.href,\n reloadToken: resp.token\n });\n return;\n } else if (resp.reason === \"unauthorized\" || resp.reason === \"stale\") {\n this.log(\"error\", () => [\n \"unauthorized live_redirect. Falling back to page request\",\n resp\n ]);\n this.onRedirect({ to: this.liveSocket.main.href, flash: this.flash });\n return;\n }\n if (resp.redirect || resp.live_redirect) {\n this.joinPending = false;\n this.channel.leave();\n }\n if (resp.redirect) {\n return this.onRedirect(resp.redirect);\n }\n if (resp.live_redirect) {\n return this.onLiveRedirect(resp.live_redirect);\n }\n this.log(\"error\", () => [\"unable to join\", resp]);\n if (this.isMain()) {\n this.displayError(\n [PHX_LOADING_CLASS, PHX_ERROR_CLASS, PHX_SERVER_ERROR_CLASS],\n { unstructuredError: resp, errorKind: \"server\" }\n );\n if (this.liveSocket.isConnected()) {\n this.liveSocket.reloadWithJitter(this);\n }\n } else {\n if (this.joinAttempts >= MAX_CHILD_JOIN_ATTEMPTS) {\n this.root.displayError(\n [PHX_LOADING_CLASS, PHX_ERROR_CLASS, PHX_SERVER_ERROR_CLASS],\n { unstructuredError: resp, errorKind: \"server\" }\n );\n this.log(\"error\", () => [\n `giving up trying to mount after ${MAX_CHILD_JOIN_ATTEMPTS} tries`,\n resp\n ]);\n this.destroy();\n }\n const trueChildEl = dom_default.byId(this.el.id);\n if (trueChildEl) {\n dom_default.mergeAttrs(trueChildEl, this.el);\n this.displayError(\n [PHX_LOADING_CLASS, PHX_ERROR_CLASS, PHX_SERVER_ERROR_CLASS],\n { unstructuredError: resp, errorKind: \"server\" }\n );\n this.el = trueChildEl;\n } else {\n this.destroy();\n }\n }\n }\n onClose(reason) {\n if (this.isDestroyed()) {\n return;\n }\n if (this.isMain() && this.liveSocket.hasPendingLink() && reason !== \"leave\") {\n return this.liveSocket.reloadWithJitter(this);\n }\n this.destroyAllChildren();\n this.liveSocket.dropActiveElement(this);\n if (this.liveSocket.isUnloaded()) {\n this.showLoader(BEFORE_UNLOAD_LOADER_TIMEOUT);\n }\n }\n onError(reason) {\n this.onClose(reason);\n if (this.liveSocket.isConnected()) {\n this.log(\"error\", () => [\"view crashed\", reason]);\n }\n if (!this.liveSocket.isUnloaded()) {\n if (this.liveSocket.isConnected()) {\n this.displayError(\n [PHX_LOADING_CLASS, PHX_ERROR_CLASS, PHX_SERVER_ERROR_CLASS],\n { unstructuredError: reason, errorKind: \"server\" }\n );\n } else {\n this.displayError(\n [PHX_LOADING_CLASS, PHX_ERROR_CLASS, PHX_CLIENT_ERROR_CLASS],\n { unstructuredError: reason, errorKind: \"client\" }\n );\n }\n }\n }\n displayError(classes, details = {}) {\n if (this.isMain()) {\n dom_default.dispatchEvent(window, \"phx:page-loading-start\", {\n detail: { to: this.href, kind: \"error\", ...details }\n });\n }\n this.showLoader();\n this.setContainerClasses(...classes);\n this.delayedDisconnected();\n }\n delayedDisconnected() {\n this.disconnectedTimer = setTimeout(() => {\n this.execAll(this.binding(\"disconnected\"));\n }, this.liveSocket.disconnectedTimeout);\n }\n wrapPush(callerPush, receives) {\n const latency = this.liveSocket.getLatencySim();\n const withLatency = latency ? (cb) => setTimeout(() => !this.isDestroyed() && cb(), latency) : (cb) => !this.isDestroyed() && cb();\n withLatency(() => {\n callerPush().receive(\n \"ok\",\n (resp) => withLatency(() => receives.ok && receives.ok(resp))\n ).receive(\n \"error\",\n (reason) => withLatency(() => receives.error && receives.error(reason))\n ).receive(\n \"timeout\",\n () => withLatency(() => receives.timeout && receives.timeout())\n );\n });\n }\n pushWithReply(refGenerator, event, payload) {\n if (!this.isConnected()) {\n return Promise.reject(new Error(\"no connection\"));\n }\n const [ref, [el], opts] = refGenerator ? refGenerator({ payload }) : [null, [], {}];\n const oldJoinCount = this.joinCount;\n let onLoadingDone = function() {\n };\n if (opts.page_loading) {\n onLoadingDone = this.liveSocket.withPageLoading({\n kind: \"element\",\n target: el\n });\n }\n if (typeof payload.cid !== \"number\") {\n delete payload.cid;\n }\n return new Promise((resolve, reject) => {\n this.wrapPush(() => this.channel.push(event, payload, PUSH_TIMEOUT), {\n ok: (resp) => {\n if (ref !== null) {\n this.lastAckRef = ref;\n }\n const finish = (hookReply) => {\n if (resp.redirect) {\n this.onRedirect(resp.redirect);\n }\n if (resp.live_patch) {\n this.onLivePatch(resp.live_patch);\n }\n if (resp.live_redirect) {\n this.onLiveRedirect(resp.live_redirect);\n }\n onLoadingDone();\n resolve({ resp, reply: hookReply, ref });\n };\n if (resp.diff) {\n this.liveSocket.requestDOMUpdate(() => {\n this.applyDiff(\"update\", resp.diff, ({ diff, reply, events }) => {\n if (ref !== null) {\n this.undoRefs(ref, payload.event);\n }\n this.update(diff, events);\n finish(reply);\n });\n });\n } else {\n if (ref !== null) {\n this.undoRefs(ref, payload.event);\n }\n finish(null);\n }\n },\n error: (reason) => reject(new Error(`failed with reason: ${JSON.stringify(reason)}`)),\n timeout: () => {\n reject(new Error(\"timeout\"));\n if (this.joinCount === oldJoinCount) {\n this.liveSocket.reloadWithJitter(this, () => {\n this.log(\"timeout\", () => [\n \"received timeout while communicating with server. Falling back to hard refresh for recovery\"\n ]);\n });\n }\n }\n });\n });\n }\n undoRefs(ref, phxEvent, onlyEls) {\n if (!this.isConnected()) {\n return;\n }\n const selector = `[${PHX_REF_SRC}=\"${this.refSrc()}\"]`;\n if (onlyEls) {\n onlyEls = new Set(onlyEls);\n dom_default.all(document, selector, (parent) => {\n if (onlyEls && !onlyEls.has(parent)) {\n return;\n }\n dom_default.all(\n parent,\n selector,\n (child) => this.undoElRef(child, ref, phxEvent)\n );\n this.undoElRef(parent, ref, phxEvent);\n });\n } else {\n dom_default.all(document, selector, (el) => this.undoElRef(el, ref, phxEvent));\n }\n }\n undoElRef(el, ref, phxEvent) {\n const elRef = new ElementRef(el);\n elRef.maybeUndo(ref, phxEvent, (clonedTree) => {\n const patch = new DOMPatch(this, el, this.id, clonedTree, [], null, {\n undoRef: ref\n });\n const phxChildrenAdded = this.performPatch(patch, true);\n dom_default.all(\n el,\n `[${PHX_REF_SRC}=\"${this.refSrc()}\"]`,\n (child) => this.undoElRef(child, ref, phxEvent)\n );\n if (phxChildrenAdded) {\n this.joinNewChildren();\n }\n });\n }\n refSrc() {\n return this.el.id;\n }\n putRef(elements, phxEvent, eventType, opts = {}) {\n const newRef = this.ref++;\n const disableWith = this.binding(PHX_DISABLE_WITH);\n if (opts.loading) {\n const loadingEls = dom_default.all(document, opts.loading).map((el) => {\n return { el, lock: true, loading: true };\n });\n elements = elements.concat(loadingEls);\n }\n for (const { el, lock, loading } of elements) {\n if (!lock && !loading) {\n throw new Error(\"putRef requires lock or loading\");\n }\n el.setAttribute(PHX_REF_SRC, this.refSrc());\n if (loading) {\n el.setAttribute(PHX_REF_LOADING, newRef);\n }\n if (lock) {\n el.setAttribute(PHX_REF_LOCK, newRef);\n }\n if (!loading || opts.submitter && !(el === opts.submitter || el === opts.form)) {\n continue;\n }\n const lockCompletePromise = new Promise((resolve) => {\n el.addEventListener(`phx:undo-lock:${newRef}`, () => resolve(detail), {\n once: true\n });\n });\n const loadingCompletePromise = new Promise((resolve) => {\n el.addEventListener(\n `phx:undo-loading:${newRef}`,\n () => resolve(detail),\n { once: true }\n );\n });\n el.classList.add(`phx-${eventType}-loading`);\n const disableText = el.getAttribute(disableWith);\n if (disableText !== null) {\n if (!el.getAttribute(PHX_DISABLE_WITH_RESTORE)) {\n el.setAttribute(PHX_DISABLE_WITH_RESTORE, el.textContent);\n }\n if (disableText !== \"\") {\n el.textContent = disableText;\n }\n el.setAttribute(\n PHX_DISABLED,\n el.getAttribute(PHX_DISABLED) || el.disabled\n );\n el.setAttribute(\"disabled\", \"\");\n }\n const detail = {\n event: phxEvent,\n eventType,\n ref: newRef,\n isLoading: loading,\n isLocked: lock,\n lockElements: elements.filter(({ lock: lock2 }) => lock2).map(({ el: el2 }) => el2),\n loadingElements: elements.filter(({ loading: loading2 }) => loading2).map(({ el: el2 }) => el2),\n unlock: (els) => {\n els = Array.isArray(els) ? els : [els];\n this.undoRefs(newRef, phxEvent, els);\n },\n lockComplete: lockCompletePromise,\n loadingComplete: loadingCompletePromise,\n lock: (lockEl) => {\n return new Promise((resolve) => {\n if (this.isAcked(newRef)) {\n return resolve(detail);\n }\n lockEl.setAttribute(PHX_REF_LOCK, newRef);\n lockEl.setAttribute(PHX_REF_SRC, this.refSrc());\n lockEl.addEventListener(\n `phx:lock-stop:${newRef}`,\n () => resolve(detail),\n { once: true }\n );\n });\n }\n };\n if (opts.payload) {\n detail[\"payload\"] = opts.payload;\n }\n if (opts.target) {\n detail[\"target\"] = opts.target;\n }\n if (opts.originalEvent) {\n detail[\"originalEvent\"] = opts.originalEvent;\n }\n el.dispatchEvent(\n new CustomEvent(\"phx:push\", {\n detail,\n bubbles: true,\n cancelable: false\n })\n );\n if (phxEvent) {\n el.dispatchEvent(\n new CustomEvent(`phx:push:${phxEvent}`, {\n detail,\n bubbles: true,\n cancelable: false\n })\n );\n }\n }\n return [newRef, elements.map(({ el }) => el), opts];\n }\n isAcked(ref) {\n return this.lastAckRef !== null && this.lastAckRef >= ref;\n }\n componentID(el) {\n const cid = el.getAttribute && el.getAttribute(PHX_COMPONENT);\n return cid ? parseInt(cid) : null;\n }\n targetComponentID(target, targetCtx, opts = {}) {\n if (isCid(targetCtx)) {\n return targetCtx;\n }\n const cidOrSelector = opts.target || target.getAttribute(this.binding(\"target\"));\n if (isCid(cidOrSelector)) {\n return parseInt(cidOrSelector);\n } else if (targetCtx && (cidOrSelector !== null || opts.target)) {\n return this.closestComponentID(targetCtx);\n } else {\n return null;\n }\n }\n closestComponentID(targetCtx) {\n if (isCid(targetCtx)) {\n return targetCtx;\n } else if (targetCtx) {\n return maybe(\n // We either use the closest data-phx-component binding, or -\n // in case of portals - continue with the portal source.\n // This is necessary if teleporting an element outside of its LiveComponent.\n targetCtx.closest(`[${PHX_COMPONENT}],[${PHX_TELEPORTED_SRC}]`),\n (el) => {\n if (el.hasAttribute(PHX_COMPONENT)) {\n return this.ownsElement(el) && this.componentID(el);\n }\n if (el.hasAttribute(PHX_TELEPORTED_SRC)) {\n const portalParent = dom_default.byId(el.getAttribute(PHX_TELEPORTED_SRC));\n return this.closestComponentID(portalParent);\n }\n }\n );\n } else {\n return null;\n }\n }\n pushHookEvent(el, targetCtx, event, payload) {\n if (!this.isConnected()) {\n this.log(\"hook\", () => [\n \"unable to push hook event. LiveView not connected\",\n event,\n payload\n ]);\n return Promise.reject(\n new Error(\"unable to push hook event. LiveView not connected\")\n );\n }\n const refGenerator = () => this.putRef([{ el, loading: true, lock: true }], event, \"hook\", {\n payload,\n target: targetCtx\n });\n return this.pushWithReply(refGenerator, \"event\", {\n type: \"hook\",\n event,\n value: payload,\n cid: this.closestComponentID(targetCtx)\n }).then(({ resp: _resp, reply, ref }) => ({ reply, ref }));\n }\n extractMeta(el, meta, value) {\n const prefix = this.binding(\"value-\");\n for (let i = 0; i < el.attributes.length; i++) {\n if (!meta) {\n meta = {};\n }\n const name = el.attributes[i].name;\n if (name.startsWith(prefix)) {\n meta[name.replace(prefix, \"\")] = el.getAttribute(name);\n }\n }\n if (el.value !== void 0 && !(el instanceof HTMLFormElement)) {\n if (!meta) {\n meta = {};\n }\n meta.value = el.value;\n if (el.tagName === \"INPUT\" && CHECKABLE_INPUTS.indexOf(el.type) >= 0 && !el.checked) {\n delete meta.value;\n }\n }\n if (value) {\n if (!meta) {\n meta = {};\n }\n for (const key in value) {\n meta[key] = value[key];\n }\n }\n return meta;\n }\n serializeForm(form, opts, onlyNames = []) {\n const { submitter } = opts;\n let injectedElement;\n if (submitter && submitter.name) {\n const input = document.createElement(\"input\");\n input.type = \"hidden\";\n const formId = submitter.getAttribute(\"form\");\n if (formId) {\n input.setAttribute(\"form\", formId);\n }\n input.name = submitter.name;\n input.value = submitter.value;\n submitter.parentElement.insertBefore(input, submitter);\n injectedElement = input;\n }\n const formData = new FormData(form);\n const toRemove = [];\n formData.forEach((val, key, _index) => {\n if (val instanceof File) {\n toRemove.push(key);\n }\n });\n toRemove.forEach((key) => formData.delete(key));\n const params = new URLSearchParams();\n const { inputsUnused, onlyHiddenInputs } = Array.from(form.elements).reduce(\n (acc, input) => {\n const { inputsUnused: inputsUnused2, onlyHiddenInputs: onlyHiddenInputs2 } = acc;\n const key = input.name;\n if (!key) {\n return acc;\n }\n if (inputsUnused2[key] === void 0) {\n inputsUnused2[key] = true;\n }\n if (onlyHiddenInputs2[key] === void 0) {\n onlyHiddenInputs2[key] = true;\n }\n const inputSkipUnusedField = input.hasAttribute(\n this.binding(PHX_NO_UNUSED_FIELD)\n );\n const isUsed = dom_default.private(input, PHX_HAS_FOCUSED) || dom_default.private(input, PHX_HAS_SUBMITTED) || inputSkipUnusedField;\n const isHidden = input.type === \"hidden\";\n inputsUnused2[key] = inputsUnused2[key] && !isUsed;\n onlyHiddenInputs2[key] = onlyHiddenInputs2[key] && isHidden;\n return acc;\n },\n { inputsUnused: {}, onlyHiddenInputs: {} }\n );\n const formSkipUnusedFields = form.hasAttribute(\n this.binding(PHX_NO_UNUSED_FIELD)\n );\n for (const [key, val] of formData.entries()) {\n if (onlyNames.length === 0 || onlyNames.indexOf(key) >= 0) {\n const isUnused = inputsUnused[key];\n const hidden = onlyHiddenInputs[key];\n const skipUnusedCheck = formSkipUnusedFields;\n if (!skipUnusedCheck && isUnused && !(submitter && submitter.name == key) && !hidden) {\n params.append(prependFormDataKey(key, \"_unused_\"), \"\");\n }\n if (typeof val === \"string\") {\n params.append(key, val);\n }\n }\n }\n if (submitter && injectedElement) {\n submitter.parentElement.removeChild(injectedElement);\n }\n return params.toString();\n }\n pushEvent(type, el, targetCtx, phxEvent, meta, opts = {}, onReply) {\n this.pushWithReply(\n (maybePayload) => this.putRef([{ el, loading: true, lock: true }], phxEvent, type, {\n ...opts,\n payload: maybePayload?.payload\n }),\n \"event\",\n {\n type,\n event: phxEvent,\n value: this.extractMeta(el, meta, opts.value),\n cid: this.targetComponentID(el, targetCtx, opts)\n }\n ).then(({ reply }) => onReply && onReply(reply)).catch((error) => logError(\"Failed to push event\", error));\n }\n pushFileProgress(fileEl, entryRef, progress, onReply = function() {\n }) {\n this.liveSocket.withinOwners(fileEl.form, (view, targetCtx) => {\n view.pushWithReply(null, \"progress\", {\n event: fileEl.getAttribute(view.binding(PHX_PROGRESS)),\n ref: fileEl.getAttribute(PHX_UPLOAD_REF),\n entry_ref: entryRef,\n progress,\n cid: view.targetComponentID(fileEl.form, targetCtx)\n }).then(() => onReply()).catch((error) => logError(\"Failed to push file progress\", error));\n });\n }\n pushInput(inputEl, targetCtx, forceCid, phxEvent, opts, callback) {\n if (!inputEl.form) {\n throw new Error(\"form events require the input to be inside a form\");\n }\n let uploads;\n const cid = isCid(forceCid) ? forceCid : this.targetComponentID(inputEl.form, targetCtx, opts);\n const refGenerator = (maybePayload) => {\n return this.putRef(\n [\n { el: inputEl, loading: true, lock: true },\n { el: inputEl.form, loading: true, lock: true }\n ],\n phxEvent,\n \"change\",\n { ...opts, payload: maybePayload?.payload }\n );\n };\n let formData;\n const meta = this.extractMeta(inputEl.form, {}, opts.value);\n const serializeOpts = {};\n if (inputEl instanceof HTMLButtonElement) {\n serializeOpts.submitter = inputEl;\n }\n if (inputEl.getAttribute(this.binding(\"change\"))) {\n formData = this.serializeForm(inputEl.form, serializeOpts, [\n inputEl.name\n ]);\n } else {\n formData = this.serializeForm(inputEl.form, serializeOpts);\n }\n if (dom_default.isUploadInput(inputEl) && inputEl.files && inputEl.files.length > 0) {\n LiveUploader.trackFiles(inputEl, Array.from(inputEl.files));\n }\n uploads = LiveUploader.serializeUploads(inputEl);\n const event = {\n type: \"form\",\n event: phxEvent,\n value: formData,\n meta: {\n // no target was implicitly sent as \"undefined\" in LV <= 1.0.5, therefore\n // we have to keep it. In 1.0.6 we switched from passing meta as URL encoded data\n // to passing it directly in the event, but the JSON encode would drop keys with\n // undefined values.\n _target: opts._target || \"undefined\",\n ...meta\n },\n uploads,\n cid\n };\n this.pushWithReply(refGenerator, \"event\", event).then(({ resp }) => {\n if (dom_default.isUploadInput(inputEl) && dom_default.isAutoUpload(inputEl)) {\n ElementRef.onUnlock(inputEl, () => {\n if (LiveUploader.filesAwaitingPreflight(inputEl).length > 0) {\n const [ref, _els] = refGenerator();\n this.undoRefs(ref, phxEvent, [inputEl.form]);\n this.uploadFiles(\n inputEl.form,\n phxEvent,\n targetCtx,\n ref,\n cid,\n (_uploads) => {\n callback && callback(resp);\n this.triggerAwaitingSubmit(inputEl.form, phxEvent);\n this.undoRefs(ref, phxEvent);\n }\n );\n }\n });\n } else {\n callback && callback(resp);\n }\n }).catch((error) => logError(\"Failed to push input event\", error));\n }\n triggerAwaitingSubmit(formEl, phxEvent) {\n const awaitingSubmit = this.getScheduledSubmit(formEl);\n if (awaitingSubmit) {\n const [_el, _ref, _opts, callback] = awaitingSubmit;\n this.cancelSubmit(formEl, phxEvent);\n callback();\n }\n }\n getScheduledSubmit(formEl) {\n return this.formSubmits.find(\n ([el, _ref, _opts, _callback]) => el.isSameNode(formEl)\n );\n }\n scheduleSubmit(formEl, ref, opts, callback) {\n if (this.getScheduledSubmit(formEl)) {\n return true;\n }\n this.formSubmits.push([formEl, ref, opts, callback]);\n }\n cancelSubmit(formEl, phxEvent) {\n this.formSubmits = this.formSubmits.filter(\n ([el, ref, _opts, _callback]) => {\n if (el.isSameNode(formEl)) {\n this.undoRefs(ref, phxEvent);\n return false;\n } else {\n return true;\n }\n }\n );\n }\n disableForm(formEl, phxEvent, opts = {}) {\n const filterIgnored = (el) => {\n const userIgnored = closestPhxBinding(\n el,\n `${this.binding(PHX_UPDATE)}=ignore`,\n el.form\n );\n return !(userIgnored || closestPhxBinding(el, \"data-phx-update=ignore\", el.form));\n };\n const filterDisables = (el) => {\n return el.hasAttribute(this.binding(PHX_DISABLE_WITH));\n };\n const filterButton = (el) => el.tagName == \"BUTTON\";\n const filterInput = (el) => [\"INPUT\", \"TEXTAREA\", \"SELECT\"].includes(el.tagName);\n const formElements = Array.from(formEl.elements);\n const disables = formElements.filter(filterDisables);\n const buttons = formElements.filter(filterButton).filter(filterIgnored);\n const inputs = formElements.filter(filterInput).filter(filterIgnored);\n buttons.forEach((button) => {\n button.setAttribute(PHX_DISABLED, button.disabled);\n button.disabled = true;\n });\n inputs.forEach((input) => {\n input.setAttribute(PHX_READONLY, input.readOnly);\n input.readOnly = true;\n if (input.files) {\n input.setAttribute(PHX_DISABLED, input.disabled);\n input.disabled = true;\n }\n });\n const formEls = disables.concat(buttons).concat(inputs).map((el) => {\n return { el, loading: true, lock: true };\n });\n const els = [{ el: formEl, loading: true, lock: false }].concat(formEls).reverse();\n return this.putRef(els, phxEvent, \"submit\", opts);\n }\n pushFormSubmit(formEl, targetCtx, phxEvent, submitter, opts, onReply) {\n const refGenerator = (maybePayload) => this.disableForm(formEl, phxEvent, {\n ...opts,\n form: formEl,\n payload: maybePayload?.payload,\n submitter\n });\n dom_default.putPrivate(formEl, \"submitter\", submitter);\n const cid = this.targetComponentID(formEl, targetCtx);\n if (LiveUploader.hasUploadsInProgress(formEl)) {\n const [ref, _els] = refGenerator();\n const push = () => this.pushFormSubmit(\n formEl,\n targetCtx,\n phxEvent,\n submitter,\n opts,\n onReply\n );\n return this.scheduleSubmit(formEl, ref, opts, push);\n } else if (LiveUploader.inputsAwaitingPreflight(formEl).length > 0) {\n const [ref, els] = refGenerator();\n const proxyRefGen = () => [ref, els, opts];\n this.uploadFiles(formEl, phxEvent, targetCtx, ref, cid, (_uploads) => {\n if (LiveUploader.inputsAwaitingPreflight(formEl).length > 0) {\n return this.undoRefs(ref, phxEvent);\n }\n const meta = this.extractMeta(formEl, {}, opts.value);\n const formData = this.serializeForm(formEl, { submitter });\n this.pushWithReply(proxyRefGen, \"event\", {\n type: \"form\",\n event: phxEvent,\n value: formData,\n meta,\n cid\n }).then(({ resp }) => onReply(resp)).catch((error) => logError(\"Failed to push form submit\", error));\n });\n } else if (!(formEl.hasAttribute(PHX_REF_SRC) && formEl.classList.contains(\"phx-submit-loading\"))) {\n const meta = this.extractMeta(formEl, {}, opts.value);\n const formData = this.serializeForm(formEl, { submitter });\n this.pushWithReply(refGenerator, \"event\", {\n type: \"form\",\n event: phxEvent,\n value: formData,\n meta,\n cid\n }).then(({ resp }) => onReply(resp)).catch((error) => logError(\"Failed to push form submit\", error));\n }\n }\n uploadFiles(formEl, phxEvent, targetCtx, ref, cid, onComplete) {\n const joinCountAtUpload = this.joinCount;\n const inputEls = LiveUploader.activeFileInputs(formEl);\n let numFileInputsInProgress = inputEls.length;\n inputEls.forEach((inputEl) => {\n const uploader = new LiveUploader(inputEl, this, () => {\n numFileInputsInProgress--;\n if (numFileInputsInProgress === 0) {\n onComplete();\n }\n });\n const entries = uploader.entries().map((entry) => entry.toPreflightPayload());\n if (entries.length === 0) {\n numFileInputsInProgress--;\n return;\n }\n const payload = {\n ref: inputEl.getAttribute(PHX_UPLOAD_REF),\n entries,\n cid: this.targetComponentID(inputEl.form, targetCtx)\n };\n this.log(\"upload\", () => [\"sending preflight request\", payload]);\n this.pushWithReply(null, \"allow_upload\", payload).then(({ resp }) => {\n this.log(\"upload\", () => [\"got preflight response\", resp]);\n uploader.entries().forEach((entry) => {\n if (resp.entries && !resp.entries[entry.ref]) {\n this.handleFailedEntryPreflight(\n entry.ref,\n \"failed preflight\",\n uploader\n );\n }\n });\n if (resp.error || Object.keys(resp.entries).length === 0) {\n this.undoRefs(ref, phxEvent);\n const errors = resp.error || [];\n errors.map(([entry_ref, reason]) => {\n this.handleFailedEntryPreflight(entry_ref, reason, uploader);\n });\n } else {\n const onError = (callback) => {\n this.channel.onError(() => {\n if (this.joinCount === joinCountAtUpload) {\n callback();\n }\n });\n };\n uploader.initAdapterUpload(resp, onError, this.liveSocket);\n }\n }).catch((error) => logError(\"Failed to push upload\", error));\n });\n }\n handleFailedEntryPreflight(uploadRef, reason, uploader) {\n if (uploader.isAutoUpload()) {\n const entry = uploader.entries().find((entry2) => entry2.ref === uploadRef.toString());\n if (entry) {\n entry.cancel();\n }\n } else {\n uploader.entries().map((entry) => entry.cancel());\n }\n this.log(\"upload\", () => [`error for entry ${uploadRef}`, reason]);\n }\n dispatchUploads(targetCtx, name, filesOrBlobs) {\n const targetElement = this.targetCtxElement(targetCtx) || this.el;\n const inputs = dom_default.findUploadInputs(targetElement).filter(\n (el) => el.name === name\n );\n if (inputs.length === 0) {\n logError(`no live file inputs found matching the name \"${name}\"`);\n } else if (inputs.length > 1) {\n logError(`duplicate live file inputs found matching the name \"${name}\"`);\n } else {\n dom_default.dispatchEvent(inputs[0], PHX_TRACK_UPLOADS, {\n detail: { files: filesOrBlobs }\n });\n }\n }\n targetCtxElement(targetCtx) {\n if (isCid(targetCtx)) {\n const [target] = dom_default.findComponentNodeList(this.id, targetCtx);\n return target;\n } else if (targetCtx) {\n return targetCtx;\n } else {\n return null;\n }\n }\n pushFormRecovery(oldForm, newForm, templateDom, callback) {\n const phxChange = this.binding(\"change\");\n const phxTarget = newForm.getAttribute(this.binding(\"target\")) || newForm;\n const phxEvent = newForm.getAttribute(this.binding(PHX_AUTO_RECOVER)) || newForm.getAttribute(this.binding(\"change\"));\n const inputs = Array.from(oldForm.elements).filter(\n (el) => dom_default.isFormInput(el) && el.name && !el.hasAttribute(phxChange)\n );\n if (inputs.length === 0) {\n callback();\n return;\n }\n inputs.forEach(\n (input2) => input2.hasAttribute(PHX_UPLOAD_REF) && LiveUploader.clearFiles(input2)\n );\n const input = inputs.find((el) => el.type !== \"hidden\") || inputs[0];\n let pending = 0;\n this.withinTargets(\n phxTarget,\n (targetView, targetCtx) => {\n const cid = this.targetComponentID(newForm, targetCtx);\n pending++;\n let e = new CustomEvent(\"phx:form-recovery\", {\n detail: { sourceElement: oldForm }\n });\n js_default.exec(e, \"change\", phxEvent, this, input, [\n \"push\",\n {\n _target: input.name,\n targetView,\n targetCtx,\n newCid: cid,\n callback: () => {\n pending--;\n if (pending === 0) {\n callback();\n }\n }\n }\n ]);\n },\n templateDom\n );\n }\n pushLinkPatch(e, href, targetEl, callback) {\n const linkRef = this.liveSocket.setPendingLink(href);\n const loading = e.isTrusted && e.type !== \"popstate\";\n const refGen = targetEl ? () => this.putRef(\n [{ el: targetEl, loading, lock: true }],\n null,\n \"click\"\n ) : null;\n const fallback = () => this.liveSocket.redirect(window.location.href);\n const url = href.startsWith(\"/\") ? `${location.protocol}//${location.host}${href}` : href;\n this.pushWithReply(refGen, \"live_patch\", { url }).then(\n ({ resp }) => {\n this.liveSocket.requestDOMUpdate(() => {\n if (resp.link_redirect) {\n this.liveSocket.replaceMain(href, null, callback, linkRef);\n } else if (resp.redirect) {\n return;\n } else {\n if (this.liveSocket.commitPendingLink(linkRef)) {\n this.href = href;\n }\n this.applyPendingUpdates();\n callback && callback(linkRef);\n }\n });\n },\n ({ error: _error, timeout: _timeout }) => fallback()\n );\n }\n getFormsForRecovery() {\n if (this.joinCount === 0) {\n return {};\n }\n const phxChange = this.binding(\"change\");\n return dom_default.all(\n document,\n `#${CSS.escape(this.id)} form[${phxChange}], [${PHX_TELEPORTED_REF}=\"${CSS.escape(this.id)}\"] form[${phxChange}]`\n ).filter((form) => form.id).filter((form) => form.elements.length > 0).filter(\n (form) => form.getAttribute(this.binding(PHX_AUTO_RECOVER)) !== \"ignore\"\n ).map((form) => {\n const clonedForm = form.cloneNode(true);\n morphdom_esm_default(clonedForm, form, {\n onBeforeElUpdated: (fromEl, toEl) => {\n dom_default.copyPrivates(fromEl, toEl);\n if (fromEl.getAttribute(\"form\") === form.id) {\n fromEl.parentNode.removeChild(fromEl);\n return false;\n }\n return true;\n }\n });\n const externalElements = document.querySelectorAll(\n `[form=\"${CSS.escape(form.id)}\"]`\n );\n Array.from(externalElements).forEach((el) => {\n const clonedEl = (\n /** @type {HTMLElement} */\n el.cloneNode(true)\n );\n morphdom_esm_default(clonedEl, el);\n dom_default.copyPrivates(clonedEl, el);\n clonedEl.removeAttribute(\"form\");\n clonedForm.appendChild(clonedEl);\n });\n return clonedForm;\n }).reduce((acc, form) => {\n acc[form.id] = form;\n return acc;\n }, {});\n }\n maybePushComponentsDestroyed(destroyedCIDs) {\n let willDestroyCIDs = destroyedCIDs.filter((cid) => {\n return dom_default.findComponentNodeList(this.id, cid).length === 0;\n });\n const onError = (error) => {\n if (!this.isDestroyed()) {\n logError(\"Failed to push components destroyed\", error);\n }\n };\n if (willDestroyCIDs.length > 0) {\n willDestroyCIDs.forEach((cid) => this.rendered.resetRender(cid));\n this.pushWithReply(null, \"cids_will_destroy\", { cids: willDestroyCIDs }).then(() => {\n this.liveSocket.requestDOMUpdate(() => {\n let completelyDestroyCIDs = willDestroyCIDs.filter((cid) => {\n return dom_default.findComponentNodeList(this.id, cid).length === 0;\n });\n if (completelyDestroyCIDs.length > 0) {\n this.pushWithReply(null, \"cids_destroyed\", {\n cids: completelyDestroyCIDs\n }).then(({ resp }) => {\n this.rendered.pruneCIDs(resp.cids);\n }).catch(onError);\n }\n });\n }).catch(onError);\n }\n }\n ownsElement(el) {\n let parentViewEl = dom_default.closestViewEl(el);\n return el.getAttribute(PHX_PARENT_ID) === this.id || parentViewEl && parentViewEl.id === this.id || !parentViewEl && this.isDead;\n }\n submitForm(form, targetCtx, phxEvent, submitter, opts = {}) {\n dom_default.putPrivate(form, PHX_HAS_SUBMITTED, true);\n const inputs = Array.from(form.elements);\n inputs.forEach((input) => dom_default.putPrivate(input, PHX_HAS_SUBMITTED, true));\n this.liveSocket.blurActiveElement(this);\n this.pushFormSubmit(form, targetCtx, phxEvent, submitter, opts, () => {\n this.liveSocket.restorePreviouslyActiveFocus();\n });\n }\n binding(kind) {\n return this.liveSocket.binding(kind);\n }\n // phx-portal\n pushPortalElementId(id) {\n this.portalElementIds.add(id);\n }\n dropPortalElementId(id) {\n this.portalElementIds.delete(id);\n }\n destroyPortalElements() {\n if (!this.liveSocket.unloaded) {\n this.portalElementIds.forEach((id) => {\n const el = document.getElementById(id);\n if (el) {\n el.remove();\n }\n });\n }\n }\n};\n\n// js/phoenix_live_view/live_socket.js\nvar isUsedInput = (el) => dom_default.isUsedInput(el);\nvar LiveSocket = class {\n constructor(url, phxSocket, opts = {}) {\n this.unloaded = false;\n if (!phxSocket || phxSocket.constructor.name === \"Object\") {\n throw new Error(`\n a phoenix Socket must be provided as the second argument to the LiveSocket constructor. For example:\n\n import {Socket} from \"phoenix\"\n import {LiveSocket} from \"phoenix_live_view\"\n let liveSocket = new LiveSocket(\"/live\", Socket, {...})\n `);\n }\n this.socket = new phxSocket(url, opts);\n this.bindingPrefix = opts.bindingPrefix || BINDING_PREFIX;\n this.opts = opts;\n this.params = closure(opts.params || {});\n this.viewLogger = opts.viewLogger;\n this.metadataCallbacks = opts.metadata || {};\n this.defaults = Object.assign(clone(DEFAULTS), opts.defaults || {});\n this.prevActive = null;\n this.silenced = false;\n this.main = null;\n this.outgoingMainEl = null;\n this.clickStartedAtTarget = null;\n this.linkRef = 1;\n this.roots = {};\n this.href = window.location.href;\n this.pendingLink = null;\n this.currentLocation = clone(window.location);\n this.hooks = opts.hooks || {};\n this.uploaders = opts.uploaders || {};\n this.loaderTimeout = opts.loaderTimeout || LOADER_TIMEOUT;\n this.disconnectedTimeout = opts.disconnectedTimeout || DISCONNECTED_TIMEOUT;\n this.reloadWithJitterTimer = null;\n this.maxReloads = opts.maxReloads || MAX_RELOADS;\n this.reloadJitterMin = opts.reloadJitterMin || RELOAD_JITTER_MIN;\n this.reloadJitterMax = opts.reloadJitterMax || RELOAD_JITTER_MAX;\n this.failsafeJitter = opts.failsafeJitter || FAILSAFE_JITTER;\n this.localStorage = opts.localStorage || window.localStorage;\n this.sessionStorage = opts.sessionStorage || window.sessionStorage;\n this.boundTopLevelEvents = false;\n this.boundEventNames = /* @__PURE__ */ new Set();\n this.blockPhxChangeWhileComposing = opts.blockPhxChangeWhileComposing || false;\n this.serverCloseRef = null;\n this.domCallbacks = Object.assign(\n {\n jsQuerySelectorAll: null,\n onPatchStart: closure(),\n onPatchEnd: closure(),\n onNodeAdded: closure(),\n onBeforeElUpdated: closure()\n },\n opts.dom || {}\n );\n this.transitions = new TransitionSet();\n this.currentHistoryPosition = parseInt(this.sessionStorage.getItem(PHX_LV_HISTORY_POSITION)) || 0;\n window.addEventListener(\"pagehide\", (_e) => {\n this.unloaded = true;\n });\n this.socket.onOpen(() => {\n if (this.isUnloaded()) {\n window.location.reload();\n }\n });\n }\n // public\n version() {\n return \"1.2.0-dev\";\n }\n isProfileEnabled() {\n return this.sessionStorage.getItem(PHX_LV_PROFILE) === \"true\";\n }\n isDebugEnabled() {\n return this.sessionStorage.getItem(PHX_LV_DEBUG) === \"true\";\n }\n isDebugDisabled() {\n return this.sessionStorage.getItem(PHX_LV_DEBUG) === \"false\";\n }\n enableDebug() {\n this.sessionStorage.setItem(PHX_LV_DEBUG, \"true\");\n }\n enableProfiling() {\n this.sessionStorage.setItem(PHX_LV_PROFILE, \"true\");\n }\n disableDebug() {\n this.sessionStorage.setItem(PHX_LV_DEBUG, \"false\");\n }\n disableProfiling() {\n this.sessionStorage.removeItem(PHX_LV_PROFILE);\n }\n enableLatencySim(upperBoundMs) {\n this.enableDebug();\n console.log(\n \"latency simulator enabled for the duration of this browser session. Call disableLatencySim() to disable\"\n );\n this.sessionStorage.setItem(PHX_LV_LATENCY_SIM, upperBoundMs);\n }\n disableLatencySim() {\n this.sessionStorage.removeItem(PHX_LV_LATENCY_SIM);\n }\n getLatencySim() {\n const str = this.sessionStorage.getItem(PHX_LV_LATENCY_SIM);\n return str ? parseInt(str) : null;\n }\n getSocket() {\n return this.socket;\n }\n connect() {\n if (window.location.hostname === \"localhost\" && !this.isDebugDisabled()) {\n this.enableDebug();\n }\n const doConnect = () => {\n this.resetReloadStatus();\n if (this.joinRootViews()) {\n this.bindTopLevelEvents();\n this.socket.connect();\n } else if (this.main) {\n this.socket.connect();\n } else {\n this.bindTopLevelEvents({ dead: true });\n }\n this.joinDeadView();\n };\n if ([\"complete\", \"loaded\", \"interactive\"].indexOf(document.readyState) >= 0) {\n doConnect();\n } else {\n document.addEventListener(\"DOMContentLoaded\", () => doConnect());\n }\n }\n disconnect(callback) {\n clearTimeout(this.reloadWithJitterTimer);\n if (this.serverCloseRef) {\n this.socket.off(this.serverCloseRef);\n this.serverCloseRef = null;\n }\n this.socket.disconnect(callback);\n }\n replaceTransport(transport) {\n clearTimeout(this.reloadWithJitterTimer);\n this.socket.replaceTransport(transport);\n this.connect();\n }\n /**\n * @param {HTMLElement} el\n * @param {import(\"./js_commands\").EncodedJS} encodedJS\n * @param {string | null} [eventType]\n */\n execJS(el, encodedJS, eventType = null) {\n const e = new CustomEvent(\"phx:exec\", { detail: { sourceElement: el } });\n this.owner(el, (view) => js_default.exec(e, eventType, encodedJS, view, el));\n }\n /**\n * Returns an object with methods to manipulate the DOM and execute JavaScript.\n * The applied changes integrate with server DOM patching.\n *\n * @returns {import(\"./js_commands\").LiveSocketJSCommands}\n */\n js() {\n return js_commands_default(this, \"js\");\n }\n // private\n unload() {\n if (this.unloaded) {\n return;\n }\n if (this.main && this.isConnected()) {\n this.log(this.main, \"socket\", () => [\"disconnect for page nav\"]);\n }\n this.unloaded = true;\n this.destroyAllViews();\n this.disconnect();\n }\n triggerDOM(kind, args) {\n this.domCallbacks[kind](...args);\n }\n time(name, func) {\n if (!this.isProfileEnabled() || !console.time) {\n return func();\n }\n console.time(name);\n const result = func();\n console.timeEnd(name);\n return result;\n }\n log(view, kind, msgCallback) {\n if (this.viewLogger) {\n const [msg, obj] = msgCallback();\n this.viewLogger(view, kind, msg, obj);\n } else if (this.isDebugEnabled()) {\n const [msg, obj] = msgCallback();\n debug(view, kind, msg, obj);\n }\n }\n requestDOMUpdate(callback) {\n this.transitions.after(callback);\n }\n asyncTransition(promise) {\n this.transitions.addAsyncTransition(promise);\n }\n transition(time, onStart, onDone = function() {\n }) {\n this.transitions.addTransition(time, onStart, onDone);\n }\n onChannel(channel, event, cb) {\n channel.on(event, (data) => {\n const latency = this.getLatencySim();\n if (!latency) {\n cb(data);\n } else {\n setTimeout(() => cb(data), latency);\n }\n });\n }\n reloadWithJitter(view, log) {\n clearTimeout(this.reloadWithJitterTimer);\n this.disconnect();\n const minMs = this.reloadJitterMin;\n const maxMs = this.reloadJitterMax;\n let afterMs = Math.floor(Math.random() * (maxMs - minMs + 1)) + minMs;\n const tries = browser_default.updateLocal(\n this.localStorage,\n window.location.pathname,\n CONSECUTIVE_RELOADS,\n 0,\n (count) => count + 1\n );\n if (tries >= this.maxReloads) {\n afterMs = this.failsafeJitter;\n }\n this.reloadWithJitterTimer = setTimeout(() => {\n if (view.isDestroyed() || view.isConnected()) {\n return;\n }\n view.destroy();\n log ? log() : this.log(view, \"join\", () => [\n `encountered ${tries} consecutive reloads`\n ]);\n if (tries >= this.maxReloads) {\n this.log(view, \"join\", () => [\n `exceeded ${this.maxReloads} consecutive reloads. Entering failsafe mode`\n ]);\n }\n if (this.hasPendingLink()) {\n window.location = this.pendingLink;\n } else {\n window.location.reload();\n }\n }, afterMs);\n }\n getHookDefinition(name) {\n if (!name) {\n return;\n }\n return this.maybeInternalHook(name) || this.hooks[name] || this.maybeRuntimeHook(name);\n }\n maybeInternalHook(name) {\n return name && name.startsWith(\"Phoenix.\") && hooks_default[name.split(\".\")[1]];\n }\n maybeRuntimeHook(name) {\n const runtimeHook = document.querySelector(\n `script[${PHX_RUNTIME_HOOK}=\"${CSS.escape(name)}\"]`\n );\n if (!runtimeHook) {\n return;\n }\n let callbacks = window[`phx_hook_${name}`];\n if (!callbacks || typeof callbacks !== \"function\") {\n logError(\"a runtime hook must be a function\", runtimeHook);\n return;\n }\n const hookDefiniton = callbacks();\n if (hookDefiniton && (typeof hookDefiniton === \"object\" || typeof hookDefiniton === \"function\")) {\n return hookDefiniton;\n }\n logError(\n \"runtime hook must return an object with hook callbacks or an instance of ViewHook\",\n runtimeHook\n );\n }\n isUnloaded() {\n return this.unloaded;\n }\n isConnected() {\n return this.socket.isConnected();\n }\n getBindingPrefix() {\n return this.bindingPrefix;\n }\n binding(kind) {\n return `${this.getBindingPrefix()}${kind}`;\n }\n channel(topic, params) {\n return this.socket.channel(topic, params);\n }\n joinDeadView() {\n const body = document.body;\n if (body && !this.isPhxView(body) && !this.isPhxView(document.firstElementChild)) {\n const view = this.newRootView(body);\n view.setHref(this.getHref());\n view.joinDead();\n if (!this.main) {\n this.main = view;\n }\n window.requestAnimationFrame(() => {\n view.execNewMounted();\n this.maybeScroll(history.state?.scroll);\n });\n }\n }\n joinRootViews() {\n let rootsFound = false;\n dom_default.all(\n document,\n `${PHX_VIEW_SELECTOR}:not([${PHX_PARENT_ID}])`,\n (rootEl) => {\n if (!this.getRootById(rootEl.id)) {\n const view = this.newRootView(rootEl);\n if (!dom_default.isPhxSticky(rootEl)) {\n view.setHref(this.getHref());\n }\n view.join();\n if (rootEl.hasAttribute(PHX_MAIN)) {\n this.main = view;\n }\n }\n rootsFound = true;\n }\n );\n return rootsFound;\n }\n redirect(to, flash, reloadToken) {\n if (reloadToken) {\n browser_default.setCookie(PHX_RELOAD_STATUS, reloadToken, 60);\n }\n this.unload();\n browser_default.redirect(to, flash);\n }\n replaceMain(href, flash, callback = null, linkRef = this.setPendingLink(href)) {\n const liveReferer = this.currentLocation.href;\n this.outgoingMainEl = this.outgoingMainEl || this.main.el;\n const stickies = dom_default.findPhxSticky(document) || [];\n const removeEls = dom_default.all(\n this.outgoingMainEl,\n `[${this.binding(\"remove\")}]`\n ).filter((el) => !dom_default.isChildOfAny(el, stickies));\n const newMainEl = dom_default.cloneNode(this.outgoingMainEl, \"\");\n this.main.showLoader(this.loaderTimeout);\n this.main.destroy();\n this.main = this.newRootView(newMainEl, flash, liveReferer);\n this.main.setRedirect(href);\n this.transitionRemoves(removeEls);\n this.main.join((joinCount, onDone) => {\n if (joinCount === 1 && this.commitPendingLink(linkRef)) {\n this.requestDOMUpdate(() => {\n removeEls.forEach((el) => el.remove());\n stickies.forEach((el) => newMainEl.appendChild(el));\n this.outgoingMainEl.replaceWith(newMainEl);\n this.outgoingMainEl = null;\n callback && callback(linkRef);\n onDone();\n });\n }\n });\n }\n transitionRemoves(elements, callback) {\n const removeAttr = this.binding(\"remove\");\n const silenceEvents = (e) => {\n e.preventDefault();\n e.stopImmediatePropagation();\n };\n elements.forEach((el) => {\n for (const event of this.boundEventNames) {\n el.addEventListener(event, silenceEvents, true);\n }\n this.execJS(el, el.getAttribute(removeAttr), \"remove\");\n });\n this.requestDOMUpdate(() => {\n elements.forEach((el) => {\n for (const event of this.boundEventNames) {\n el.removeEventListener(event, silenceEvents, true);\n }\n });\n callback && callback();\n });\n }\n isPhxView(el) {\n return el.getAttribute && el.getAttribute(PHX_SESSION) !== null;\n }\n newRootView(el, flash, liveReferer) {\n const view = new View(el, this, null, flash, liveReferer);\n this.roots[view.id] = view;\n return view;\n }\n owner(childEl, callback) {\n let view;\n const viewEl = dom_default.closestViewEl(childEl);\n if (viewEl) {\n view = this.getViewByEl(viewEl);\n } else {\n if (!childEl.isConnected) {\n return null;\n }\n view = this.main;\n }\n return view && callback ? callback(view) : view;\n }\n withinOwners(childEl, callback) {\n this.owner(childEl, (view) => callback(view, childEl));\n }\n getViewByEl(el) {\n const rootId = el.getAttribute(PHX_ROOT_ID);\n return maybe(\n this.getRootById(rootId),\n (root) => root.getDescendentByEl(el)\n );\n }\n getRootById(id) {\n return this.roots[id];\n }\n destroyAllViews() {\n for (const id in this.roots) {\n this.roots[id].destroy();\n delete this.roots[id];\n }\n this.main = null;\n }\n destroyViewByEl(el) {\n const root = this.getRootById(el.getAttribute(PHX_ROOT_ID));\n if (root && root.id === el.id) {\n root.destroy();\n delete this.roots[root.id];\n } else if (root) {\n root.destroyDescendent(el.id);\n }\n }\n getActiveElement() {\n return document.activeElement;\n }\n dropActiveElement(view) {\n if (this.prevActive && view.ownsElement(this.prevActive)) {\n this.prevActive = null;\n }\n }\n restorePreviouslyActiveFocus() {\n if (this.prevActive && this.prevActive !== document.body && this.prevActive instanceof HTMLElement) {\n this.prevActive.focus();\n }\n }\n blurActiveElement() {\n this.prevActive = this.getActiveElement();\n if (this.prevActive !== document.body && this.prevActive instanceof HTMLElement) {\n this.prevActive.blur();\n }\n }\n /**\n * @param {{dead?: boolean}} [options={}]\n */\n bindTopLevelEvents({ dead } = {}) {\n if (this.boundTopLevelEvents) {\n return;\n }\n this.boundTopLevelEvents = true;\n this.serverCloseRef = this.socket.onClose((event) => {\n if (event && event.code === 1e3 && this.main) {\n return this.reloadWithJitter(this.main);\n }\n });\n document.body.addEventListener(\"click\", function() {\n });\n window.addEventListener(\n \"pageshow\",\n (e) => {\n if (e.persisted) {\n this.getSocket().disconnect();\n this.withPageLoading({ to: window.location.href, kind: \"redirect\" });\n window.location.reload();\n }\n },\n true\n );\n if (!dead) {\n this.bindNav();\n }\n this.bindClicks();\n if (!dead) {\n this.bindForms();\n }\n this.bind(\n { keyup: \"keyup\", keydown: \"keydown\" },\n (e, type, view, targetEl, phxEvent, _phxTarget) => {\n const matchKey = targetEl.getAttribute(this.binding(PHX_KEY));\n const pressedKey = e.key && e.key.toLowerCase();\n if (matchKey && matchKey.toLowerCase() !== pressedKey) {\n return;\n }\n const data = { key: e.key, ...this.eventMeta(type, e, targetEl) };\n js_default.exec(e, type, phxEvent, view, targetEl, [\"push\", { data }]);\n }\n );\n this.bind(\n { blur: \"focusout\", focus: \"focusin\" },\n (e, type, view, targetEl, phxEvent, phxTarget) => {\n if (!phxTarget) {\n const data = { key: e.key, ...this.eventMeta(type, e, targetEl) };\n js_default.exec(e, type, phxEvent, view, targetEl, [\"push\", { data }]);\n }\n }\n );\n this.bind(\n { blur: \"blur\", focus: \"focus\" },\n (e, type, view, targetEl, phxEvent, phxTarget) => {\n if (phxTarget === \"window\") {\n const data = this.eventMeta(type, e, targetEl);\n js_default.exec(e, type, phxEvent, view, targetEl, [\"push\", { data }]);\n }\n }\n );\n this.on(\"dragover\", (e) => e.preventDefault());\n this.on(\"dragenter\", (e) => {\n const dropzone = closestPhxBinding(\n e.target,\n this.binding(PHX_DROP_TARGET)\n );\n if (!dropzone || !(dropzone instanceof HTMLElement)) {\n return;\n }\n if (eventContainsFiles(e)) {\n this.js().addClass(dropzone, PHX_DROP_TARGET_ACTIVE_CLASS);\n }\n });\n this.on(\"dragleave\", (e) => {\n const dropzone = closestPhxBinding(\n e.target,\n this.binding(PHX_DROP_TARGET)\n );\n if (!dropzone || !(dropzone instanceof HTMLElement)) {\n return;\n }\n const rect = dropzone.getBoundingClientRect();\n if (e.clientX <= rect.left || e.clientX >= rect.right || e.clientY <= rect.top || e.clientY >= rect.bottom) {\n this.js().removeClass(dropzone, PHX_DROP_TARGET_ACTIVE_CLASS);\n }\n });\n this.on(\"drop\", (e) => {\n e.preventDefault();\n const dropzone = closestPhxBinding(\n e.target,\n this.binding(PHX_DROP_TARGET)\n );\n if (!dropzone || !(dropzone instanceof HTMLElement)) {\n return;\n }\n this.js().removeClass(dropzone, PHX_DROP_TARGET_ACTIVE_CLASS);\n const dropTargetId = dropzone.getAttribute(this.binding(PHX_DROP_TARGET));\n const dropTarget = dropTargetId && document.getElementById(dropTargetId);\n const files = Array.from(e.dataTransfer.files || []);\n if (!dropTarget || !(dropTarget instanceof HTMLInputElement) || dropTarget.disabled || files.length === 0 || !(dropTarget.files instanceof FileList)) {\n return;\n }\n LiveUploader.trackFiles(dropTarget, files, e.dataTransfer);\n dropTarget.dispatchEvent(new Event(\"input\", { bubbles: true }));\n });\n this.on(PHX_TRACK_UPLOADS, (e) => {\n const uploadTarget = e.target;\n if (!dom_default.isUploadInput(uploadTarget)) {\n return;\n }\n const files = Array.from(e.detail.files || []).filter(\n (f) => f instanceof File || f instanceof Blob\n );\n LiveUploader.trackFiles(uploadTarget, files);\n uploadTarget.dispatchEvent(new Event(\"input\", { bubbles: true }));\n });\n }\n eventMeta(eventName, e, targetEl) {\n const callback = this.metadataCallbacks[eventName];\n return callback ? callback(e, targetEl) : {};\n }\n setPendingLink(href) {\n this.linkRef++;\n this.pendingLink = href;\n this.resetReloadStatus();\n return this.linkRef;\n }\n // anytime we are navigating or connecting, drop reload cookie in case\n // we issue the cookie but the next request was interrupted and the server never dropped it\n resetReloadStatus() {\n browser_default.deleteCookie(PHX_RELOAD_STATUS);\n }\n commitPendingLink(linkRef) {\n if (this.linkRef !== linkRef) {\n return false;\n } else {\n this.href = this.pendingLink;\n this.pendingLink = null;\n return true;\n }\n }\n getHref() {\n return this.href;\n }\n hasPendingLink() {\n return !!this.pendingLink;\n }\n bind(events, callback) {\n for (const event in events) {\n const browserEventName = events[event];\n this.on(browserEventName, (e) => {\n const binding = this.binding(event);\n const windowBinding = this.binding(`window-${event}`);\n const targetPhxEvent = e.target.getAttribute && e.target.getAttribute(binding);\n if (targetPhxEvent) {\n this.debounce(e.target, e, browserEventName, () => {\n this.withinOwners(e.target, (view) => {\n callback(e, event, view, e.target, targetPhxEvent, null);\n });\n });\n } else {\n dom_default.all(document, `[${windowBinding}]`, (el) => {\n const phxEvent = el.getAttribute(windowBinding);\n this.debounce(el, e, browserEventName, () => {\n this.withinOwners(el, (view) => {\n callback(e, event, view, el, phxEvent, \"window\");\n });\n });\n });\n }\n });\n }\n }\n bindClicks() {\n this.on(\"mousedown\", (e) => this.clickStartedAtTarget = e.target);\n this.bindClick(\"click\", \"click\");\n }\n bindClick(eventName, bindingName) {\n const click = this.binding(bindingName);\n window.addEventListener(\n eventName,\n (e) => {\n let target = null;\n if (e.detail === 0)\n this.clickStartedAtTarget = e.target;\n const clickStartedAtTarget = this.clickStartedAtTarget || e.target;\n target = closestPhxBinding(e.target, click);\n this.dispatchClickAway(e, clickStartedAtTarget);\n this.clickStartedAtTarget = null;\n const phxEvent = target && target.getAttribute(click);\n if (!phxEvent) {\n if (dom_default.isNewPageClick(e, window.location)) {\n this.unload();\n }\n return;\n }\n if (target.getAttribute(\"href\") === \"#\") {\n e.preventDefault();\n }\n if (target.hasAttribute(PHX_REF_SRC)) {\n return;\n }\n this.debounce(target, e, \"click\", () => {\n this.withinOwners(target, (view) => {\n js_default.exec(e, \"click\", phxEvent, view, target, [\n \"push\",\n { data: this.eventMeta(\"click\", e, target) }\n ]);\n });\n });\n },\n false\n );\n }\n dispatchClickAway(e, clickStartedAt) {\n const phxClickAway = this.binding(\"click-away\");\n const portal = clickStartedAt.closest(`[${PHX_TELEPORTED_SRC}]`);\n const portalStartedAt = portal && dom_default.byId(portal.getAttribute(PHX_TELEPORTED_SRC));\n dom_default.all(document, `[${phxClickAway}]`, (el) => {\n let startedAt = clickStartedAt;\n if (portal && !portal.contains(el)) {\n startedAt = portalStartedAt;\n }\n if (!(el.isSameNode(startedAt) || el.contains(startedAt) || // When clicking a link with custom method,\n // phoenix_html triggers a click on a submit button\n // of a hidden form appended to the body. For such cases\n // where the clicked target is hidden, we skip click-away.\n //\n // Also, when we have a portal, we don't want to check the visibility\n // of the portal source, as it's a