Skip to content

perf(vite): add fast component annotation transform #944

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

Open
TheAlexLichter wants to merge 1 commit into
base: main
Choose a base branch
from
+1,473 −95
Open

perf(vite): add fast component annotation transform #944

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
65 changes: 65 additions & 0 deletions packages/bundler-plugins/src/babel-plugin/component-annotation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import { DEFAULT_IGNORED_ELEMENTS } from "./constants";

export const WEB_COMPONENT_NAME = "data-sentry-component";
export const WEB_ELEMENT_NAME = "data-sentry-element";
export const WEB_SOURCE_FILE_NAME = "data-sentry-source-file";

export const NATIVE_COMPONENT_NAME = "dataSentryComponent";
export const NATIVE_ELEMENT_NAME = "dataSentryElement";
export const NATIVE_SOURCE_FILE_NAME = "dataSentrySourceFile";

export type ComponentAnnotationAttributeNames = readonly [string, string, string];

export type ComponentAnnotationAttribute = [string, string];

type ComponentAnnotationAttributesInput = {
attributeNames: ComponentAnnotationAttributeNames;
componentName: string;
elementName: string;
existingAttributes: ReadonlySet<string>;
ignoredComponents: readonly string[];
isFragment: boolean;
sourceFileName?: string;
};

const DEFAULT_IGNORED_ELEMENTS_SET = new Set(DEFAULT_IGNORED_ELEMENTS);

export function getComponentAnnotationAttributes({
attributeNames,
componentName,
elementName,
existingAttributes,
ignoredComponents,
isFragment,
sourceFileName,
}: ComponentAnnotationAttributesInput): ComponentAnnotationAttribute[] {
if (
isFragment ||
ignoredComponents.includes(componentName) ||
ignoredComponents.includes(elementName)
) {
return [];
}

const [componentAttributeName, elementAttributeName, sourceFileAttributeName] = attributeNames;
const isIgnoredElement = DEFAULT_IGNORED_ELEMENTS_SET.has(elementName);
const attributes: ComponentAnnotationAttribute[] = [];

if (!isIgnoredElement && !existingAttributes.has(elementAttributeName)) {
attributes.push([elementAttributeName, elementName]);
}

if (componentName && !existingAttributes.has(componentAttributeName)) {
attributes.push([componentAttributeName, componentName]);
}

if (
sourceFileName &&
(componentName || !isIgnoredElement) &&
!existingAttributes.has(sourceFileAttributeName)
) {
attributes.push([sourceFileAttributeName, sourceFileName]);
}

return attributes;
}
115 changes: 36 additions & 79 deletions packages/bundler-plugins/src/babel-plugin/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,15 +36,17 @@
import type * as Babel from "@babel/core";
import type { PluginObj, PluginPass } from "@babel/core";

import { DEFAULT_IGNORED_ELEMENTS, KNOWN_INCOMPATIBLE_PLUGINS } from "./constants";

const webComponentName = "data-sentry-component";
const webElementName = "data-sentry-element";
const webSourceFileName = "data-sentry-source-file";

const nativeComponentName = "dataSentryComponent";
const nativeElementName = "dataSentryElement";
const nativeSourceFileName = "dataSentrySourceFile";
import {
getComponentAnnotationAttributes,
NATIVE_COMPONENT_NAME,
NATIVE_ELEMENT_NAME,
NATIVE_SOURCE_FILE_NAME,
WEB_COMPONENT_NAME,
WEB_ELEMENT_NAME,
WEB_SOURCE_FILE_NAME,
type ComponentAnnotationAttributeNames,
} from "./component-annotation";
import { KNOWN_INCOMPATIBLE_PLUGINS } from "./constants";

const SENTRY_LABEL_ATTRIBUTE = "sentry-label";
const MAX_LABEL_LENGTH = 64;
Expand Down Expand Up @@ -86,7 +88,7 @@ interface JSXProcessingContext {
/** Source file name (optional) */
sourceFileName?: string;
/** Array of attribute names [component, element, sourceFile] */
attributeNames: string[];
attributeNames: ComponentAnnotationAttributeNames;
/** Array of component names to ignore */
ignoredComponents: string[];
/** Fragment context for identifying React fragments */
Expand Down Expand Up @@ -344,69 +346,27 @@ function applyAttributes(
componentName: string
): void {
const { t, attributeNames, ignoredComponents, fragmentContext, sourceFileName } = context;
const [componentAttributeName, elementAttributeName, sourceFileAttributeName] = attributeNames;

// e.g., Raw JSX text like the `A` in `<h1>a</h1>`
if (!openingElement.node) {
return;
}

// Check if this is a React fragment - if so, skip attribute addition entirely
const isFragment = isReactFragment(t, openingElement, fragmentContext);
if (isFragment) {
return;
}

if (!openingElement.node.attributes) openingElement.node.attributes = [];
const elementName = getPathName(t, openingElement);

const isAnIgnoredComponent = ignoredComponents.some(
(ignoredComponent) => ignoredComponent === componentName || ignoredComponent === elementName
);

// Add a stable attribute for the element name but only for non-DOM names
let isAnIgnoredElement = false;
if (!isAnIgnoredComponent && !hasAttributeWithName(openingElement, elementAttributeName)) {
if (DEFAULT_IGNORED_ELEMENTS.includes(elementName)) {
isAnIgnoredElement = true;
} else {
// Always add element attribute for non-ignored elements
if (elementAttributeName) {
openingElement.node.attributes.push(
t.jSXAttribute(t.jSXIdentifier(elementAttributeName), t.stringLiteral(elementName))
);
}
}
}

// Add a stable attribute for the component name (absent for non-root elements)
if (
componentName &&
!isAnIgnoredComponent &&
!hasAttributeWithName(openingElement, componentAttributeName)
) {
if (componentAttributeName) {
openingElement.node.attributes.push(
t.jSXAttribute(t.jSXIdentifier(componentAttributeName), t.stringLiteral(componentName))
);
}
}

// Add a stable attribute for the source file name
// Updated condition: add source file for elements that have either:
// 1. A component name (root elements), OR
// 2. An element name that's not ignored (child elements)
if (
sourceFileName &&
!isAnIgnoredComponent &&
(componentName || !isAnIgnoredElement) &&
!hasAttributeWithName(openingElement, sourceFileAttributeName)
) {
if (sourceFileAttributeName) {
openingElement.node.attributes.push(
t.jSXAttribute(t.jSXIdentifier(sourceFileAttributeName), t.stringLiteral(sourceFileName))
);
}
for (const [name, value] of getComponentAnnotationAttributes({
attributeNames,
componentName,
elementName,
existingAttributes: getExistingAttributeNames(openingElement),
ignoredComponents,
isFragment: isReactFragment(t, openingElement, fragmentContext),
sourceFileName,
})) {
openingElement.node.attributes.push(
t.jSXAttribute(t.jSXIdentifier(name), t.stringLiteral(value))
);
}
}

Expand Down Expand Up @@ -455,12 +415,12 @@ function isKnownIncompatiblePluginFromState(state: AnnotationPluginPass): boolea
});
}

function attributeNamesFromState(state: AnnotationPluginPass): [string, string, string] {
function attributeNamesFromState(state: AnnotationPluginPass): ComponentAnnotationAttributeNames {
if (state.opts.native) {
return [nativeComponentName, nativeElementName, nativeSourceFileName];
return [NATIVE_COMPONENT_NAME, NATIVE_ELEMENT_NAME, NATIVE_SOURCE_FILE_NAME];
}

return [webComponentName, webElementName, webSourceFileName];
return [WEB_COMPONENT_NAME, WEB_ELEMENT_NAME, WEB_SOURCE_FILE_NAME];
}

function collectFragmentContext(programPath: Babel.NodePath): FragmentContext {
Expand Down Expand Up @@ -619,21 +579,18 @@ function isReactFragment(
return false;
}

function hasAttributeWithName(
openingElement: Babel.NodePath<Babel.types.JSXOpeningElement>,
name: string | undefined | null
): boolean {
if (!name) {
return false;
}
function getExistingAttributeNames(
openingElement: Babel.NodePath<Babel.types.JSXOpeningElement>
): Set<string> {
const names = new Set<string>();

return openingElement.node.attributes.some((node) => {
if (node.type === "JSXAttribute") {
return node.name.name === name;
openingElement.node.attributes.forEach((node) => {
if (node.type === "JSXAttribute" && typeof node.name.name === "string") {
names.add(node.name.name);
}

return false;
});

return names;
}

function getPathName(t: typeof Babel.types, path: Babel.NodePath): string {
Expand Down
91 changes: 91 additions & 0 deletions packages/bundler-plugins/src/core/component-annotation-vite-ast.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import type { SourceMap } from "magic-string";

import type { ComponentAnnotationAttribute } from "../babel-plugin/component-annotation";

export type AstNode = {
type: string;
start?: number;
end?: number;
[key: string]: unknown;
};

export type JSXElementNode = AstNode & {
type: "JSXElement";
openingElement: JSXOpeningElementNode;
children?: AstNode[];
};

export type JSXFragmentNode = AstNode & {
type: "JSXFragment";
children?: AstNode[];
};

export type JSXRootNode = JSXElementNode | JSXFragmentNode;

export type JSXOpeningElementNode = AstNode & {
type: "JSXOpeningElement";
name: AstNode;
attributes?: AstNode[];
selfClosing?: boolean;
};

export type FragmentContext = {
fragmentAliases: Set<string>;
reactNamespaceAliases: Set<string>;
};

export type AttributeInsertion = {
offset: number;
attributes: ComponentAnnotationAttribute[];
};

export type ParseAstAsync = (code: string, options: { lang: "jsx" | "tsx" }) => Promise<unknown>;

export type MagicStringLike = {
appendLeft(offset: number, content: string): void;
toString(): string;
generateMap?(options: {
file?: string;
source?: string;
includeContent?: boolean;
hires?: boolean | "boundary";
}): SourceMap | string;
};

export type ComponentAnnotationTransformMeta = {
magicString?: MagicStringLike;
};

export type ComponentAnnotationTransformResult =
| {
code: string;
map?: SourceMap | string;
}
| null
| undefined;

export function isObject(value: unknown): value is Record<string, unknown> {
return typeof value === "object" && value !== null;
}

export function isAstNode(value: unknown): value is AstNode {
return isObject(value) && typeof value.type === "string";
}

export function walkAst(node: unknown, visit: (node: AstNode) => void): void {
if (!isAstNode(node)) {
return;
}

visit(node);

for (const value of Object.values(node)) {
if (Array.isArray(value)) {
for (const child of value) {
walkAst(child, visit);
}
} else if (isAstNode(value)) {
walkAst(value, visit);
}
}
}
Loading
Loading