livebook-dev/livebook
1
1
Fork 0
mirror of https://github.com/livebook-dev/livebook.git synced 2025-10-05 19:25:28 +08:00
Code Issues Projects Releases Packages Wiki Activity

Make dev script conditional at compile time

Browse source
This commit is contained in:
Jonatan Kłosko 2024-05-10 13:45:57 +08:00
parent 785d3752f7
commit 7b07c6518c
2 changed files with 52 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
lib/livebook_web/components/layout_components.ex
View file

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

41
lib/livebook_web/components/layouts/root.html.heex
View file

@ -14,46 +14,7 @@
<script>
window.LIVEBOOK_BASE_URL_PATH = "<%= Livebook.Config.base_url_path() %>";
</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>
<LivebookWeb.LayoutComponents.dev_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"}>