react-native-boost 0.6.2 → 0.7.0

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

@@ -2,6 +2,7 @@ import { NodePath, types as t } from '@babel/core';
 import { HubFile, Optimizer } from '../../types';
 import PluginError from '../../utils/plugin-error';
 import {
+  addDefaultProperty,
   addFileImportHint,
   buildPropertiesFromAttributes,
   hasAccessibilityProperty,
@@ -11,12 +12,13 @@ import {
   isReactNativeImport,
   replaceWithNativeComponent,
   isStringNode,
+  hasExpoRouterLinkParentWithAsChild,
 } from '../../utils/common';
 import { RUNTIME_MODULE_NAME } from '../../utils/constants';
+import { ACCESSIBILITY_PROPERTIES } from '../../utils/constants';
+import { extractStyleAttribute, extractSelectableAndUpdateStyle } from '../../utils/common';
 
 export const textBlacklistedProperties = new Set([
-  'allowFontScaling',
-  'ellipsizeMode',
   'id',
   'nativeID',
   'onLongPress',
@@ -31,8 +33,7 @@ export const textBlacklistedProperties = new Set([
   'onStartShouldSetResponder',
   'pressRetentionOffset',
   'suppressHighlighting',
-  'selectable',
-  'selectionColor',
+  'selectionColor', // TODO: we can use react-native's internal `processColor` to process this at runtime
 ]);
 
 export const textOptimizer: Optimizer = (path, log = () => {}) => {
@@ -40,6 +41,7 @@ export const textOptimizer: Optimizer = (path, log = () => {}) => {
   if (!isValidJSXComponent(path, 'Text')) return;
   if (!isReactNativeImport(path, 'Text')) return;
   if (hasBlacklistedProperty(path, textBlacklistedProperties)) return;
+  if (hasExpoRouterLinkParentWithAsChild(path)) return;
 
   // Verify that the Text only has string children
   const parent = path.parent as t.JSXElement;
@@ -57,9 +59,10 @@ export const textOptimizer: Optimizer = (path, log = () => {}) => {
   log(`Optimizing Text component in ${filename}:${lineNumber}`);
 
   // Process props
-  const originalAttributes = [...path.node.attributes];
   fixNegativeNumberOfLines({ path, log });
-  processProps(path, file, originalAttributes);
+  addDefaultProperty(path, 'allowFontScaling', t.booleanLiteral(true));
+  addDefaultProperty(path, 'ellipsizeMode', t.stringLiteral('tail'));
+  processProps(path, file);
 
   // Replace the Text component with NativeText
   replaceWithNativeComponent(path, parent, file, 'NativeText');
@@ -129,49 +132,29 @@ function fixNegativeNumberOfLines({
   }
 }
 
-/**
- * Extracts the style attribute from JSX attributes.
- */
-function extractStyleAttribute(attributes: Array<t.JSXAttribute | t.JSXSpreadAttribute>): {
-  styleAttribute?: t.JSXAttribute;
-  styleExpr?: t.Expression;
-} {
-  for (const attribute of attributes) {
-    if (t.isJSXAttribute(attribute) && t.isJSXIdentifier(attribute.name, { name: 'style' })) {
-      if (
-        attribute.value &&
-        t.isJSXExpressionContainer(attribute.value) &&
-        !t.isJSXEmptyExpression(attribute.value.expression)
-      ) {
-        return {
-          styleAttribute: attribute,
-          styleExpr: attribute.value.expression,
-        };
-      }
-      return { styleAttribute: attribute };
-    }
-  }
-  return {};
-}
-
 /**
  * Processes style and accessibility attributes, replacing them with optimized versions.
  */
-function processProps(
-  path: NodePath<t.JSXOpeningElement>,
-  file: HubFile,
-  originalAttributes: Array<t.JSXAttribute | t.JSXSpreadAttribute>
-) {
-  const { styleExpr } = extractStyleAttribute(originalAttributes);
-  const hasA11y = hasAccessibilityProperty(path, originalAttributes);
-
-  if (styleExpr && hasA11y) {
-    // When both style and accessibility properties exist, we split them into two separate spread attributes
-    const accessibilityAttributes = originalAttributes.filter(
-      (attribute) => !(t.isJSXAttribute(attribute) && t.isJSXIdentifier(attribute.name, { name: 'style' }))
-    );
-
-    // Set up the accessibility import
+function processProps(path: NodePath<t.JSXOpeningElement>, file: HubFile) {
+  // Grab the up-to-date list of attributes
+  const currentAttributes = [...path.node.attributes];
+
+  const { styleExpr, styleAttribute } = extractStyleAttribute(currentAttributes);
+  const hasA11y = hasAccessibilityProperty(path, currentAttributes);
+
+  // ============================================
+  // 1. Prepare spread attributes (style / a11y)
+  // ============================================
+
+  const spreadAttributes: t.JSXSpreadAttribute[] = [];
+
+  // --- Accessibility ---
+  if (hasA11y) {
+    const accessibilityAttributes = currentAttributes.filter((attribute) => {
+      if (!t.isJSXAttribute(attribute)) return false;
+      return t.isJSXIdentifier(attribute.name) && ACCESSIBILITY_PROPERTIES.has(attribute.name.name as string);
+    });
+
     const normalizeIdentifier = addFileImportHint({
       file,
       nameHint: 'processAccessibilityProps',
@@ -179,10 +162,25 @@ function processProps(
       importName: 'processAccessibilityProps',
       moduleName: RUNTIME_MODULE_NAME,
     });
+
     const accessibilityObject = buildPropertiesFromAttributes(accessibilityAttributes);
     const accessibilityExpr = t.callExpression(t.identifier(normalizeIdentifier.name), [accessibilityObject]);
+    spreadAttributes.push(t.jsxSpreadAttribute(accessibilityExpr));
+  }
+
+  // --- Style ---
+  let selectableAttribute: t.JSXAttribute | undefined;
+  if (styleExpr) {
+    // Attempt a compile-time extraction of `userSelect`
+    const selectableValue = extractSelectableAndUpdateStyle(styleExpr);
+
+    if (selectableValue != null) {
+      selectableAttribute = t.jsxAttribute(
+        t.jsxIdentifier('selectable'),
+        t.jsxExpressionContainer(t.booleanLiteral(selectableValue))
+      );
+    }
 
-    // Set up the style import
     const flattenIdentifier = addFileImportHint({
       file,
       nameHint: 'processTextStyle',
@@ -191,31 +189,32 @@ function processProps(
       moduleName: RUNTIME_MODULE_NAME,
     });
     const flattenedStyleExpr = t.callExpression(t.identifier(flattenIdentifier.name), [styleExpr]);
+    spreadAttributes.push(t.jsxSpreadAttribute(flattenedStyleExpr));
+  }
 
-    // Use two separate JSX spread attributes
-    path.node.attributes = [t.jsxSpreadAttribute(accessibilityExpr), t.jsxSpreadAttribute(flattenedStyleExpr)];
-  } else if (styleExpr) {
-    // Only style attribute is present
-    const flattenIdentifier = addFileImportHint({
-      file,
-      nameHint: 'processTextStyle',
-      path,
-      importName: 'processTextStyle',
-      moduleName: RUNTIME_MODULE_NAME,
-    });
-    const flattened = t.callExpression(t.identifier(flattenIdentifier.name), [styleExpr]);
-    path.node.attributes = [t.jsxSpreadAttribute(flattened)];
-  } else if (hasA11y) {
-    // Only accessibility properties are present
-    const normalizeIdentifier = addFileImportHint({
-      file,
-      nameHint: 'processAccessibilityProps',
-      path,
-      importName: 'processAccessibilityProps',
-      moduleName: RUNTIME_MODULE_NAME,
-    });
-    const propsObject = buildPropertiesFromAttributes(originalAttributes);
-    const normalized = t.callExpression(t.identifier(normalizeIdentifier.name), [propsObject]);
-    path.node.attributes = [t.jsxSpreadAttribute(normalized)];
+  // ============================================
+  // 2. Collect the remaining (non-processed) attributes
+  // ============================================
+  const remainingAttributes: (t.JSXAttribute | t.JSXSpreadAttribute)[] = [];
+
+  for (const attribute of currentAttributes) {
+    // Skip the style attribute (we have replaced it with a spread)
+    if (styleAttribute && attribute === styleAttribute) continue;
+
+    // Skip accessibility attributes if we processed them
+    if (
+      hasA11y &&
+      t.isJSXAttribute(attribute) &&
+      t.isJSXIdentifier(attribute.name) &&
+      ACCESSIBILITY_PROPERTIES.has(attribute.name.name as string)
+    ) {
+      continue;
+    }
+
+    remainingAttributes.push(attribute);
   }
+
+  path.node.attributes = [...spreadAttributes, selectableAttribute, ...remainingAttributes].filter(
+    (attribute): attribute is t.JSXAttribute | t.JSXSpreadAttribute => attribute !== undefined
+  );
 }

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

@@ -7,51 +7,31 @@ import {
   isValidJSXComponent,
   isReactNativeImport,
   replaceWithNativeComponent,
-  hasComponentAncestor,
+  hasUnsafeViewAncestor,
 } from '../../utils/common';
 
 export const viewBlacklistedProperties = new Set([
+  // TODO: process a11y props at runtime
   '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',
+  'style', // TODO: process style at runtime
 ]);
 
-// Components to skip when checking for indirect Text ancestors
-const skipComponents = ['View', 'Fragment', 'ScrollView', 'FlatList'];
-
-export const viewOptimizer: Optimizer = (path, log = () => {}) => {
+export const viewOptimizer: Optimizer = (path, log = () => {}, options) => {
   if (isIgnoredLine(path)) return;
   if (!isValidJSXComponent(path, 'View')) return;
   if (!isReactNativeImport(path, 'View')) return;
   if (hasBlacklistedProperty(path, viewBlacklistedProperties)) return;
-  if (hasComponentAncestor(path, 'Text', skipComponents)) return;
+  if (hasUnsafeViewAncestor(path, options?.dangerouslyOptimizeViewWithUnknownAncestors === true)) return;
 
   // Extract the file from the Babel hub
   const hub = path.hub as unknown;

package/src/plugin/types/index.ts

@@ -25,9 +25,20 @@ export interface PluginOptions {
      */
     view?: boolean;
   };
+  /**
+   * Opt-in flag that allows View optimization when ancestor components cannot be statically resolved.
+   *
+   * This may introduce behavioral changes when unresolved ancestors render react-native Text wrappers.
+   * @default false
+   */
+  dangerouslyOptimizeViewWithUnknownAncestors?: boolean;
 }
 
-export type Optimizer = (path: NodePath<t.JSXOpeningElement>, log?: (message: string) => void) => void;
+export type Optimizer = (
+  path: NodePath<t.JSXOpeningElement>,
+  log?: (message: string) => void,
+  options?: PluginOptions
+) => void;
 
 export type HubFile = t.File & {
   opts: {

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

@@ -1,5 +1,6 @@
 import { NodePath, types as t } from '@babel/core';
 import { ACCESSIBILITY_PROPERTIES } from '../constants';
+import { USER_SELECT_STYLE_TO_SELECTABLE_PROP } from '../constants';
 
 /**
  * Checks if the JSX element has a blacklisted property.
@@ -46,6 +47,67 @@ export const hasBlacklistedProperty = (path: NodePath<t.JSXOpeningElement>, blac
   });
 };
 
+/**
+ * Adds a default property to a JSX element if it's not already defined. It avoids adding a default
+ * if it cannot statically determine whether the property is already set.
+ *
+ * @param path - The path to the JSXOpeningElement.
+ * @param key - The property key.
+ * @param value - The default value expression.
+ */
+export const addDefaultProperty = (path: NodePath<t.JSXOpeningElement>, key: string, value: t.Expression) => {
+  let propertyIsFound = false;
+  let hasUnresolvableSpread = false;
+
+  for (const attribute of path.node.attributes) {
+    if (t.isJSXAttribute(attribute) && attribute.name.name === key) {
+      propertyIsFound = true;
+      break;
+    }
+
+    if (t.isJSXSpreadAttribute(attribute)) {
+      if (t.isObjectExpression(attribute.argument)) {
+        const propertyInSpread = attribute.argument.properties.some(
+          (p) =>
+            (t.isObjectProperty(p) && t.isIdentifier(p.key) && p.key.name === key) ||
+            (t.isObjectProperty(p) && t.isStringLiteral(p.key) && p.key.value === key)
+        );
+        if (propertyInSpread) {
+          propertyIsFound = true;
+          break;
+        }
+      } else if (t.isIdentifier(attribute.argument)) {
+        const binding = path.scope.getBinding(attribute.argument.name);
+        if (
+          binding?.path.node &&
+          t.isVariableDeclarator(binding.path.node) &&
+          t.isObjectExpression(binding.path.node.init)
+        ) {
+          const propertyInSpread = binding.path.node.init.properties.some(
+            (p) =>
+              (t.isObjectProperty(p) && t.isIdentifier(p.key) && p.key.name === key) ||
+              (t.isObjectProperty(p) && t.isStringLiteral(p.key) && p.key.value === key)
+          );
+          if (propertyInSpread) {
+            propertyIsFound = true;
+            break;
+          }
+        } else {
+          hasUnresolvableSpread = true;
+          break;
+        }
+      } else {
+        hasUnresolvableSpread = true;
+        break;
+      }
+    }
+  }
+
+  if (!propertyIsFound && !hasUnresolvableSpread) {
+    path.node.attributes.push(t.jsxAttribute(t.jsxIdentifier(key), t.jsxExpressionContainer(value)));
+  }
+};
+
 /**
  * Helper that builds an Object.assign expression out of the existing JSX attributes.
  * It handles both plain JSXAttributes and spread attributes.
@@ -142,3 +204,106 @@ export const hasAccessibilityProperty = (
   }
   return false;
 };
+
+/**
+ * Extracts the `style` attribute from a JSX attributes list.
+ *
+ * @returns An object containing the attribute node itself (if found) and the expression inside
+ */
+export function extractStyleAttribute(attributes: Array<t.JSXAttribute | t.JSXSpreadAttribute>): {
+  styleAttribute?: t.JSXAttribute;
+  styleExpr?: t.Expression;
+} {
+  for (const attribute of attributes) {
+    if (t.isJSXAttribute(attribute) && t.isJSXIdentifier(attribute.name, { name: 'style' })) {
+      if (
+        attribute.value &&
+        t.isJSXExpressionContainer(attribute.value) &&
+        !t.isJSXEmptyExpression(attribute.value.expression)
+      ) {
+        return {
+          styleAttribute: attribute,
+          styleExpr: attribute.value.expression,
+        };
+      }
+      return { styleAttribute: attribute };
+    }
+  }
+  return {};
+}
+
+/**
+ * Attempts to statically extract the `userSelect` style property from a style expression.
+ *
+ * If the `userSelect` value can be resolved at compile-time, the property is removed from the
+ * object literal (or array element) and its mapped boolean value for the native `selectable`
+ * prop is returned. When the value is unknown or the expression is not statically analysable,
+ * `undefined` is returned and no modification is made.
+ */
+export function extractSelectableAndUpdateStyle(styleExpr: t.Expression): boolean | undefined {
+  // Helper to process a single ObjectExpression
+  const handleObjectExpression = (objectExpr: t.ObjectExpression): boolean | undefined => {
+    let selectableValue: boolean | undefined;
+
+    objectExpr.properties = objectExpr.properties.filter((property) => {
+      if (
+        !t.isObjectProperty(property) ||
+        (!t.isIdentifier(property.key, { name: 'userSelect' }) &&
+          !(t.isStringLiteral(property.key) && property.key.value === 'userSelect'))
+      ) {
+        return true; // keep property
+      }
+
+      if (t.isStringLiteral(property.value)) {
+        const mapped = USER_SELECT_STYLE_TO_SELECTABLE_PROP[property.value.value];
+        if (mapped !== undefined) {
+          selectableValue = mapped;
+        }
+      }
+
+      // Remove the `userSelect` property
+      return false;
+    });
+
+    return selectableValue;
+  };
+
+  if (t.isObjectExpression(styleExpr)) {
+    return handleObjectExpression(styleExpr);
+  }
+
+  if (t.isArrayExpression(styleExpr)) {
+    let selectableValue: boolean | undefined;
+    for (const element of styleExpr.elements) {
+      if (element && t.isObjectExpression(element)) {
+        const value = handleObjectExpression(element);
+        if (value !== undefined) {
+          selectableValue = value; // prefer last defined value
+        }
+      }
+    }
+    return selectableValue;
+  }
+
+  return undefined; // not statically analysable
+}
+
+/**
+ * Checks if a node represents a string value.
+ */
+export const isStringNode = (path: NodePath<t.JSXOpeningElement>, child: t.Node): boolean => {
+  if (t.isJSXText(child) || t.isStringLiteral(child)) return true;
+
+  if (t.isJSXExpressionContainer(child)) {
+    const expression = child.expression;
+    if (t.isIdentifier(expression)) {
+      const binding = path.scope.getBinding(expression.name);
+      if (binding && binding.path.node && t.isVariableDeclarator(binding.path.node)) {
+        return !!binding.path.node.init && t.isStringLiteral(binding.path.node.init);
+      }
+      return false;
+    }
+    if (t.isStringLiteral(expression)) return true;
+  }
+  return false;
+};

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

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