Use Phoenix 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

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

@@ -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/*"
 

lib/error_tracker/web/components/layouts.ex

@@ -5,8 +5,8 @@
     <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>