Fix missing badge for Turbo Drive page loads

CHANGELOG.md

@@ -10,6 +10,8 @@
 - [FEATURE] Show record type and count in SQL query UI. [#638](https://github.com/MiniProfiler/rack-mini-profiler/pull/638)
 - [FEATURE] Show Active Record QueryCache hits in UI. [#640](https://github.com/MiniProfiler/rack-mini-profiler/pull/640)
 - [FIX] max_traces_to_show had chance to break the profiler frontend [#297](https://github.com/MiniProfiler/rack-mini-profiler/issues/297)
+- [FIX] missing badge for Turbo Drive page loads. [#631](https://github.com/MiniProfiler/rack-mini-profiler/pull/631)
+
 
 ## 3.3.1 - 2024-02-15
 - [FEATURE] Support dynamic `config.content_security_policy_nonce` [#609](https://github.com/MiniProfiler/rack-mini-profiler/pull/609)

lib/html/includes.js

@@ -11,6 +11,8 @@ var _MiniProfiler = (function() {
     // so we never pull down a profiler twice
     ajaxStartTime,
     totalsControl,
+    lastTurboRequestUrl,
+    lastTurboProfilingResult,
     reqs = 0,
     expandedResults = false,
     totalTime = 0,
@@ -153,6 +155,8 @@ var _MiniProfiler = (function() {
               fetchedIds.push(id);
 
               if (json != "hidden" && MiniProfiler.templates) {
+                if (options.hotwireTurboDriveSupport) lastTurboProfilingResult = json;
+
                 buttonShow(json);
               }
             }
@@ -172,6 +176,50 @@ var _MiniProfiler = (function() {
     }
   };
 
+  var fetchResultsFromAsyncResponse = function fetchResultsFromAsyncResponse(response) {
+    try {
+      // look for x-mini-profile-ids
+      var entries = response.headers.entries();
+      var _iteratorNormalCompletion = true;
+      var _didIteratorError = false;
+      var _iteratorError = undefined;
+
+      try {
+        for (
+          var _iterator = entries[Symbol.iterator](), _step;
+          !(_iteratorNormalCompletion = (_step = _iterator.next())
+            .done);
+          _iteratorNormalCompletion = true
+        ) {
+          var pair = _step.value;
+
+          if (
+            pair[0] &&
+            pair[0].toLowerCase() == "x-miniprofiler-ids"
+          ) {
+            var ids = pair[1].split(",");
+            fetchResults(ids);
+          }
+        }
+      } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion && _iterator.return != null) {
+            _iterator.return();
+          }
+        } finally {
+          if (_didIteratorError) {
+            throw _iteratorError;
+          }
+        }
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
   var toQueryString = function toQueryString(data, parentKey) {
     var result = [];
     for (var key in data) {
@@ -496,10 +544,30 @@ var _MiniProfiler = (function() {
     }, 3000);
   };
 
+  var onTurboBeforeFetchResponse = function onTurboBeforeFetchResponse(e) {
+    lastTurboRequestUrl = e.detail.fetchResponse.response.url;
+
+    var response = e.detail.fetchResponse.response;
+    fetchResultsFromAsyncResponse(response);
+  }
+
   var onTurboBeforeVisit = function onTurboBeforeVisit(e) {
     if(!e.defaultPrevented) {
       window.MiniProfilerContainer = document.querySelector('body > .profiler-results')
       window.MiniProfiler.pageTransition()
+
+      var visitingUrl = e.detail.url
+
+      // To preserve the last prefetched profiling result so badge doesn't disappear when Turbo replaces page HTML
+      if (
+        visitingUrl === lastTurboRequestUrl &&
+        visitingUrl !== Turbo.session.view.lastRenderedLocation.href &&
+        lastTurboProfilingResult
+      ) {
+        buttonShow(lastTurboProfilingResult);
+        lastTurboProfilingResult = null;
+        lastTurboRequestUrl = null;
+      }
     }
   }
 
@@ -670,6 +738,7 @@ var _MiniProfiler = (function() {
     if (options.hotwireTurboDriveSupport) {
       document.addEventListener("turbo:before-visit", onTurboBeforeVisit)
       document.addEventListener("turbo:load", onTurboLoad)
+      document.addEventListener("turbo:before-fetch-response", onTurboBeforeFetchResponse);
     }
   };
 
@@ -685,6 +754,7 @@ var _MiniProfiler = (function() {
     );
     document.removeEventListener("turbo:before-visit", onTurboBeforeVisit);
     document.removeEventListener("turbo:load", onTurboLoad);
+    document.removeEventListener("turbo:before-fetch-response", onTurboBeforeFetchResponse);
   };
 
   var initFullView = function initFullView() {
@@ -963,48 +1033,9 @@ var _MiniProfiler = (function() {
           var originalFetchRun = __originalFetch(input, init);
 
           originalFetchRun.then(function(response) {
-            try {
-              // look for x-mini-profile-ids
-              var entries = response.headers.entries();
-              var _iteratorNormalCompletion = true;
-              var _didIteratorError = false;
-              var _iteratorError = undefined;
-
-              try {
-                for (
-                  var _iterator = entries[Symbol.iterator](), _step;
-                  !(_iteratorNormalCompletion = (_step = _iterator.next())
-                    .done);
-                  _iteratorNormalCompletion = true
-                ) {
-                  var pair = _step.value;
-
-                  if (
-                    pair[0] &&
-                    pair[0].toLowerCase() == "x-miniprofiler-ids"
-                  ) {
-                    var ids = pair[1].split(",");
-                    fetchResults(ids);
-                  }
-                }
-              } catch (err) {
-                _didIteratorError = true;
-                _iteratorError = err;
-              } finally {
-                try {
-                  if (!_iteratorNormalCompletion && _iterator.return != null) {
-                    _iterator.return();
-                  }
-                } finally {
-                  if (_didIteratorError) {
-                    throw _iteratorError;
-                  }
-                }
-              }
-            } catch (e) {
-              console.error(e);
-            }
+            fetchResultsFromAsyncResponse(response)
           });
+
           return originalFetchRun;
         };
       }