@tanstack/react-query-devtools 5.0.0-alpha.25 → 5.0.0-alpha.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/lib/__tests__/devtools.test.d.ts +0 -1
- package/build/lib/__tests__/devtools.test.d.ts.map +1 -0
- package/build/lib/__tests__/utils.d.ts.map +1 -0
- package/build/lib/devtools.d.ts +8 -30
- package/build/lib/devtools.d.ts.map +1 -0
- package/build/lib/devtools.esm.js +47 -226
- package/build/lib/devtools.esm.js.map +1 -1
- package/build/lib/devtools.js +45 -244
- package/build/lib/devtools.js.map +1 -1
- package/build/lib/devtools.mjs +47 -225
- package/build/lib/devtools.mjs.map +1 -1
- package/build/lib/index.d.ts +0 -1
- package/build/lib/index.d.ts.map +1 -0
- package/build/lib/index.esm.js +8 -5
- package/build/lib/index.esm.js.map +1 -1
- package/build/lib/index.js +7 -5
- package/build/lib/index.js.map +1 -1
- package/build/lib/index.mjs +8 -5
- package/build/lib/index.mjs.map +1 -1
- package/build/lib/index.prod.d.ts +0 -1
- package/build/lib/index.prod.esm.js +7901 -1501
- package/build/lib/index.prod.esm.js.map +1 -1
- package/build/lib/index.prod.js +7909 -1528
- package/build/lib/index.prod.js.map +1 -1
- package/build/lib/index.prod.mjs +7922 -1489
- package/build/lib/index.prod.mjs.map +1 -1
- package/build/umd/index.development.js +7146 -2375
- package/build/umd/index.development.js.map +1 -1
- package/build/umd/index.production.js +1 -1
- package/build/umd/index.production.js.map +1 -1
- package/package.json +4 -5
- package/src/__tests__/devtools.test.tsx +1 -1135
- package/src/devtools.tsx +52 -306
- package/src/index.ts +6 -6
- package/build/lib/CachePanel/ActiveQuery.d.ts +0 -19
- package/build/lib/CachePanel/ActiveQuery.esm.js +0 -277
- package/build/lib/CachePanel/ActiveQuery.esm.js.map +0 -1
- package/build/lib/CachePanel/ActiveQuery.js +0 -281
- package/build/lib/CachePanel/ActiveQuery.js.map +0 -1
- package/build/lib/CachePanel/ActiveQuery.mjs +0 -261
- package/build/lib/CachePanel/ActiveQuery.mjs.map +0 -1
- package/build/lib/CachePanel/CachePanel.d.ts +0 -58
- package/build/lib/CachePanel/CachePanel.esm.js +0 -310
- package/build/lib/CachePanel/CachePanel.esm.js.map +0 -1
- package/build/lib/CachePanel/CachePanel.js +0 -315
- package/build/lib/CachePanel/CachePanel.js.map +0 -1
- package/build/lib/CachePanel/CachePanel.mjs +0 -310
- package/build/lib/CachePanel/CachePanel.mjs.map +0 -1
- package/build/lib/CachePanel/Header/QueryStatusCount.d.ts +0 -8
- package/build/lib/CachePanel/Header/QueryStatusCount.esm.js +0 -49
- package/build/lib/CachePanel/Header/QueryStatusCount.esm.js.map +0 -1
- package/build/lib/CachePanel/Header/QueryStatusCount.js +0 -53
- package/build/lib/CachePanel/Header/QueryStatusCount.js.map +0 -1
- package/build/lib/CachePanel/Header/QueryStatusCount.mjs +0 -49
- package/build/lib/CachePanel/Header/QueryStatusCount.mjs.map +0 -1
- package/build/lib/CachePanel/QueryRow.d.ts +0 -14
- package/build/lib/CachePanel/QueryRow.esm.js +0 -98
- package/build/lib/CachePanel/QueryRow.esm.js.map +0 -1
- package/build/lib/CachePanel/QueryRow.js +0 -102
- package/build/lib/CachePanel/QueryRow.js.map +0 -1
- package/build/lib/CachePanel/QueryRow.mjs +0 -82
- package/build/lib/CachePanel/QueryRow.mjs.map +0 -1
- package/build/lib/Explorer.d.ts +0 -51
- package/build/lib/Explorer.esm.js +0 -254
- package/build/lib/Explorer.esm.js.map +0 -1
- package/build/lib/Explorer.js +0 -288
- package/build/lib/Explorer.js.map +0 -1
- package/build/lib/Explorer.mjs +0 -254
- package/build/lib/Explorer.mjs.map +0 -1
- package/build/lib/Logo.d.ts +0 -2
- package/build/lib/Logo.esm.js +0 -32
- package/build/lib/Logo.esm.js.map +0 -1
- package/build/lib/Logo.js +0 -55
- package/build/lib/Logo.js.map +0 -1
- package/build/lib/Logo.mjs +0 -32
- package/build/lib/Logo.mjs.map +0 -1
- package/build/lib/__tests__/Explorer.test.d.ts +0 -2
- package/build/lib/_virtual/_rollupPluginBabelHelpers.esm.js +0 -17
- package/build/lib/_virtual/_rollupPluginBabelHelpers.esm.js.map +0 -1
- package/build/lib/_virtual/_rollupPluginBabelHelpers.js +0 -19
- package/build/lib/_virtual/_rollupPluginBabelHelpers.js.map +0 -1
- package/build/lib/_virtual/_rollupPluginBabelHelpers.mjs +0 -17
- package/build/lib/_virtual/_rollupPluginBabelHelpers.mjs.map +0 -1
- package/build/lib/noop.d.ts +0 -3
- package/build/lib/screenreader.d.ts +0 -4
- package/build/lib/screenreader.esm.js +0 -17
- package/build/lib/screenreader.esm.js.map +0 -1
- package/build/lib/screenreader.js +0 -40
- package/build/lib/screenreader.js.map +0 -1
- package/build/lib/screenreader.mjs +0 -17
- package/build/lib/screenreader.mjs.map +0 -1
- package/build/lib/styledComponents.d.ts +0 -9
- package/build/lib/styledComponents.esm.js +0 -103
- package/build/lib/styledComponents.esm.js.map +0 -1
- package/build/lib/styledComponents.js +0 -112
- package/build/lib/styledComponents.js.map +0 -1
- package/build/lib/styledComponents.mjs +0 -103
- package/build/lib/styledComponents.mjs.map +0 -1
- package/build/lib/theme.d.ts +0 -37
- package/build/lib/theme.esm.js +0 -33
- package/build/lib/theme.esm.js.map +0 -1
- package/build/lib/theme.js +0 -56
- package/build/lib/theme.js.map +0 -1
- package/build/lib/theme.mjs +0 -33
- package/build/lib/theme.mjs.map +0 -1
- package/build/lib/types.d.ts +0 -12
- package/build/lib/useLocalStorage.d.ts +0 -2
- package/build/lib/useLocalStorage.esm.js +0 -40
- package/build/lib/useLocalStorage.esm.js.map +0 -1
- package/build/lib/useLocalStorage.js +0 -63
- package/build/lib/useLocalStorage.js.map +0 -1
- package/build/lib/useLocalStorage.mjs +0 -40
- package/build/lib/useLocalStorage.mjs.map +0 -1
- package/build/lib/useMediaQuery.d.ts +0 -2
- package/build/lib/useMediaQuery.esm.js +0 -36
- package/build/lib/useMediaQuery.esm.js.map +0 -1
- package/build/lib/useMediaQuery.js +0 -59
- package/build/lib/useMediaQuery.js.map +0 -1
- package/build/lib/useMediaQuery.mjs +0 -36
- package/build/lib/useMediaQuery.mjs.map +0 -1
- package/build/lib/useSubscribeToQueryCache.d.ts +0 -4
- package/build/lib/useSubscribeToQueryCache.esm.js +0 -15
- package/build/lib/useSubscribeToQueryCache.esm.js.map +0 -1
- package/build/lib/useSubscribeToQueryCache.js +0 -19
- package/build/lib/useSubscribeToQueryCache.js.map +0 -1
- package/build/lib/useSubscribeToQueryCache.mjs +0 -15
- package/build/lib/useSubscribeToQueryCache.mjs.map +0 -1
- package/build/lib/utils.d.ts +0 -80
- package/build/lib/utils.esm.js +0 -184
- package/build/lib/utils.esm.js.map +0 -1
- package/build/lib/utils.js +0 -218
- package/build/lib/utils.js.map +0 -1
- package/build/lib/utils.mjs +0 -184
- package/build/lib/utils.mjs.map +0 -1
- package/src/CachePanel/ActiveQuery.tsx +0 -388
- package/src/CachePanel/CachePanel.tsx +0 -439
- package/src/CachePanel/Header/QueryStatusCount.tsx +0 -93
- package/src/CachePanel/QueryRow.tsx +0 -125
- package/src/Explorer.tsx +0 -385
- package/src/Logo.tsx +0 -32
- package/src/__tests__/Explorer.test.tsx +0 -150
- package/src/noop.ts +0 -7
- package/src/screenreader.tsx +0 -16
- package/src/styledComponents.ts +0 -126
- package/src/theme.tsx +0 -33
- package/src/types.ts +0 -12
- package/src/useLocalStorage.ts +0 -52
- package/src/useMediaQuery.ts +0 -34
- package/src/useSubscribeToQueryCache.ts +0 -26
- package/src/utils.ts +0 -319
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useMediaQuery.esm.js","sources":["../../src/useMediaQuery.ts"],"sourcesContent":["import * as React from 'react'\n\nexport default function useMediaQuery(query: string): boolean | undefined {\n // Keep track of the preference in state, start with the current match\n const [isMatch, setIsMatch] = React.useState(() => {\n if (typeof window !== 'undefined') {\n return window.matchMedia(query).matches\n }\n return\n })\n\n // Watch for changes\n React.useEffect(() => {\n if (typeof window !== 'undefined') {\n // Create a matcher\n const matcher = window.matchMedia(query)\n\n // Create our handler\n const onChange = ({ matches }: { matches: boolean }) =>\n setIsMatch(matches)\n\n // Listen for changes\n matcher.addListener(onChange)\n\n return () => {\n // Stop listening for changes\n matcher.removeListener(onChange)\n }\n }\n return\n }, [isMatch, query, setIsMatch])\n\n return isMatch\n}\n"],"names":["useMediaQuery","query","isMatch","setIsMatch","React","useState","window","matchMedia","matches","useEffect","matcher","onChange","addListener","removeListener"],"mappings":";;AAEe,SAASA,aAAa,CAACC,KAAa,EAAuB;AACxE;EACA,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGC,KAAK,CAACC,QAAQ,CAAC,MAAM;AACjD,IAAA,IAAI,OAAOC,MAAM,KAAK,WAAW,EAAE;AACjC,MAAA,OAAOA,MAAM,CAACC,UAAU,CAACN,KAAK,CAAC,CAACO,OAAO,CAAA;AACzC,KAAA;AACA,IAAA,OAAA;AACF,GAAC,CAAC,CAAA;;AAEF;EACAJ,KAAK,CAACK,SAAS,CAAC,MAAM;AACpB,IAAA,IAAI,OAAOH,MAAM,KAAK,WAAW,EAAE;AACjC;AACA,MAAA,MAAMI,OAAO,GAAGJ,MAAM,CAACC,UAAU,CAACN,KAAK,CAAC,CAAA;;AAExC;MACA,MAAMU,QAAQ,GAAG,CAAC;AAAEH,QAAAA,OAAAA;AAA8B,OAAC,KACjDL,UAAU,CAACK,OAAO,CAAC,CAAA;;AAErB;AACAE,MAAAA,OAAO,CAACE,WAAW,CAACD,QAAQ,CAAC,CAAA;AAE7B,MAAA,OAAO,MAAM;AACX;AACAD,QAAAA,OAAO,CAACG,cAAc,CAACF,QAAQ,CAAC,CAAA;OACjC,CAAA;AACH,KAAA;AACA,IAAA,OAAA;GACD,EAAE,CAACT,OAAO,EAAED,KAAK,EAAEE,UAAU,CAAC,CAAC,CAAA;AAEhC,EAAA,OAAOD,OAAO,CAAA;AAChB;;;;"}
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var React = require('react');
|
|
6
|
-
|
|
7
|
-
function _interopNamespaceDefault(e) {
|
|
8
|
-
var n = Object.create(null);
|
|
9
|
-
if (e) {
|
|
10
|
-
Object.keys(e).forEach(function (k) {
|
|
11
|
-
if (k !== 'default') {
|
|
12
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
13
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
14
|
-
enumerable: true,
|
|
15
|
-
get: function () { return e[k]; }
|
|
16
|
-
});
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
|
-
}
|
|
20
|
-
n.default = e;
|
|
21
|
-
return Object.freeze(n);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
25
|
-
|
|
26
|
-
function useMediaQuery(query) {
|
|
27
|
-
// Keep track of the preference in state, start with the current match
|
|
28
|
-
const [isMatch, setIsMatch] = React__namespace.useState(() => {
|
|
29
|
-
if (typeof window !== 'undefined') {
|
|
30
|
-
return window.matchMedia(query).matches;
|
|
31
|
-
}
|
|
32
|
-
return;
|
|
33
|
-
});
|
|
34
|
-
|
|
35
|
-
// Watch for changes
|
|
36
|
-
React__namespace.useEffect(() => {
|
|
37
|
-
if (typeof window !== 'undefined') {
|
|
38
|
-
// Create a matcher
|
|
39
|
-
const matcher = window.matchMedia(query);
|
|
40
|
-
|
|
41
|
-
// Create our handler
|
|
42
|
-
const onChange = ({
|
|
43
|
-
matches
|
|
44
|
-
}) => setIsMatch(matches);
|
|
45
|
-
|
|
46
|
-
// Listen for changes
|
|
47
|
-
matcher.addListener(onChange);
|
|
48
|
-
return () => {
|
|
49
|
-
// Stop listening for changes
|
|
50
|
-
matcher.removeListener(onChange);
|
|
51
|
-
};
|
|
52
|
-
}
|
|
53
|
-
return;
|
|
54
|
-
}, [isMatch, query, setIsMatch]);
|
|
55
|
-
return isMatch;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
exports.default = useMediaQuery;
|
|
59
|
-
//# sourceMappingURL=useMediaQuery.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useMediaQuery.js","sources":["../../src/useMediaQuery.ts"],"sourcesContent":["import * as React from 'react'\n\nexport default function useMediaQuery(query: string): boolean | undefined {\n // Keep track of the preference in state, start with the current match\n const [isMatch, setIsMatch] = React.useState(() => {\n if (typeof window !== 'undefined') {\n return window.matchMedia(query).matches\n }\n return\n })\n\n // Watch for changes\n React.useEffect(() => {\n if (typeof window !== 'undefined') {\n // Create a matcher\n const matcher = window.matchMedia(query)\n\n // Create our handler\n const onChange = ({ matches }: { matches: boolean }) =>\n setIsMatch(matches)\n\n // Listen for changes\n matcher.addListener(onChange)\n\n return () => {\n // Stop listening for changes\n matcher.removeListener(onChange)\n }\n }\n return\n }, [isMatch, query, setIsMatch])\n\n return isMatch\n}\n"],"names":["useMediaQuery","query","isMatch","setIsMatch","React","useState","window","matchMedia","matches","useEffect","matcher","onChange","addListener","removeListener"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAEe,SAASA,aAAa,CAACC,KAAa,EAAuB;AACxE;EACA,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGC,gBAAK,CAACC,QAAQ,CAAC,MAAM;AACjD,IAAA,IAAI,OAAOC,MAAM,KAAK,WAAW,EAAE;AACjC,MAAA,OAAOA,MAAM,CAACC,UAAU,CAACN,KAAK,CAAC,CAACO,OAAO,CAAA;AACzC,KAAA;AACA,IAAA,OAAA;AACF,GAAC,CAAC,CAAA;;AAEF;EACAJ,gBAAK,CAACK,SAAS,CAAC,MAAM;AACpB,IAAA,IAAI,OAAOH,MAAM,KAAK,WAAW,EAAE;AACjC;AACA,MAAA,MAAMI,OAAO,GAAGJ,MAAM,CAACC,UAAU,CAACN,KAAK,CAAC,CAAA;;AAExC;MACA,MAAMU,QAAQ,GAAG,CAAC;AAAEH,QAAAA,OAAAA;AAA8B,OAAC,KACjDL,UAAU,CAACK,OAAO,CAAC,CAAA;;AAErB;AACAE,MAAAA,OAAO,CAACE,WAAW,CAACD,QAAQ,CAAC,CAAA;AAE7B,MAAA,OAAO,MAAM;AACX;AACAD,QAAAA,OAAO,CAACG,cAAc,CAACF,QAAQ,CAAC,CAAA;OACjC,CAAA;AACH,KAAA;AACA,IAAA,OAAA;GACD,EAAE,CAACT,OAAO,EAAED,KAAK,EAAEE,UAAU,CAAC,CAAC,CAAA;AAEhC,EAAA,OAAOD,OAAO,CAAA;AAChB;;;;"}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
|
|
3
|
-
function useMediaQuery(query) {
|
|
4
|
-
// Keep track of the preference in state, start with the current match
|
|
5
|
-
const [isMatch, setIsMatch] = React.useState(() => {
|
|
6
|
-
if (typeof window !== 'undefined') {
|
|
7
|
-
return window.matchMedia(query).matches;
|
|
8
|
-
}
|
|
9
|
-
return;
|
|
10
|
-
});
|
|
11
|
-
|
|
12
|
-
// Watch for changes
|
|
13
|
-
React.useEffect(() => {
|
|
14
|
-
if (typeof window !== 'undefined') {
|
|
15
|
-
// Create a matcher
|
|
16
|
-
const matcher = window.matchMedia(query);
|
|
17
|
-
|
|
18
|
-
// Create our handler
|
|
19
|
-
const onChange = ({
|
|
20
|
-
matches
|
|
21
|
-
}) => setIsMatch(matches);
|
|
22
|
-
|
|
23
|
-
// Listen for changes
|
|
24
|
-
matcher.addListener(onChange);
|
|
25
|
-
return () => {
|
|
26
|
-
// Stop listening for changes
|
|
27
|
-
matcher.removeListener(onChange);
|
|
28
|
-
};
|
|
29
|
-
}
|
|
30
|
-
return;
|
|
31
|
-
}, [isMatch, query, setIsMatch]);
|
|
32
|
-
return isMatch;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
export { useMediaQuery as default };
|
|
36
|
-
//# sourceMappingURL=useMediaQuery.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useMediaQuery.mjs","sources":["../../src/useMediaQuery.ts"],"sourcesContent":["import * as React from 'react'\n\nexport default function useMediaQuery(query: string): boolean | undefined {\n // Keep track of the preference in state, start with the current match\n const [isMatch, setIsMatch] = React.useState(() => {\n if (typeof window !== 'undefined') {\n return window.matchMedia(query).matches\n }\n return\n })\n\n // Watch for changes\n React.useEffect(() => {\n if (typeof window !== 'undefined') {\n // Create a matcher\n const matcher = window.matchMedia(query)\n\n // Create our handler\n const onChange = ({ matches }: { matches: boolean }) =>\n setIsMatch(matches)\n\n // Listen for changes\n matcher.addListener(onChange)\n\n return () => {\n // Stop listening for changes\n matcher.removeListener(onChange)\n }\n }\n return\n }, [isMatch, query, setIsMatch])\n\n return isMatch\n}\n"],"names":["useMediaQuery","query","isMatch","setIsMatch","React","useState","window","matchMedia","matches","useEffect","matcher","onChange","addListener","removeListener"],"mappings":";;AAEe,SAASA,aAAa,CAACC,KAAa,EAAuB;AACxE;EACA,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGC,KAAK,CAACC,QAAQ,CAAC,MAAM;AACjD,IAAA,IAAI,OAAOC,MAAM,KAAK,WAAW,EAAE;AACjC,MAAA,OAAOA,MAAM,CAACC,UAAU,CAACN,KAAK,CAAC,CAACO,OAAO,CAAA;AACzC,KAAA;AACA,IAAA,OAAA;AACF,GAAC,CAAC,CAAA;;AAEF;EACAJ,KAAK,CAACK,SAAS,CAAC,MAAM;AACpB,IAAA,IAAI,OAAOH,MAAM,KAAK,WAAW,EAAE;AACjC;AACA,MAAA,MAAMI,OAAO,GAAGJ,MAAM,CAACC,UAAU,CAACN,KAAK,CAAC,CAAA;;AAExC;MACA,MAAMU,QAAQ,GAAG,CAAC;AAAEH,QAAAA,OAAAA;AAA8B,OAAC,KACjDL,UAAU,CAACK,OAAO,CAAC,CAAA;;AAErB;AACAE,MAAAA,OAAO,CAACE,WAAW,CAACD,QAAQ,CAAC,CAAA;AAE7B,MAAA,OAAO,MAAM;AACX;AACAD,QAAAA,OAAO,CAACG,cAAc,CAACF,QAAQ,CAAC,CAAA;OACjC,CAAA;AACH,KAAA;AACA,IAAA,OAAA;GACD,EAAE,CAACT,OAAO,EAAED,KAAK,EAAEE,UAAU,CAAC,CAAC,CAAA;AAEhC,EAAA,OAAOD,OAAO,CAAA;AAChB;;;;"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import React__default from 'react';
|
|
2
|
-
import { notifyManager } from '@tanstack/react-query';
|
|
3
|
-
|
|
4
|
-
const useSubscribeToQueryCache = (queryCache, getSnapshot, skip = false) => {
|
|
5
|
-
return React__default.useSyncExternalStore(React__default.useCallback(onStoreChange => {
|
|
6
|
-
if (!skip) return queryCache.subscribe(notifyManager.batchCalls(onStoreChange));
|
|
7
|
-
return () => {
|
|
8
|
-
return;
|
|
9
|
-
};
|
|
10
|
-
}, [queryCache, skip]), getSnapshot, getSnapshot);
|
|
11
|
-
};
|
|
12
|
-
var useSubscribeToQueryCache$1 = useSubscribeToQueryCache;
|
|
13
|
-
|
|
14
|
-
export { useSubscribeToQueryCache$1 as default };
|
|
15
|
-
//# sourceMappingURL=useSubscribeToQueryCache.esm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useSubscribeToQueryCache.esm.js","sources":["../../src/useSubscribeToQueryCache.ts"],"sourcesContent":["import React from 'react'\nimport type { QueryCache } from '@tanstack/react-query'\nimport { notifyManager } from '@tanstack/react-query'\n\nconst useSubscribeToQueryCache = <T>(\n queryCache: QueryCache,\n getSnapshot: () => T,\n skip: boolean = false,\n): T => {\n return React.useSyncExternalStore(\n React.useCallback(\n (onStoreChange) => {\n if (!skip)\n return queryCache.subscribe(notifyManager.batchCalls(onStoreChange))\n return () => {\n return\n }\n },\n [queryCache, skip],\n ),\n getSnapshot,\n getSnapshot,\n )\n}\n\nexport default useSubscribeToQueryCache\n"],"names":["useSubscribeToQueryCache","queryCache","getSnapshot","skip","React","useSyncExternalStore","useCallback","onStoreChange","subscribe","notifyManager","batchCalls"],"mappings":";;;AAIA,MAAMA,wBAAwB,GAAG,CAC/BC,UAAsB,EACtBC,WAAoB,EACpBC,IAAa,GAAG,KAAK,KACf;EACN,OAAOC,cAAK,CAACC,oBAAoB,CAC/BD,cAAK,CAACE,WAAW,CACdC,aAAa,IAAK;AACjB,IAAA,IAAI,CAACJ,IAAI,EACP,OAAOF,UAAU,CAACO,SAAS,CAACC,aAAa,CAACC,UAAU,CAACH,aAAa,CAAC,CAAC,CAAA;AACtE,IAAA,OAAO,MAAM;AACX,MAAA,OAAA;KACD,CAAA;GACF,EACD,CAACN,UAAU,EAAEE,IAAI,CAAC,CACnB,EACDD,WAAW,EACXA,WAAW,CACZ,CAAA;AACH,CAAC,CAAA;AAED,iCAAeF,wBAAwB;;;;"}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var React = require('react');
|
|
6
|
-
var reactQuery = require('@tanstack/react-query');
|
|
7
|
-
|
|
8
|
-
const useSubscribeToQueryCache = (queryCache, getSnapshot, skip = false) => {
|
|
9
|
-
return React.useSyncExternalStore(React.useCallback(onStoreChange => {
|
|
10
|
-
if (!skip) return queryCache.subscribe(reactQuery.notifyManager.batchCalls(onStoreChange));
|
|
11
|
-
return () => {
|
|
12
|
-
return;
|
|
13
|
-
};
|
|
14
|
-
}, [queryCache, skip]), getSnapshot, getSnapshot);
|
|
15
|
-
};
|
|
16
|
-
var useSubscribeToQueryCache$1 = useSubscribeToQueryCache;
|
|
17
|
-
|
|
18
|
-
exports.default = useSubscribeToQueryCache$1;
|
|
19
|
-
//# sourceMappingURL=useSubscribeToQueryCache.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useSubscribeToQueryCache.js","sources":["../../src/useSubscribeToQueryCache.ts"],"sourcesContent":["import React from 'react'\nimport type { QueryCache } from '@tanstack/react-query'\nimport { notifyManager } from '@tanstack/react-query'\n\nconst useSubscribeToQueryCache = <T>(\n queryCache: QueryCache,\n getSnapshot: () => T,\n skip: boolean = false,\n): T => {\n return React.useSyncExternalStore(\n React.useCallback(\n (onStoreChange) => {\n if (!skip)\n return queryCache.subscribe(notifyManager.batchCalls(onStoreChange))\n return () => {\n return\n }\n },\n [queryCache, skip],\n ),\n getSnapshot,\n getSnapshot,\n )\n}\n\nexport default useSubscribeToQueryCache\n"],"names":["useSubscribeToQueryCache","queryCache","getSnapshot","skip","React","useSyncExternalStore","useCallback","onStoreChange","subscribe","notifyManager","batchCalls"],"mappings":";;;;;;;AAIA,MAAMA,wBAAwB,GAAG,CAC/BC,UAAsB,EACtBC,WAAoB,EACpBC,IAAa,GAAG,KAAK,KACf;EACN,OAAOC,KAAK,CAACC,oBAAoB,CAC/BD,KAAK,CAACE,WAAW,CACdC,aAAa,IAAK;AACjB,IAAA,IAAI,CAACJ,IAAI,EACP,OAAOF,UAAU,CAACO,SAAS,CAACC,wBAAa,CAACC,UAAU,CAACH,aAAa,CAAC,CAAC,CAAA;AACtE,IAAA,OAAO,MAAM;AACX,MAAA,OAAA;KACD,CAAA;GACF,EACD,CAACN,UAAU,EAAEE,IAAI,CAAC,CACnB,EACDD,WAAW,EACXA,WAAW,CACZ,CAAA;AACH,CAAC,CAAA;AAED,iCAAeF,wBAAwB;;;;"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import React__default from 'react';
|
|
2
|
-
import { notifyManager } from '@tanstack/react-query';
|
|
3
|
-
|
|
4
|
-
const useSubscribeToQueryCache = (queryCache, getSnapshot, skip = false) => {
|
|
5
|
-
return React__default.useSyncExternalStore(React__default.useCallback(onStoreChange => {
|
|
6
|
-
if (!skip) return queryCache.subscribe(notifyManager.batchCalls(onStoreChange));
|
|
7
|
-
return () => {
|
|
8
|
-
return;
|
|
9
|
-
};
|
|
10
|
-
}, [queryCache, skip]), getSnapshot, getSnapshot);
|
|
11
|
-
};
|
|
12
|
-
var useSubscribeToQueryCache$1 = useSubscribeToQueryCache;
|
|
13
|
-
|
|
14
|
-
export { useSubscribeToQueryCache$1 as default };
|
|
15
|
-
//# sourceMappingURL=useSubscribeToQueryCache.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useSubscribeToQueryCache.mjs","sources":["../../src/useSubscribeToQueryCache.ts"],"sourcesContent":["import React from 'react'\nimport type { QueryCache } from '@tanstack/react-query'\nimport { notifyManager } from '@tanstack/react-query'\n\nconst useSubscribeToQueryCache = <T>(\n queryCache: QueryCache,\n getSnapshot: () => T,\n skip: boolean = false,\n): T => {\n return React.useSyncExternalStore(\n React.useCallback(\n (onStoreChange) => {\n if (!skip)\n return queryCache.subscribe(notifyManager.batchCalls(onStoreChange))\n return () => {\n return\n }\n },\n [queryCache, skip],\n ),\n getSnapshot,\n getSnapshot,\n )\n}\n\nexport default useSubscribeToQueryCache\n"],"names":["useSubscribeToQueryCache","queryCache","getSnapshot","skip","React","useSyncExternalStore","useCallback","onStoreChange","subscribe","notifyManager","batchCalls"],"mappings":";;;AAIA,MAAMA,wBAAwB,GAAG,CAC/BC,UAAsB,EACtBC,WAAoB,EACpBC,IAAa,GAAG,KAAK,KACf;EACN,OAAOC,cAAK,CAACC,oBAAoB,CAC/BD,cAAK,CAACE,WAAW,CACdC,aAAa,IAAK;AACjB,IAAA,IAAI,CAACJ,IAAI,EACP,OAAOF,UAAU,CAACO,SAAS,CAACC,aAAa,CAACC,UAAU,CAACH,aAAa,CAAC,CAAC,CAAA;AACtE,IAAA,OAAO,MAAM;AACX,MAAA,OAAA;KACD,CAAA;GACF,EACD,CAACN,UAAU,EAAEE,IAAI,CAAC,CACnB,EACDD,WAAW,EACXA,WAAW,CACZ,CAAA;AACH,CAAC,CAAA;AAED,iCAAeF,wBAAwB;;;;"}
|
package/build/lib/utils.d.ts
DELETED
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { Query } from '@tanstack/react-query';
|
|
3
|
-
import type { Theme } from './theme';
|
|
4
|
-
declare type StyledComponent<T> = T extends 'button' ? React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> : T extends 'input' ? React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> : T extends 'select' ? React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> : T extends keyof HTMLElementTagNameMap ? React.HTMLAttributes<HTMLElementTagNameMap[T]> : never;
|
|
5
|
-
export declare function getQueryStatusColor({ queryState, observerCount, isStale, theme, }: {
|
|
6
|
-
queryState: Query['state'];
|
|
7
|
-
observerCount: number;
|
|
8
|
-
isStale: boolean;
|
|
9
|
-
theme: Theme;
|
|
10
|
-
}): "#3f4e60" | "#00ab52" | "#006bff" | "#8c49eb" | "#ffb200";
|
|
11
|
-
export declare function getQueryStatusLabel(query: Query): "fetching" | "paused" | "inactive" | "stale" | "fresh";
|
|
12
|
-
declare type Styles = React.CSSProperties | ((props: Record<string, any>, theme: Theme) => React.CSSProperties);
|
|
13
|
-
export declare function styled<T extends keyof HTMLElementTagNameMap>(type: T, newStyles: Styles, queries?: Record<string, Styles>): React.ForwardRefExoticComponent<React.PropsWithoutRef<StyledComponent<T>> & React.RefAttributes<HTMLElementTagNameMap[T]>>;
|
|
14
|
-
export declare function useIsMounted(): () => boolean;
|
|
15
|
-
/**
|
|
16
|
-
* Displays a string regardless the type of the data
|
|
17
|
-
* @param {unknown} value Value to be stringified
|
|
18
|
-
* @param {boolean} beautify Formats json to multiline
|
|
19
|
-
*/
|
|
20
|
-
export declare const displayValue: (value: unknown, beautify?: boolean) => string;
|
|
21
|
-
declare type SortFn = (a: Query, b: Query) => number;
|
|
22
|
-
export declare const sortFns: Record<string, SortFn>;
|
|
23
|
-
export declare const minPanelSize = 70;
|
|
24
|
-
export declare const defaultPanelSize = 500;
|
|
25
|
-
export declare const sides: Record<Side, Side>;
|
|
26
|
-
export declare type Corner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
|
|
27
|
-
export declare type Side = 'left' | 'right' | 'top' | 'bottom';
|
|
28
|
-
/**
|
|
29
|
-
* Check if the given side is vertical (left/right)
|
|
30
|
-
*/
|
|
31
|
-
export declare function isVerticalSide(side: Side): boolean;
|
|
32
|
-
/**
|
|
33
|
-
* Get the opposite side, eg 'left' => 'right'. 'top' => 'bottom', etc
|
|
34
|
-
*/
|
|
35
|
-
export declare function getOppositeSide(side: Side): Side;
|
|
36
|
-
/**
|
|
37
|
-
* Given as css prop it will return a sided css prop based on a given side
|
|
38
|
-
* Example given `border` and `right` it return `borderRight`
|
|
39
|
-
*/
|
|
40
|
-
export declare function getSidedProp<T extends string>(prop: T, side: Side): `${T}Left` | `${T}Right` | `${T}Bottom` | `${T}Top`;
|
|
41
|
-
export interface SidePanelStyleOptions {
|
|
42
|
-
/**
|
|
43
|
-
* Position of the panel
|
|
44
|
-
* Defaults to 'bottom'
|
|
45
|
-
*/
|
|
46
|
-
position?: Side;
|
|
47
|
-
/**
|
|
48
|
-
* Staring height for the panel, it is set if the position is horizontal eg 'top' or 'bottom'
|
|
49
|
-
* Defaults to 500
|
|
50
|
-
*/
|
|
51
|
-
height?: number;
|
|
52
|
-
/**
|
|
53
|
-
* Staring width for the panel, it is set if the position is vertical eg 'left' or 'right'
|
|
54
|
-
* Defaults to 500
|
|
55
|
-
*/
|
|
56
|
-
width?: number;
|
|
57
|
-
/**
|
|
58
|
-
* RQ devtools theme
|
|
59
|
-
*/
|
|
60
|
-
devtoolsTheme: Theme;
|
|
61
|
-
/**
|
|
62
|
-
* Sets the correct transition and visibility styles
|
|
63
|
-
*/
|
|
64
|
-
isOpen?: boolean;
|
|
65
|
-
/**
|
|
66
|
-
* If the panel is resizing set to true to apply the correct transition styles
|
|
67
|
-
*/
|
|
68
|
-
isResizing?: boolean;
|
|
69
|
-
/**
|
|
70
|
-
* Extra panel style passed by the user
|
|
71
|
-
*/
|
|
72
|
-
panelStyle?: React.CSSProperties;
|
|
73
|
-
}
|
|
74
|
-
export declare function getSidePanelStyle({ position, height, width, devtoolsTheme, isOpen, isResizing, panelStyle, }: SidePanelStyleOptions): React.CSSProperties;
|
|
75
|
-
/**
|
|
76
|
-
* Get resize handle style based on a given side
|
|
77
|
-
*/
|
|
78
|
-
export declare function getResizeHandleStyle(position?: Side): React.CSSProperties;
|
|
79
|
-
export {};
|
|
80
|
-
//# sourceMappingURL=utils.d.ts.map
|
package/build/lib/utils.esm.js
DELETED
|
@@ -1,184 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import SuperJSON from 'superjson';
|
|
3
|
-
import { useTheme } from './theme.esm.js';
|
|
4
|
-
import useMediaQuery from './useMediaQuery.esm.js';
|
|
5
|
-
|
|
6
|
-
function getQueryStatusColor({
|
|
7
|
-
queryState,
|
|
8
|
-
observerCount,
|
|
9
|
-
isStale,
|
|
10
|
-
theme
|
|
11
|
-
}) {
|
|
12
|
-
return queryState.fetchStatus === 'fetching' ? theme.active : !observerCount ? theme.gray : queryState.fetchStatus === 'paused' ? theme.paused : isStale ? theme.warning : theme.success;
|
|
13
|
-
}
|
|
14
|
-
function getQueryStatusLabel(query) {
|
|
15
|
-
return query.state.fetchStatus === 'fetching' ? 'fetching' : !query.getObserversCount() ? 'inactive' : query.state.fetchStatus === 'paused' ? 'paused' : query.isStale() ? 'stale' : 'fresh';
|
|
16
|
-
}
|
|
17
|
-
function styled(type, newStyles, queries = {}) {
|
|
18
|
-
return /*#__PURE__*/React.forwardRef(({
|
|
19
|
-
style,
|
|
20
|
-
...rest
|
|
21
|
-
}, ref) => {
|
|
22
|
-
const theme = useTheme();
|
|
23
|
-
const mediaStyles = Object.entries(queries).reduce((current, [key, value]) => {
|
|
24
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
25
|
-
return useMediaQuery(key) ? {
|
|
26
|
-
...current,
|
|
27
|
-
...(typeof value === 'function' ? value(rest, theme) : value)
|
|
28
|
-
} : current;
|
|
29
|
-
}, {});
|
|
30
|
-
return /*#__PURE__*/React.createElement(type, {
|
|
31
|
-
...rest,
|
|
32
|
-
style: {
|
|
33
|
-
...(typeof newStyles === 'function' ? newStyles(rest, theme) : newStyles),
|
|
34
|
-
...style,
|
|
35
|
-
...mediaStyles
|
|
36
|
-
},
|
|
37
|
-
ref
|
|
38
|
-
});
|
|
39
|
-
});
|
|
40
|
-
}
|
|
41
|
-
function useIsMounted() {
|
|
42
|
-
const mountedRef = React.useRef(false);
|
|
43
|
-
const isMounted = React.useCallback(() => mountedRef.current, []);
|
|
44
|
-
React.useEffect(() => {
|
|
45
|
-
mountedRef.current = true;
|
|
46
|
-
return () => {
|
|
47
|
-
mountedRef.current = false;
|
|
48
|
-
};
|
|
49
|
-
}, []);
|
|
50
|
-
return isMounted;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
/**
|
|
54
|
-
* Displays a string regardless the type of the data
|
|
55
|
-
* @param {unknown} value Value to be stringified
|
|
56
|
-
* @param {boolean} beautify Formats json to multiline
|
|
57
|
-
*/
|
|
58
|
-
const displayValue = (value, beautify = false) => {
|
|
59
|
-
const {
|
|
60
|
-
json
|
|
61
|
-
} = SuperJSON.serialize(value);
|
|
62
|
-
return JSON.stringify(json, null, beautify ? 2 : undefined);
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
// Sorting functions
|
|
66
|
-
|
|
67
|
-
const getStatusRank = q => q.state.fetchStatus !== 'idle' ? 0 : !q.getObserversCount() ? 3 : q.isStale() ? 2 : 1;
|
|
68
|
-
const queryHashSort = (a, b) => a.queryHash.localeCompare(b.queryHash);
|
|
69
|
-
const dateSort = (a, b) => a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1;
|
|
70
|
-
const statusAndDateSort = (a, b) => {
|
|
71
|
-
if (getStatusRank(a) === getStatusRank(b)) {
|
|
72
|
-
return dateSort(a, b);
|
|
73
|
-
}
|
|
74
|
-
return getStatusRank(a) > getStatusRank(b) ? 1 : -1;
|
|
75
|
-
};
|
|
76
|
-
const sortFns = {
|
|
77
|
-
'Status > Last Updated': statusAndDateSort,
|
|
78
|
-
'Query Hash': queryHashSort,
|
|
79
|
-
'Last Updated': dateSort
|
|
80
|
-
};
|
|
81
|
-
const minPanelSize = 70;
|
|
82
|
-
const defaultPanelSize = 500;
|
|
83
|
-
const sides = {
|
|
84
|
-
top: 'bottom',
|
|
85
|
-
bottom: 'top',
|
|
86
|
-
left: 'right',
|
|
87
|
-
right: 'left'
|
|
88
|
-
};
|
|
89
|
-
/**
|
|
90
|
-
* Check if the given side is vertical (left/right)
|
|
91
|
-
*/
|
|
92
|
-
function isVerticalSide(side) {
|
|
93
|
-
return ['left', 'right'].includes(side);
|
|
94
|
-
}
|
|
95
|
-
/**
|
|
96
|
-
* Get the opposite side, eg 'left' => 'right'. 'top' => 'bottom', etc
|
|
97
|
-
*/
|
|
98
|
-
function getOppositeSide(side) {
|
|
99
|
-
return sides[side];
|
|
100
|
-
}
|
|
101
|
-
/**
|
|
102
|
-
* Given as css prop it will return a sided css prop based on a given side
|
|
103
|
-
* Example given `border` and `right` it return `borderRight`
|
|
104
|
-
*/
|
|
105
|
-
function getSidedProp(prop, side) {
|
|
106
|
-
return `${prop}${side.charAt(0).toUpperCase() + side.slice(1)}`;
|
|
107
|
-
}
|
|
108
|
-
function getSidePanelStyle({
|
|
109
|
-
position = 'bottom',
|
|
110
|
-
height,
|
|
111
|
-
width,
|
|
112
|
-
devtoolsTheme,
|
|
113
|
-
isOpen,
|
|
114
|
-
isResizing,
|
|
115
|
-
panelStyle
|
|
116
|
-
}) {
|
|
117
|
-
const oppositeSide = getOppositeSide(position);
|
|
118
|
-
const borderSide = getSidedProp('border', oppositeSide);
|
|
119
|
-
const isVertical = isVerticalSide(position);
|
|
120
|
-
return {
|
|
121
|
-
...panelStyle,
|
|
122
|
-
direction: 'ltr',
|
|
123
|
-
position: 'fixed',
|
|
124
|
-
[position]: 0,
|
|
125
|
-
[borderSide]: `1px solid ${devtoolsTheme.gray}`,
|
|
126
|
-
transformOrigin: oppositeSide,
|
|
127
|
-
boxShadow: '0 0 20px rgba(0,0,0,.3)',
|
|
128
|
-
zIndex: 99999,
|
|
129
|
-
// visibility will be toggled after transitions, but set initial state here
|
|
130
|
-
visibility: isOpen ? 'visible' : 'hidden',
|
|
131
|
-
...(isResizing ? {
|
|
132
|
-
transition: `none`
|
|
133
|
-
} : {
|
|
134
|
-
transition: `all .2s ease`
|
|
135
|
-
}),
|
|
136
|
-
...(isOpen ? {
|
|
137
|
-
opacity: 1,
|
|
138
|
-
pointerEvents: 'all',
|
|
139
|
-
transform: isVertical ? `translateX(0) scale(1)` : `translateY(0) scale(1)`
|
|
140
|
-
} : {
|
|
141
|
-
opacity: 0,
|
|
142
|
-
pointerEvents: 'none',
|
|
143
|
-
transform: isVertical ? `translateX(15px) scale(1.02)` : `translateY(15px) scale(1.02)`
|
|
144
|
-
}),
|
|
145
|
-
...(isVertical ? {
|
|
146
|
-
top: 0,
|
|
147
|
-
height: '100vh',
|
|
148
|
-
maxWidth: '90%',
|
|
149
|
-
width: typeof width === 'number' && width >= minPanelSize ? width : defaultPanelSize
|
|
150
|
-
} : {
|
|
151
|
-
left: 0,
|
|
152
|
-
width: '100%',
|
|
153
|
-
maxHeight: '90%',
|
|
154
|
-
height: typeof height === 'number' && height >= minPanelSize ? height : defaultPanelSize
|
|
155
|
-
})
|
|
156
|
-
};
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
/**
|
|
160
|
-
* Get resize handle style based on a given side
|
|
161
|
-
*/
|
|
162
|
-
function getResizeHandleStyle(position = 'bottom') {
|
|
163
|
-
const isVertical = isVerticalSide(position);
|
|
164
|
-
const oppositeSide = getOppositeSide(position);
|
|
165
|
-
const marginSide = getSidedProp('margin', oppositeSide);
|
|
166
|
-
return {
|
|
167
|
-
position: 'absolute',
|
|
168
|
-
cursor: isVertical ? 'col-resize' : 'row-resize',
|
|
169
|
-
zIndex: 100000,
|
|
170
|
-
[oppositeSide]: 0,
|
|
171
|
-
[marginSide]: `-4px`,
|
|
172
|
-
...(isVertical ? {
|
|
173
|
-
top: 0,
|
|
174
|
-
height: '100%',
|
|
175
|
-
width: '4px'
|
|
176
|
-
} : {
|
|
177
|
-
width: '100%',
|
|
178
|
-
height: '4px'
|
|
179
|
-
})
|
|
180
|
-
};
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
export { defaultPanelSize, displayValue, getOppositeSide, getQueryStatusColor, getQueryStatusLabel, getResizeHandleStyle, getSidePanelStyle, getSidedProp, isVerticalSide, minPanelSize, sides, sortFns, styled, useIsMounted };
|
|
184
|
-
//# sourceMappingURL=utils.esm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils.esm.js","sources":["../../src/utils.ts"],"sourcesContent":["import * as React from 'react'\nimport type { Query } from '@tanstack/react-query'\nimport SuperJSON from 'superjson'\n\nimport type { Theme } from './theme'\nimport { useTheme } from './theme'\nimport useMediaQuery from './useMediaQuery'\n\ntype StyledComponent<T> = T extends 'button'\n ? React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >\n : T extends 'input'\n ? React.DetailedHTMLProps<\n React.InputHTMLAttributes<HTMLInputElement>,\n HTMLInputElement\n >\n : T extends 'select'\n ? React.DetailedHTMLProps<\n React.SelectHTMLAttributes<HTMLSelectElement>,\n HTMLSelectElement\n >\n : T extends keyof HTMLElementTagNameMap\n ? React.HTMLAttributes<HTMLElementTagNameMap[T]>\n : never\n\nexport function getQueryStatusColor({\n queryState,\n observerCount,\n isStale,\n theme,\n}: {\n queryState: Query['state']\n observerCount: number\n isStale: boolean\n theme: Theme\n}) {\n return queryState.fetchStatus === 'fetching'\n ? theme.active\n : !observerCount\n ? theme.gray\n : queryState.fetchStatus === 'paused'\n ? theme.paused\n : isStale\n ? theme.warning\n : theme.success\n}\n\nexport function getQueryStatusLabel(query: Query) {\n return query.state.fetchStatus === 'fetching'\n ? 'fetching'\n : !query.getObserversCount()\n ? 'inactive'\n : query.state.fetchStatus === 'paused'\n ? 'paused'\n : query.isStale()\n ? 'stale'\n : 'fresh'\n}\n\ntype Styles =\n | React.CSSProperties\n | ((props: Record<string, any>, theme: Theme) => React.CSSProperties)\n\nexport function styled<T extends keyof HTMLElementTagNameMap>(\n type: T,\n newStyles: Styles,\n queries: Record<string, Styles> = {},\n) {\n return React.forwardRef<HTMLElementTagNameMap[T], StyledComponent<T>>(\n ({ style, ...rest }, ref) => {\n const theme = useTheme()\n\n const mediaStyles = Object.entries(queries).reduce(\n (current, [key, value]) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useMediaQuery(key)\n ? {\n ...current,\n ...(typeof value === 'function' ? value(rest, theme) : value),\n }\n : current\n },\n {},\n )\n\n return React.createElement(type, {\n ...rest,\n style: {\n ...(typeof newStyles === 'function'\n ? newStyles(rest, theme)\n : newStyles),\n ...style,\n ...mediaStyles,\n },\n ref,\n })\n },\n )\n}\n\nexport function useIsMounted() {\n const mountedRef = React.useRef(false)\n const isMounted = React.useCallback(() => mountedRef.current, [])\n\n React.useEffect(() => {\n mountedRef.current = true\n return () => {\n mountedRef.current = false\n }\n }, [])\n\n return isMounted\n}\n\n/**\n * Displays a string regardless the type of the data\n * @param {unknown} value Value to be stringified\n * @param {boolean} beautify Formats json to multiline\n */\nexport const displayValue = (value: unknown, beautify: boolean = false) => {\n const { json } = SuperJSON.serialize(value)\n\n return JSON.stringify(json, null, beautify ? 2 : undefined)\n}\n\n// Sorting functions\ntype SortFn = (a: Query, b: Query) => number\n\nconst getStatusRank = (q: Query) =>\n q.state.fetchStatus !== 'idle'\n ? 0\n : !q.getObserversCount()\n ? 3\n : q.isStale()\n ? 2\n : 1\n\nconst queryHashSort: SortFn = (a, b) => a.queryHash.localeCompare(b.queryHash)\n\nconst dateSort: SortFn = (a, b) =>\n a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1\n\nconst statusAndDateSort: SortFn = (a, b) => {\n if (getStatusRank(a) === getStatusRank(b)) {\n return dateSort(a, b)\n }\n\n return getStatusRank(a) > getStatusRank(b) ? 1 : -1\n}\n\nexport const sortFns: Record<string, SortFn> = {\n 'Status > Last Updated': statusAndDateSort,\n 'Query Hash': queryHashSort,\n 'Last Updated': dateSort,\n}\n\nexport const minPanelSize = 70\nexport const defaultPanelSize = 500\nexport const sides: Record<Side, Side> = {\n top: 'bottom',\n bottom: 'top',\n left: 'right',\n right: 'left',\n}\n\nexport type Corner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\nexport type Side = 'left' | 'right' | 'top' | 'bottom'\n/**\n * Check if the given side is vertical (left/right)\n */\nexport function isVerticalSide(side: Side) {\n return ['left', 'right'].includes(side)\n}\n/**\n * Get the opposite side, eg 'left' => 'right'. 'top' => 'bottom', etc\n */\nexport function getOppositeSide(side: Side): Side {\n return sides[side]\n}\n/**\n * Given as css prop it will return a sided css prop based on a given side\n * Example given `border` and `right` it return `borderRight`\n */\nexport function getSidedProp<T extends string>(prop: T, side: Side) {\n return `${prop}${\n side.charAt(0).toUpperCase() + side.slice(1)\n }` as `${T}${Capitalize<Side>}`\n}\n\nexport interface SidePanelStyleOptions {\n /**\n * Position of the panel\n * Defaults to 'bottom'\n */\n position?: Side\n /**\n * Staring height for the panel, it is set if the position is horizontal eg 'top' or 'bottom'\n * Defaults to 500\n */\n height?: number\n /**\n * Staring width for the panel, it is set if the position is vertical eg 'left' or 'right'\n * Defaults to 500\n */\n width?: number\n /**\n * RQ devtools theme\n */\n devtoolsTheme: Theme\n /**\n * Sets the correct transition and visibility styles\n */\n isOpen?: boolean\n /**\n * If the panel is resizing set to true to apply the correct transition styles\n */\n isResizing?: boolean\n /**\n * Extra panel style passed by the user\n */\n panelStyle?: React.CSSProperties\n}\n\nexport function getSidePanelStyle({\n position = 'bottom',\n height,\n width,\n devtoolsTheme,\n isOpen,\n isResizing,\n panelStyle,\n}: SidePanelStyleOptions): React.CSSProperties {\n const oppositeSide = getOppositeSide(position)\n const borderSide = getSidedProp('border', oppositeSide)\n const isVertical = isVerticalSide(position)\n\n return {\n ...panelStyle,\n direction: 'ltr',\n position: 'fixed',\n [position]: 0,\n [borderSide]: `1px solid ${devtoolsTheme.gray}`,\n transformOrigin: oppositeSide,\n boxShadow: '0 0 20px rgba(0,0,0,.3)',\n zIndex: 99999,\n // visibility will be toggled after transitions, but set initial state here\n visibility: isOpen ? 'visible' : 'hidden',\n ...(isResizing\n ? {\n transition: `none`,\n }\n : { transition: `all .2s ease` }),\n ...(isOpen\n ? {\n opacity: 1,\n pointerEvents: 'all',\n transform: isVertical\n ? `translateX(0) scale(1)`\n : `translateY(0) scale(1)`,\n }\n : {\n opacity: 0,\n pointerEvents: 'none',\n transform: isVertical\n ? `translateX(15px) scale(1.02)`\n : `translateY(15px) scale(1.02)`,\n }),\n ...(isVertical\n ? {\n top: 0,\n height: '100vh',\n maxWidth: '90%',\n width:\n typeof width === 'number' && width >= minPanelSize\n ? width\n : defaultPanelSize,\n }\n : {\n left: 0,\n width: '100%',\n maxHeight: '90%',\n height:\n typeof height === 'number' && height >= minPanelSize\n ? height\n : defaultPanelSize,\n }),\n }\n}\n\n/**\n * Get resize handle style based on a given side\n */\nexport function getResizeHandleStyle(\n position: Side = 'bottom',\n): React.CSSProperties {\n const isVertical = isVerticalSide(position)\n const oppositeSide = getOppositeSide(position)\n const marginSide = getSidedProp('margin', oppositeSide)\n\n return {\n position: 'absolute',\n cursor: isVertical ? 'col-resize' : 'row-resize',\n zIndex: 100000,\n [oppositeSide]: 0,\n [marginSide]: `-4px`,\n ...(isVertical\n ? {\n top: 0,\n height: '100%',\n width: '4px',\n }\n : {\n width: '100%',\n height: '4px',\n }),\n }\n}\n"],"names":["getQueryStatusColor","queryState","observerCount","isStale","theme","fetchStatus","active","gray","paused","warning","success","getQueryStatusLabel","query","state","getObserversCount","styled","type","newStyles","queries","React","forwardRef","style","rest","ref","useTheme","mediaStyles","Object","entries","reduce","current","key","value","useMediaQuery","createElement","useIsMounted","mountedRef","useRef","isMounted","useCallback","useEffect","displayValue","beautify","json","SuperJSON","serialize","JSON","stringify","undefined","getStatusRank","q","queryHashSort","a","b","queryHash","localeCompare","dateSort","dataUpdatedAt","statusAndDateSort","sortFns","minPanelSize","defaultPanelSize","sides","top","bottom","left","right","isVerticalSide","side","includes","getOppositeSide","getSidedProp","prop","charAt","toUpperCase","slice","getSidePanelStyle","position","height","width","devtoolsTheme","isOpen","isResizing","panelStyle","oppositeSide","borderSide","isVertical","direction","transformOrigin","boxShadow","zIndex","visibility","transition","opacity","pointerEvents","transform","maxWidth","maxHeight","getResizeHandleStyle","marginSide","cursor"],"mappings":"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"}
|