Merge branch 'develop' into manual-develop-sync

# Conflicts:
#	packages/bundler-plugins/package.json

Author: chargome

dev-packages/bundler-plugin-integration-tests/fixtures/vite8/component-annotation-next.test.ts

@@ -34,13 +34,13 @@ test(import.meta.url, ({ runBundler, readOutputFiles }) => {
     		"data-sentry-component": "App",
     		children: [/* @__PURE__ */ jsxDEV(ComponentA, {}, void 0, false, {
     			fileName: _jsxFileName,
-    			lineNumber: 4,
+    			lineNumber: 6,
     			columnNumber: 7
     		}, this), ";"]
     	}, void 0, true, {
     		fileName: _jsxFileName,
-    		lineNumber: 3,
-    		columnNumber: 10
+    		lineNumber: 5,
+    		columnNumber: 5
     	}, this);
     }
     console.log(App());

packages/bundler-plugins/package.json

@@ -105,7 +105,6 @@
     }
   },
   "dependencies": {
-    "@babel/core": "^7.18.5",
     "@sentry/core": "11.0.0",
     "dotenv": "^17.4.2",
     "glob": "^13.0.6",
@@ -115,10 +114,14 @@
     "supports-color": "^8.1.1"
   },
   "peerDependencies": {
+    "@babel/core": "^7.18.5",
     "rollup": ">=3.2.0",
     "webpack": ">=5.1.0"
   },
   "peerDependenciesMeta": {
+    "@babel/core": {
+      "optional": true
+    },
     "rollup": {
       "optional": true
     },
@@ -127,6 +130,7 @@
     }
   },
   "devDependencies": {
+    "@babel/core": "^7.18.5",
     "@babel/preset-react": "^7.23.3",
     "@types/babel__core": "^7.20.5",
     "@types/node": "^18.6.3",

packages/bundler-plugins/src/core/component-annotation-oxc-ast.ts

@@ -59,13 +59,10 @@ export type ComponentAnnotationTransformMeta = {
   magicString?: MagicStringLike;
 };
 
-export type ComponentAnnotationTransformResult =
-  | {
-      code: string;
-      map?: SourceMap | string;
-    }
-  | null
-  | undefined;
+export type ComponentAnnotationTransformResult = {
+  code: string;
+  map?: SourceMap | string;
+} | null;
 
 export function isAstNode(value: unknown): value is AstNode {
   return isObjectLike(value) && typeof value.type === 'string';

packages/bundler-plugins/src/core/component-annotation-oxc-jsx.ts

@@ -16,6 +16,28 @@ import type {
 import { isAstNode, isObjectLike } from './component-annotation-oxc-ast';
 
 const UNKNOWN_ELEMENT_NAME = 'unknown';
+const REACT_NATIVE_ELEMENTS = new Set([
+  'Image',
+  'Text',
+  'View',
+  'ScrollView',
+  'TextInput',
+  'TouchableOpacity',
+  'TouchableHighlight',
+  'TouchableWithoutFeedback',
+  'FlatList',
+  'SectionList',
+  'ActivityIndicator',
+  'Button',
+  'Switch',
+  'Modal',
+  'SafeAreaView',
+  'StatusBar',
+  'KeyboardAvoidingView',
+  'RefreshControl',
+  'Picker',
+  'Slider',
+]);
 const WEB_ATTRIBUTE_NAMES = [WEB_ELEMENT_NAME, WEB_COMPONENT_NAME, WEB_SOURCE_FILE_NAME] as const;
 const WEB_ATTRIBUTE_NAME_SET = new Set<string>(WEB_ATTRIBUTE_NAMES);
 
@@ -140,20 +162,79 @@ export function addPendingAttributes(
     return;
   }
 
-  const insertion =
-    pendingInsertion ??
-    insertionsByOffset
-      .set(offset, {
-        offset,
-        attributeValues: new Map(),
-      })
-      .get(offset);
+  const insertion = getOrCreateInsertion(insertionsByOffset, offset);
 
   for (const [name, value] of attributes) {
-    insertion?.attributeValues.set(name, value);
+    insertion.attributeValues.set(name, value);
   }
 }
 
+/**
+ * Returns `true` when the element is an HTML element, because HTML mode only
+ * annotates the first HTML elements below a component root.
+ */
+export function addPendingHtmlAttribute(
+  code: string,
+  openingElement: JSXOpeningElementNode,
+  componentName: string,
+  ignoredComponents: string[],
+  fragmentContext: FragmentContext,
+  insertionsByOffset: Map<number, PendingInsertion>,
+): boolean {
+  if (isReactFragment(openingElement, fragmentContext)) {
+    return false;
+  }
+
+  const elementName = getJSXName(openingElement.name);
+
+  if (!isHtmlElement(elementName)) {
+    return false;
+  }
+
+  if (ignoredComponents.includes(componentName) || ignoredComponents.includes(elementName)) {
+    return true;
+  }
+
+  const offset = getInsertionOffset(code, openingElement);
+  if (offset === null) {
+    return true;
+  }
+
+  if (
+    getExistingAttributeNames(openingElement).has(WEB_COMPONENT_NAME) ||
+    insertionsByOffset.get(offset)?.attributeValues.has(WEB_COMPONENT_NAME)
+  ) {
+    return true;
+  }
+
+  getOrCreateInsertion(insertionsByOffset, offset).attributeValues.set(WEB_COMPONENT_NAME, componentName);
+
+  return true;
+}
+
+function isHtmlElement(elementName: string): boolean {
+  if (elementName === UNKNOWN_ELEMENT_NAME) {
+    return false;
+  }
+
+  if (elementName.charAt(0) === elementName.charAt(0).toLowerCase()) {
+    return true;
+  }
+
+  return REACT_NATIVE_ELEMENTS.has(elementName);
+}
+
+function getOrCreateInsertion(insertionsByOffset: Map<number, PendingInsertion>, offset: number): PendingInsertion {
+  let insertion = insertionsByOffset.get(offset);
+
+  if (!insertion) {
+    insertion = { offset, attributeValues: new Map() };
+    insertionsByOffset.set(offset, insertion);
+  }
+
+  return insertion;
+}
+
 export function toAttributeInsertions(insertionsByOffset: Map<number, PendingInsertion>): AttributeInsertion[] {
   return [...insertionsByOffset.values()].map(({ offset, attributeValues }) => ({
     offset,
@@ -181,7 +262,8 @@ function getOrderedAttributes(attributeValues: ReadonlyMap<string, string>): Com
 
   for (const name of WEB_ATTRIBUTE_NAMES) {
     const value = attributeValues.get(name);
-    if (value) {
+    // HTML mode writes an empty component name for anonymous classes.
+    if (value !== undefined) {
       attributes.push([name, value]);
     }
   }

packages/bundler-plugins/src/core/component-annotation-oxc-walk.ts

@@ -1,6 +1,7 @@
 import type { AstNode, AttributeInsertion, FragmentContext, JSXRootNode } from './component-annotation-oxc-ast';
 import {
   addPendingAttributes,
+  addPendingHtmlAttribute,
   getStringName,
   isJSXElement,
   isJSXRoot,
@@ -16,20 +17,54 @@ export function collectOxcComponentAnnotationInsertions(
   ast: AstNode,
   ignoredComponents: string[],
   sourceFileName: string,
+  injectIntoHtml: boolean,
 ): AttributeInsertion[] {
   const fragmentContext = collectFragmentContext(ast);
   const components = collectComponentJSXRoots(ast);
   const insertionsByOffset = new Map<number, { offset: number; attributeValues: Map<string, string> }>();
 
   for (const component of components) {
     for (const root of component.roots) {
-      processJSX(code, root, component.name, ignoredComponents, fragmentContext, sourceFileName, insertionsByOffset);
+      if (injectIntoHtml) {
+        processHtmlJSX(code, root, component.name, ignoredComponents, fragmentContext, insertionsByOffset);
+      } else {
+        processJSX(code, root, component.name, ignoredComponents, fragmentContext, sourceFileName, insertionsByOffset);
+      }
     }
   }
 
   return toAttributeInsertions(insertionsByOffset);
 }
 
+function processHtmlJSX(
+  code: string,
+  node: JSXRootNode,
+  componentName: string,
+  ignoredComponents: string[],
+  fragmentContext: FragmentContext,
+  insertionsByOffset: Map<number, { offset: number; attributeValues: Map<string, string> }>,
+): void {
+  if (
+    isJSXElement(node) &&
+    addPendingHtmlAttribute(
+      code,
+      node.openingElement,
+      componentName,
+      ignoredComponents,
+      fragmentContext,
+      insertionsByOffset,
+    )
+  ) {
+    return;
+  }
+
+  for (const child of node.children ?? []) {
+    if (isJSXRoot(child)) {
+      processHtmlJSX(code, child, componentName, ignoredComponents, fragmentContext, insertionsByOffset);
+    }
+  }
+}
+
 function getJSXRootsFromReturnArgument(argument: unknown): JSXRootNode[] {
   if (isJSXRoot(argument)) {
     return [argument];

packages/bundler-plugins/src/core/component-annotation-oxc.ts

@@ -43,7 +43,7 @@ export function getOxcParseAstAsync(): Promise<ParseAstAsync | null> {
   return oxcParseAstAsyncPromise;
 }
 
-// Keep this as a superset of JSX tag starts Babel can annotate, because a miss suppresses Babel fallback.
+// Keep this as a superset of all JSX tag starts, because a miss skips the file.
 const JSX_TAG_START_REGEXP = /<[$_\p{ID_Start}][$_\u200c\u200d\p{ID_Continue}.:-]*|<>/u;
 const JSX_FILE_REGEXP = /\.[jt]sx$/;
 
@@ -98,37 +98,26 @@ function getMagicString(
 
 async function annotateWithOxcParser(
   code: string,
-  id: string,
+  idWithoutQueryAndHash: string,
   ignoredComponents: string[],
   parseAstAsync: ParseAstAsync,
+  injectIntoHtml: boolean,
   meta?: ComponentAnnotationTransformMeta,
 ): Promise<ComponentAnnotationTransformResult> {
-  const idWithoutQueryAndHash = stripQueryAndHashFromPath(id);
-
-  if (
-    !idWithoutQueryAndHash ||
-    !isAnnotationFile(idWithoutQueryAndHash) ||
-    !shouldTryParse(code) ||
-    shouldSkipIncompatibleFile(idWithoutQueryAndHash)
-  ) {
-    return null;
-  }
-
   const ast = await parseAstAsync(code, {
     lang: idWithoutQueryAndHash.endsWith('.jsx') ? 'jsx' : 'tsx',
   });
 
-  // Fall through to the Babel fallback (return undefined, not null) when the parser yields an
-  // unexpected result, mirroring the catch path — null would suppress Babel and drop annotations.
   if (!isAstNode(ast)) {
-    return undefined;
+    return null;
   }
 
   const insertions = collectOxcComponentAnnotationInsertions(
     code,
     ast,
     ignoredComponents,
     path.basename(idWithoutQueryAndHash),
+    injectIntoHtml,
   );
 
   if (insertions.length === 0) {
@@ -147,8 +136,9 @@ async function annotateWithOxcParser(
 
   return {
     code: magicString.toString(),
+    // No `file`, because magic-string would then make `source` relative to it
+    // and drop the directory from `sources`.
     map: magicString.generateMap?.({
-      file: id,
       source: idWithoutQueryAndHash,
       includeContent: true,
       hires: true,
@@ -159,6 +149,7 @@ async function annotateWithOxcParser(
 export function createOxcComponentNameAnnotateHooks(
   ignoredComponents: string[],
   getParseAstAsync: () => Promise<ParseAstAsync | null>,
+  injectIntoHtml = false,
 ): {
   transform(
     code: string,
@@ -168,16 +159,35 @@ export function createOxcComponentNameAnnotateHooks(
 } {
   return {
     async transform(code, id, meta) {
+      const idWithoutQueryAndHash = stripQueryAndHashFromPath(id);
+
+      if (
+        !idWithoutQueryAndHash ||
+        !isAnnotationFile(idWithoutQueryAndHash) ||
+        !shouldTryParse(code) ||
+        shouldSkipIncompatibleFile(idWithoutQueryAndHash)
+      ) {
+        return null;
+      }
+
       try {
         const parseAstAsync = await getParseAstAsync();
 
         if (!parseAstAsync) {
-          return undefined;
+          return null;
         }
 
-        return await annotateWithOxcParser(code, id, ignoredComponents, parseAstAsync, meta);
+        return await annotateWithOxcParser(
+          code,
+          idWithoutQueryAndHash,
+          ignoredComponents,
+          parseAstAsync,
+          injectIntoHtml,
+          meta,
+        );
       } catch {
-        return undefined;
+        // Leave files the parser cannot read unchanged. The bundler reports the syntax error.
+        return null;
       }
     },
   };