PLUG_EDITOR

Author: chrismccord

README.md

@@ -49,10 +49,10 @@ window.addEventListener("phx:live_reload:connected", ({detail: reloader}) => {
 
 ## Jumping to HEEx function definitions
 
-Many times it's useful to inspect the HTML DOM tree to find where markup is being rendered from within your application. HEEx supports annotating rendered HTML with HTML comments that give you the file/line of a HEEx function component. `:phoenix_live_reload` will look for the `ELIXIR_EDITOR_URL` environment export to launch a configured URL of your choice to open your code editor to the file-line of the HTML annotation. For example, the following export on your system would open vscode at the correct file/line:
+Many times it's useful to inspect the HTML DOM tree to find where markup is being rendered from within your application. HEEx supports annotating rendered HTML with HTML comments that give you the file/line of a HEEx function component. `:phoenix_live_reload` will look for the `PLUG_EDITOR` environment export to launch a configured URL of your choice to open your code editor to the file-line of the HTML annotation. For example, the following export on your system would open vscode at the correct file/line:
 
 ```
-export ELIXIR_EDITOR_URL="vscode://file/__FILE__:__LINE__"
+export PLUG_EDITOR="vscode://file/__FILE__:__LINE__"
 ```
 
 The `vscode://` protocol URL will open vscode with placeholders of `__FILE__:__LINE__` substited at runtime. Check your editor's documentation on protocol URL support. To open your configured editor URL when an element is clicked, say with alt-click, you can wire up an event listener within your `"phx:live_reload:connected"` callback and make use of the reloader's `openEditor` function, passing the event target as the DOM node to reference for HEEx file:line annotation information. For example:
@@ -61,7 +61,7 @@ The `vscode://` protocol URL will open vscode with placeholders of `__FILE__:__L
 window.addEventListener("phx:live_reload:connected", ({detail: reloader}) => {
   // enable server log streaming to client.
   reloader.enableServerLogs() // disable with reloader.disableServerLogs()
-  // open configured ELIXIR_EDITOR_URL at file:line of the alt-clicked element's HEEx component
+  // open configured PLUG_EDITOR at file:line of the alt-clicked element's HEEx component
   window.addEventListener("click", e => {
     if(!e.altKey){ return }
     e.preventDefault()

lib/phoenix_live_reload/channel.ex

@@ -113,7 +113,7 @@ defmodule Phoenix.LiveReloader.Channel do
   end
 
   defp join_info do
-    if url = System.get_env("ELIXIR_EDITOR_URL") do
+    if url = System.get_env("PLUG_EDITOR") do
       %{editor_url: url, relative_path: File.cwd!()}
     else
       %{}

lib/phoenix_live_reload/live_reloader.ex

@@ -75,11 +75,6 @@ defmodule Phoenix.LiveReloader do
       *Note*: your appplication javascript bundle will need to enable logs.
       See the README for more information.
 
-    * `:elixir_editor_url` - The protocol URL of your elixir editor for opening HEEx
-      files from annotated file:line comments. Defaults to `nil`.
-      *Note*: your appplication javascript bundle will need to wire up invocation.
-      See the README for more information.
-
   In an umbrella app, if you want to enable live reloading based on code
   changes in sibling applications, set the `reloadable_apps` option on your
   endpoint to ensure the code will be recompiled, then add the dirs to

priv/static/phoenix_live_reload.js

@@ -89,7 +89,7 @@ class LiveReloader {
 
   openEditor(targetNode){
     if(!this.editorURL){
-      return console.error("phoenix_live_reload cannot openEditor without configured ELIXIR_EDITOR_URL")
+      return console.error("phoenix_live_reload cannot openEditor without configured PLUG_EDITOR")
     }
 
     let fileLine = this.closestDebugFileLine(targetNode)

test/channel_test.exs

@@ -109,7 +109,7 @@ defmodule Phoenix.LiveReloader.ChannelTest do
 
   @endpoint MyApp.LogEndpoint
   test "sends logs for web console only when enabled" do
-    System.delete_env("ELIXIR_EDITOR_URL")
+    System.delete_env("PLUG_EDITOR")
     update_live_reload_env(@endpoint, fn conf ->
       Keyword.drop(conf, [:web_console_logger])
     end)
@@ -137,14 +137,14 @@ defmodule Phoenix.LiveReloader.ChannelTest do
   end
 
   test "sends editor_url and relative_path only when configurd" do
-    System.delete_env("ELIXIR_EDITOR_URL")
+    System.delete_env("PLUG_EDITOR")
 
     {:ok, info, _socket} =
       LiveReloader.Socket |> socket() |> subscribe_and_join(Channel, "phoenix:live_reload", %{})
 
     assert info == %{}
 
-    System.put_env("ELIXIR_EDITOR_URL", "vscode://file/__FILE__:__LINE__")
+    System.put_env("PLUG_EDITOR", "vscode://file/__FILE__:__LINE__")
 
     {:ok, info, _socket} =
       LiveReloader.Socket |> socket() |> subscribe_and_join(Channel, "phoenix:live_reload", %{})