Packages

live_interaction_contracts

1.0.1
1.3.0 1.2.0 1.1.0 1.0.1 1.0.0

A real-browser external-app verifier for patch-safe Phoenix LiveView interactions, with secondary unstyled reference components.

HexDocs

Current section

Files

Jump to
Readme
5 Versions
1 Dependency
Dependants
Files
Activity
live_interaction_contracts priv tooltip-reference app.exs
Raw

priv/tooltip-reference/app.exs 

#!/usr/bin/env elixir

# Tooltip reference conformance fixture.

# Dogfoods the SHIPPED component (lib/.../components/tooltip.ex) and the SHIPPED hook

# (priv/static/lic_hooks.js) — the conformance suite tests the real artifacts, not a

# re-implementation.

# Run: elixir app.exs   (http://127.0.0.1:4131)



Mix.install([

  {:phoenix, "~> 1.8"},

  {:phoenix_live_view, "~> 1.1"},

  {:bandit, "~> 1.7"},

  {:jason, "~> 1.4"}

])



Application.put_env(:phoenix, :json_library, Jason)



# Load the real shipped component.

# Compiling the shipped component extracts its colocated hook into this fixture's own

# build path; ColocatedAssets.compile() writes the index.js manifest — the same

# pipeline a consumer's `mix compile` runs. Served at /colocated, imported as a real

# ES module, so the suite tests the true shipped artifact under the swept LV version.

Code.require_file(Path.join(__DIR__, "../../lib/live_interaction_contracts/components/tooltip.ex"))

Phoenix.LiveView.ColocatedAssets.compile()



colocated_dir =

  Path.join([Mix.Project.build_path(), "phoenix-colocated", to_string(Mix.Project.config()[:app] || "")])



Application.put_env(:pr, :colocated_dir, colocated_dir)



Application.put_env(:pr, PRWeb.Endpoint,

  http: [ip: {127, 0, 0, 1}, port: 4131],

  server: true,

  adapter: Bandit.PhoenixAdapter,

  live_view: [signing_salt: "tooltip-ref-salt"],

  secret_key_base: String.duplicate("tooltip-reference-secret!", 4),

  pubsub_server: PR.PubSub,

  check_origin: false,

  debug_errors: true

)



defmodule PRWeb.Layout do

  use Phoenix.Component



  @phoenix_js File.read!(Application.app_dir(:phoenix, "priv/static/phoenix.min.js"))

  @lv_js File.read!(Application.app_dir(:phoenix_live_view, "priv/static/phoenix_live_view.min.js"))

  def render("root.html", assigns) do

    assigns = assign(assigns, phoenix_js: @phoenix_js, lv_js: @lv_js)



    ~H"""

    <!DOCTYPE html>

    <html>

      <head>

        <meta charset="utf-8" />

        <meta name="csrf-token" content={Phoenix.Controller.get_csrf_token()} />

        <title>Tooltip reference</title>

        <script><%= Phoenix.HTML.raw(@phoenix_js) %></script>

        <script><%= Phoenix.HTML.raw(@lv_js) %></script>

        <script type="module">

          import { hooks } from "/colocated/index.js";

          const csrf = document.querySelector("meta[name='csrf-token']").getAttribute("content");

          const ls = new LiveView.LiveSocket("/live", Phoenix.Socket, { hooks, params: {_csrf_token: csrf} });

          ls.connect();

          window.liveSocket = ls;

        </script>

      </head>

      <body><%= @inner_content %></body>

    </html>

    """

  end

end



defmodule PRWeb.MainLive do

  use Phoenix.LiveView

  import LiveInteractionContracts.Components.Tooltip



  def mount(_p, _s, socket),

    do: {:ok, assign(socket, content: 0, attr: 0, sib: 0, trig: 0, spacer: 40)}



  def render(assigns) do

    ~H"""

    <main>

      <div id="spacer" style={"height: #{@spacer}px"}></div>



      <.tooltip id="tip" mode="manual" placement="bottom" data-rev={@attr}>

        <:trigger>Hover me ({@trig})</:trigger>

        <:content>

          <p id="tip-body" style="height: 96px; margin: 0">tip {@content}</p>

        </:content>

      </.tooltip>



      <div id="sib">sib {@sib}</div>



      <button id="btn-content" phx-click="content">patch content</button>

      <button id="btn-attr" phx-click="attr">patch attr</button>

      <button id="btn-sib" phx-click="sib">patch sibling</button>

      <button id="btn-trig" phx-click="trig">patch trigger label</button>

      <button id="btn-move" phx-click="move">move anchor (+150)</button>

      <button id="btn-bottom" phx-click="bottom">anchor to viewport bottom</button>

      <button id="btn-reset" phx-click="reset">reset spacer</button>



      <div style="height: 1200px"></div>

    </main>

    """

  end



  def handle_event("content", _, s), do: {:noreply, assign(s, content: s.assigns.content + 1)}

  def handle_event("attr", _, s), do: {:noreply, assign(s, attr: s.assigns.attr + 1)}

  def handle_event("sib", _, s), do: {:noreply, assign(s, sib: s.assigns.sib + 1)}

  def handle_event("trig", _, s), do: {:noreply, assign(s, trig: s.assigns.trig + 1)}

  def handle_event("move", _, s), do: {:noreply, assign(s, spacer: s.assigns.spacer + 150)}

  def handle_event("bottom", _, s), do: {:noreply, assign(s, spacer: 638)}

  def handle_event("reset", _, s), do: {:noreply, assign(s, spacer: 40)}

end



defmodule PRWeb.Router do

  use Phoenix.Router

  import Phoenix.LiveView.Router



  pipeline :browser do

    plug :accepts, ["html"]

    plug :fetch_session

    plug :protect_from_forgery

    plug :put_root_layout, html: {PRWeb.Layout, :root}

  end



  scope "/" do

    pipe_through :browser

    live "/", PRWeb.MainLive

  end

end



defmodule PRWeb.Endpoint do

  use Phoenix.Endpoint, otp_app: :pr

  @session_options [store: :cookie, key: "_pr_key", signing_salt: "tooltipref", same_site: "Lax"]

  socket "/live", Phoenix.LiveView.Socket, websocket: [connect_info: [session: @session_options]]



  plug Plug.Static,

    at: "/colocated",

    from: Application.compile_env!(:pr, :colocated_dir),

    gzip: false



  plug Plug.Session, @session_options

  plug PRWeb.Router

end



{:ok, _} = Supervisor.start_link([{Phoenix.PubSub, name: PR.PubSub}, PRWeb.Endpoint], strategy: :one_for_one)

IO.puts("VERSIONS phoenix=#{Application.spec(:phoenix, :vsn)} live_view=#{Application.spec(:phoenix_live_view, :vsn)} elixir=#{System.version()} otp=#{System.otp_release()}")

IO.puts("READY http://127.0.0.1:4131")

Process.sleep(:infinity)