Merge pull request #957 from DataDog/carlosnogueira/RUM-11283/improve-babel-support-text-inputs

[RUM-11283] Improve Babel Plugin support for TextInput component

Author: cdn34dd

packages/react-native-babel-plugin/package.json

@@ -39,14 +39,14 @@
     },
     "dependencies": {
         "@babel/core": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1"
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/types": "^7.27.1"
     },
     "devDependencies": {
         "@babel/cli": "^7.27.2",
         "@babel/preset-env": "^7.27.2",
         "@babel/preset-react": "^7.27.1",
         "@babel/preset-typescript": "^7.27.1",
-        "@babel/types": "^7.27.1",
         "@swc/core": "^1.11.31",
         "@swc/jest": "^0.2.38",
         "@types/jest": "^29.5.14",

packages/react-native-babel-plugin/src/actions/rum/index.ts

@@ -5,8 +5,19 @@
  */
 
 import type * as Babel from '@babel/core';
+import {
+    arrowFunctionExpression,
+    blockStatement,
+    jsxAttribute,
+    jsxExpressionContainer,
+    jsxIdentifier
+} from '@babel/types';
 
-import { RumActionConstants, rumComponentAttributes } from '../../constants';
+import {
+    RumActionConstants,
+    rumComponentAttributes,
+    tapElementsRequiredAttributesMap
+} from '../../constants';
 import type {
     PluginPassState,
     PluginOptions,
@@ -39,23 +50,62 @@ export function handleJSXElementActionPaths(
     state: PluginPassState,
     options: PluginOptions
 ) {
-    const { actionPathList, ddValues } = getJSXElementActionPaths(
-        componentName,
-        t,
+    const {
+        actionPathList,
+        actionPathNames,
+        ddValues
+    } = getJSXElementActionPaths(componentName, t, path, state, options);
+
+    ensureMandatoryAttributes(
         path,
-        state,
-        options
+        componentName,
+        actionPathList,
+        actionPathNames
     );
 
     for (const attrPath of actionPathList) {
         attrPath.node.extra = {
             ...attrPath.node.extra,
             ddValues
         };
+
         handleRumActions(t, attrPath, state);
     }
 }
 
+export function ensureMandatoryAttributes(
+    path: Babel.NodePath<Babel.types.JSXElement>,
+    componentName: string,
+    actionPathList: Babel.NodePath<Babel.types.JSXAttribute>[],
+    actionPathNames: string[]
+) {
+    // Check if we're missing some required attributes
+    const requiredAttributes = tapElementsRequiredAttributesMap[componentName];
+    if (requiredAttributes) {
+        const attrToAdd = requiredAttributes.filter(
+            x => !actionPathNames.includes(x)
+        );
+
+        for (const attr of attrToAdd) {
+            const attribute = jsxAttribute(
+                jsxIdentifier(attr),
+                jsxExpressionContainer(
+                    arrowFunctionExpression([], blockStatement([]))
+                )
+            );
+            path.node.openingElement.attributes.push(attribute);
+
+            const attrPaths = path.get(
+                'openingElement.attributes'
+            ) as Babel.NodePath<Babel.types.JSXAttribute>[];
+
+            const lastPath = attrPaths[attrPaths.length - 1];
+
+            actionPathList.push(lastPath);
+        }
+    }
+}
+
 export function getJSXElementActionPaths(
     componentName: string,
     t: typeof Babel.types,
@@ -71,6 +121,7 @@ export function getJSXElementActionPaths(
     const ddValues: Record<string, string> = {};
     const actionMapList = state.tapMappings?.[componentName] || [];
     const actionPathList: Babel.NodePath<Babel.types.JSXAttribute>[] = [];
+    const actionPathNames: string[] = [];
 
     path.traverse({
         JSXAttribute(subpath) {
@@ -98,13 +149,14 @@ export function getJSXElementActionPaths(
             const isValidMapping = actionMapList.includes(attrName);
 
             if (isValidMapping) {
+                actionPathNames.push(attrName);
                 actionPathList.push(subpath);
                 return;
             }
         }
     });
 
-    return { actionPathList, ddValues };
+    return { actionPathList, actionPathNames, ddValues };
 }
 
 export function handleRumActions(

packages/react-native-babel-plugin/src/constants/rum.ts

@@ -35,6 +35,10 @@ export const tapElementsMap: Record<string, string[]> = {
     TextInput: ['onFocus']
 };
 
+export const tapElementsRequiredAttributesMap: Record<string, string[]> = {
+    TextInput: ['onFocus']
+};
+
 export const rumComponentAttributes = [
     'dd-action-name',
     'accessibilityLabel'

packages/react-native-babel-plugin/test/plugin.test.ts

@@ -62,6 +62,67 @@ describe('Babel plugin: wrap interaction handlers for RUM', () => {
         `);
     });
 
+    it('should wrap supported property (onFocus) on supported element (TextInput)', () => {
+        const input = `
+            import { TextInput } from 'react-native';
+            <TextInput
+                placeholder="Enter username"
+                value={username}
+                onChangeText={setUsername}
+                style={styles.input}
+                onFocus={() => { console.log('test'); }}
+            />
+        `;
+        const output = transformCode(input);
+        expect(output).toMatchInlineSnapshot(`
+            "import { DdBabelInteractionTracking } from "@datadog/mobile-react-native";
+            import { TextInput } from 'react-native';
+            /*#__PURE__*/React.createElement(TextInput, {
+              placeholder: "Enter username",
+              value: username,
+              onChangeText: setUsername,
+              style: styles.input,
+              onFocus: () => {
+                if (DdBabelInteractionTracking.getInstance()) return DdBabelInteractionTracking.getInstance().wrapRumAction(() => {
+                  console.log('test');
+                }, "TAP", {
+                  "componentName": "TextInput"
+                })();else return (() => {
+                  console.log('test');
+                })();
+              }
+            });"
+        `);
+    });
+
+    it('should add mandatory property (onFocus) on supported element (TextInput) when not present', () => {
+        const input = `
+            import { TextInput } from 'react-native';
+            <TextInput
+                placeholder="Enter username"
+                value={username}
+                onChangeText={setUsername}
+                style={styles.input}
+            />
+        `;
+        const output = transformCode(input);
+        expect(output).toMatchInlineSnapshot(`
+            "import { DdBabelInteractionTracking } from "@datadog/mobile-react-native";
+            import { TextInput } from 'react-native';
+            /*#__PURE__*/React.createElement(TextInput, {
+              placeholder: "Enter username",
+              value: username,
+              onChangeText: setUsername,
+              style: styles.input,
+              onFocus: () => {
+                if (DdBabelInteractionTracking.getInstance()) return DdBabelInteractionTracking.getInstance().wrapRumAction(() => {}, "TAP", {
+                  "componentName": "TextInput"
+                })();else return (() => {})();
+              }
+            });"
+        `);
+    });
+
     it('should wrap arrow function with one argument', () => {
         const input = `
             import { Pressable } from 'react-native';