Skip to content

Commit d5e97fc

Browse files
dborysovdborysov
committed
chore: format codebase with Prettier
1 parent a8c77a5 commit d5e97fc

42 files changed

Lines changed: 792 additions & 299 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎devtools.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html>
3-
<head>
4-
<meta charset="utf-8">
3+
<head>
4+
<meta charset="utf-8" />
55
<title>TanStack Query DevTools Entry</title>
6-
</head>
7-
<body>
6+
</head>
7+
<body>
88
<script type="module" src="./src/devtools/devtools.ts"></script>
9-
</body>
9+
</body>
1010
</html>

‎eslint.config.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
1-
import js from '@eslint/js'
2-
import globals from 'globals'
3-
import reactHooks from 'eslint-plugin-react-hooks'
4-
import reactRefresh from 'eslint-plugin-react-refresh'
5-
import tseslint from 'typescript-eslint'
1+
import js from "@eslint/js";
2+
import globals from "globals";
3+
import reactHooks from "eslint-plugin-react-hooks";
4+
import reactRefresh from "eslint-plugin-react-refresh";
5+
import tseslint from "typescript-eslint";
66

77
export default tseslint.config(
8-
{ ignores: ['dist'] },
8+
{ ignores: ["dist"] },
99
{
1010
extends: [js.configs.recommended, ...tseslint.configs.recommended],
11-
files: ['**/*.{ts,tsx}'],
11+
files: ["**/*.{ts,tsx}"],
1212
languageOptions: {
1313
ecmaVersion: 2020,
1414
globals: globals.browser,
1515
},
1616
plugins: {
17-
'react-hooks': reactHooks,
18-
'react-refresh': reactRefresh,
17+
"react-hooks": reactHooks,
18+
"react-refresh": reactRefresh,
1919
},
2020
rules: {
2121
...reactHooks.configs.recommended.rules,
22-
'react-refresh/only-export-components': [
23-
'warn',
22+
"react-refresh/only-export-components": [
23+
"warn",
2424
{ allowConstantExport: true },
2525
],
2626
},
2727
},
28-
)
28+
);

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />

‎src/App.tsx‎

Lines changed: 73 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,25 +14,54 @@ import { useViewState } from "./hooks/useViewState";
1414

1515
function App() {
1616
// Use our custom hooks
17-
const { tanStackQueryDetected, queries, mutations, artificialStates, sendMessage } = useConnection();
17+
const {
18+
tanStackQueryDetected,
19+
queries,
20+
mutations,
21+
artificialStates,
22+
sendMessage,
23+
} = useConnection();
1824
const { isDarkMode, handleQueryAction } = useUIState(sendMessage);
19-
const { currentView, searchTerm, selectedQueryIndex, selectedMutationIndex, queryKeyboardNavigation, mutationKeyboardNavigation, setSearchTerm, setSelectedQueryIndex, setSelectedMutationIndex, handleViewChange } = useViewState();
25+
const {
26+
currentView,
27+
searchTerm,
28+
selectedQueryIndex,
29+
selectedMutationIndex,
30+
queryKeyboardNavigation,
31+
mutationKeyboardNavigation,
32+
setSearchTerm,
33+
setSelectedQueryIndex,
34+
setSelectedMutationIndex,
35+
handleViewChange,
36+
} = useViewState();
2037

2138
return (
2239
<div className="h-screen flex flex-col font-sans text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 overflow-hidden">
2340
<header className="p-4 pb-0 flex-shrink-0">
2441
{tanStackQueryDetected === true && (
2542
<div className="flex items-center justify-start gap-x-4 mb-4">
26-
<img src="/icon-48.png" alt="TanStack Query DevTools" className="w-6 h-6" />
43+
<img
44+
src="/icon-48.png"
45+
alt="TanStack Query DevTools"
46+
className="w-6 h-6"
47+
/>
2748
<ToggleGroup
2849
currentView={currentView}
2950
onViewChange={handleViewChange}
3051
options={[
3152
{ value: "queries", label: "Queries", count: queries.length },
32-
{ value: "mutations", label: "Mutations", count: mutations.length },
53+
{
54+
value: "mutations",
55+
label: "Mutations",
56+
count: mutations.length,
57+
},
3358
]}
3459
/>
35-
<SearchBar searchTerm={searchTerm} onSearchChange={setSearchTerm} placeholder={`Search ${currentView}...`} />
60+
<SearchBar
61+
searchTerm={searchTerm}
62+
onSearchChange={setSearchTerm}
63+
placeholder={`Search ${currentView}...`}
64+
/>
3665
</div>
3766
)}
3867
</header>
@@ -42,7 +71,45 @@ function App() {
4271

4372
{tanStackQueryDetected === true && (
4473
<div className="flex-1 flex flex-col min-h-0">
45-
<MainLayout listView={<ListView currentView={currentView} searchTerm={searchTerm} queries={queries} mutations={mutations} selectedQueryIndex={selectedQueryIndex} selectedMutationIndex={selectedMutationIndex} onSelectQuery={setSelectedQueryIndex} onSelectMutation={setSelectedMutationIndex} queryKeyboardNavigation={queryKeyboardNavigation} mutationKeyboardNavigation={mutationKeyboardNavigation} />} detailView={currentView === "queries" ? <QueryDetails selectedQuery={selectedQueryIndex !== null ? queries[selectedQueryIndex] : null} onAction={handleQueryAction} isDarkMode={isDarkMode} artificialStates={artificialStates} /> : <MutationDetails selectedMutation={selectedMutationIndex !== null ? mutations[selectedMutationIndex] : null} isDarkMode={isDarkMode} />} />
74+
<MainLayout
75+
listView={
76+
<ListView
77+
currentView={currentView}
78+
searchTerm={searchTerm}
79+
queries={queries}
80+
mutations={mutations}
81+
selectedQueryIndex={selectedQueryIndex}
82+
selectedMutationIndex={selectedMutationIndex}
83+
onSelectQuery={setSelectedQueryIndex}
84+
onSelectMutation={setSelectedMutationIndex}
85+
queryKeyboardNavigation={queryKeyboardNavigation}
86+
mutationKeyboardNavigation={mutationKeyboardNavigation}
87+
/>
88+
}
89+
detailView={
90+
currentView === "queries" ? (
91+
<QueryDetails
92+
selectedQuery={
93+
selectedQueryIndex !== null
94+
? queries[selectedQueryIndex]
95+
: null
96+
}
97+
onAction={handleQueryAction}
98+
isDarkMode={isDarkMode}
99+
artificialStates={artificialStates}
100+
/>
101+
) : (
102+
<MutationDetails
103+
selectedMutation={
104+
selectedMutationIndex !== null
105+
? mutations[selectedMutationIndex]
106+
: null
107+
}
108+
isDarkMode={isDarkMode}
109+
/>
110+
)
111+
}
112+
/>
46113
</div>
47114
)}
48115
</main>

‎src/background/background.ts‎

Lines changed: 85 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,12 @@ const activeConnections = new Map<string, ConnectionInfo>();
1616
// Message types
1717
interface TanStackQueryMessage {
1818
type: "QEVENT";
19-
subtype: "QUERY_CLIENT_DETECTED" | "QUERY_CLIENT_NOT_FOUND" | "QUERY_STATE_UPDATE" | "QUERY_DATA_UPDATE" | "MUTATION_DATA_UPDATE";
19+
subtype:
20+
| "QUERY_CLIENT_DETECTED"
21+
| "QUERY_CLIENT_NOT_FOUND"
22+
| "QUERY_STATE_UPDATE"
23+
| "QUERY_DATA_UPDATE"
24+
| "MUTATION_DATA_UPDATE";
2025
payload?: unknown;
2126
}
2227

@@ -107,93 +112,100 @@ chrome.runtime.onConnect.addListener(async (port) => {
107112
// Forward messages to content script if needed
108113
const currentTabId = await getCurrentTabId();
109114
if (currentTabId && message.type) {
110-
chrome.tabs.sendMessage(currentTabId, message).catch((error: unknown) => {
111-
console.warn("Failed to send message to content script:", error);
112-
});
115+
chrome.tabs
116+
.sendMessage(currentTabId, message)
117+
.catch((error: unknown) => {
118+
console.warn("Failed to send message to content script:", error);
119+
});
113120
}
114121
});
115122
}
116123
});
117124

118125
// Handle messages from content scripts
119-
chrome.runtime.onMessage.addListener((message: TanStackQueryMessage | QueryActionResult, sender, sendResponse) => {
120-
const tabId = sender.tab?.id;
121-
if (!tabId) return;
122-
123-
if (message.type === "QEVENT") {
124-
switch (message.subtype) {
125-
case "QUERY_CLIENT_DETECTED":
126-
tabsWithTanStackQuery.add(tabId);
127-
128-
// Forward to DevTools panel
129-
devtoolsPort?.postMessage({
130-
type: "QEVENT",
131-
subtype: "QUERY_CLIENT_DETECTED",
132-
tabId: tabId,
133-
payload: message.payload,
134-
});
135-
break;
126+
chrome.runtime.onMessage.addListener(
127+
(message: TanStackQueryMessage | QueryActionResult, sender, sendResponse) => {
128+
const tabId = sender.tab?.id;
129+
if (!tabId) return;
130+
131+
if (message.type === "QEVENT") {
132+
switch (message.subtype) {
133+
case "QUERY_CLIENT_DETECTED":
134+
tabsWithTanStackQuery.add(tabId);
135+
136+
// Forward to DevTools panel
137+
devtoolsPort?.postMessage({
138+
type: "QEVENT",
139+
subtype: "QUERY_CLIENT_DETECTED",
140+
tabId: tabId,
141+
payload: message.payload,
142+
});
143+
break;
136144

137-
case "QUERY_CLIENT_NOT_FOUND":
138-
tabsWithTanStackQuery.delete(tabId);
145+
case "QUERY_CLIENT_NOT_FOUND":
146+
tabsWithTanStackQuery.delete(tabId);
139147

140-
// Forward to DevTools panel
141-
devtoolsPort?.postMessage({
142-
type: "QEVENT",
143-
subtype: "QUERY_CLIENT_NOT_FOUND",
144-
tabId: tabId,
145-
payload: message.payload,
146-
});
147-
break;
148-
149-
case "QUERY_STATE_UPDATE":
150-
// Forward to DevTools panel
151-
devtoolsPort?.postMessage({
152-
type: "QEVENT",
153-
subtype: "QUERY_STATE_UPDATE",
154-
tabId: tabId,
155-
payload: message.payload,
156-
});
157-
break;
158-
159-
case "QUERY_DATA_UPDATE":
160-
// Forward to DevTools panel
161-
devtoolsPort?.postMessage({
162-
type: "QEVENT",
163-
subtype: "QUERY_DATA_UPDATE",
164-
tabId: tabId,
165-
payload: message.payload,
166-
});
167-
break;
168-
169-
case "MUTATION_DATA_UPDATE":
170-
// Forward to DevTools panel
171-
devtoolsPort?.postMessage({
172-
type: "QEVENT",
173-
subtype: "MUTATION_DATA_UPDATE",
174-
tabId: tabId,
175-
payload: message.payload,
176-
});
177-
break;
148+
// Forward to DevTools panel
149+
devtoolsPort?.postMessage({
150+
type: "QEVENT",
151+
subtype: "QUERY_CLIENT_NOT_FOUND",
152+
tabId: tabId,
153+
payload: message.payload,
154+
});
155+
break;
156+
157+
case "QUERY_STATE_UPDATE":
158+
// Forward to DevTools panel
159+
devtoolsPort?.postMessage({
160+
type: "QEVENT",
161+
subtype: "QUERY_STATE_UPDATE",
162+
tabId: tabId,
163+
payload: message.payload,
164+
});
165+
break;
166+
167+
case "QUERY_DATA_UPDATE":
168+
// Forward to DevTools panel
169+
devtoolsPort?.postMessage({
170+
type: "QEVENT",
171+
subtype: "QUERY_DATA_UPDATE",
172+
tabId: tabId,
173+
payload: message.payload,
174+
});
175+
break;
176+
177+
case "MUTATION_DATA_UPDATE":
178+
// Forward to DevTools panel
179+
devtoolsPort?.postMessage({
180+
type: "QEVENT",
181+
subtype: "MUTATION_DATA_UPDATE",
182+
tabId: tabId,
183+
payload: message.payload,
184+
});
185+
break;
186+
}
178187
}
179-
}
180188

181-
// Handle query action results from content script
182-
if (message.type === "QUERY_ACTION_RESULT") {
183-
// Forward to DevTools panel
184-
devtoolsPort?.postMessage({
185-
...message,
186-
tabId: tabId,
187-
});
188-
}
189+
// Handle query action results from content script
190+
if (message.type === "QUERY_ACTION_RESULT") {
191+
// Forward to DevTools panel
192+
devtoolsPort?.postMessage({
193+
...message,
194+
tabId: tabId,
195+
});
196+
}
189197

190-
sendResponse({ received: true });
191-
});
198+
sendResponse({ received: true });
199+
},
200+
);
192201

193202
// Helper function to get current active tab ID
194203
async function getCurrentTabId(): Promise<number | null> {
195204
try {
196-
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
205+
const [tab] = await chrome.tabs.query({
206+
active: true,
207+
currentWindow: true,
208+
});
197209
return tab?.id || null;
198210
} catch (error) {
199211
console.warn("Failed to get current tab ID:", error);

‎src/components/common/Button.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@ import React from "react";
22
import { buttonVariants, type ButtonVariants } from "../../lib/variants";
33
import { clsx } from "clsx";
44

5-
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ButtonVariants {
5+
interface ButtonProps
6+
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
7+
ButtonVariants {
68
children: React.ReactNode;
79
isLoading?: boolean;
810
loadingText?: string;
@@ -30,7 +32,7 @@ export function Button({
3032
disabled={isDisabled}
3133
{...props}
3234
>
33-
{isLoading ? (loadingText || "Loading...") : children}
35+
{isLoading ? loadingText || "Loading..." : children}
3436
</button>
3537
);
3638
}

‎src/components/common/Chip.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@ import React from "react";
22
import { chipVariants, type ChipVariants } from "../../lib/variants";
33
import { clsx } from "clsx";
44

5-
interface ChipProps extends React.HTMLAttributes<HTMLSpanElement>, ChipVariants {
5+
interface ChipProps
6+
extends React.HTMLAttributes<HTMLSpanElement>,
7+
ChipVariants {
68
children: React.ReactNode;
79
}
810

0 commit comments

Comments
 (0)