@buoy-gg/react-query 1.7.2

package/lib/commonjs/react-query/components/query-browser/index.js

@@ -0,0 +1,170 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ActionButton", {
+  enumerable: true,
+  get: function () {
+    return _ActionButton.default;
+  }
+});
+Object.defineProperty(exports, "CheckCircle", {
+  enumerable: true,
+  get: function () {
+    return _svgs.CheckCircle;
+  }
+});
+Object.defineProperty(exports, "ClearCacheButton", {
+  enumerable: true,
+  get: function () {
+    return _ClearCacheButton.default;
+  }
+});
+Object.defineProperty(exports, "Explorer", {
+  enumerable: true,
+  get: function () {
+    return _Explorer.default;
+  }
+});
+Object.defineProperty(exports, "LoadingCircle", {
+  enumerable: true,
+  get: function () {
+    return _svgs.LoadingCircle;
+  }
+});
+Object.defineProperty(exports, "MutationButton", {
+  enumerable: true,
+  get: function () {
+    return _MutationButton.default;
+  }
+});
+Object.defineProperty(exports, "MutationDetails", {
+  enumerable: true,
+  get: function () {
+    return _MutationDetails.default;
+  }
+});
+Object.defineProperty(exports, "MutationDetailsChips", {
+  enumerable: true,
+  get: function () {
+    return _MutationDetailsChips.default;
+  }
+});
+Object.defineProperty(exports, "MutationInformation", {
+  enumerable: true,
+  get: function () {
+    return _MutationInformation.default;
+  }
+});
+Object.defineProperty(exports, "MutationStatusCount", {
+  enumerable: true,
+  get: function () {
+    return _MutationStatusCount.default;
+  }
+});
+Object.defineProperty(exports, "MutationsList", {
+  enumerable: true,
+  get: function () {
+    return _MutationsList.default;
+  }
+});
+Object.defineProperty(exports, "NetworkToggleButton", {
+  enumerable: true,
+  get: function () {
+    return _NetworkToggleButton.default;
+  }
+});
+Object.defineProperty(exports, "PauseCircle", {
+  enumerable: true,
+  get: function () {
+    return _svgs.PauseCircle;
+  }
+});
+Object.defineProperty(exports, "QueryActions", {
+  enumerable: true,
+  get: function () {
+    return _QueryActions.default;
+  }
+});
+Object.defineProperty(exports, "QueryBrowser", {
+  enumerable: true,
+  get: function () {
+    return _QueryBrowser.default;
+  }
+});
+Object.defineProperty(exports, "QueryDetails", {
+  enumerable: true,
+  get: function () {
+    return _QueryDetails.default;
+  }
+});
+Object.defineProperty(exports, "QueryDetailsChip", {
+  enumerable: true,
+  get: function () {
+    return _QueryDetailsChip.default;
+  }
+});
+Object.defineProperty(exports, "QueryInformation", {
+  enumerable: true,
+  get: function () {
+    return _QueryInformation.default;
+  }
+});
+Object.defineProperty(exports, "QueryRow", {
+  enumerable: true,
+  get: function () {
+    return _QueryRow.default;
+  }
+});
+Object.defineProperty(exports, "QueryStatus", {
+  enumerable: true,
+  get: function () {
+    return _QueryStatus.default;
+  }
+});
+Object.defineProperty(exports, "QueryStatusCount", {
+  enumerable: true,
+  get: function () {
+    return _QueryStatusCount.default;
+  }
+});
+Object.defineProperty(exports, "StorageStatusCount", {
+  enumerable: true,
+  get: function () {
+    return _StorageStatusCount.default;
+  }
+});
+Object.defineProperty(exports, "TanstackLogo", {
+  enumerable: true,
+  get: function () {
+    return _svgs.TanstackLogo;
+  }
+});
+Object.defineProperty(exports, "XCircle", {
+  enumerable: true,
+  get: function () {
+    return _svgs.XCircle;
+  }
+});
+var _Explorer = _interopRequireDefault(require("./Explorer"));
+var _QueryBrowser = _interopRequireDefault(require("./QueryBrowser"));
+var _QueryDetails = _interopRequireDefault(require("./QueryDetails"));
+var _QueryInformation = _interopRequireDefault(require("./QueryInformation"));
+var _QueryActions = _interopRequireDefault(require("./QueryActions"));
+var _QueryRow = _interopRequireDefault(require("./QueryRow"));
+var _QueryStatus = _interopRequireDefault(require("./QueryStatus"));
+var _QueryStatusCount = _interopRequireDefault(require("./QueryStatusCount"));
+var _QueryDetailsChip = _interopRequireDefault(require("./QueryDetailsChip"));
+var _MutationsList = _interopRequireDefault(require("./MutationsList"));
+var _MutationDetails = _interopRequireDefault(require("./MutationDetails"));
+var _MutationInformation = _interopRequireDefault(require("./MutationInformation"));
+var _MutationButton = _interopRequireDefault(require("./MutationButton"));
+var _MutationStatusCount = _interopRequireDefault(require("./MutationStatusCount"));
+var _MutationDetailsChips = _interopRequireDefault(require("./MutationDetailsChips"));
+var _ActionButton = _interopRequireDefault(require("./ActionButton"));
+var _ClearCacheButton = _interopRequireDefault(require("./ClearCacheButton"));
+var _NetworkToggleButton = _interopRequireDefault(require("./NetworkToggleButton"));
+var _StorageStatusCount = _interopRequireDefault(require("./StorageStatusCount"));
+var _svgs = require("./svgs");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/commonjs/react-query/components/query-browser/svgs.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckCircle = CheckCircle;
+exports.LoadingCircle = LoadingCircle;
+exports.PauseCircle = PauseCircle;
+exports.TanstackLogo = TanstackLogo;
+exports.XCircle = XCircle;
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+/** React Query brand mark used across the dev tools UI. */
+function TanstackLogo({
+  size = 24
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ReactQueryIcon, {
+    size: size,
+    colorPreset: "red",
+    variant: "circuit"
+  });
+}
+
+/** Status icon representing successful requests. */
+function CheckCircle({
+  size = 14,
+  color = _sharedUi.buoyColors.success,
+  strokeWidth = 2
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CheckCircle, {
+    size: size,
+    color: color,
+    strokeWidth: strokeWidth
+  });
+}
+
+/** Status icon representing in-flight queries or mutations. */
+function LoadingCircle({
+  size = 14,
+  color = _sharedUi.buoyColors.warning,
+  strokeWidth = 2
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Activity, {
+    size: size,
+    color: color,
+    strokeWidth: strokeWidth
+  });
+}
+
+/** Status icon representing paused queries. */
+function PauseCircle({
+  size = 14,
+  color = _sharedUi.buoyColors.textMuted,
+  strokeWidth = 2
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Pause, {
+    size: size,
+    color: color,
+    strokeWidth: strokeWidth
+  });
+}
+
+/** Status icon representing errored requests. */
+function XCircle({
+  size = 14,
+  color = _sharedUi.buoyColors.error,
+  strokeWidth = 2
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.XCircle, {
+    size: size,
+    color: color,
+    strokeWidth: strokeWidth
+  });
+}

package/lib/commonjs/react-query/hooks/index.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useActionButtons", {
+  enumerable: true,
+  get: function () {
+    return _useActionButtons.useActionButtons;
+  }
+});
+Object.defineProperty(exports, "useAllMutations", {
+  enumerable: true,
+  get: function () {
+    return _useAllMutations.default;
+  }
+});
+Object.defineProperty(exports, "useAllQueries", {
+  enumerable: true,
+  get: function () {
+    return _useAllQueries.default;
+  }
+});
+Object.defineProperty(exports, "useGetMutationById", {
+  enumerable: true,
+  get: function () {
+    return _useSelectedMutation.useGetMutationById;
+  }
+});
+Object.defineProperty(exports, "useGetQueryByQueryKey", {
+  enumerable: true,
+  get: function () {
+    return _useSelectedQuery.useGetQueryByQueryKey;
+  }
+});
+Object.defineProperty(exports, "useGetQueryByQueryKeyWithVersion", {
+  enumerable: true,
+  get: function () {
+    return _useSelectedQuery.useGetQueryByQueryKeyWithVersion;
+  }
+});
+Object.defineProperty(exports, "useModalManager", {
+  enumerable: true,
+  get: function () {
+    return _useModalManager.useModalManager;
+  }
+});
+Object.defineProperty(exports, "useModalPersistence", {
+  enumerable: true,
+  get: function () {
+    return _useModalPersistence.useModalPersistence;
+  }
+});
+Object.defineProperty(exports, "useMutationActionButtons", {
+  enumerable: true,
+  get: function () {
+    return _useMutationActionButtons.useMutationActionButtons;
+  }
+});
+Object.defineProperty(exports, "useQueryStatusCounts", {
+  enumerable: true,
+  get: function () {
+    return _useQueryStatusCounts.default;
+  }
+});
+Object.defineProperty(exports, "useReactQueryState", {
+  enumerable: true,
+  get: function () {
+    return _useReactQueryState.useReactQueryState;
+  }
+});
+Object.defineProperty(exports, "useStorageQueryCounts", {
+  enumerable: true,
+  get: function () {
+    return _useStorageQueryCounts.useStorageQueryCounts;
+  }
+});
+Object.defineProperty(exports, "useWifiState", {
+  enumerable: true,
+  get: function () {
+    return _useWifiState.useWifiState;
+  }
+});
+var _useAllQueries = _interopRequireDefault(require("./useAllQueries"));
+var _useAllMutations = _interopRequireDefault(require("./useAllMutations"));
+var _useSelectedQuery = require("./useSelectedQuery");
+var _useSelectedMutation = require("./useSelectedMutation");
+var _useQueryStatusCounts = _interopRequireDefault(require("./useQueryStatusCounts"));
+var _useStorageQueryCounts = require("./useStorageQueryCounts");
+var _useReactQueryState = require("./useReactQueryState");
+var _useActionButtons = require("./useActionButtons");
+var _useMutationActionButtons = require("./useMutationActionButtons");
+var _useModalManager = require("./useModalManager");
+var _useModalPersistence = require("./useModalPersistence");
+var _useWifiState = require("./useWifiState");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/commonjs/react-query/hooks/useActionButtons.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useActionButtons = useActionButtons;
+var _react = require("react");
+var _triggerLoading = _interopRequireDefault(require("../utils/actions/triggerLoading"));
+var _refetch = _interopRequireDefault(require("../utils/actions/refetch"));
+var _triggerError = _interopRequireDefault(require("../utils/actions/triggerError"));
+var _getQueryStatusLabel = require("../utils/getQueryStatusLabel");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Derives the default action button configuration for an inspected query. Encapsulates business
+ * rules around when to show refetch, loading, or error simulation actions.
+ *
+ * @param selectedQuery - The query to derive actions for
+ * @param queryClient - The query client for executing actions
+ * @param queryVersion - Optional version number that increments on query state changes.
+ *                       React Query mutates Query objects in place, so this version ensures
+ *                       the useMemo recomputes when state changes.
+ */
+function useActionButtons(selectedQuery, queryClient, queryVersion) {
+  const actionButtons = (0, _react.useMemo)(() => {
+    const queryStatus = selectedQuery.state.status;
+    const isFetching = (0, _getQueryStatusLabel.getQueryStatusLabel)(selectedQuery) === "fetching";
+    const buttons = [{
+      label: "Refetch",
+      bgColorClass: "btnRefetch",
+      textColorClass: "btnRefetch",
+      disabled: isFetching,
+      onPress: () => (0, _refetch.default)({
+        query: selectedQuery
+      })
+    }, {
+      label: selectedQuery.state.fetchStatus === "fetching" ? "Restore" : "Loading",
+      bgColorClass: "btnTriggerLoading",
+      textColorClass: "btnTriggerLoading",
+      disabled: false,
+      onPress: () => (0, _triggerLoading.default)({
+        query: selectedQuery
+      })
+    }, {
+      label: queryStatus === "error" ? "Restore" : "Error",
+      bgColorClass: "btnTriggerLoadiError",
+      textColorClass: "btnTriggerLoadiError",
+      disabled: queryStatus === "pending",
+      onPress: () => (0, _triggerError.default)({
+        query: selectedQuery,
+        queryClient
+      })
+    }];
+    return buttons;
+    // queryVersion is the key dependency that ensures this recomputes when query state changes.
+    // React Query mutates Query objects in place, so comparing selectedQuery.state.* values
+    // doesn't work reliably (the "previous" and "current" values read from the same mutated object).
+  }, [selectedQuery, queryClient, queryVersion]);
+  return actionButtons;
+}

package/lib/commonjs/react-query/hooks/useAllMutations.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactQuery = require("@tanstack/react-query");
+/**
+ * Tracks all active React Query mutations with lightweight change detection. Debounces cache
+ * updates so large mutation batches do not thrash the UI thread on mobile.
+ */
+function useAllMutations() {
+  const queryClient = (0, _reactQuery.useQueryClient)();
+  const [mutations, setMutations] = (0, _react.useState)([]);
+  const mutationsSnapshotRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    const updateMutations = () => {
+      const newMutations = queryClient.getMutationCache().getAll();
+      const newStates = newMutations.map(m => m.state);
+      const snapshot = JSON.stringify(newStates);
+      if (mutationsSnapshotRef.current !== snapshot) {
+        mutationsSnapshotRef.current = snapshot;
+        setTimeout(() => setMutations(newMutations), 0);
+      }
+    };
+    setTimeout(updateMutations, 0);
+    const unsubscribe = queryClient.getMutationCache().subscribe(updateMutations);
+    return () => unsubscribe();
+  }, [queryClient]);
+  return {
+    mutations
+  };
+}
+var _default = exports.default = useAllMutations;

package/lib/commonjs/react-query/hooks/useAllQueries.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactQuery = require("@tanstack/react-query");
+var _storageQueryUtils = require("../utils/storageQueryUtils");
+// React Query DevTools sorting logic - moved outside component for performance
+
+const getStatusRank = q => q.state.fetchStatus !== "idle" ? 0 : !q.getObserversCount() ? 3 : q.isStale() ? 2 : 1;
+const dateSort = (a, b) => a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1;
+const statusAndDateSort = (a, b) => {
+  if (getStatusRank(a) === getStatusRank(b)) {
+    return dateSort(a, b);
+  }
+  return getStatusRank(a) > getStatusRank(b) ? 1 : -1;
+};
+
+/**
+ * Optimized hook to track all queries with live updates
+ * Performance optimizations for mobile:
+ * - Filters event types to only relevant ones
+ * - Uses lightweight comparison instead of deep equality
+ * - Batches updates to reduce re-renders
+ * - Memoizes sorted results
+ */
+function useAllQueries() {
+  const queryClient = (0, _reactQuery.useQueryClient)();
+  const [queries, setQueries] = (0, _react.useState)(() => {
+    // Initialize with current queries to avoid flash
+    const initial = queryClient.getQueryCache().getAll().filter(query => !(0, _storageQueryUtils.isStorageQuery)(query.queryKey)).sort(statusAndDateSort);
+    return initial;
+  });
+
+  // Track query states using a Map for O(1) lookups
+  const queryStatesRef = (0, _react.useRef)(new Map());
+  const updateTimerRef = (0, _react.useRef)(undefined);
+
+  // Memoized callback to check if queries need update
+  const hasQueriesChanged = (0, _react.useCallback)(newQueries => {
+    const statesMap = queryStatesRef.current;
+
+    // Quick length check first
+    if (newQueries.length !== statesMap.size) {
+      return true;
+    }
+
+    // Check if any query state has changed
+    for (const query of newQueries) {
+      const prevState = statesMap.get(query.queryHash);
+      if (!prevState) return true;
+
+      // Compare only relevant state properties for rendering
+      if (prevState.dataUpdatedAt !== query.state.dataUpdatedAt || prevState.errorUpdatedAt !== query.state.errorUpdatedAt || prevState.fetchStatus !== query.state.fetchStatus || prevState.status !== query.state.status || prevState.isInvalidated !== query.state.isInvalidated) {
+        return true;
+      }
+    }
+    return false;
+  }, []);
+
+  // Memoized update function
+  const updateQueries = (0, _react.useCallback)(() => {
+    const allQueries = queryClient.getQueryCache().getAll();
+
+    // Filter out storage queries
+    const nonStorageQueries = allQueries.filter(query => !(0, _storageQueryUtils.isStorageQuery)(query.queryKey));
+
+    // Check if update is needed
+    if (hasQueriesChanged(nonStorageQueries)) {
+      // Update states map
+      const newStatesMap = new Map();
+      nonStorageQueries.forEach(q => {
+        newStatesMap.set(q.queryHash, q.state);
+      });
+      queryStatesRef.current = newStatesMap;
+
+      // Sort and update
+      const sortedQueries = [...nonStorageQueries].sort(statusAndDateSort);
+      setQueries(sortedQueries);
+    }
+  }, [queryClient, hasQueriesChanged]);
+  (0, _react.useEffect)(() => {
+    // Initial update
+    updateQueries();
+
+    // Subscribe with event filtering for performance
+    const unsubscribe = queryClient.getQueryCache().subscribe(event => {
+      // Only process events that affect query list
+      if (event.type === "added" || event.type === "removed" || event.type === "updated") {
+        // Skip storage queries
+        if ("query" in event && event.query && (0, _storageQueryUtils.isStorageQuery)(event.query.queryKey)) {
+          return;
+        }
+
+        // Debounce updates to batch rapid changes
+        if (updateTimerRef.current) {
+          clearTimeout(updateTimerRef.current);
+        }
+        updateTimerRef.current = setTimeout(() => {
+          updateQueries();
+        }, 10); // Small delay to batch updates
+      }
+    });
+    return () => {
+      unsubscribe();
+      if (updateTimerRef.current) {
+        clearTimeout(updateTimerRef.current);
+      }
+    };
+  }, [queryClient, updateQueries]);
+
+  // Memoize the final sorted array to prevent unnecessary re-renders
+  return (0, _react.useMemo)(() => queries, [queries]);
+}
+var _default = exports.default = useAllQueries;