@tanstack/devtools-vite 0.3.0 → 0.3.2

package/src/inject-source.test.ts

@@ -79,7 +79,7 @@ describe('inject source', () => {
       expect(output).toBe(
         removeEmptySpace(`
             export const Route = createFileRoute("/test")({
-      component: function() { return <div data-tsd-source="test.jsx:3:37">Hello World</div>; }
+      component: function() { return <div data-tsd-source="test.jsx:3:38">Hello World</div>; }
       });
         `),
       )
@@ -159,7 +159,7 @@ describe('inject source', () => {
       expect(output).toBe(
         removeEmptySpace(`
             export const Route = createFileRoute("/test")({
-      component: function({...rest}) { return <div data-tsd-source="test.jsx:3:46"><div {...rest}>Hello World</div></div>; }
+      component: function({...rest}) { return <div data-tsd-source="test.jsx:3:47"><div {...rest}>Hello World</div></div>; }
       });
         `),
       )
@@ -181,7 +181,7 @@ describe('inject source', () => {
       expect(output).toBe(
         removeEmptySpace(`
             export const Route = createFileRoute("/test")({
-      component: () => <div data-tsd-source="test.jsx:3:23">Hello World</div>
+      component: () => <div data-tsd-source="test.jsx:3:24">Hello World</div>
       });
         `),
       )
@@ -261,7 +261,7 @@ describe('inject source', () => {
       expect(output).toBe(
         removeEmptySpace(`
             export const Route = createFileRoute("/test")({
-      component: ({...rest}) => <div data-tsd-source="test.jsx:3:32"><div {...rest}>Hello World</div></div>
+      component: ({...rest}) => <div data-tsd-source="test.jsx:3:33"><div {...rest}>Hello World</div></div>
       });
         `),
       )
@@ -286,7 +286,7 @@ describe('inject source', () => {
         removeEmptySpace(`
           function Parent({ ...props }) {
             function Child({ ...props }) {
-              return <div data-tsd-source="test.jsx:4:17" />;
+              return <div data-tsd-source="test.jsx:4:18" />;
             }
             return <Child {...props} />;
           }
@@ -312,7 +312,7 @@ function test({...props })  {
           import Custom from "external";
 
 function test({...props })  {
-  return <Custom children={props.children} data-tsd-source="test.tsx:6:9" />;
+  return <Custom children={props.children} data-tsd-source="test.tsx:6:10" />;
 }`),
       )
     })
@@ -330,7 +330,7 @@ function test({...props })  {
       expect(output).toBe(
         removeEmptySpace(`
 function test(props) {
-        return <button  children={props.children} data-tsd-source="test.jsx:3:15" />;
+        return <button  children={props.children} data-tsd-source="test.jsx:3:16" />;
       }
 `),
       )
@@ -372,7 +372,7 @@ function test(props) {
       expect(output).toBe(
         removeEmptySpace(`
 function test(props) {
-        return  <div data-tsd-source="test.jsx:3:16">
+        return  <div data-tsd-source="test.jsx:3:17">
         <button {...props}  />
         </div>;
       }
@@ -396,7 +396,7 @@ function test(props) {
       expect(output).toBe(
         removeEmptySpace(`
 function test({...props}) {
-        return  <div data-tsd-source="test.jsx:3:16">
+        return  <div data-tsd-source="test.jsx:3:17">
         <button {...props}  />
         </div>;
       }
@@ -420,7 +420,7 @@ function test({...props}) {
       expect(output).toBe(
         removeEmptySpace(`
 function test({...rest}) {
-        return  <div data-tsd-source="test.jsx:3:16">
+        return  <div data-tsd-source="test.jsx:3:17">
         <button {...rest}  />
         </div>;
       }
@@ -462,7 +462,7 @@ function test({ children, ...rest }) {
       expect(output).toBe(
         removeEmptySpace(`
     function test({ ...props }) {
-        return <button  children={props.children} data-tsd-source="test.jsx:3:15" />;
+        return <button  children={props.children} data-tsd-source="test.jsx:3:16" />;
       }
 `),
       )
@@ -502,7 +502,7 @@ function test({ children, ...rest }) {
       expect(output).toBe(
         removeEmptySpace(`
     function test({ ...props }) {
-        return <CustomButton  children={props.children} data-tsd-source="test.jsx:3:15" />;
+        return <CustomButton  children={props.children} data-tsd-source="test.jsx:3:16" />;
       }
 `),
       )
@@ -542,7 +542,7 @@ function test({ children, ...rest }) {
       expect(output).toBe(
         removeEmptySpace(`
       function test({ ...props }) {
-        return <CustomButton  children={props.children} data-tsd-source="test.jsx:3:15" />;
+        return <CustomButton  children={props.children} data-tsd-source="test.jsx:3:16" />;
       }
 `),
       )
@@ -563,7 +563,7 @@ function test({ children, ...rest }) {
       expect(output).toBe(
         removeEmptySpace(`
   const ButtonWithProps = function test(props) {
-        return <button  children={props.children} data-tsd-source="test.jsx:3:15" />;
+        return <button  children={props.children} data-tsd-source="test.jsx:3:16" />;
       };
 `),
       )
@@ -605,7 +605,7 @@ function test({ children, ...rest }) {
       expect(output).toBe(
         removeEmptySpace(`
   const ButtonWithProps = function test(props) {
-        return  <div data-tsd-source="test.jsx:3:16">
+        return  <div data-tsd-source="test.jsx:3:17">
         <button {...props}  />
         </div>;
       };
@@ -629,7 +629,7 @@ function test({ children, ...rest }) {
       expect(output).toBe(
         removeEmptySpace(`
   const ButtonWithProps = function test({...props}) {
-        return  <div data-tsd-source="test.jsx:3:16">
+        return  <div data-tsd-source="test.jsx:3:17">
         <button {...props}  />
         </div>;
       };
@@ -653,7 +653,7 @@ function test({ children, ...rest }) {
       expect(output).toBe(
         removeEmptySpace(`
   const ButtonWithProps = function test({...rest}) {
-        return  <div data-tsd-source="test.jsx:3:16">
+        return  <div data-tsd-source="test.jsx:3:17">
         <button {...rest}  />
         </div>;
       };
@@ -695,7 +695,7 @@ function test({ children, ...rest }) {
       expect(output).toBe(
         removeEmptySpace(`
       const ButtonWithProps = function test({ ...props }) {
-        return <button  children={props.children} data-tsd-source="test.jsx:3:15" />;
+        return <button  children={props.children} data-tsd-source="test.jsx:3:16" />;
       };
 `),
       )
@@ -735,7 +735,7 @@ function test({ children, ...rest }) {
       expect(output).toBe(
         removeEmptySpace(`
       const ButtonWithProps = function test({ ...props }) {
-        return <CustomButton  children={props.children} data-tsd-source="test.jsx:3:15" />;
+        return <CustomButton  children={props.children} data-tsd-source="test.jsx:3:16" />;
       };
 `),
       )
@@ -775,7 +775,7 @@ function test({ children, ...rest }) {
       expect(output).toBe(
         removeEmptySpace(`
       export const ButtonWithProps = function test({ ...props }) {
-        return <CustomButton  children={props.children} data-tsd-source="test.jsx:3:15" />;
+        return <CustomButton  children={props.children} data-tsd-source="test.jsx:3:16" />;
       };
 `),
       )
@@ -795,8 +795,8 @@ function test({ children, ...rest }) {
       )
       expect(output).toBe(
         removeEmptySpace(`
-  const ButtonWithProps = props => {
-        return <button  children={props.children} data-tsd-source="test.jsx:3:15" />;
+  const ButtonWithProps = (props) => {
+        return <button  children={props.children} data-tsd-source="test.jsx:3:16" />;
       };
 `),
       )
@@ -837,8 +837,8 @@ function test({ children, ...rest }) {
       )
       expect(output).toBe(
         removeEmptySpace(`
-  const ButtonWithProps = props => {
-        return  <div data-tsd-source="test.jsx:3:16">
+  const ButtonWithProps = (props) => {
+        return  <div data-tsd-source="test.jsx:3:17">
         <button {...props}  />
         </div>;
       };
@@ -862,7 +862,7 @@ function test({ children, ...rest }) {
       expect(output).toBe(
         removeEmptySpace(`
   const ButtonWithProps = ({...props}) => {
-        return  <div data-tsd-source="test.jsx:3:16">
+        return  <div data-tsd-source="test.jsx:3:17">
         <button {...props}  />
         </div>;
       };
@@ -886,7 +886,7 @@ function test({ children, ...rest }) {
       expect(output).toBe(
         removeEmptySpace(`
   const ButtonWithProps = ({...rest}) => {
-        return  <div data-tsd-source= "test.jsx:3:16">
+        return  <div data-tsd-source= "test.jsx:3:17">
         <button {...rest}  />
         </div>;
       };
@@ -908,7 +908,7 @@ function test({ children, ...rest }) {
       expect(output).toBe(
         removeEmptySpace(`
   const ButtonWithProps = ({ children, ...rest }) => {
-        return <button  children={children} data-tsd-source="test.jsx:3:15" />;
+        return <button  children={children} data-tsd-source="test.jsx:3:16" />;
       };
 `),
       )
@@ -928,7 +928,7 @@ function test({ children, ...rest }) {
       expect(output).toBe(
         removeEmptySpace(`
       const ButtonWithProps = ({ ...props }) => {
-        return <button  children={props.children} data-tsd-source="test.jsx:3:15" />;
+        return <button  children={props.children} data-tsd-source="test.jsx:3:16" />;
       };
 `),
       )
@@ -968,7 +968,7 @@ function test({ children, ...rest }) {
       expect(output).toBe(
         removeEmptySpace(`
       const ButtonWithProps = ({ ...props }) => {
-        return <CustomButton  children={props.children} data-tsd-source="test.jsx:3:15" />;
+        return <CustomButton  children={props.children} data-tsd-source="test.jsx:3:16" />;
       };
 `),
       )
@@ -1008,7 +1008,7 @@ function test({ children, ...rest }) {
       expect(output).toBe(
         removeEmptySpace(`
       export const ButtonWithProps = ({ ...props }) => {
-        return <CustomButton  children={props.children} data-tsd-source="test.jsx:3:15" />;
+        return <CustomButton  children={props.children} data-tsd-source="test.jsx:3:16" />;
       };
 `),
       )

package/src/inject-source.ts

@@ -144,7 +144,7 @@ const transformJSX = (
   element.node.attributes.push(
     t.jsxAttribute(
       t.jsxIdentifier('data-tsd-source'),
-      t.stringLiteral(`${file}:${line}:${column}`),
+      t.stringLiteral(`${file}:${line}:${column + 1}`),
     ),
   )
 
@@ -232,6 +232,7 @@ export function addSourceToJsx(code: string, id: string) {
     }
     return gen(ast, {
       sourceMaps: true,
+      retainLines: true,
       filename: id,
       sourceFileName: filePath,
     })

package/src/plugin.ts

@@ -1,10 +1,9 @@
-import { normalizePath } from 'vite'
-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 { enhanceConsoleLog } from './enhance-logs'
 import type { EditorConfig } from './editor'
 import type { ServerEventBusConfig } from '@tanstack/devtools-event-bus/server'
 import type { Plugin } from 'vite'
@@ -160,38 +159,7 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
         if (!code.includes('console.')) {
           return code
         }
-        const lines = code.split('\n')
-        return lines
-          .map((line, lineNumber) => {
-            if (
-              line.trim().startsWith('//') ||
-              line.trim().startsWith('/**') ||
-              line.trim().startsWith('*')
-            ) {
-              return line
-            }
-            // Do not add for arrow functions or return statements
-            if (
-              line.replaceAll(' ', '').includes('=>console.') ||
-              line.includes('return console.')
-            ) {
-              return line
-            }
-
-            const column = line.indexOf('console.')
-            const location = `${id.replace(normalizePath(process.cwd()), '')}:${lineNumber + 1}:${column + 1}`
-            const logMessage = `'${chalk.magenta('LOG')} ${chalk.blueBright(`${location} - http://localhost:${port}/__tsd/open-source?source=${encodeURIComponent(id.replace(normalizePath(process.cwd()), ''))}&line=${lineNumber + 1}&column=${column + 1}`)}\\n → '`
-            if (line.includes('console.log(')) {
-              const newLine = `console.log(${logMessage},`
-              return line.replace('console.log(', newLine)
-            }
-            if (line.includes('console.error(')) {
-              const newLine = `console.error(${logMessage},`
-              return line.replace('console.error(', newLine)
-            }
-            return line
-          })
-          .join('\n')
+        return enhanceConsoleLog(code, id, port)
       },
     },
   ]