react-native-boost 0.5.5 → 0.5.7

package/src/plugin/optimizers/view/index.ts

@@ -1,4 +1,4 @@
-import { NodePath, types as t } from '@babel/core';
+import { types as t } from '@babel/core';
 import { HubFile, Optimizer } from '../../types';
 import PluginError from '../../utils/plugin-error';
 import {
@@ -7,6 +7,7 @@ import {
   isValidJSXComponent,
   isReactNativeImport,
   replaceWithNativeComponent,
+  hasComponentAncestor,
 } from '../../utils/common';
 
 export const viewBlacklistedProperties = new Set([
@@ -42,14 +43,17 @@ export const viewBlacklistedProperties = new Set([
   'style',
 ]);
 
+// Components to skip when checking for indirect Text ancestors
+const skipComponents = ['View', 'Fragment', 'ScrollView', 'FlatList'];
+
 export const viewOptimizer: Optimizer = (path, log = () => {}) => {
   if (isIgnoredLine(path)) return;
   if (!isValidJSXComponent(path, 'View')) return;
   if (!isReactNativeImport(path, 'View')) return;
   if (hasBlacklistedProperty(path, viewBlacklistedProperties)) return;
-  if (hasTextAncestor(path)) return;
+  if (hasComponentAncestor(path, 'Text', skipComponents)) return;
 
-  // Extract the file from the Babel hub and add flags for logging & import caching.
+  // Extract the file from the Babel hub
   const hub = path.hub as unknown;
   const file = typeof hub === 'object' && hub !== null && 'file' in hub ? (hub.file as HubFile) : undefined;
 
@@ -63,96 +67,6 @@ export const viewOptimizer: Optimizer = (path, log = () => {}) => {
 
   const parent = path.parent as t.JSXElement;
 
-  // Replace the Text component with NativeText
+  // Replace the View component with NativeView
   replaceWithNativeComponent(path, parent, file, 'NativeView');
 };
-
-/**
- * Returns true if any ancestor element is a <Text /> or contains a <Text />.
- * This function handles both direct Text ancestors and custom components that may contain Text.
- * TODO: We can't test across file boundaries within the Babel plugin
- */
-function hasTextAncestor(path: NodePath<t.JSXOpeningElement>): boolean {
-  // Check for direct Text ancestors (no custom components)
-  const directTextAncestor = path.findParent((parentPath) => {
-    return t.isJSXElement(parentPath.node) && t.isJSXIdentifier(parentPath.node.openingElement.name, { name: 'Text' });
-  });
-
-  if (directTextAncestor) return true;
-
-  // Check for indirect Text ancestors (custom components that contain Text)
-  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 componentName = openingElement.name.name;
-
-    // Skip built-in components and already checked Text component
-    if (
-      componentName === 'Text' ||
-      componentName === 'View' ||
-      componentName === 'Fragment' ||
-      componentName[0] === componentName[0].toLowerCase()
-    ) {
-      return false;
-    }
-
-    // Try to find the component definition through variable binding
-    const binding = parentPath.scope.getBinding(componentName);
-    if (!binding) return false;
-
-    // Now check the component definition for Text elements
-    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 Text elements
-        return t.isBlockStatement(init.body) ? hasTextInReturnStatement(init.body) : hasTextInExpression(init.body);
-      }
-    } else if (t.isFunctionDeclaration(binding.path.node)) {
-      // Handle function declarations
-      return hasTextInReturnStatement(binding.path.node.body);
-    }
-
-    return false;
-  });
-}
-
-/**
- * Check if a block statement contains a return statement with a Text element
- */
-function hasTextInReturnStatement(blockStatement: t.BlockStatement): boolean {
-  for (const statement of blockStatement.body) {
-    if (t.isReturnStatement(statement) && statement.argument && hasTextInExpression(statement.argument)) {
-      return true;
-    }
-  }
-  return false;
-}
-
-/**
- * Check if an expression contains a Text element
- */
-function hasTextInExpression(expression: t.Expression): boolean {
-  // If directly returning a JSX element
-  if (t.isJSXElement(expression)) {
-    // Check if it's a Text element
-    if (t.isJSXIdentifier(expression.openingElement.name, { name: 'Text' })) {
-      return true;
-    }
-
-    // Check if any children are Text elements
-    for (const child of expression.children) {
-      if (t.isJSXElement(child) && t.isJSXIdentifier(child.openingElement.name, { name: 'Text' })) {
-        return true;
-      }
-    }
-  }
-
-  return false;
-}

package/src/plugin/types/index.ts

@@ -50,7 +50,7 @@ export interface FileImportOptions {
    * The named import string (e.g. 'normalizeAccessibilityProps'). Ignored if importType is "default".
    */
   importName: string;
-  /** The module to import from (e.g. 'react-native-boost') */
+  /** The module to import from (e.g. 'react-native-boost/runtime') */
   moduleName: string;
   /**
    * Determines which helper to use:

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

@@ -0,0 +1,120 @@
+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;
+}

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

@@ -11,7 +11,7 @@ import { RUNTIME_MODULE_NAME } from '../constants';
  *   - nameHint: The name hint which also acts as the cache key to ensure the import is only added once (e.g. 'normalizeAccessibilityProps')
  *   - path: The current Babel NodePath
  *   - importName: The named import string (e.g. 'normalizeAccessibilityProps'), used when importType is 'named'
- *   - moduleName: The module to import from (e.g. 'react-native-boost')
+ *   - moduleName: The module to import from (e.g. 'react-native-boost/runtime')
  *   - importType: Either 'named' (default) or 'default' to determine the type of import to use.
  *
  * @returns The identifier returned by addNamed or addDefault.

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

@@ -2,3 +2,4 @@ export * from './base';
 export * from './validation';
 export * from './attributes';
 export * from './node-types';
+export * from './ancestors';

package/src/plugin/utils/constants.ts

@@ -1,4 +1,4 @@
-export const RUNTIME_MODULE_NAME = 'react-native-boost';
+export const RUNTIME_MODULE_NAME = 'react-native-boost/runtime';
 
 /**
  * The set of accessibility properties that need to be normalized.