From 353a0e051744cedcb3d0e8a227c73844e72470c7 Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Wed, 26 Feb 2025 08:47:03 +0100 Subject: [PATCH 1/2] feat: Ignore `Fragment` components by default for react component annotation --- packages/bundler-plugin-core/src/index.ts | 2 +- .../bundler-plugin-core/src/options-mapping.ts | 14 +++++++++++++- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/bundler-plugin-core/src/index.ts b/packages/bundler-plugin-core/src/index.ts index fc28d1c1..0065cb36 100644 --- a/packages/bundler-plugin-core/src/index.ts +++ b/packages/bundler-plugin-core/src/index.ts @@ -438,7 +438,7 @@ export function sentryUnpluginFactory({ if (options.reactComponentAnnotation) { if (!options.reactComponentAnnotation.enabled) { logger.debug( - "The component name annotate plugin is currently disabled. Skipping component name annotations." + "The component name annotate plugin is disabled. Skipping component name annotations." ); } else if (options.reactComponentAnnotation.enabled && !componentNameAnnotatePlugin) { logger.warn( diff --git a/packages/bundler-plugin-core/src/options-mapping.ts b/packages/bundler-plugin-core/src/options-mapping.ts index ba12d3e5..de456286 100644 --- a/packages/bundler-plugin-core/src/options-mapping.ts +++ b/packages/bundler-plugin-core/src/options-mapping.ts @@ -6,6 +6,8 @@ export type NormalizedOptions = ReturnType; export const SENTRY_SAAS_URL = "https://sentry.io"; +const DEFAULT_IGNORED_REACT_COMPONENTS = ["Fragment"]; + export function normalizeUserOptions(userOptions: UserOptions) { const options = { org: userOptions.org ?? process.env["SENTRY_ORG"], @@ -28,7 +30,17 @@ export function normalizeUserOptions(userOptions: UserOptions) { vcsRemote: userOptions.release?.vcsRemote ?? process.env["SENTRY_VSC_REMOTE"] ?? "origin", }, bundleSizeOptimizations: userOptions.bundleSizeOptimizations, - reactComponentAnnotation: userOptions.reactComponentAnnotation, + reactComponentAnnotation: userOptions.reactComponentAnnotation + ? { + enabled: userOptions.reactComponentAnnotation?.enabled ?? false, + ignoredComponents: [ + ...new Set([ + ...(userOptions.reactComponentAnnotation?.ignoredComponents ?? []), + ...DEFAULT_IGNORED_REACT_COMPONENTS, + ]), + ], + } + : undefined, _metaOptions: { telemetry: { metaFramework: userOptions._metaOptions?.telemetry?.metaFramework, From 13a67c6dc156f14ba38873ba4166e348a8124df9 Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Thu, 27 Feb 2025 12:01:25 +0100 Subject: [PATCH 2/2] move into babel plugin --- .../src/index.ts | 27 ++++++++++++++++--- .../src/tsconfig.json | 3 ++- .../src/options-mapping.ts | 14 +--------- 3 files changed, 27 insertions(+), 17 deletions(-) diff --git a/packages/babel-plugin-component-annotate/src/index.ts b/packages/babel-plugin-component-annotate/src/index.ts index 0cd087d9..27d5b91f 100644 --- a/packages/babel-plugin-component-annotate/src/index.ts +++ b/packages/babel-plugin-component-annotate/src/index.ts @@ -57,6 +57,8 @@ interface AnnotationPluginPass extends PluginPass { type AnnotationPlugin = PluginObj; +const DEFAULT_IGNORED_REACT_COMPONENTS = ["Fragment"]; + // We must export the plugin as default, otherwise the Babel loader will not be able to resolve it when configured using its string identifier export default function componentNameAnnotatePlugin({ types: t }: typeof Babel): AnnotationPlugin { return { @@ -69,6 +71,13 @@ export default function componentNameAnnotatePlugin({ types: t }: typeof Babel): return; } + const ignoredComponents = [ + ...new Set([ + ...(state.opts.ignoredComponents ?? []), + ...DEFAULT_IGNORED_REACT_COMPONENTS, + ]), + ]; + functionBodyPushAttributes( state.opts["annotate-fragments"] === true, t, @@ -76,7 +85,7 @@ export default function componentNameAnnotatePlugin({ types: t }: typeof Babel): path.node.id.name, sourceFileNameFromState(state), attributeNamesFromState(state), - state.opts.ignoredComponents ?? [] + ignoredComponents ); }, ArrowFunctionExpression(path, state) { @@ -97,6 +106,13 @@ export default function componentNameAnnotatePlugin({ types: t }: typeof Babel): return; } + const ignoredComponents = [ + ...new Set([ + ...(state.opts.ignoredComponents ?? []), + ...DEFAULT_IGNORED_REACT_COMPONENTS, + ]), + ]; + functionBodyPushAttributes( state.opts["annotate-fragments"] === true, t, @@ -104,7 +120,7 @@ export default function componentNameAnnotatePlugin({ types: t }: typeof Babel): parent.id.name, sourceFileNameFromState(state), attributeNamesFromState(state), - state.opts.ignoredComponents ?? [] + ignoredComponents ); }, ClassDeclaration(path, state) { @@ -118,7 +134,12 @@ export default function componentNameAnnotatePlugin({ types: t }: typeof Babel): return; } - const ignoredComponents = state.opts.ignoredComponents ?? []; + const ignoredComponents = [ + ...new Set([ + ...(state.opts.ignoredComponents ?? []), + ...DEFAULT_IGNORED_REACT_COMPONENTS, + ]), + ]; render.traverse({ ReturnStatement(returnStatement) { diff --git a/packages/babel-plugin-component-annotate/src/tsconfig.json b/packages/babel-plugin-component-annotate/src/tsconfig.json index fd37e123..1933b4cb 100644 --- a/packages/babel-plugin-component-annotate/src/tsconfig.json +++ b/packages/babel-plugin-component-annotate/src/tsconfig.json @@ -3,6 +3,7 @@ "extends": "@sentry-internal/sentry-bundler-plugin-tsconfig/base-config.json", "include": ["./**/*", "../package.json"], "compilerOptions": { - "esModuleInterop": true + "esModuleInterop": true, + "target": "ES2020" // es2020 needed for "new Set()" } } diff --git a/packages/bundler-plugin-core/src/options-mapping.ts b/packages/bundler-plugin-core/src/options-mapping.ts index de456286..ba12d3e5 100644 --- a/packages/bundler-plugin-core/src/options-mapping.ts +++ b/packages/bundler-plugin-core/src/options-mapping.ts @@ -6,8 +6,6 @@ export type NormalizedOptions = ReturnType; export const SENTRY_SAAS_URL = "https://sentry.io"; -const DEFAULT_IGNORED_REACT_COMPONENTS = ["Fragment"]; - export function normalizeUserOptions(userOptions: UserOptions) { const options = { org: userOptions.org ?? process.env["SENTRY_ORG"], @@ -30,17 +28,7 @@ export function normalizeUserOptions(userOptions: UserOptions) { vcsRemote: userOptions.release?.vcsRemote ?? process.env["SENTRY_VSC_REMOTE"] ?? "origin", }, bundleSizeOptimizations: userOptions.bundleSizeOptimizations, - reactComponentAnnotation: userOptions.reactComponentAnnotation - ? { - enabled: userOptions.reactComponentAnnotation?.enabled ?? false, - ignoredComponents: [ - ...new Set([ - ...(userOptions.reactComponentAnnotation?.ignoredComponents ?? []), - ...DEFAULT_IGNORED_REACT_COMPONENTS, - ]), - ], - } - : undefined, + reactComponentAnnotation: userOptions.reactComponentAnnotation, _metaOptions: { telemetry: { metaFramework: userOptions._metaOptions?.telemetry?.metaFramework,