@tanstack/devtools-vite 0.2.8 → 0.2.10

package/dist/esm/inject-source.js

@@ -61,11 +61,24 @@ const getPropsNameFromFunctionDeclaration = (functionDeclaration) => {
   }
   return propsName;
 };
+const getNameOfElement = (element) => {
+  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, propsName, file) => {
   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") {
+    return;
+  }
   const hasDataSource = element.node.attributes.some(
     (attr) => attr.type === "JSXAttribute" && attr.name.type === "JSXIdentifier" && attr.name.name === "data-tsd-source"
   );

package/dist/esm/inject-source.js.map

@@ -1 +1 @@
-{"version":3,"file":"inject-source.js","sources":["../../src/inject-source.ts"],"sourcesContent":["import { normalizePath } from 'vite'\nimport { gen, parse, t, trav } from './babel'\nimport type { types as Babel, NodePath } from '@babel/core'\nimport type { ParseResult } from '@babel/parser'\n\nconst getPropsNameFromFunctionDeclaration = (\n  functionDeclaration:\n    | t.VariableDeclarator\n    | t.FunctionExpression\n    | t.FunctionDeclaration\n    | t.ArrowFunctionExpression,\n) => {\n  let propsName: string | null = null\n\n  if (functionDeclaration.type === 'FunctionExpression') {\n    const firstArgument = functionDeclaration.params[0]\n    // handles (props) => {}\n    if (firstArgument && firstArgument.type === 'Identifier') {\n      propsName = firstArgument.name\n    }\n    // handles ({ ...props }) => {}\n    if (firstArgument && firstArgument.type === 'ObjectPattern') {\n      firstArgument.properties.forEach((prop) => {\n        if (\n          prop.type === 'RestElement' &&\n          prop.argument.type === 'Identifier'\n        ) {\n          propsName = prop.argument.name\n        }\n      })\n    }\n    return propsName\n  }\n  if (functionDeclaration.type === 'ArrowFunctionExpression') {\n    const firstArgument = functionDeclaration.params[0]\n    // handles (props) => {}\n    if (firstArgument && firstArgument.type === 'Identifier') {\n      propsName = firstArgument.name\n    }\n    // handles ({ ...props }) => {}\n    if (firstArgument && firstArgument.type === 'ObjectPattern') {\n      firstArgument.properties.forEach((prop) => {\n        if (\n          prop.type === 'RestElement' &&\n          prop.argument.type === 'Identifier'\n        ) {\n          propsName = prop.argument.name\n        }\n      })\n    }\n    return propsName\n  }\n  if (functionDeclaration.type === 'FunctionDeclaration') {\n    const firstArgument = functionDeclaration.params[0]\n    // handles (props) => {}\n    if (firstArgument && firstArgument.type === 'Identifier') {\n      propsName = firstArgument.name\n    }\n    // handles ({ ...props }) => {}\n    if (firstArgument && firstArgument.type === 'ObjectPattern') {\n      firstArgument.properties.forEach((prop) => {\n        if (\n          prop.type === 'RestElement' &&\n          prop.argument.type === 'Identifier'\n        ) {\n          propsName = prop.argument.name\n        }\n      })\n    }\n    return propsName\n  }\n  // Arrow function case\n  if (\n    functionDeclaration.init?.type === 'ArrowFunctionExpression' ||\n    functionDeclaration.init?.type === 'FunctionExpression'\n  ) {\n    const firstArgument = functionDeclaration.init.params[0]\n    // handles (props) => {}\n    if (firstArgument && firstArgument.type === 'Identifier') {\n      propsName = firstArgument.name\n    }\n    // handles ({ ...props }) => {}\n    if (firstArgument && firstArgument.type === 'ObjectPattern') {\n      firstArgument.properties.forEach((prop) => {\n        if (\n          prop.type === 'RestElement' &&\n          prop.argument.type === 'Identifier'\n        ) {\n          propsName = prop.argument.name\n        }\n      })\n    }\n  }\n  return propsName\n}\n\nconst transformJSX = (\n  element: NodePath<t.JSXOpeningElement>,\n  propsName: string | null,\n  file: string,\n) => {\n  const loc = element.node.loc\n  if (!loc) return\n  const line = loc.start.line\n  const column = loc.start.column\n\n  const hasDataSource = element.node.attributes.some(\n    (attr) =>\n      attr.type === 'JSXAttribute' &&\n      attr.name.type === 'JSXIdentifier' &&\n      attr.name.name === 'data-tsd-source',\n  )\n  // Check if props are spread\n  const hasSpread = element.node.attributes.some(\n    (attr) =>\n      attr.type === 'JSXSpreadAttribute' &&\n      attr.argument.type === 'Identifier' &&\n      attr.argument.name === propsName,\n  )\n\n  if (hasSpread || hasDataSource) {\n    // Do not inject if props are spread\n    return\n  }\n\n  // Inject data-source as a string: \"<file>:<line>:<column>\"\n  element.node.attributes.push(\n    t.jsxAttribute(\n      t.jsxIdentifier('data-tsd-source'),\n      t.stringLiteral(`${file}:${line}:${column}`),\n    ),\n  )\n\n  return true\n}\n\nconst transform = (ast: ParseResult<Babel.File>, file: string) => {\n  let didTransform = false\n\n  trav(ast, {\n    FunctionDeclaration(functionDeclaration) {\n      const propsName = getPropsNameFromFunctionDeclaration(\n        functionDeclaration.node,\n      )\n      functionDeclaration.traverse({\n        JSXOpeningElement(element) {\n          const transformed = transformJSX(element, propsName, file)\n          if (transformed) {\n            didTransform = true\n          }\n        },\n      })\n    },\n    ArrowFunctionExpression(path) {\n      const propsName = getPropsNameFromFunctionDeclaration(path.node)\n      path.traverse({\n        JSXOpeningElement(element) {\n          const transformed = transformJSX(element, propsName, file)\n          if (transformed) {\n            didTransform = true\n          }\n        },\n      })\n    },\n    FunctionExpression(path) {\n      const propsName = getPropsNameFromFunctionDeclaration(path.node)\n      path.traverse({\n        JSXOpeningElement(element) {\n          const transformed = transformJSX(element, propsName, file)\n          if (transformed) {\n            didTransform = true\n          }\n        },\n      })\n    },\n    VariableDeclaration(path) {\n      const functionDeclaration = path.node.declarations.find((decl) => {\n        return (\n          decl.init?.type === 'ArrowFunctionExpression' ||\n          decl.init?.type === 'FunctionExpression'\n        )\n      })\n      if (!functionDeclaration) {\n        return\n      }\n      const propsName = getPropsNameFromFunctionDeclaration(functionDeclaration)\n\n      path.traverse({\n        JSXOpeningElement(element) {\n          const transformed = transformJSX(element, propsName, file)\n          if (transformed) {\n            didTransform = true\n          }\n        },\n      })\n    },\n  })\n\n  return didTransform\n}\n\nexport function addSourceToJsx(code: string, id: string) {\n  const [filePath] = id.split('?')\n  // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain\n  const location = filePath?.replace(normalizePath(process.cwd()), '')!\n\n  try {\n    const ast = parse(code, {\n      sourceType: 'module',\n      plugins: ['jsx', 'typescript'],\n    })\n    const didTransform = transform(ast, location)\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":"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"}
+{"version":3,"file":"inject-source.js","sources":["../../src/inject-source.ts"],"sourcesContent":["import { normalizePath } from 'vite'\nimport { gen, parse, t, trav } from './babel'\nimport type { types as Babel, NodePath } from '@babel/core'\nimport type { ParseResult } from '@babel/parser'\n\nconst getPropsNameFromFunctionDeclaration = (\n  functionDeclaration:\n    | t.VariableDeclarator\n    | t.FunctionExpression\n    | t.FunctionDeclaration\n    | t.ArrowFunctionExpression,\n) => {\n  let propsName: string | null = null\n\n  if (functionDeclaration.type === 'FunctionExpression') {\n    const firstArgument = functionDeclaration.params[0]\n    // handles (props) => {}\n    if (firstArgument && firstArgument.type === 'Identifier') {\n      propsName = firstArgument.name\n    }\n    // handles ({ ...props }) => {}\n    if (firstArgument && firstArgument.type === 'ObjectPattern') {\n      firstArgument.properties.forEach((prop) => {\n        if (\n          prop.type === 'RestElement' &&\n          prop.argument.type === 'Identifier'\n        ) {\n          propsName = prop.argument.name\n        }\n      })\n    }\n    return propsName\n  }\n  if (functionDeclaration.type === 'ArrowFunctionExpression') {\n    const firstArgument = functionDeclaration.params[0]\n    // handles (props) => {}\n    if (firstArgument && firstArgument.type === 'Identifier') {\n      propsName = firstArgument.name\n    }\n    // handles ({ ...props }) => {}\n    if (firstArgument && firstArgument.type === 'ObjectPattern') {\n      firstArgument.properties.forEach((prop) => {\n        if (\n          prop.type === 'RestElement' &&\n          prop.argument.type === 'Identifier'\n        ) {\n          propsName = prop.argument.name\n        }\n      })\n    }\n    return propsName\n  }\n  if (functionDeclaration.type === 'FunctionDeclaration') {\n    const firstArgument = functionDeclaration.params[0]\n    // handles (props) => {}\n    if (firstArgument && firstArgument.type === 'Identifier') {\n      propsName = firstArgument.name\n    }\n    // handles ({ ...props }) => {}\n    if (firstArgument && firstArgument.type === 'ObjectPattern') {\n      firstArgument.properties.forEach((prop) => {\n        if (\n          prop.type === 'RestElement' &&\n          prop.argument.type === 'Identifier'\n        ) {\n          propsName = prop.argument.name\n        }\n      })\n    }\n    return propsName\n  }\n  // Arrow function case\n  if (\n    functionDeclaration.init?.type === 'ArrowFunctionExpression' ||\n    functionDeclaration.init?.type === 'FunctionExpression'\n  ) {\n    const firstArgument = functionDeclaration.init.params[0]\n    // handles (props) => {}\n    if (firstArgument && firstArgument.type === 'Identifier') {\n      propsName = firstArgument.name\n    }\n    // handles ({ ...props }) => {}\n    if (firstArgument && firstArgument.type === 'ObjectPattern') {\n      firstArgument.properties.forEach((prop) => {\n        if (\n          prop.type === 'RestElement' &&\n          prop.argument.type === 'Identifier'\n        ) {\n          propsName = prop.argument.name\n        }\n      })\n    }\n  }\n  return propsName\n}\n\nconst getNameOfElement = (\n  element: t.JSXIdentifier | t.JSXMemberExpression | t.JSXNamespacedName,\n): string => {\n  if (element.type === 'JSXIdentifier') {\n    return element.name\n  }\n  if (element.type === 'JSXMemberExpression') {\n    return `${getNameOfElement(element.object)}.${getNameOfElement(element.property)}`\n  }\n\n  return `${element.namespace.name}:${element.name.name}`\n}\n\nconst transformJSX = (\n  element: NodePath<t.JSXOpeningElement>,\n  propsName: string | null,\n  file: string,\n) => {\n  const loc = element.node.loc\n  if (!loc) return\n  const line = loc.start.line\n  const column = loc.start.column\n  const nameOfElement = getNameOfElement(element.node.name)\n\n  if (nameOfElement === 'Fragment' || nameOfElement === 'React.Fragment') {\n    return\n  }\n  const hasDataSource = element.node.attributes.some(\n    (attr) =>\n      attr.type === 'JSXAttribute' &&\n      attr.name.type === 'JSXIdentifier' &&\n      attr.name.name === 'data-tsd-source',\n  )\n  // Check if props are spread\n  const hasSpread = element.node.attributes.some(\n    (attr) =>\n      attr.type === 'JSXSpreadAttribute' &&\n      attr.argument.type === 'Identifier' &&\n      attr.argument.name === propsName,\n  )\n\n  if (hasSpread || hasDataSource) {\n    // Do not inject if props are spread\n    return\n  }\n\n  // Inject data-source as a string: \"<file>:<line>:<column>\"\n  element.node.attributes.push(\n    t.jsxAttribute(\n      t.jsxIdentifier('data-tsd-source'),\n      t.stringLiteral(`${file}:${line}:${column}`),\n    ),\n  )\n\n  return true\n}\n\nconst transform = (ast: ParseResult<Babel.File>, file: string) => {\n  let didTransform = false\n\n  trav(ast, {\n    FunctionDeclaration(functionDeclaration) {\n      const propsName = getPropsNameFromFunctionDeclaration(\n        functionDeclaration.node,\n      )\n      functionDeclaration.traverse({\n        JSXOpeningElement(element) {\n          const transformed = transformJSX(element, propsName, file)\n          if (transformed) {\n            didTransform = true\n          }\n        },\n      })\n    },\n    ArrowFunctionExpression(path) {\n      const propsName = getPropsNameFromFunctionDeclaration(path.node)\n      path.traverse({\n        JSXOpeningElement(element) {\n          const transformed = transformJSX(element, propsName, file)\n          if (transformed) {\n            didTransform = true\n          }\n        },\n      })\n    },\n    FunctionExpression(path) {\n      const propsName = getPropsNameFromFunctionDeclaration(path.node)\n      path.traverse({\n        JSXOpeningElement(element) {\n          const transformed = transformJSX(element, propsName, file)\n          if (transformed) {\n            didTransform = true\n          }\n        },\n      })\n    },\n    VariableDeclaration(path) {\n      const functionDeclaration = path.node.declarations.find((decl) => {\n        return (\n          decl.init?.type === 'ArrowFunctionExpression' ||\n          decl.init?.type === 'FunctionExpression'\n        )\n      })\n      if (!functionDeclaration) {\n        return\n      }\n      const propsName = getPropsNameFromFunctionDeclaration(functionDeclaration)\n\n      path.traverse({\n        JSXOpeningElement(element) {\n          const transformed = transformJSX(element, propsName, file)\n          if (transformed) {\n            didTransform = true\n          }\n        },\n      })\n    },\n  })\n\n  return didTransform\n}\n\nexport function addSourceToJsx(code: string, id: string) {\n  const [filePath] = id.split('?')\n  // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain\n  const location = filePath?.replace(normalizePath(process.cwd()), '')!\n\n  try {\n    const ast = parse(code, {\n      sourceType: 'module',\n      plugins: ['jsx', 'typescript'],\n    })\n    const didTransform = transform(ast, location)\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":"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"}

package/dist/esm/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../src/utils.ts"],"sourcesContent":["import { normalizePath } from 'vite'\nimport type { Connect } from 'vite'\nimport type { IncomingMessage, ServerResponse } from 'node:http'\n\nexport const handleDevToolsViteRequest = (\n  req: Connect.IncomingMessage,\n  res: ServerResponse<IncomingMessage>,\n  next: Connect.NextFunction,\n  cb: (data: any) => void,\n) => {\n  if (req.url?.includes('__tsd/open-source')) {\n    const searchParams = new URLSearchParams(req.url.split('?')[1])\n    const source = searchParams.get('source')\n    if (!source) {\n      return\n    }\n    const [file, line, column] = source.split(':')\n\n    cb({\n      type: 'open-source',\n      routine: 'open-source',\n      data: {\n        source: file ? normalizePath(`${process.cwd()}/${file}`) : undefined,\n        line,\n        column,\n      },\n    })\n    res.setHeader('Content-Type', 'text/html')\n    res.write(`<script> window.close(); </script>`)\n    res.end()\n    return\n  }\n  if (!req.url?.includes('__tsd')) {\n    return next()\n  }\n\n  const chunks: Array<any> = []\n  req.on('data', (chunk) => {\n    chunks.push(chunk)\n  })\n  req.on('end', () => {\n    const dataToParse = Buffer.concat(chunks)\n    try {\n      const parsedData = JSON.parse(dataToParse.toString())\n      cb(parsedData)\n    } catch (e) {}\n    res.write('OK')\n  })\n}\n"],"names":[],"mappings":";AAIO,MAAM,4BAA4B,CACvC,KACA,KACA,MACA,OACG;AACH,MAAI,IAAI,KAAK,SAAS,mBAAmB,GAAG;AAC1C,UAAM,eAAe,IAAI,gBAAgB,IAAI,IAAI,MAAM,GAAG,EAAE,CAAC,CAAC;AAC9D,UAAM,SAAS,aAAa,IAAI,QAAQ;AACxC,QAAI,CAAC,QAAQ;AACX;AAAA,IACF;AACA,UAAM,CAAC,MAAM,MAAM,MAAM,IAAI,OAAO,MAAM,GAAG;AAE7C,OAAG;AAAA,MACD,MAAM;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,QACJ,QAAQ,OAAO,cAAc,GAAG,QAAQ,KAAK,IAAI,IAAI,EAAE,IAAI;AAAA,QAC3D;AAAA,QACA;AAAA,MAAA;AAAA,IACF,CACD;AACD,QAAI,UAAU,gBAAgB,WAAW;AACzC,QAAI,MAAM,qCAAoC;AAC9C,QAAI,IAAA;AACJ;AAAA,EACF;AACA,MAAI,CAAC,IAAI,KAAK,SAAS,OAAO,GAAG;AAC/B,WAAO,KAAA;AAAA,EACT;AAEA,QAAM,SAAqB,CAAA;AAC3B,MAAI,GAAG,QAAQ,CAAC,UAAU;AACxB,WAAO,KAAK,KAAK;AAAA,EACnB,CAAC;AACD,MAAI,GAAG,OAAO,MAAM;AAClB,UAAM,cAAc,OAAO,OAAO,MAAM;AACxC,QAAI;AACF,YAAM,aAAa,KAAK,MAAM,YAAY,UAAU;AACpD,SAAG,UAAU;AAAA,IACf,SAAS,GAAG;AAAA,IAAC;AACb,QAAI,MAAM,IAAI;AAAA,EAChB,CAAC;AACH;"}
+{"version":3,"file":"utils.js","sources":["../../src/utils.ts"],"sourcesContent":["import { normalizePath } from 'vite'\n// import fs from 'node:fs/promises'\nimport type { Connect } from 'vite'\nimport type { IncomingMessage, ServerResponse } from 'node:http'\n\nexport const handleDevToolsViteRequest = (\n  req: Connect.IncomingMessage,\n  res: ServerResponse<IncomingMessage>,\n  next: Connect.NextFunction,\n  cb: (data: any) => void,\n) => {\n  if (req.url?.includes('__tsd/open-source')) {\n    const searchParams = new URLSearchParams(req.url.split('?')[1])\n    const source = searchParams.get('source')\n    if (!source) {\n      return\n    }\n    const [file, line, column] = source.split(':')\n\n    cb({\n      type: 'open-source',\n      routine: 'open-source',\n      data: {\n        source: file ? normalizePath(`${process.cwd()}/${file}`) : undefined,\n        line,\n        column,\n      },\n    })\n    res.setHeader('Content-Type', 'text/html')\n    res.write(`<script> window.close(); </script>`)\n    res.end()\n    return\n  }\n  if (!req.url?.includes('__tsd')) {\n    return next()\n  }\n\n  const chunks: Array<any> = []\n  req.on('data', (chunk) => {\n    chunks.push(chunk)\n  })\n  req.on('end', () => {\n    const dataToParse = Buffer.concat(chunks)\n    try {\n      const parsedData = JSON.parse(dataToParse.toString())\n      cb(parsedData)\n    } catch (e) {}\n    res.write('OK')\n  })\n}\n\n/* export const tryReadFile = async (\n  filePath: string\n) => {\n  try {\n    const data = await fs.readFile(filePath, 'utf-8')\n    return data\n  } catch (error) {\n\n    return null\n  }\n}\n\nexport const tryParseJson = (jsonString: string) => {\n  try {\n    const result = JSON.parse(jsonString)\n    return result\n  } catch (error) {\n    return null\n  }\n} */\n"],"names":[],"mappings":";AAKO,MAAM,4BAA4B,CACvC,KACA,KACA,MACA,OACG;AACH,MAAI,IAAI,KAAK,SAAS,mBAAmB,GAAG;AAC1C,UAAM,eAAe,IAAI,gBAAgB,IAAI,IAAI,MAAM,GAAG,EAAE,CAAC,CAAC;AAC9D,UAAM,SAAS,aAAa,IAAI,QAAQ;AACxC,QAAI,CAAC,QAAQ;AACX;AAAA,IACF;AACA,UAAM,CAAC,MAAM,MAAM,MAAM,IAAI,OAAO,MAAM,GAAG;AAE7C,OAAG;AAAA,MACD,MAAM;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,QACJ,QAAQ,OAAO,cAAc,GAAG,QAAQ,KAAK,IAAI,IAAI,EAAE,IAAI;AAAA,QAC3D;AAAA,QACA;AAAA,MAAA;AAAA,IACF,CACD;AACD,QAAI,UAAU,gBAAgB,WAAW;AACzC,QAAI,MAAM,qCAAoC;AAC9C,QAAI,IAAA;AACJ;AAAA,EACF;AACA,MAAI,CAAC,IAAI,KAAK,SAAS,OAAO,GAAG;AAC/B,WAAO,KAAA;AAAA,EACT;AAEA,QAAM,SAAqB,CAAA;AAC3B,MAAI,GAAG,QAAQ,CAAC,UAAU;AACxB,WAAO,KAAK,KAAK;AAAA,EACnB,CAAC;AACD,MAAI,GAAG,OAAO,MAAM;AAClB,UAAM,cAAc,OAAO,OAAO,MAAM;AACxC,QAAI;AACF,YAAM,aAAa,KAAK,MAAM,YAAY,UAAU;AACpD,SAAG,UAAU;AAAA,IACf,SAAS,GAAG;AAAA,IAAC;AACb,QAAI,MAAM,IAAI;AAAA,EAChB,CAAC;AACH;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools-vite",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "description": "TanStack Vite plugin used to enhance the core devtools with additional functionalities",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -47,7 +47,7 @@
     "@babel/traverse": "^7.28.3",
     "@babel/types": "^7.28.2",
     "chalk": "^5.6.0",
-    "@tanstack/devtools-event-bus": "0.3.0"
+    "@tanstack/devtools-event-bus": "0.3.1"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",

package/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' &&

package/src/utils.ts

@@ -1,4 +1,5 @@
 import { normalizePath } from 'vite'
+// import fs from 'node:fs/promises'
 import type { Connect } from 'vite'
 import type { IncomingMessage, ServerResponse } from 'node:http'
 
@@ -47,3 +48,24 @@ export const handleDevToolsViteRequest = (
     res.write('OK')
   })
 }
+
+/* export const tryReadFile = async (
+  filePath: string
+) => {
+  try {
+    const data = await fs.readFile(filePath, 'utf-8')
+    return data
+  } catch (error) {
+
+    return null
+  }
+}
+
+export const tryParseJson = (jsonString: string) => {
+  try {
+    const result = JSON.parse(jsonString)
+    return result
+  } catch (error) {
+    return null
+  }
+} */