Fix/fragment transform

.changeset/khaki-lions-join.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools-vite': patch
+---
+
+fix issue with ast transform

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

@@ -94,6 +94,19 @@ const getPropsNameFromFunctionDeclaration = (
   return propsName
 }
 
+const getNameOfElement = (
+  element: t.JSXIdentifier | t.JSXMemberExpression | t.JSXNamespacedName,
+): string => {
+  if (element.type === 'JSXIdentifier') {
+    return element.name
+  }
+  if (element.type === 'JSXMemberExpression') {
+    return `${getNameOfElement(element.object)}.${getNameOfElement(element.property)}`
+  }
+
+  return `${element.namespace.name}:${element.name.name}`
+}
+
 const transformJSX = (
   element: NodePath<t.JSXOpeningElement>,
   propsName: string | null,
@@ -103,7 +116,11 @@ const transformJSX = (
   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') {
+    return
+  }
   const hasDataSource = element.node.attributes.some(
     (attr) =>
       attr.type === 'JSXAttribute' &&

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

@@ -6,6 +6,64 @@ const removeEmptySpace = (str: string) => {
 }
 
 describe('inject source', () => {
+  it("shouldn't augment react fragments", () => {
+    const output = removeEmptySpace(
+      addSourceToJsx(
+        `
+      export const Route = createFileRoute("/test")({
+      component: function() { return <>Hello World</> },
+      })
+        `,
+        'test.jsx',
+      ).code,
+    )
+    expect(output).toBe(
+      removeEmptySpace(`
+            export const Route = createFileRoute("/test")({
+      component: function() { return <>Hello World</> },
+      })
+        `),
+    )
+  })
+
+  it("shouldn't augment react fragments if they start with Fragment ", () => {
+    const output = removeEmptySpace(
+      addSourceToJsx(
+        `
+      export const Route = createFileRoute("/test")({
+      component: function() { return <Fragment>Hello World</Fragment> },
+      })
+        `,
+        'test.jsx',
+      ).code,
+    )
+    expect(output).toBe(
+      removeEmptySpace(`
+            export const Route = createFileRoute("/test")({
+      component: function() { return <Fragment>Hello World</Fragment> },
+      })
+        `),
+    )
+  })
+  it("shouldn't augment react fragments if they start with React.Fragment ", () => {
+    const output = removeEmptySpace(
+      addSourceToJsx(
+        `
+      export const Route = createFileRoute("/test")({
+      component: function() { return <React.Fragment>Hello World</React.Fragment> },
+      })
+        `,
+        'test.jsx',
+      ).code,
+    )
+    expect(output).toBe(
+      removeEmptySpace(`
+            export const Route = createFileRoute("/test")({
+      component: function() { return <React.Fragment>Hello World</React.Fragment> },
+      })
+        `),
+    )
+  })
   describe('FunctionExpression', () => {
     it('should work with deeply nested custom JSX syntax', () => {
       const output = removeEmptySpace(