@truewatchtech/react-native-mobile-babel-plugin 0.4.3-alpha.1

package/src/actions/rum/tap.ts

@@ -0,0 +1,148 @@
+/*
+ * Portions of this file are adapted from Datadog's dd-sdk-reactnative Babel
+ * interaction tracking implementation, licensed under Apache-2.0.
+ */
+
+import type * as Babel from '@babel/core';
+import type { ActionMetadata, PluginState, TrackedHandler } from '../../types';
+import { buildTargetObject } from './metadata';
+
+const DEFAULT_ACTION_TYPE = 'click';
+
+function normalizeActionType(actionType: TrackedHandler['actionType']): string {
+  return typeof actionType === 'string' && actionType.trim()
+    ? actionType.trim()
+    : DEFAULT_ACTION_TYPE;
+}
+
+function buildOriginalInvocation(
+  t: typeof Babel.types,
+  originalExpression: Babel.types.Expression,
+  argsIdentifier: Babel.types.Identifier
+): Babel.types.OptionalCallExpression {
+  return t.optionalCallExpression(
+    t.cloneNode(originalExpression, true),
+    [t.spreadElement(t.cloneNode(argsIdentifier))],
+    true
+  );
+}
+
+function buildImmediateHandlerWrapper(
+  t: typeof Babel.types,
+  originalExpression: Babel.types.Expression,
+  metadata: ActionMetadata,
+  state: PluginState,
+  scope: Babel.NodePath['scope'],
+  actionType: TrackedHandler['actionType']
+): Babel.types.ArrowFunctionExpression {
+  const handlerArgsIdentifier = scope.generateUidIdentifier('ftHandlerArgs');
+  const originalArgsIdentifier = scope.generateUidIdentifier('ftOriginalArgs');
+  const originalInvoker = t.arrowFunctionExpression(
+    [t.restElement(originalArgsIdentifier)],
+    buildOriginalInvocation(t, originalExpression, originalArgsIdentifier)
+  );
+  const instanceCall = t.callExpression(
+    t.memberExpression(
+      t.cloneNode(state._ftTrackingIdentifier),
+      t.identifier('getInstance')
+    ),
+    []
+  );
+  const wrappedHandler = t.callExpression(
+    t.memberExpression(instanceCall, t.identifier('wrapRumAction')),
+    [
+      originalInvoker,
+      t.stringLiteral(normalizeActionType(actionType)),
+      buildTargetObject(t, metadata, handlerArgsIdentifier, state),
+    ]
+  );
+  return t.arrowFunctionExpression(
+    [t.restElement(handlerArgsIdentifier)],
+    t.callExpression(wrappedHandler, [
+      t.spreadElement(t.cloneNode(handlerArgsIdentifier)),
+    ])
+  );
+}
+
+/** Wraps a handler, or a handler factory when delayed mode is configured. */
+export function buildHandlerWrapper(
+  t: typeof Babel.types,
+  originalExpression: Babel.types.Expression,
+  metadata: ActionMetadata,
+  state: PluginState,
+  scope: Babel.NodePath['scope'],
+  mode: TrackedHandler['mode'] = 'default',
+  actionType?: TrackedHandler['actionType']
+): Babel.types.ArrowFunctionExpression {
+  if (mode !== 'delayed') {
+    return buildImmediateHandlerWrapper(
+      t,
+      originalExpression,
+      metadata,
+      state,
+      scope,
+      actionType
+    );
+  }
+
+  const factoryArgsIdentifier = scope.generateUidIdentifier('ftFactoryArgs');
+  const handlerIdentifier = scope.generateUidIdentifier('ftDelayedHandler');
+  return t.arrowFunctionExpression(
+    [t.restElement(factoryArgsIdentifier)],
+    t.blockStatement([
+      t.variableDeclaration('const', [
+        t.variableDeclarator(
+          handlerIdentifier,
+          buildOriginalInvocation(t, originalExpression, factoryArgsIdentifier)
+        ),
+      ]),
+      t.returnStatement(
+        buildImmediateHandlerWrapper(
+          t,
+          handlerIdentifier,
+          metadata,
+          state,
+          scope,
+          actionType
+        )
+      ),
+    ])
+  );
+}
+
+/** Resolves a conditional handler once at render time, preserving non-functions. */
+export function buildGuardedHandlerWrapper(
+  t: typeof Babel.types,
+  originalExpression: Babel.types.Expression,
+  metadata: ActionMetadata,
+  state: PluginState,
+  scope: Babel.NodePath['scope'],
+  mode: TrackedHandler['mode'] = 'default',
+  actionType?: TrackedHandler['actionType']
+): Babel.types.CallExpression {
+  const resolvedHandlerIdentifier =
+    scope.generateUidIdentifier('ftResolvedHandler');
+  return t.callExpression(
+    t.arrowFunctionExpression(
+      [resolvedHandlerIdentifier],
+      t.conditionalExpression(
+        t.binaryExpression(
+          '===',
+          t.unaryExpression('typeof', t.cloneNode(resolvedHandlerIdentifier)),
+          t.stringLiteral('function')
+        ),
+        buildHandlerWrapper(
+          t,
+          resolvedHandlerIdentifier,
+          metadata,
+          state,
+          scope,
+          mode,
+          actionType
+        ),
+        t.cloneNode(resolvedHandlerIdentifier)
+      )
+    ),
+    [t.cloneNode(originalExpression, true)]
+  );
+}

package/src/constants.ts

@@ -0,0 +1,21 @@
+/*
+ * Portions of this file are adapted from Datadog's dd-sdk-reactnative Babel
+ * interaction tracking implementation, licensed under Apache-2.0.
+ */
+
+export const RUNTIME_PACKAGE = '@truewatchtech/react-native-mobile';
+
+export const ACTION_NAME_ATTRIBUTE = 'ft-action-name';
+
+export const PLUGIN_ENABLED_FLAG = '__FT_RN_BABEL_PLUGIN_ENABLED__';
+
+export const NATIVE_COMPONENT_HANDLERS: Record<string, string[]> = {
+  Button: ['onPress'],
+  Pressable: ['onPress', 'onLongPress'],
+  TouchableOpacity: ['onPress'],
+  TouchableHighlight: ['onPress'],
+  TouchableWithoutFeedback: ['onPress'],
+  TouchableNativeFeedback: ['onPress'],
+  Switch: ['onValueChange'],
+  TextInput: ['onFocus'],
+};

package/src/index.ts

@@ -0,0 +1,50 @@
+/*
+ * Portions of this file are adapted from Datadog's dd-sdk-reactnative Babel
+ * interaction tracking implementation, licensed under Apache-2.0.
+ */
+
+import type * as Babel from '@babel/core';
+import { declare } from '@babel/helper-plugin-utils';
+import { insertPluginEnabledFlag } from './actions/global';
+import { handleJSXElement, insertRuntimeImports } from './actions/rum';
+import { mergeOptions } from './options';
+import { initializePluginState, isSkippedFile } from './state';
+import type { PluginAPI, PluginOptions, PluginState } from './types';
+
+export type { PluginOptions, TrackedComponent, TrackedHandler } from './types';
+
+const plugin = declare(
+  (api: PluginAPI, rawOptions: PluginOptions): Babel.PluginObj<PluginState> => {
+    api.assertVersion(7);
+    const t = api.types;
+    const options = mergeOptions(rawOptions);
+
+    return {
+      name: 'truewatch-react-native-action-name',
+      visitor: {
+        Program: {
+          enter(programPath, state) {
+            state._ftSkip = isSkippedFile(state);
+            if (state._ftSkip) {
+              return;
+            }
+            initializePluginState(t, programPath, state, options);
+            insertPluginEnabledFlag(t, programPath);
+          },
+          exit(programPath, state) {
+            if (!state._ftSkip) {
+              insertRuntimeImports(t, programPath, state);
+            }
+          },
+        },
+        JSXElement(path, state) {
+          if (!state._ftSkip) {
+            handleJSXElement(t, path, state, options);
+          }
+        },
+      },
+    };
+  }
+);
+
+export default plugin;

package/src/options.ts

@@ -0,0 +1,26 @@
+/*
+ * Portions of this file are adapted from Datadog's dd-sdk-reactnative Babel
+ * interaction tracking implementation, licensed under Apache-2.0.
+ */
+
+import type { NormalizedPluginOptions, PluginOptions } from './types';
+
+export function mergeOptions(
+  options: PluginOptions = {}
+): NormalizedPluginOptions {
+  const componentOptions = options.components || {};
+  return {
+    actionNameAttribute: options.actionNameAttribute,
+    components: {
+      tracked: componentOptions.tracked || [],
+      useContent:
+        componentOptions.useContent === undefined
+          ? true
+          : componentOptions.useContent,
+      useNamePrefix:
+        componentOptions.useNamePrefix === undefined
+          ? true
+          : componentOptions.useNamePrefix,
+    },
+  };
+}

package/src/state.ts

@@ -0,0 +1,39 @@
+/*
+ * Portions of this file are adapted from Datadog's dd-sdk-reactnative Babel
+ * interaction tracking implementation, licensed under Apache-2.0.
+ */
+
+import type * as Babel from '@babel/core';
+import { createTrackedComponents } from './actions/rum/components';
+import type { NormalizedPluginOptions, PluginState } from './types';
+
+export function isSkippedFile(state: PluginState): boolean {
+  const caller = state.file?.opts?.caller as { platform?: string } | undefined;
+  const filename = state.filename || state.file?.opts?.filename;
+  return (
+    caller?.platform === 'web' ||
+    Boolean(filename && filename.includes('node_modules'))
+  );
+}
+
+/** Initializes per-file state; identifiers and memoization never leak across files. */
+export function initializePluginState(
+  t: typeof Babel.types,
+  programPath: Babel.NodePath<Babel.types.Program>,
+  state: PluginState,
+  options: NormalizedPluginOptions
+): void {
+  state._ftTrackedComponents = createTrackedComponents(t, programPath, options);
+  state._ftCustomNames = new Set(
+    options.components.tracked.map((component) => component.name)
+  );
+  state._ftMemoizedHandlers = new Set();
+  state._ftHasWrappedAction = false;
+  state._ftNeedsContentRuntime = false;
+  state._ftExtractTextIdentifier =
+    programPath.scope.generateUidIdentifier('ftExtractText');
+  state._ftReactIdentifier = programPath.scope.generateUidIdentifier('FTReact');
+  state._ftTrackingIdentifier = programPath.scope.generateUidIdentifier(
+    'FTBabelInteractionTracking'
+  );
+}

package/src/types.ts

@@ -0,0 +1,72 @@
+/*
+ * Portions of this file are adapted from Datadog's dd-sdk-reactnative Babel
+ * interaction tracking implementation, licensed under Apache-2.0.
+ */
+
+import type * as Babel from '@babel/core';
+
+export type TrackedHandler = {
+  event: string;
+  actionType?: string;
+  mode?: 'default' | 'delayed';
+};
+
+export type TrackedComponent = {
+  name: string;
+  useContent?: boolean;
+  useNamePrefix?: boolean;
+  contentProp?: string;
+  handlers: TrackedHandler[];
+};
+
+export type PluginOptions = {
+  actionNameAttribute?: string;
+  components?: {
+    useContent?: boolean;
+    useNamePrefix?: boolean;
+    tracked?: TrackedComponent[];
+  };
+};
+
+export type NormalizedPluginOptions = {
+  actionNameAttribute?: string;
+  components: {
+    useContent: boolean;
+    useNamePrefix: boolean;
+    tracked: TrackedComponent[];
+  };
+};
+
+export type TrackedComponentData = Omit<TrackedComponent, 'name'> & {
+  importedName?: string;
+  isCustom: boolean;
+  useContent: boolean;
+  useNamePrefix: boolean;
+};
+
+export type ActionMetadata = {
+  accessibilityLabels: Babel.types.StringLiteral[];
+  actionNames: Babel.types.StringLiteral[];
+  component: TrackedComponentData;
+  componentName: string;
+  customActionNames: Babel.types.StringLiteral[];
+  getContent: Babel.types.ArrowFunctionExpression | null;
+};
+
+export type PluginState = Babel.PluginPass & {
+  _ftCustomNames: Set<string>;
+  _ftExtractTextIdentifier: Babel.types.Identifier;
+  _ftHasWrappedAction: boolean;
+  _ftMemoizedHandlers: Set<Babel.types.Node>;
+  _ftNeedsContentRuntime: boolean;
+  _ftReactIdentifier: Babel.types.Identifier;
+  _ftSkip: boolean;
+  _ftTrackedComponents: Record<string, TrackedComponentData>;
+  _ftTrackingIdentifier: Babel.types.Identifier;
+};
+
+export type PluginAPI = typeof Babel & Babel.ConfigAPI;
+
+export type JSXAttributePath = Babel.NodePath<
+  Babel.types.JSXAttribute | Babel.types.JSXSpreadAttribute
+>;

package/src/utils/jsx.ts

@@ -0,0 +1,50 @@
+/*
+ * Portions of this file are adapted from Datadog's dd-sdk-reactnative Babel
+ * interaction tracking implementation, licensed under Apache-2.0.
+ */
+
+import type * as Babel from '@babel/core';
+import type { JSXAttributePath } from '../types';
+
+export function getNodeName(
+  t: typeof Babel.types,
+  node: Babel.types.Node | null | undefined
+): string | null {
+  if (!node) {
+    return null;
+  }
+  if (t.isIdentifier(node) || t.isJSXIdentifier(node)) {
+    return node.name;
+  }
+  if (t.isStringLiteral(node)) {
+    return node.value;
+  }
+  if (t.isJSXNamespacedName(node)) {
+    return `${node.namespace.name}:${node.name.name}`;
+  }
+  if (t.isJSXMemberExpression(node)) {
+    let nodeName = node.property.name;
+    let nodeTracker:
+      | Babel.types.JSXIdentifier
+      | Babel.types.JSXMemberExpression = node.object;
+
+    while (t.isJSXMemberExpression(nodeTracker)) {
+      nodeName = `${nodeTracker.property.name}.${nodeName}`;
+      nodeTracker = nodeTracker.object;
+    }
+
+    return t.isJSXIdentifier(nodeTracker)
+      ? `${nodeTracker.name}.${nodeName}`
+      : null;
+  }
+  if ('name' in node && node.name && typeof node.name !== 'string') {
+    return getNodeName(t, node.name);
+  }
+  return null;
+}
+
+export function getDirectAttributePaths(
+  path: Babel.NodePath<Babel.types.JSXElement>
+): JSXAttributePath[] {
+  return path.get('openingElement.attributes') as JSXAttributePath[];
+}