@tanstack/devtools-vite 0.3.1 → 0.3.2

package/dist/esm/remove-devtools.js

@@ -4,9 +4,56 @@ const isTanStackDevtoolsImport = (source) => source === "@tanstack/react-devtool
 const getImportedNames = (importDecl) => {
   return importDecl.specifiers.map((spec) => spec.local.name);
 };
+const getLeftoverImports = (node) => {
+  const finalReferences = [];
+  node.traverse({
+    JSXAttribute(path) {
+      const node2 = path.node;
+      const propName = typeof node2.name.name === "string" ? node2.name.name : node2.name.name.name;
+      if (propName === "plugins" && node2.value?.type === "JSXExpressionContainer" && node2.value.expression.type === "ArrayExpression") {
+        const elements = node2.value.expression.elements;
+        elements.forEach((el) => {
+          if (el?.type === "ObjectExpression") {
+            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;
+                if (value.type === "JSXElement" && value.openingElement.name.type === "JSXIdentifier") {
+                  const elementName = value.openingElement.name.name;
+                  return elementName;
+                }
+                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;
+                  }
+                }
+                if (value.type === "Identifier") {
+                  const elementName = value.name;
+                  return elementName;
+                }
+                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) => {
   let didTransform = false;
   const devtoolsComponentNames = /* @__PURE__ */ new Set();
+  const finalReferences = [];
+  const transformations = [];
   trav(ast, {
     ImportDeclaration(path) {
       const importSource = path.node.source.value;
@@ -14,22 +61,52 @@ const transform = (ast) => {
         getImportedNames(path.node).forEach(
           (name) => devtoolsComponentNames.add(name)
         );
-        path.remove();
+        transformations.push(() => {
+          path.remove();
+        });
         didTransform = true;
       }
     },
     JSXElement(path) {
       const opening = path.node.openingElement;
       if (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(() => {
+              path.node.specifiers = path.node.specifiers.filter(
+                (spec) => spec !== imported
+              );
+              if (path.node.specifiers.length === 0) {
+                path.remove();
+              }
+            });
+          }
+        }
+      }
+    }
+  });
+  transformations.forEach((fn) => fn());
   return didTransform;
 };
 function removeDevtools(code, id) {
@@ -45,6 +122,7 @@ function removeDevtools(code, id) {
     }
     return gen(ast, {
       sourceMaps: true,
+      retainLines: true,
       filename: id,
       sourceFileName: filePath
     });

package/dist/esm/remove-devtools.js.map

@@ -1 +1 @@
-{"version":3,"file":"remove-devtools.js","sources":["../../src/remove-devtools.ts"],"sourcesContent":["import { gen, parse, trav } from './babel'\nimport type { t } from './babel'\nimport type { types as Babel } from '@babel/core'\nimport type { ParseResult } from '@babel/parser'\n\nconst isTanStackDevtoolsImport = (source: string) =>\n  source === '@tanstack/react-devtools' ||\n  source === '@tanstack/devtools' ||\n  source === '@tanstack/solid-devtools'\n\nconst getImportedNames = (importDecl: t.ImportDeclaration) => {\n  return importDecl.specifiers.map((spec) => spec.local.name)\n}\n\nconst transform = (ast: ParseResult<Babel.File>) => {\n  let didTransform = false\n  const devtoolsComponentNames = new Set()\n\n  trav(ast, {\n    ImportDeclaration(path) {\n      const importSource = path.node.source.value\n      if (isTanStackDevtoolsImport(importSource)) {\n        getImportedNames(path.node).forEach((name) =>\n          devtoolsComponentNames.add(name),\n        )\n        path.remove()\n        didTransform = true\n      }\n    },\n    JSXElement(path) {\n      const opening = path.node.openingElement\n      if (\n        opening.name.type === 'JSXIdentifier' &&\n        devtoolsComponentNames.has(opening.name.name)\n      ) {\n        path.remove()\n        didTransform = true\n      }\n\n      if (\n        opening.name.type === 'JSXMemberExpression' &&\n        opening.name.object.type === 'JSXIdentifier' &&\n        devtoolsComponentNames.has(opening.name.object.name)\n      ) {\n        path.remove()\n        didTransform = true\n      }\n    },\n  })\n\n  return didTransform\n}\n\nexport function removeDevtools(code: string, id: string) {\n  const [filePath] = id.split('?')\n\n  try {\n    const ast = parse(code, {\n      sourceType: 'module',\n      plugins: ['jsx', 'typescript'],\n    })\n    const didTransform = transform(ast)\n    if (!didTransform) {\n      return { code }\n    }\n    return gen(ast, {\n      sourceMaps: true,\n      filename: id,\n      sourceFileName: filePath,\n    })\n  } catch (e) {\n    return { code }\n  }\n}\n"],"names":[],"mappings":";;AAKA,MAAM,2BAA2B,CAAC,WAChC,WAAW,8BACX,WAAW,wBACX,WAAW;AAEb,MAAM,mBAAmB,CAAC,eAAoC;AAC5D,SAAO,WAAW,WAAW,IAAI,CAAC,SAAS,KAAK,MAAM,IAAI;AAC5D;AAEA,MAAM,YAAY,CAAC,QAAiC;AAClD,MAAI,eAAe;AACnB,QAAM,6CAA6B,IAAA;AAEnC,OAAK,KAAK;AAAA,IACR,kBAAkB,MAAM;AACtB,YAAM,eAAe,KAAK,KAAK,OAAO;AACtC,UAAI,yBAAyB,YAAY,GAAG;AAC1C,yBAAiB,KAAK,IAAI,EAAE;AAAA,UAAQ,CAAC,SACnC,uBAAuB,IAAI,IAAI;AAAA,QAAA;AAEjC,aAAK,OAAA;AACL,uBAAe;AAAA,MACjB;AAAA,IACF;AAAA,IACA,WAAW,MAAM;AACf,YAAM,UAAU,KAAK,KAAK;AAC1B,UACE,QAAQ,KAAK,SAAS,mBACtB,uBAAuB,IAAI,QAAQ,KAAK,IAAI,GAC5C;AACA,aAAK,OAAA;AACL,uBAAe;AAAA,MACjB;AAEA,UACE,QAAQ,KAAK,SAAS,yBACtB,QAAQ,KAAK,OAAO,SAAS,mBAC7B,uBAAuB,IAAI,QAAQ,KAAK,OAAO,IAAI,GACnD;AACA,aAAK,OAAA;AACL,uBAAe;AAAA,MACjB;AAAA,IACF;AAAA,EAAA,CACD;AAED,SAAO;AACT;AAEO,SAAS,eAAe,MAAc,IAAY;AACvD,QAAM,CAAC,QAAQ,IAAI,GAAG,MAAM,GAAG;AAE/B,MAAI;AACF,UAAM,MAAM,MAAM,MAAM;AAAA,MACtB,YAAY;AAAA,MACZ,SAAS,CAAC,OAAO,YAAY;AAAA,IAAA,CAC9B;AACD,UAAM,eAAe,UAAU,GAAG;AAClC,QAAI,CAAC,cAAc;AACjB,aAAO,EAAE,KAAA;AAAA,IACX;AACA,WAAO,IAAI,KAAK;AAAA,MACd,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,gBAAgB;AAAA,IAAA,CACjB;AAAA,EACH,SAAS,GAAG;AACV,WAAO,EAAE,KAAA;AAAA,EACX;AACF;"}
+{"version":3,"file":"remove-devtools.js","sources":["../../src/remove-devtools.ts"],"sourcesContent":["import { gen, parse, trav } from './babel'\nimport type { t } from './babel'\nimport type { types as Babel, NodePath } from '@babel/core'\nimport type { ParseResult } from '@babel/parser'\n\nconst isTanStackDevtoolsImport = (source: string) =>\n  source === '@tanstack/react-devtools' ||\n  source === '@tanstack/devtools' ||\n  source === '@tanstack/solid-devtools'\n\nconst getImportedNames = (importDecl: t.ImportDeclaration) => {\n  return importDecl.specifiers.map((spec) => spec.local.name)\n}\n\nconst getLeftoverImports = (node: NodePath<t.JSXElement>) => {\n  const finalReferences: Array<string> = []\n  node.traverse({\n    JSXAttribute(path) {\n      const node = path.node\n      const propName =\n        typeof node.name.name === 'string'\n          ? node.name.name\n          : node.name.name.name\n\n      if (\n        propName === 'plugins' &&\n        node.value?.type === 'JSXExpressionContainer' &&\n        node.value.expression.type === 'ArrayExpression'\n      ) {\n        const elements = node.value.expression.elements\n\n        elements.forEach((el) => {\n          if (el?.type === 'ObjectExpression') {\n            // { name: \"something\", render: ()=> <Component /> }\n            const props = el.properties\n            const referencesToRemove = props\n              .map((prop) => {\n                if (\n                  prop.type === 'ObjectProperty' &&\n                  prop.key.type === 'Identifier' &&\n                  prop.key.name === 'render'\n                ) {\n                  const value = prop.value\n                  // handle <ReactRouterPanel />\n                  if (\n                    value.type === 'JSXElement' &&\n                    value.openingElement.name.type === 'JSXIdentifier'\n                  ) {\n                    const elementName = value.openingElement.name.name\n                    return elementName\n                  }\n                  // handle () => <ReactRouterPanel /> or function() { return <ReactRouterPanel /> }\n                  if (\n                    value.type === 'ArrowFunctionExpression' ||\n                    value.type === 'FunctionExpression'\n                  ) {\n                    const body = value.body\n                    if (\n                      body.type === 'JSXElement' &&\n                      body.openingElement.name.type === 'JSXIdentifier'\n                    ) {\n                      const elementName = body.openingElement.name.name\n                      return elementName\n                    }\n                  }\n                  // handle render: SomeComponent\n                  if (value.type === 'Identifier') {\n                    const elementName = value.name\n                    return elementName\n                  }\n\n                  // handle render: someFunction()\n                  if (\n                    value.type === 'CallExpression' &&\n                    value.callee.type === 'Identifier'\n                  ) {\n                    const elementName = value.callee.name\n                    return elementName\n                  }\n\n                  return ''\n                }\n                return ''\n              })\n              .filter(Boolean)\n            finalReferences.push(...referencesToRemove)\n          }\n        })\n      }\n    },\n  })\n  return finalReferences\n}\n\nconst transform = (ast: ParseResult<Babel.File>) => {\n  let didTransform = false\n  const devtoolsComponentNames = new Set()\n  const finalReferences: Array<string> = []\n\n  const transformations: Array<() => void> = []\n\n  trav(ast, {\n    ImportDeclaration(path) {\n      const importSource = path.node.source.value\n      if (isTanStackDevtoolsImport(importSource)) {\n        getImportedNames(path.node).forEach((name) =>\n          devtoolsComponentNames.add(name),\n        )\n\n        transformations.push(() => {\n          path.remove()\n        })\n\n        didTransform = true\n      }\n    },\n    JSXElement(path) {\n      const opening = path.node.openingElement\n      if (\n        opening.name.type === 'JSXIdentifier' &&\n        devtoolsComponentNames.has(opening.name.name)\n      ) {\n        const refs = getLeftoverImports(path)\n\n        finalReferences.push(...refs)\n        transformations.push(() => {\n          path.remove()\n        })\n        didTransform = true\n      }\n      if (\n        opening.name.type === 'JSXMemberExpression' &&\n        opening.name.object.type === 'JSXIdentifier' &&\n        devtoolsComponentNames.has(opening.name.object.name)\n      ) {\n        const refs = getLeftoverImports(path)\n        finalReferences.push(...refs)\n        transformations.push(() => {\n          path.remove()\n        })\n        didTransform = true\n      }\n    },\n  })\n\n  trav(ast, {\n    ImportDeclaration(path) {\n      const imports = path.node.specifiers\n      for (const imported of imports) {\n        if (imported.type === 'ImportSpecifier') {\n          if (finalReferences.includes(imported.local.name)) {\n            transformations.push(() => {\n              // remove the specifier\n              path.node.specifiers = path.node.specifiers.filter(\n                (spec) => spec !== imported,\n              )\n              // remove whole import if nothing is left\n              if (path.node.specifiers.length === 0) {\n                path.remove()\n              }\n            })\n          }\n        }\n      }\n    },\n  })\n\n  transformations.forEach((fn) => fn())\n\n  return didTransform\n}\n\nexport function removeDevtools(code: string, id: string) {\n  const [filePath] = id.split('?')\n\n  try {\n    const ast = parse(code, {\n      sourceType: 'module',\n      plugins: ['jsx', 'typescript'],\n    })\n    const didTransform = transform(ast)\n    if (!didTransform) {\n      return { code }\n    }\n    return gen(ast, {\n      sourceMaps: true,\n      retainLines: true,\n      filename: id,\n      sourceFileName: filePath,\n    })\n  } catch (e) {\n    return { code }\n  }\n}\n"],"names":["node"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools-vite",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "TanStack Vite plugin used to enhance the core devtools with additional functionalities",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/remove-devtools.test.ts

@@ -57,22 +57,20 @@ export default function DevtoolsExample() {
     )
     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} />
-              </>;
+              </>);
             
           }
 
@@ -131,9 +129,7 @@ export default function DevtoolsExample() {
     )
     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} />
-              </>;
+              </>);
             
           }
 
@@ -205,9 +201,7 @@ export default function DevtoolsExample() {
     )
     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
 }
 
@@ -65,6 +184,7 @@ export function removeDevtools(code: string, id: string) {
     }
     return gen(ast, {
       sourceMaps: true,
+      retainLines: true,
       filename: id,
       sourceFileName: filePath,
     })