@sentry/babel-plugin-component-annotate - npm Package Compare versions

Comparing version 4.7.0 to 4.8.0

dist/types/experimental.d.ts

+/**
+ * MIT License
+ *
+ * Copyright (c) 2020 Engineering at FullStory
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ *
+ */
+/**
+ * The following code is based on the FullStory Babel plugin, but has been modified to work
+ * with Sentry products:
+ *
+ * - Added `sentry` to data properties, i.e `data-sentry-component`
+ * - Converted to TypeScript
+ * - Code cleanups
+ * - Highly modified to inject the data attributes into the root HTML elements of a component.
+ */
+import type * as Babel from "@babel/core";
+import type { PluginObj, PluginPass } from "@babel/core";
+interface AnnotationOpts {
+    native?: boolean;
+    ignoredComponents?: string[];
+}
+interface FragmentContext {
+    fragmentAliases: Set<string>;
+    reactNamespaceAliases: Set<string>;
+}
+interface AnnotationPluginPass extends PluginPass {
+    opts: AnnotationOpts;
+    sentryFragmentContext?: FragmentContext;
+}
+type AnnotationPlugin = PluginObj<AnnotationPluginPass>;
+export declare function experimentalComponentNameAnnotatePlugin({ types: t, }: typeof Babel): AnnotationPlugin;
+export {};

dist/cjs/index.js

@@ -147,2 +147,457 @@ 'use strict';
 
+/**
+ * MIT License
+ *
+ * Copyright (c) 2020 Engineering at FullStory
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ *
+ */
+
+/**
+ * The following code is based on the FullStory Babel plugin, but has been modified to work
+ * with Sentry products:
+ *
+ * - Added `sentry` to data properties, i.e `data-sentry-component`
+ * - Converted to TypeScript
+ * - Code cleanups
+ * - Highly modified to inject the data attributes into the root HTML elements of a component.
+ */
+
+var REACT_NATIVE_ELEMENTS = ["Image", "Text", "View", "ScrollView", "TextInput", "TouchableOpacity", "TouchableHighlight", "TouchableWithoutFeedback", "FlatList", "SectionList", "ActivityIndicator", "Button", "Switch", "Modal", "SafeAreaView", "StatusBar", "KeyboardAvoidingView", "RefreshControl", "Picker", "Slider"];
+
+// Shared context object for all JSX processing functions
+
+// We must export the plugin as default, otherwise the Babel loader will not be able to resolve it when configured using its string identifier
+function experimentalComponentNameAnnotatePlugin(_ref) {
+  var t = _ref.types;
+  return {
+    visitor: {
+      Program: {
+        enter: function enter(path, state) {
+          var fragmentContext = collectFragmentContext$1(path);
+          state.sentryFragmentContext = fragmentContext;
+        }
+      },
+      FunctionDeclaration: function FunctionDeclaration(path, state) {
+        if (!path.node.id || !path.node.id.name) {
+          return;
+        }
+        var context = createJSXProcessingContext$1(state, t, path.node.id.name);
+        functionBodyPushAttributes$1(context, path);
+      },
+      ArrowFunctionExpression: function ArrowFunctionExpression(path, state) {
+        // We're expecting a `VariableDeclarator` like `const MyComponent =`
+        var parent = path.parent;
+        if (!parent || !("id" in parent) || !parent.id || !("name" in parent.id) || !parent.id.name) {
+          return;
+        }
+        var context = createJSXProcessingContext$1(state, t, parent.id.name);
+        functionBodyPushAttributes$1(context, path);
+      },
+      ClassDeclaration: function ClassDeclaration(path, state) {
+        var _name$node;
+        var name = path.get("id");
+        var properties = path.get("body").get("body");
+        var render = properties.find(function (prop) {
+          return prop.isClassMethod() && prop.get("key").isIdentifier({
+            name: "render"
+          });
+        });
+        if (!render || !render.traverse) {
+          return;
+        }
+        var context = createJSXProcessingContext$1(state, t, ((_name$node = name.node) === null || _name$node === void 0 ? void 0 : _name$node.name) || "");
+        render.traverse({
+          ReturnStatement: function ReturnStatement(returnStatement) {
+            var arg = returnStatement.get("argument");
+            if (!arg.isJSXElement() && !arg.isJSXFragment()) {
+              return;
+            }
+            processJSX$1(context, arg);
+          }
+        });
+      }
+    }
+  };
+}
+
+/**
+ * Checks if an element name represents an HTML element (as opposed to a React component).
+ * HTML elements include standard lowercase HTML tags and React Native elements.
+ */
+function isHtmlElement(elementName) {
+  // Unknown elements are not HTML elements
+  if (elementName === UNKNOWN_ELEMENT_NAME$1) {
+    return false;
+  }
+
+  // Check for lowercase first letter (standard HTML elements)
+  if (elementName.length > 0 && elementName.charAt(0) === elementName.charAt(0).toLowerCase()) {
+    return true;
+  }
+
+  // React Native elements typically start with uppercase but are still "native" elements
+  // We consider them HTML-like elements for annotation purposes
+  if (REACT_NATIVE_ELEMENTS.includes(elementName)) {
+    return true;
+  }
+
+  // Otherwise, assume it's a React component (PascalCase)
+  return false;
+}
+
+/**
+ * Creates a JSX processing context from the plugin state
+ */
+function createJSXProcessingContext$1(state, t, componentName) {
+  var _state$opts$ignoredCo;
+  return {
+    t: t,
+    componentName: componentName,
+    attributeName: attributeNamesFromState$1(state),
+    ignoredComponents: (_state$opts$ignoredCo = state.opts.ignoredComponents) !== null && _state$opts$ignoredCo !== void 0 ? _state$opts$ignoredCo : [],
+    fragmentContext: state.sentryFragmentContext
+  };
+}
+
+/**
+ * Processes the body of a function to add Sentry tracking attributes to JSX elements.
+ * Handles various function body structures including direct JSX returns, conditional expressions,
+ * and nested JSX elements.
+ */
+function functionBodyPushAttributes$1(context, path) {
+  var jsxNode;
+  var functionBody = path.get("body").get("body");
+  if (!("length" in functionBody) && functionBody.parent && (functionBody.parent.type === "JSXElement" || functionBody.parent.type === "JSXFragment")) {
+    var maybeJsxNode = functionBody.find(function (c) {
+      return c.type === "JSXElement" || c.type === "JSXFragment";
+    });
+    if (!maybeJsxNode) {
+      return;
+    }
+    jsxNode = maybeJsxNode;
+  } else {
+    var returnStatement = functionBody.find(function (c) {
+      return c.type === "ReturnStatement";
+    });
+    if (!returnStatement) {
+      return;
+    }
+    var arg = returnStatement.get("argument");
+    if (!arg) {
+      return;
+    }
+    if (Array.isArray(arg)) {
+      return;
+    }
+
+    // Handle the case of a function body returning a ternary operation.
+    // `return (maybeTrue ? '' : (<SubComponent />))`
+    if (arg.isConditionalExpression()) {
+      var consequent = arg.get("consequent");
+      if (consequent.isJSXFragment() || consequent.isJSXElement()) {
+        processJSX$1(context, consequent);
+      }
+      var alternate = arg.get("alternate");
+      if (alternate.isJSXFragment() || alternate.isJSXElement()) {
+        processJSX$1(context, alternate);
+      }
+      return;
+    }
+    if (!arg.isJSXFragment() && !arg.isJSXElement()) {
+      return;
+    }
+    jsxNode = arg;
+  }
+  if (!jsxNode) {
+    return;
+  }
+  processJSX$1(context, jsxNode);
+}
+
+/**
+ * Recursively processes JSX elements to add Sentry tracking attributes.
+ * Handles both JSX elements and fragments, applying appropriate attributes
+ * based on configuration and component context.
+ */
+function processJSX$1(context, jsxNode) {
+  if (!jsxNode) {
+    return;
+  }
+
+  // NOTE: I don't know of a case where `openingElement` would have more than one item,
+  // but it's safer to always iterate
+  var paths = jsxNode.get("openingElement");
+  var openingElements = Array.isArray(paths) ? paths : [paths];
+  var hasInjectedAttributes = openingElements.reduce(function (prev, openingElement) {
+    return prev || applyAttributes$1(context, openingElement, context.componentName);
+  }, false);
+  if (hasInjectedAttributes) {
+    return;
+  }
+  var children = jsxNode.get("children");
+  // TODO: See why `Array.isArray` doesn't have correct behaviour here
+  if (children && !("length" in children)) {
+    // A single child was found, maybe a bit of static text
+    children = [children];
+  }
+  children.forEach(function (child) {
+    // Happens for some node types like plain text
+    if (!child.node) {
+      return;
+    }
+
+    // If the current element is a fragment, children are still considered at root level
+    // Otherwise, children are not at root level
+    var openingElement = child.get("openingElement");
+    // TODO: Improve this. We never expect to have multiple opening elements
+    // but if it's possible, this should work
+    if (Array.isArray(openingElement)) {
+      return;
+    }
+    processJSX$1(context, child);
+  });
+}
+
+/**
+ * Applies Sentry tracking attributes to a JSX opening element.
+ * Adds component name, element name, and source file attributes while
+ * respecting ignore lists and fragment detection.
+ */
+function applyAttributes$1(context, openingElement, componentName) {
+  var t = context.t,
+    componentAttributeName = context.attributeName,
+    ignoredComponents = context.ignoredComponents,
+    fragmentContext = context.fragmentContext;
+
+  // e.g., Raw JSX text like the `A` in `<h1>a</h1>`
+  if (!openingElement.node) {
+    return false;
+  }
+
+  // Check if this is a React fragment - if so, skip attribute addition entirely
+  var isFragment = isReactFragment$1(t, openingElement, fragmentContext);
+  if (isFragment) {
+    return false;
+  }
+  if (!openingElement.node.attributes) {
+    openingElement.node.attributes = [];
+  }
+  var elementName = getPathName$1(t, openingElement);
+  if (!isHtmlElement(elementName)) {
+    return false;
+  }
+  var isAnIgnoredComponent = ignoredComponents.some(function (ignoredComponent) {
+    return ignoredComponent === componentName || ignoredComponent === elementName;
+  });
+
+  // Add a stable attribute for the component name (only for root elements)
+  if (!isAnIgnoredComponent && !hasAttributeWithName$1(openingElement, componentAttributeName)) {
+    if (componentAttributeName) {
+      openingElement.node.attributes.push(t.jSXAttribute(t.jSXIdentifier(componentAttributeName), t.stringLiteral(componentName)));
+    }
+  }
+  return true;
+}
+function attributeNamesFromState$1(state) {
+  if (state.opts["native"]) {
+    return "dataSentryComponent";
+  }
+  return "data-sentry-component";
+}
+function collectFragmentContext$1(programPath) {
+  var fragmentAliases = new Set();
+  var reactNamespaceAliases = new Set(["React"]); // Default React namespace
+
+  programPath.traverse({
+    ImportDeclaration: function ImportDeclaration(importPath) {
+      var source = importPath.node.source.value;
+
+      // Handle React imports
+      if (source === "react" || source === "React") {
+        importPath.node.specifiers.forEach(function (spec) {
+          if (spec.type === "ImportSpecifier" && spec.imported.type === "Identifier") {
+            // Detect aliased React.Fragment imports (e.g., `Fragment as F`)
+            // so we can later identify <F> as a fragment in JSX.
+            if (spec.imported.name === "Fragment") {
+              fragmentAliases.add(spec.local.name);
+            }
+          } else if (spec.type === "ImportDefaultSpecifier" || spec.type === "ImportNamespaceSpecifier") {
+            // import React from 'react' -> React OR
+            // import * as React from 'react' -> React
+            reactNamespaceAliases.add(spec.local.name);
+          }
+        });
+      }
+    },
+    // Handle simple variable assignments only (avoid complex cases)
+    VariableDeclarator: function VariableDeclarator(varPath) {
+      if (varPath.node.init) {
+        var init = varPath.node.init;
+
+        // Handle identifier assignments: const MyFragment = Fragment
+        if (varPath.node.id.type === "Identifier") {
+          // Handle: const MyFragment = Fragment (only if Fragment is a known alias)
+          if (init.type === "Identifier" && fragmentAliases.has(init.name)) {
+            fragmentAliases.add(varPath.node.id.name);
+          }
+
+          // Handle: const MyFragment = React.Fragment (only for known React namespaces)
+          if (init.type === "MemberExpression" && init.object.type === "Identifier" && init.property.type === "Identifier" && init.property.name === "Fragment" && reactNamespaceAliases.has(init.object.name)) {
+            fragmentAliases.add(varPath.node.id.name);
+          }
+        }
+
+        // Handle destructuring assignments: const { Fragment } = React
+        if (varPath.node.id.type === "ObjectPattern") {
+          if (init.type === "Identifier" && reactNamespaceAliases.has(init.name)) {
+            var properties = varPath.node.id.properties;
+            var _iterator = _createForOfIteratorHelper(properties),
+              _step;
+            try {
+              for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                var prop = _step.value;
+                if (prop.type === "ObjectProperty" && prop.key && prop.key.type === "Identifier" && prop.value && prop.value.type === "Identifier" && prop.key.name === "Fragment") {
+                  fragmentAliases.add(prop.value.name);
+                }
+              }
+            } catch (err) {
+              _iterator.e(err);
+            } finally {
+              _iterator.f();
+            }
+          }
+        }
+      }
+    }
+  });
+  return {
+    fragmentAliases: fragmentAliases,
+    reactNamespaceAliases: reactNamespaceAliases
+  };
+}
+function isReactFragment$1(t, openingElement, context) {
+  // Handle JSX fragments (<>)
+  if (openingElement.isJSXFragment()) {
+    return true;
+  }
+  var elementName = getPathName$1(t, openingElement);
+
+  // Direct fragment references
+  if (elementName === "Fragment" || elementName === "React.Fragment") {
+    return true;
+  }
+
+  // TODO: All these objects are typed as unknown, maybe an oversight in Babel types?
+
+  // Check if the element name is a known fragment alias
+  if (context && elementName && context.fragmentAliases.has(elementName)) {
+    return true;
+  }
+
+  // Handle JSXMemberExpression
+  if (openingElement.node && "name" in openingElement.node && openingElement.node.name && _typeof(openingElement.node.name) === "object" && "type" in openingElement.node.name && openingElement.node.name.type === "JSXMemberExpression") {
+    var nodeName = openingElement.node.name;
+    if (_typeof(nodeName) !== "object" || !nodeName) {
+      return false;
+    }
+    if ("object" in nodeName && "property" in nodeName) {
+      var nodeNameObject = nodeName.object;
+      var nodeNameProperty = nodeName.property;
+      if (_typeof(nodeNameObject) !== "object" || _typeof(nodeNameProperty) !== "object") {
+        return false;
+      }
+      if (!nodeNameObject || !nodeNameProperty) {
+        return false;
+      }
+      var objectName = "name" in nodeNameObject && nodeNameObject.name;
+      var propertyName = "name" in nodeNameProperty && nodeNameProperty.name;
+
+      // React.Fragment check
+      if (objectName === "React" && propertyName === "Fragment") {
+        return true;
+      }
+
+      // Enhanced checks using context
+      if (context) {
+        // Check React.Fragment pattern with known React namespaces
+        if (context.reactNamespaceAliases.has(objectName) && propertyName === "Fragment") {
+          return true;
+        }
+
+        // Check MyFragment.Fragment pattern
+        if (context.fragmentAliases.has(objectName) && propertyName === "Fragment") {
+          return true;
+        }
+      }
+    }
+  }
+  return false;
+}
+function hasAttributeWithName$1(openingElement, name) {
+  if (!name) {
+    return false;
+  }
+  return openingElement.node.attributes.some(function (node) {
+    if (node.type === "JSXAttribute") {
+      return node.name.name === name;
+    }
+    return false;
+  });
+}
+function getPathName$1(t, path) {
+  if (!path.node) return UNKNOWN_ELEMENT_NAME$1;
+  if (!("name" in path.node)) {
+    return UNKNOWN_ELEMENT_NAME$1;
+  }
+  var name = path.node.name;
+  if (typeof name === "string") {
+    return name;
+  }
+  if (t.isIdentifier(name) || t.isJSXIdentifier(name)) {
+    return name.name;
+  }
+  if (t.isJSXNamespacedName(name)) {
+    return name.name.name;
+  }
+
+  // Handle JSX member expressions like Tab.Group
+  if (t.isJSXMemberExpression(name)) {
+    var objectName = getJSXMemberExpressionObjectName$1(t, name.object);
+    var propertyName = name.property.name;
+    return "".concat(objectName, ".").concat(propertyName);
+  }
+  return UNKNOWN_ELEMENT_NAME$1;
+}
+
+// Recursively handle nested member expressions (e.g. Components.UI.Header)
+function getJSXMemberExpressionObjectName$1(t, object) {
+  if (t.isJSXIdentifier(object)) {
+    return object.name;
+  }
+  if (t.isJSXMemberExpression(object)) {
+    var objectName = getJSXMemberExpressionObjectName$1(t, object.object);
+    return "".concat(objectName, ".").concat(object.property.name);
+  }
+  return UNKNOWN_ELEMENT_NAME$1;
+}
+var UNKNOWN_ELEMENT_NAME$1 = "unknown";
+
 var webComponentName = "data-sentry-component";
@@ -155,4 +610,2 @@ var webElementName = "data-sentry-element";
 
-// Shared context object for all JSX processing functions
-
 // We must export the plugin as default, otherwise the Babel loader will not be able to resolve it when configured using its string identifier
@@ -619,2 +1072,3 @@ function componentNameAnnotatePlugin(_ref) {
 exports["default"] = componentNameAnnotatePlugin;
+exports.experimentalComponentNameAnnotatePlugin = experimentalComponentNameAnnotatePlugin;
 //# sourceMappingURL=index.js.map

dist/esm/index.mjs

@@ -143,2 +143,457 @@ function _iterableToArrayLimit(arr, i) {
 
+/**
+ * MIT License
+ *
+ * Copyright (c) 2020 Engineering at FullStory
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ *
+ */
+
+/**
+ * The following code is based on the FullStory Babel plugin, but has been modified to work
+ * with Sentry products:
+ *
+ * - Added `sentry` to data properties, i.e `data-sentry-component`
+ * - Converted to TypeScript
+ * - Code cleanups
+ * - Highly modified to inject the data attributes into the root HTML elements of a component.
+ */
+
+var REACT_NATIVE_ELEMENTS = ["Image", "Text", "View", "ScrollView", "TextInput", "TouchableOpacity", "TouchableHighlight", "TouchableWithoutFeedback", "FlatList", "SectionList", "ActivityIndicator", "Button", "Switch", "Modal", "SafeAreaView", "StatusBar", "KeyboardAvoidingView", "RefreshControl", "Picker", "Slider"];
+
+// Shared context object for all JSX processing functions
+
+// We must export the plugin as default, otherwise the Babel loader will not be able to resolve it when configured using its string identifier
+function experimentalComponentNameAnnotatePlugin(_ref) {
+  var t = _ref.types;
+  return {
+    visitor: {
+      Program: {
+        enter: function enter(path, state) {
+          var fragmentContext = collectFragmentContext$1(path);
+          state.sentryFragmentContext = fragmentContext;
+        }
+      },
+      FunctionDeclaration: function FunctionDeclaration(path, state) {
+        if (!path.node.id || !path.node.id.name) {
+          return;
+        }
+        var context = createJSXProcessingContext$1(state, t, path.node.id.name);
+        functionBodyPushAttributes$1(context, path);
+      },
+      ArrowFunctionExpression: function ArrowFunctionExpression(path, state) {
+        // We're expecting a `VariableDeclarator` like `const MyComponent =`
+        var parent = path.parent;
+        if (!parent || !("id" in parent) || !parent.id || !("name" in parent.id) || !parent.id.name) {
+          return;
+        }
+        var context = createJSXProcessingContext$1(state, t, parent.id.name);
+        functionBodyPushAttributes$1(context, path);
+      },
+      ClassDeclaration: function ClassDeclaration(path, state) {
+        var _name$node;
+        var name = path.get("id");
+        var properties = path.get("body").get("body");
+        var render = properties.find(function (prop) {
+          return prop.isClassMethod() && prop.get("key").isIdentifier({
+            name: "render"
+          });
+        });
+        if (!render || !render.traverse) {
+          return;
+        }
+        var context = createJSXProcessingContext$1(state, t, ((_name$node = name.node) === null || _name$node === void 0 ? void 0 : _name$node.name) || "");
+        render.traverse({
+          ReturnStatement: function ReturnStatement(returnStatement) {
+            var arg = returnStatement.get("argument");
+            if (!arg.isJSXElement() && !arg.isJSXFragment()) {
+              return;
+            }
+            processJSX$1(context, arg);
+          }
+        });
+      }
+    }
+  };
+}
+
+/**
+ * Checks if an element name represents an HTML element (as opposed to a React component).
+ * HTML elements include standard lowercase HTML tags and React Native elements.
+ */
+function isHtmlElement(elementName) {
+  // Unknown elements are not HTML elements
+  if (elementName === UNKNOWN_ELEMENT_NAME$1) {
+    return false;
+  }
+
+  // Check for lowercase first letter (standard HTML elements)
+  if (elementName.length > 0 && elementName.charAt(0) === elementName.charAt(0).toLowerCase()) {
+    return true;
+  }
+
+  // React Native elements typically start with uppercase but are still "native" elements
+  // We consider them HTML-like elements for annotation purposes
+  if (REACT_NATIVE_ELEMENTS.includes(elementName)) {
+    return true;
+  }
+
+  // Otherwise, assume it's a React component (PascalCase)
+  return false;
+}
+
+/**
+ * Creates a JSX processing context from the plugin state
+ */
+function createJSXProcessingContext$1(state, t, componentName) {
+  var _state$opts$ignoredCo;
+  return {
+    t: t,
+    componentName: componentName,
+    attributeName: attributeNamesFromState$1(state),
+    ignoredComponents: (_state$opts$ignoredCo = state.opts.ignoredComponents) !== null && _state$opts$ignoredCo !== void 0 ? _state$opts$ignoredCo : [],
+    fragmentContext: state.sentryFragmentContext
+  };
+}
+
+/**
+ * Processes the body of a function to add Sentry tracking attributes to JSX elements.
+ * Handles various function body structures including direct JSX returns, conditional expressions,
+ * and nested JSX elements.
+ */
+function functionBodyPushAttributes$1(context, path) {
+  var jsxNode;
+  var functionBody = path.get("body").get("body");
+  if (!("length" in functionBody) && functionBody.parent && (functionBody.parent.type === "JSXElement" || functionBody.parent.type === "JSXFragment")) {
+    var maybeJsxNode = functionBody.find(function (c) {
+      return c.type === "JSXElement" || c.type === "JSXFragment";
+    });
+    if (!maybeJsxNode) {
+      return;
+    }
+    jsxNode = maybeJsxNode;
+  } else {
+    var returnStatement = functionBody.find(function (c) {
+      return c.type === "ReturnStatement";
+    });
+    if (!returnStatement) {
+      return;
+    }
+    var arg = returnStatement.get("argument");
+    if (!arg) {
+      return;
+    }
+    if (Array.isArray(arg)) {
+      return;
+    }
+
+    // Handle the case of a function body returning a ternary operation.
+    // `return (maybeTrue ? '' : (<SubComponent />))`
+    if (arg.isConditionalExpression()) {
+      var consequent = arg.get("consequent");
+      if (consequent.isJSXFragment() || consequent.isJSXElement()) {
+        processJSX$1(context, consequent);
+      }
+      var alternate = arg.get("alternate");
+      if (alternate.isJSXFragment() || alternate.isJSXElement()) {
+        processJSX$1(context, alternate);
+      }
+      return;
+    }
+    if (!arg.isJSXFragment() && !arg.isJSXElement()) {
+      return;
+    }
+    jsxNode = arg;
+  }
+  if (!jsxNode) {
+    return;
+  }
+  processJSX$1(context, jsxNode);
+}
+
+/**
+ * Recursively processes JSX elements to add Sentry tracking attributes.
+ * Handles both JSX elements and fragments, applying appropriate attributes
+ * based on configuration and component context.
+ */
+function processJSX$1(context, jsxNode) {
+  if (!jsxNode) {
+    return;
+  }
+
+  // NOTE: I don't know of a case where `openingElement` would have more than one item,
+  // but it's safer to always iterate
+  var paths = jsxNode.get("openingElement");
+  var openingElements = Array.isArray(paths) ? paths : [paths];
+  var hasInjectedAttributes = openingElements.reduce(function (prev, openingElement) {
+    return prev || applyAttributes$1(context, openingElement, context.componentName);
+  }, false);
+  if (hasInjectedAttributes) {
+    return;
+  }
+  var children = jsxNode.get("children");
+  // TODO: See why `Array.isArray` doesn't have correct behaviour here
+  if (children && !("length" in children)) {
+    // A single child was found, maybe a bit of static text
+    children = [children];
+  }
+  children.forEach(function (child) {
+    // Happens for some node types like plain text
+    if (!child.node) {
+      return;
+    }
+
+    // If the current element is a fragment, children are still considered at root level
+    // Otherwise, children are not at root level
+    var openingElement = child.get("openingElement");
+    // TODO: Improve this. We never expect to have multiple opening elements
+    // but if it's possible, this should work
+    if (Array.isArray(openingElement)) {
+      return;
+    }
+    processJSX$1(context, child);
+  });
+}
+
+/**
+ * Applies Sentry tracking attributes to a JSX opening element.
+ * Adds component name, element name, and source file attributes while
+ * respecting ignore lists and fragment detection.
+ */
+function applyAttributes$1(context, openingElement, componentName) {
+  var t = context.t,
+    componentAttributeName = context.attributeName,
+    ignoredComponents = context.ignoredComponents,
+    fragmentContext = context.fragmentContext;
+
+  // e.g., Raw JSX text like the `A` in `<h1>a</h1>`
+  if (!openingElement.node) {
+    return false;
+  }
+
+  // Check if this is a React fragment - if so, skip attribute addition entirely
+  var isFragment = isReactFragment$1(t, openingElement, fragmentContext);
+  if (isFragment) {
+    return false;
+  }
+  if (!openingElement.node.attributes) {
+    openingElement.node.attributes = [];
+  }
+  var elementName = getPathName$1(t, openingElement);
+  if (!isHtmlElement(elementName)) {
+    return false;
+  }
+  var isAnIgnoredComponent = ignoredComponents.some(function (ignoredComponent) {
+    return ignoredComponent === componentName || ignoredComponent === elementName;
+  });
+
+  // Add a stable attribute for the component name (only for root elements)
+  if (!isAnIgnoredComponent && !hasAttributeWithName$1(openingElement, componentAttributeName)) {
+    if (componentAttributeName) {
+      openingElement.node.attributes.push(t.jSXAttribute(t.jSXIdentifier(componentAttributeName), t.stringLiteral(componentName)));
+    }
+  }
+  return true;
+}
+function attributeNamesFromState$1(state) {
+  if (state.opts["native"]) {
+    return "dataSentryComponent";
+  }
+  return "data-sentry-component";
+}
+function collectFragmentContext$1(programPath) {
+  var fragmentAliases = new Set();
+  var reactNamespaceAliases = new Set(["React"]); // Default React namespace
+
+  programPath.traverse({
+    ImportDeclaration: function ImportDeclaration(importPath) {
+      var source = importPath.node.source.value;
+
+      // Handle React imports
+      if (source === "react" || source === "React") {
+        importPath.node.specifiers.forEach(function (spec) {
+          if (spec.type === "ImportSpecifier" && spec.imported.type === "Identifier") {
+            // Detect aliased React.Fragment imports (e.g., `Fragment as F`)
+            // so we can later identify <F> as a fragment in JSX.
+            if (spec.imported.name === "Fragment") {
+              fragmentAliases.add(spec.local.name);
+            }
+          } else if (spec.type === "ImportDefaultSpecifier" || spec.type === "ImportNamespaceSpecifier") {
+            // import React from 'react' -> React OR
+            // import * as React from 'react' -> React
+            reactNamespaceAliases.add(spec.local.name);
+          }
+        });
+      }
+    },
+    // Handle simple variable assignments only (avoid complex cases)
+    VariableDeclarator: function VariableDeclarator(varPath) {
+      if (varPath.node.init) {
+        var init = varPath.node.init;
+
+        // Handle identifier assignments: const MyFragment = Fragment
+        if (varPath.node.id.type === "Identifier") {
+          // Handle: const MyFragment = Fragment (only if Fragment is a known alias)
+          if (init.type === "Identifier" && fragmentAliases.has(init.name)) {
+            fragmentAliases.add(varPath.node.id.name);
+          }
+
+          // Handle: const MyFragment = React.Fragment (only for known React namespaces)
+          if (init.type === "MemberExpression" && init.object.type === "Identifier" && init.property.type === "Identifier" && init.property.name === "Fragment" && reactNamespaceAliases.has(init.object.name)) {
+            fragmentAliases.add(varPath.node.id.name);
+          }
+        }
+
+        // Handle destructuring assignments: const { Fragment } = React
+        if (varPath.node.id.type === "ObjectPattern") {
+          if (init.type === "Identifier" && reactNamespaceAliases.has(init.name)) {
+            var properties = varPath.node.id.properties;
+            var _iterator = _createForOfIteratorHelper(properties),
+              _step;
+            try {
+              for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                var prop = _step.value;
+                if (prop.type === "ObjectProperty" && prop.key && prop.key.type === "Identifier" && prop.value && prop.value.type === "Identifier" && prop.key.name === "Fragment") {
+                  fragmentAliases.add(prop.value.name);
+                }
+              }
+            } catch (err) {
+              _iterator.e(err);
+            } finally {
+              _iterator.f();
+            }
+          }
+        }
+      }
+    }
+  });
+  return {
+    fragmentAliases: fragmentAliases,
+    reactNamespaceAliases: reactNamespaceAliases
+  };
+}
+function isReactFragment$1(t, openingElement, context) {
+  // Handle JSX fragments (<>)
+  if (openingElement.isJSXFragment()) {
+    return true;
+  }
+  var elementName = getPathName$1(t, openingElement);
+
+  // Direct fragment references
+  if (elementName === "Fragment" || elementName === "React.Fragment") {
+    return true;
+  }
+
+  // TODO: All these objects are typed as unknown, maybe an oversight in Babel types?
+
+  // Check if the element name is a known fragment alias
+  if (context && elementName && context.fragmentAliases.has(elementName)) {
+    return true;
+  }
+
+  // Handle JSXMemberExpression
+  if (openingElement.node && "name" in openingElement.node && openingElement.node.name && _typeof(openingElement.node.name) === "object" && "type" in openingElement.node.name && openingElement.node.name.type === "JSXMemberExpression") {
+    var nodeName = openingElement.node.name;
+    if (_typeof(nodeName) !== "object" || !nodeName) {
+      return false;
+    }
+    if ("object" in nodeName && "property" in nodeName) {
+      var nodeNameObject = nodeName.object;
+      var nodeNameProperty = nodeName.property;
+      if (_typeof(nodeNameObject) !== "object" || _typeof(nodeNameProperty) !== "object") {
+        return false;
+      }
+      if (!nodeNameObject || !nodeNameProperty) {
+        return false;
+      }
+      var objectName = "name" in nodeNameObject && nodeNameObject.name;
+      var propertyName = "name" in nodeNameProperty && nodeNameProperty.name;
+
+      // React.Fragment check
+      if (objectName === "React" && propertyName === "Fragment") {
+        return true;
+      }
+
+      // Enhanced checks using context
+      if (context) {
+        // Check React.Fragment pattern with known React namespaces
+        if (context.reactNamespaceAliases.has(objectName) && propertyName === "Fragment") {
+          return true;
+        }
+
+        // Check MyFragment.Fragment pattern
+        if (context.fragmentAliases.has(objectName) && propertyName === "Fragment") {
+          return true;
+        }
+      }
+    }
+  }
+  return false;
+}
+function hasAttributeWithName$1(openingElement, name) {
+  if (!name) {
+    return false;
+  }
+  return openingElement.node.attributes.some(function (node) {
+    if (node.type === "JSXAttribute") {
+      return node.name.name === name;
+    }
+    return false;
+  });
+}
+function getPathName$1(t, path) {
+  if (!path.node) return UNKNOWN_ELEMENT_NAME$1;
+  if (!("name" in path.node)) {
+    return UNKNOWN_ELEMENT_NAME$1;
+  }
+  var name = path.node.name;
+  if (typeof name === "string") {
+    return name;
+  }
+  if (t.isIdentifier(name) || t.isJSXIdentifier(name)) {
+    return name.name;
+  }
+  if (t.isJSXNamespacedName(name)) {
+    return name.name.name;
+  }
+
+  // Handle JSX member expressions like Tab.Group
+  if (t.isJSXMemberExpression(name)) {
+    var objectName = getJSXMemberExpressionObjectName$1(t, name.object);
+    var propertyName = name.property.name;
+    return "".concat(objectName, ".").concat(propertyName);
+  }
+  return UNKNOWN_ELEMENT_NAME$1;
+}
+
+// Recursively handle nested member expressions (e.g. Components.UI.Header)
+function getJSXMemberExpressionObjectName$1(t, object) {
+  if (t.isJSXIdentifier(object)) {
+    return object.name;
+  }
+  if (t.isJSXMemberExpression(object)) {
+    var objectName = getJSXMemberExpressionObjectName$1(t, object.object);
+    return "".concat(objectName, ".").concat(object.property.name);
+  }
+  return UNKNOWN_ELEMENT_NAME$1;
+}
+var UNKNOWN_ELEMENT_NAME$1 = "unknown";
+
 var webComponentName = "data-sentry-component";
@@ -151,4 +606,2 @@ var webElementName = "data-sentry-element";
 
-// Shared context object for all JSX processing functions
-
 // We must export the plugin as default, otherwise the Babel loader will not be able to resolve it when configured using its string identifier
@@ -614,3 +1067,3 @@ function componentNameAnnotatePlugin(_ref) {
 
-export { componentNameAnnotatePlugin as default };
+export { componentNameAnnotatePlugin as default, experimentalComponentNameAnnotatePlugin };
 //# sourceMappingURL=index.mjs.map

dist/types/index.d.ts

@@ -49,3 +49,3 @@ /**
 type AnnotationPlugin = PluginObj<AnnotationPluginPass>;
+export { experimentalComponentNameAnnotatePlugin } from "./experimental";
 export default function componentNameAnnotatePlugin({ types: t }: typeof Babel): AnnotationPlugin;
-export {};

package.json

 {
   "name": "@sentry/babel-plugin-component-annotate",
-  "version": "4.7.0",
+  "version": "4.8.0",
   "description": "A Babel plugin that annotates frontend components with additional data to enrich the experience in Sentry",
@@ -59,4 +59,4 @@ "repository": "git://github.com/getsentry/sentry-javascript-bundler-plugins.git",
     "@rollup/plugin-node-resolve": "13.3.0",
-    "@sentry-internal/eslint-config": "4.7.0",
-    "@sentry-internal/sentry-bundler-plugin-tsconfig": "4.7.0",
+    "@sentry-internal/eslint-config": "4.8.0",
+    "@sentry-internal/sentry-bundler-plugin-tsconfig": "4.8.0",
     "@swc/core": "^1.2.205",
@@ -63,0 +63,0 @@ "@swc/jest": "^0.2.21",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

248601

69.88%

Number of package files

10

11.11%

Lines of code

2137

72.06%

Worsened metrics

Number of low supply chain risk alerts

11

120%

No dependency changes