Identify Phoenix LiveView metrics

examples/apps/phx_example/assets/js/app.js

@@ -0,0 +1,13 @@
+import "phoenix_html";
+import { Socket } from "phoenix";
+import { LiveSocket } from "phoenix_live_view";
+
+let csrfToken = document
+  .querySelector("meta[name='csrf-token']")
+  .getAttribute("content");
+let liveSocket = new LiveSocket("/live", Socket, {
+  params: { _csrf_token: csrfToken },
+});
+
+liveSocket.connect();
+window.liveSocket = liveSocket;

examples/apps/phx_example/config/config.exs

@@ -2,8 +2,14 @@ import Config
 
 config :phx_example, PhxExampleWeb.Endpoint,
   url: [host: "localhost"],
-  render_errors: [view: PhxExampleWeb.ErrorView, accepts: ~w(html json), layout: false],
+  render_errors: [formats: [html: PhxExampleWeb.ErrorHTML], layout: false],
   http: [port: 4004],
-  server: true
+  server: true,
+  adapter: Phoenix.Endpoint.Cowboy2Adapter,
+  pubsub_server: PhxExample.PubSub,
+  live_view: [signing_salt: "dB7qn7EQ"],
+  secret_key_base: "A+gtEDayUNx4ZyfHvUKETwRC4RjxK0FDlrLjuRhaBnr3Ll3ynfu5RlSSGe5E7zbW"
+
+config :logger, level: :warning
 
 config :phoenix, :json_library, Jason

examples/apps/phx_example/lib/phx_example/application.ex

@@ -5,6 +5,7 @@ defmodule PhxExample.Application do
 
   def start(_type, _args) do
     children = [
+      {Phoenix.PubSub, name: PhxExample.PubSub},
       PhxExampleWeb.Endpoint
     ]
 

examples/apps/phx_example/lib/phx_example_web.ex

@@ -1,30 +1,102 @@
 defmodule PhxExampleWeb do
-  def controller do
+  @moduledoc """
+  The entrypoint for defining your web interface, such
+  as controllers, components, channels, and so on.
+
+  This can be used in your application as:
+
+      use PhxExampleWeb, :controller
+      use PhxExampleWeb, :html
+
+  The definitions below will be executed for every controller,
+  component, etc, so keep them short and clean, focused
+  on imports, uses and aliases.
+
+  Do NOT define functions inside the quoted expressions
+  below. Instead, define additional modules and import
+  those modules here.
+  """
+
+  def static_paths, do: ~w(assets fonts images favicon.ico robots.txt)
+
+  def router do
     quote do
-      use Phoenix.Controller, namespace: PhxExampleWeb
+      use Phoenix.Router, helpers: false
 
       import Plug.Conn
-      alias PhxExampleWeb.Router.Helpers, as: Routes
+      import Phoenix.Controller
+      import Phoenix.LiveView.Router
     end
   end
 
-  def view do
+  def channel do
     quote do
-      use Phoenix.View,
-        root: "lib/phx_example_web/templates",
-        namespace: PhxExampleWeb
+      use Phoenix.Channel
     end
   end
 
-  def router do
+  def controller do
     quote do
-      use Phoenix.Router
+      use Phoenix.Controller,
+        formats: [:html, :json],
+        layouts: [html: PhxExampleWeb.Layouts]
 
       import Plug.Conn
-      import Phoenix.Controller
+
+      unquote(verified_routes())
+    end
+  end
+
+  def live_view do
+    quote do
+      use Phoenix.LiveView,
+        layout: {PhxExampleWeb.Layouts, :app}
+
+      unquote(html_helpers())
+    end
+  end
+
+  def live_component do
+    quote do
+      use Phoenix.LiveComponent
+
+      unquote(html_helpers())
+    end
+  end
+
+  def html do
+    quote do
+      use Phoenix.Component
+
+      import Phoenix.Controller,
+        only: [get_csrf_token: 0, view_module: 1, view_template: 1]
+
+      unquote(html_helpers())
+    end
+  end
+
+  defp html_helpers do
+    quote do
+      import Phoenix.HTML
+
+      alias Phoenix.LiveView.JS
+
+      unquote(verified_routes())
+    end
+  end
+
+  def verified_routes do
+    quote do
+      use Phoenix.VerifiedRoutes,
+        endpoint: PhxExampleWeb.Endpoint,
+        router: PhxExampleWeb.Router,
+        statics: PhxExampleWeb.static_paths()
     end
   end
 
+  @doc """
+  When used, dispatch to the appropriate controller/view/etc.
+  """
   defmacro __using__(which) when is_atom(which) do
     apply(__MODULE__, which, [])
   end

examples/apps/phx_example/lib/phx_example_web/components/layouts.ex

@@ -0,0 +1,5 @@
+defmodule PhxExampleWeb.Layouts do
+  use PhxExampleWeb, :html
+
+  embed_templates "layouts/*"
+end

examples/apps/phx_example/lib/phx_example_web/components/layouts/app.html.heex

@@ -0,0 +1,5 @@
+<main>
+  <div>
+    <%= @inner_content %>
+  </div>
+</main>

examples/apps/phx_example/lib/phx_example_web/components/layouts/root.html.heex

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="csrf-token" content={get_csrf_token()} />
+    <.live_title suffix=" · Phoenix Framework">
+      <%= assigns[:page_title] || "PhxExample" %>
+    </.live_title>
+    <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
+    </script>
+  </head>
+  <body>
+    <%= @inner_content %>
+  </body>
+</html>

examples/apps/phx_example/lib/phx_example_web/controllers/error_html.ex

@@ -0,0 +1,9 @@
+defmodule PhxExampleWeb.ErrorHTML do
+  use PhxExampleWeb, :html
+
+  embed_templates "error_html/*"
+
+  def render(template, _assigns) do
+    Phoenix.Controller.status_message_from_template(template)
+  end
+end

examples/apps/phx_example/lib/phx_example_web/controllers/error_html/500.html.heex

@@ -0,0 +1 @@
+"Oops, Internal Server Error"

examples/apps/phx_example/lib/phx_example_web/controllers/page_controller.ex

@@ -2,7 +2,7 @@ defmodule PhxExampleWeb.PageController do
   use PhxExampleWeb, :controller
 
   def index(conn, _params) do
-    render(conn, "index.html")
+    render(conn, :index)
   end
 
   def error(_, _) do

examples/apps/phx_example/lib/phx_example_web/controllers/page_html.ex

@@ -0,0 +1,5 @@
+defmodule PhxExampleWeb.PageHTML do
+  use PhxExampleWeb, :html
+
+  embed_templates "page_html/*"
+end

examples/apps/phx_example/lib/phx_example_web/endpoint.ex

@@ -1,5 +1,31 @@
 defmodule PhxExampleWeb.Endpoint do
   use Phoenix.Endpoint, otp_app: :phx_example
 
+  @session_options [
+    store: :cookie,
+    key: "_phx_example_key",
+    signing_salt: "F6n7gjjvL6I61gUB",
+    same_site: "Lax"
+  ]
+
+  socket "/live", Phoenix.LiveView.Socket, websocket: [connect_info: [session: @session_options]]
+
+  plug Plug.Static,
+    at: "/",
+    from: :phx_example,
+    gzip: false,
+    only: PhxExampleWeb.static_paths()
+
+  plug Plug.RequestId
+  plug Plug.Telemetry, event_prefix: [:phoenix, :endpoint]
+
+  plug Plug.Parsers,
+    parsers: [:urlencoded, :multipart, :json],
+    pass: ["*/*"],
+    json_decoder: Phoenix.json_library()
+
+  plug Plug.MethodOverride
+  plug Plug.Head
+  plug Plug.Session, @session_options
   plug PhxExampleWeb.Router
 end

examples/apps/phx_example/lib/phx_example_web/live/error_live.ex

@@ -0,0 +1,12 @@
+defmodule PhxExampleWeb.ErrorLive do
+  use PhxExampleWeb, :live_view
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div>
+      <h1><%= @some_variable %></h1>
+    </div>
+    """
+  end
+end

examples/apps/phx_example/lib/phx_example_web/live/home_live.ex

@@ -0,0 +1,13 @@
+defmodule PhxExampleWeb.HomeLive do
+  use PhxExampleWeb, :live_view
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div>
+      <h1>Home</h1>
+      <p>Some content</p>
+    </div>
+    """
+  end
+end

examples/apps/phx_example/lib/phx_example_web/router.ex

@@ -3,11 +3,19 @@ defmodule PhxExampleWeb.Router do
 
   pipeline :browser do
     plug :accepts, ["html"]
+    plug :fetch_session
+    plug :fetch_live_flash
+    plug :put_root_layout, html: {PhxExampleWeb.Layouts, :root}
+    plug :protect_from_forgery
+    plug :put_secure_browser_headers
   end
 
   scope "/phx", PhxExampleWeb do
     pipe_through :browser
 
+    live "/home", HomeLive, :index
+    live "/live_error", ErrorLive, :index
+
     get "/error", PageController, :error
     get "/:foo", PageController, :index
   end

examples/apps/phx_example/mix.exs

@@ -10,7 +10,6 @@ defmodule PhxExample.MixProject do
       deps_path: "../../deps",
       lockfile: "../../mix.lock",
       elixir: "~> 1.7",
-      compilers: [:phoenix] ++ Mix.compilers(),
       start_permanent: Mix.env() == :prod,
       deps: deps()
     ]
@@ -28,7 +27,9 @@ defmodule PhxExample.MixProject do
       {:new_relic_agent, path: "../../../"},
       {:test_support, in_umbrella: true},
       {:phoenix, "~> 1.5"},
-      {:phoenix_html, "~> 2.11"},
+      {:phoenix_html, "~> 3.3"},
+      {:phoenix_view, "~> 2.0"},
+      {:phoenix_live_view, "~> 0.20"},
       {:jason, "~> 1.0"},
       {:plug_cowboy, "~> 2.0"}
     ]