Turn /feeds into LiveView

cruessler · cruessler · commit 09efa790db0d · 2024-12-04T09:26:27.000+01:00
This migration only turns the top-level template into a LiveView. It
does not change anything rendered on the page. The page continues to be
rendered as an Elm app on the client.

This is done to keep this commit as small as possible.
diff --git a/config/config.exs b/config/config.exs
@@ -12,7 +12,11 @@ config :ex_rss,
 # Configures the endpoint
 config :ex_rss, ExRssWeb.Endpoint,
   url: [host: "localhost"],
+  # TODO
+  # `secret_key_base` seems to have been removed by Phoenix 1.7 or an earlier
+  # version.
   secret_key_base: System.get_env("SECRET_KEY_BASE"),
+  live_view: [signing_salt: "abcdefgh"],
   render_errors: [view: ExRssWeb.ErrorView, accepts: ~w(html json)],
   pubsub_server: ExRss.PubSub
 
diff --git a/config/dev.exs b/config/dev.exs
@@ -8,6 +8,9 @@ import Config
 # with esbuild to recompile .js and .css sources.
 config :ex_rss, ExRssWeb.Endpoint,
   http: [port: 4000, protocol_options: [max_header_value_length: 8192]],
+  # TODO
+  # `secret_key_base` seems to have been removed by Phoenix 1.7 or an earlier
+  # version.
   secret_key_base: String.duplicate("abcdefgh", 8),
   debug_errors: true,
   code_reloader: true,
@@ -41,6 +44,12 @@ config :ex_rss, ExRssWeb.Endpoint,
 # in production as building large stacktraces may be expensive.
 config :phoenix, :stacktrace_depth, 20
 
+config :phoenix_live_view,
+  # Include HEEx debug annotations as HTML comments in rendered markup
+  debug_heex_annotations: true,
+  # Enable helpful, but potentially expensive runtime checks
+  enable_expensive_runtime_checks: true
+
 # Configure your database
 config :ex_rss, ExRss.Repo,
   adapter: Ecto.Adapters.Postgres,
diff --git a/lib/ex_rss_web.ex b/lib/ex_rss_web.ex
@@ -43,6 +43,10 @@ defmodule ExRssWeb do
     end
   end
 
+  # 2024-12-03
+  # `view` was generated before Phoenix 1.7 and would not be generated by
+  # Phoenix 1.7. It is kept around to keep existing code working and to keep
+  # the initial migration to LiveView small.
   def view do
     quote do
       use Phoenix.View, root: "lib/ex_rss_web/templates", namespace: ExRssWeb
@@ -62,9 +66,35 @@ defmodule ExRssWeb do
     end
   end
 
+  def live_view do
+    quote do
+      use Phoenix.LiveView,
+        layout: {ExRssWeb.Layouts, :app}
+
+      unquote(html_helpers())
+    end
+  end
+
+  def html do
+    quote do
+      use Phoenix.Component
+
+      # Import convenience functions from controllers
+      import Phoenix.Controller,
+        only: [get_csrf_token: 0, view_module: 1, view_template: 1]
+
+      # Include general helpers for rendering HTML
+      unquote(html_helpers())
+    end
+  end
+
   def router do
     quote do
       use Phoenix.Router
+
+      import Plug.Conn
+      import Phoenix.Controller
+      import Phoenix.LiveView.Router
     end
   end
 
@@ -79,6 +109,24 @@ defmodule ExRssWeb do
     end
   end
 
+  defp html_helpers do
+    quote do
+      # HTML escaping functionality
+      import Phoenix.HTML
+      # TODO
+      # Phoenix 1.7 would also generate `import ExRssWeb.CoreComponents`. I did
+      # not add this import to keep the initial migration to `LiveView` small.
+      # Translation
+      import ExRssWeb.Gettext
+
+      # Shortcut for generating JS commands
+      alias Phoenix.LiveView.JS
+
+      # Routes generation with the ~p sigil
+      unquote(verified_routes())
+    end
+  end
+
   def verified_routes do
     quote do
       use Phoenix.VerifiedRoutes,
diff --git a/lib/ex_rss_web/components/layouts.ex b/lib/ex_rss_web/components/layouts.ex
@@ -0,0 +1,14 @@
+defmodule ExRssWeb.Layouts do
+  @moduledoc """
+  This module holds different layouts used by your application.
+
+  See the `layouts` directory for all templates available.
+  The "root" layout is a skeleton rendered as part of the
+  application router. The "app" layout is set as the default
+  layout on both `use ExRssWeb, :controller` and
+  `use ExRssWeb, :live_view`.
+  """
+  use ExRssWeb, :html
+
+  embed_templates "layouts/*"
+end
diff --git a/lib/ex_rss_web/components/layouts/app.html.heex b/lib/ex_rss_web/components/layouts/app.html.heex
@@ -0,0 +1 @@
+<%= @inner_content %>
diff --git a/lib/ex_rss_web/components/layouts/root.html.heex b/lib/ex_rss_web/components/layouts/root.html.heex
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>Hello ExRss!</title>
+    <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"}>
+    <script>window.userToken = "<%= assigns[:user_token] %>";</script>
+    <script phx-track-static src={~p"/assets/app.js"}></script>
+  </head>
+
+  <body class="m-6 grid grid-cols-12">
+    <div class="col-span-12 md:col-start-3 md:col-span-8">
+      <p role="alert"><%= Phoenix.Flash.get(@flash, :info) %></p>
+      <p role="alert"><%= Phoenix.Flash.get(@flash, :error) %></p>
+
+      <%= @inner_content %>
+
+    </div> <!-- /container -->
+  </body>
+</html>
diff --git a/lib/ex_rss_web/feed_live/index.ex b/lib/ex_rss_web/feed_live/index.ex
@@ -0,0 +1,22 @@
+defmodule ExRssWeb.FeedLive.Index do
+  use ExRssWeb, :live_view
+
+  def mount(_params, %{"api_token" => api_token} = _session, socket) do
+    {:ok, assign(socket, :api_token, api_token)}
+  end
+
+  # 2024-12-03
+  # This `use` is needed for `content_tag` to be available in `elm_module`.
+  use Phoenix.HTML
+
+  def elm_module(module, params \\ %{}, attrs \\ []) do
+    {tag, attrs} = Keyword.pop(attrs, :tag, :div)
+
+    data_attributes = [
+      "data-elm-module": module,
+      "data-elm-params": html_escape(Jason.encode!(params))
+    ]
+
+    content_tag(tag, "", Keyword.merge(attrs, data_attributes))
+  end
+end
diff --git a/lib/ex_rss_web/feed_live/index.html.heex b/lib/ex_rss_web/feed_live/index.html.heex
@@ -0,0 +1,3 @@
+<%=
+  elm_module("App.Feeds", %{apiToken: @api_token})
+%>
diff --git a/lib/ex_rss_web/plugs/assign_api_token.ex b/lib/ex_rss_web/plugs/assign_api_token.ex
@@ -14,7 +14,14 @@ defmodule ExRssWeb.Plug.AssignApiToken do
     if %User{id: id} = conn.assigns[:current_user] do
       token = Phoenix.Token.sign(@context, salt, %Account{id: id})
 
-      assign(conn, :api_token, token)
+      conn
+      # 2024-12-03
+      # `assign` is used to assign to `conn.assigns` in order to have the token
+      # available in regular templates.
+      |> assign(:api_token, token)
+      # `put_session` is used to have the token available in LiveViews’
+      # `mount`.
+      |> put_session(:api_token, token)
     else
       conn
     end
diff --git a/lib/ex_rss_web/router.ex b/lib/ex_rss_web/router.ex
@@ -7,6 +7,7 @@ defmodule ExRssWeb.Router do
     plug :accepts, ["html"]
     plug :fetch_session
     plug :fetch_flash
+    plug :put_root_layout, {ExRssWeb.Layouts, :root}
     plug :protect_from_forgery
     plug :put_secure_browser_headers
 
@@ -44,7 +45,7 @@ defmodule ExRssWeb.Router do
       pipe_through :authenticated
 
       scope "/feeds" do
-        resources "/", FeedController, only: [:index]
+        live "/", FeedLive.Index, :index
 
         get "/new", FeedController, :new
       end
diff --git a/lib/ex_rss_web/views/layout_view.ex b/lib/ex_rss_web/views/layout_view.ex
@@ -1,3 +1,15 @@
+# 2024-12-03
+# `LayoutView` was generated before Phoenix 1.7. Deleting this module when
+# migrating to Phoenix 1.7 patterns resulted in errors similar to the following
+# one in tests:
+#
+# ```
+# ** (ArgumentError) no "app" html template defined for ExRssWeb.LayoutView
+# (the module does not exist)
+# ```
+#
+# It is kept around to keep existing code working and to keep the initial
+# migration to LiveView small.
 defmodule ExRssWeb.LayoutView do
   use ExRssWeb, :view
 end
diff --git a/mix.exs b/mix.exs
@@ -42,6 +42,7 @@ defmodule ExRss.Mixfile do
       {:postgrex, "~> 0.19.1"},
       {:phoenix_html, "~> 3.0"},
       {:phoenix_live_reload, "~> 1.0", only: :dev},
+      {:phoenix_live_view, "~> 0.20"},
       {:gettext, "~> 0.11"},
       {:floki, "~> 0.24"},
       {:feeder_ex, "~> 1.1"},
diff --git a/mix.lock b/mix.lock
@@ -34,6 +34,7 @@
   "phoenix_ecto": {:hex, :phoenix_ecto, "4.6.1", "96798325fab2fed5a824ca204e877b81f9afd2e480f581e81f7b4b64a5a477f2", [:mix], [{:ecto, "~> 3.5", [hex: :ecto, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 2.14.2 or ~> 3.0 or ~> 4.1", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: false]}, {:postgrex, "~> 0.17", [hex: :postgrex, repo: "hexpm", optional: true]}], "hexpm", "0ae544ff99f3c482b0807c5cec2c8289e810ecacabc04959d82c3337f4703391"},
   "phoenix_html": {:hex, :phoenix_html, "3.3.4", "42a09fc443bbc1da37e372a5c8e6755d046f22b9b11343bf885067357da21cb3", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "0249d3abec3714aff3415e7ee3d9786cb325be3151e6c4b3021502c585bf53fb"},
   "phoenix_live_reload": {:hex, :phoenix_live_reload, "1.5.3", "f2161c207fda0e4fb55165f650f7f8db23f02b29e3bff00ff7ef161d6ac1f09d", [:mix], [{:file_system, "~> 0.3 or ~> 1.0", [hex: :file_system, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.4", [hex: :phoenix, repo: "hexpm", optional: false]}], "hexpm", "b4ec9cd73cb01ff1bd1cac92e045d13e7030330b74164297d1aee3907b54803c"},
+  "phoenix_live_view": {:hex, :phoenix_live_view, "0.20.17", "f396bbdaf4ba227b82251eb75ac0afa6b3da5e509bc0d030206374237dfc9450", [:mix], [{:floki, "~> 0.36", [hex: :floki, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.6.15 or ~> 1.7.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.3 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.15", [hex: :plug, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "a61d741ffb78c85fdbca0de084da6a48f8ceb5261a79165b5a0b59e5f65ce98b"},
   "phoenix_pubsub": {:hex, :phoenix_pubsub, "2.1.3", "3168d78ba41835aecad272d5e8cd51aa87a7ac9eb836eabc42f6e57538e3731d", [:mix], [], "hexpm", "bba06bc1dcfd8cb086759f0edc94a8ba2bc8896d5331a1e2c2902bf8e36ee502"},
   "phoenix_template": {:hex, :phoenix_template, "1.0.4", "e2092c132f3b5e5b2d49c96695342eb36d0ed514c5b252a77048d5969330d639", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}], "hexpm", "2c0c81f0e5c6753faf5cca2f229c9709919aba34fab866d3bc05060c9c444206"},
   "phoenix_view": {:hex, :phoenix_view, "2.0.4", "b45c9d9cf15b3a1af5fb555c674b525391b6a1fe975f040fb4d913397b31abf4", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}], "hexpm", "4e992022ce14f31fe57335db27a28154afcc94e9983266835bb3040243eb620b"},

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<%=`
	`2`	`+ elm_module("App.Feeds", %{apiToken: @api_token})`
	`3`	`+%>`