fix(devtools-vite): preserve valid syntax when removing parenthesized devtools JSX (#449)

* fix(devtools-vite): preserve valid syntax when removing parenthesized devtools JSX

* add changeset

Author: vedant416

.changeset/small-papers-wink.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools-vite': patch
+---
+
+Fix invalid syntax generated when removing parenthesized devtools JSX expressions.

packages/devtools-vite/src/ast-utils.ts

@@ -48,7 +48,11 @@ export function forEachChild(node: Node, callback: (child: Node) => void) {
 /**
  * Recursively walk AST nodes, calling `visitor` for each node with a `type`.
  */
-export function walk(node: Node, visitor: (node: Node) => void) {
-  visitor(node)
-  forEachChild(node, (child) => walk(child, visitor))
+export function walk(
+  node: Node,
+  visitor: (node: Node, parentNode?: Node) => void,
+  parentNode?: Node,
+) {
+  visitor(node, parentNode)
+  forEachChild(node, (child) => walk(child, visitor, node))
 }

packages/devtools-vite/src/remove-devtools.test.ts

@@ -577,4 +577,31 @@ export default function App() {
       expect(output!.code).not.toContain('TanStackDevtools')
     })
   })
+
+  test('preserves valid syntax when removing parenthesized devtools return', () => {
+    const output = removeEmptySpace(
+      removeDevtools(
+        `
+import { TanStackDevtools } from '@tanstack/react-devtools'
+
+export function DevtoolsProvider() {
+  return (
+    <TanStackDevtools />
+  )
+}
+`,
+        'test.tsx',
+      )!.code,
+    )
+
+    expect(output).toBe(
+      removeEmptySpace(`
+export function DevtoolsProvider() {
+  return (
+    null
+  )
+}
+`),
+    )
+  })
 })

packages/devtools-vite/src/remove-devtools.ts

@@ -105,7 +105,7 @@ export function removeDevtools(code: string, id: string) {
     if (devtoolsNames.size === 0) return
 
     // Pass 2: Find and remove devtools JSX elements, collect plugin references
-    walk(result.program, (node) => {
+    walk(result.program, (node, parentNode) => {
       if (node.type !== 'JSXElement') return
 
       const opening = node.openingElement
@@ -130,7 +130,11 @@ export function removeDevtools(code: string, id: string) {
 
       let end = node.end
       if (code[end] === '\n') end++
-      s.remove(node.start, end)
+      if (parentNode?.type === 'ParenthesizedExpression') {
+        s.overwrite(node.start, end, 'null')
+      } else {
+        s.remove(node.start, end)
+      }
     })
 
     // Pass 3: Remove plugin imports that are no longer referenced