Refactor based on feedback

Author: chrismccord

README.md

@@ -37,10 +37,10 @@ config :my_app, MyAppWeb.Endpoint,
   ]
 ```
 
-Next, you'll need to listen for the `"phx:live_reload:loaded"` event and enable client logging by calling the reloader's `enableServerLogs()` function, for example:
+Next, you'll need to listen for the `"phx:live_reload:connected"` event and enable client logging by calling the reloader's `enableServerLogs()` function, for example:
 
 ```javascript
-window.addEventListener("phx:live_reload:loaded", ({detail: {reloader}}) => {
+window.addEventListener("phx:live_reload:connected", ({detail: reloader}) => {
   // enable server log streaming to client.
   // disable with reloader.disableServerLogs()
   reloader.enableServerLogs()
@@ -61,10 +61,10 @@ config :my_app, MyAppWeb.Endpoint,
   ]
 ```
 
-We passed `vscode://` protocol URL to open vscode with placeholders of `__FILE__:__LINE__`, which will be 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:loaded"` 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:
+We passed `vscode://` protocol URL to open vscode with placeholders of `__FILE__:__LINE__`, which will be 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:
 
 ```javascript
-window.addEventListener("phx:live_reload:loaded", ({detail: {reloader}}) => {
+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

priv/static/phoenix_live_reload.js

@@ -49,20 +49,23 @@ let reloadStrategies = {
 
 class LiveReloader {
   constructor(socket){
+    this.socket = socket
     this.logsEnabled = false
     this.enabledOnce = false
     this.editorURL = null
     this.relativePath = null
   }
   enable(){
-    if(!this.enabledOnce){
-      if(parent.document.readyState === "loaded"){
-        this.dispatchReady()
+    this.socket.onOpen(() => {
+      if(this.enabledOnce){ return }
+      this.enabledOnce = true
+      if(["complete", "loaded", "interactive"].indexOf(parent.document.readyState) >= 0){
+        this.dispatchConnected()
       } else {
-        parent.addEventListener("load", () => this.dispatchReady())
+        parent.addEventListener("load", () => this.dispatchConnected())
       }
-    }
-    this.enabledOnce = true
+    })
+
     this.channel = socket.channel("phoenix:live_reload", {})
     this.channel.on("assets_change", msg => {
       let reloadStrategy = reloadStrategies[msg.asset_type] || reloadStrategies.page
@@ -73,7 +76,7 @@ class LiveReloader {
       this.editorURL = editor_url
       this.relativePath = relative_path
     })
-    socket.connect()
+    this.socket.connect()
   }
 
   disable(){
@@ -96,8 +99,8 @@ class LiveReloader {
 
   // private
 
-  dispatchReady(){
-    parent.dispatchEvent(new CustomEvent("phx:live_reload:loaded", {detail: {reloader: this}}))
+  dispatchConnected(){
+    parent.dispatchEvent(new CustomEvent("phx:live_reload:connected", {detail: this}))
   }
 
   log(level, str){