Require LiveView 1.0 at least (#159)

The ErrorTracker assets were compiled against an old (pre 1.0) version
of LiveView. This caused issues in applications using LiveView 1.0 and
newer.

This commit gets rid of the warning about LiveView and ErrorTracker
javascript version mismatch. We now follow LiveDashboard and Oban Web
footsteps and import the LiveView assets directly.

Author: crbelaus

assets/bun.lockb

@@ -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)" });

assets/js/app.js

@@ -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

dev.exs

@@ -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.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/core_components.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.ex

@@ -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/live.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/components/layouts/root.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/dashboard.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>