@tanstack/pacer-devtools 0.1.0

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.
Files changed (93) hide show
  1. package/LICENSE +21 -0
  2. package/dist/cjs/PacerContextProvider.cjs +156 -0
  3. package/dist/cjs/PacerContextProvider.cjs.map +1 -0
  4. package/dist/cjs/PacerContextProvider.d.cts +19 -0
  5. package/dist/cjs/PacerDevtools.cjs +13 -0
  6. package/dist/cjs/PacerDevtools.cjs.map +1 -0
  7. package/dist/cjs/PacerDevtools.d.cts +1 -0
  8. package/dist/cjs/components/ActionButtons.cjs +157 -0
  9. package/dist/cjs/components/ActionButtons.cjs.map +1 -0
  10. package/dist/cjs/components/ActionButtons.d.cts +6 -0
  11. package/dist/cjs/components/DetailsPanel.cjs +80 -0
  12. package/dist/cjs/components/DetailsPanel.cjs.map +1 -0
  13. package/dist/cjs/components/DetailsPanel.d.cts +11 -0
  14. package/dist/cjs/components/Shell.cjs +102 -0
  15. package/dist/cjs/components/Shell.cjs.map +1 -0
  16. package/dist/cjs/components/Shell.d.cts +1 -0
  17. package/dist/cjs/components/StateHeader.cjs +95 -0
  18. package/dist/cjs/components/StateHeader.cjs.map +1 -0
  19. package/dist/cjs/components/StateHeader.d.cts +11 -0
  20. package/dist/cjs/components/UtilList.cjs +70 -0
  21. package/dist/cjs/components/UtilList.cjs.map +1 -0
  22. package/dist/cjs/components/UtilList.d.cts +8 -0
  23. package/dist/cjs/components/util-groups.cjs +40 -0
  24. package/dist/cjs/components/util-groups.cjs.map +1 -0
  25. package/dist/cjs/components/util-groups.d.cts +8 -0
  26. package/dist/cjs/core.cjs +43 -0
  27. package/dist/cjs/core.cjs.map +1 -0
  28. package/dist/cjs/core.d.cts +8 -0
  29. package/dist/cjs/index.cjs +15 -0
  30. package/dist/cjs/index.cjs.map +1 -0
  31. package/dist/cjs/index.d.cts +3 -0
  32. package/dist/cjs/production.cjs +7 -0
  33. package/dist/cjs/production.cjs.map +1 -0
  34. package/dist/cjs/production.d.cts +3 -0
  35. package/dist/cjs/styles/tokens.cjs +90 -0
  36. package/dist/cjs/styles/tokens.cjs.map +1 -0
  37. package/dist/cjs/styles/tokens.d.cts +298 -0
  38. package/dist/cjs/styles/use-styles.cjs +397 -0
  39. package/dist/cjs/styles/use-styles.cjs.map +1 -0
  40. package/dist/cjs/styles/use-styles.d.cts +42 -0
  41. package/dist/esm/PacerContextProvider.d.ts +19 -0
  42. package/dist/esm/PacerContextProvider.js +156 -0
  43. package/dist/esm/PacerContextProvider.js.map +1 -0
  44. package/dist/esm/PacerDevtools.d.ts +1 -0
  45. package/dist/esm/PacerDevtools.js +14 -0
  46. package/dist/esm/PacerDevtools.js.map +1 -0
  47. package/dist/esm/components/ActionButtons.d.ts +6 -0
  48. package/dist/esm/components/ActionButtons.js +157 -0
  49. package/dist/esm/components/ActionButtons.js.map +1 -0
  50. package/dist/esm/components/DetailsPanel.d.ts +11 -0
  51. package/dist/esm/components/DetailsPanel.js +80 -0
  52. package/dist/esm/components/DetailsPanel.js.map +1 -0
  53. package/dist/esm/components/Shell.d.ts +1 -0
  54. package/dist/esm/components/Shell.js +102 -0
  55. package/dist/esm/components/Shell.js.map +1 -0
  56. package/dist/esm/components/StateHeader.d.ts +11 -0
  57. package/dist/esm/components/StateHeader.js +95 -0
  58. package/dist/esm/components/StateHeader.js.map +1 -0
  59. package/dist/esm/components/UtilList.d.ts +8 -0
  60. package/dist/esm/components/UtilList.js +70 -0
  61. package/dist/esm/components/UtilList.js.map +1 -0
  62. package/dist/esm/components/util-groups.d.ts +8 -0
  63. package/dist/esm/components/util-groups.js +40 -0
  64. package/dist/esm/components/util-groups.js.map +1 -0
  65. package/dist/esm/core.d.ts +8 -0
  66. package/dist/esm/core.js +42 -0
  67. package/dist/esm/core.js.map +1 -0
  68. package/dist/esm/index.d.ts +3 -0
  69. package/dist/esm/index.js +15 -0
  70. package/dist/esm/index.js.map +1 -0
  71. package/dist/esm/production.d.ts +3 -0
  72. package/dist/esm/production.js +7 -0
  73. package/dist/esm/production.js.map +1 -0
  74. package/dist/esm/styles/tokens.d.ts +298 -0
  75. package/dist/esm/styles/tokens.js +90 -0
  76. package/dist/esm/styles/tokens.js.map +1 -0
  77. package/dist/esm/styles/use-styles.d.ts +42 -0
  78. package/dist/esm/styles/use-styles.js +380 -0
  79. package/dist/esm/styles/use-styles.js.map +1 -0
  80. package/package.json +84 -0
  81. package/src/PacerContextProvider.tsx +203 -0
  82. package/src/PacerDevtools.tsx +10 -0
  83. package/src/components/ActionButtons.tsx +143 -0
  84. package/src/components/DetailsPanel.tsx +61 -0
  85. package/src/components/Shell.tsx +102 -0
  86. package/src/components/StateHeader.tsx +106 -0
  87. package/src/components/UtilList.tsx +62 -0
  88. package/src/components/util-groups.ts +54 -0
  89. package/src/core.tsx +41 -0
  90. package/src/index.ts +17 -0
  91. package/src/production.ts +7 -0
  92. package/src/styles/tokens.ts +305 -0
  93. package/src/styles/use-styles.ts +379 -0
@@ -0,0 +1,102 @@
1
+ import { template, insert, createComponent, effect, className, delegateEvents } from "solid-js/web";
2
+ import { createSignal, createMemo, onMount, onCleanup } from "solid-js";
3
+ import { useStyles } from "../styles/use-styles.js";
4
+ import { usePacerDevtoolsState } from "../PacerContextProvider.js";
5
+ import { UTIL_GROUPS } from "./util-groups.js";
6
+ import { UtilList } from "./UtilList.js";
7
+ import { DetailsPanel } from "./DetailsPanel.js";
8
+ var _tmpl$ = /* @__PURE__ */ template(`<div><div>TanStack Pacer</div><div><div></div><div></div><div><div>Details`);
9
+ function Shell() {
10
+ const styles = useStyles();
11
+ const state = usePacerDevtoolsState();
12
+ const utilState = () => state;
13
+ const [selectedKey, setSelectedKey] = createSignal(null);
14
+ const [leftPanelWidth, setLeftPanelWidth] = createSignal(300);
15
+ const [isDragging, setIsDragging] = createSignal(false);
16
+ const selectedInstance = createMemo(() => {
17
+ const key = selectedKey();
18
+ if (!key) return null;
19
+ for (const group of UTIL_GROUPS) {
20
+ const instance = utilState()[group.key].find((inst) => inst.key === key);
21
+ if (instance) return {
22
+ instance,
23
+ type: group.displayName
24
+ };
25
+ }
26
+ return null;
27
+ });
28
+ let dragStartX = 0;
29
+ let dragStartWidth = 0;
30
+ const handleMouseDown = (e) => {
31
+ e.preventDefault();
32
+ e.stopPropagation();
33
+ setIsDragging(true);
34
+ document.body.style.cursor = "col-resize";
35
+ document.body.style.userSelect = "none";
36
+ dragStartX = e.clientX;
37
+ dragStartWidth = leftPanelWidth();
38
+ };
39
+ const handleMouseMove = (e) => {
40
+ if (!isDragging()) return;
41
+ e.preventDefault();
42
+ const deltaX = e.clientX - dragStartX;
43
+ const newWidth = Math.max(150, Math.min(800, dragStartWidth + deltaX));
44
+ setLeftPanelWidth(newWidth);
45
+ };
46
+ const handleMouseUp = () => {
47
+ setIsDragging(false);
48
+ document.body.style.cursor = "";
49
+ document.body.style.userSelect = "";
50
+ };
51
+ onMount(() => {
52
+ document.addEventListener("mousemove", handleMouseMove);
53
+ document.addEventListener("mouseup", handleMouseUp);
54
+ });
55
+ onCleanup(() => {
56
+ document.removeEventListener("mousemove", handleMouseMove);
57
+ document.removeEventListener("mouseup", handleMouseUp);
58
+ });
59
+ return (() => {
60
+ var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$6 = _el$5.nextSibling, _el$7 = _el$6.firstChild;
61
+ _el$4.style.setProperty("min-width", "150px");
62
+ _el$4.style.setProperty("max-width", "800px");
63
+ insert(_el$4, createComponent(UtilList, {
64
+ selectedKey,
65
+ setSelectedKey,
66
+ utilState
67
+ }));
68
+ _el$5.$$mousedown = handleMouseDown;
69
+ _el$6.style.setProperty("flex", "1");
70
+ insert(_el$6, createComponent(DetailsPanel, {
71
+ selectedInstance,
72
+ utilState
73
+ }), null);
74
+ effect((_p$) => {
75
+ var _v$ = styles().devtoolsPanel, _v$2 = styles().stickyHeader, _v$3 = styles().mainContainer, _v$4 = styles().leftPanel, _v$5 = `${leftPanelWidth()}px`, _v$6 = `${styles().dragHandle} ${isDragging() ? "dragging" : ""}`, _v$7 = styles().rightPanel, _v$8 = styles().panelHeader;
76
+ _v$ !== _p$.e && className(_el$, _p$.e = _v$);
77
+ _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
78
+ _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
79
+ _v$4 !== _p$.o && className(_el$4, _p$.o = _v$4);
80
+ _v$5 !== _p$.i && ((_p$.i = _v$5) != null ? _el$4.style.setProperty("width", _v$5) : _el$4.style.removeProperty("width"));
81
+ _v$6 !== _p$.n && className(_el$5, _p$.n = _v$6);
82
+ _v$7 !== _p$.s && className(_el$6, _p$.s = _v$7);
83
+ _v$8 !== _p$.h && className(_el$7, _p$.h = _v$8);
84
+ return _p$;
85
+ }, {
86
+ e: void 0,
87
+ t: void 0,
88
+ a: void 0,
89
+ o: void 0,
90
+ i: void 0,
91
+ n: void 0,
92
+ s: void 0,
93
+ h: void 0
94
+ });
95
+ return _el$;
96
+ })();
97
+ }
98
+ delegateEvents(["mousedown"]);
99
+ export {
100
+ Shell
101
+ };
102
+ //# sourceMappingURL=Shell.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Shell.js","sources":["../../../src/components/Shell.tsx"],"sourcesContent":["import { createMemo, createSignal, onCleanup, onMount } from 'solid-js'\nimport { useStyles } from '../styles/use-styles'\nimport { usePacerDevtoolsState } from '../PacerContextProvider'\nimport { UTIL_GROUPS } from './util-groups'\nimport { UtilList } from './UtilList'\nimport { DetailsPanel } from './DetailsPanel'\nimport type { StateKey } from './util-groups'\n\nexport function Shell() {\n const styles = useStyles()\n const state = usePacerDevtoolsState()\n const utilState = () => state\n const [selectedKey, setSelectedKey] = createSignal<string | null>(null)\n const [leftPanelWidth, setLeftPanelWidth] = createSignal(300)\n const [isDragging, setIsDragging] = createSignal(false)\n\n const selectedInstance = createMemo(() => {\n const key = selectedKey()\n if (!key) return null\n for (const group of UTIL_GROUPS) {\n const instance = (utilState() as unknown as Record<StateKey, Array<any>>)[\n group.key\n ].find((inst) => inst.key === key)\n if (instance) return { instance, type: group.displayName }\n }\n return null\n })\n\n let dragStartX = 0\n let dragStartWidth = 0\n\n const handleMouseDown = (e: MouseEvent) => {\n e.preventDefault()\n e.stopPropagation()\n setIsDragging(true)\n document.body.style.cursor = 'col-resize'\n document.body.style.userSelect = 'none'\n dragStartX = e.clientX\n dragStartWidth = leftPanelWidth()\n }\n\n const handleMouseMove = (e: MouseEvent) => {\n if (!isDragging()) return\n\n e.preventDefault()\n const deltaX = e.clientX - dragStartX\n const newWidth = Math.max(150, Math.min(800, dragStartWidth + deltaX))\n setLeftPanelWidth(newWidth)\n }\n\n const handleMouseUp = () => {\n setIsDragging(false)\n document.body.style.cursor = ''\n document.body.style.userSelect = ''\n }\n\n onMount(() => {\n document.addEventListener('mousemove', handleMouseMove)\n document.addEventListener('mouseup', handleMouseUp)\n })\n\n onCleanup(() => {\n document.removeEventListener('mousemove', handleMouseMove)\n document.removeEventListener('mouseup', handleMouseUp)\n })\n\n return (\n <div class={styles().devtoolsPanel}>\n <div class={styles().stickyHeader}>TanStack Pacer</div>\n\n <div class={styles().mainContainer}>\n <div\n class={styles().leftPanel}\n style={{\n width: `${leftPanelWidth()}px`,\n 'min-width': '150px',\n 'max-width': '800px',\n }}\n >\n <UtilList\n selectedKey={selectedKey}\n setSelectedKey={setSelectedKey}\n utilState={utilState}\n />\n </div>\n\n <div\n class={`${styles().dragHandle} ${isDragging() ? 'dragging' : ''}`}\n onMouseDown={handleMouseDown}\n />\n\n <div class={styles().rightPanel} style={{ flex: 1 }}>\n <div class={styles().panelHeader}>Details</div>\n <DetailsPanel\n selectedInstance={selectedInstance}\n utilState={utilState}\n />\n </div>\n </div>\n </div>\n )\n}\n"],"names":["Shell","styles","useStyles","state","usePacerDevtoolsState","utilState","selectedKey","setSelectedKey","createSignal","leftPanelWidth","setLeftPanelWidth","isDragging","setIsDragging","selectedInstance","createMemo","key","group","UTIL_GROUPS","instance","find","inst","type","displayName","dragStartX","dragStartWidth","handleMouseDown","e","preventDefault","stopPropagation","document","body","style","cursor","userSelect","clientX","handleMouseMove","deltaX","newWidth","Math","max","min","handleMouseUp","onMount","addEventListener","onCleanup","removeEventListener","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","_el$5","_el$6","_el$7","setProperty","_$insert","_$createComponent","UtilList","$$mousedown","DetailsPanel","_$effect","_p$","_v$","devtoolsPanel","_v$2","stickyHeader","_v$3","mainContainer","_v$4","leftPanel","_v$5","_v$6","dragHandle","_v$7","rightPanel","_v$8","panelHeader","_$className","t","a","o","i","removeProperty","n","s","h","undefined","_$delegateEvents"],"mappings":"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"}
@@ -0,0 +1,11 @@
1
+ type StateHeaderProps = {
2
+ selectedInstance: () => {
3
+ instance: any;
4
+ type: string;
5
+ } | null;
6
+ utilState: () => {
7
+ lastUpdatedByKey: Record<string, number>;
8
+ };
9
+ };
10
+ export declare function StateHeader(props: StateHeaderProps): import("solid-js").JSX.Element;
11
+ export {};
@@ -0,0 +1,95 @@
1
+ import { template, insert, effect, className } from "solid-js/web";
2
+ import dayjs from "dayjs";
3
+ import relativeTime from "dayjs/plugin/relativeTime";
4
+ import { createSignal, onMount, onCleanup } from "solid-js";
5
+ import { useStyles } from "../styles/use-styles.js";
6
+ var _tmpl$ = /* @__PURE__ */ template(`<div><div></div><div><div><div>Key</div><div></div><div>Last Updated</div><div> (<!>)</div></div><div>% reduction`);
7
+ dayjs.extend(relativeTime);
8
+ function StateHeader(props) {
9
+ const styles = useStyles();
10
+ const [now, setNow] = createSignal(Date.now());
11
+ onMount(() => {
12
+ const interval = setInterval(() => {
13
+ setNow(Date.now());
14
+ }, 1e3);
15
+ onCleanup(() => {
16
+ clearInterval(interval);
17
+ });
18
+ });
19
+ const entry = props.selectedInstance();
20
+ if (!entry) return null;
21
+ const key = entry.instance.key;
22
+ const updatedAt = props.utilState().lastUpdatedByKey[key] ?? Date.now();
23
+ const getRelativeTime = () => {
24
+ const diffMs = now() - updatedAt;
25
+ const diffSeconds = Math.floor(diffMs / 1e3);
26
+ if (diffSeconds < 60) {
27
+ return `${diffSeconds} second${diffSeconds !== 1 ? "s" : ""} ago`;
28
+ }
29
+ return dayjs(updatedAt).fromNow();
30
+ };
31
+ const getReductionPercentage = () => {
32
+ const state = entry.instance.store?.state || entry.instance.state;
33
+ if (!state) return 0;
34
+ const isAsync = entry.type.toLowerCase().includes("async");
35
+ const completedExecutions = isAsync ? state.settleCount || 0 : state.executionCount || 0;
36
+ if (entry.type.toLowerCase().includes("batcher")) {
37
+ const totalItemsProcessed = state.totalItemsProcessed || 0;
38
+ if (totalItemsProcessed === 0) return 0;
39
+ return Math.round((totalItemsProcessed - completedExecutions) / totalItemsProcessed * 100);
40
+ }
41
+ let requestCount = 0;
42
+ if (state.maybeExecuteCount !== void 0) {
43
+ requestCount = state.maybeExecuteCount;
44
+ } else if (state.addItemCount !== void 0) {
45
+ requestCount = state.addItemCount;
46
+ } else {
47
+ return 0;
48
+ }
49
+ if (requestCount === 0) return 0;
50
+ const reduction = requestCount - completedExecutions;
51
+ return Math.round(reduction / requestCount * 100);
52
+ };
53
+ const reductionPercentage = getReductionPercentage();
54
+ return (() => {
55
+ var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling, _el$9 = _el$8.firstChild, _el$1 = _el$9.nextSibling;
56
+ _el$1.nextSibling;
57
+ var _el$10 = _el$4.nextSibling, _el$11 = _el$10.firstChild;
58
+ insert(_el$2, () => entry.type);
59
+ _el$3.style.setProperty("display", "flex");
60
+ _el$3.style.setProperty("align-items", "center");
61
+ _el$3.style.setProperty("gap", "16px");
62
+ insert(_el$6, key);
63
+ insert(_el$8, () => new Date(updatedAt).toLocaleTimeString(), _el$9);
64
+ insert(_el$8, getRelativeTime, _el$1);
65
+ _el$10.style.setProperty("margin-left", "auto");
66
+ _el$10.style.setProperty("font-weight", "bold");
67
+ insert(_el$10, reductionPercentage, _el$11);
68
+ effect((_p$) => {
69
+ var _v$ = styles().stateHeader, _v$2 = styles().stateTitle, _v$3 = styles().infoGrid, _v$4 = styles().infoLabel, _v$5 = styles().infoValueMono, _v$6 = styles().infoLabel, _v$7 = styles().infoValueMono, _v$8 = styles().infoValueMono;
70
+ _v$ !== _p$.e && className(_el$, _p$.e = _v$);
71
+ _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
72
+ _v$3 !== _p$.a && className(_el$4, _p$.a = _v$3);
73
+ _v$4 !== _p$.o && className(_el$5, _p$.o = _v$4);
74
+ _v$5 !== _p$.i && className(_el$6, _p$.i = _v$5);
75
+ _v$6 !== _p$.n && className(_el$7, _p$.n = _v$6);
76
+ _v$7 !== _p$.s && className(_el$8, _p$.s = _v$7);
77
+ _v$8 !== _p$.h && className(_el$10, _p$.h = _v$8);
78
+ return _p$;
79
+ }, {
80
+ e: void 0,
81
+ t: void 0,
82
+ a: void 0,
83
+ o: void 0,
84
+ i: void 0,
85
+ n: void 0,
86
+ s: void 0,
87
+ h: void 0
88
+ });
89
+ return _el$;
90
+ })();
91
+ }
92
+ export {
93
+ StateHeader
94
+ };
95
+ //# sourceMappingURL=StateHeader.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"StateHeader.js","sources":["../../../src/components/StateHeader.tsx"],"sourcesContent":["import dayjs from 'dayjs'\nimport relativeTime from 'dayjs/plugin/relativeTime'\nimport { createSignal, onCleanup, onMount } from 'solid-js'\nimport { useStyles } from '../styles/use-styles'\n\ndayjs.extend(relativeTime)\n\ntype StateHeaderProps = {\n selectedInstance: () => { instance: any; type: string } | null\n utilState: () => { lastUpdatedByKey: Record<string, number> }\n}\n\nexport function StateHeader(props: StateHeaderProps) {\n const styles = useStyles()\n const [now, setNow] = createSignal(Date.now())\n\n onMount(() => {\n const interval = setInterval(() => {\n setNow(Date.now())\n }, 1000)\n\n onCleanup(() => {\n clearInterval(interval)\n })\n })\n\n const entry = props.selectedInstance()\n if (!entry) return null\n\n const key = entry.instance.key as string\n const updatedAt = props.utilState().lastUpdatedByKey[key] ?? Date.now()\n\n const getRelativeTime = () => {\n const diffMs = now() - updatedAt\n const diffSeconds = Math.floor(diffMs / 1000)\n\n if (diffSeconds < 60) {\n return `${diffSeconds} second${diffSeconds !== 1 ? 's' : ''} ago`\n }\n\n return dayjs(updatedAt).fromNow()\n }\n\n const getReductionPercentage = () => {\n const state = entry.instance.store?.state || entry.instance.state\n\n if (!state) return 0\n\n // Use settleCount for async utilities, executionCount for sync utilities\n const isAsync = entry.type.toLowerCase().includes('async')\n const completedExecutions = isAsync\n ? state.settleCount || 0\n : state.executionCount || 0\n\n // For batchers, calculate reduction based on items processed vs executions\n if (entry.type.toLowerCase().includes('batcher')) {\n const totalItemsProcessed = state.totalItemsProcessed || 0\n if (totalItemsProcessed === 0) return 0\n return Math.round(\n ((totalItemsProcessed - completedExecutions) / totalItemsProcessed) *\n 100,\n )\n }\n\n // For other utilities, calculate reduction based on request tracking\n let requestCount = 0\n\n if (state.maybeExecuteCount !== undefined) {\n requestCount = state.maybeExecuteCount\n } else if (state.addItemCount !== undefined) {\n requestCount = state.addItemCount\n } else {\n // For utilities that don't track requests, show 0%\n return 0\n }\n\n if (requestCount === 0) return 0\n\n const reduction = requestCount - completedExecutions\n return Math.round((reduction / requestCount) * 100)\n }\n\n const reductionPercentage = getReductionPercentage()\n\n return (\n <div class={styles().stateHeader}>\n <div class={styles().stateTitle}>{entry.type}</div>\n <div style={{ display: 'flex', 'align-items': 'center', gap: '16px' }}>\n <div class={styles().infoGrid}>\n <div class={styles().infoLabel}>Key</div>\n <div class={styles().infoValueMono}>{key}</div>\n <div class={styles().infoLabel}>Last Updated</div>\n <div class={styles().infoValueMono}>\n {new Date(updatedAt).toLocaleTimeString()} ({getRelativeTime()})\n </div>\n </div>\n <div\n class={styles().infoValueMono}\n style={{ 'margin-left': 'auto', 'font-weight': 'bold' }}\n >\n {reductionPercentage}% reduction\n </div>\n </div>\n </div>\n )\n}\n"],"names":["dayjs","extend","relativeTime","StateHeader","props","styles","useStyles","now","setNow","createSignal","Date","onMount","interval","setInterval","onCleanup","clearInterval","entry","selectedInstance","key","instance","updatedAt","utilState","lastUpdatedByKey","getRelativeTime","diffMs","diffSeconds","Math","floor","fromNow","getReductionPercentage","state","store","isAsync","type","toLowerCase","includes","completedExecutions","settleCount","executionCount","totalItemsProcessed","round","requestCount","maybeExecuteCount","undefined","addItemCount","reduction","reductionPercentage","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","_el$5","_el$6","_el$7","_el$8","_el$9","_el$1","_el$10","_el$11","_$insert","style","setProperty","toLocaleTimeString","_$effect","_p$","_v$","stateHeader","_v$2","stateTitle","_v$3","infoGrid","_v$4","infoLabel","_v$5","infoValueMono","_v$6","_v$7","_v$8","e","_$className","t","a","o","i","n","s","h"],"mappings":"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"}
@@ -0,0 +1,8 @@
1
+ import { StateKey } from './util-groups.js';
2
+ type UtilListProps = {
3
+ selectedKey: () => string | null;
4
+ setSelectedKey: (key: string | null) => void;
5
+ utilState: () => Record<StateKey, Array<any>>;
6
+ };
7
+ export declare function UtilList(props: UtilListProps): import("solid-js").JSX.Element;
8
+ export {};
@@ -0,0 +1,70 @@
1
+ import { template, insert, createComponent, memo, effect, className, delegateEvents } from "solid-js/web";
2
+ import { For } from "solid-js";
3
+ import { useStore } from "@tanstack/solid-store";
4
+ import clsx from "clsx";
5
+ import { useStyles } from "../styles/use-styles.js";
6
+ import { UTIL_GROUPS } from "./util-groups.js";
7
+ var _tmpl$ = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<div><div>`), _tmpl$3 = /* @__PURE__ */ template(`<div><div></div><div>`);
8
+ function UtilList(props) {
9
+ const styles = useStyles();
10
+ return (() => {
11
+ var _el$ = _tmpl$();
12
+ insert(_el$, createComponent(For, {
13
+ each: UTIL_GROUPS,
14
+ children: (group) => memo(() => memo(() => props.utilState()[group.key].length > 0)() && (() => {
15
+ var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild;
16
+ insert(_el$3, () => group.label);
17
+ insert(_el$2, createComponent(For, {
18
+ get each() {
19
+ return props.utilState()[group.key];
20
+ },
21
+ children: (instance) => {
22
+ const status = (() => {
23
+ try {
24
+ const statusAccessor = useStore(instance.store, (s) => s.status);
25
+ return () => statusAccessor() ?? "unknown";
26
+ } catch {
27
+ return () => "unknown";
28
+ }
29
+ })();
30
+ return (() => {
31
+ var _el$4 = _tmpl$3(), _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling;
32
+ _el$4.$$click = () => props.setSelectedKey(instance.key ?? null);
33
+ insert(_el$5, () => instance.key);
34
+ insert(_el$6, status);
35
+ effect((_p$) => {
36
+ var _v$3 = clsx(styles().utilRow, props.selectedKey() === instance.key && styles().utilRowSelected), _v$4 = styles().utilKey, _v$5 = styles().utilStatus;
37
+ _v$3 !== _p$.e && className(_el$4, _p$.e = _v$3);
38
+ _v$4 !== _p$.t && className(_el$5, _p$.t = _v$4);
39
+ _v$5 !== _p$.a && className(_el$6, _p$.a = _v$5);
40
+ return _p$;
41
+ }, {
42
+ e: void 0,
43
+ t: void 0,
44
+ a: void 0
45
+ });
46
+ return _el$4;
47
+ })();
48
+ }
49
+ }), null);
50
+ effect((_p$) => {
51
+ var _v$ = styles().utilGroup, _v$2 = styles().utilGroupHeader;
52
+ _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
53
+ _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
54
+ return _p$;
55
+ }, {
56
+ e: void 0,
57
+ t: void 0
58
+ });
59
+ return _el$2;
60
+ })())
61
+ }));
62
+ effect(() => className(_el$, styles().utilList));
63
+ return _el$;
64
+ })();
65
+ }
66
+ delegateEvents(["click"]);
67
+ export {
68
+ UtilList
69
+ };
70
+ //# sourceMappingURL=UtilList.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"UtilList.js","sources":["../../../src/components/UtilList.tsx"],"sourcesContent":["import { For } from 'solid-js'\nimport { useStore } from '@tanstack/solid-store'\nimport clsx from 'clsx'\nimport { useStyles } from '../styles/use-styles'\nimport { UTIL_GROUPS } from './util-groups'\nimport type { StateKey } from './util-groups'\n\ntype UtilListProps = {\n selectedKey: () => string | null\n setSelectedKey: (key: string | null) => void\n utilState: () => Record<StateKey, Array<any>>\n}\n\nexport function UtilList(props: UtilListProps) {\n const styles = useStyles()\n\n return (\n <div class={styles().utilList}>\n <For each={UTIL_GROUPS}>\n {(group) => (\n <>\n {props.utilState()[group.key].length > 0 && (\n <div class={styles().utilGroup}>\n <div class={styles().utilGroupHeader}>{group.label}</div>\n <For each={props.utilState()[group.key]}>\n {(instance) => {\n const status = (() => {\n try {\n const statusAccessor = useStore(\n instance.store,\n (s: any) => s.status,\n )\n return () => statusAccessor() ?? 'unknown'\n } catch {\n return () => 'unknown'\n }\n })()\n return (\n <div\n class={clsx(\n styles().utilRow,\n props.selectedKey() === instance.key &&\n styles().utilRowSelected,\n )}\n onClick={() =>\n props.setSelectedKey(instance.key ?? null)\n }\n >\n <div class={styles().utilKey}>{instance.key}</div>\n <div class={styles().utilStatus}>{status()}</div>\n </div>\n )\n }}\n </For>\n </div>\n )}\n </>\n )}\n </For>\n </div>\n )\n}\n"],"names":["UtilList","props","styles","useStyles","_el$","_tmpl$","_$insert","_$createComponent","For","each","UTIL_GROUPS","children","group","_$memo","utilState","key","length","_el$2","_tmpl$2","_el$3","firstChild","label","instance","status","statusAccessor","useStore","store","s","_el$4","_tmpl$3","_el$5","_el$6","nextSibling","$$click","setSelectedKey","_$effect","_p$","_v$3","clsx","utilRow","selectedKey","utilRowSelected","_v$4","utilKey","_v$5","utilStatus","e","_$className","t","a","undefined","_v$","utilGroup","_v$2","utilGroupHeader","utilList","_$delegateEvents"],"mappings":";;;;;;;AAaO,SAASA,SAASC,OAAsB;AAC7C,QAAMC,SAASC,UAAAA;AAEf,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,WAAAF,MAAAG,gBAEKC,KAAG;AAAA,MAACC,MAAMC;AAAAA,MAAWC,UAClBC,CAAAA,UAAKC,WAEFA,KAAA,MAAAZ,MAAMa,UAAAA,EAAYF,MAAMG,GAAG,EAAEC,SAAS,CAAC,EAAA,MAAA,MAAA;AAAA,YAAAC,QAAAC,QAAAA,GAAAC,QAAAF,MAAAG;AAAAd,eAAAa,OAAA,MAEGP,MAAMS,KAAK;AAAAf,eAAAW,OAAAV,gBACjDC,KAAG;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAER,MAAMa,YAAYF,MAAMG,GAAG;AAAA,UAAA;AAAA,UAACJ,UACnCW,CAAAA,aAAa;AACb,kBAAMC,UAAU,MAAM;AACpB,kBAAI;AACF,sBAAMC,iBAAiBC,SACrBH,SAASI,OACT,CAACC,MAAWA,EAAEJ,MAChB;AACA,uBAAO,MAAMC,oBAAoB;AAAA,cAAA,QAC3B;AACN,uBAAO,MAAM;AAAA,cAAA;AAAA,YACf,GACF;AACA,oBAAA,MAAA;AAAA,kBAAAI,QAAAC,QAAAA,GAAAC,QAAAF,MAAAR,YAAAW,QAAAD,MAAAE;AAAAJ,oBAAAK,UAOa,MACPhC,MAAMiC,eAAeZ,SAASP,OAAO,IAAI;AAACT,qBAAAwB,OAAA,MAGbR,SAASP,GAAG;AAAAT,qBAAAyB,OACTR,MAAM;AAAAY,qBAAAC,CAAAA,QAAA;AAAA,oBAAAC,OAVjCC,KACLpC,OAAAA,EAASqC,SACTtC,MAAMuC,YAAAA,MAAkBlB,SAASP,OAC/Bb,SAASuC,eACb,GAACC,OAKWxC,OAAAA,EAASyC,SAAOC,OAChB1C,SAAS2C;AAAUR,yBAAAD,IAAAU,KAAAC,UAAAnB,OAAAQ,IAAAU,IAAAT,IAAA;AAAAK,yBAAAN,IAAAY,KAAAD,UAAAjB,OAAAM,IAAAY,IAAAN,IAAA;AAAAE,yBAAAR,IAAAa,KAAAF,UAAAhB,OAAAK,IAAAa,IAAAL,IAAA;AAAA,uBAAAR;AAAAA,cAAAA,GAAA;AAAA,gBAAAU,GAAAI;AAAAA,gBAAAF,GAAAE;AAAAA,gBAAAD,GAAAC;AAAAA,cAAAA,CAAA;AAAA,qBAAAtB;AAAAA,YAAAA,GAAA;AAAA,UAAA;AAAA,QAGrC,CAAC,GAAA,IAAA;AAAAO,eAAAC,CAAAA,QAAA;AAAA,cAAAe,MA9BOjD,OAAAA,EAASkD,WAASC,OAChBnD,SAASoD;AAAeH,kBAAAf,IAAAU,KAAAC,UAAA9B,OAAAmB,IAAAU,IAAAK,GAAA;AAAAE,mBAAAjB,IAAAY,KAAAD,UAAA5B,OAAAiB,IAAAY,IAAAK,IAAA;AAAA,iBAAAjB;AAAAA,QAAAA,GAAA;AAAA,UAAAU,GAAAI;AAAAA,UAAAF,GAAAE;AAAAA,QAAAA,CAAA;AAAA,eAAAjC;AAAAA,MAAAA,IAgCvC;AAAA,IAAA,CAEJ,CAAA;AAAAkB,WAAA,MAAAY,UAAA3C,MAxCOF,OAAAA,EAASqD,QAAQ,CAAA;AAAA,WAAAnD;AAAAA,EAAAA,GAAA;AA4CjC;AAACoD,eAAA,CAAA,OAAA,CAAA;"}
@@ -0,0 +1,8 @@
1
+ export type StateKey = 'asyncBatchers' | 'asyncDebouncers' | 'asyncQueuers' | 'asyncRateLimiters' | 'asyncThrottlers' | 'batchers' | 'debouncers' | 'queuers' | 'rateLimiters' | 'throttlers';
2
+ type UtilGroup = {
3
+ key: StateKey;
4
+ label: string;
5
+ displayName: string;
6
+ };
7
+ export declare const UTIL_GROUPS: Array<UtilGroup>;
8
+ export {};
@@ -0,0 +1,40 @@
1
+ const UTIL_GROUPS = [
2
+ { key: "debouncers", label: "Debouncers", displayName: "Debouncer" },
3
+ { key: "throttlers", label: "Throttlers", displayName: "Throttler" },
4
+ { key: "batchers", label: "Batchers", displayName: "Batcher" },
5
+ { key: "queuers", label: "Queuers", displayName: "Queuer" },
6
+ {
7
+ key: "rateLimiters",
8
+ label: "Rate Limiters",
9
+ displayName: "Rate Limiter"
10
+ },
11
+ {
12
+ key: "asyncDebouncers",
13
+ label: "Async Debouncers",
14
+ displayName: "Async Debouncer"
15
+ },
16
+ {
17
+ key: "asyncThrottlers",
18
+ label: "Async Throttlers",
19
+ displayName: "Async Throttler"
20
+ },
21
+ {
22
+ key: "asyncBatchers",
23
+ label: "Async Batchers",
24
+ displayName: "Async Batcher"
25
+ },
26
+ {
27
+ key: "asyncQueuers",
28
+ label: "Async Queuers",
29
+ displayName: "Async Queuer"
30
+ },
31
+ {
32
+ key: "asyncRateLimiters",
33
+ label: "Async Rate Limiters",
34
+ displayName: "Async Rate Limiter"
35
+ }
36
+ ];
37
+ export {
38
+ UTIL_GROUPS
39
+ };
40
+ //# sourceMappingURL=util-groups.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"util-groups.js","sources":["../../../src/components/util-groups.ts"],"sourcesContent":["export type StateKey =\n | 'asyncBatchers'\n | 'asyncDebouncers'\n | 'asyncQueuers'\n | 'asyncRateLimiters'\n | 'asyncThrottlers'\n | 'batchers'\n | 'debouncers'\n | 'queuers'\n | 'rateLimiters'\n | 'throttlers'\n\ntype UtilGroup = {\n key: StateKey\n label: string\n displayName: string\n}\n\nexport const UTIL_GROUPS: Array<UtilGroup> = [\n { key: 'debouncers', label: 'Debouncers', displayName: 'Debouncer' },\n { key: 'throttlers', label: 'Throttlers', displayName: 'Throttler' },\n { key: 'batchers', label: 'Batchers', displayName: 'Batcher' },\n { key: 'queuers', label: 'Queuers', displayName: 'Queuer' },\n {\n key: 'rateLimiters',\n label: 'Rate Limiters',\n displayName: 'Rate Limiter',\n },\n {\n key: 'asyncDebouncers',\n label: 'Async Debouncers',\n displayName: 'Async Debouncer',\n },\n {\n key: 'asyncThrottlers',\n label: 'Async Throttlers',\n displayName: 'Async Throttler',\n },\n {\n key: 'asyncBatchers',\n label: 'Async Batchers',\n displayName: 'Async Batcher',\n },\n {\n key: 'asyncQueuers',\n label: 'Async Queuers',\n displayName: 'Async Queuer',\n },\n {\n key: 'asyncRateLimiters',\n label: 'Async Rate Limiters',\n displayName: 'Async Rate Limiter',\n },\n]\n"],"names":[],"mappings":"AAkBO,MAAM,cAAgC;AAAA,EAC3C,EAAE,KAAK,cAAc,OAAO,cAAc,aAAa,YAAA;AAAA,EACvD,EAAE,KAAK,cAAc,OAAO,cAAc,aAAa,YAAA;AAAA,EACvD,EAAE,KAAK,YAAY,OAAO,YAAY,aAAa,UAAA;AAAA,EACnD,EAAE,KAAK,WAAW,OAAO,WAAW,aAAa,SAAA;AAAA,EACjD;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,aAAa;AAAA,EAAA;AAAA,EAEf;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,aAAa;AAAA,EAAA;AAAA,EAEf;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,aAAa;AAAA,EAAA;AAAA,EAEf;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,aAAa;AAAA,EAAA;AAAA,EAEf;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,aAAa;AAAA,EAAA;AAAA,EAEf;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,aAAa;AAAA,EAAA;AAEjB;"}
@@ -0,0 +1,8 @@
1
+ export interface PacerDevtoolsInit {
2
+ }
3
+ export declare class PacerDevtoolsCore {
4
+ #private;
5
+ constructor(_init?: PacerDevtoolsInit | undefined);
6
+ mount<T extends HTMLElement>(el: T): void;
7
+ unmount(): void;
8
+ }
@@ -0,0 +1,42 @@
1
+ import { render, createComponent, Portal, template, insert } from "solid-js/web";
2
+ import { lazy } from "solid-js";
3
+ var _tmpl$ = /* @__PURE__ */ template(`<div>`);
4
+ class PacerDevtoolsCore {
5
+ #isMounted = false;
6
+ #dispose;
7
+ #Component;
8
+ constructor(_init) {
9
+ }
10
+ mount(el) {
11
+ if (this.#isMounted) {
12
+ throw new Error("Devtools is already mounted");
13
+ }
14
+ const mountTo = el;
15
+ const dispose = render(() => {
16
+ this.#Component = lazy(() => import("./PacerDevtools.js"));
17
+ const Devtools = this.#Component;
18
+ return createComponent(Portal, {
19
+ mount: mountTo,
20
+ get children() {
21
+ var _el$ = _tmpl$();
22
+ _el$.style.setProperty("height", "100%");
23
+ insert(_el$, createComponent(Devtools, {}));
24
+ return _el$;
25
+ }
26
+ });
27
+ }, mountTo);
28
+ this.#isMounted = true;
29
+ this.#dispose = dispose;
30
+ }
31
+ unmount() {
32
+ if (!this.#isMounted) {
33
+ throw new Error("Devtools is not mounted");
34
+ }
35
+ this.#dispose?.();
36
+ this.#isMounted = false;
37
+ }
38
+ }
39
+ export {
40
+ PacerDevtoolsCore
41
+ };
42
+ //# sourceMappingURL=core.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"core.js","sources":["../../src/core.tsx"],"sourcesContent":["import { lazy } from 'solid-js'\nimport { Portal, render } from 'solid-js/web'\n\nexport interface PacerDevtoolsInit {}\n\nexport class PacerDevtoolsCore {\n #isMounted = false\n #dispose?: () => void\n #Component: any\n\n constructor(_init?: PacerDevtoolsInit | undefined) {}\n\n mount<T extends HTMLElement>(el: T) {\n if (this.#isMounted) {\n throw new Error('Devtools is already mounted')\n }\n const mountTo = el\n const dispose = render(() => {\n this.#Component = lazy(() => import('./PacerDevtools'))\n const Devtools = this.#Component\n\n return (\n <Portal mount={mountTo}>\n <div style={{ height: '100%' }}>\n <Devtools />\n </div>\n </Portal>\n )\n }, mountTo)\n this.#isMounted = true\n this.#dispose = dispose\n }\n\n unmount() {\n if (!this.#isMounted) {\n throw new Error('Devtools is not mounted')\n }\n this.#dispose?.()\n this.#isMounted = false\n }\n}\n"],"names":["PacerDevtoolsCore","constructor","_init","mount","el","Error","mountTo","dispose","render","lazy","Devtools","_$createComponent","Portal","children","_el$","_tmpl$","style","setProperty","_$insert","unmount"],"mappings":";;;AAKO,MAAMA,kBAAkB;AAAA,EAC7B,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EAEAC,YAAYC,OAAuC;AAAA,EAAA;AAAA,EAEnDC,MAA6BC,IAAO;AAClC,QAAI,KAAK,YAAY;AACnB,YAAM,IAAIC,MAAM,6BAA6B;AAAA,IAAA;AAE/C,UAAMC,UAAUF;AAChB,UAAMG,UAAUC,OAAO,MAAM;AAC3B,WAAK,aAAaC,KAAK,MAAM,OAAO,oBAAiB,CAAC;AACtD,YAAMC,WAAW,KAAK;AAEtB,aAAAC,gBACGC,QAAM;AAAA,QAACT,OAAOG;AAAAA,QAAO,IAAAO,WAAA;AAAA,cAAAC,OAAAC,OAAAA;AAAAD,eAAAE,MAAAC,YAAA,UAAA,MAAA;AAAAC,iBAAAJ,MAAAH,gBAEjBD,UAAQ,CAAA,CAAA,CAAA;AAAA,iBAAAI;AAAAA,QAAAA;AAAAA,MAAA,CAAA;AAAA,IAAA,GAIdR,OAAO;AACV,SAAK,aAAa;AAClB,SAAK,WAAWC;AAAAA,EAAAA;AAAAA,EAGlBY,UAAU;AACR,QAAI,CAAC,KAAK,YAAY;AACpB,YAAM,IAAId,MAAM,yBAAyB;AAAA,IAAA;AAE3C,SAAK,WAAA;AACL,SAAK,aAAa;AAAA,EAAA;AAEtB;"}
@@ -0,0 +1,3 @@
1
+ import * as Devtools from './core.js';
2
+ export declare const PacerDevtoolsCore: (typeof Devtools)['PacerDevtoolsCore'];
3
+ export type { PacerDevtoolsInit } from './core.js';
@@ -0,0 +1,15 @@
1
+ "use client";
2
+ import { PacerDevtoolsCore as PacerDevtoolsCore$1 } from "./core.js";
3
+ class DummyPacerDevtoolsCore {
4
+ constructor() {
5
+ }
6
+ mount() {
7
+ }
8
+ unmount() {
9
+ }
10
+ }
11
+ const PacerDevtoolsCore = process.env.NODE_ENV !== "development" ? DummyPacerDevtoolsCore : PacerDevtoolsCore$1;
12
+ export {
13
+ PacerDevtoolsCore
14
+ };
15
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["'use client'\n\nimport * as Devtools from './core'\n\n// Create a dummy class for production that does nothing\nclass DummyPacerDevtoolsCore {\n constructor() {}\n mount() {}\n unmount() {}\n}\n\nexport const PacerDevtoolsCore: (typeof Devtools)['PacerDevtoolsCore'] =\n process.env.NODE_ENV !== 'development'\n ? (DummyPacerDevtoolsCore as any)\n : Devtools.PacerDevtoolsCore\n\nexport type { PacerDevtoolsInit } from './core'\n"],"names":[],"mappings":";;AAKA;AAA6B;AACb;AAAA;AACN;AAAA;AACE;AACZ;AAEO;;;;"}
@@ -0,0 +1,3 @@
1
+ import * as Devtools from './core.js';
2
+ export declare const PacerDevtoolsCore: typeof Devtools.PacerDevtoolsCore;
3
+ export type { PacerDevtoolsInit } from './core.js';
@@ -0,0 +1,7 @@
1
+ "use client";
2
+ import { PacerDevtoolsCore as PacerDevtoolsCore$1 } from "./core.js";
3
+ const PacerDevtoolsCore = PacerDevtoolsCore$1;
4
+ export {
5
+ PacerDevtoolsCore
6
+ };
7
+ //# sourceMappingURL=production.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"production.js","sources":["../../src/production.ts"],"sourcesContent":["'use client'\n\nimport * as Devtools from './core'\n\nexport const PacerDevtoolsCore = Devtools.PacerDevtoolsCore\n\nexport type { PacerDevtoolsInit } from './core'\n"],"names":[],"mappings":";;AAIO;;;;"}