@tanstack/devtools-vite 0.2.13 → 0.3.0

package/src/plugin.ts

@@ -3,6 +3,7 @@ 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 type { EditorConfig } from './editor'
 import type { ServerEventBusConfig } from '@tanstack/devtools-event-bus/server'
@@ -27,6 +28,11 @@ export type TanStackDevtoolsViteConfig = {
      */
     enabled: boolean
   }
+  /**
+   * Whether to remove devtools from the production build.
+   * @default true
+   */
+  removeDevtoolsOnBuild?: boolean
   /**
    * Configuration for source injection.
    */
@@ -44,9 +50,9 @@ export const defineDevtoolsConfig = (config: TanStackDevtoolsViteConfig) =>
 
 export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
   let port = 5173
-  let host = 'http'
   const enhancedLogsConfig = args?.enhancedLogs ?? { enabled: true }
   const injectSourceConfig = args?.injectSource ?? { enabled: true }
+  const removeDevtoolsOnBuild = args?.removeDevtoolsOnBuild ?? true
   const bus = new ServerEventBus(args?.eventBusConfig)
 
   return [
@@ -71,9 +77,6 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
     {
       enforce: 'pre',
       name: '@tanstack/devtools:custom-server',
-      configResolved(config) {
-        host = config.server.https?.cert ? 'https' : 'http'
-      },
       apply(config) {
         // Custom server is only needed in development for piping events to the client
         return config.mode === 'development'
@@ -119,14 +122,23 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
           }),
         )
       },
-      transform(code) {
-        if (code.includes('__TSD_PORT__')) {
-          code = code.replace('__TSD_PORT__', String(port))
-        }
-        if (code.includes('__TSD_HOST__')) {
-          code = code.replace('__TSD_HOST__', host)
-        }
-        return code
+    },
+    {
+      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)
       },
     },
     {

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 }
+  }
+}