@tanstack/query-devtools 5.27.3 → 5.27.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/Devtools/{ZI3HPF3S.jsx → A63KNBMQ.jsx} +31 -25
- package/build/Devtools/{MZG6MFIN.jsx → HPBPMTAC.jsx} +31 -25
- package/build/Devtools/{UXHVNKJK.js → HSODRENB.js} +43 -25
- package/build/Devtools/{DBFR2OSQ.js → NISTJ3CZ.js} +43 -25
- package/build/dev.cjs +45 -27
- package/build/dev.js +1 -1
- package/build/dev.jsx +1 -1
- package/build/index.cjs +45 -27
- package/build/index.js +1 -1
- package/build/index.jsx +1 -1
- package/package.json +2 -2
- package/src/Devtools.tsx +1 -2
- package/src/Explorer.tsx +31 -10
|
@@ -10007,16 +10007,17 @@ function chunkArray(array, size2) {
|
|
|
10007
10007
|
}
|
|
10008
10008
|
var Expander = (props) => {
|
|
10009
10009
|
const theme = useTheme();
|
|
10010
|
+
const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
|
|
10010
10011
|
const styles = createMemo(() => {
|
|
10011
|
-
return theme() === "dark" ? darkStyles : lightStyles;
|
|
10012
|
+
return theme() === "dark" ? darkStyles(css) : lightStyles(css);
|
|
10012
10013
|
});
|
|
10013
10014
|
return <span
|
|
10014
10015
|
class={clsx(
|
|
10015
10016
|
styles().expander,
|
|
10016
|
-
|
|
10017
|
+
css`
|
|
10017
10018
|
transform: rotate(${props.expanded ? 90 : 0}deg);
|
|
10018
10019
|
`,
|
|
10019
|
-
props.expanded &&
|
|
10020
|
+
props.expanded && css`
|
|
10020
10021
|
& svg {
|
|
10021
10022
|
top: -1px;
|
|
10022
10023
|
}
|
|
@@ -10037,8 +10038,9 @@ var Expander = (props) => {
|
|
|
10037
10038
|
};
|
|
10038
10039
|
var CopyButton = (props) => {
|
|
10039
10040
|
const theme = useTheme();
|
|
10041
|
+
const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
|
|
10040
10042
|
const styles = createMemo(() => {
|
|
10041
|
-
return theme() === "dark" ? darkStyles : lightStyles;
|
|
10043
|
+
return theme() === "dark" ? darkStyles(css) : lightStyles(css);
|
|
10042
10044
|
});
|
|
10043
10045
|
const [copyState, setCopyState] = createSignal("NoCopy");
|
|
10044
10046
|
return <button
|
|
@@ -10069,8 +10071,9 @@ var CopyButton = (props) => {
|
|
|
10069
10071
|
};
|
|
10070
10072
|
var ClearArrayButton = (props) => {
|
|
10071
10073
|
const theme = useTheme();
|
|
10074
|
+
const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
|
|
10072
10075
|
const styles = createMemo(() => {
|
|
10073
|
-
return theme() === "dark" ? darkStyles : lightStyles;
|
|
10076
|
+
return theme() === "dark" ? darkStyles(css) : lightStyles(css);
|
|
10074
10077
|
});
|
|
10075
10078
|
const queryClient = useQueryDevtoolsContext().client;
|
|
10076
10079
|
return <button
|
|
@@ -10086,8 +10089,9 @@ var ClearArrayButton = (props) => {
|
|
|
10086
10089
|
};
|
|
10087
10090
|
var DeleteItemButton = (props) => {
|
|
10088
10091
|
const theme = useTheme();
|
|
10092
|
+
const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
|
|
10089
10093
|
const styles = createMemo(() => {
|
|
10090
|
-
return theme() === "dark" ? darkStyles : lightStyles;
|
|
10094
|
+
return theme() === "dark" ? darkStyles(css) : lightStyles(css);
|
|
10091
10095
|
});
|
|
10092
10096
|
const queryClient = useQueryDevtoolsContext().client;
|
|
10093
10097
|
return <button
|
|
@@ -10103,14 +10107,15 @@ var DeleteItemButton = (props) => {
|
|
|
10103
10107
|
};
|
|
10104
10108
|
var ToggleValueButton = (props) => {
|
|
10105
10109
|
const theme = useTheme();
|
|
10110
|
+
const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
|
|
10106
10111
|
const styles = createMemo(() => {
|
|
10107
|
-
return theme() === "dark" ? darkStyles : lightStyles;
|
|
10112
|
+
return theme() === "dark" ? darkStyles(css) : lightStyles(css);
|
|
10108
10113
|
});
|
|
10109
10114
|
const queryClient = useQueryDevtoolsContext().client;
|
|
10110
10115
|
return <button
|
|
10111
10116
|
class={clsx(
|
|
10112
10117
|
styles().actionButton,
|
|
10113
|
-
|
|
10118
|
+
css`
|
|
10114
10119
|
width: ${tokens.size[3.5]};
|
|
10115
10120
|
height: ${tokens.size[3.5]};
|
|
10116
10121
|
`
|
|
@@ -10133,8 +10138,9 @@ function isIterable(x) {
|
|
|
10133
10138
|
}
|
|
10134
10139
|
function Explorer(props) {
|
|
10135
10140
|
const theme = useTheme();
|
|
10141
|
+
const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
|
|
10136
10142
|
const styles = createMemo(() => {
|
|
10137
|
-
return theme() === "dark" ? darkStyles : lightStyles;
|
|
10143
|
+
return theme() === "dark" ? darkStyles(css) : lightStyles(css);
|
|
10138
10144
|
});
|
|
10139
10145
|
const queryClient = useQueryDevtoolsContext().client;
|
|
10140
10146
|
const [expanded, setExpanded] = createSignal(
|
|
@@ -10300,11 +10306,11 @@ function Explorer(props) {
|
|
|
10300
10306
|
</div></Show>
|
|
10301
10307
|
</div>;
|
|
10302
10308
|
}
|
|
10303
|
-
var stylesFactory = (theme) => {
|
|
10309
|
+
var stylesFactory = (theme, css) => {
|
|
10304
10310
|
const { colors, font, size: size2, border } = tokens;
|
|
10305
10311
|
const t2 = (light, dark) => theme === "light" ? light : dark;
|
|
10306
10312
|
return {
|
|
10307
|
-
entry:
|
|
10313
|
+
entry: css`
|
|
10308
10314
|
& * {
|
|
10309
10315
|
font-size: ${font.size.xs};
|
|
10310
10316
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
|
@@ -10314,13 +10320,13 @@ var stylesFactory = (theme) => {
|
|
|
10314
10320
|
outline: none;
|
|
10315
10321
|
word-break: break-word;
|
|
10316
10322
|
`,
|
|
10317
|
-
subEntry:
|
|
10323
|
+
subEntry: css`
|
|
10318
10324
|
margin: 0 0 0 0.5em;
|
|
10319
10325
|
padding-left: 0.75em;
|
|
10320
10326
|
border-left: 2px solid ${t2(colors.gray[300], colors.darkGray[400])};
|
|
10321
10327
|
/* outline: 1px solid ${colors.teal[400]}; */
|
|
10322
10328
|
`,
|
|
10323
|
-
expander:
|
|
10329
|
+
expander: css`
|
|
10324
10330
|
& path {
|
|
10325
10331
|
stroke: ${colors.gray[400]};
|
|
10326
10332
|
}
|
|
@@ -10333,14 +10339,14 @@ var stylesFactory = (theme) => {
|
|
|
10333
10339
|
transition: all 0.1s ease;
|
|
10334
10340
|
/* outline: 1px solid ${colors.blue[400]}; */
|
|
10335
10341
|
`,
|
|
10336
|
-
expanderButtonContainer:
|
|
10342
|
+
expanderButtonContainer: css`
|
|
10337
10343
|
display: flex;
|
|
10338
10344
|
align-items: center;
|
|
10339
10345
|
line-height: ${size2[4]};
|
|
10340
10346
|
min-height: ${size2[4]};
|
|
10341
10347
|
gap: ${size2[2]};
|
|
10342
10348
|
`,
|
|
10343
|
-
expanderButton:
|
|
10349
|
+
expanderButton: css`
|
|
10344
10350
|
cursor: pointer;
|
|
10345
10351
|
color: inherit;
|
|
10346
10352
|
font: inherit;
|
|
@@ -10365,26 +10371,26 @@ var stylesFactory = (theme) => {
|
|
|
10365
10371
|
left: 1px;
|
|
10366
10372
|
}
|
|
10367
10373
|
`,
|
|
10368
|
-
info:
|
|
10374
|
+
info: css`
|
|
10369
10375
|
color: ${t2(colors.gray[500], colors.gray[500])};
|
|
10370
10376
|
font-size: ${font.size.xs};
|
|
10371
10377
|
margin-left: ${size2[1]};
|
|
10372
10378
|
/* outline: 1px solid ${colors.yellow[400]}; */
|
|
10373
10379
|
`,
|
|
10374
|
-
label:
|
|
10380
|
+
label: css`
|
|
10375
10381
|
color: ${t2(colors.gray[700], colors.gray[300])};
|
|
10376
10382
|
white-space: nowrap;
|
|
10377
10383
|
`,
|
|
10378
|
-
value:
|
|
10384
|
+
value: css`
|
|
10379
10385
|
color: ${t2(colors.purple[600], colors.purple[400])};
|
|
10380
10386
|
flex-grow: 1;
|
|
10381
10387
|
`,
|
|
10382
|
-
actions:
|
|
10388
|
+
actions: css`
|
|
10383
10389
|
display: inline-flex;
|
|
10384
10390
|
gap: ${size2[2]};
|
|
10385
10391
|
align-items: center;
|
|
10386
10392
|
`,
|
|
10387
|
-
row:
|
|
10393
|
+
row: css`
|
|
10388
10394
|
display: inline-flex;
|
|
10389
10395
|
gap: ${size2[2]};
|
|
10390
10396
|
width: 100%;
|
|
@@ -10392,7 +10398,7 @@ var stylesFactory = (theme) => {
|
|
|
10392
10398
|
line-height: ${size2[4.5]};
|
|
10393
10399
|
align-items: center;
|
|
10394
10400
|
`,
|
|
10395
|
-
editableInput:
|
|
10401
|
+
editableInput: css`
|
|
10396
10402
|
border: none;
|
|
10397
10403
|
padding: ${size2[0.5]} ${size2[1]} ${size2[0.5]} ${size2[1.5]};
|
|
10398
10404
|
flex-grow: 1;
|
|
@@ -10403,7 +10409,7 @@ var stylesFactory = (theme) => {
|
|
|
10403
10409
|
background-color: ${t2(colors.gray[300], colors.darkGray[600])};
|
|
10404
10410
|
}
|
|
10405
10411
|
`,
|
|
10406
|
-
actionButton:
|
|
10412
|
+
actionButton: css`
|
|
10407
10413
|
background-color: transparent;
|
|
10408
10414
|
color: ${t2(colors.gray[500], colors.gray[500])};
|
|
10409
10415
|
border: none;
|
|
@@ -10429,8 +10435,8 @@ var stylesFactory = (theme) => {
|
|
|
10429
10435
|
`
|
|
10430
10436
|
};
|
|
10431
10437
|
};
|
|
10432
|
-
var lightStyles = stylesFactory("light");
|
|
10433
|
-
var darkStyles = stylesFactory("dark");
|
|
10438
|
+
var lightStyles = (css) => stylesFactory("light", css);
|
|
10439
|
+
var darkStyles = (css) => stylesFactory("dark", css);
|
|
10434
10440
|
|
|
10435
10441
|
// src/Devtools.tsx
|
|
10436
10442
|
var firstBreakpoint = 1024;
|
|
@@ -10452,6 +10458,7 @@ var [selectedMutationId, setSelectedMutationId] = createSignal(
|
|
|
10452
10458
|
null
|
|
10453
10459
|
);
|
|
10454
10460
|
var [panelWidth, setPanelWidth] = createSignal(0);
|
|
10461
|
+
var [offline, setOffline] = createSignal(false);
|
|
10455
10462
|
var PiPContext = createContext(
|
|
10456
10463
|
void 0
|
|
10457
10464
|
);
|
|
@@ -10923,7 +10930,6 @@ var ContentView = (props) => {
|
|
|
10923
10930
|
const mutationSortOrder = createMemo(
|
|
10924
10931
|
() => Number(props.localStore.mutationSortOrder) || DEFAULT_SORT_ORDER
|
|
10925
10932
|
);
|
|
10926
|
-
const [offline, setOffline] = createSignal(false);
|
|
10927
10933
|
const sortFn = createMemo(() => sortFns[sort()]);
|
|
10928
10934
|
const mutationSortFn = createMemo(
|
|
10929
10935
|
() => mutationSortFns[mutationSort()]
|
|
@@ -10007,16 +10007,17 @@ function chunkArray(array, size2) {
|
|
|
10007
10007
|
}
|
|
10008
10008
|
var Expander = (props) => {
|
|
10009
10009
|
const theme = useTheme();
|
|
10010
|
+
const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
|
|
10010
10011
|
const styles = createMemo(() => {
|
|
10011
|
-
return theme() === "dark" ? darkStyles : lightStyles;
|
|
10012
|
+
return theme() === "dark" ? darkStyles(css) : lightStyles(css);
|
|
10012
10013
|
});
|
|
10013
10014
|
return <span
|
|
10014
10015
|
class={clsx(
|
|
10015
10016
|
styles().expander,
|
|
10016
|
-
|
|
10017
|
+
css`
|
|
10017
10018
|
transform: rotate(${props.expanded ? 90 : 0}deg);
|
|
10018
10019
|
`,
|
|
10019
|
-
props.expanded &&
|
|
10020
|
+
props.expanded && css`
|
|
10020
10021
|
& svg {
|
|
10021
10022
|
top: -1px;
|
|
10022
10023
|
}
|
|
@@ -10037,8 +10038,9 @@ var Expander = (props) => {
|
|
|
10037
10038
|
};
|
|
10038
10039
|
var CopyButton = (props) => {
|
|
10039
10040
|
const theme = useTheme();
|
|
10041
|
+
const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
|
|
10040
10042
|
const styles = createMemo(() => {
|
|
10041
|
-
return theme() === "dark" ? darkStyles : lightStyles;
|
|
10043
|
+
return theme() === "dark" ? darkStyles(css) : lightStyles(css);
|
|
10042
10044
|
});
|
|
10043
10045
|
const [copyState, setCopyState] = createSignal("NoCopy");
|
|
10044
10046
|
return <button
|
|
@@ -10070,8 +10072,9 @@ var CopyButton = (props) => {
|
|
|
10070
10072
|
};
|
|
10071
10073
|
var ClearArrayButton = (props) => {
|
|
10072
10074
|
const theme = useTheme();
|
|
10075
|
+
const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
|
|
10073
10076
|
const styles = createMemo(() => {
|
|
10074
|
-
return theme() === "dark" ? darkStyles : lightStyles;
|
|
10077
|
+
return theme() === "dark" ? darkStyles(css) : lightStyles(css);
|
|
10075
10078
|
});
|
|
10076
10079
|
const queryClient = useQueryDevtoolsContext().client;
|
|
10077
10080
|
return <button
|
|
@@ -10087,8 +10090,9 @@ var ClearArrayButton = (props) => {
|
|
|
10087
10090
|
};
|
|
10088
10091
|
var DeleteItemButton = (props) => {
|
|
10089
10092
|
const theme = useTheme();
|
|
10093
|
+
const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
|
|
10090
10094
|
const styles = createMemo(() => {
|
|
10091
|
-
return theme() === "dark" ? darkStyles : lightStyles;
|
|
10095
|
+
return theme() === "dark" ? darkStyles(css) : lightStyles(css);
|
|
10092
10096
|
});
|
|
10093
10097
|
const queryClient = useQueryDevtoolsContext().client;
|
|
10094
10098
|
return <button
|
|
@@ -10104,14 +10108,15 @@ var DeleteItemButton = (props) => {
|
|
|
10104
10108
|
};
|
|
10105
10109
|
var ToggleValueButton = (props) => {
|
|
10106
10110
|
const theme = useTheme();
|
|
10111
|
+
const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
|
|
10107
10112
|
const styles = createMemo(() => {
|
|
10108
|
-
return theme() === "dark" ? darkStyles : lightStyles;
|
|
10113
|
+
return theme() === "dark" ? darkStyles(css) : lightStyles(css);
|
|
10109
10114
|
});
|
|
10110
10115
|
const queryClient = useQueryDevtoolsContext().client;
|
|
10111
10116
|
return <button
|
|
10112
10117
|
class={clsx(
|
|
10113
10118
|
styles().actionButton,
|
|
10114
|
-
|
|
10119
|
+
css`
|
|
10115
10120
|
width: ${tokens.size[3.5]};
|
|
10116
10121
|
height: ${tokens.size[3.5]};
|
|
10117
10122
|
`
|
|
@@ -10134,8 +10139,9 @@ function isIterable(x) {
|
|
|
10134
10139
|
}
|
|
10135
10140
|
function Explorer(props) {
|
|
10136
10141
|
const theme = useTheme();
|
|
10142
|
+
const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
|
|
10137
10143
|
const styles = createMemo(() => {
|
|
10138
|
-
return theme() === "dark" ? darkStyles : lightStyles;
|
|
10144
|
+
return theme() === "dark" ? darkStyles(css) : lightStyles(css);
|
|
10139
10145
|
});
|
|
10140
10146
|
const queryClient = useQueryDevtoolsContext().client;
|
|
10141
10147
|
const [expanded, setExpanded] = createSignal(
|
|
@@ -10301,11 +10307,11 @@ function Explorer(props) {
|
|
|
10301
10307
|
</div></Show>
|
|
10302
10308
|
</div>;
|
|
10303
10309
|
}
|
|
10304
|
-
var stylesFactory = (theme) => {
|
|
10310
|
+
var stylesFactory = (theme, css) => {
|
|
10305
10311
|
const { colors, font, size: size2, border } = tokens;
|
|
10306
10312
|
const t2 = (light, dark) => theme === "light" ? light : dark;
|
|
10307
10313
|
return {
|
|
10308
|
-
entry:
|
|
10314
|
+
entry: css`
|
|
10309
10315
|
& * {
|
|
10310
10316
|
font-size: ${font.size.xs};
|
|
10311
10317
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
|
@@ -10315,13 +10321,13 @@ var stylesFactory = (theme) => {
|
|
|
10315
10321
|
outline: none;
|
|
10316
10322
|
word-break: break-word;
|
|
10317
10323
|
`,
|
|
10318
|
-
subEntry:
|
|
10324
|
+
subEntry: css`
|
|
10319
10325
|
margin: 0 0 0 0.5em;
|
|
10320
10326
|
padding-left: 0.75em;
|
|
10321
10327
|
border-left: 2px solid ${t2(colors.gray[300], colors.darkGray[400])};
|
|
10322
10328
|
/* outline: 1px solid ${colors.teal[400]}; */
|
|
10323
10329
|
`,
|
|
10324
|
-
expander:
|
|
10330
|
+
expander: css`
|
|
10325
10331
|
& path {
|
|
10326
10332
|
stroke: ${colors.gray[400]};
|
|
10327
10333
|
}
|
|
@@ -10334,14 +10340,14 @@ var stylesFactory = (theme) => {
|
|
|
10334
10340
|
transition: all 0.1s ease;
|
|
10335
10341
|
/* outline: 1px solid ${colors.blue[400]}; */
|
|
10336
10342
|
`,
|
|
10337
|
-
expanderButtonContainer:
|
|
10343
|
+
expanderButtonContainer: css`
|
|
10338
10344
|
display: flex;
|
|
10339
10345
|
align-items: center;
|
|
10340
10346
|
line-height: ${size2[4]};
|
|
10341
10347
|
min-height: ${size2[4]};
|
|
10342
10348
|
gap: ${size2[2]};
|
|
10343
10349
|
`,
|
|
10344
|
-
expanderButton:
|
|
10350
|
+
expanderButton: css`
|
|
10345
10351
|
cursor: pointer;
|
|
10346
10352
|
color: inherit;
|
|
10347
10353
|
font: inherit;
|
|
@@ -10366,26 +10372,26 @@ var stylesFactory = (theme) => {
|
|
|
10366
10372
|
left: 1px;
|
|
10367
10373
|
}
|
|
10368
10374
|
`,
|
|
10369
|
-
info:
|
|
10375
|
+
info: css`
|
|
10370
10376
|
color: ${t2(colors.gray[500], colors.gray[500])};
|
|
10371
10377
|
font-size: ${font.size.xs};
|
|
10372
10378
|
margin-left: ${size2[1]};
|
|
10373
10379
|
/* outline: 1px solid ${colors.yellow[400]}; */
|
|
10374
10380
|
`,
|
|
10375
|
-
label:
|
|
10381
|
+
label: css`
|
|
10376
10382
|
color: ${t2(colors.gray[700], colors.gray[300])};
|
|
10377
10383
|
white-space: nowrap;
|
|
10378
10384
|
`,
|
|
10379
|
-
value:
|
|
10385
|
+
value: css`
|
|
10380
10386
|
color: ${t2(colors.purple[600], colors.purple[400])};
|
|
10381
10387
|
flex-grow: 1;
|
|
10382
10388
|
`,
|
|
10383
|
-
actions:
|
|
10389
|
+
actions: css`
|
|
10384
10390
|
display: inline-flex;
|
|
10385
10391
|
gap: ${size2[2]};
|
|
10386
10392
|
align-items: center;
|
|
10387
10393
|
`,
|
|
10388
|
-
row:
|
|
10394
|
+
row: css`
|
|
10389
10395
|
display: inline-flex;
|
|
10390
10396
|
gap: ${size2[2]};
|
|
10391
10397
|
width: 100%;
|
|
@@ -10393,7 +10399,7 @@ var stylesFactory = (theme) => {
|
|
|
10393
10399
|
line-height: ${size2[4.5]};
|
|
10394
10400
|
align-items: center;
|
|
10395
10401
|
`,
|
|
10396
|
-
editableInput:
|
|
10402
|
+
editableInput: css`
|
|
10397
10403
|
border: none;
|
|
10398
10404
|
padding: ${size2[0.5]} ${size2[1]} ${size2[0.5]} ${size2[1.5]};
|
|
10399
10405
|
flex-grow: 1;
|
|
@@ -10404,7 +10410,7 @@ var stylesFactory = (theme) => {
|
|
|
10404
10410
|
background-color: ${t2(colors.gray[300], colors.darkGray[600])};
|
|
10405
10411
|
}
|
|
10406
10412
|
`,
|
|
10407
|
-
actionButton:
|
|
10413
|
+
actionButton: css`
|
|
10408
10414
|
background-color: transparent;
|
|
10409
10415
|
color: ${t2(colors.gray[500], colors.gray[500])};
|
|
10410
10416
|
border: none;
|
|
@@ -10430,8 +10436,8 @@ var stylesFactory = (theme) => {
|
|
|
10430
10436
|
`
|
|
10431
10437
|
};
|
|
10432
10438
|
};
|
|
10433
|
-
var lightStyles = stylesFactory("light");
|
|
10434
|
-
var darkStyles = stylesFactory("dark");
|
|
10439
|
+
var lightStyles = (css) => stylesFactory("light", css);
|
|
10440
|
+
var darkStyles = (css) => stylesFactory("dark", css);
|
|
10435
10441
|
|
|
10436
10442
|
// src/Devtools.tsx
|
|
10437
10443
|
var firstBreakpoint = 1024;
|
|
@@ -10453,6 +10459,7 @@ var [selectedMutationId, setSelectedMutationId] = createSignal(
|
|
|
10453
10459
|
null
|
|
10454
10460
|
);
|
|
10455
10461
|
var [panelWidth, setPanelWidth] = createSignal(0);
|
|
10462
|
+
var [offline, setOffline] = createSignal(false);
|
|
10456
10463
|
var PiPContext = createContext(
|
|
10457
10464
|
void 0
|
|
10458
10465
|
);
|
|
@@ -10924,7 +10931,6 @@ var ContentView = (props) => {
|
|
|
10924
10931
|
const mutationSortOrder = createMemo(
|
|
10925
10932
|
() => Number(props.localStore.mutationSortOrder) || DEFAULT_SORT_ORDER
|
|
10926
10933
|
);
|
|
10927
|
-
const [offline, setOffline] = createSignal(false);
|
|
10928
10934
|
const sortFn = createMemo(() => sortFns[sort()]);
|
|
10929
10935
|
const mutationSortFn = createMemo(
|
|
10930
10936
|
() => mutationSortFns[mutationSort()]
|
|
@@ -8874,14 +8874,17 @@ function chunkArray(array, size2) {
|
|
|
8874
8874
|
}
|
|
8875
8875
|
var Expander = (props) => {
|
|
8876
8876
|
const theme = useTheme();
|
|
8877
|
+
const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
|
|
8878
|
+
target: useQueryDevtoolsContext().shadowDOMTarget
|
|
8879
|
+
}) : u;
|
|
8877
8880
|
const styles = createMemo(() => {
|
|
8878
|
-
return theme() === "dark" ? darkStyles : lightStyles;
|
|
8881
|
+
return theme() === "dark" ? darkStyles(css) : lightStyles(css);
|
|
8879
8882
|
});
|
|
8880
8883
|
return (() => {
|
|
8881
8884
|
const _el$ = _tmpl$23();
|
|
8882
|
-
createRenderEffect(() => className(_el$, clsx(styles().expander,
|
|
8885
|
+
createRenderEffect(() => className(_el$, clsx(styles().expander, css`
|
|
8883
8886
|
transform: rotate(${props.expanded ? 90 : 0}deg);
|
|
8884
|
-
`, props.expanded &&
|
|
8887
|
+
`, props.expanded && css`
|
|
8885
8888
|
& svg {
|
|
8886
8889
|
top: -1px;
|
|
8887
8890
|
}
|
|
@@ -8891,8 +8894,11 @@ var Expander = (props) => {
|
|
|
8891
8894
|
};
|
|
8892
8895
|
var CopyButton = (props) => {
|
|
8893
8896
|
const theme = useTheme();
|
|
8897
|
+
const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
|
|
8898
|
+
target: useQueryDevtoolsContext().shadowDOMTarget
|
|
8899
|
+
}) : u;
|
|
8894
8900
|
const styles = createMemo(() => {
|
|
8895
|
-
return theme() === "dark" ? darkStyles : lightStyles;
|
|
8901
|
+
return theme() === "dark" ? darkStyles(css) : lightStyles(css);
|
|
8896
8902
|
});
|
|
8897
8903
|
const [copyState, setCopyState] = createSignal("NoCopy");
|
|
8898
8904
|
return (() => {
|
|
@@ -8955,8 +8961,11 @@ var CopyButton = (props) => {
|
|
|
8955
8961
|
};
|
|
8956
8962
|
var ClearArrayButton = (props) => {
|
|
8957
8963
|
const theme = useTheme();
|
|
8964
|
+
const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
|
|
8965
|
+
target: useQueryDevtoolsContext().shadowDOMTarget
|
|
8966
|
+
}) : u;
|
|
8958
8967
|
const styles = createMemo(() => {
|
|
8959
|
-
return theme() === "dark" ? darkStyles : lightStyles;
|
|
8968
|
+
return theme() === "dark" ? darkStyles(css) : lightStyles(css);
|
|
8960
8969
|
});
|
|
8961
8970
|
const queryClient = useQueryDevtoolsContext().client;
|
|
8962
8971
|
return (() => {
|
|
@@ -8973,8 +8982,11 @@ var ClearArrayButton = (props) => {
|
|
|
8973
8982
|
};
|
|
8974
8983
|
var DeleteItemButton = (props) => {
|
|
8975
8984
|
const theme = useTheme();
|
|
8985
|
+
const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
|
|
8986
|
+
target: useQueryDevtoolsContext().shadowDOMTarget
|
|
8987
|
+
}) : u;
|
|
8976
8988
|
const styles = createMemo(() => {
|
|
8977
|
-
return theme() === "dark" ? darkStyles : lightStyles;
|
|
8989
|
+
return theme() === "dark" ? darkStyles(css) : lightStyles(css);
|
|
8978
8990
|
});
|
|
8979
8991
|
const queryClient = useQueryDevtoolsContext().client;
|
|
8980
8992
|
return (() => {
|
|
@@ -8991,8 +9003,11 @@ var DeleteItemButton = (props) => {
|
|
|
8991
9003
|
};
|
|
8992
9004
|
var ToggleValueButton = (props) => {
|
|
8993
9005
|
const theme = useTheme();
|
|
9006
|
+
const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
|
|
9007
|
+
target: useQueryDevtoolsContext().shadowDOMTarget
|
|
9008
|
+
}) : u;
|
|
8994
9009
|
const styles = createMemo(() => {
|
|
8995
|
-
return theme() === "dark" ? darkStyles : lightStyles;
|
|
9010
|
+
return theme() === "dark" ? darkStyles(css) : lightStyles(css);
|
|
8996
9011
|
});
|
|
8997
9012
|
const queryClient = useQueryDevtoolsContext().client;
|
|
8998
9013
|
return (() => {
|
|
@@ -9010,7 +9025,7 @@ var ToggleValueButton = (props) => {
|
|
|
9010
9025
|
return props.value;
|
|
9011
9026
|
}
|
|
9012
9027
|
}));
|
|
9013
|
-
createRenderEffect(() => className(_el$5, clsx(styles().actionButton,
|
|
9028
|
+
createRenderEffect(() => className(_el$5, clsx(styles().actionButton, css`
|
|
9014
9029
|
width: ${tokens.size[3.5]};
|
|
9015
9030
|
height: ${tokens.size[3.5]};
|
|
9016
9031
|
`)));
|
|
@@ -9022,8 +9037,11 @@ function isIterable(x) {
|
|
|
9022
9037
|
}
|
|
9023
9038
|
function Explorer(props) {
|
|
9024
9039
|
const theme = useTheme();
|
|
9040
|
+
const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
|
|
9041
|
+
target: useQueryDevtoolsContext().shadowDOMTarget
|
|
9042
|
+
}) : u;
|
|
9025
9043
|
const styles = createMemo(() => {
|
|
9026
|
-
return theme() === "dark" ? darkStyles : lightStyles;
|
|
9044
|
+
return theme() === "dark" ? darkStyles(css) : lightStyles(css);
|
|
9027
9045
|
});
|
|
9028
9046
|
const queryClient = useQueryDevtoolsContext().client;
|
|
9029
9047
|
const [expanded, setExpanded] = createSignal((props.defaultExpanded || []).includes(props.label));
|
|
@@ -9353,7 +9371,7 @@ function Explorer(props) {
|
|
|
9353
9371
|
return _el$6;
|
|
9354
9372
|
})();
|
|
9355
9373
|
}
|
|
9356
|
-
var stylesFactory = (theme) => {
|
|
9374
|
+
var stylesFactory = (theme, css) => {
|
|
9357
9375
|
const {
|
|
9358
9376
|
colors,
|
|
9359
9377
|
font,
|
|
@@ -9362,7 +9380,7 @@ var stylesFactory = (theme) => {
|
|
|
9362
9380
|
} = tokens;
|
|
9363
9381
|
const t2 = (light, dark) => theme === "light" ? light : dark;
|
|
9364
9382
|
return {
|
|
9365
|
-
entry:
|
|
9383
|
+
entry: css`
|
|
9366
9384
|
& * {
|
|
9367
9385
|
font-size: ${font.size.xs};
|
|
9368
9386
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
|
@@ -9372,13 +9390,13 @@ var stylesFactory = (theme) => {
|
|
|
9372
9390
|
outline: none;
|
|
9373
9391
|
word-break: break-word;
|
|
9374
9392
|
`,
|
|
9375
|
-
subEntry:
|
|
9393
|
+
subEntry: css`
|
|
9376
9394
|
margin: 0 0 0 0.5em;
|
|
9377
9395
|
padding-left: 0.75em;
|
|
9378
9396
|
border-left: 2px solid ${t2(colors.gray[300], colors.darkGray[400])};
|
|
9379
9397
|
/* outline: 1px solid ${colors.teal[400]}; */
|
|
9380
9398
|
`,
|
|
9381
|
-
expander:
|
|
9399
|
+
expander: css`
|
|
9382
9400
|
& path {
|
|
9383
9401
|
stroke: ${colors.gray[400]};
|
|
9384
9402
|
}
|
|
@@ -9391,14 +9409,14 @@ var stylesFactory = (theme) => {
|
|
|
9391
9409
|
transition: all 0.1s ease;
|
|
9392
9410
|
/* outline: 1px solid ${colors.blue[400]}; */
|
|
9393
9411
|
`,
|
|
9394
|
-
expanderButtonContainer:
|
|
9412
|
+
expanderButtonContainer: css`
|
|
9395
9413
|
display: flex;
|
|
9396
9414
|
align-items: center;
|
|
9397
9415
|
line-height: ${size2[4]};
|
|
9398
9416
|
min-height: ${size2[4]};
|
|
9399
9417
|
gap: ${size2[2]};
|
|
9400
9418
|
`,
|
|
9401
|
-
expanderButton:
|
|
9419
|
+
expanderButton: css`
|
|
9402
9420
|
cursor: pointer;
|
|
9403
9421
|
color: inherit;
|
|
9404
9422
|
font: inherit;
|
|
@@ -9423,26 +9441,26 @@ var stylesFactory = (theme) => {
|
|
|
9423
9441
|
left: 1px;
|
|
9424
9442
|
}
|
|
9425
9443
|
`,
|
|
9426
|
-
info:
|
|
9444
|
+
info: css`
|
|
9427
9445
|
color: ${t2(colors.gray[500], colors.gray[500])};
|
|
9428
9446
|
font-size: ${font.size.xs};
|
|
9429
9447
|
margin-left: ${size2[1]};
|
|
9430
9448
|
/* outline: 1px solid ${colors.yellow[400]}; */
|
|
9431
9449
|
`,
|
|
9432
|
-
label:
|
|
9450
|
+
label: css`
|
|
9433
9451
|
color: ${t2(colors.gray[700], colors.gray[300])};
|
|
9434
9452
|
white-space: nowrap;
|
|
9435
9453
|
`,
|
|
9436
|
-
value:
|
|
9454
|
+
value: css`
|
|
9437
9455
|
color: ${t2(colors.purple[600], colors.purple[400])};
|
|
9438
9456
|
flex-grow: 1;
|
|
9439
9457
|
`,
|
|
9440
|
-
actions:
|
|
9458
|
+
actions: css`
|
|
9441
9459
|
display: inline-flex;
|
|
9442
9460
|
gap: ${size2[2]};
|
|
9443
9461
|
align-items: center;
|
|
9444
9462
|
`,
|
|
9445
|
-
row:
|
|
9463
|
+
row: css`
|
|
9446
9464
|
display: inline-flex;
|
|
9447
9465
|
gap: ${size2[2]};
|
|
9448
9466
|
width: 100%;
|
|
@@ -9450,7 +9468,7 @@ var stylesFactory = (theme) => {
|
|
|
9450
9468
|
line-height: ${size2[4.5]};
|
|
9451
9469
|
align-items: center;
|
|
9452
9470
|
`,
|
|
9453
|
-
editableInput:
|
|
9471
|
+
editableInput: css`
|
|
9454
9472
|
border: none;
|
|
9455
9473
|
padding: ${size2[0.5]} ${size2[1]} ${size2[0.5]} ${size2[1.5]};
|
|
9456
9474
|
flex-grow: 1;
|
|
@@ -9461,7 +9479,7 @@ var stylesFactory = (theme) => {
|
|
|
9461
9479
|
background-color: ${t2(colors.gray[300], colors.darkGray[600])};
|
|
9462
9480
|
}
|
|
9463
9481
|
`,
|
|
9464
|
-
actionButton:
|
|
9482
|
+
actionButton: css`
|
|
9465
9483
|
background-color: transparent;
|
|
9466
9484
|
color: ${t2(colors.gray[500], colors.gray[500])};
|
|
9467
9485
|
border: none;
|
|
@@ -9487,8 +9505,8 @@ var stylesFactory = (theme) => {
|
|
|
9487
9505
|
`
|
|
9488
9506
|
};
|
|
9489
9507
|
};
|
|
9490
|
-
var lightStyles = stylesFactory("light");
|
|
9491
|
-
var darkStyles = stylesFactory("dark");
|
|
9508
|
+
var lightStyles = (css) => stylesFactory("light", css);
|
|
9509
|
+
var darkStyles = (css) => stylesFactory("dark", css);
|
|
9492
9510
|
delegateEvents(["click"]);
|
|
9493
9511
|
|
|
9494
9512
|
// src/Devtools.tsx
|
|
@@ -9539,6 +9557,7 @@ var DEFAULT_MUTATION_SORT_FN_NAME = Object.keys(mutationSortFns)[0];
|
|
|
9539
9557
|
var [selectedQueryHash, setSelectedQueryHash] = createSignal(null);
|
|
9540
9558
|
var [selectedMutationId, setSelectedMutationId] = createSignal(null);
|
|
9541
9559
|
var [panelWidth, setPanelWidth] = createSignal(0);
|
|
9560
|
+
var [offline, setOffline] = createSignal(false);
|
|
9542
9561
|
var PiPContext = createContext(void 0);
|
|
9543
9562
|
var PiPProvider = (props) => {
|
|
9544
9563
|
const [pipWindow, setPipWindow] = createSignal(null);
|
|
@@ -10038,7 +10057,6 @@ var ContentView = (props) => {
|
|
|
10038
10057
|
const sortOrder = createMemo(() => Number(props.localStore.sortOrder) || DEFAULT_SORT_ORDER);
|
|
10039
10058
|
const mutationSort = createMemo(() => props.localStore.mutationSort || DEFAULT_MUTATION_SORT_FN_NAME);
|
|
10040
10059
|
const mutationSortOrder = createMemo(() => Number(props.localStore.mutationSortOrder) || DEFAULT_SORT_ORDER);
|
|
10041
|
-
const [offline, setOffline] = createSignal(false);
|
|
10042
10060
|
const sortFn = createMemo(() => sortFns[sort()]);
|
|
10043
10061
|
const mutationSortFn = createMemo(() => mutationSortFns[mutationSort()]);
|
|
10044
10062
|
const onlineManager = createMemo(() => useQueryDevtoolsContext().onlineManager);
|