@braine/quantum-query 1.2.2 → 1.2.4
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/README.md +26 -0
- package/dist/index.cjs +368 -95
- package/dist/index.d.cts +8 -0
- package/dist/index.d.ts +8 -0
- package/dist/index.js +369 -96
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -132,6 +132,32 @@ const user = await api.get<User>('/me');
|
|
|
132
132
|
|
|
133
133
|
---
|
|
134
134
|
|
|
135
|
+
## 🔐 Authentication (Built-in)
|
|
136
|
+
|
|
137
|
+
No more interceptors. We handle token injection and **automatic refresh on 401** errors out of the box.
|
|
138
|
+
|
|
139
|
+
```typescript
|
|
140
|
+
const client = createClient({
|
|
141
|
+
baseURL: 'https://api.myapp.com',
|
|
142
|
+
auth: {
|
|
143
|
+
// 1. Inject Token
|
|
144
|
+
getToken: () => localStorage.getItem('token'),
|
|
145
|
+
|
|
146
|
+
// 2. Refresh & Retry (Auto-called on 401)
|
|
147
|
+
onTokenExpired: async (client) => {
|
|
148
|
+
const newToken = await refreshToken();
|
|
149
|
+
localStorage.setItem('token', newToken);
|
|
150
|
+
return newToken; // Original request is automatically retried
|
|
151
|
+
},
|
|
152
|
+
|
|
153
|
+
// 3. Redirect on Fail
|
|
154
|
+
onAuthFailed: () => window.location.href = '/login'
|
|
155
|
+
}
|
|
156
|
+
});
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
---
|
|
160
|
+
|
|
135
161
|
## 🛡️ Data Integrity (Runtime Safety)
|
|
136
162
|
|
|
137
163
|
Don't trust the backend. Validate it. We support **Zod**, **Valibot**, or **Yup** schemas directly in the hook.
|
package/dist/index.cjs
CHANGED
|
@@ -793,6 +793,21 @@ var QueryCache = class {
|
|
|
793
793
|
this.deduplicationCache.set(key, promise);
|
|
794
794
|
return promise;
|
|
795
795
|
};
|
|
796
|
+
/**
|
|
797
|
+
* Invalidate all queries
|
|
798
|
+
*/
|
|
799
|
+
invalidateAll = () => {
|
|
800
|
+
for (const key of this.signals.keys()) {
|
|
801
|
+
this.signals.get(key)?.set(void 0);
|
|
802
|
+
}
|
|
803
|
+
};
|
|
804
|
+
/**
|
|
805
|
+
* Remove a specific query from cache
|
|
806
|
+
*/
|
|
807
|
+
remove = (queryKey) => {
|
|
808
|
+
const key = this.generateKey(queryKey);
|
|
809
|
+
this.signals.delete(key);
|
|
810
|
+
};
|
|
796
811
|
/**
|
|
797
812
|
* Invalidate queries matching the key prefix
|
|
798
813
|
* Marks them as undefined to trigger refetches without breaking subscriptions
|
|
@@ -1448,7 +1463,7 @@ function useQueryCache() {
|
|
|
1448
1463
|
const [cache, setCache] = (0, import_react7.useState)(client.getAll());
|
|
1449
1464
|
(0, import_react7.useEffect)(() => {
|
|
1450
1465
|
const interval = setInterval(() => {
|
|
1451
|
-
setCache(
|
|
1466
|
+
setCache(new Map(client.getAll()));
|
|
1452
1467
|
}, 500);
|
|
1453
1468
|
return () => clearInterval(interval);
|
|
1454
1469
|
}, [client]);
|
|
@@ -1459,8 +1474,40 @@ function useQueryCache() {
|
|
|
1459
1474
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
1460
1475
|
function QuantumDevTools() {
|
|
1461
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);
|
|
1479
|
+
const [filter, setFilter] = (0, import_react8.useState)("");
|
|
1462
1480
|
const cache = useQueryCache();
|
|
1463
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
|
+
}, []);
|
|
1503
|
+
const entries = (0, import_react8.useMemo)(() => Array.from(cache.entries()), [cache]);
|
|
1504
|
+
const filteredEntries = (0, import_react8.useMemo)(() => {
|
|
1505
|
+
if (!filter) return entries;
|
|
1506
|
+
const search = filter.toLowerCase();
|
|
1507
|
+
return entries.filter(
|
|
1508
|
+
([_, entry]) => entry.key.some((k) => String(k).toLowerCase().includes(search))
|
|
1509
|
+
);
|
|
1510
|
+
}, [entries, filter]);
|
|
1464
1511
|
if (!isOpen) {
|
|
1465
1512
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1466
1513
|
"button",
|
|
@@ -1468,111 +1515,320 @@ function QuantumDevTools() {
|
|
|
1468
1515
|
onClick: () => setIsOpen(true),
|
|
1469
1516
|
style: {
|
|
1470
1517
|
position: "fixed",
|
|
1471
|
-
bottom: "
|
|
1472
|
-
right: "
|
|
1473
|
-
background: "#
|
|
1474
|
-
color: "#
|
|
1475
|
-
|
|
1518
|
+
bottom: "20px",
|
|
1519
|
+
right: "20px",
|
|
1520
|
+
background: "#111",
|
|
1521
|
+
color: "#b0fb5d",
|
|
1522
|
+
// Quantum Green
|
|
1523
|
+
border: "1px solid #333",
|
|
1476
1524
|
borderRadius: "50%",
|
|
1477
|
-
width: "
|
|
1478
|
-
height: "
|
|
1525
|
+
width: "48px",
|
|
1526
|
+
height: "48px",
|
|
1479
1527
|
cursor: "pointer",
|
|
1480
1528
|
zIndex: 9999,
|
|
1481
|
-
boxShadow: "0
|
|
1529
|
+
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4)",
|
|
1482
1530
|
fontSize: "20px",
|
|
1483
1531
|
display: "flex",
|
|
1484
1532
|
alignItems: "center",
|
|
1485
|
-
justifyContent: "center"
|
|
1533
|
+
justifyContent: "center",
|
|
1534
|
+
transition: "transform 0.2s",
|
|
1535
|
+
fontFamily: "monospace"
|
|
1486
1536
|
},
|
|
1537
|
+
onMouseEnter: (e) => e.currentTarget.style.transform = "scale(1.1)",
|
|
1538
|
+
onMouseLeave: (e) => e.currentTarget.style.transform = "scale(1)",
|
|
1539
|
+
title: "Open Quantum DevTools",
|
|
1487
1540
|
children: "\u26A1\uFE0F"
|
|
1488
1541
|
}
|
|
1489
1542
|
);
|
|
1490
1543
|
}
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
boxShadow: "0 -4px 20px rgba(0,0,0,0.3)",
|
|
1502
|
-
zIndex: 9999,
|
|
1503
|
-
display: "flex",
|
|
1504
|
-
flexDirection: "column",
|
|
1505
|
-
fontFamily: "monospace"
|
|
1506
|
-
}, children: [
|
|
1507
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
|
|
1508
|
-
padding: "10px",
|
|
1509
|
-
borderBottom: "1px solid #333",
|
|
1544
|
+
if (isMinimized) {
|
|
1545
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
|
|
1546
|
+
position: "fixed",
|
|
1547
|
+
bottom: "20px",
|
|
1548
|
+
right: "20px",
|
|
1549
|
+
background: "#111",
|
|
1550
|
+
border: "1px solid #333",
|
|
1551
|
+
borderRadius: "8px",
|
|
1552
|
+
padding: "8px 12px",
|
|
1553
|
+
zIndex: 9999,
|
|
1510
1554
|
display: "flex",
|
|
1511
|
-
justifyContent: "space-between",
|
|
1512
1555
|
alignItems: "center",
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
|
|
1518
|
-
|
|
1519
|
-
|
|
1520
|
-
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
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
|
+
}
|
|
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)
|
|
1527
1744
|
},
|
|
1528
|
-
|
|
1529
|
-
}
|
|
1530
|
-
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
|
|
1534
|
-
|
|
1745
|
+
keyHash
|
|
1746
|
+
)) })
|
|
1747
|
+
]
|
|
1748
|
+
}
|
|
1749
|
+
);
|
|
1750
|
+
}
|
|
1751
|
+
function QueryItem({ entry, client, isStale }) {
|
|
1752
|
+
const [expanded, setExpanded] = (0, import_react8.useState)(false);
|
|
1753
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
|
|
1754
|
+
background: "#111",
|
|
1755
|
+
borderRadius: "6px",
|
|
1756
|
+
border: "1px solid #222",
|
|
1757
|
+
overflow: "hidden"
|
|
1758
|
+
}, children: [
|
|
1759
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
1760
|
+
"div",
|
|
1761
|
+
{
|
|
1762
|
+
onClick: () => setExpanded(!expanded),
|
|
1763
|
+
style: {
|
|
1764
|
+
padding: "8px 12px",
|
|
1765
|
+
display: "flex",
|
|
1766
|
+
alignItems: "center",
|
|
1767
|
+
justifyContent: "space-between",
|
|
1768
|
+
cursor: "pointer",
|
|
1769
|
+
background: expanded ? "#161616" : "transparent"
|
|
1770
|
+
},
|
|
1771
|
+
children: [
|
|
1772
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: "10px", alignItems: "center", overflow: "hidden" }, children: [
|
|
1773
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: {
|
|
1774
|
+
color: isStale ? "#d69e2e" : "#b0fb5d",
|
|
1775
|
+
fontSize: "14px",
|
|
1776
|
+
fontWeight: "bold",
|
|
1777
|
+
minWidth: "10px"
|
|
1778
|
+
}, children: isStale ? "\u2022" : "\u2022" }),
|
|
1779
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: {
|
|
1780
|
+
color: "#e0e0e0",
|
|
1781
|
+
fontWeight: 500,
|
|
1782
|
+
whiteSpace: "nowrap",
|
|
1783
|
+
overflow: "hidden",
|
|
1784
|
+
textOverflow: "ellipsis"
|
|
1785
|
+
}, children: [
|
|
1786
|
+
"['",
|
|
1787
|
+
entry.key.join("', '"),
|
|
1788
|
+
"']"
|
|
1789
|
+
] })
|
|
1790
|
+
] }),
|
|
1791
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
|
|
1792
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: {
|
|
1793
|
+
fontSize: "10px",
|
|
1794
|
+
padding: "2px 6px",
|
|
1795
|
+
borderRadius: "3px",
|
|
1796
|
+
background: isStale ? "rgba(214, 158, 46, 0.15)" : "rgba(176, 251, 93, 0.15)",
|
|
1797
|
+
color: isStale ? "#d69e2e" : "#b0fb5d",
|
|
1798
|
+
border: `1px solid ${isStale ? "rgba(214, 158, 46, 0.3)" : "rgba(176, 251, 93, 0.3)"}`
|
|
1799
|
+
}, children: isStale ? "STALE" : "FRESH" }),
|
|
1800
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#666", fontSize: "10px" }, children: expanded ? "\u25BC" : "\u25B6" })
|
|
1801
|
+
] })
|
|
1802
|
+
]
|
|
1803
|
+
}
|
|
1804
|
+
),
|
|
1805
|
+
expanded && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
|
|
1535
1806
|
padding: "10px",
|
|
1536
|
-
|
|
1537
|
-
|
|
1538
|
-
gap: "8px"
|
|
1539
|
-
}, children: Array.from(cache.entries()).length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { padding: "20px", textAlign: "center", color: "#666" }, children: "No active queries" }) : Array.from(cache.entries()).map(([keyHash, entry]) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
|
|
1540
|
-
background: "#2a2a2a",
|
|
1541
|
-
borderRadius: "4px",
|
|
1542
|
-
padding: "8px",
|
|
1543
|
-
border: "1px solid #333"
|
|
1807
|
+
borderTop: "1px solid #222",
|
|
1808
|
+
background: "#0a0a0a"
|
|
1544
1809
|
}, children: [
|
|
1545
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
color: "#000"
|
|
1553
|
-
}, children: client.isStale(entry.key) ? "STALE" : "FRESH" }) })
|
|
1554
|
-
] }),
|
|
1555
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
|
|
1556
|
-
fontSize: "11px",
|
|
1557
|
-
color: "#ddd",
|
|
1558
|
-
whiteSpace: "pre-wrap",
|
|
1559
|
-
maxHeight: "100px",
|
|
1560
|
-
overflow: "hidden",
|
|
1561
|
-
opacity: 0.8
|
|
1562
|
-
}, children: JSON.stringify(entry.data, null, 2) }),
|
|
1563
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginTop: "8px", display: "flex", gap: "8px" }, children: [
|
|
1810
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
|
|
1811
|
+
display: "flex",
|
|
1812
|
+
gap: "8px",
|
|
1813
|
+
marginBottom: "10px",
|
|
1814
|
+
borderBottom: "1px solid #222",
|
|
1815
|
+
paddingBottom: "8px"
|
|
1816
|
+
}, children: [
|
|
1564
1817
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1565
1818
|
"button",
|
|
1566
1819
|
{
|
|
1567
|
-
onClick: () =>
|
|
1820
|
+
onClick: (e) => {
|
|
1821
|
+
e.stopPropagation();
|
|
1822
|
+
client.invalidate(entry.key);
|
|
1823
|
+
},
|
|
1568
1824
|
style: {
|
|
1569
|
-
background: "#
|
|
1570
|
-
border: "
|
|
1571
|
-
color: "#
|
|
1572
|
-
padding: "4px
|
|
1573
|
-
borderRadius: "
|
|
1825
|
+
background: "#222",
|
|
1826
|
+
border: "1px solid #333",
|
|
1827
|
+
color: "#d69e2e",
|
|
1828
|
+
padding: "4px 10px",
|
|
1829
|
+
borderRadius: "4px",
|
|
1574
1830
|
cursor: "pointer",
|
|
1575
|
-
fontSize: "
|
|
1831
|
+
fontSize: "11px"
|
|
1576
1832
|
},
|
|
1577
1833
|
children: "Invalidate"
|
|
1578
1834
|
}
|
|
@@ -1580,23 +1836,40 @@ function QuantumDevTools() {
|
|
|
1580
1836
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1581
1837
|
"button",
|
|
1582
1838
|
{
|
|
1583
|
-
onClick: () => {
|
|
1584
|
-
|
|
1839
|
+
onClick: (e) => {
|
|
1840
|
+
e.stopPropagation();
|
|
1841
|
+
client.remove(entry.key);
|
|
1585
1842
|
},
|
|
1586
1843
|
style: {
|
|
1587
|
-
background: "#
|
|
1588
|
-
border: "
|
|
1589
|
-
color: "#
|
|
1590
|
-
padding: "4px
|
|
1591
|
-
borderRadius: "
|
|
1844
|
+
background: "#222",
|
|
1845
|
+
border: "1px solid #333",
|
|
1846
|
+
color: "#ff4d4f",
|
|
1847
|
+
padding: "4px 10px",
|
|
1848
|
+
borderRadius: "4px",
|
|
1592
1849
|
cursor: "pointer",
|
|
1593
|
-
fontSize: "
|
|
1850
|
+
fontSize: "11px"
|
|
1594
1851
|
},
|
|
1595
|
-
children: "
|
|
1852
|
+
children: "Remove"
|
|
1596
1853
|
}
|
|
1597
1854
|
)
|
|
1855
|
+
] }),
|
|
1856
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("pre", { style: {
|
|
1857
|
+
margin: 0,
|
|
1858
|
+
fontSize: "11px",
|
|
1859
|
+
color: "#a0a0a0",
|
|
1860
|
+
overflowX: "auto",
|
|
1861
|
+
fontFamily: "monospace"
|
|
1862
|
+
}, children: JSON.stringify(entry.data, null, 2) }) }),
|
|
1863
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
|
|
1864
|
+
marginTop: "8px",
|
|
1865
|
+
fontSize: "10px",
|
|
1866
|
+
color: "#444",
|
|
1867
|
+
textAlign: "right"
|
|
1868
|
+
}, children: [
|
|
1869
|
+
"Updated: ",
|
|
1870
|
+
new Date(entry.updatedAt).toLocaleTimeString()
|
|
1598
1871
|
] })
|
|
1599
|
-
] }
|
|
1872
|
+
] })
|
|
1600
1873
|
] });
|
|
1601
1874
|
}
|
|
1602
1875
|
// Annotate the CommonJS export names for ESM import in node:
|
package/dist/index.d.cts
CHANGED
|
@@ -183,6 +183,14 @@ declare class QueryCache {
|
|
|
183
183
|
* If a request for the same key is already in flight, returns the existing promise.
|
|
184
184
|
*/
|
|
185
185
|
fetch: <T>(queryKey: QueryKeyInput, fn: () => Promise<T>) => Promise<T>;
|
|
186
|
+
/**
|
|
187
|
+
* Invalidate all queries
|
|
188
|
+
*/
|
|
189
|
+
invalidateAll: () => void;
|
|
190
|
+
/**
|
|
191
|
+
* Remove a specific query from cache
|
|
192
|
+
*/
|
|
193
|
+
remove: (queryKey: QueryKeyInput) => void;
|
|
186
194
|
/**
|
|
187
195
|
* Invalidate queries matching the key prefix
|
|
188
196
|
* Marks them as undefined to trigger refetches without breaking subscriptions
|
package/dist/index.d.ts
CHANGED
|
@@ -183,6 +183,14 @@ declare class QueryCache {
|
|
|
183
183
|
* If a request for the same key is already in flight, returns the existing promise.
|
|
184
184
|
*/
|
|
185
185
|
fetch: <T>(queryKey: QueryKeyInput, fn: () => Promise<T>) => Promise<T>;
|
|
186
|
+
/**
|
|
187
|
+
* Invalidate all queries
|
|
188
|
+
*/
|
|
189
|
+
invalidateAll: () => void;
|
|
190
|
+
/**
|
|
191
|
+
* Remove a specific query from cache
|
|
192
|
+
*/
|
|
193
|
+
remove: (queryKey: QueryKeyInput) => void;
|
|
186
194
|
/**
|
|
187
195
|
* Invalidate queries matching the key prefix
|
|
188
196
|
* Marks them as undefined to trigger refetches without breaking subscriptions
|
package/dist/index.js
CHANGED
|
@@ -745,6 +745,21 @@ var QueryCache = class {
|
|
|
745
745
|
this.deduplicationCache.set(key, promise);
|
|
746
746
|
return promise;
|
|
747
747
|
};
|
|
748
|
+
/**
|
|
749
|
+
* Invalidate all queries
|
|
750
|
+
*/
|
|
751
|
+
invalidateAll = () => {
|
|
752
|
+
for (const key of this.signals.keys()) {
|
|
753
|
+
this.signals.get(key)?.set(void 0);
|
|
754
|
+
}
|
|
755
|
+
};
|
|
756
|
+
/**
|
|
757
|
+
* Remove a specific query from cache
|
|
758
|
+
*/
|
|
759
|
+
remove = (queryKey) => {
|
|
760
|
+
const key = this.generateKey(queryKey);
|
|
761
|
+
this.signals.delete(key);
|
|
762
|
+
};
|
|
748
763
|
/**
|
|
749
764
|
* Invalidate queries matching the key prefix
|
|
750
765
|
* Marks them as undefined to trigger refetches without breaking subscriptions
|
|
@@ -1391,7 +1406,7 @@ function useInfiniteQuery({
|
|
|
1391
1406
|
}
|
|
1392
1407
|
|
|
1393
1408
|
// src/addon/query/devtools.tsx
|
|
1394
|
-
import { useState as useState5 } from "react";
|
|
1409
|
+
import { useState as useState5, useMemo, useRef as useRef5, useEffect as useEffect6 } from "react";
|
|
1395
1410
|
|
|
1396
1411
|
// src/addon/query/useQueryCache.ts
|
|
1397
1412
|
import { useState as useState4, useEffect as useEffect5 } from "react";
|
|
@@ -1400,7 +1415,7 @@ function useQueryCache() {
|
|
|
1400
1415
|
const [cache, setCache] = useState4(client.getAll());
|
|
1401
1416
|
useEffect5(() => {
|
|
1402
1417
|
const interval = setInterval(() => {
|
|
1403
|
-
setCache(
|
|
1418
|
+
setCache(new Map(client.getAll()));
|
|
1404
1419
|
}, 500);
|
|
1405
1420
|
return () => clearInterval(interval);
|
|
1406
1421
|
}, [client]);
|
|
@@ -1411,8 +1426,40 @@ function useQueryCache() {
|
|
|
1411
1426
|
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
1412
1427
|
function QuantumDevTools() {
|
|
1413
1428
|
const [isOpen, setIsOpen] = useState5(false);
|
|
1429
|
+
const [isMinimized, setIsMinimized] = useState5(false);
|
|
1430
|
+
const [height, setHeight] = useState5(450);
|
|
1431
|
+
const [filter, setFilter] = useState5("");
|
|
1414
1432
|
const cache = useQueryCache();
|
|
1415
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
|
+
}, []);
|
|
1455
|
+
const entries = useMemo(() => Array.from(cache.entries()), [cache]);
|
|
1456
|
+
const filteredEntries = useMemo(() => {
|
|
1457
|
+
if (!filter) return entries;
|
|
1458
|
+
const search = filter.toLowerCase();
|
|
1459
|
+
return entries.filter(
|
|
1460
|
+
([_, entry]) => entry.key.some((k) => String(k).toLowerCase().includes(search))
|
|
1461
|
+
);
|
|
1462
|
+
}, [entries, filter]);
|
|
1416
1463
|
if (!isOpen) {
|
|
1417
1464
|
return /* @__PURE__ */ jsx2(
|
|
1418
1465
|
"button",
|
|
@@ -1420,111 +1467,320 @@ function QuantumDevTools() {
|
|
|
1420
1467
|
onClick: () => setIsOpen(true),
|
|
1421
1468
|
style: {
|
|
1422
1469
|
position: "fixed",
|
|
1423
|
-
bottom: "
|
|
1424
|
-
right: "
|
|
1425
|
-
background: "#
|
|
1426
|
-
color: "#
|
|
1427
|
-
|
|
1470
|
+
bottom: "20px",
|
|
1471
|
+
right: "20px",
|
|
1472
|
+
background: "#111",
|
|
1473
|
+
color: "#b0fb5d",
|
|
1474
|
+
// Quantum Green
|
|
1475
|
+
border: "1px solid #333",
|
|
1428
1476
|
borderRadius: "50%",
|
|
1429
|
-
width: "
|
|
1430
|
-
height: "
|
|
1477
|
+
width: "48px",
|
|
1478
|
+
height: "48px",
|
|
1431
1479
|
cursor: "pointer",
|
|
1432
1480
|
zIndex: 9999,
|
|
1433
|
-
boxShadow: "0
|
|
1481
|
+
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4)",
|
|
1434
1482
|
fontSize: "20px",
|
|
1435
1483
|
display: "flex",
|
|
1436
1484
|
alignItems: "center",
|
|
1437
|
-
justifyContent: "center"
|
|
1485
|
+
justifyContent: "center",
|
|
1486
|
+
transition: "transform 0.2s",
|
|
1487
|
+
fontFamily: "monospace"
|
|
1438
1488
|
},
|
|
1489
|
+
onMouseEnter: (e) => e.currentTarget.style.transform = "scale(1.1)",
|
|
1490
|
+
onMouseLeave: (e) => e.currentTarget.style.transform = "scale(1)",
|
|
1491
|
+
title: "Open Quantum DevTools",
|
|
1439
1492
|
children: "\u26A1\uFE0F"
|
|
1440
1493
|
}
|
|
1441
1494
|
);
|
|
1442
1495
|
}
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
boxShadow: "0 -4px 20px rgba(0,0,0,0.3)",
|
|
1454
|
-
zIndex: 9999,
|
|
1455
|
-
display: "flex",
|
|
1456
|
-
flexDirection: "column",
|
|
1457
|
-
fontFamily: "monospace"
|
|
1458
|
-
}, children: [
|
|
1459
|
-
/* @__PURE__ */ jsxs("div", { style: {
|
|
1460
|
-
padding: "10px",
|
|
1461
|
-
borderBottom: "1px solid #333",
|
|
1496
|
+
if (isMinimized) {
|
|
1497
|
+
return /* @__PURE__ */ jsxs("div", { style: {
|
|
1498
|
+
position: "fixed",
|
|
1499
|
+
bottom: "20px",
|
|
1500
|
+
right: "20px",
|
|
1501
|
+
background: "#111",
|
|
1502
|
+
border: "1px solid #333",
|
|
1503
|
+
borderRadius: "8px",
|
|
1504
|
+
padding: "8px 12px",
|
|
1505
|
+
zIndex: 9999,
|
|
1462
1506
|
display: "flex",
|
|
1463
|
-
justifyContent: "space-between",
|
|
1464
1507
|
alignItems: "center",
|
|
1465
|
-
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
|
|
1477
|
-
|
|
1478
|
-
|
|
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
|
+
}
|
|
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)
|
|
1479
1696
|
},
|
|
1480
|
-
|
|
1481
|
-
}
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1697
|
+
keyHash
|
|
1698
|
+
)) })
|
|
1699
|
+
]
|
|
1700
|
+
}
|
|
1701
|
+
);
|
|
1702
|
+
}
|
|
1703
|
+
function QueryItem({ entry, client, isStale }) {
|
|
1704
|
+
const [expanded, setExpanded] = useState5(false);
|
|
1705
|
+
return /* @__PURE__ */ jsxs("div", { style: {
|
|
1706
|
+
background: "#111",
|
|
1707
|
+
borderRadius: "6px",
|
|
1708
|
+
border: "1px solid #222",
|
|
1709
|
+
overflow: "hidden"
|
|
1710
|
+
}, children: [
|
|
1711
|
+
/* @__PURE__ */ jsxs(
|
|
1712
|
+
"div",
|
|
1713
|
+
{
|
|
1714
|
+
onClick: () => setExpanded(!expanded),
|
|
1715
|
+
style: {
|
|
1716
|
+
padding: "8px 12px",
|
|
1717
|
+
display: "flex",
|
|
1718
|
+
alignItems: "center",
|
|
1719
|
+
justifyContent: "space-between",
|
|
1720
|
+
cursor: "pointer",
|
|
1721
|
+
background: expanded ? "#161616" : "transparent"
|
|
1722
|
+
},
|
|
1723
|
+
children: [
|
|
1724
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "10px", alignItems: "center", overflow: "hidden" }, children: [
|
|
1725
|
+
/* @__PURE__ */ jsx2("span", { style: {
|
|
1726
|
+
color: isStale ? "#d69e2e" : "#b0fb5d",
|
|
1727
|
+
fontSize: "14px",
|
|
1728
|
+
fontWeight: "bold",
|
|
1729
|
+
minWidth: "10px"
|
|
1730
|
+
}, children: isStale ? "\u2022" : "\u2022" }),
|
|
1731
|
+
/* @__PURE__ */ jsxs("span", { style: {
|
|
1732
|
+
color: "#e0e0e0",
|
|
1733
|
+
fontWeight: 500,
|
|
1734
|
+
whiteSpace: "nowrap",
|
|
1735
|
+
overflow: "hidden",
|
|
1736
|
+
textOverflow: "ellipsis"
|
|
1737
|
+
}, children: [
|
|
1738
|
+
"['",
|
|
1739
|
+
entry.key.join("', '"),
|
|
1740
|
+
"']"
|
|
1741
|
+
] })
|
|
1742
|
+
] }),
|
|
1743
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
|
|
1744
|
+
/* @__PURE__ */ jsx2("span", { style: {
|
|
1745
|
+
fontSize: "10px",
|
|
1746
|
+
padding: "2px 6px",
|
|
1747
|
+
borderRadius: "3px",
|
|
1748
|
+
background: isStale ? "rgba(214, 158, 46, 0.15)" : "rgba(176, 251, 93, 0.15)",
|
|
1749
|
+
color: isStale ? "#d69e2e" : "#b0fb5d",
|
|
1750
|
+
border: `1px solid ${isStale ? "rgba(214, 158, 46, 0.3)" : "rgba(176, 251, 93, 0.3)"}`
|
|
1751
|
+
}, children: isStale ? "STALE" : "FRESH" }),
|
|
1752
|
+
/* @__PURE__ */ jsx2("span", { style: { color: "#666", fontSize: "10px" }, children: expanded ? "\u25BC" : "\u25B6" })
|
|
1753
|
+
] })
|
|
1754
|
+
]
|
|
1755
|
+
}
|
|
1756
|
+
),
|
|
1757
|
+
expanded && /* @__PURE__ */ jsxs("div", { style: {
|
|
1487
1758
|
padding: "10px",
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
gap: "8px"
|
|
1491
|
-
}, children: Array.from(cache.entries()).length === 0 ? /* @__PURE__ */ jsx2("div", { style: { padding: "20px", textAlign: "center", color: "#666" }, children: "No active queries" }) : Array.from(cache.entries()).map(([keyHash, entry]) => /* @__PURE__ */ jsxs("div", { style: {
|
|
1492
|
-
background: "#2a2a2a",
|
|
1493
|
-
borderRadius: "4px",
|
|
1494
|
-
padding: "8px",
|
|
1495
|
-
border: "1px solid #333"
|
|
1759
|
+
borderTop: "1px solid #222",
|
|
1760
|
+
background: "#0a0a0a"
|
|
1496
1761
|
}, children: [
|
|
1497
|
-
/* @__PURE__ */ jsxs("div", { style: {
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
color: "#000"
|
|
1505
|
-
}, children: client.isStale(entry.key) ? "STALE" : "FRESH" }) })
|
|
1506
|
-
] }),
|
|
1507
|
-
/* @__PURE__ */ jsx2("div", { style: {
|
|
1508
|
-
fontSize: "11px",
|
|
1509
|
-
color: "#ddd",
|
|
1510
|
-
whiteSpace: "pre-wrap",
|
|
1511
|
-
maxHeight: "100px",
|
|
1512
|
-
overflow: "hidden",
|
|
1513
|
-
opacity: 0.8
|
|
1514
|
-
}, children: JSON.stringify(entry.data, null, 2) }),
|
|
1515
|
-
/* @__PURE__ */ jsxs("div", { style: { marginTop: "8px", display: "flex", gap: "8px" }, children: [
|
|
1762
|
+
/* @__PURE__ */ jsxs("div", { style: {
|
|
1763
|
+
display: "flex",
|
|
1764
|
+
gap: "8px",
|
|
1765
|
+
marginBottom: "10px",
|
|
1766
|
+
borderBottom: "1px solid #222",
|
|
1767
|
+
paddingBottom: "8px"
|
|
1768
|
+
}, children: [
|
|
1516
1769
|
/* @__PURE__ */ jsx2(
|
|
1517
1770
|
"button",
|
|
1518
1771
|
{
|
|
1519
|
-
onClick: () =>
|
|
1772
|
+
onClick: (e) => {
|
|
1773
|
+
e.stopPropagation();
|
|
1774
|
+
client.invalidate(entry.key);
|
|
1775
|
+
},
|
|
1520
1776
|
style: {
|
|
1521
|
-
background: "#
|
|
1522
|
-
border: "
|
|
1523
|
-
color: "#
|
|
1524
|
-
padding: "4px
|
|
1525
|
-
borderRadius: "
|
|
1777
|
+
background: "#222",
|
|
1778
|
+
border: "1px solid #333",
|
|
1779
|
+
color: "#d69e2e",
|
|
1780
|
+
padding: "4px 10px",
|
|
1781
|
+
borderRadius: "4px",
|
|
1526
1782
|
cursor: "pointer",
|
|
1527
|
-
fontSize: "
|
|
1783
|
+
fontSize: "11px"
|
|
1528
1784
|
},
|
|
1529
1785
|
children: "Invalidate"
|
|
1530
1786
|
}
|
|
@@ -1532,23 +1788,40 @@ function QuantumDevTools() {
|
|
|
1532
1788
|
/* @__PURE__ */ jsx2(
|
|
1533
1789
|
"button",
|
|
1534
1790
|
{
|
|
1535
|
-
onClick: () => {
|
|
1536
|
-
|
|
1791
|
+
onClick: (e) => {
|
|
1792
|
+
e.stopPropagation();
|
|
1793
|
+
client.remove(entry.key);
|
|
1537
1794
|
},
|
|
1538
1795
|
style: {
|
|
1539
|
-
background: "#
|
|
1540
|
-
border: "
|
|
1541
|
-
color: "#
|
|
1542
|
-
padding: "4px
|
|
1543
|
-
borderRadius: "
|
|
1796
|
+
background: "#222",
|
|
1797
|
+
border: "1px solid #333",
|
|
1798
|
+
color: "#ff4d4f",
|
|
1799
|
+
padding: "4px 10px",
|
|
1800
|
+
borderRadius: "4px",
|
|
1544
1801
|
cursor: "pointer",
|
|
1545
|
-
fontSize: "
|
|
1802
|
+
fontSize: "11px"
|
|
1546
1803
|
},
|
|
1547
|
-
children: "
|
|
1804
|
+
children: "Remove"
|
|
1548
1805
|
}
|
|
1549
1806
|
)
|
|
1807
|
+
] }),
|
|
1808
|
+
/* @__PURE__ */ jsx2("div", { style: { position: "relative" }, children: /* @__PURE__ */ jsx2("pre", { style: {
|
|
1809
|
+
margin: 0,
|
|
1810
|
+
fontSize: "11px",
|
|
1811
|
+
color: "#a0a0a0",
|
|
1812
|
+
overflowX: "auto",
|
|
1813
|
+
fontFamily: "monospace"
|
|
1814
|
+
}, children: JSON.stringify(entry.data, null, 2) }) }),
|
|
1815
|
+
/* @__PURE__ */ jsxs("div", { style: {
|
|
1816
|
+
marginTop: "8px",
|
|
1817
|
+
fontSize: "10px",
|
|
1818
|
+
color: "#444",
|
|
1819
|
+
textAlign: "right"
|
|
1820
|
+
}, children: [
|
|
1821
|
+
"Updated: ",
|
|
1822
|
+
new Date(entry.updatedAt).toLocaleTimeString()
|
|
1550
1823
|
] })
|
|
1551
|
-
] }
|
|
1824
|
+
] })
|
|
1552
1825
|
] });
|
|
1553
1826
|
}
|
|
1554
1827
|
export {
|