Feat/fix sourcemapping issues (#151)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: AlemTuzlak

.changeset/stupid-doors-open.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools-vite': patch
+---
+
+fix issue with sourcemaps and vite plugin

.gitignore

@@ -56,3 +56,4 @@ vite.config.ts.timestamp-*
 
 .angular
 .nitro
+.sonda

docs/vite-plugin.md

@@ -134,6 +134,22 @@ export default {
 }
 ```
 
+### logging
+  Whether to log information to the console. Defaults to true.
+  
+```ts
+import { devtools } from '@tanstack/devtools-vite'
+
+export default {
+  plugins: [
+    devtools({
+      logging: true
+    }),
+    // ... rest of your plugins here
+  ],
+}
+```
+
 ### injectSource 
 
 Configuration for source injection. Defaults to enabled.

examples/react/basic/package.json

@@ -25,6 +25,7 @@
     "@types/react": "^19.1.12",
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.5.2",
+    "sonda": "0.9.0",
     "vite": "^7.0.6",
     "vite-plugin-inspect": "11.3.2"
   },

examples/react/basic/vite.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import { devtools } from '@tanstack/devtools-vite'
 import Inspect from 'vite-plugin-inspect'
+import sonda from 'sonda/vite'
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -10,10 +11,14 @@ export default defineConfig({
       removeDevtoolsOnBuild: true,
     }),
     Inspect(),
+    sonda(),
     react({
       // babel: {
       //   plugins: [['babel-plugin-react-compiler', { target: '19' }]],
       // },
     }),
   ],
+  build: {
+    sourcemap: true,
+  },
 })

packages/devtools-vite/src/enhance-logs.test.ts

@@ -14,7 +14,7 @@ describe('remove-devtools', () => {
         `,
         'test.jsx',
         3000,
-      ).code,
+      )!.code,
     )
     expect(
       output.includes(
@@ -26,96 +26,62 @@ describe('remove-devtools', () => {
   })
 
   test('it does not add enhanced console.logs to console.log that is not called', () => {
-    const output = removeEmptySpace(
-      enhanceConsoleLog(
-        `
+    const output = enhanceConsoleLog(
+      `
         console.log 
         `,
-        'test.jsx',
-        3000,
-      ).code,
-    )
-    expect(output).toBe(
-      removeEmptySpace(`
-        console.log 
-        `),
+      'test.jsx',
+      3000,
     )
+    expect(output).toBe(undefined)
   })
 
   test('it does not add enhanced console.logs to console.log that is inside a comment', () => {
-    const output = removeEmptySpace(
-      enhanceConsoleLog(
-        `
+    const output = enhanceConsoleLog(
+      `
         // console.log('This is a log')
         `,
-        'test.jsx',
-        3000,
-      ).code,
-    )
-    expect(output).toBe(
-      removeEmptySpace(`
-         // console.log('This is a log')
-        `),
+      'test.jsx',
+      3000,
     )
+    expect(output).toBe(undefined)
   })
 
   test('it does not add enhanced console.logs to console.log that is inside a multiline comment', () => {
-    const output = removeEmptySpace(
-      enhanceConsoleLog(
-        `
+    const output = enhanceConsoleLog(
+      `
         /*
         console.log('This is a log')
         */
         `,
-        'test.jsx',
-        3000,
-      ).code,
-    )
-    expect(output).toBe(
-      removeEmptySpace(`
-          /*
-        console.log('This is a log')
-        */
-        `),
+      'test.jsx',
+      3000,
     )
+    expect(output).toBe(undefined)
   })
 
   test('it does not add enhanced console.error to console.error that is inside a comment', () => {
-    const output = removeEmptySpace(
-      enhanceConsoleLog(
-        `
+    const output = enhanceConsoleLog(
+      `
         // console.error('This is a log')
         `,
-        'test.jsx',
-        3000,
-      ).code,
-    )
-    expect(output).toBe(
-      removeEmptySpace(`
-         // console.error('This is a log')
-        `),
+      'test.jsx',
+      3000,
     )
+    expect(output).toBe(undefined)
   })
 
   test('it does not add enhanced console.error to console.error that is inside a multiline comment', () => {
-    const output = removeEmptySpace(
-      enhanceConsoleLog(
-        `
+    const output = enhanceConsoleLog(
+      `
         /*
         console.error('This is a log')
         */
         `,
-        'test.jsx',
-        3000,
-      ).code,
-    )
-    expect(output).toBe(
-      removeEmptySpace(`
-          /*
-        console.error('This is a log')
-        */
-        `),
+      'test.jsx',
+      3000,
     )
+    expect(output).toBe(undefined)
   })
 
   test('it adds enhanced console.error to console.error()', () => {
@@ -126,7 +92,7 @@ describe('remove-devtools', () => {
         `,
         'test.jsx',
         3000,
-      ).code,
+      )!.code,
     )
     console.log('output', output)
     expect(
@@ -139,19 +105,13 @@ describe('remove-devtools', () => {
   })
 
   test('it does not add enhanced console.error to console.error that is not called', () => {
-    const output = removeEmptySpace(
-      enhanceConsoleLog(
-        `
+    const output = enhanceConsoleLog(
+      `
         console.log 
         `,
-        'test.jsx',
-        3000,
-      ).code,
-    )
-    expect(output).toBe(
-      removeEmptySpace(`
-        console.log 
-        `),
+      'test.jsx',
+      3000,
     )
+    expect(output).toBe(undefined)
   })
 })

packages/devtools-vite/src/enhance-logs.ts

@@ -56,7 +56,7 @@ export function enhanceConsoleLog(code: string, id: string, port: number) {
     })
     const didTransform = transform(ast, location, port)
     if (!didTransform) {
-      return { code }
+      return
     }
     return gen(ast, {
       sourceMaps: true,
@@ -65,6 +65,6 @@ export function enhanceConsoleLog(code: string, id: string, port: number) {
       sourceFileName: filePath,
     })
   } catch (e) {
-    return { code }
+    return
   }
 }