Feat/dettached mode but it works

.changeset/fruity-teams-lick.md

@@ -0,0 +1,8 @@
+---
+'@tanstack/react-devtools': minor
+'@tanstack/solid-devtools': minor
+'@tanstack/devtools-event-bus': minor
+'@tanstack/devtools': minor
+---
+
+removed CJS support, added detached mode to devtools

docs/vite-plugin.md

@@ -71,7 +71,7 @@ export default {
 
 ### editor
 
-> [!IMPORTANT] `editor` is only needed for editors that are NOT VS Code, by default this works OOTB with VS Code.
+> [!IMPORTANT] `editor` is only needed for editors that are NOT VS Code, by default this works OOTB with VS Code. If you don't have `code` available in your terminal you need to set it up though, if you don't know how to do that you can follow this guide: https://stackoverflow.com/questions/29955500/code-is-not-working-in-on-the-command-line-for-visual-studio-code-on-os-x-ma
 
 
 The open in editor configuration which has two fields, `name` and `open`,

examples/react/basic/src/index.tsx

@@ -1,9 +1,141 @@
 import { createRoot } from 'react-dom/client'
+import { createContext, useContext, useState } from 'react'
+import { createPortal } from 'react-dom'
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query'
 import Devtools from './setup'
 import { queryPlugin } from './plugin'
 import { Button } from './button'
 import { Feature } from './feature'
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime: 1000 * 60 * 60 * 24, // 24 hours
+    },
+  },
+})
+
+type Post = {
+  id: number
+  title: string
+  body: string
+}
+
+function Posts({
+  setPostId,
+}: {
+  setPostId: React.Dispatch<React.SetStateAction<number>>
+}) {
+  const queryClient = useQueryClient()
+  const { status, data, error, isFetching } = usePosts()
+
+  return (
+    <div>
+      <h1>Posts</h1>
+      <div>
+        {status === 'pending' ? (
+          'Loading...'
+        ) : status === 'error' ? (
+          <span>Error: {error.message}</span>
+        ) : (
+          <>
+            <div>
+              {data.map((post) => (
+                <p key={post.id}>
+                  <a
+                    onClick={() => setPostId(post.id)}
+                    href="#"
+                    style={
+                      // We can access the query data here to show bold links for
+                      // ones that are cached
+                      queryClient.getQueryData(['post', post.id])
+                        ? {
+                            fontWeight: 'bold',
+                            color: 'green',
+                          }
+                        : {}
+                    }
+                  >
+                    {post.title}
+                  </a>
+                </p>
+              ))}
+            </div>
+            <div>{isFetching ? 'Background Updating...' : ' '}</div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+const getPostById = async (id: number): Promise<Post> => {
+  const response = await fetch(
+    `https://jsonplaceholder.typicode.com/posts/${id}`,
+  )
+  return await response.json()
+}
+
+function usePost(postId: number) {
+  return useQuery({
+    queryKey: ['post', postId],
+    queryFn: () => getPostById(postId),
+    enabled: !!postId,
+  })
+}
+
+function Post({
+  postId,
+  setPostId,
+}: {
+  postId: number
+  setPostId: React.Dispatch<React.SetStateAction<number>>
+}) {
+  const { status, data, error, isFetching } = usePost(postId)
+
+  return (
+    <div>
+      <div>
+        <a onClick={() => setPostId(-1)} href="#">
+          Back
+        </a>
+      </div>
+      {!postId || status === 'pending' ? (
+        'Loading...'
+      ) : status === 'error' ? (
+        <span>Error: {error.message}</span>
+      ) : (
+        <>
+          <h1>{data.title}</h1>
+          <div>
+            <p>{data.body}</p>
+          </div>
+          <div>{isFetching ? 'Background Updating...' : ' '}</div>
+        </>
+      )}
+    </div>
+  )
+}
+function usePosts() {
+  return useQuery({
+    queryKey: ['posts'],
+    queryFn: async (): Promise<Array<Post>> => {
+      const response = await fetch('https://jsonplaceholder.typicode.com/posts')
+      return await response.json()
+    },
+  })
+}
+
+const Context = createContext<{
+  count: number
+  setCount: (count: number) => void
+}>({ count: 0, setCount: () => {} })
+
 setTimeout(() => {
   queryPlugin.emit('test', {
     title: 'Test Event',
@@ -16,13 +148,56 @@ queryPlugin.on('test', (event) => {
   console.log('Received test event:', event)
 })
 
+function Mounted() {
+  const c = useContext(Context)
+  console.log(c)
+  return (
+    <p
+      onClick={() => {
+        c.setCount(c.count + 1)
+      }}
+    >
+      {c.count}
+      <hr />
+    </p>
+  )
+}
+
 function App() {
+  const [state, setState] = useState(1)
+  const [win, setWin] = useState<Window | null>(null)
+  const [postId, setPostId] = useState(-1)
   return (
     <div>
-      <h1>TanStack Devtools React Basic Example</h1>
-      <Button>Click me</Button>
-      <Feature />
-      <Devtools />
+      <Context.Provider value={{ count: state, setCount: setState }}>
+        <QueryClientProvider client={queryClient}>
+          <p>
+            As you visit the posts below, you will notice them in a loading
+            state the first time you load them. However, after you return to
+            this list and click on any posts you have already visited again, you
+            will see them load instantly and background refresh right before
+            your eyes!{' '}
+            <strong>
+              (You may need to throttle your network speed to simulate longer
+              loading sequences)
+            </strong>
+          </p>
+          {postId > -1 ? (
+            <Post postId={postId} setPostId={setPostId} />
+          ) : (
+            <Posts setPostId={setPostId} />
+          )}
+          <Devtools />
+        </QueryClientProvider>
+        <h1>TanStack Devtools React Basic Example</h1>
+        current count: {state}
+        <Button onClick={() => setState(state + 1)}>Click me</Button>
+        <Button onClick={() => setWin(window.open('', '', 'popup'))}>
+          Click me to open new window
+        </Button>
+        {win && createPortal(<Mounted />, win.document.body)}
+        <Feature />
+      </Context.Provider>
     </div>
   )
 }

examples/react/basic/src/setup.tsx

@@ -1,4 +1,3 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
 import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
 import {
@@ -57,26 +56,22 @@ const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
 
 const router = createRouter({ routeTree })
 
-const queryClient = new QueryClient()
-
 export default function DevtoolsExample() {
   return (
     <>
-      <QueryClientProvider client={queryClient}>
-        <TanStackDevtools
-          plugins={[
-            {
-              name: 'TanStack Query',
-              render: <ReactQueryDevtoolsPanel />,
-            },
-            {
-              name: 'TanStack Router',
-              render: <TanStackRouterDevtoolsPanel router={router} />,
-            },
-          ]}
-        />
-        <RouterProvider router={router} />
-      </QueryClientProvider>
+      <TanStackDevtools
+        plugins={[
+          {
+            name: 'TanStack Query',
+            render: <ReactQueryDevtoolsPanel />,
+          },
+          {
+            name: 'TanStack Router',
+            render: <TanStackRouterDevtoolsPanel router={router} />,
+          },
+        ]}
+      />
+      <RouterProvider router={router} />
     </>
   )
 }

packages/devtools/package.json

@@ -19,17 +19,12 @@
   ],
   "type": "module",
   "types": "dist/esm/index.d.ts",
-  "main": "dist/cjs/index.cjs",
   "module": "dist/esm/index.js",
   "exports": {
     ".": {
       "import": {
         "types": "./dist/esm/index.d.ts",
         "default": "./dist/esm/index.js"
-      },
-      "require": {
-        "types": "./dist/cjs/index.d.cts",
-        "default": "./dist/cjs/index.cjs"
       }
     },
     "./package.json": "./package.json"

packages/devtools/src/components/main-panel.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx'
 import { useDevtoolsSettings, useHeight } from '../context/use-devtools-context'
 import { useStyles } from '../styles/use-styles'
 import { TANSTACK_DEVTOOLS } from '../utils/storage'
+import { usePiPWindow } from '../context/pip-context'
 import type { Accessor, JSX } from 'solid-js'
 
 export const MainPanel = (props: {
@@ -12,14 +13,18 @@ export const MainPanel = (props: {
   const styles = useStyles()
   const { height } = useHeight()
   const { settings } = useDevtoolsSettings()
+  const pip = usePiPWindow()
   return (
     <div
       id={TANSTACK_DEVTOOLS}
       style={{
-        height: height() + 'px',
+        height: pip().pipWindow ? '100vh' : height() + 'px',
       }}
       class={clsx(
-        styles().devtoolsPanelContainer(settings().panelLocation),
+        styles().devtoolsPanelContainer(
+          settings().panelLocation,
+          Boolean(pip().pipWindow),
+        ),
         styles().devtoolsPanelContainerAnimation(props.isOpen(), height()),
         styles().devtoolsPanelContainerVisibility(props.isOpen()),
         styles().devtoolsPanelContainerResizing(props.isResizing),

packages/devtools/src/components/tab-content.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createSignal } from 'solid-js'
+import { createMemo } from 'solid-js'
 import { useDevtoolsState } from '../context/use-devtools-context'
 import { tabs } from '../tabs'
 import { useStyles } from '../styles/use-styles'
@@ -7,14 +7,9 @@ import type { JSX } from 'solid-js'
 export const TabContent = () => {
   const { state } = useDevtoolsState()
   const styles = useStyles()
-  const [component, setComponent] = createSignal<JSX.Element | null>(
-    tabs.find((t) => t.id === state().activeTab)?.component() || null,
+  const component = createMemo<(() => JSX.Element) | null>(
+    () => tabs.find((t) => t.id === state().activeTab)?.component || null,
   )
-  createEffect(() => {
-    setComponent(
-      tabs.find((t) => t.id === state().activeTab)?.component() || null,
-    )
-  })
 
-  return <div class={styles().tabContent}>{component()}</div>
+  return <div class={styles().tabContent}>{component()?.()}</div>
 }