react-native-boost 0.6.2 → 0.7.0

package/src/plugin/utils/common/validation.ts

@@ -179,3 +179,518 @@ export const isReactNativeImport = (path: NodePath<t.JSXOpeningElement>, expecte
   }
   return false;
 };
+
+type AncestorClassification = 'safe' | 'text' | 'unknown';
+type ScopeBinding = NonNullable<ReturnType<NodePath<t.Node>['scope']['getBinding']>>;
+
+type AncestorAnalysisContext = {
+  componentCache: WeakMap<t.Node, AncestorClassification>;
+  componentInProgress: WeakSet<t.Node>;
+  renderExpressionInProgress: WeakSet<t.Node>;
+};
+
+export const hasUnsafeViewAncestor = (path: NodePath<t.JSXOpeningElement>, allowUnknownAncestors = false): boolean => {
+  const classification = classifyViewAncestors(path);
+  if (classification === 'text') return true;
+  if (classification === 'unknown' && !allowUnknownAncestors) return true;
+  return false;
+};
+
+function classifyViewAncestors(path: NodePath<t.JSXOpeningElement>): AncestorClassification {
+  const context: AncestorAnalysisContext = {
+    componentCache: new WeakMap<t.Node, AncestorClassification>(),
+    componentInProgress: new WeakSet<t.Node>(),
+    renderExpressionInProgress: new WeakSet<t.Node>(),
+  };
+
+  let classification: AncestorClassification = 'safe';
+  let ancestorPath: NodePath<t.Node> | null = path.parentPath.parentPath;
+
+  while (ancestorPath) {
+    if (ancestorPath.isJSXElement()) {
+      const ancestorClassification = classifyJSXElementAsAncestor(ancestorPath, context);
+      classification = mergeAncestorClassification(classification, ancestorClassification);
+
+      if (classification === 'text') return classification;
+    }
+
+    ancestorPath = ancestorPath.parentPath;
+  }
+
+  return classification;
+}
+
+function classifyJSXElementAsAncestor(
+  path: NodePath<t.JSXElement>,
+  context: AncestorAnalysisContext
+): AncestorClassification {
+  const openingElementName = path.node.openingElement.name;
+
+  if (t.isJSXIdentifier(openingElementName)) {
+    return classifyJSXIdentifierAsAncestor(path, openingElementName.name, context);
+  }
+
+  if (t.isJSXMemberExpression(openingElementName)) {
+    return classifyJSXMemberExpressionAsAncestor(path, openingElementName);
+  }
+
+  return 'unknown';
+}
+
+function classifyJSXIdentifierAsAncestor(
+  path: NodePath<t.JSXElement>,
+  identifierName: string,
+  context: AncestorAnalysisContext
+): AncestorClassification {
+  if (identifierName === 'Fragment') return 'safe';
+
+  const binding = path.scope.getBinding(identifierName);
+  if (!binding) return 'unknown';
+
+  return classifyBindingAsAncestor(binding, context);
+}
+
+function classifyJSXMemberExpressionAsAncestor(
+  path: NodePath<t.JSXElement>,
+  expression: t.JSXMemberExpression
+): AncestorClassification {
+  if (!t.isJSXIdentifier(expression.object) || !t.isJSXIdentifier(expression.property)) {
+    return 'unknown';
+  }
+
+  const binding = path.scope.getBinding(expression.object.name);
+  if (!binding || binding.kind !== 'module' || !t.isImportNamespaceSpecifier(binding.path.node)) {
+    return 'unknown';
+  }
+
+  const importDeclaration = binding.path.parent;
+  if (!t.isImportDeclaration(importDeclaration)) return 'unknown';
+
+  if (importDeclaration.source.value === 'react-native') {
+    return expression.property.name === 'Text' ? 'text' : 'safe';
+  }
+
+  if (importDeclaration.source.value === 'react' && expression.property.name === 'Fragment') {
+    return 'safe';
+  }
+
+  return 'unknown';
+}
+
+function classifyBindingAsAncestor(binding: ScopeBinding, context: AncestorAnalysisContext): AncestorClassification {
+  if (binding.kind === 'module') {
+    return classifyModuleBindingAsAncestor(binding);
+  }
+
+  return classifyLocalBindingAsAncestor(binding, context);
+}
+
+function classifyModuleBindingAsAncestor(binding: ScopeBinding): AncestorClassification {
+  const importDeclaration = binding.path.parent;
+  if (!t.isImportDeclaration(importDeclaration)) return 'unknown';
+
+  const source = importDeclaration.source.value;
+  if (source === 'react-native') {
+    if (t.isImportSpecifier(binding.path.node)) {
+      const importedName = getImportSpecifierImportedName(binding.path.node);
+      if (!importedName) return 'unknown';
+      return importedName === 'Text' ? 'text' : 'safe';
+    }
+
+    if (t.isImportNamespaceSpecifier(binding.path.node)) {
+      return 'safe';
+    }
+
+    return 'unknown';
+  }
+
+  if (source === 'react' && t.isImportSpecifier(binding.path.node)) {
+    const importedName = getImportSpecifierImportedName(binding.path.node);
+    if (importedName === 'Fragment') return 'safe';
+  }
+
+  return 'unknown';
+}
+
+function classifyLocalBindingAsAncestor(
+  binding: ScopeBinding,
+  context: AncestorAnalysisContext
+): AncestorClassification {
+  const cacheKey = binding.path.node;
+  const cached = context.componentCache.get(cacheKey);
+  if (cached) return cached;
+
+  if (context.componentInProgress.has(cacheKey)) {
+    return 'unknown';
+  }
+
+  context.componentInProgress.add(cacheKey);
+
+  let classification: AncestorClassification;
+  if (binding.path.isFunctionDeclaration()) {
+    classification = analyzeFunctionComponent(binding.path, context);
+  } else if (binding.path.isVariableDeclarator()) {
+    classification = analyzeVariableDeclaratorComponent(binding.path, context);
+  } else {
+    classification = 'unknown';
+  }
+
+  context.componentInProgress.delete(cacheKey);
+  context.componentCache.set(cacheKey, classification);
+
+  return classification;
+}
+
+function analyzeVariableDeclaratorComponent(
+  path: NodePath<t.VariableDeclarator>,
+  context: AncestorAnalysisContext
+): AncestorClassification {
+  const initPath = path.get('init');
+  if (!initPath.node) return 'unknown';
+
+  if (initPath.isArrowFunctionExpression() || initPath.isFunctionExpression()) {
+    return analyzeFunctionComponent(initPath, context);
+  }
+
+  if (initPath.isCallExpression()) {
+    return analyzeCallWrappedComponent(initPath, context);
+  }
+
+  if (initPath.isIdentifier()) {
+    const aliasBinding = path.scope.getBinding(initPath.node.name);
+    if (!aliasBinding) return 'unknown';
+
+    return classifyBindingAsAncestor(aliasBinding, context);
+  }
+
+  return 'unknown';
+}
+
+function analyzeCallWrappedComponent(
+  path: NodePath<t.CallExpression>,
+  context: AncestorAnalysisContext
+): AncestorClassification {
+  if (!isReactMemoOrForwardRefCall(path)) return 'unknown';
+
+  const [firstArgumentPath] = path.get('arguments');
+  if (!firstArgumentPath?.node) return 'unknown';
+
+  if (firstArgumentPath.isArrowFunctionExpression() || firstArgumentPath.isFunctionExpression()) {
+    return analyzeFunctionComponent(firstArgumentPath, context);
+  }
+
+  if (firstArgumentPath.isIdentifier()) {
+    const wrappedComponentBinding = path.scope.getBinding(firstArgumentPath.node.name);
+    if (!wrappedComponentBinding) return 'unknown';
+
+    return classifyBindingAsAncestor(wrappedComponentBinding, context);
+  }
+
+  if (firstArgumentPath.isCallExpression()) {
+    return analyzeCallWrappedComponent(firstArgumentPath, context);
+  }
+
+  return 'unknown';
+}
+
+function isReactMemoOrForwardRefCall(path: NodePath<t.CallExpression>): boolean {
+  const calleePath = path.get('callee');
+
+  if (calleePath.isIdentifier()) {
+    if (!isMemoOrForwardRefName(calleePath.node.name)) return false;
+
+    const binding = path.scope.getBinding(calleePath.node.name);
+    return isReactImportBinding(binding);
+  }
+
+  if (calleePath.isMemberExpression()) {
+    const objectPath = calleePath.get('object');
+    const propertyPath = calleePath.get('property');
+
+    if (!objectPath.isIdentifier() || !propertyPath.isIdentifier()) return false;
+    if (!isMemoOrForwardRefName(propertyPath.node.name)) return false;
+
+    const objectBinding = path.scope.getBinding(objectPath.node.name);
+    return isReactImportBinding(objectBinding);
+  }
+
+  return false;
+}
+
+function isMemoOrForwardRefName(name: string): boolean {
+  return name === 'memo' || name === 'forwardRef';
+}
+
+function isReactImportBinding(binding: ScopeBinding | undefined): binding is ScopeBinding {
+  if (!binding || binding.kind !== 'module') return false;
+
+  const importDeclaration = binding.path.parent;
+  return t.isImportDeclaration(importDeclaration) && importDeclaration.source.value === 'react';
+}
+
+function analyzeFunctionComponent(
+  path: NodePath<t.FunctionDeclaration | t.FunctionExpression | t.ArrowFunctionExpression>,
+  context: AncestorAnalysisContext
+): AncestorClassification {
+  const bodyPath = path.get('body');
+
+  if (!bodyPath.isBlockStatement()) {
+    return analyzeRenderExpression(bodyPath as NodePath<t.Node>, context);
+  }
+
+  let classification: AncestorClassification = 'safe';
+
+  for (const statementPath of bodyPath.get('body')) {
+    if (!statementPath.isReturnStatement()) continue;
+
+    const argumentPath = statementPath.get('argument');
+    if (!argumentPath.node) continue;
+
+    const returnClassification = analyzeRenderExpression(argumentPath as NodePath<t.Node>, context);
+    classification = mergeAncestorClassification(classification, returnClassification);
+
+    if (classification === 'text') return classification;
+  }
+
+  return classification;
+}
+
+function analyzeRenderExpression(path: NodePath<t.Node>, context: AncestorAnalysisContext): AncestorClassification {
+  if (path.isJSXFragment()) {
+    return analyzeJSXChildren(path.get('children'), context);
+  }
+
+  let classification: AncestorClassification = 'safe';
+  let hasJSX = false;
+
+  path.traverse({
+    JSXOpeningElement(jsxPath) {
+      hasJSX = true;
+
+      const jsxElementPath = jsxPath.parentPath;
+      if (!jsxElementPath.isJSXElement()) {
+        classification = mergeAncestorClassification(classification, 'unknown');
+        return;
+      }
+
+      const jsxClassification = classifyJSXElementAsAncestor(jsxElementPath, context);
+      classification = mergeAncestorClassification(classification, jsxClassification);
+
+      if (classification === 'text') {
+        jsxPath.stop();
+      }
+    },
+  });
+
+  if (hasJSX) return classification;
+
+  if (path.isIdentifier()) {
+    return analyzeIdentifierRenderExpression(path, context);
+  }
+
+  if (path.isMemberExpression() && isPropsChildrenMemberExpression(path.node)) {
+    return 'safe';
+  }
+
+  if (
+    path.isNullLiteral() ||
+    path.isBooleanLiteral() ||
+    path.isNumericLiteral() ||
+    path.isStringLiteral() ||
+    path.isBigIntLiteral()
+  ) {
+    return 'safe';
+  }
+
+  return 'unknown';
+}
+
+function analyzeJSXChildren(
+  children: Array<NodePath<t.JSXText | t.JSXExpressionContainer | t.JSXSpreadChild | t.JSXElement | t.JSXFragment>>,
+  context: AncestorAnalysisContext
+): AncestorClassification {
+  let classification: AncestorClassification = 'safe';
+
+  for (const childPath of children) {
+    if (childPath.isJSXElement()) {
+      const childClassification = classifyJSXElementAsAncestor(childPath, context);
+      classification = mergeAncestorClassification(classification, childClassification);
+    } else if (childPath.isJSXFragment()) {
+      const fragmentClassification = analyzeJSXChildren(childPath.get('children'), context);
+      classification = mergeAncestorClassification(classification, fragmentClassification);
+    } else if (childPath.isJSXExpressionContainer()) {
+      const expressionPath = childPath.get('expression');
+      if (!expressionPath.node || expressionPath.isJSXEmptyExpression()) continue;
+
+      const expressionClassification = analyzeRenderExpression(expressionPath as NodePath<t.Node>, context);
+      classification = mergeAncestorClassification(classification, expressionClassification);
+    } else if (childPath.isJSXSpreadChild()) {
+      classification = mergeAncestorClassification(classification, 'unknown');
+    }
+
+    if (classification === 'text') {
+      return classification;
+    }
+  }
+
+  return classification;
+}
+
+function analyzeIdentifierRenderExpression(
+  path: NodePath<t.Identifier>,
+  context: AncestorAnalysisContext
+): AncestorClassification {
+  if (path.node.name === 'children') return 'safe';
+
+  const binding = path.scope.getBinding(path.node.name);
+  if (!binding) return 'unknown';
+
+  if (binding.kind === 'param') {
+    return binding.identifier.name === 'children' ? 'safe' : 'unknown';
+  }
+
+  if (!binding.path.isVariableDeclarator()) return 'unknown';
+
+  const cacheKey = binding.path.node;
+  if (context.renderExpressionInProgress.has(cacheKey)) {
+    return 'unknown';
+  }
+
+  const initPath = binding.path.get('init');
+  if (!initPath.node) return 'unknown';
+
+  context.renderExpressionInProgress.add(cacheKey);
+  const classification = analyzeRenderExpression(initPath as NodePath<t.Node>, context);
+  context.renderExpressionInProgress.delete(cacheKey);
+
+  return classification;
+}
+
+function isPropsChildrenMemberExpression(expression: t.MemberExpression): boolean {
+  if (!t.isIdentifier(expression.object, { name: 'props' })) return false;
+  if (!t.isIdentifier(expression.property, { name: 'children' })) return false;
+  return !expression.computed;
+}
+
+function mergeAncestorClassification(
+  current: AncestorClassification,
+  next: AncestorClassification
+): AncestorClassification {
+  if (current === 'text' || next === 'text') return 'text';
+  if (current === 'unknown' || next === 'unknown') return 'unknown';
+  return 'safe';
+}
+
+function getImportSpecifierImportedName(specifier: t.ImportSpecifier): string | undefined {
+  if (t.isIdentifier(specifier.imported)) {
+    return specifier.imported.name;
+  }
+
+  if (t.isStringLiteral(specifier.imported)) {
+    return specifier.imported.value;
+  }
+
+  return undefined;
+}
+
+/**
+ * Checks whether the closest JSX element ancestor is expo-router Link with a truthy asChild prop.
+ *
+ * We only bail on Text optimization when Link is effectively slotting that Text as the clickable child.
+ */
+export const hasExpoRouterLinkParentWithAsChild = (path: NodePath<t.JSXOpeningElement>): boolean => {
+  const textElementPath = path.parentPath;
+  if (!textElementPath.isJSXElement()) return false;
+
+  let ancestorPath: NodePath<t.Node> | null = textElementPath.parentPath;
+
+  while (ancestorPath) {
+    if (ancestorPath.isJSXElement()) {
+      if (!isExpoRouterLinkElement(ancestorPath)) return false;
+
+      return hasTruthyAsChildAttribute(ancestorPath.node.openingElement.attributes);
+    }
+
+    ancestorPath = ancestorPath.parentPath;
+  }
+
+  return false;
+};
+
+function isExpoRouterLinkElement(path: NodePath<t.JSXElement>): boolean {
+  const openingElementName = path.node.openingElement.name;
+
+  if (t.isJSXIdentifier(openingElementName)) {
+    const binding = path.scope.getBinding(openingElementName.name);
+    if (!binding || binding.kind !== 'module') return false;
+    if (!t.isImportSpecifier(binding.path.node)) return false;
+
+    const importDeclaration = binding.path.parent;
+    if (!t.isImportDeclaration(importDeclaration) || importDeclaration.source.value !== 'expo-router') return false;
+
+    const imported = binding.path.node.imported;
+    return t.isIdentifier(imported, { name: 'Link' }) || (t.isStringLiteral(imported) && imported.value === 'Link');
+  }
+
+  if (t.isJSXMemberExpression(openingElementName)) {
+    if (!t.isJSXIdentifier(openingElementName.object)) return false;
+    if (!t.isJSXIdentifier(openingElementName.property, { name: 'Link' })) return false;
+
+    const namespaceBinding = path.scope.getBinding(openingElementName.object.name);
+    if (!namespaceBinding || namespaceBinding.kind !== 'module') return false;
+    if (!t.isImportNamespaceSpecifier(namespaceBinding.path.node)) return false;
+
+    const importDeclaration = namespaceBinding.path.parent;
+    return t.isImportDeclaration(importDeclaration) && importDeclaration.source.value === 'expo-router';
+  }
+
+  return false;
+}
+
+function hasTruthyAsChildAttribute(attributes: (t.JSXAttribute | t.JSXSpreadAttribute)[]): boolean {
+  let asChildAttribute: t.JSXAttribute | undefined;
+
+  for (const attribute of attributes) {
+    if (t.isJSXAttribute(attribute) && t.isJSXIdentifier(attribute.name, { name: 'asChild' })) {
+      asChildAttribute = attribute;
+    }
+  }
+
+  if (!asChildAttribute) return false;
+
+  return isJSXAttributeValueTruthy(asChildAttribute.value);
+}
+
+function isJSXAttributeValueTruthy(value: t.JSXAttribute['value']): boolean {
+  if (!value) return true;
+  if (t.isStringLiteral(value)) return value.value.length > 0;
+  if (t.isJSXElement(value) || t.isJSXFragment(value)) return true;
+
+  if (t.isJSXExpressionContainer(value)) {
+    const staticTruthiness = getStaticExpressionTruthiness(value.expression);
+    return staticTruthiness ?? true;
+  }
+
+  return true;
+}
+
+function getStaticExpressionTruthiness(expression: t.Expression | t.JSXEmptyExpression): boolean | undefined {
+  if (t.isJSXEmptyExpression(expression)) return false;
+  if (t.isBooleanLiteral(expression)) return expression.value;
+  if (t.isNullLiteral(expression)) return false;
+  if (t.isStringLiteral(expression)) return expression.value.length > 0;
+  if (t.isNumericLiteral(expression)) return expression.value !== 0 && !Number.isNaN(expression.value);
+  if (t.isBigIntLiteral(expression)) return expression.value !== '0';
+  if (t.isIdentifier(expression, { name: 'undefined' })) return false;
+
+  if (t.isTemplateLiteral(expression) && expression.expressions.length === 0) {
+    return (expression.quasis[0]?.value.cooked ?? '').length > 0;
+  }
+
+  if (t.isUnaryExpression(expression, { operator: '!' })) {
+    const staticTruthiness = getStaticExpressionTruthiness(expression.argument);
+    return staticTruthiness === undefined ? undefined : !staticTruthiness;
+  }
+
+  return undefined;
+}

package/src/plugin/utils/constants.ts

@@ -14,3 +14,12 @@ export const ACCESSIBILITY_PROPERTIES = new Set([
   'aria-selected',
   'accessible',
 ]);
+
+// Maps the `userSelect` values to the corresponding boolean for the `selectable` prop
+export const USER_SELECT_STYLE_TO_SELECTABLE_PROP: Record<string, boolean> = {
+  auto: true,
+  text: true,
+  none: false,
+  contain: true,
+  all: true,
+};

package/src/plugin/utils/format-test-result.ts

@@ -0,0 +1,29 @@
+import type { ResultFormatter } from 'babel-plugin-tester';
+import { format, type FormatOptions } from 'oxfmt';
+import oxfmtConfig from '../../../../../.oxfmtrc.json';
+
+type RootOxfmtConfig = FormatOptions & {
+  $schema?: string;
+  ignorePatterns?: string[];
+};
+
+const oxfmtOptions = buildOxfmtOptions(oxfmtConfig as RootOxfmtConfig);
+
+export const formatTestResult: ResultFormatter = async (code, options) => {
+  const filepath = options?.filepath ?? 'output.js';
+  const result = await format(filepath, code, oxfmtOptions);
+
+  if (result.errors.length > 0) {
+    throw new Error(result.errors[0].message);
+  }
+
+  return result.code;
+};
+
+function buildOxfmtOptions(config: RootOxfmtConfig): FormatOptions {
+  const { $schema, ignorePatterns, ...oxfmtOptions } = config;
+  void $schema;
+  void ignorePatterns;
+
+  return oxfmtOptions;
+}

package/src/plugin/utils/generate-test-plugin.ts

@@ -1,7 +1,7 @@
 import { declare } from '@babel/helper-plugin-utils';
-import { Optimizer } from '../types';
+import { Optimizer, PluginOptions } from '../types';
 
-export const generateTestPlugin = (optimizer: Optimizer) => {
+export const generateTestPlugin = (optimizer: Optimizer, options: PluginOptions = {}) => {
   return declare((api) => {
     api.assertVersion(7);
 
@@ -9,7 +9,7 @@ export const generateTestPlugin = (optimizer: Optimizer) => {
       name: 'react-native-boost',
       visitor: {
         JSXOpeningElement(path) {
-          optimizer(path);
+          optimizer(path, undefined, options);
         },
       },
     };

package/src/plugin/utils/common/ancestors.ts

@@ -1,120 +0,0 @@
-import { NodePath, types as t } from '@babel/core';
-
-/**
- * Checks if any ancestor element is of the specified component type or contains that component type.
- * This function handles both direct ancestors and custom components that may contain the specified component.
- *
- * @param path - The path to the JSXOpeningElement.
- * @param componentName - The name of the component to check for in ancestors.
- * @param skipComponents - Optional array of component names to skip when checking ancestors.
- * @returns true if any ancestor is or contains the specified component.
- */
-export function hasComponentAncestor(
-  path: NodePath<t.JSXOpeningElement>,
-  componentName: string,
-  skipComponents: string[] = ['Fragment']
-): boolean {
-  // Check for direct ancestors of the specified component type
-  const directAncestor = path.findParent((parentPath) => {
-    return (
-      t.isJSXElement(parentPath.node) && t.isJSXIdentifier(parentPath.node.openingElement.name, { name: componentName })
-    );
-  });
-
-  if (directAncestor) return true;
-
-  // Check for indirect ancestors (custom components that contain the specified component)
-  return !!path.findParent((parentPath) => {
-    // Only check JSX elements
-    if (!t.isJSXElement(parentPath.node)) return false;
-
-    // Get the component name
-    const openingElement = parentPath.node.openingElement;
-    if (!t.isJSXIdentifier(openingElement.name)) return false;
-
-    const ancestorComponentName = openingElement.name.name;
-
-    // Skip the component we're looking for
-    if (ancestorComponentName === componentName) {
-      return false;
-    }
-
-    // Skip components in the skipComponents list
-    if (skipComponents.includes(ancestorComponentName)) {
-      return false;
-    }
-
-    // Skip lowercase components (built-in HTML elements)
-    if (ancestorComponentName[0] === ancestorComponentName[0].toLowerCase()) {
-      return false;
-    }
-
-    // Try to find the component definition through variable binding
-    const binding = parentPath.scope.getBinding(ancestorComponentName);
-    if (!binding) return false;
-
-    // Now check the component definition for the specified component
-    if (t.isVariableDeclarator(binding.path.node)) {
-      const init = binding.path.node.init;
-
-      // Handle arrow functions or function expressions
-      if (t.isArrowFunctionExpression(init) || t.isFunctionExpression(init)) {
-        // Check the function body for the specified component
-        return t.isBlockStatement(init.body)
-          ? hasComponentInReturnStatement(init.body, componentName)
-          : hasComponentInExpression(init.body, componentName);
-      }
-    } else if (t.isFunctionDeclaration(binding.path.node)) {
-      // Handle function declarations
-      return hasComponentInReturnStatement(binding.path.node.body, componentName);
-    }
-
-    return false;
-  });
-}
-
-/**
- * Check if a block statement contains a return statement with the specified component
- *
- * @param blockStatement - The block statement to check
- * @param componentName - The name of the component to look for
- * @returns true if the block statement contains a return with the specified component
- */
-function hasComponentInReturnStatement(blockStatement: t.BlockStatement, componentName: string): boolean {
-  for (const statement of blockStatement.body) {
-    if (
-      t.isReturnStatement(statement) &&
-      statement.argument &&
-      hasComponentInExpression(statement.argument, componentName)
-    ) {
-      return true;
-    }
-  }
-  return false;
-}
-
-/**
- * Check if an expression contains the specified component
- *
- * @param expression - The expression to check
- * @param componentName - The name of the component to look for
- * @returns true if the expression contains the specified component
- */
-function hasComponentInExpression(expression: t.Expression, componentName: string): boolean {
-  // If directly returning a JSX element
-  if (t.isJSXElement(expression)) {
-    // Check if it's the specified component
-    if (t.isJSXIdentifier(expression.openingElement.name, { name: componentName })) {
-      return true;
-    }
-
-    // Check if any children are the specified component
-    for (const child of expression.children) {
-      if (t.isJSXElement(child) && t.isJSXIdentifier(child.openingElement.name, { name: componentName })) {
-        return true;
-      }
-    }
-  }
-
-  return false;
-}