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

package/src/actions/rum/content.ts

@@ -0,0 +1,274 @@
+/*
+ * 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 { PluginState, TrackedComponentData } from '../../types';
+import { getDirectAttributePaths, getNodeName } from '../../utils/jsx';
+
+const CONTENT_PROPS = ['trackingLabel', 'title', 'label', 'text'];
+
+function contentCandidateNames(component: TrackedComponentData): string[] {
+  return component.contentProp && !CONTENT_PROPS.includes(component.contentProp)
+    ? [...CONTENT_PROPS, component.contentProp]
+    : CONTENT_PROPS;
+}
+
+function elementType(
+  t: typeof Babel.types,
+  name: Babel.types.JSXOpeningElement['name']
+): Babel.types.Expression {
+  if (t.isJSXMemberExpression(name)) {
+    // Lowercase member receivers (e.g. ui.Text) are variables, not host tags.
+    const receiver = t.isJSXIdentifier(name.object)
+      ? t.identifier(name.object.name)
+      : elementType(t, name.object);
+    return t.memberExpression(receiver, t.identifier(name.property.name));
+  }
+  const value = getNodeName(t, name) || '';
+  return t.isJSXIdentifier(name) && !/^[a-z]/.test(value)
+    ? t.identifier(value)
+    : t.stringLiteral(value);
+}
+
+function effectiveAttributes(
+  t: typeof Babel.types,
+  attributes: Babel.types.JSXOpeningElement['attributes']
+): Map<string, Babel.types.JSXAttribute> {
+  const result = new Map<string, Babel.types.JSXAttribute>();
+  for (const attribute of attributes) {
+    if (t.isJSXSpreadAttribute(attribute)) {
+      // Do not replay spreads or trust props they may have overridden.
+      result.clear();
+    } else {
+      result.set(getNodeName(t, attribute.name) || '', attribute);
+    }
+  }
+  return result;
+}
+
+function contentSourcePaths(
+  t: typeof Babel.types,
+  path: Babel.NodePath<Babel.types.JSXElement>,
+  component: TrackedComponentData
+): Babel.NodePath[] {
+  const candidateNames = contentCandidateNames(component);
+  const attributes = new Map<
+    string,
+    Babel.NodePath<Babel.types.JSXAttribute>
+  >();
+  for (const attributePath of getDirectAttributePaths(path)) {
+    if (!attributePath.isJSXAttribute()) {
+      attributes.clear();
+      continue;
+    }
+    attributes.set(
+      getNodeName(t, attributePath.node.name) || '',
+      attributePath
+    );
+  }
+  const sources: Babel.NodePath[] = [];
+  for (const name of candidateNames) {
+    const attributePath = attributes.get(name);
+    const valuePath = attributePath?.get('value');
+    if (valuePath && !Array.isArray(valuePath) && valuePath.node) {
+      sources.push(valuePath as Babel.NodePath<Babel.types.Node>);
+    }
+  }
+  return sources.concat(path.get('children') as Babel.NodePath[]);
+}
+
+function containsPath(
+  root: Babel.NodePath,
+  candidate: Babel.NodePath
+): boolean {
+  let current: Babel.NodePath | null = candidate;
+  while (current) {
+    if (current === root || current.node === root.node) {
+      return true;
+    }
+    current = current.parentPath;
+  }
+  return false;
+}
+
+/** Checks whether moving content into a memo callback preserves every binding. */
+export function isContentVisibleFromScope(
+  t: typeof Babel.types,
+  path: Babel.NodePath<Babel.types.JSXElement>,
+  component: TrackedComponentData,
+  destinationScope: Babel.NodePath['scope']
+): boolean {
+  const sources = contentSourcePaths(t, path, component);
+  let visible = true;
+  const checkReference = (referencePath: Babel.NodePath, name: string) => {
+    const sourceBinding = referencePath.scope.getBinding(name);
+    if (
+      sourceBinding &&
+      sources.some((source) => containsPath(source, sourceBinding.path))
+    ) {
+      return;
+    }
+    const destinationBinding = destinationScope.getBinding(name);
+    if (sourceBinding?.identifier !== destinationBinding?.identifier) {
+      visible = false;
+    }
+  };
+
+  for (const source of sources) {
+    source.traverse({
+      ReferencedIdentifier(referencePath) {
+        checkReference(referencePath, referencePath.node.name);
+        if (!visible) {
+          referencePath.stop();
+        }
+      },
+      JSXOpeningElement(openingPath) {
+        let name = openingPath.node.name;
+        let isMember = false;
+        while (t.isJSXMemberExpression(name)) {
+          isMember = true;
+          name = name.object;
+        }
+        if (
+          t.isJSXIdentifier(name) &&
+          (isMember || !/^[a-z]/.test(name.name))
+        ) {
+          checkReference(openingPath, name.name);
+        }
+        if (!visible) {
+          openingPath.stop();
+        }
+      },
+      JSXSpreadAttribute(spreadPath) {
+        // Spread attributes are not copied into the content getter.
+        spreadPath.skip();
+      },
+    });
+    if (!visible) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/** Converts JSX anywhere in an expression, including render functions and maps. */
+function toRuntimeNode(
+  t: typeof Babel.types,
+  node: Babel.types.Node,
+  react: Babel.types.Identifier
+): Babel.types.Node {
+  if (t.isJSXElement(node) || t.isJSXFragment(node)) {
+    const properties: Babel.types.ObjectProperty[] = [];
+    if (t.isJSXElement(node)) {
+      for (const [name, attribute] of effectiveAttributes(
+        t,
+        node.openingElement.attributes
+      )) {
+        properties.push(
+          t.objectProperty(
+            t.stringLiteral(name),
+            attribute.value
+              ? (toRuntimeNode(
+                  t,
+                  attribute.value,
+                  react
+                ) as Babel.types.Expression)
+              : t.booleanLiteral(true)
+          )
+        );
+      }
+    }
+    const children = node.children
+      .filter(
+        (child) =>
+          !(t.isJSXText(child) && !child.value.trim()) &&
+          !(
+            t.isJSXExpressionContainer(child) &&
+            t.isJSXEmptyExpression(child.expression)
+          )
+      )
+      .map((child) => toRuntimeNode(t, child, react) as Babel.types.Expression);
+    return t.callExpression(
+      t.memberExpression(t.cloneNode(react), t.identifier('createElement')),
+      [
+        t.isJSXElement(node)
+          ? elementType(t, node.openingElement.name)
+          : t.memberExpression(t.cloneNode(react), t.identifier('Fragment')),
+        properties.length ? t.objectExpression(properties) : t.nullLiteral(),
+        ...children,
+      ]
+    );
+  }
+  if (t.isJSXText(node)) {
+    return t.stringLiteral(node.value.replace(/\s+/g, ' ').trim());
+  }
+  if (t.isJSXExpressionContainer(node)) {
+    return toRuntimeNode(t, node.expression, react);
+  }
+  // Recurse through all expression shapes so cloned JSX cannot survive Babel's
+  // JSX visitor or be instrumented a second time inside the content getter.
+  const cloned = t.cloneNode(node, false);
+  const fields = cloned as unknown as Record<
+    string,
+    Babel.types.Node | Babel.types.Node[] | null
+  >;
+  for (const key of t.VISITOR_KEYS[node.type] || []) {
+    const value = fields[key];
+    if (Array.isArray(value)) {
+      fields[key] = value.map((child) =>
+        child ? toRuntimeNode(t, child, react) : child
+      );
+    } else if (value) {
+      fields[key] = toRuntimeNode(t, value, react);
+    }
+  }
+  return cloned;
+}
+
+/** Matches Datadog's click-time evaluation of content props and JSX children. */
+export function buildContentGetter(
+  t: typeof Babel.types,
+  path: Babel.NodePath<Babel.types.JSXElement>,
+  component: TrackedComponentData,
+  state: PluginState
+): Babel.types.ArrowFunctionExpression | null {
+  if (!component.useContent) {
+    return null;
+  }
+  const candidateNames = contentCandidateNames(component);
+  const attributes = effectiveAttributes(
+    t,
+    path.node.openingElement.attributes
+  );
+  const candidates: Babel.types.Expression[] = [];
+  for (const name of candidateNames) {
+    const attribute = attributes.get(name);
+    if (attribute?.value) {
+      candidates.push(
+        toRuntimeNode(
+          t,
+          attribute.value,
+          state._ftReactIdentifier
+        ) as Babel.types.Expression
+      );
+    }
+  }
+  const fragment = t.jsxFragment(
+    t.jsxOpeningFragment(),
+    t.jsxClosingFragment(),
+    path.node.children
+  );
+  return t.arrowFunctionExpression(
+    [],
+    t.callExpression(t.cloneNode(state._ftExtractTextIdentifier), [
+      toRuntimeNode(
+        t,
+        fragment,
+        state._ftReactIdentifier
+      ) as Babel.types.Expression,
+      t.arrayExpression(candidates),
+    ])
+  );
+}

package/src/actions/rum/index.ts

@@ -0,0 +1,154 @@
+/*
+ * 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 { RUNTIME_PACKAGE } from '../../constants';
+import type {
+  ActionMetadata,
+  NormalizedPluginOptions,
+  PluginState,
+} from '../../types';
+import { getDirectAttributePaths, getNodeName } from '../../utils/jsx';
+import {
+  addRequiredTextInputHandler,
+  isInsideConfiguredComponent,
+} from './components';
+import { buildMetadata } from './metadata';
+import { wrapMemoizedHandler } from './memoization';
+import { buildGuardedHandlerWrapper, buildHandlerWrapper } from './tap';
+
+export function handleJSXElement(
+  t: typeof Babel.types,
+  path: Babel.NodePath<Babel.types.JSXElement>,
+  state: PluginState,
+  options: NormalizedPluginOptions
+): void {
+  const componentName = getNodeName(t, path.node.openingElement.name);
+  const component = componentName
+    ? state._ftTrackedComponents[componentName]
+    : undefined;
+  if (
+    !componentName ||
+    !component ||
+    isInsideConfiguredComponent(t, path, state._ftCustomNames)
+  ) {
+    return;
+  }
+
+  addRequiredTextInputHandler(t, path, component, componentName);
+  let metadata: ActionMetadata | undefined;
+
+  for (const attributePath of getDirectAttributePaths(path)) {
+    if (
+      !attributePath.isJSXAttribute() ||
+      attributePath.node.extra?.__ftWrappedAction
+    ) {
+      continue;
+    }
+    const attributeName = getNodeName(t, attributePath.node.name);
+    const handler = component.handlers.find(
+      (item) => item.event === attributeName
+    );
+    if (!handler) {
+      continue;
+    }
+    const value = attributePath.node.value;
+    if (!t.isJSXExpressionContainer(value)) {
+      continue;
+    }
+    const expression = value.expression;
+    if (
+      !t.isArrowFunctionExpression(expression) &&
+      !t.isFunctionExpression(expression) &&
+      !t.isIdentifier(expression) &&
+      !t.isMemberExpression(expression) &&
+      !t.isConditionalExpression(expression)
+    ) {
+      continue;
+    }
+
+    metadata ||= buildMetadata(
+      t,
+      path,
+      componentName,
+      component,
+      options,
+      state
+    );
+
+    if (
+      !wrapMemoizedHandler(
+        t,
+        attributePath,
+        expression,
+        metadata,
+        state,
+        handler.mode,
+        handler.actionType
+      )
+    ) {
+      const wrappedHandler = t.isConditionalExpression(expression)
+        ? buildGuardedHandlerWrapper(
+            t,
+            expression,
+            metadata,
+            state,
+            attributePath.scope,
+            handler.mode,
+            handler.actionType
+          )
+        : buildHandlerWrapper(
+            t,
+            expression,
+            metadata,
+            state,
+            attributePath.scope,
+            handler.mode,
+            handler.actionType
+          );
+      attributePath.node.value = t.jsxExpressionContainer(wrappedHandler);
+      state._ftHasWrappedAction = true;
+    }
+    attributePath.node.extra = {
+      ...attributePath.node.extra,
+      __ftWrappedAction: true,
+    };
+  }
+}
+
+export function insertRuntimeImports(
+  t: typeof Babel.types,
+  programPath: Babel.NodePath<Babel.types.Program>,
+  state: PluginState
+): void {
+  if (!state._ftHasWrappedAction) {
+    return;
+  }
+  const imports = [
+    t.importSpecifier(
+      t.cloneNode(state._ftTrackingIdentifier),
+      t.identifier('FTBabelInteractionTracking')
+    ),
+  ];
+  if (state._ftNeedsContentRuntime) {
+    imports.push(
+      t.importSpecifier(
+        t.cloneNode(state._ftExtractTextIdentifier),
+        t.identifier('__ftExtractText')
+      )
+    );
+    programPath.unshiftContainer(
+      'body',
+      t.importDeclaration(
+        [t.importNamespaceSpecifier(t.cloneNode(state._ftReactIdentifier))],
+        t.stringLiteral('react')
+      )
+    );
+  }
+  programPath.unshiftContainer(
+    'body',
+    t.importDeclaration(imports, t.stringLiteral(RUNTIME_PACKAGE))
+  );
+}

package/src/actions/rum/memoization.ts

@@ -0,0 +1,136 @@
+/*
+ * 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 { isContentVisibleFromScope } from './content';
+import { buildHandlerWrapper } from './tap';
+
+function getMemoizationName(
+  t: typeof Babel.types,
+  callee: Babel.types.Expression | Babel.types.V8IntrinsicIdentifier
+): string | null {
+  if (t.isIdentifier(callee)) {
+    return callee.name;
+  }
+  if (t.isMemberExpression(callee) && t.isIdentifier(callee.property)) {
+    return callee.property.name;
+  }
+  return null;
+}
+
+function getVariableDeclaratorPath(
+  bindingPath: Babel.NodePath
+): Babel.NodePath<Babel.types.VariableDeclarator> | null {
+  if (bindingPath.isVariableDeclarator()) {
+    return bindingPath;
+  }
+  return (
+    (bindingPath.findParent((parent) =>
+      parent.isVariableDeclarator()
+    ) as Babel.NodePath<Babel.types.VariableDeclarator> | null) || null
+  );
+}
+
+function isLocalFunctionReference(
+  path: Babel.NodePath,
+  expression: Babel.types.Expression
+): boolean {
+  if (!expression || expression.type !== 'Identifier') {
+    return true;
+  }
+  const binding = path.scope.getBinding(expression.name);
+  if (!binding) {
+    return false;
+  }
+  return !(
+    binding.path.isImportSpecifier() ||
+    binding.path.isImportDefaultSpecifier() ||
+    binding.path.isImportNamespaceSpecifier()
+  );
+}
+
+/** Wraps the hook callback once so JSX references retain their memoized identity. */
+export function wrapMemoizedHandler(
+  t: typeof Babel.types,
+  path: Babel.NodePath<Babel.types.JSXAttribute>,
+  expression: Babel.types.Expression,
+  metadata: ActionMetadata,
+  state: PluginState,
+  mode: TrackedHandler['mode'],
+  actionType: TrackedHandler['actionType']
+): boolean {
+  if (!t.isIdentifier(expression)) {
+    return false;
+  }
+  const binding = path.scope.getBinding(expression.name);
+  if (!binding) {
+    return false;
+  }
+  const declaratorPath = getVariableDeclaratorPath(binding.path);
+  if (!declaratorPath) {
+    return false;
+  }
+  const initPath = declaratorPath.get('init');
+  if (!initPath.isCallExpression()) {
+    return false;
+  }
+  const memoizationName = getMemoizationName(t, initPath.node.callee);
+  if (
+    !memoizationName ||
+    !['useCallback', 'useMemo'].includes(memoizationName)
+  ) {
+    return false;
+  }
+  if (state._ftMemoizedHandlers.has(declaratorPath.node)) {
+    return true;
+  }
+
+  const argumentPaths = initPath.get('arguments');
+  const callbackPath = argumentPaths[0];
+  if (!callbackPath || callbackPath.isSpreadElement()) {
+    return false;
+  }
+  const callback = callbackPath.node;
+  if (
+    !t.isArrowFunctionExpression(callback) &&
+    !t.isFunctionExpression(callback) &&
+    !t.isIdentifier(callback)
+  ) {
+    return false;
+  }
+  if (!isLocalFunctionReference(path, callback)) {
+    state._ftMemoizedHandlers.add(declaratorPath.node);
+    return true;
+  }
+
+  const elementPath = path.parentPath?.parentPath;
+  const metadataAtMemoDefinition =
+    metadata.getContent &&
+    elementPath?.isJSXElement() &&
+    !isContentVisibleFromScope(
+      t,
+      elementPath,
+      metadata.component,
+      initPath.scope
+    )
+      ? { ...metadata, getContent: null }
+      : metadata;
+
+  callbackPath.replaceWith(
+    buildHandlerWrapper(
+      t,
+      callback,
+      metadataAtMemoDefinition,
+      state,
+      callbackPath.scope,
+      memoizationName === 'useMemo' ? 'delayed' : mode,
+      actionType
+    )
+  );
+  state._ftMemoizedHandlers.add(declaratorPath.node);
+  state._ftHasWrappedAction = true;
+  return true;
+}

package/src/actions/rum/metadata.ts

@@ -0,0 +1,147 @@
+/*
+ * 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 { ACTION_NAME_ATTRIBUTE } from '../../constants';
+import type {
+  ActionMetadata,
+  NormalizedPluginOptions,
+  PluginState,
+  TrackedComponentData,
+} from '../../types';
+import { getNodeName } from '../../utils/jsx';
+import { buildContentGetter } from './content';
+
+function collectStaticActionNames(
+  t: typeof Babel.types,
+  path: Babel.NodePath<Babel.types.JSXElement>,
+  customAttribute: string | undefined
+): Pick<
+  ActionMetadata,
+  'actionNames' | 'customActionNames' | 'accessibilityLabels'
+> {
+  const values: Pick<
+    ActionMetadata,
+    'actionNames' | 'customActionNames' | 'accessibilityLabels'
+  > = {
+    actionNames: [],
+    customActionNames: [],
+    accessibilityLabels: [],
+  };
+  path.traverse({
+    JSXAttribute(attributePath) {
+      if (!t.isStringLiteral(attributePath.node.value)) {
+        return;
+      }
+      const name = getNodeName(t, attributePath.node.name);
+      const field =
+        name === ACTION_NAME_ATTRIBUTE
+          ? values.actionNames
+          : name === 'accessibilityLabel'
+          ? values.accessibilityLabels
+          : name === customAttribute
+          ? values.customActionNames
+          : null;
+      if (field) {
+        field.push(t.cloneNode(attributePath.node.value, true));
+      }
+    },
+  });
+  return values;
+}
+
+export function buildMetadata(
+  t: typeof Babel.types,
+  path: Babel.NodePath<Babel.types.JSXElement>,
+  componentName: string,
+  component: TrackedComponentData,
+  options: NormalizedPluginOptions,
+  state: PluginState
+): ActionMetadata {
+  const names = collectStaticActionNames(t, path, options.actionNameAttribute);
+  const hasStaticName = Object.values(names).some((values) =>
+    values.some((value) => value.value.trim().length > 0)
+  );
+  return {
+    ...names,
+    component,
+    componentName,
+    getContent: hasStaticName
+      ? null
+      : buildContentGetter(t, path, component, state),
+  };
+}
+
+export function buildTargetObject(
+  t: typeof Babel.types,
+  metadata: ActionMetadata,
+  handlerArgsIdentifier: Babel.types.Identifier,
+  state: PluginState
+): Babel.types.ObjectExpression {
+  const properties: Babel.types.ObjectProperty[] = [
+    t.objectProperty(
+      t.identifier('options'),
+      t.objectExpression([
+        t.objectProperty(
+          t.identifier('useContent'),
+          t.booleanLiteral(metadata.component.useContent)
+        ),
+        t.objectProperty(
+          t.identifier('useNamePrefix'),
+          t.booleanLiteral(metadata.component.useNamePrefix)
+        ),
+      ])
+    ),
+    t.objectProperty(
+      t.identifier('handlerArgs'),
+      t.cloneNode(handlerArgsIdentifier)
+    ),
+    t.objectProperty(
+      t.identifier('componentName'),
+      t.stringLiteral(metadata.componentName)
+    ),
+  ];
+
+  if (metadata.actionNames.length > 0) {
+    properties.push(
+      t.objectProperty(
+        t.stringLiteral(ACTION_NAME_ATTRIBUTE),
+        t.arrayExpression(
+          metadata.actionNames.map((value) => t.cloneNode(value, true))
+        )
+      )
+    );
+  }
+  if (metadata.customActionNames.length > 0) {
+    properties.push(
+      t.objectProperty(
+        t.identifier('customActionName'),
+        t.arrayExpression(
+          metadata.customActionNames.map((value) => t.cloneNode(value, true))
+        )
+      )
+    );
+  }
+  if (metadata.accessibilityLabels.length > 0) {
+    properties.push(
+      t.objectProperty(
+        t.identifier('accessibilityLabel'),
+        t.arrayExpression(
+          metadata.accessibilityLabels.map((value) => t.cloneNode(value, true))
+        )
+      )
+    );
+  }
+  if (metadata.getContent) {
+    state._ftNeedsContentRuntime = true;
+    properties.push(
+      t.objectProperty(
+        t.identifier('getContent'),
+        t.cloneNode(metadata.getContent, true)
+      )
+    );
+  }
+  return t.objectExpression(properties);
+}