react-native-boost 0.6.2 → 1.0.0

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

@@ -179,3 +179,516 @@ export const isReactNativeImport = (path: NodePath<t.JSXOpeningElement>, expecte
   }
   return false;
 };
+
+type AncestorClassification = 'safe' | 'text' | 'unknown';
+export type ViewAncestorClassification = AncestorClassification;
+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 getViewAncestorClassification = (path: NodePath<t.JSXOpeningElement>): ViewAncestorClassification => {
+  return classifyViewAncestors(path);
+};
+
+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,13 @@
 import { declare } from '@babel/helper-plugin-utils';
-import { Optimizer } from '../types';
+import { Optimizer, PluginOptions } from '../types';
+import { createLogger } from './logger';
+
+export const generateTestPlugin = (optimizer: Optimizer, options: PluginOptions = {}) => {
+  const logger = createLogger({
+    verbose: false,
+    silent: true,
+  });
 
-export const generateTestPlugin = (optimizer: Optimizer) => {
   return declare((api) => {
     api.assertVersion(7);
 
@@ -9,7 +15,7 @@ export const generateTestPlugin = (optimizer: Optimizer) => {
       name: 'react-native-boost',
       visitor: {
         JSXOpeningElement(path) {
-          optimizer(path);
+          optimizer(path, logger, options);
         },
       },
     };

package/src/plugin/utils/helpers.ts

@@ -2,3 +2,18 @@ export const ensureArray = <T>(value: T | T[]): T[] => {
   if (Array.isArray(value)) return value;
   return [value];
 };
+
+export type BailoutCheck = {
+  reason: string;
+  shouldBail: () => boolean;
+};
+
+export const getFirstBailoutReason = (checks: readonly BailoutCheck[]): string | null => {
+  for (const check of checks) {
+    if (check.shouldBail()) {
+      return check.reason;
+    }
+  }
+
+  return null;
+};