@tanstack/devtools-vite 0.3.1 → 0.3.3

package/src/inject-source.ts

@@ -228,7 +228,7 @@ export function addSourceToJsx(code: string, id: string) {
     })
     const didTransform = transform(ast, location)
     if (!didTransform) {
-      return { code }
+      return
     }
     return gen(ast, {
       sourceMaps: true,
@@ -237,6 +237,6 @@ export function addSourceToJsx(code: string, id: string) {
       sourceFileName: filePath,
     })
   } catch (e) {
-    return { code }
+    return
   }
 }

package/src/plugin.ts

@@ -1,12 +1,14 @@
 import { ServerEventBus } from '@tanstack/devtools-event-bus/server'
+import { normalizePath } from 'vite'
+import chalk from 'chalk'
 import { handleDevToolsViteRequest } from './utils'
 import { DEFAULT_EDITOR_CONFIG, handleOpenSource } from './editor'
 import { removeDevtools } from './remove-devtools'
 import { addSourceToJsx } from './inject-source'
 import { enhanceConsoleLog } from './enhance-logs'
+import type { Plugin } from 'vite'
 import type { EditorConfig } from './editor'
 import type { ServerEventBusConfig } from '@tanstack/devtools-event-bus/server'
-import type { Plugin } from 'vite'
 
 export type TanStackDevtoolsViteConfig = {
   /**
@@ -32,6 +34,12 @@ export type TanStackDevtoolsViteConfig = {
    * @default true
    */
   removeDevtoolsOnBuild?: boolean
+
+  /**
+   * Whether to log information to the console.
+   * @default true
+   */
+  logging?: boolean
   /**
    * Configuration for source injection.
    */
@@ -49,6 +57,7 @@ export const defineDevtoolsConfig = (config: TanStackDevtoolsViteConfig) =>
 
 export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
   let port = 5173
+  const logging = args?.logging ?? true
   const enhancedLogsConfig = args?.enhancedLogs ?? { enabled: true }
   const injectSourceConfig = args?.injectSource ?? { enabled: true }
   const removeDevtoolsOnBuild = args?.removeDevtoolsOnBuild ?? true
@@ -68,7 +77,7 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
           id.includes('dist') ||
           id.includes('build')
         )
-          return code
+          return
 
         return addSourceToJsx(code, id)
       },
@@ -135,9 +144,15 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
           id.includes('dist') ||
           id.includes('build')
         )
-          return code
-
-        return removeDevtools(code, id)
+          return
+        const transform = removeDevtools(code, id)
+        if (!transform) return
+        if (logging) {
+          console.log(
+            `\n${chalk.greenBright(`[@tanstack/devtools-vite]`)} Removed devtools code from: ${id.replace(normalizePath(process.cwd()), '')}\n`,
+          )
+        }
+        return transform
       },
     },
     {
@@ -152,13 +167,11 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
           id.includes('node_modules') ||
           id.includes('?raw') ||
           id.includes('dist') ||
-          id.includes('build')
+          id.includes('build') ||
+          !code.includes('console.')
         )
-          return code
+          return
 
-        if (!code.includes('console.')) {
-          return code
-        }
         return enhanceConsoleLog(code, id, port)
       },
     },

package/src/remove-devtools.test.ts

@@ -53,26 +53,24 @@ export default function DevtoolsExample() {
 
         `,
         'test.jsx',
-      ).code,
+      )!.code,
     )
     expect(output).toBe(
       removeEmptySpace(`
-           import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
-           import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
-           import {
+               import {
             Link,
             Outlet,
             RouterProvider,
             createRootRoute,
             createRoute,
             createRouter
-          } from '@tanstack/react-router';  
+          } from '@tanstack/react-router';    
 
           
           export default function DevtoolsExample() {
-            return  <> 
+            return  (<> 
                 <RouterProvider router={router} />
-              </>;
+              </>);
             
           }
 
@@ -127,13 +125,11 @@ export default function DevtoolsExample() {
 
         `,
         'test.jsx',
-      ).code,
+      )!.code,
     )
     expect(output).toBe(
       removeEmptySpace(`
-           import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
-           import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
-           import {
+              import {
             Link,
             Outlet,
             RouterProvider,
@@ -144,9 +140,9 @@ export default function DevtoolsExample() {
 
           
           export default function DevtoolsExample() {
-            return  <> 
+            return ( <> 
                 <RouterProvider router={router} />
-              </>;
+              </>);
             
           }
 
@@ -201,13 +197,11 @@ export default function DevtoolsExample() {
 
         `,
         'test.jsx',
-      ).code,
+      )!.code,
     )
     expect(output).toBe(
       removeEmptySpace(`
-           import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
-           import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
-           import {
+            import {
             Link,
             Outlet,
             RouterProvider,
@@ -218,13 +212,350 @@ export default function DevtoolsExample() {
 
           
           export default function DevtoolsExample() {
-            return  <> 
+            return  (<> 
                 <RouterProvider router={router} />
-              </>;
+              </>);
             
           }
 
         `),
     )
   })
+
+  test('it removes devtools and all possible variations of the plugins', () => {
+    const output = removeEmptySpace(
+      removeDevtools(
+        ` 
+      import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+import {
+  Link,
+  Outlet,
+  RouterProvider,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from '@tanstack/react-router'
+import * as Tools from '@tanstack/react-devtools'
+ 
+
+ 
+export default function DevtoolsExample() {
+  return (
+    <>
+      <Tools.TanStackDevtools
+        eventBusConfig={{
+          connectToServerBus: true,
+        }}
+        plugins={[
+          {
+            name: 'TanStack Query',
+            render: <ReactQueryDevtoolsPanel />,
+          },
+                 {
+            name: 'TanStack Query',
+            render: () => <ReactQueryDevtoolsPanel />,
+          },
+          {
+            name: 'TanStack Router',
+            render: TanStackRouterDevtoolsPanel,
+          },
+          some()
+        ]}
+      />
+      <RouterProvider router={router} />
+    </>
+  )
+}`,
+        'test.jsx',
+      )!.code,
+    )
+
+    expect(output).toBe(
+      removeEmptySpace(` 
+import {
+  Link,
+  Outlet,
+  RouterProvider,
+  createRootRoute,
+  createRoute,
+  createRouter
+} from '@tanstack/react-router' ;
+ 
+
+ 
+export default function DevtoolsExample() {
+  return (
+    <> 
+      <RouterProvider router={router} />
+    </>
+  );
+}
+          `),
+    )
+  })
+
+  describe('removing plugin imports', () => {
+    test('it removes the plugin import from the import array if multiple import identifiers exist', () => {
+      const output = removeEmptySpace(
+        removeDevtools(
+          ` 
+      import { ReactQueryDevtoolsPanel, test } from '@tanstack/react-query-devtools'
+ 
+import * as Tools from '@tanstack/react-devtools'
+ 
+
+ 
+export default function DevtoolsExample() {
+  return (
+    <>
+      <Tools.TanStackDevtools
+        eventBusConfig={{
+          connectToServerBus: true,
+        }}
+        plugins={[
+          {
+            name: 'TanStack Query',
+            render: <ReactQueryDevtoolsPanel />,
+          } 
+        ]}
+      />
+      <RouterProvider router={router} />
+    </>
+  )
+}`,
+          'test.jsx',
+        )!.code,
+      )
+
+      expect(output).toBe(
+        removeEmptySpace(`   
+   import { test } from '@tanstack/react-query-devtools';
+ 
+export default function DevtoolsExample() {
+  return (
+    <> 
+      <RouterProvider router={router} />
+    </>
+  );
+}
+          `),
+      )
+    })
+
+    test("it doesn't remove the whole import if imported with * as", () => {
+      const output = removeEmptySpace(
+        removeDevtools(
+          ` 
+      import * as Stuff from '@tanstack/react-query-devtools'
+ 
+import * as Tools from '@tanstack/react-devtools'
+ 
+
+ 
+export default function DevtoolsExample() {
+  return (
+    <>
+      <Tools.TanStackDevtools
+        eventBusConfig={{
+          connectToServerBus: true,
+        }}
+        plugins={[
+          {
+            name: 'TanStack Query',
+            render: <Stuff.ReactQueryDevtoolsPanel />,
+          } 
+        ]}
+      />
+      <RouterProvider router={router} />
+    </>
+  )
+}`,
+          'test.jsx',
+        )!.code,
+      )
+
+      expect(output).toBe(
+        removeEmptySpace(`   
+   import * as Stuff from '@tanstack/react-query-devtools';
+ 
+export default function DevtoolsExample() {
+  return (
+    <> 
+      <RouterProvider router={router} />
+    </>
+  );
+}
+          `),
+      )
+    })
+
+    test('it removes the import completely if nothing is left', () => {
+      const output = removeEmptySpace(
+        removeDevtools(
+          ` 
+      import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools' 
+import * as Tools from '@tanstack/react-devtools' 
+ 
+export default function DevtoolsExample() {
+  return (
+    <>
+      <Tools.TanStackDevtools
+        eventBusConfig={{
+          connectToServerBus: true,
+        }}
+        plugins={[
+          {
+            name: 'TanStack Query',
+            render: <ReactQueryDevtoolsPanel />,
+          } 
+        ]}
+      />
+      <RouterProvider router={router} />
+    </>
+  )
+}`,
+          'test.jsx',
+        )!.code,
+      )
+
+      expect(output).toBe(
+        removeEmptySpace(`    
+export default function DevtoolsExample() {
+  return (
+    <> 
+      <RouterProvider router={router} />
+    </>
+  );
+}
+          `),
+      )
+    })
+
+    test('it removes the import completely even if used as a function instead of jsx', () => {
+      const output = removeEmptySpace(
+        removeDevtools(
+          ` 
+      import { plugin } from '@tanstack/react-query-devtools' 
+import * as Tools from '@tanstack/react-devtools' 
+ 
+export default function DevtoolsExample() {
+  return (
+    <>
+      <Tools.TanStackDevtools
+        eventBusConfig={{
+          connectToServerBus: true,
+        }}
+        plugins={[
+          {
+            name: 'TanStack Query',
+            render: plugin()
+          } 
+        ]}
+      />
+      <RouterProvider router={router} />
+    </>
+  )
+}`,
+          'test.jsx',
+        )!.code,
+      )
+
+      expect(output).toBe(
+        removeEmptySpace(`    
+export default function DevtoolsExample() {
+  return (
+    <> 
+      <RouterProvider router={router} />
+    </>
+  );
+}
+          `),
+      )
+    })
+
+    test('it removes the import completely even if used as a function inside of render', () => {
+      const output = removeEmptySpace(
+        removeDevtools(
+          ` 
+      import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools' 
+import * as Tools from '@tanstack/react-devtools' 
+ 
+export default function DevtoolsExample() {
+  return (
+    <>
+      <Tools.TanStackDevtools
+        eventBusConfig={{
+          connectToServerBus: true,
+        }}
+        plugins={[
+          {
+            name: 'TanStack Query',
+            render: () => <ReactQueryDevtoolsPanel />
+          } 
+        ]}
+      />
+      <RouterProvider router={router} />
+    </>
+  )
+}`,
+          'test.jsx',
+        )!.code,
+      )
+
+      expect(output).toBe(
+        removeEmptySpace(`    
+export default function DevtoolsExample() {
+  return (
+    <> 
+      <RouterProvider router={router} />
+    </>
+  );
+}
+          `),
+      )
+    })
+
+    test('it removes the import completely even if used as a reference inside of render', () => {
+      const output = removeEmptySpace(
+        removeDevtools(
+          ` 
+      import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools' 
+import * as Tools from '@tanstack/react-devtools' 
+ 
+export default function DevtoolsExample() {
+  return (
+    <>
+      <Tools.TanStackDevtools
+        eventBusConfig={{
+          connectToServerBus: true,
+        }}
+        plugins={[
+          {
+            name: 'TanStack Query',
+            render: ReactQueryDevtoolsPanel
+          } 
+        ]}
+      />
+      <RouterProvider router={router} />
+    </>
+  )
+}`,
+          'test.jsx',
+        )!.code,
+      )
+
+      expect(output).toBe(
+        removeEmptySpace(`    
+export default function DevtoolsExample() {
+  return (
+    <> 
+      <RouterProvider router={router} />
+    </>
+  );
+}
+          `),
+      )
+    })
+  })
 })

package/src/remove-devtools.ts

@@ -1,6 +1,6 @@
 import { gen, parse, trav } from './babel'
 import type { t } from './babel'
-import type { types as Babel } from '@babel/core'
+import type { types as Babel, NodePath } from '@babel/core'
 import type { ParseResult } from '@babel/parser'
 
 const isTanStackDevtoolsImport = (source: string) =>
@@ -12,9 +12,92 @@ const getImportedNames = (importDecl: t.ImportDeclaration) => {
   return importDecl.specifiers.map((spec) => spec.local.name)
 }
 
+const getLeftoverImports = (node: NodePath<t.JSXElement>) => {
+  const finalReferences: Array<string> = []
+  node.traverse({
+    JSXAttribute(path) {
+      const node = path.node
+      const propName =
+        typeof node.name.name === 'string'
+          ? node.name.name
+          : node.name.name.name
+
+      if (
+        propName === 'plugins' &&
+        node.value?.type === 'JSXExpressionContainer' &&
+        node.value.expression.type === 'ArrayExpression'
+      ) {
+        const elements = node.value.expression.elements
+
+        elements.forEach((el) => {
+          if (el?.type === 'ObjectExpression') {
+            // { name: "something", render: ()=> <Component /> }
+            const props = el.properties
+            const referencesToRemove = props
+              .map((prop) => {
+                if (
+                  prop.type === 'ObjectProperty' &&
+                  prop.key.type === 'Identifier' &&
+                  prop.key.name === 'render'
+                ) {
+                  const value = prop.value
+                  // handle <ReactRouterPanel />
+                  if (
+                    value.type === 'JSXElement' &&
+                    value.openingElement.name.type === 'JSXIdentifier'
+                  ) {
+                    const elementName = value.openingElement.name.name
+                    return elementName
+                  }
+                  // handle () => <ReactRouterPanel /> or function() { return <ReactRouterPanel /> }
+                  if (
+                    value.type === 'ArrowFunctionExpression' ||
+                    value.type === 'FunctionExpression'
+                  ) {
+                    const body = value.body
+                    if (
+                      body.type === 'JSXElement' &&
+                      body.openingElement.name.type === 'JSXIdentifier'
+                    ) {
+                      const elementName = body.openingElement.name.name
+                      return elementName
+                    }
+                  }
+                  // handle render: SomeComponent
+                  if (value.type === 'Identifier') {
+                    const elementName = value.name
+                    return elementName
+                  }
+
+                  // handle render: someFunction()
+                  if (
+                    value.type === 'CallExpression' &&
+                    value.callee.type === 'Identifier'
+                  ) {
+                    const elementName = value.callee.name
+                    return elementName
+                  }
+
+                  return ''
+                }
+                return ''
+              })
+              .filter(Boolean)
+            finalReferences.push(...referencesToRemove)
+          }
+        })
+      }
+    },
+  })
+  return finalReferences
+}
+
 const transform = (ast: ParseResult<Babel.File>) => {
   let didTransform = false
   const devtoolsComponentNames = new Set()
+  const finalReferences: Array<string> = []
+
+  const transformations: Array<() => void> = []
 
   trav(ast, {
     ImportDeclaration(path) {
@@ -23,7 +106,11 @@ const transform = (ast: ParseResult<Babel.File>) => {
         getImportedNames(path.node).forEach((name) =>
           devtoolsComponentNames.add(name),
         )
-        path.remove()
+
+        transformations.push(() => {
+          path.remove()
+        })
+
         didTransform = true
       }
     },
@@ -33,21 +120,53 @@ const transform = (ast: ParseResult<Babel.File>) => {
         opening.name.type === 'JSXIdentifier' &&
         devtoolsComponentNames.has(opening.name.name)
       ) {
-        path.remove()
+        const refs = getLeftoverImports(path)
+
+        finalReferences.push(...refs)
+        transformations.push(() => {
+          path.remove()
+        })
         didTransform = true
       }
-
       if (
         opening.name.type === 'JSXMemberExpression' &&
         opening.name.object.type === 'JSXIdentifier' &&
         devtoolsComponentNames.has(opening.name.object.name)
       ) {
-        path.remove()
+        const refs = getLeftoverImports(path)
+        finalReferences.push(...refs)
+        transformations.push(() => {
+          path.remove()
+        })
         didTransform = true
       }
     },
   })
 
+  trav(ast, {
+    ImportDeclaration(path) {
+      const imports = path.node.specifiers
+      for (const imported of imports) {
+        if (imported.type === 'ImportSpecifier') {
+          if (finalReferences.includes(imported.local.name)) {
+            transformations.push(() => {
+              // remove the specifier
+              path.node.specifiers = path.node.specifiers.filter(
+                (spec) => spec !== imported,
+              )
+              // remove whole import if nothing is left
+              if (path.node.specifiers.length === 0) {
+                path.remove()
+              }
+            })
+          }
+        }
+      }
+    },
+  })
+
+  transformations.forEach((fn) => fn())
+
   return didTransform
 }
 
@@ -61,14 +180,15 @@ export function removeDevtools(code: string, id: string) {
     })
     const didTransform = transform(ast)
     if (!didTransform) {
-      return { code }
+      return
     }
     return gen(ast, {
       sourceMaps: true,
+      retainLines: true,
       filename: id,
       sourceFileName: filePath,
     })
   } catch (e) {
-    return { code }
+    return
   }
 }