Update comments to explain how to handle asset version change warnings (#4098)

* Update comments to explain how to handle asset version change warnings

* Switch to spaces

* Apply suggestions from code review

---------

Co-authored-by: Steffen Deusch <[email protected]>

Author: lardcanoe

lib/phoenix_live_view.ex

@@ -1271,6 +1271,8 @@ defmodule Phoenix.LiveView do
   version of the marked static files. It works by comparing the static paths
   sent by the client with the one on the server.
 
+  Browser console logs will have messages starting with "LiveView asset version mismatch."
+
   **Note:** this functionality requires Phoenix v1.5.2 or later.
 
   To use this functionality, the first step is to annotate which static files
@@ -1303,8 +1305,17 @@ defmodule Phoenix.LiveView do
   </div>
   ```
 
+  For larger projects, you can extract this into [a hook](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#on_mount/1):
+
+      # MyAppWeb.CheckStaticChanged
+      def on_mount(:default, _params, _session, socket) do
+        {:cont, assign(socket, static_changed?: static_changed?(socket))}
+      end
+
+  And then add it to the existing `live_view` macro in your `my_app_web.ex` file or add it as part
+  of your `live_session` hooks.
   If you prefer, you can also send a JavaScript script that immediately
-  reloads the page.
+  reloads the page, but this will cause the client-side to lose all work in progress.
 
   **Note:** only set `phx-track-static` on your own assets. For example, do
   not set it in external JavaScript files:

priv/static/phoenix_live_view.js

@@ -4329,6 +4329,11 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         });
       }
       if (liveview_version !== this.liveSocket.version()) {
+        // Either the user has a mismatched version - for example using LiveView from npm instead of
+        // the bundled version from the hex package - or, more likely, the assets are stale because of a
+        // deployment. In that case, see
+        // https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#static_changed?/1
+        // for tips to address this.
         console.warn(
           `LiveView asset version mismatch. JavaScript version ${this.liveSocket.version()} vs. server ${liveview_version}. To avoid issues, please ensure that your assets use the same version as the server.`
         );