added new react/devtools-panel example

TanStack · Aug 29, 2024 · 89076cc · 89076cc
1 parent a0b51d1
commit 89076cc
Show file tree

Hide file tree

Showing 16 changed files with 261 additions and 56 deletions.
diff --git a/examples/react/devtools-panel/.eslintrc b/examples/react/devtools-panel/.eslintrc
@@ -0,0 +1,3 @@
+{
+  "extends": ["plugin:react/jsx-runtime", "plugin:react-hooks/recommended"]
+}
diff --git a/examples/react/devtools-panel/.gitignore b/examples/react/devtools-panel/.gitignore
@@ -0,0 +1,27 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+pnpm-lock.yaml
+yarn.lock
+package-lock.json
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/examples/react/devtools-panel/README.md b/examples/react/devtools-panel/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`
diff --git a/examples/react/devtools-panel/index.html b/examples/react/devtools-panel/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/emblem-light.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+
+    <title>TanStack Query React Devtools Panel Example App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react/devtools-panel/package.json b/examples/react/devtools-panel/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@tanstack/query-example-react-devtools-panel",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.52.0",
+    "@tanstack/react-query-devtools": "^5.52.0",
+    "react": "19.0.0-rc-4c2e457c7c-20240522",
+    "react-dom": "19.0.0-rc-4c2e457c7c-20240522"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.1",
+    "typescript": "5.3.3",
+    "vite": "^5.3.5"
+  }
+}
diff --git a/examples/react/devtools-panel/public/emblem-light.svg b/examples/react/devtools-panel/public/emblem-light.svg
diff --git a/examples/react/devtools-panel/src/index.tsx b/examples/react/devtools-panel/src/index.tsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQuery,
+} from '@tanstack/react-query'
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
+
+const queryClient = new QueryClient()
+
+export default function App() {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <button onClick={() => setIsOpen(!isOpen)}>{`${isOpen ? 'Close' : 'Open'} the devtools panel`}</button>
+      <ReactQueryDevtoolsPanel isOpen={isOpen} />
+      <Example />
+    </QueryClientProvider>
+  )
+}
+
+function Example() {
+  const { isPending, error, data, isFetching } = useQuery({
+    queryKey: ['repoData'],
+    queryFn: async () => {
+      const response = await fetch(
+        'https://api.github.com/repos/TanStack/query',
+      )
+      return await response.json()
+    },
+  })
+
+  if (isPending) return 'Loading...'
+
+  if (error) return 'An error has occurred: ' + error.message
+
+  return (
+    <div>
+      <h1>{data.full_name}</h1>
+      <p>{data.description}</p>
+      <strong>👀 {data.subscribers_count}</strong>{' '}
+      <strong>✨ {data.stargazers_count}</strong>{' '}
+      <strong>🍴 {data.forks_count}</strong>
+      <div>{isFetching ? 'Updating...' : ''}</div>
+    </div>
+  )
+}
+
+const rootElement = document.getElementById('root') as HTMLElement
+ReactDOM.createRoot(rootElement).render(<App />)
diff --git a/examples/react/devtools-panel/tsconfig.json b/examples/react/devtools-panel/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "eslint.config.js"]
+}
diff --git a/examples/react/devtools-panel/vite.config.ts b/examples/react/devtools-panel/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+})
diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
@@ -77,6 +77,7 @@ interface DevtoolsPanelProps {
   localStore: StorageObject<string>
   setLocalStore: StorageSetter<string, unknown>
   withCloseButton?: boolean
+  withOpenButton?: boolean
   withDragPositionPanel?: boolean
   withPIPButton?: boolean
   withPositionButton?: boolean
@@ -114,6 +115,7 @@ const [offline, setOffline] = createSignal(false)
 export const Devtools: Component<DevtoolsPanelProps> = (_props) => {
   const props = mergeProps({
     withCloseButton: true,
+    withOpenButton: true,
     withDragPositionPanel: true,
     withPIPButton: true,
     withPositionButton: true
@@ -133,6 +135,11 @@ export const Devtools: Component<DevtoolsPanelProps> = (_props) => {
   })
 
   const isOpen = createMemo(() => {
+    const isDevtoolsPanelOpen = useQueryDevtoolsContext().isOpen
+    if (isDevtoolsPanelOpen !== undefined) {
+      return isDevtoolsPanelOpen || INITIAL_IS_OPEN
+    }
+
     return props.localStore.open === 'true'
       ? true
       : props.localStore.open === 'false'
@@ -242,7 +249,7 @@ export const Devtools: Component<DevtoolsPanelProps> = (_props) => {
           </Show>
         </TransitionGroup>
         <TransitionGroup name="tsqd-button-transition">
-          <Show when={!isOpen()}>
+          <Show when={props.withOpenButton && !isOpen()}>
             <div
               class={cx(
                 styles().devtoolsBtn,
@@ -512,20 +519,20 @@ const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
       ref={panelRef}
       aria-label="Tanstack query devtools"
     >
-      {props.withDragPositionPanel && (
+      <Show when={props.withDragPositionPanel}>
         <div
-          class={cx(
+          className={cx(
             styles().dragHandle,
             styles()[`dragHandle-position-${position()}`],
             'tsqd-drag-handle',
           )}
-          onMousedown={handleDragStart}
+          onMouseDown={handleDragStart}
         ></div>
-      )}
-      {props.withCloseButton && (
+      </Show>
+      <Show when={props.withCloseButton}>
         <button
           aria-label="Close tanstack query devtools"
-          class={cx(
+          className={cx(
             styles().closeBtn,
             styles()[`closeBtn-position-${position()}`],
             'tsqd-minimize-btn',
@@ -534,7 +541,7 @@ const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
         >
           <ChevronDown/>
         </button>
-      )}
+      </Show>
       <ContentView {...props} />
     </aside>
   )
@@ -543,7 +550,6 @@ const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
 const ContentView: Component<DevtoolsPanelProps> = (props) => {
   setupQueryCacheSubscription()
   setupMutationCacheSubscription()
-  console.log('ContentView ', props);
   let containerRef!: HTMLDivElement
   const theme = useTheme()
   const css = useQueryDevtoolsContext().shadowDOMTarget
@@ -910,27 +916,25 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
             >
               {offline() ? <Offline /> : <Wifi />}
             </button>
-            {props.withPIPButton && (
-              <Show when={!pip().pipWindow}>
-                <button
-                  onClick={() => {
-                    pip().requestPipWindow(
-                      Number(window.innerWidth),
-                      Number(props.localStore.height ?? 500),
-                    )
-                  }}
-                  class={cx(
-                    styles().actionsBtn,
-                    'tsqd-actions-btn',
-                    'tsqd-action-open-pip',
-                  )}
-                  aria-label="Open in picture-in-picture mode"
-                  title={`Open in picture-in-picture mode`}
-                >
-                  <PiPIcon />
-                </button>
-              </Show>
-            )}
+            <Show when={props.withPIPButton && !pip().pipWindow}>
+              <button
+                onClick={() => {
+                  pip().requestPipWindow(
+                    Number(window.innerWidth),
+                    Number(props.localStore.height ?? 500),
+                  )
+                }}
+                class={cx(
+                  styles().actionsBtn,
+                  'tsqd-actions-btn',
+                  'tsqd-action-open-pip',
+                )}
+                aria-label="Open in picture-in-picture mode"
+                title={`Open in picture-in-picture mode`}
+              >
+                <PiPIcon />
+              </button>
+            </Show>
 
             <DropdownMenu.Root gutter={4}>
               <DropdownMenu.Trigger
@@ -961,7 +965,7 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
                   >
                     Settings
                   </div>
-                  {props.withPositionButton && (
+                  <Show when={props.withPositionButton}>
                     <DropdownMenu.Sub overlap gutter={8} shift={-4}>
                       <DropdownMenu.SubTrigger
                         class={cx(
@@ -1046,7 +1050,7 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
                         </DropdownMenu.SubContent>
                       </DropdownMenu.Portal>
                     </DropdownMenu.Sub>
-                  )}
+                  </Show>
                   <DropdownMenu.Sub overlap gutter={8} shift={-4}>
                     <DropdownMenu.SubTrigger
                       class={cx(

diff --git a/packages/query-devtools/src/DevtoolsComponent.tsx b/packages/query-devtools/src/DevtoolsComponent.tsx
@@ -10,7 +10,7 @@ import {
 import { Devtools, THEME_PREFERENCE } from './Devtools'
 import type { Component } from 'solid-js'
 
-export type DevtoolsComponentType = Component<Omit<QueryDevtoolsProps, 'buttonPosition'>> & {
+export type DevtoolsComponentType = Component<QueryDevtoolsProps> & {
   shadowDOMTarget?: ShadowRoot
 }
 

diff --git a/packages/query-devtools/src/DevtoolsPanelComponent.tsx b/packages/query-devtools/src/DevtoolsPanelComponent.tsx
@@ -10,7 +10,7 @@ import {
 import { Devtools, THEME_PREFERENCE } from './Devtools'
 import type { Component } from 'solid-js'
 
-export type DevtoolsPanelComponentType = Component<QueryDevtoolsProps> & {
+export type DevtoolsPanelComponentType = Component<Omit<QueryDevtoolsProps, 'buttonPosition'>> & {
   shadowDOMTarget?: ShadowRoot
 }
 
@@ -38,6 +38,7 @@ const DevtoolsPanelComponent: DevtoolsPanelComponentType = (props) => {
             localStore={localStore}
             setLocalStore={setLocalStore}
             withCloseButton={false}
+            withOpenButton={false}
             withDragPositionPanel={false}
             withPIPButton={false}
             withPositionButton={false}