Require LiveView 1.0 at least

assets/js/app.js

@@ -1,14 +1,14 @@
-// Establish Phoenix Socket and LiveView configuration.
-import { Socket, LongPoll } from "phoenix";
-import { LiveSocket } from "phoenix_live_view";
+// Phoenix assets are imported from dependencies.
 import topbar from "topbar";
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
-let socketPath = document.querySelector("meta[name='socket-path']").getAttribute("content");
-let socketTransport = document.querySelector("meta[name='socket-transport']").getAttribute("content");
-let normalizedTransport = (socketTransport == "longpoll") ? LongPoll : WebSocket;
+let livePath = document.querySelector("meta[name='live-path']").getAttribute("content");
+let liveTransport = document .querySelector("meta[name='live-transport']") .getAttribute("content");
 
-let liveSocket = new LiveSocket(socketPath, Socket, { transport: normalizedTransport, params: { _csrf_token: csrfToken }});
+let liveSocket = new LiveView.LiveSocket(livePath, Phoenix.Socket, {
+  transport: liveTransport === "longpoll" ? Phoenix.LongPoll : WebSocket,
+  params: { _csrf_token: csrfToken },
+});
 
 // Show progress bar on live navigation and form submits
 topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" });

dev.exs

@@ -5,7 +5,7 @@
 Mix.install([
   {:ecto_sqlite3, ">= 0.0.0"},
   {:error_tracker, path: ".", force: true},
-  {:phoenix_playground, "~> 0.1.7"}
+  {:phoenix_playground, "~> 0.1.8"}
 ])
 
 otp_app = :error_tracker_dev

lib/error_tracker/web.ex

@@ -62,7 +62,7 @@ defmodule ErrorTracker.Web do
   ```elixir
   config :error_tracker,
     socket: [
-      path: "/my-custom-socket-path"
+      path: "/my-custom-live-path"
       transport: :longpoll # (accepted values are :longpoll or :websocket)
     ]
   ```

lib/error_tracker/web/components/core_components.ex

@@ -26,7 +26,7 @@ defmodule ErrorTracker.Web.CoreComponents do
       ]}
       {@rest}
     >
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
     </.link>
     """
   end
@@ -42,7 +42,7 @@ defmodule ErrorTracker.Web.CoreComponents do
       ]}
       {@rest}
     >
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
     </button>
     """
   end
@@ -80,7 +80,7 @@ defmodule ErrorTracker.Web.CoreComponents do
       class={["text-sm font-medium me-2 py-1 px-2 rounded-lg ring-1 ring-inset", @color_class]}
       {@rest}
     >
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
     </span>
     """
   end
@@ -124,9 +124,9 @@ defmodule ErrorTracker.Web.CoreComponents do
         :if={assigns[:title]}
         class={["text-sm font-semibold mb-2 uppercase text-gray-400", @title_class]}
       >
-        <%= @title %>
+        {@title}
       </h2>
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
     </div>
     """
   end

lib/error_tracker/web/components/layouts.ex

@@ -2,16 +2,25 @@ defmodule ErrorTracker.Web.Layouts do
   @moduledoc false
   use ErrorTracker.Web, :html
 
-  @default_socket_config %{path: "/live", transport: :websocket}
+  phoenix_js_paths =
+    for app <- ~w[phoenix phoenix_html phoenix_live_view]a do
+      path = Application.app_dir(app, ["priv", "static", "#{app}.js"])
+      Module.put_attribute(__MODULE__, :external_resource, path)
+      path
+    end
+
+  @static_path Application.app_dir(:error_tracker, ["priv", "static"])
+  @external_resource css_path = Path.join(@static_path, "app.css")
+  @external_resource js_path = Path.join(@static_path, "app.js")
 
-  @css_path Application.app_dir(:error_tracker, ["priv", "static", "app.css"])
-  @js_path Application.app_dir(:error_tracker, ["priv", "static", "app.js"])
+  @css File.read!(css_path)
 
-  @external_resource @css_path
-  @external_resource @js_path
+  @js """
+  #{for path <- phoenix_js_paths, do: path |> File.read!() |> String.replace("//# sourceMappingURL=", "// ")}
+  #{File.read!(js_path)}
+  """
 
-  @css File.read!(@css_path)
-  @js File.read!(@js_path)
+  @default_socket_config %{path: "/live", transport: :websocket}
 
   embed_templates "layouts/*"
 
@@ -97,7 +106,7 @@ defmodule ErrorTracker.Web.Layouts do
         class="whitespace-nowrap flex-0 block py-2 px-3 rounded-lg text-white hover:text-white hover:bg-gray-700 md:hover:bg-transparent md:border-0 md:hover:text-sky-500"
         {@rest}
       >
-        <%= render_slot(@inner_block) %>
+        {render_slot(@inner_block)}
       </a>
     </li>
     """

lib/error_tracker/web/components/layouts/live.html.heex

@@ -1,4 +1,4 @@
 <.navbar id="navbar" {assigns} />
 <main class="container px-4 mx-auto mt-4 mb-4">
-  <%= @inner_content %>
+  {@inner_content}
 </main>

lib/error_tracker/web/components/layouts/root.html.heex

@@ -5,10 +5,10 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="csrf-token" content={get_csrf_token()} />
-    <meta name="socket-path" content={get_socket_config(:path)} />
-    <meta name="socket-transport" content={get_socket_config(:transport)} />
+    <meta name="live-path" content={get_socket_config(:path)} />
+    <meta name="live-transport" content={get_socket_config(:transport)} />
 
-    <title><%= assigns[:page_title] || "🐛 ErrorTracker" %></title>
+    <title>{assigns[:page_title] || "🐛 ErrorTracker"}</title>
 
     <style nonce={@csp_nonces[:style]}>
       <%= raw get_content(:css) %>
@@ -19,6 +19,6 @@
   </head>
 
   <body class="bg-gray-800 text-white">
-    <%= @inner_content %>
+    {@inner_content}
   </body>
 </html>

lib/error_tracker/web/live/dashboard.html.heex

@@ -64,23 +64,23 @@
       >
         <td scope="row" class="px-4 py-4 font-medium text-white relative">
           <.link navigate={error_path(@socket, error, @search)} class="absolute inset-1">
-            <span class="sr-only">(<%= sanitize_module(error.kind) %>) <%= error.reason %></span>
+            <span class="sr-only">({sanitize_module(error.kind)}) {error.reason}</span>
           </.link>
           <p class="whitespace-nowrap text-ellipsis overflow-hidden">
-            (<%= sanitize_module(error.kind) %>) <%= error.reason %>
+            ({sanitize_module(error.kind)}) {error.reason}
           </p>
           <p
             :if={ErrorTracker.Error.has_source_info?(error)}
             class="whitespace-nowrap text-ellipsis overflow-hidden font-normal text-gray-400"
           >
-            <%= sanitize_module(error.source_function) %>
+            {sanitize_module(error.source_function)}
             <br />
-            <%= error.source_line %>
+            {error.source_line}
           </p>
         </td>
         <td class="px-4 py-4">
-          <p>Last: <%= format_datetime(error.last_occurrence_at) %></p>
-          <p>Total: <%= @occurrences[error.id] %></p>
+          <p>Last: {format_datetime(error.last_occurrence_at)}</p>
+          <p>Total: {@occurrences[error.id]}</p>
         </td>
         <td class="px-4 py-4">
           <.badge :if={error.status == :resolved} color={:green}>Resolved</.badge>

lib/error_tracker/web/live/show.html.heex

@@ -6,12 +6,12 @@
 
 <div id="header">
   <p class="text-sm uppercase font-semibold text-gray-400">
-    Error #<%= @error.id %> @ <%= format_datetime(@occurrence.inserted_at) %>
+    Error #{@error.id} @ {format_datetime(@occurrence.inserted_at)}
   </p>
   <h1 class="my-1 text-2xl w-full font-semibold whitespace-nowrap text-ellipsis overflow-hidden">
-    (<%= sanitize_module(@error.kind) %>) <%= @error.reason
+    ({sanitize_module(@error.kind)}) {@error.reason
     |> String.replace("\n", " ")
-    |> String.trim() %>
+    |> String.trim()}
   </h1>
 </div>
 
@@ -38,9 +38,9 @@
             class="border-b bg-gray-400/10 border-gray-900 last:border-b-0"
           >
             <td class="w-11 pl-2 py-4 font-medium text-white relative text-right">
-              <%= length(@occurrence.breadcrumbs) - index %>.
+              {length(@occurrence.breadcrumbs) - index}.
             </td>
-            <td class="px-2 py-4 font-medium text-white relative"><%= breadcrumb %></td>
+            <td class="px-2 py-4 font-medium text-white relative">{breadcrumb}</td>
           </tr>
         </table>
       </div>
@@ -95,7 +95,7 @@
             value={occurrence.id}
             selected={occurrence.id == @occurrence.id}
           >
-            <%= format_datetime(occurrence.inserted_at) %>
+            {format_datetime(occurrence.inserted_at)}
           </option>
         </select>
       </form>

mix.exs

@@ -87,7 +87,7 @@ defmodule ErrorTracker.MixProject do
       {:ecto_sql, "~> 3.0"},
       {:ecto, "~> 3.11"},
       {:jason, "~> 1.1"},
-      {:phoenix_live_view, "~> 0.19 or ~> 1.0"},
+      {:phoenix_live_view, "~> 1.0"},
       {:phoenix_ecto, "~> 4.6"},
       {:plug, "~> 1.10"},
       {:postgrex, ">= 0.0.0", optional: true},