Feat/add ignore patterns (#223)

* fix

* feat: implement ignore patterns for injectSource

Author: AlemTuzlak

.changeset/major-lizards-notice.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools-vite': patch
+---
+
+add ignore to inject source for granular manipulation

docs/vite-plugin.md

@@ -165,7 +165,13 @@ export default {
   plugins: [
     devtools({
       injectSource: {
-        enabled: true
+        enabled: true,
+        ignore: {
+          // files to ignore source injection for
+          files: ['node_modules', /.*\.test\.(js|ts|jsx|tsx)$/],
+          // components to ignore source injection for
+          components: ['YourComponent', /.*Lazy$/],
+        },
       }
     }),
     // ... rest of your plugins here

packages/devtools-vite/package.json

@@ -59,12 +59,14 @@
     "@tanstack/devtools-client": "workspace:*",
     "@tanstack/devtools-event-bus": "workspace:*",
     "chalk": "^5.6.2",
-    "launch-editor": "^2.11.1"
+    "launch-editor": "^2.11.1",
+    "picomatch": "^4.0.3"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",
     "@types/babel__generator": "^7.27.0",
     "@types/babel__traverse": "^7.28.0",
+    "@types/picomatch": "^4.0.2",
     "happy-dom": "^18.0.1"
   }
 }

packages/devtools-vite/src/inject-source.test.ts

@@ -854,4 +854,36 @@ function test({...rest}) {
       )
     })
   })
+
+  describe('ignore patterns', () => {
+    it('should skip injection for ignored component names (string)', () => {
+      const output = addSourceToJsx(
+        `
+    function test() {
+        return <Button />
+      }
+        `,
+        'test.jsx',
+        {
+          components: ['Button'],
+        },
+      )
+      expect(output).toBe(undefined)
+    })
+
+    it('should skip injection for ignored file paths (glob)', () => {
+      const output = addSourceToJsx(
+        `
+    function test() {
+        return <div />
+      }
+        `,
+        'src/components/ignored-file.jsx',
+        {
+          files: ['**/ignored-file.jsx'],
+        },
+      )
+      expect(output).toBe(undefined)
+    })
+  })
 })

packages/devtools-vite/src/inject-source.ts

@@ -1,5 +1,6 @@
 import { normalizePath } from 'vite'
 import { gen, parse, t, trav } from './babel'
+import { matcher } from './matcher'
 import type { types as Babel, NodePath } from '@babel/core'
 import type { ParseResult } from '@babel/parser'
 
@@ -111,14 +112,19 @@ const transformJSX = (
   element: NodePath<t.JSXOpeningElement>,
   propsName: string | null,
   file: string,
+  ignorePatterns: Array<string | RegExp>,
 ) => {
   const loc = element.node.loc
   if (!loc) return
   const line = loc.start.line
   const column = loc.start.column
   const nameOfElement = getNameOfElement(element.node.name)
-
-  if (nameOfElement === 'Fragment' || nameOfElement === 'React.Fragment') {
+  const isIgnored = matcher(ignorePatterns, nameOfElement)
+  if (
+    nameOfElement === 'Fragment' ||
+    nameOfElement === 'React.Fragment' ||
+    isIgnored
+  ) {
     return
   }
   const hasDataSource = element.node.attributes.some(
@@ -151,7 +157,11 @@ const transformJSX = (
   return true
 }
 
-const transform = (ast: ParseResult<Babel.File>, file: string) => {
+const transform = (
+  ast: ParseResult<Babel.File>,
+  file: string,
+  ignorePatterns: Array<string | RegExp>,
+) => {
   let didTransform = false
 
   trav(ast, {
@@ -161,7 +171,12 @@ const transform = (ast: ParseResult<Babel.File>, file: string) => {
       )
       functionDeclaration.traverse({
         JSXOpeningElement(element) {
-          const transformed = transformJSX(element, propsName, file)
+          const transformed = transformJSX(
+            element,
+            propsName,
+            file,
+            ignorePatterns,
+          )
           if (transformed) {
             didTransform = true
           }
@@ -172,7 +187,12 @@ const transform = (ast: ParseResult<Babel.File>, file: string) => {
       const propsName = getPropsNameFromFunctionDeclaration(path.node)
       path.traverse({
         JSXOpeningElement(element) {
-          const transformed = transformJSX(element, propsName, file)
+          const transformed = transformJSX(
+            element,
+            propsName,
+            file,
+            ignorePatterns,
+          )
           if (transformed) {
             didTransform = true
           }
@@ -183,7 +203,12 @@ const transform = (ast: ParseResult<Babel.File>, file: string) => {
       const propsName = getPropsNameFromFunctionDeclaration(path.node)
       path.traverse({
         JSXOpeningElement(element) {
-          const transformed = transformJSX(element, propsName, file)
+          const transformed = transformJSX(
+            element,
+            propsName,
+            file,
+            ignorePatterns,
+          )
           if (transformed) {
             didTransform = true
           }
@@ -204,7 +229,12 @@ const transform = (ast: ParseResult<Babel.File>, file: string) => {
 
       path.traverse({
         JSXOpeningElement(element) {
-          const transformed = transformJSX(element, propsName, file)
+          const transformed = transformJSX(
+            element,
+            propsName,
+            file,
+            ignorePatterns,
+          )
           if (transformed) {
             didTransform = true
           }
@@ -216,17 +246,28 @@ const transform = (ast: ParseResult<Babel.File>, file: string) => {
   return didTransform
 }
 
-export function addSourceToJsx(code: string, id: string) {
+export function addSourceToJsx(
+  code: string,
+  id: string,
+  ignore: {
+    files?: Array<string | RegExp>
+    components?: Array<string | RegExp>
+  } = {},
+) {
   const [filePath] = id.split('?')
   // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
   const location = filePath?.replace(normalizePath(process.cwd()), '')!
 
+  const fileIgnored = matcher(ignore.files || [], location)
+  if (fileIgnored) {
+    return
+  }
   try {
     const ast = parse(code, {
       sourceType: 'module',
       plugins: ['jsx', 'typescript'],
     })
-    const didTransform = transform(ast, location)
+    const didTransform = transform(ast, location, ignore.components || [])
     if (!didTransform) {
       return
     }

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

@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest'
+import { matcher } from './matcher'
+
+describe('matcher', () => {
+  it('returns false when patterns is empty', () => {
+    expect(matcher([], 'foo')).toBe(false)
+  })
+
+  it('matches string patterns against component names', () => {
+    const patterns = ['Button', 'MyComponent']
+    expect(matcher(patterns, 'Button')).toBe(true)
+    expect(matcher(patterns, 'Other')).toBe(false)
+  })
+
+  it('matches regex patterns against component names', () => {
+    const patterns = [/^Button$/, /Comp/]
+    expect(matcher(patterns, 'Button')).toBe(true)
+    expect(matcher(patterns, 'MyComp')).toBe(true)
+    expect(matcher(patterns, 'NoMatch')).toBe(false)
+  })
+
+  it('matches file paths with glob patterns', () => {
+    const patterns = ['**/ignored-file.jsx']
+    expect(matcher(patterns, 'src/components/ignored-file.jsx')).toBe(true)
+    expect(matcher(patterns, 'src/components/other.jsx')).toBe(false)
+  })
+
+  it('matches file paths with regex', () => {
+    const patterns = [/ignored-file\.jsx$/]
+    expect(matcher(patterns, 'src/components/ignored-file.jsx')).toBe(true)
+    expect(matcher(patterns, 'src/components/other.jsx')).toBe(false)
+  })
+})

packages/devtools-vite/src/matcher.ts

@@ -0,0 +1,19 @@
+import picomatch from 'picomatch'
+
+export const matcher = (
+  patterns: Array<string | RegExp>,
+  str: string,
+): boolean => {
+  if (patterns.length === 0) {
+    return false
+  }
+  const matchers = patterns.map((pattern) => {
+    if (typeof pattern === 'string') {
+      return picomatch(pattern)
+    } else {
+      return (s: string) => pattern.test(s)
+    }
+  })
+
+  return matchers.some((isMatch) => isMatch(str))
+}

packages/devtools-vite/src/plugin.ts

@@ -62,6 +62,13 @@ export type TanStackDevtoolsViteConfig = {
      * @default true
      */
     enabled: boolean
+    /**
+     * List of files or patterns to ignore for source injection.
+     */
+    ignore?: {
+      files?: Array<string | RegExp>
+      components?: Array<string | RegExp>
+    }
   }
 }
 
@@ -95,7 +102,7 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
         )
           return
 
-        return addSourceToJsx(code, id)
+        return addSourceToJsx(code, id, args?.injectSource?.ignore)
       },
     },
     {