Read phoenix js assests at compile time

Stop bundling phoenix and liveview assests. Instead, read them at compile time and concatinate
with app js.

Solution nabbed from phoenix_live_dashboard

Author: sorenone

assets/js/app.js

@@ -1,52 +1,59 @@
-import "phoenix_html"
-import { Socket, LongPoll } from "phoenix"
-import { LiveSocket } from "phoenix_live_view"
-import topbar from "topbar"
-
-import { loadAll } from "./lib/settings"
-
-import Charter from "./hooks/charter"
-import Completer from "./hooks/completer"
-import Instantiator from "./hooks/instantiator"
-import Refresher from "./hooks/refresher"
-import Relativize from "./hooks/relativize"
-import Shortcuts from "./hooks/shortcuts"
-import Themer from "./hooks/themer"
-import Tippy from "./hooks/tippy"
-
-const hooks = { Charter, Completer, Instantiator, Refresher, Relativize, Shortcuts, Themer, Tippy }
+// Phoenix assets are imported from dependencies
+import topbar from "topbar";
+
+import { loadAll } from "./lib/settings";
+
+import Charter from "./hooks/charter";
+import Completer from "./hooks/completer";
+import Instantiator from "./hooks/instantiator";
+import Refresher from "./hooks/refresher";
+import Relativize from "./hooks/relativize";
+import Shortcuts from "./hooks/shortcuts";
+import Themer from "./hooks/themer";
+import Tippy from "./hooks/tippy";
+
+const hooks = {
+  Charter,
+  Completer,
+  Instantiator,
+  Refresher,
+  Relativize,
+  Shortcuts,
+  Themer,
+  Tippy,
+};
 
 // Topbar ---
 
-let topBarScheduled = undefined
+let topBarScheduled = undefined;
 
 topbar.config({
   barColors: { 0: "#0284c7" },
   shadowColor: "rgba(0, 0, 0, .3)",
-})
+});
 
 window.addEventListener("phx:page-loading-start", (info) => {
   if (!topBarScheduled) {
-    topBarScheduled = setTimeout(() => topbar.show(), 500)
+    topBarScheduled = setTimeout(() => topbar.show(), 500);
   }
-})
+});
 
 window.addEventListener("phx:page-loading-stop", (info) => {
-  clearTimeout(topBarScheduled)
-  topBarScheduled = undefined
-  topbar.hide()
-})
+  clearTimeout(topBarScheduled);
+  topBarScheduled = undefined;
+  topbar.hide();
+});
 
 // Mounting ---
 
-const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-const liveTran = document.querySelector("meta[name='live-transport']").getAttribute("content")
-const livePath = document.querySelector("meta[name='live-path']").getAttribute("content")
+const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
+const liveTran = document.querySelector("meta[name='live-transport']").getAttribute("content");
+const livePath = document.querySelector("meta[name='live-path']").getAttribute("content");
 
-const liveSocket = new LiveSocket(livePath, Socket, {
-  transport: liveTran === "longpoll" ? LongPoll : WebSocket,
+const liveSocket = new LiveView.LiveSocket(livePath, Phoenix.Socket, {
+  transport: liveTran === "longpoll" ? Phoenix.LongPoll : WebSocket,
   params: { _csrf_token: csrfToken, init_state: loadAll() },
   hooks: hooks,
-})
+});
 
-liveSocket.connect()
+liveSocket.connect();

lib/oban/web/components/layouts.ex

@@ -1,18 +1,24 @@
 defmodule Oban.Web.Layouts do
   use Oban.Web, :html
 
+  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(:oban_web, ["priv", "static"])
 
-  @external_resource Path.join(@static_path, "app.css")
-  @external_resource Path.join(@static_path, "app.js")
+  @external_resource css_path = Path.join(@static_path, "app.css")
+  @external_resource js_path = Path.join(@static_path, "app.js")
 
-  @css @static_path
-       |> Path.join("app.css")
-       |> File.read!()
+  @css File.read!(css_path)
 
-  @js @static_path
-      |> Path.join("app.js")
-      |> File.read!()
+  @js """
+  #{for path <- phoenix_js_paths, do: path |> File.read!() |> String.replace("//# sourceMappingURL=", "// ")}
+  #{File.read!(js_path)}
+  """
 
   def render("app.css"), do: @css
   def render("app.js"), do: @js