Make dev script conditional at compile time

lib/livebook_web/components/layout_components.ex

@@ -312,4 +312,55 @@ defmodule LivebookWeb.LayoutComponents do
   defp topbar_class(:warning), do: "bg-yellow-200 text-gray-900"
   defp topbar_class(:info), do: "bg-blue-200 text-gray-900"
   defp topbar_class(:error), do: "bg-red-200 text-gray-900"
+
+  @doc """
+  Returns an inline script to inject in dev mode.
+
+  The main JS file is loaded asynchronously as a module, so we inline
+  the live reloader listener to make sure it is already registered
+  when the event is dispatched.
+  """
+  if Mix.env() == :dev do
+    def dev_script(assigns) do
+      ~H"""
+      <script type="text/javascript">
+        window.addEventListener(
+          "phx:live_reload:attached",
+          ({ detail: reloader }) => {
+            // Enable server log streaming to client. Disable with reloader.disableServerLogs()
+            reloader.enableServerLogs();
+
+            // Open configured PLUG_EDITOR at file:line of the clicked element's HEEx component
+            //
+            //   * click with "c" key pressed to open at caller location
+            //   * click with "d" key pressed to open at function component definition location
+            //
+            let keyDown;
+            window.addEventListener("keydown", (event) => (keyDown = event.key));
+            window.addEventListener("keyup", (event) => (keyDown = null));
+            window.addEventListener(
+              "click",
+              (event) => {
+                if (keyDown === "c") {
+                  event.preventDefault();
+                  event.stopImmediatePropagation();
+                  reloader.openEditorAtCaller(e.target);
+                } else if (keyDown === "d") {
+                  event.preventDefault();
+                  event.stopImmediatePropagation();
+                  reloader.openEditorAtDef(event.target);
+                }
+              },
+              true,
+            );
+
+            window.liveReloader = reloader;
+          },
+        );
+      </script>
+      """
+    end
+  else
+    def dev_script(assigns), do: ~H""
+  end
 end

lib/livebook_web/components/layouts/root.html.heex

@@ -14,46 +14,7 @@
     <script>
       window.LIVEBOOK_BASE_URL_PATH = "<%= Livebook.Config.base_url_path() %>";
     </script>
-    <!--
+    <LivebookWeb.LayoutComponents.dev_script />
-      The main JS file is loaded asynchronously as a module, so we inline
-      the live reloader listener here to make sure it is already registered
-      when the event is dispatched.
-    -->
-    <script :if={Mix.env() == :dev} type="text/javascript">
-      window.addEventListener(
-        "phx:live_reload:attached",
-        ({ detail: reloader }) => {
-          // Enable server log streaming to client. Disable with reloader.disableServerLogs()
-          reloader.enableServerLogs();
-
-          // Open configured PLUG_EDITOR at file:line of the clicked element's HEEx component
-          //
-          //   * click with "c" key pressed to open at caller location
-          //   * click with "d" key pressed to open at function component definition location
-          //
-          let keyDown;
-          window.addEventListener("keydown", (event) => (keyDown = event.key));
-          window.addEventListener("keyup", (event) => (keyDown = null));
-          window.addEventListener(
-            "click",
-            (event) => {
-              if (keyDown === "c") {
-                event.preventDefault();
-                event.stopImmediatePropagation();
-                reloader.openEditorAtCaller(e.target);
-              } else if (keyDown === "d") {
-                event.preventDefault();
-                event.stopImmediatePropagation();
-                reloader.openEditorAtDef(event.target);
-              }
-            },
-            true,
-          );
-
-          window.liveReloader = reloader;
-        },
-      );
-    </script>
     <%!-- This prevents the script to be loaded twice in Chrome --%>
     <link rel="modulepreload" href={~p"/assets/app.js"} />
     <script phx-track-static type="module" src={~p"/assets/app.js"}>