react-native-boost 0.2.0 → 0.4.0

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

@@ -2,7 +2,37 @@ import { NodePath, types as t } from '@babel/core';
 import { addNamed } from '@babel/helper-module-imports';
 import { HubFile, Optimizer } from '../../types';
 import PluginError from '../../utils/plugin-error';
-import { shouldIgnoreOptimization } from '../../utils/common';
+import { hasBlacklistedProperty, shouldIgnoreOptimization } from '../../utils/common';
+
+export const textBlacklistedProperties = new Set([
+  'accessible',
+  'accessibilityLabel',
+  'accessibilityState',
+  'allowFontScaling',
+  'aria-busy',
+  'aria-checked',
+  'aria-disabled',
+  'aria-expanded',
+  'aria-label',
+  'aria-selected',
+  'ellipsizeMode',
+  'id',
+  'nativeID',
+  'onLongPress',
+  'onPress',
+  'onPressIn',
+  'onPressOut',
+  'onResponderGrant',
+  'onResponderMove',
+  'onResponderRelease',
+  'onResponderTerminate',
+  'onResponderTerminationRequest',
+  'onStartShouldSetResponder',
+  'pressRetentionOffset',
+  'suppressHighlighting',
+  'selectable',
+  'selectionColor',
+]);
 
 export const textOptimizer: Optimizer = (path, log = () => {}) => {
   // Ensure we're processing a JSX Text element
@@ -30,7 +60,8 @@ export const textOptimizer: Optimizer = (path, log = () => {}) => {
   }
 
   // Bail if the element has any blacklisted properties or non-string children props
-  if (hasBlacklistedProperties(path)) return;
+  if (hasBlacklistedProperty(path, textBlacklistedProperties)) return;
+  if (hasInvalidChildren(path)) return;
   if (!hasOnlyStringChildren(path, parent)) return;
 
   // Extract the file from the Babel hub and add flags for logging & import caching
@@ -46,6 +77,7 @@ export const textOptimizer: Optimizer = (path, log = () => {}) => {
   log(`Optimizing Text component in ${filename}:${lineNumber}`);
 
   // Optimize props
+  fixNegativeNumberOfLines({ path, log });
   optimizeStyleTag({ path, file });
 
   // Add TextNativeComponent import (cached on file) so we only add it once per file
@@ -89,33 +121,39 @@ function isStringNode(path: NodePath<t.JSXOpeningElement>, child: t.Node): boole
   return false;
 }
 
-const blacklistedProperties = new Set([
-  'accessible',
-  'accessibilityLabel',
-  'accessibilityState',
-  'allowFontScaling',
-  'aria-busy',
-  'aria-checked',
-  'aria-disabled',
-  'aria-expanded',
-  'aria-label',
-  'aria-selected',
-  'ellipsizeMode',
-  'id',
-  'nativeID',
-  'onLongPress',
-  'onPress',
-  'onPressIn',
-  'onPressOut',
-  'onResponderGrant',
-  'onResponderMove',
-  'onResponderRelease',
-  'onResponderTerminate',
-  'onResponderTerminationRequest',
-  'onStartShouldSetResponder',
-  'pressRetentionOffset',
-  'suppressHighlighting',
-]);
+function fixNegativeNumberOfLines({
+  path,
+  log,
+}: {
+  path: NodePath<t.JSXOpeningElement>;
+  log: (message: string) => void;
+}) {
+  for (const attribute of path.node.attributes) {
+    if (
+      t.isJSXAttribute(attribute) &&
+      t.isJSXIdentifier(attribute.name, { name: 'numberOfLines' }) &&
+      attribute.value &&
+      t.isJSXExpressionContainer(attribute.value)
+    ) {
+      let originalValue: number | undefined;
+      if (t.isNumericLiteral(attribute.value.expression)) {
+        originalValue = attribute.value.expression.value;
+      } else if (
+        t.isUnaryExpression(attribute.value.expression) &&
+        attribute.value.expression.operator === '-' &&
+        t.isNumericLiteral(attribute.value.expression.argument)
+      ) {
+        originalValue = -attribute.value.expression.argument.value;
+      }
+      if (originalValue !== undefined && originalValue < 0) {
+        log(
+          `Warning: 'numberOfLines' in <Text> must be a non-negative number, received: ${originalValue}. The value will be set to 0.`
+        );
+        attribute.value.expression = t.numericLiteral(0);
+      }
+    }
+  }
+}
 
 function optimizeStyleTag({ path, file }: { path: NodePath<t.JSXOpeningElement>; file: HubFile }) {
   let shouldImportFlattenTextStyle = false;
@@ -139,43 +177,17 @@ function optimizeStyleTag({ path, file }: { path: NodePath<t.JSXOpeningElement>;
   }
 }
 
-function hasBlacklistedProperties(path: NodePath<t.JSXOpeningElement>): boolean {
-  return path.node.attributes.some((attribute) => {
-    // Check if we can resolve the spread attribute
-    if (t.isJSXSpreadAttribute(attribute)) {
-      if (t.isIdentifier(attribute.argument)) {
-        const binding = path.scope.getBinding(attribute.argument.name);
-        let objectExpression: t.ObjectExpression | undefined;
-        if (binding) {
-          // If the binding node is a VariableDeclarator, use its initializer
-          if (t.isVariableDeclarator(binding.path.node)) {
-            objectExpression = binding.path.node.init as t.ObjectExpression;
-          } else if (t.isObjectExpression(binding.path.node)) {
-            objectExpression = binding.path.node;
-          }
-        }
-        if (objectExpression && t.isObjectExpression(objectExpression)) {
-          return objectExpression.properties.some((property) => {
-            if (t.isObjectProperty(property) && t.isIdentifier(property.key)) {
-              return blacklistedProperties.has(property.key.name);
-            }
-            return false;
-          });
-        }
-      }
-      // Bail if we can't resolve the spread attribute
-      return true;
-    }
+function hasInvalidChildren(path: NodePath<t.JSXOpeningElement>): boolean {
+  for (const attribute of path.node.attributes) {
+    if (t.isJSXSpreadAttribute(attribute)) return false; // spread attributes are handled in hasBlacklistedProperty
 
     if (t.isJSXIdentifier(attribute.name) && attribute.value) {
       // For a "children" attribute, optimization is allowed only if it is a string
       if (attribute.name.name === 'children') {
         return isStringNode(path, attribute.value);
       }
-      return blacklistedProperties.has(attribute.name.name);
+      return textBlacklistedProperties.has(attribute.name.name);
     }
-
-    // For other attribute types (e.g. namespaced), assume no blacklisting
-    return false;
-  });
+  }
+  return false;
 }

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

@@ -0,0 +1,114 @@
+import { NodePath, types as t } from '@babel/core';
+import { addDefault } from '@babel/helper-module-imports';
+import { HubFile, Optimizer } from '../../types';
+import PluginError from '../../utils/plugin-error';
+import { hasBlacklistedProperty, shouldIgnoreOptimization } from '../../utils/common';
+
+export const viewBlacklistedProperties = new Set([
+  'accessible',
+  'accessibilityLabel',
+  'accessibilityState',
+  'allowFontScaling',
+  'aria-busy',
+  'aria-checked',
+  'aria-disabled',
+  'aria-expanded',
+  'aria-label',
+  'aria-selected',
+  'ellipsizeMode',
+  'disabled',
+  'id',
+  'nativeID',
+  'numberOfLines',
+  'onLongPress',
+  'onPress',
+  'onPressIn',
+  'onPressOut',
+  'onResponderGrant',
+  'onResponderMove',
+  'onResponderRelease',
+  'onResponderTerminate',
+  'onResponderTerminationRequest',
+  'onStartShouldSetResponder',
+  'pressRetentionOffset',
+  'selectable',
+  'selectionColor',
+  'suppressHighlighting',
+  'style',
+]);
+
+export const viewOptimizer: Optimizer = (path, log = () => {}) => {
+  // Ensure we're processing a JSX element identifier.
+  if (!t.isJSXIdentifier(path.node.name)) return;
+
+  const parent = path.parent;
+  if (!t.isJSXElement(parent)) return;
+
+  const elementName = path.node.name.name;
+  if (elementName !== 'View') return;
+
+  // Respect comments that disable optimization.
+  if (shouldIgnoreOptimization(path)) return;
+
+  // Ensure the View element comes from react-native.
+  const binding = path.scope.getBinding(elementName);
+  if (!binding) return;
+  if (binding.kind === 'module') {
+    const parentNode = binding.path.parent;
+    if (!t.isImportDeclaration(parentNode) || parentNode.source.value !== 'react-native') {
+      return;
+    }
+  }
+
+  // Bail if any blacklisted props are present.
+  if (hasBlacklistedProperty(path, viewBlacklistedProperties)) return;
+
+  // Bail if a <TextAncestor /> component exists as an ancestor.
+  if (hasTextAncestor(path)) return;
+
+  // Extract the file from the Babel hub and add flags for logging & import caching.
+  const hub = path.hub as unknown;
+  const file = typeof hub === 'object' && hub !== null && 'file' in hub ? (hub.file as HubFile) : undefined;
+
+  if (!file) {
+    throw new PluginError('No file found in Babel hub');
+  }
+
+  const filename = file.opts?.filename || 'unknown file';
+  const lineNumber = path.node.loc?.start.line ?? 'unknown line';
+  log(`Optimizing View component in ${filename}:${lineNumber}`);
+
+  // Add ViewNativeComponent import (cached on the file) to prevent duplicate imports.
+  if (!file.__hasImports) {
+    file.__hasImports = {};
+  }
+  if (!file.__hasImports.ViewNativeComponent) {
+    file.__hasImports.NativeView = addDefault(path, 'react-native/Libraries/Components/View/ViewNativeComponent', {
+      nameHint: 'NativeView',
+    });
+  }
+  const viewNativeIdentifier = file.__hasImports.NativeView;
+
+  // Replace the component with its native counterpart.
+  path.node.name.name = viewNativeIdentifier.name;
+
+  // If the element is not self-closing, update the closing element as well.
+  if (
+    !path.node.selfClosing &&
+    parent.closingElement &&
+    t.isJSXIdentifier(parent.closingElement.name) &&
+    parent.closingElement.name.name === 'View'
+  ) {
+    parent.closingElement.name.name = viewNativeIdentifier.name;
+  }
+};
+
+/**
+ * Returns true if any ancestor element is a <Text />.
+ * TODO: This is dangerous as we can't resolve custom components and check if they have a <Text /> ancestor in the tree
+ */
+function hasTextAncestor(path: NodePath<t.JSXOpeningElement>): boolean {
+  return !!path.findParent((parentPath) => {
+    return t.isJSXElement(parentPath.node) && t.isJSXIdentifier(parentPath.node.openingElement.name, { name: 'Text' });
+  });
+}

package/src/plugin/types/index.ts

@@ -1,6 +1,10 @@
 import { NodePath, types as t } from '@babel/core';
 
 export interface PluginOptions {
+  /**
+   * Paths to ignore from optimization. Relative to the Babel configuration file.
+   */
+  ignores?: string[];
   /**
    * Whether or not to log optimized files to the console.
    * @default false
@@ -11,10 +15,15 @@ export interface PluginOptions {
    */
   optimizations?: {
     /**
-     * Whether or not to optimize the text component.
+     * Whether or not to optimize the Text component.
      * @default true
      */
     text?: boolean;
+    /**
+     * Whether or not to optimize the View component.
+     * @default true
+     */
+    view?: boolean;
   };
 }
 

package/src/plugin/utils/common.ts

@@ -1,5 +1,43 @@
 import { NodePath, types as t } from '@babel/core';
 import { ensureArray } from './helpers';
+import { HubFile } from '../types';
+import { minimatch } from 'minimatch';
+import path from 'node:path';
+import PluginError from './plugin-error';
+
+/**
+ * Checks if the file is in the list of ignored files.
+ *
+ * @param p - The path to the JSXOpeningElement.
+ * @param ignores - List of glob paths (absolute or relative to import.meta.dirname).
+ * @returns true if the file matches any of the ignore patterns.
+ */
+export const isIgnoredFile = (p: NodePath<t.JSXOpeningElement>, ignores: string[]): boolean => {
+  const hub = p.hub as unknown;
+  const file = typeof hub === 'object' && hub !== null && 'file' in hub ? (hub.file as HubFile) : undefined;
+
+  if (!file) {
+    throw new PluginError('No file found in Babel hub');
+  }
+
+  const fileName = file.opts.filename;
+
+  // Use the current working directory which typically corresponds to the user's project root.
+  const baseDirectory = 'cwd' in file.opts ? (file.opts.cwd as string) : process.cwd();
+
+  // Iterate through the ignore patterns.
+  for (const pattern of ignores) {
+    // If the pattern is not absolute, join it with the baseDir
+    const absolutePattern = path.isAbsolute(pattern) ? pattern : path.join(baseDirectory, pattern);
+
+    // Check if the file name matches the glob pattern.
+    if (minimatch(fileName, absolutePattern, { dot: true })) {
+      return true;
+    }
+  }
+
+  return false;
+};
 
 /**
  * Checks if the JSX element should be ignored based on a preceding comment.
@@ -70,3 +108,36 @@ export const shouldIgnoreOptimization = (path: NodePath<t.JSXOpeningElement>): b
   }
   return false;
 };
+
+export const hasBlacklistedProperty = (path: NodePath<t.JSXOpeningElement>, blacklist: Set<string>): boolean => {
+  return path.node.attributes.some((attribute) => {
+    // Check if we can resolve the spread attribute
+    if (t.isJSXSpreadAttribute(attribute)) {
+      if (t.isIdentifier(attribute.argument)) {
+        const binding = path.scope.getBinding(attribute.argument.name);
+        let objectExpression: t.ObjectExpression | undefined;
+        if (binding) {
+          // If the binding node is a VariableDeclarator, use its initializer
+          if (t.isVariableDeclarator(binding.path.node)) {
+            objectExpression = binding.path.node.init as t.ObjectExpression;
+          } else if (t.isObjectExpression(binding.path.node)) {
+            objectExpression = binding.path.node;
+          }
+        }
+        if (objectExpression && t.isObjectExpression(objectExpression)) {
+          return objectExpression.properties.some((property) => {
+            if (t.isObjectProperty(property) && t.isIdentifier(property.key)) {
+              return blacklist.has(property.key.name);
+            }
+            return false;
+          });
+        }
+      }
+      // Bail if we can't resolve the spread attribute
+      return true;
+    }
+
+    // For other attribute types (e.g. namespaced), assume no blacklisting
+    return false;
+  });
+};