@braine/quantum-query 1.2.3 → 1.2.5
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/LICENSE +21 -0
- package/dist/index.cjs +225 -119
- package/dist/index.js +226 -120
- package/package.json +10 -2
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Piyas Talukder
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/dist/index.cjs
CHANGED
|
@@ -1474,9 +1474,32 @@ function useQueryCache() {
|
|
|
1474
1474
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
1475
1475
|
function QuantumDevTools() {
|
|
1476
1476
|
const [isOpen, setIsOpen] = (0, import_react8.useState)(false);
|
|
1477
|
+
const [isMinimized, setIsMinimized] = (0, import_react8.useState)(false);
|
|
1478
|
+
const [height, setHeight] = (0, import_react8.useState)(450);
|
|
1477
1479
|
const [filter, setFilter] = (0, import_react8.useState)("");
|
|
1478
1480
|
const cache = useQueryCache();
|
|
1479
1481
|
const client = useQueryClient();
|
|
1482
|
+
const isResizingRef = (0, import_react8.useRef)(false);
|
|
1483
|
+
const containerRef = (0, import_react8.useRef)(null);
|
|
1484
|
+
(0, import_react8.useEffect)(() => {
|
|
1485
|
+
const handleMouseMove = (e) => {
|
|
1486
|
+
if (!isResizingRef.current) return;
|
|
1487
|
+
const newHeight = window.innerHeight - e.clientY;
|
|
1488
|
+
if (newHeight > 200 && newHeight < window.innerHeight - 50) {
|
|
1489
|
+
setHeight(newHeight);
|
|
1490
|
+
}
|
|
1491
|
+
};
|
|
1492
|
+
const handleMouseUp = () => {
|
|
1493
|
+
isResizingRef.current = false;
|
|
1494
|
+
document.body.style.cursor = "default";
|
|
1495
|
+
};
|
|
1496
|
+
window.addEventListener("mousemove", handleMouseMove);
|
|
1497
|
+
window.addEventListener("mouseup", handleMouseUp);
|
|
1498
|
+
return () => {
|
|
1499
|
+
window.removeEventListener("mousemove", handleMouseMove);
|
|
1500
|
+
window.removeEventListener("mouseup", handleMouseUp);
|
|
1501
|
+
};
|
|
1502
|
+
}, []);
|
|
1480
1503
|
const entries = (0, import_react8.useMemo)(() => Array.from(cache.entries()), [cache]);
|
|
1481
1504
|
const filteredEntries = (0, import_react8.useMemo)(() => {
|
|
1482
1505
|
if (!filter) return entries;
|
|
@@ -1518,129 +1541,212 @@ function QuantumDevTools() {
|
|
|
1518
1541
|
}
|
|
1519
1542
|
);
|
|
1520
1543
|
}
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
maxWidth: "650px",
|
|
1527
|
-
height: "450px",
|
|
1528
|
-
background: "#0a0a0a",
|
|
1529
|
-
color: "#e0e0e0",
|
|
1530
|
-
borderTopLeftRadius: "12px",
|
|
1531
|
-
boxShadow: "0 -10px 40px rgba(0,0,0,0.5)",
|
|
1532
|
-
zIndex: 9999,
|
|
1533
|
-
display: "flex",
|
|
1534
|
-
flexDirection: "column",
|
|
1535
|
-
fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
|
|
1536
|
-
fontSize: "13px",
|
|
1537
|
-
border: "1px solid #333"
|
|
1538
|
-
}, children: [
|
|
1539
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
|
|
1540
|
-
padding: "12px 16px",
|
|
1541
|
-
borderBottom: "1px solid #222",
|
|
1542
|
-
display: "flex",
|
|
1543
|
-
justifyContent: "space-between",
|
|
1544
|
-
alignItems: "center",
|
|
1544
|
+
if (isMinimized) {
|
|
1545
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
|
|
1546
|
+
position: "fixed",
|
|
1547
|
+
bottom: "20px",
|
|
1548
|
+
right: "20px",
|
|
1545
1549
|
background: "#111",
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontWeight: 600, letterSpacing: "-0.5px" }, children: "Quantum DevTools" }),
|
|
1551
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: {
|
|
1552
|
-
background: "#222",
|
|
1553
|
-
padding: "2px 6px",
|
|
1554
|
-
borderRadius: "4px",
|
|
1555
|
-
fontSize: "10px",
|
|
1556
|
-
color: "#666"
|
|
1557
|
-
}, children: "v1.2.2" })
|
|
1558
|
-
] }),
|
|
1559
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1560
|
-
"button",
|
|
1561
|
-
{
|
|
1562
|
-
onClick: () => setIsOpen(false),
|
|
1563
|
-
style: {
|
|
1564
|
-
background: "transparent",
|
|
1565
|
-
border: "none",
|
|
1566
|
-
color: "#666",
|
|
1567
|
-
cursor: "pointer",
|
|
1568
|
-
fontSize: "20px",
|
|
1569
|
-
padding: "4px",
|
|
1570
|
-
lineHeight: 1
|
|
1571
|
-
},
|
|
1572
|
-
children: "\xD7"
|
|
1573
|
-
}
|
|
1574
|
-
)
|
|
1575
|
-
] }),
|
|
1576
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
|
|
1577
|
-
padding: "8px 16px",
|
|
1578
|
-
borderBottom: "1px solid #222",
|
|
1579
|
-
background: "#0f0f0f",
|
|
1550
|
+
border: "1px solid #333",
|
|
1551
|
+
borderRadius: "8px",
|
|
1552
|
+
padding: "8px 12px",
|
|
1553
|
+
zIndex: 9999,
|
|
1580
1554
|
display: "flex",
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
|
|
1598
|
-
|
|
1555
|
+
alignItems: "center",
|
|
1556
|
+
gap: "10px",
|
|
1557
|
+
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4)",
|
|
1558
|
+
fontFamily: "monospace",
|
|
1559
|
+
color: "#e0e0e0",
|
|
1560
|
+
cursor: "pointer"
|
|
1561
|
+
}, onClick: () => setIsMinimized(false), children: [
|
|
1562
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#b0fb5d" }, children: "\u26A1\uFE0F" }),
|
|
1563
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "12px" }, children: "DevTools" }),
|
|
1564
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: {
|
|
1565
|
+
background: "#333",
|
|
1566
|
+
padding: "2px 6px",
|
|
1567
|
+
borderRadius: "4px",
|
|
1568
|
+
fontSize: "10px"
|
|
1569
|
+
}, children: [
|
|
1570
|
+
entries.length,
|
|
1571
|
+
" queries"
|
|
1572
|
+
] })
|
|
1573
|
+
] });
|
|
1574
|
+
}
|
|
1575
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
1576
|
+
"div",
|
|
1577
|
+
{
|
|
1578
|
+
ref: containerRef,
|
|
1579
|
+
style: {
|
|
1580
|
+
position: "fixed",
|
|
1581
|
+
bottom: 0,
|
|
1582
|
+
right: 0,
|
|
1583
|
+
width: "100%",
|
|
1584
|
+
height: `${height}px`,
|
|
1585
|
+
background: "#0a0a0a",
|
|
1586
|
+
color: "#e0e0e0",
|
|
1587
|
+
borderTopLeftRadius: "12px",
|
|
1588
|
+
borderTopRightRadius: "12px",
|
|
1589
|
+
boxShadow: "0 -10px 40px rgba(0,0,0,0.5)",
|
|
1590
|
+
zIndex: 9999,
|
|
1591
|
+
display: "flex",
|
|
1592
|
+
flexDirection: "column",
|
|
1593
|
+
fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
|
|
1594
|
+
fontSize: "13px",
|
|
1595
|
+
borderTop: "1px solid #333"
|
|
1596
|
+
},
|
|
1597
|
+
children: [
|
|
1598
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1599
|
+
"div",
|
|
1600
|
+
{
|
|
1601
|
+
onMouseDown: () => {
|
|
1602
|
+
isResizingRef.current = true;
|
|
1603
|
+
document.body.style.cursor = "ns-resize";
|
|
1604
|
+
},
|
|
1605
|
+
style: {
|
|
1606
|
+
height: "6px",
|
|
1607
|
+
width: "100%",
|
|
1608
|
+
cursor: "ns-resize",
|
|
1609
|
+
position: "absolute",
|
|
1610
|
+
top: "-3px",
|
|
1611
|
+
left: 0,
|
|
1612
|
+
zIndex: 10
|
|
1613
|
+
// debugging color: background: 'red', opacity: 0.2
|
|
1614
|
+
}
|
|
1599
1615
|
}
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
|
|
1604
|
-
|
|
1605
|
-
|
|
1606
|
-
|
|
1607
|
-
|
|
1608
|
-
|
|
1609
|
-
|
|
1610
|
-
|
|
1611
|
-
|
|
1612
|
-
|
|
1613
|
-
|
|
1614
|
-
|
|
1615
|
-
|
|
1616
|
+
),
|
|
1617
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
|
|
1618
|
+
padding: "12px 16px",
|
|
1619
|
+
borderBottom: "1px solid #222",
|
|
1620
|
+
display: "flex",
|
|
1621
|
+
justifyContent: "space-between",
|
|
1622
|
+
alignItems: "center",
|
|
1623
|
+
background: "#111",
|
|
1624
|
+
borderTopLeftRadius: "12px",
|
|
1625
|
+
borderTopRightRadius: "12px",
|
|
1626
|
+
userSelect: "none"
|
|
1627
|
+
}, children: [
|
|
1628
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
|
|
1629
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#b0fb5d", fontSize: "16px" }, children: "\u26A1\uFE0F" }),
|
|
1630
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontWeight: 600, letterSpacing: "-0.5px" }, children: "Quantum DevTools" }),
|
|
1631
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: {
|
|
1632
|
+
background: "#222",
|
|
1633
|
+
padding: "2px 6px",
|
|
1634
|
+
borderRadius: "4px",
|
|
1635
|
+
fontSize: "10px",
|
|
1636
|
+
color: "#666"
|
|
1637
|
+
}, children: "v1.2.3" })
|
|
1638
|
+
] }),
|
|
1639
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
|
|
1640
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1641
|
+
"button",
|
|
1642
|
+
{
|
|
1643
|
+
onClick: () => setIsMinimized(true),
|
|
1644
|
+
title: "Minimize",
|
|
1645
|
+
style: {
|
|
1646
|
+
background: "transparent",
|
|
1647
|
+
border: "none",
|
|
1648
|
+
color: "#666",
|
|
1649
|
+
cursor: "pointer",
|
|
1650
|
+
fontSize: "16px",
|
|
1651
|
+
padding: "4px",
|
|
1652
|
+
lineHeight: 1
|
|
1653
|
+
},
|
|
1654
|
+
children: "_"
|
|
1655
|
+
}
|
|
1656
|
+
),
|
|
1657
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1658
|
+
"button",
|
|
1659
|
+
{
|
|
1660
|
+
onClick: () => setIsOpen(false),
|
|
1661
|
+
title: "Close",
|
|
1662
|
+
style: {
|
|
1663
|
+
background: "transparent",
|
|
1664
|
+
border: "none",
|
|
1665
|
+
color: "#666",
|
|
1666
|
+
cursor: "pointer",
|
|
1667
|
+
fontSize: "18px",
|
|
1668
|
+
padding: "4px",
|
|
1669
|
+
lineHeight: 1
|
|
1670
|
+
},
|
|
1671
|
+
children: "\xD7"
|
|
1672
|
+
}
|
|
1673
|
+
)
|
|
1674
|
+
] })
|
|
1675
|
+
] }),
|
|
1676
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
|
|
1677
|
+
padding: "8px 16px",
|
|
1678
|
+
borderBottom: "1px solid #222",
|
|
1679
|
+
background: "#0f0f0f",
|
|
1680
|
+
display: "flex",
|
|
1681
|
+
gap: "12px"
|
|
1682
|
+
}, children: [
|
|
1683
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1684
|
+
"input",
|
|
1685
|
+
{
|
|
1686
|
+
type: "text",
|
|
1687
|
+
placeholder: "Filter queries...",
|
|
1688
|
+
value: filter,
|
|
1689
|
+
onChange: (e) => setFilter(e.target.value),
|
|
1690
|
+
style: {
|
|
1691
|
+
background: "#1a1a1a",
|
|
1692
|
+
border: "1px solid #333",
|
|
1693
|
+
color: "#fff",
|
|
1694
|
+
padding: "6px 10px",
|
|
1695
|
+
borderRadius: "4px",
|
|
1696
|
+
flex: 1,
|
|
1697
|
+
fontSize: "12px",
|
|
1698
|
+
outline: "none"
|
|
1699
|
+
}
|
|
1700
|
+
}
|
|
1701
|
+
),
|
|
1702
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1703
|
+
"button",
|
|
1704
|
+
{
|
|
1705
|
+
onClick: () => client.invalidateAll(),
|
|
1706
|
+
title: "Invalidate All Queries",
|
|
1707
|
+
style: {
|
|
1708
|
+
background: "#222",
|
|
1709
|
+
border: "1px solid #333",
|
|
1710
|
+
color: "#d69e2e",
|
|
1711
|
+
borderRadius: "4px",
|
|
1712
|
+
padding: "0 12px",
|
|
1713
|
+
cursor: "pointer",
|
|
1714
|
+
fontSize: "12px",
|
|
1715
|
+
fontWeight: 500
|
|
1716
|
+
},
|
|
1717
|
+
children: "\u21BB Invalidate All"
|
|
1718
|
+
}
|
|
1719
|
+
)
|
|
1720
|
+
] }),
|
|
1721
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
|
|
1722
|
+
flex: 1,
|
|
1723
|
+
overflowY: "auto",
|
|
1724
|
+
padding: "8px",
|
|
1725
|
+
display: "flex",
|
|
1726
|
+
flexDirection: "column",
|
|
1727
|
+
gap: "8px",
|
|
1728
|
+
background: "#050505"
|
|
1729
|
+
}, children: entries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
|
|
1730
|
+
padding: "40px",
|
|
1731
|
+
textAlign: "center",
|
|
1732
|
+
color: "#444",
|
|
1733
|
+
fontStyle: "italic"
|
|
1734
|
+
}, children: [
|
|
1735
|
+
"No active queries in cache.",
|
|
1736
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("br", {}),
|
|
1737
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "11px", opacity: 0.7 }, children: "(Note: Only `useQuery` calls appear here. Raw `api.get` calls are not cached globally.)" })
|
|
1738
|
+
] }) : filteredEntries.map(([keyHash, entry]) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1739
|
+
QueryItem,
|
|
1740
|
+
{
|
|
1741
|
+
entry,
|
|
1742
|
+
client,
|
|
1743
|
+
isStale: client.isStale(entry.key)
|
|
1616
1744
|
},
|
|
1617
|
-
|
|
1618
|
-
}
|
|
1619
|
-
|
|
1620
|
-
|
|
1621
|
-
|
|
1622
|
-
flex: 1,
|
|
1623
|
-
overflowY: "auto",
|
|
1624
|
-
padding: "8px",
|
|
1625
|
-
display: "flex",
|
|
1626
|
-
flexDirection: "column",
|
|
1627
|
-
gap: "8px",
|
|
1628
|
-
background: "#050505"
|
|
1629
|
-
}, children: entries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
|
|
1630
|
-
padding: "40px",
|
|
1631
|
-
textAlign: "center",
|
|
1632
|
-
color: "#444",
|
|
1633
|
-
fontStyle: "italic"
|
|
1634
|
-
}, children: "No active queries in cache." }) : filteredEntries.map(([keyHash, entry]) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1635
|
-
QueryItem,
|
|
1636
|
-
{
|
|
1637
|
-
entry,
|
|
1638
|
-
client,
|
|
1639
|
-
isStale: client.isStale(entry.key)
|
|
1640
|
-
},
|
|
1641
|
-
keyHash
|
|
1642
|
-
)) })
|
|
1643
|
-
] });
|
|
1745
|
+
keyHash
|
|
1746
|
+
)) })
|
|
1747
|
+
]
|
|
1748
|
+
}
|
|
1749
|
+
);
|
|
1644
1750
|
}
|
|
1645
1751
|
function QueryItem({ entry, client, isStale }) {
|
|
1646
1752
|
const [expanded, setExpanded] = (0, import_react8.useState)(false);
|
package/dist/index.js
CHANGED
|
@@ -1406,7 +1406,7 @@ function useInfiniteQuery({
|
|
|
1406
1406
|
}
|
|
1407
1407
|
|
|
1408
1408
|
// src/addon/query/devtools.tsx
|
|
1409
|
-
import { useState as useState5, useMemo } from "react";
|
|
1409
|
+
import { useState as useState5, useMemo, useRef as useRef5, useEffect as useEffect6 } from "react";
|
|
1410
1410
|
|
|
1411
1411
|
// src/addon/query/useQueryCache.ts
|
|
1412
1412
|
import { useState as useState4, useEffect as useEffect5 } from "react";
|
|
@@ -1426,9 +1426,32 @@ function useQueryCache() {
|
|
|
1426
1426
|
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
1427
1427
|
function QuantumDevTools() {
|
|
1428
1428
|
const [isOpen, setIsOpen] = useState5(false);
|
|
1429
|
+
const [isMinimized, setIsMinimized] = useState5(false);
|
|
1430
|
+
const [height, setHeight] = useState5(450);
|
|
1429
1431
|
const [filter, setFilter] = useState5("");
|
|
1430
1432
|
const cache = useQueryCache();
|
|
1431
1433
|
const client = useQueryClient();
|
|
1434
|
+
const isResizingRef = useRef5(false);
|
|
1435
|
+
const containerRef = useRef5(null);
|
|
1436
|
+
useEffect6(() => {
|
|
1437
|
+
const handleMouseMove = (e) => {
|
|
1438
|
+
if (!isResizingRef.current) return;
|
|
1439
|
+
const newHeight = window.innerHeight - e.clientY;
|
|
1440
|
+
if (newHeight > 200 && newHeight < window.innerHeight - 50) {
|
|
1441
|
+
setHeight(newHeight);
|
|
1442
|
+
}
|
|
1443
|
+
};
|
|
1444
|
+
const handleMouseUp = () => {
|
|
1445
|
+
isResizingRef.current = false;
|
|
1446
|
+
document.body.style.cursor = "default";
|
|
1447
|
+
};
|
|
1448
|
+
window.addEventListener("mousemove", handleMouseMove);
|
|
1449
|
+
window.addEventListener("mouseup", handleMouseUp);
|
|
1450
|
+
return () => {
|
|
1451
|
+
window.removeEventListener("mousemove", handleMouseMove);
|
|
1452
|
+
window.removeEventListener("mouseup", handleMouseUp);
|
|
1453
|
+
};
|
|
1454
|
+
}, []);
|
|
1432
1455
|
const entries = useMemo(() => Array.from(cache.entries()), [cache]);
|
|
1433
1456
|
const filteredEntries = useMemo(() => {
|
|
1434
1457
|
if (!filter) return entries;
|
|
@@ -1470,129 +1493,212 @@ function QuantumDevTools() {
|
|
|
1470
1493
|
}
|
|
1471
1494
|
);
|
|
1472
1495
|
}
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
|
|
1477
|
-
|
|
1478
|
-
maxWidth: "650px",
|
|
1479
|
-
height: "450px",
|
|
1480
|
-
background: "#0a0a0a",
|
|
1481
|
-
color: "#e0e0e0",
|
|
1482
|
-
borderTopLeftRadius: "12px",
|
|
1483
|
-
boxShadow: "0 -10px 40px rgba(0,0,0,0.5)",
|
|
1484
|
-
zIndex: 9999,
|
|
1485
|
-
display: "flex",
|
|
1486
|
-
flexDirection: "column",
|
|
1487
|
-
fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
|
|
1488
|
-
fontSize: "13px",
|
|
1489
|
-
border: "1px solid #333"
|
|
1490
|
-
}, children: [
|
|
1491
|
-
/* @__PURE__ */ jsxs("div", { style: {
|
|
1492
|
-
padding: "12px 16px",
|
|
1493
|
-
borderBottom: "1px solid #222",
|
|
1494
|
-
display: "flex",
|
|
1495
|
-
justifyContent: "space-between",
|
|
1496
|
-
alignItems: "center",
|
|
1496
|
+
if (isMinimized) {
|
|
1497
|
+
return /* @__PURE__ */ jsxs("div", { style: {
|
|
1498
|
+
position: "fixed",
|
|
1499
|
+
bottom: "20px",
|
|
1500
|
+
right: "20px",
|
|
1497
1501
|
background: "#111",
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
/* @__PURE__ */ jsx2("span", { style: { fontWeight: 600, letterSpacing: "-0.5px" }, children: "Quantum DevTools" }),
|
|
1503
|
-
/* @__PURE__ */ jsx2("span", { style: {
|
|
1504
|
-
background: "#222",
|
|
1505
|
-
padding: "2px 6px",
|
|
1506
|
-
borderRadius: "4px",
|
|
1507
|
-
fontSize: "10px",
|
|
1508
|
-
color: "#666"
|
|
1509
|
-
}, children: "v1.2.2" })
|
|
1510
|
-
] }),
|
|
1511
|
-
/* @__PURE__ */ jsx2(
|
|
1512
|
-
"button",
|
|
1513
|
-
{
|
|
1514
|
-
onClick: () => setIsOpen(false),
|
|
1515
|
-
style: {
|
|
1516
|
-
background: "transparent",
|
|
1517
|
-
border: "none",
|
|
1518
|
-
color: "#666",
|
|
1519
|
-
cursor: "pointer",
|
|
1520
|
-
fontSize: "20px",
|
|
1521
|
-
padding: "4px",
|
|
1522
|
-
lineHeight: 1
|
|
1523
|
-
},
|
|
1524
|
-
children: "\xD7"
|
|
1525
|
-
}
|
|
1526
|
-
)
|
|
1527
|
-
] }),
|
|
1528
|
-
/* @__PURE__ */ jsxs("div", { style: {
|
|
1529
|
-
padding: "8px 16px",
|
|
1530
|
-
borderBottom: "1px solid #222",
|
|
1531
|
-
background: "#0f0f0f",
|
|
1502
|
+
border: "1px solid #333",
|
|
1503
|
+
borderRadius: "8px",
|
|
1504
|
+
padding: "8px 12px",
|
|
1505
|
+
zIndex: 9999,
|
|
1532
1506
|
display: "flex",
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
|
|
1537
|
-
|
|
1538
|
-
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1507
|
+
alignItems: "center",
|
|
1508
|
+
gap: "10px",
|
|
1509
|
+
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4)",
|
|
1510
|
+
fontFamily: "monospace",
|
|
1511
|
+
color: "#e0e0e0",
|
|
1512
|
+
cursor: "pointer"
|
|
1513
|
+
}, onClick: () => setIsMinimized(false), children: [
|
|
1514
|
+
/* @__PURE__ */ jsx2("span", { style: { color: "#b0fb5d" }, children: "\u26A1\uFE0F" }),
|
|
1515
|
+
/* @__PURE__ */ jsx2("span", { style: { fontSize: "12px" }, children: "DevTools" }),
|
|
1516
|
+
/* @__PURE__ */ jsxs("span", { style: {
|
|
1517
|
+
background: "#333",
|
|
1518
|
+
padding: "2px 6px",
|
|
1519
|
+
borderRadius: "4px",
|
|
1520
|
+
fontSize: "10px"
|
|
1521
|
+
}, children: [
|
|
1522
|
+
entries.length,
|
|
1523
|
+
" queries"
|
|
1524
|
+
] })
|
|
1525
|
+
] });
|
|
1526
|
+
}
|
|
1527
|
+
return /* @__PURE__ */ jsxs(
|
|
1528
|
+
"div",
|
|
1529
|
+
{
|
|
1530
|
+
ref: containerRef,
|
|
1531
|
+
style: {
|
|
1532
|
+
position: "fixed",
|
|
1533
|
+
bottom: 0,
|
|
1534
|
+
right: 0,
|
|
1535
|
+
width: "100%",
|
|
1536
|
+
height: `${height}px`,
|
|
1537
|
+
background: "#0a0a0a",
|
|
1538
|
+
color: "#e0e0e0",
|
|
1539
|
+
borderTopLeftRadius: "12px",
|
|
1540
|
+
borderTopRightRadius: "12px",
|
|
1541
|
+
boxShadow: "0 -10px 40px rgba(0,0,0,0.5)",
|
|
1542
|
+
zIndex: 9999,
|
|
1543
|
+
display: "flex",
|
|
1544
|
+
flexDirection: "column",
|
|
1545
|
+
fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
|
|
1546
|
+
fontSize: "13px",
|
|
1547
|
+
borderTop: "1px solid #333"
|
|
1548
|
+
},
|
|
1549
|
+
children: [
|
|
1550
|
+
/* @__PURE__ */ jsx2(
|
|
1551
|
+
"div",
|
|
1552
|
+
{
|
|
1553
|
+
onMouseDown: () => {
|
|
1554
|
+
isResizingRef.current = true;
|
|
1555
|
+
document.body.style.cursor = "ns-resize";
|
|
1556
|
+
},
|
|
1557
|
+
style: {
|
|
1558
|
+
height: "6px",
|
|
1559
|
+
width: "100%",
|
|
1560
|
+
cursor: "ns-resize",
|
|
1561
|
+
position: "absolute",
|
|
1562
|
+
top: "-3px",
|
|
1563
|
+
left: 0,
|
|
1564
|
+
zIndex: 10
|
|
1565
|
+
// debugging color: background: 'red', opacity: 0.2
|
|
1566
|
+
}
|
|
1551
1567
|
}
|
|
1552
|
-
|
|
1553
|
-
|
|
1554
|
-
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
|
|
1558
|
-
|
|
1559
|
-
|
|
1560
|
-
|
|
1561
|
-
|
|
1562
|
-
|
|
1563
|
-
|
|
1564
|
-
|
|
1565
|
-
|
|
1566
|
-
|
|
1567
|
-
|
|
1568
|
+
),
|
|
1569
|
+
/* @__PURE__ */ jsxs("div", { style: {
|
|
1570
|
+
padding: "12px 16px",
|
|
1571
|
+
borderBottom: "1px solid #222",
|
|
1572
|
+
display: "flex",
|
|
1573
|
+
justifyContent: "space-between",
|
|
1574
|
+
alignItems: "center",
|
|
1575
|
+
background: "#111",
|
|
1576
|
+
borderTopLeftRadius: "12px",
|
|
1577
|
+
borderTopRightRadius: "12px",
|
|
1578
|
+
userSelect: "none"
|
|
1579
|
+
}, children: [
|
|
1580
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
|
|
1581
|
+
/* @__PURE__ */ jsx2("span", { style: { color: "#b0fb5d", fontSize: "16px" }, children: "\u26A1\uFE0F" }),
|
|
1582
|
+
/* @__PURE__ */ jsx2("span", { style: { fontWeight: 600, letterSpacing: "-0.5px" }, children: "Quantum DevTools" }),
|
|
1583
|
+
/* @__PURE__ */ jsx2("span", { style: {
|
|
1584
|
+
background: "#222",
|
|
1585
|
+
padding: "2px 6px",
|
|
1586
|
+
borderRadius: "4px",
|
|
1587
|
+
fontSize: "10px",
|
|
1588
|
+
color: "#666"
|
|
1589
|
+
}, children: "v1.2.3" })
|
|
1590
|
+
] }),
|
|
1591
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
|
|
1592
|
+
/* @__PURE__ */ jsx2(
|
|
1593
|
+
"button",
|
|
1594
|
+
{
|
|
1595
|
+
onClick: () => setIsMinimized(true),
|
|
1596
|
+
title: "Minimize",
|
|
1597
|
+
style: {
|
|
1598
|
+
background: "transparent",
|
|
1599
|
+
border: "none",
|
|
1600
|
+
color: "#666",
|
|
1601
|
+
cursor: "pointer",
|
|
1602
|
+
fontSize: "16px",
|
|
1603
|
+
padding: "4px",
|
|
1604
|
+
lineHeight: 1
|
|
1605
|
+
},
|
|
1606
|
+
children: "_"
|
|
1607
|
+
}
|
|
1608
|
+
),
|
|
1609
|
+
/* @__PURE__ */ jsx2(
|
|
1610
|
+
"button",
|
|
1611
|
+
{
|
|
1612
|
+
onClick: () => setIsOpen(false),
|
|
1613
|
+
title: "Close",
|
|
1614
|
+
style: {
|
|
1615
|
+
background: "transparent",
|
|
1616
|
+
border: "none",
|
|
1617
|
+
color: "#666",
|
|
1618
|
+
cursor: "pointer",
|
|
1619
|
+
fontSize: "18px",
|
|
1620
|
+
padding: "4px",
|
|
1621
|
+
lineHeight: 1
|
|
1622
|
+
},
|
|
1623
|
+
children: "\xD7"
|
|
1624
|
+
}
|
|
1625
|
+
)
|
|
1626
|
+
] })
|
|
1627
|
+
] }),
|
|
1628
|
+
/* @__PURE__ */ jsxs("div", { style: {
|
|
1629
|
+
padding: "8px 16px",
|
|
1630
|
+
borderBottom: "1px solid #222",
|
|
1631
|
+
background: "#0f0f0f",
|
|
1632
|
+
display: "flex",
|
|
1633
|
+
gap: "12px"
|
|
1634
|
+
}, children: [
|
|
1635
|
+
/* @__PURE__ */ jsx2(
|
|
1636
|
+
"input",
|
|
1637
|
+
{
|
|
1638
|
+
type: "text",
|
|
1639
|
+
placeholder: "Filter queries...",
|
|
1640
|
+
value: filter,
|
|
1641
|
+
onChange: (e) => setFilter(e.target.value),
|
|
1642
|
+
style: {
|
|
1643
|
+
background: "#1a1a1a",
|
|
1644
|
+
border: "1px solid #333",
|
|
1645
|
+
color: "#fff",
|
|
1646
|
+
padding: "6px 10px",
|
|
1647
|
+
borderRadius: "4px",
|
|
1648
|
+
flex: 1,
|
|
1649
|
+
fontSize: "12px",
|
|
1650
|
+
outline: "none"
|
|
1651
|
+
}
|
|
1652
|
+
}
|
|
1653
|
+
),
|
|
1654
|
+
/* @__PURE__ */ jsx2(
|
|
1655
|
+
"button",
|
|
1656
|
+
{
|
|
1657
|
+
onClick: () => client.invalidateAll(),
|
|
1658
|
+
title: "Invalidate All Queries",
|
|
1659
|
+
style: {
|
|
1660
|
+
background: "#222",
|
|
1661
|
+
border: "1px solid #333",
|
|
1662
|
+
color: "#d69e2e",
|
|
1663
|
+
borderRadius: "4px",
|
|
1664
|
+
padding: "0 12px",
|
|
1665
|
+
cursor: "pointer",
|
|
1666
|
+
fontSize: "12px",
|
|
1667
|
+
fontWeight: 500
|
|
1668
|
+
},
|
|
1669
|
+
children: "\u21BB Invalidate All"
|
|
1670
|
+
}
|
|
1671
|
+
)
|
|
1672
|
+
] }),
|
|
1673
|
+
/* @__PURE__ */ jsx2("div", { style: {
|
|
1674
|
+
flex: 1,
|
|
1675
|
+
overflowY: "auto",
|
|
1676
|
+
padding: "8px",
|
|
1677
|
+
display: "flex",
|
|
1678
|
+
flexDirection: "column",
|
|
1679
|
+
gap: "8px",
|
|
1680
|
+
background: "#050505"
|
|
1681
|
+
}, children: entries.length === 0 ? /* @__PURE__ */ jsxs("div", { style: {
|
|
1682
|
+
padding: "40px",
|
|
1683
|
+
textAlign: "center",
|
|
1684
|
+
color: "#444",
|
|
1685
|
+
fontStyle: "italic"
|
|
1686
|
+
}, children: [
|
|
1687
|
+
"No active queries in cache.",
|
|
1688
|
+
/* @__PURE__ */ jsx2("br", {}),
|
|
1689
|
+
/* @__PURE__ */ jsx2("span", { style: { fontSize: "11px", opacity: 0.7 }, children: "(Note: Only `useQuery` calls appear here. Raw `api.get` calls are not cached globally.)" })
|
|
1690
|
+
] }) : filteredEntries.map(([keyHash, entry]) => /* @__PURE__ */ jsx2(
|
|
1691
|
+
QueryItem,
|
|
1692
|
+
{
|
|
1693
|
+
entry,
|
|
1694
|
+
client,
|
|
1695
|
+
isStale: client.isStale(entry.key)
|
|
1568
1696
|
},
|
|
1569
|
-
|
|
1570
|
-
}
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
flex: 1,
|
|
1575
|
-
overflowY: "auto",
|
|
1576
|
-
padding: "8px",
|
|
1577
|
-
display: "flex",
|
|
1578
|
-
flexDirection: "column",
|
|
1579
|
-
gap: "8px",
|
|
1580
|
-
background: "#050505"
|
|
1581
|
-
}, children: entries.length === 0 ? /* @__PURE__ */ jsx2("div", { style: {
|
|
1582
|
-
padding: "40px",
|
|
1583
|
-
textAlign: "center",
|
|
1584
|
-
color: "#444",
|
|
1585
|
-
fontStyle: "italic"
|
|
1586
|
-
}, children: "No active queries in cache." }) : filteredEntries.map(([keyHash, entry]) => /* @__PURE__ */ jsx2(
|
|
1587
|
-
QueryItem,
|
|
1588
|
-
{
|
|
1589
|
-
entry,
|
|
1590
|
-
client,
|
|
1591
|
-
isStale: client.isStale(entry.key)
|
|
1592
|
-
},
|
|
1593
|
-
keyHash
|
|
1594
|
-
)) })
|
|
1595
|
-
] });
|
|
1697
|
+
keyHash
|
|
1698
|
+
)) })
|
|
1699
|
+
]
|
|
1700
|
+
}
|
|
1701
|
+
);
|
|
1596
1702
|
}
|
|
1597
1703
|
function QueryItem({ entry, client, isStale }) {
|
|
1598
1704
|
const [expanded, setExpanded] = useState5(false);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@braine/quantum-query",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -36,9 +36,17 @@
|
|
|
36
36
|
"require": "./dist/index.cjs"
|
|
37
37
|
}
|
|
38
38
|
},
|
|
39
|
+
"repository": {
|
|
40
|
+
"type": "git",
|
|
41
|
+
"url": "git+https://github.com/piyas-braine/-braine-quantum-query.git"
|
|
42
|
+
},
|
|
39
43
|
"types": "./dist/index.d.ts",
|
|
40
|
-
"author": "
|
|
44
|
+
"author": "Piyas Talukder",
|
|
41
45
|
"license": "MIT",
|
|
46
|
+
"bugs": {
|
|
47
|
+
"url": "https://github.com/piyas-braine/-braine-quantum-query/issues"
|
|
48
|
+
},
|
|
49
|
+
"homepage": "https://piyas-braine.github.io/-braine-quantum-query",
|
|
42
50
|
"description": "A high-performance, proxy-based state management library with built-in async handling.",
|
|
43
51
|
"devDependencies": {
|
|
44
52
|
"@testing-library/jest-dom": "^6.9.1",
|