Extract FormatNumber Hook

assets/js/app.js

@@ -24,11 +24,13 @@ import { hooks as colocatedHooks } from "phoenix-colocated/music_library";
 import topbar from "../vendor/topbar";
 import { Hooks as FluxonHooks, DOM as FluxonDOM } from "fluxon";
 import BarcodeScannerHook from "./hooks/barcode-scanner";
+import FormatNumberHook from "./hooks/format-number";
 import confetti from "canvas-confetti";
 import { createLiveToastHook } from "live_toast";
 
 let Hooks = FluxonHooks;
 Hooks.BarcodeScanner = BarcodeScannerHook;
+Hooks.FormatNumber = FormatNumberHook;
 Hooks.LiveToast = createLiveToastHook();
 
 const csrfToken = document

assets/js/hooks/format-number.js

@@ -0,0 +1,8 @@
+export default {
+  mounted() {
+    this.el.innerText = parseInt(this.el.innerText).toLocaleString();
+  },
+  updated() {
+    this.el.innerText = parseInt(this.el.innerText).toLocaleString();
+  }
+}

lib/music_library_web/components/stats_components.ex

@@ -78,17 +78,7 @@ defmodule MusicLibraryWeb.StatsComponents do
         <dd :if={@tooltip} class="mt-1">
           <.tooltip>
             <:content>
-              <script :type={Phoenix.LiveView.ColocatedHook} name=".FormatNumber">
+              <span id={"#{@title}-counter-tooltip"} phx-hook="FormatNumber">{@tooltip}</span>
-                export default {
-                  mounted() {
-                    this.el.innerText = parseInt(this.el.innerText).toLocaleString();
-                  },
-                  updated() {
-                    this.el.innerText = parseInt(this.el.innerText).toLocaleString();
-                  }
-                }
-              </script>
-              <span id={"#{@title}-counter-tooltip"} phx-hook=".FormatNumber">{@tooltip}</span>
             </:content>
             <.link
               :if={@path}