react-native-boost 0.3.0 → 0.4.0

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;
+  });
+};