@tanstack/query-devtools 5.0.0-rc.1 → 5.0.0-rc.10

package/build/index.js

@@ -52,7 +52,7 @@ var TanstackQueryDevtools = class {
       if (this.Component) {
         Devtools = this.Component;
       } else {
-        Devtools = lazy(() => import('./Devtools/66PXWIOF.js'));
+        Devtools = lazy(() => import('./Devtools/UZ6MTF6A.js'));
         this.Component = Devtools;
       }
       const _self$ = this;

package/build/index.jsx

@@ -56,7 +56,7 @@ var TanstackQueryDevtools = class {
       if (this.Component) {
         Devtools = this.Component;
       } else {
-        Devtools = lazy(() => import("./Devtools/ALVY75L5.jsx"));
+        Devtools = lazy(() => import("./Devtools/ECUC7UFN.jsx"));
         this.Component = Devtools;
       }
       return <Devtools

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-devtools",
-  "version": "5.0.0-rc.1",
+  "version": "5.0.0-rc.10",
   "description": "Developer tools to interact with and visualize the TanStack Query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -17,8 +17,8 @@
   "browser": {},
   "exports": {
     "solid": {
-      "development": "./build/dev.jsx",
-      "import": "./build/index.jsx"
+      "development": "./build/index.js",
+      "import": "./build/index.js"
     },
     "development": {
       "import": {
@@ -50,7 +50,7 @@
     "superjson": "^1.12.4",
     "tsup-preset-solid": "^2.0.1",
     "vite-plugin-solid": "^2.7.0",
-    "@tanstack/query-core": "5.0.0-rc.1"
+    "@tanstack/query-core": "5.0.0-rc.6"
   },
   "scripts": {
     "clean": "rimraf ./build && rimraf ./coverage",

package/src/Devtools.tsx

@@ -1273,7 +1273,8 @@ const QueryDetails = () => {
             label="Data"
             defaultExpanded={['Data']}
             value={activeQueryStateData()}
-            copyable={true}
+            editable={true}
+            activeQuery={activeQuery()}
           />
         </div>
         <div class={cx(styles.detailsHeader, 'tsqd-query-details-header')}>

package/src/Explorer.tsx

@@ -4,8 +4,14 @@ import { clsx as cx } from 'clsx'
 import { Index, Match, Show, Switch, createMemo, createSignal } from 'solid-js'
 import { Key } from '@solid-primitives/keyed'
 import { tokens } from './theme'
-import { displayValue } from './utils'
-import { CopiedCopier, Copier, ErrorCopier } from './icons'
+import {
+  deleteNestedDataByPath,
+  displayValue,
+  updateNestedDataByPath,
+} from './utils'
+import { Check, CopiedCopier, Copier, ErrorCopier, List, Trash } from './icons'
+import { useQueryDevtoolsContext } from './Context'
+import type { Query } from '@tanstack/query-core'
 
 /**
  * Chunk elements in the array by size
@@ -73,7 +79,8 @@ const CopyButton = (props: { value: unknown }) => {
 
   return (
     <button
-      class={styles.copyButton}
+      class={styles.actionButton}
+      title="Copy object to clipboard"
       aria-label={`${
         copyState() === 'NoCopy'
           ? 'Copy object to clipboard'
@@ -118,11 +125,88 @@ const CopyButton = (props: { value: unknown }) => {
   )
 }
 
+const ClearArrayButton = (props: {
+  dataPath: Array<string>
+  activeQuery: Query
+}) => {
+  const styles = getStyles()
+  const queryClient = useQueryDevtoolsContext().client
+
+  return (
+    <button
+      class={styles.actionButton}
+      title={'Remove all items'}
+      aria-label={'Remove all items'}
+      onClick={() => {
+        const oldData = props.activeQuery.state.data
+        const newData = updateNestedDataByPath(oldData, props.dataPath, [])
+        queryClient.setQueryData(props.activeQuery.queryKey, newData)
+      }}
+    >
+      <List />
+    </button>
+  )
+}
+
+const DeleteItemButton = (props: {
+  dataPath: Array<string>
+  activeQuery: Query
+}) => {
+  const styles = getStyles()
+  const queryClient = useQueryDevtoolsContext().client
+
+  return (
+    <button
+      class={cx(styles.actionButton)}
+      title={'Delete item'}
+      aria-label={'Delete item'}
+      onClick={() => {
+        const oldData = props.activeQuery.state.data
+        const newData = deleteNestedDataByPath(oldData, props.dataPath)
+        queryClient.setQueryData(props.activeQuery.queryKey, newData)
+      }}
+    >
+      <Trash />
+    </button>
+  )
+}
+
+const ToggleValueButton = (props: {
+  dataPath: Array<string>
+  activeQuery: Query
+  value: boolean
+}) => {
+  const styles = getStyles()
+  const queryClient = useQueryDevtoolsContext().client
+
+  return (
+    <button
+      class={cx(styles.actionButton)}
+      title={'Toggle value'}
+      aria-label={'Toggle value'}
+      onClick={() => {
+        const oldData = props.activeQuery.state.data
+        const newData = updateNestedDataByPath(
+          oldData,
+          props.dataPath,
+          !props.value,
+        )
+        queryClient.setQueryData(props.activeQuery.queryKey, newData)
+      }}
+    >
+      <Check checked={props.value} />
+    </button>
+  )
+}
+
 type ExplorerProps = {
-  copyable?: boolean
+  editable?: boolean
   label: string
   value: unknown
   defaultExpanded?: Array<string>
+  dataPath?: Array<string>
+  activeQuery?: Query
+  itemsDeletable?: boolean
 }
 
 function isIterable(x: any): x is Iterable<unknown> {
@@ -131,6 +215,7 @@ function isIterable(x: any): x is Iterable<unknown> {
 
 export default function Explorer(props: ExplorerProps) {
   const styles = getStyles()
+  const queryClient = useQueryDevtoolsContext().client
 
   const [expanded, setExpanded] = createSignal(
     (props.defaultExpanded || []).includes(props.label),
@@ -187,6 +272,8 @@ export default function Explorer(props: ExplorerProps) {
 
   const subEntryPages = createMemo(() => chunkArray(subEntries(), 100))
 
+  const currentDataPath = props.dataPath ?? []
+
   return (
     <div class={styles.entry}>
       <Show when={subEntryPages().length}>
@@ -201,8 +288,28 @@ export default function Explorer(props: ExplorerProps) {
               {subEntries().length} {subEntries().length > 1 ? `items` : `item`}
             </span>
           </button>
-          <Show when={props.copyable}>
-            <CopyButton value={props.value} />
+          <Show when={props.editable}>
+            <div class={styles.actions}>
+              <CopyButton value={props.value} />
+
+              <Show
+                when={props.itemsDeletable && props.activeQuery !== undefined}
+              >
+                <DeleteItemButton
+                  activeQuery={props.activeQuery!}
+                  dataPath={currentDataPath}
+                />
+              </Show>
+
+              <Show
+                when={type() === 'array' && props.activeQuery !== undefined}
+              >
+                <ClearArrayButton
+                  activeQuery={props.activeQuery!}
+                  dataPath={currentDataPath}
+                />
+              </Show>
+            </div>
           </Show>
         </div>
         <Show when={expanded()}>
@@ -215,7 +322,14 @@ export default function Explorer(props: ExplorerProps) {
                       defaultExpanded={props.defaultExpanded}
                       label={entry().label}
                       value={entry().value}
-                      copyable={props.copyable}
+                      editable={props.editable}
+                      dataPath={[...currentDataPath, entry().label]}
+                      activeQuery={props.activeQuery}
+                      itemsDeletable={
+                        type() === 'array' ||
+                        type() === 'Iterable' ||
+                        type() === 'object'
+                      }
                     />
                   )
                 }}
@@ -250,7 +364,9 @@ export default function Explorer(props: ExplorerProps) {
                                 defaultExpanded={props.defaultExpanded}
                                 label={entry().label}
                                 value={entry().value}
-                                copyable={props.copyable}
+                                editable={props.editable}
+                                dataPath={[...currentDataPath, entry().label]}
+                                activeQuery={props.activeQuery}
                               />
                             )}
                           </Key>
@@ -265,13 +381,73 @@ export default function Explorer(props: ExplorerProps) {
         </Show>
       </Show>
       <Show when={subEntryPages().length === 0}>
-        <div
-          style={{
-            'line-height': '1.125rem',
-          }}
-        >
-          <span class={styles.label}>{props.label}:</span>{' '}
-          <span class={styles.value}>{displayValue(props.value)}</span>
+        <div class={styles.row}>
+          <span class={styles.label}>{props.label}:</span>
+          <Show
+            when={
+              props.editable &&
+              props.activeQuery !== undefined &&
+              (type() === 'string' ||
+                type() === 'number' ||
+                type() === 'boolean')
+            }
+            fallback={
+              <span class={styles.value}>{displayValue(props.value)}</span>
+            }
+          >
+            <Show
+              when={
+                props.editable &&
+                props.activeQuery !== undefined &&
+                (type() === 'string' || type() === 'number')
+              }
+            >
+              <input
+                type={type() === 'number' ? 'number' : 'text'}
+                class={cx(styles.value, styles.editableInput)}
+                value={props.value as string | number}
+                onChange={(changeEvent) => {
+                  const oldData = props.activeQuery!.state.data
+
+                  const newData = updateNestedDataByPath(
+                    oldData,
+                    currentDataPath,
+                    type() === 'number'
+                      ? changeEvent.target.valueAsNumber
+                      : changeEvent.target.value,
+                  )
+
+                  queryClient.setQueryData(props.activeQuery!.queryKey, newData)
+                }}
+              />
+            </Show>
+
+            <Show when={type() === 'boolean'}>
+              <span
+                class={cx(styles.value, styles.actions, styles.editableInput)}
+              >
+                <ToggleValueButton
+                  activeQuery={props.activeQuery!}
+                  dataPath={currentDataPath}
+                  value={props.value as boolean}
+                />
+                {displayValue(props.value)}
+              </span>
+            </Show>
+          </Show>
+
+          <Show
+            when={
+              props.editable &&
+              props.itemsDeletable &&
+              props.activeQuery !== undefined
+            }
+          >
+            <DeleteItemButton
+              activeQuery={props.activeQuery!}
+              dataPath={currentDataPath}
+            />
+          </Show>
         </div>
       </Show>
     </div>
@@ -315,6 +491,7 @@ const getStyles = () => {
       align-items: center;
       line-height: 1.125rem;
       min-height: 1.125rem;
+      gap: ${size[2]};
     `,
     expanderButton: css`
       cursor: pointer;
@@ -352,8 +529,32 @@ const getStyles = () => {
     `,
     value: css`
       color: ${colors.purple[400]};
+      flex-grow: 1;
+    `,
+    actions: css`
+      display: inline-flex;
+      gap: ${size[2]};
+      align-items: center;
+    `,
+    row: css`
+      display: inline-flex;
+      gap: ${size[2]};
+      width: 100%;
+      margin-bottom: ${size[0.5]};
+      line-height: 1.125rem;
+      align-items: center;
     `,
-    copyButton: css`
+    editableInput: css`
+      border: none;
+      padding: ${size[0.5]} ${size[1]};
+      flex-grow: 1;
+      background-color: ${colors.gray[900]};
+
+      &:hover {
+        background-color: ${colors.gray[800]};
+      }
+    `,
+    actionButton: css`
       background-color: transparent;
       border: none;
       display: inline-flex;
@@ -364,11 +565,18 @@ const getStyles = () => {
       width: ${size[3]};
       height: ${size[3]};
       position: relative;
-      left: ${size[2]};
       z-index: 1;
 
-      &:hover svg .copier {
-        stroke: ${colors.gray[500]} !important;
+      &:hover svg {
+        .copier,
+        .check,
+        .list {
+          stroke: ${colors.gray[500]} !important;
+        }
+
+        .list-item {
+          stroke: ${colors.gray[700]};
+        }
       }
 
       &:focus-visible {