@tanstack/devtools-vite 0.2.14 → 0.3.1

package/src/inject-source.ts

@@ -144,7 +144,7 @@ const transformJSX = (
   element.node.attributes.push(
     t.jsxAttribute(
       t.jsxIdentifier('data-tsd-source'),
-      t.stringLiteral(`${file}:${line}:${column}`),
+      t.stringLiteral(`${file}:${line}:${column + 1}`),
     ),
   )
 
@@ -232,6 +232,7 @@ export function addSourceToJsx(code: string, id: string) {
     }
     return gen(ast, {
       sourceMaps: true,
+      retainLines: true,
       filename: id,
       sourceFileName: filePath,
     })

package/src/plugin.ts

@@ -1,9 +1,9 @@
-import { normalizePath } from 'vite'
-import chalk from 'chalk'
 import { ServerEventBus } from '@tanstack/devtools-event-bus/server'
 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 { EditorConfig } from './editor'
 import type { ServerEventBusConfig } from '@tanstack/devtools-event-bus/server'
 import type { Plugin } from 'vite'
@@ -27,6 +27,11 @@ export type TanStackDevtoolsViteConfig = {
      */
     enabled: boolean
   }
+  /**
+   * Whether to remove devtools from the production build.
+   * @default true
+   */
+  removeDevtoolsOnBuild?: boolean
   /**
    * Configuration for source injection.
    */
@@ -46,6 +51,7 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
   let port = 5173
   const enhancedLogsConfig = args?.enhancedLogs ?? { enabled: true }
   const injectSourceConfig = args?.injectSource ?? { enabled: true }
+  const removeDevtoolsOnBuild = args?.removeDevtoolsOnBuild ?? true
   const bus = new ServerEventBus(args?.eventBusConfig)
 
   return [
@@ -116,6 +122,24 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
         )
       },
     },
+    {
+      name: '@tanstack/devtools:remove-devtools-on-build',
+      apply(_, { command }) {
+        return command === 'build' && removeDevtoolsOnBuild
+      },
+      enforce: 'pre',
+      transform(code, id) {
+        if (
+          id.includes('node_modules') ||
+          id.includes('?raw') ||
+          id.includes('dist') ||
+          id.includes('build')
+        )
+          return code
+
+        return removeDevtools(code, id)
+      },
+    },
     {
       name: '@tanstack/devtools:better-console-logs',
       enforce: 'pre',
@@ -135,38 +159,7 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
         if (!code.includes('console.')) {
           return code
         }
-        const lines = code.split('\n')
-        return lines
-          .map((line, lineNumber) => {
-            if (
-              line.trim().startsWith('//') ||
-              line.trim().startsWith('/**') ||
-              line.trim().startsWith('*')
-            ) {
-              return line
-            }
-            // Do not add for arrow functions or return statements
-            if (
-              line.replaceAll(' ', '').includes('=>console.') ||
-              line.includes('return console.')
-            ) {
-              return line
-            }
-
-            const column = line.indexOf('console.')
-            const location = `${id.replace(normalizePath(process.cwd()), '')}:${lineNumber + 1}:${column + 1}`
-            const logMessage = `'${chalk.magenta('LOG')} ${chalk.blueBright(`${location} - http://localhost:${port}/__tsd/open-source?source=${encodeURIComponent(id.replace(normalizePath(process.cwd()), ''))}&line=${lineNumber + 1}&column=${column + 1}`)}\\n → '`
-            if (line.includes('console.log(')) {
-              const newLine = `console.log(${logMessage},`
-              return line.replace('console.log(', newLine)
-            }
-            if (line.includes('console.error(')) {
-              const newLine = `console.error(${logMessage},`
-              return line.replace('console.error(', newLine)
-            }
-            return line
-          })
-          .join('\n')
+        return enhanceConsoleLog(code, id, port)
       },
     },
   ]

package/src/remove-devtools.test.ts

@@ -0,0 +1,230 @@
+import { describe, expect, test } from 'vitest'
+import { removeDevtools } from './remove-devtools'
+
+const removeEmptySpace = (str: string) => {
+  return str.replace(/\s/g, '').trim()
+}
+
+describe('remove-devtools', () => {
+  test('it removes devtools if Imported directly', () => {
+    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 { TanStackDevtools } from '@tanstack/react-devtools'
+ 
+
+ 
+export default function DevtoolsExample() {
+  return (
+    <>
+      <TanStackDevtools
+        eventBusConfig={{
+          connectToServerBus: true,
+        }}
+        plugins={[
+          {
+            name: 'TanStack Query',
+            render: <ReactQueryDevtoolsPanel />,
+          },
+          {
+            name: 'TanStack Router',
+            render: <TanStackRouterDevtoolsPanel router={router} />,
+          },
+          /* {
+            name: "The actual app",
+            render: <iframe style={{ width: '100%', height: '100%' }} src="http://localhost:3005" />,
+          } */
+        ]}
+      />
+      <RouterProvider router={router} />
+    </>
+  )
+}
+
+        `,
+        'test.jsx',
+      ).code,
+    )
+    expect(output).toBe(
+      removeEmptySpace(`
+           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';  
+
+          
+          export default function DevtoolsExample() {
+            return  <> 
+                <RouterProvider router={router} />
+              </>;
+            
+          }
+
+        `),
+    )
+  })
+
+  test("it removes devtools if Imported and renamed with 'as' ", () => {
+    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 { TanStackDevtools as Devtools } from '@tanstack/react-devtools'
+ 
+
+ 
+export default function DevtoolsExample() {
+  return (
+    <>
+      <Devtools
+        eventBusConfig={{
+          connectToServerBus: true,
+        }}
+        plugins={[
+          {
+            name: 'TanStack Query',
+            render: <ReactQueryDevtoolsPanel />,
+          },
+          {
+            name: 'TanStack Router',
+            render: <TanStackRouterDevtoolsPanel router={router} />,
+          },
+          /* {
+            name: "The actual app",
+            render: <iframe style={{ width: '100%', height: '100%' }} src="http://localhost:3005" />,
+          } */
+        ]}
+      />
+      <RouterProvider router={router} />
+    </>
+  )
+}
+
+        `,
+        'test.jsx',
+      ).code,
+    )
+    expect(output).toBe(
+      removeEmptySpace(`
+           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';  
+
+          
+          export default function DevtoolsExample() {
+            return  <> 
+                <RouterProvider router={router} />
+              </>;
+            
+          }
+
+        `),
+    )
+  })
+
+  test('it removes devtools if Imported as * then used as a subcomponent ', () => {
+    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 Router',
+            render: <TanStackRouterDevtoolsPanel router={router} />,
+          },
+          /* {
+            name: "The actual app",
+            render: <iframe style={{ width: '100%', height: '100%' }} src="http://localhost:3005" />,
+          } */
+        ]}
+      />
+      <RouterProvider router={router} />
+    </>
+  )
+}
+
+        `,
+        'test.jsx',
+      ).code,
+    )
+    expect(output).toBe(
+      removeEmptySpace(`
+           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';  
+
+          
+          export default function DevtoolsExample() {
+            return  <> 
+                <RouterProvider router={router} />
+              </>;
+            
+          }
+
+        `),
+    )
+  })
+})

package/src/remove-devtools.ts

@@ -0,0 +1,74 @@
+import { gen, parse, trav } from './babel'
+import type { t } from './babel'
+import type { types as Babel } from '@babel/core'
+import type { ParseResult } from '@babel/parser'
+
+const isTanStackDevtoolsImport = (source: string) =>
+  source === '@tanstack/react-devtools' ||
+  source === '@tanstack/devtools' ||
+  source === '@tanstack/solid-devtools'
+
+const getImportedNames = (importDecl: t.ImportDeclaration) => {
+  return importDecl.specifiers.map((spec) => spec.local.name)
+}
+
+const transform = (ast: ParseResult<Babel.File>) => {
+  let didTransform = false
+  const devtoolsComponentNames = new Set()
+
+  trav(ast, {
+    ImportDeclaration(path) {
+      const importSource = path.node.source.value
+      if (isTanStackDevtoolsImport(importSource)) {
+        getImportedNames(path.node).forEach((name) =>
+          devtoolsComponentNames.add(name),
+        )
+        path.remove()
+        didTransform = true
+      }
+    },
+    JSXElement(path) {
+      const opening = path.node.openingElement
+      if (
+        opening.name.type === 'JSXIdentifier' &&
+        devtoolsComponentNames.has(opening.name.name)
+      ) {
+        path.remove()
+        didTransform = true
+      }
+
+      if (
+        opening.name.type === 'JSXMemberExpression' &&
+        opening.name.object.type === 'JSXIdentifier' &&
+        devtoolsComponentNames.has(opening.name.object.name)
+      ) {
+        path.remove()
+        didTransform = true
+      }
+    },
+  })
+
+  return didTransform
+}
+
+export function removeDevtools(code: string, id: string) {
+  const [filePath] = id.split('?')
+
+  try {
+    const ast = parse(code, {
+      sourceType: 'module',
+      plugins: ['jsx', 'typescript'],
+    })
+    const didTransform = transform(ast)
+    if (!didTransform) {
+      return { code }
+    }
+    return gen(ast, {
+      sourceMaps: true,
+      filename: id,
+      sourceFileName: filePath,
+    })
+  } catch (e) {
+    return { code }
+  }
+}

package/src/utils.ts

@@ -11,6 +11,7 @@ export const handleDevToolsViteRequest = (
 ) => {
   if (req.url?.includes('__tsd/open-source')) {
     const searchParams = new URLSearchParams(req.url.split('?')[1])
+
     const source = searchParams.get('source')
     if (!source) {
       return