Skip to content

feat(react-component-annotate): Allow skipping annotations on specified components #617

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 13 commits into from
Jan 8, 2025
Merged

feat(react-component-annotate): Allow skipping annotations on specified components #617

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
06b41bd
Create options for skipping annotations on components
0Calories Jul 10, 2024
911cd63
skip annotation on files that are in `ignoredFiles`
0Calories Jul 10, 2024
213cb8c
wire up options to allow bundler plugins to skip certain files for re…
0Calories Oct 8, 2024
5374baa
remove support for ignoreFiles for now but add support for ignoreComp…
0Calories Oct 8, 2024
3a65227
update documentation
0Calories Oct 8, 2024
90fbd8a
fix a test and remove some unnecessary tests
0Calories Jan 6, 2025
8636c67
remove more redundant tests
0Calories Jan 6, 2025
0e8c329
remove remaining redundant tests
0Calories Jan 6, 2025
2ac8f9e
resolve merge conflict
0Calories Jan 6, 2025
1859fb8
fix grammar in comments and docs
0Calories Jan 6, 2025
8c5de5e
fix lint
0Calories Jan 6, 2025
15444f5
renamed `ignoreComponents` to `ignoredComponents`
0Calories Jan 8, 2025
e9042a5
remove todo comments
0Calories Jan 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion packages/babel-plugin-component-annotate/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,14 @@ Using pnpm:
pnpm add @sentry/babel-plugin-component-annotate --save-dev
```

## Options

### `ignoreComponents`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Super nit but I think my logic is sound: I think I would probably call it ignore*d*Components. ignoreComponents sounds like imperative and that it would accept a boolean rather than a list of components.


Type: `string[]`

A list of strings representing the names of components to ignore. The plugin will not apply `data-sentry` annotations on the DOM element for these components.

## Example

```js
Expand All @@ -57,7 +65,8 @@ pnpm add @sentry/babel-plugin-component-annotate --save-dev

plugins: [
// Put this plugin before any other plugins you have that transform JSX code
['@sentry/babel-plugin-component-annotate']
// The options are set by providing an object as the second element in the array, but not required
['@sentry/babel-plugin-component-annotate', {ignoreComponents: ['Foo', 'Bar']}]
],
}
```
Expand Down
19 changes: 5 additions & 14 deletions packages/babel-plugin-component-annotate/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,15 +48,13 @@ const nativeSourceFileName = "dataSentrySourceFile";
interface AnnotationOpts {
native?: boolean;
"annotate-fragments"?: boolean;
ignoreComponents?: IgnoredComponent[];
ignoreComponents?: string[];
}

interface AnnotationPluginPass extends PluginPass {
opts: AnnotationOpts;
}

type IgnoredComponent = [file: string, component: string, element: string];

type AnnotationPlugin = PluginObj<AnnotationPluginPass>;

// We must export the plugin as default, otherwise the Babel loader will not be able to resolve it when configured using its string identifier
Expand Down Expand Up @@ -153,7 +151,7 @@ function functionBodyPushAttributes(
componentName: string,
sourceFileName: string | undefined,
attributeNames: string[],
ignoredComponents: IgnoredComponent[]
ignoredComponents: string[]
) {
let jsxNode: Babel.NodePath;

Expand Down Expand Up @@ -249,7 +247,7 @@ function processJSX(
componentName: string | null,
sourceFileName: string | undefined,
attributeNames: string[],
ignoredComponents: IgnoredComponent[]
ignoredComponents: string[]
) {
if (!jsxNode) {
return;
Expand Down Expand Up @@ -324,7 +322,7 @@ function applyAttributes(
componentName: string | null,
sourceFileName: string | undefined,
attributeNames: string[],
ignoredComponents: IgnoredComponent[]
ignoredComponents: string[]
) {
const [componentAttributeName, elementAttributeName, sourceFileAttributeName] = attributeNames;

Expand All @@ -340,10 +338,7 @@ function applyAttributes(
const elementName = getPathName(t, openingElement);

const isAnIgnoredComponent = ignoredComponents.some(
(ignoredComponent) =>
matchesIgnoreRule(ignoredComponent[0], sourceFileName) &&
matchesIgnoreRule(ignoredComponent[1], componentName) &&
matchesIgnoreRule(ignoredComponent[2], elementName)
(ignoredComponent) => ignoredComponent === componentName || ignoredComponent === elementName
);

// Add a stable attribute for the element name but only for non-DOM names
Expand Down Expand Up @@ -501,10 +496,6 @@ function isReactFragment(t: typeof Babel.types, openingElement: Babel.NodePath):
return false;
}

function matchesIgnoreRule(rule: string, name: string | undefined | null) {
return rule === "*" || rule === name;
}

function hasAttributeWithName(
openingElement: Babel.NodePath<Babel.types.JSXOpeningElement>,
name: string | undefined | null
Expand Down
Loading
Loading