react-native-boost 0.4.1 → 0.5.0

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

@@ -1,20 +1,16 @@
 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 { hasBlacklistedProperty, shouldIgnoreOptimization } from '../../utils/common';
+import {
+  addFileImportHint,
+  buildPropertiesFromAttributes,
+  hasAccessibilityProperty,
+  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',
@@ -78,16 +74,93 @@ export const textOptimizer: Optimizer = (path, log = () => {}) => {
 
   // Optimize props
   fixNegativeNumberOfLines({ path, log });
-  optimizeStyleTag({ path, file });
 
-  // Add TextNativeComponent import (cached on file) so we only add it once per file
-  if (!file.__hasImports) {
-    file.__hasImports = {};
+  // Process style and accessibility props
+  const originalAttributes = [...path.node.attributes];
+  let styleAttribute, styleExpr;
+  for (const attribute of originalAttributes) {
+    if (t.isJSXAttribute(attribute) && t.isJSXIdentifier(attribute.name, { name: 'style' })) {
+      styleAttribute = attribute;
+      break;
+    }
   }
-  if (!file.__hasImports.NativeText) {
-    file.__hasImports.NativeText = addNamed(path, 'NativeText', 'react-native/Libraries/Text/TextNativeComponent');
+  if (
+    styleAttribute &&
+    styleAttribute.value &&
+    t.isJSXExpressionContainer(styleAttribute.value) &&
+    !t.isJSXEmptyExpression(styleAttribute.value.expression)
+  ) {
+    styleExpr = styleAttribute.value.expression;
   }
-  const nativeTextIdentifier = file.__hasImports.NativeText;
+  const hasA11y = hasAccessibilityProperty(path, originalAttributes);
+
+  if (styleExpr && hasA11y) {
+    // When both style and accessibility properties exist, we split them into two separate spread attributes
+
+    // Filter out the style attribute for accessibility props
+    const accessibilityAttributes = originalAttributes.filter((attribute) => {
+      if (t.isJSXAttribute(attribute) && t.isJSXIdentifier(attribute.name, { name: 'style' })) {
+        return false;
+      }
+      return true;
+    });
+
+    // Set up the accessibility import if needed
+    const normalizeIdentifier = addFileImportHint({
+      file,
+      nameHint: 'normalizeAccessibilityProps',
+      path,
+      importName: 'normalizeAccessibilityProps',
+      moduleName: 'react-native-boost',
+    });
+    const accessibilityObject = buildPropertiesFromAttributes(accessibilityAttributes);
+    const accessibilityExpr = t.callExpression(t.identifier(normalizeIdentifier.name), [accessibilityObject]);
+
+    // Set up the style import if needed.
+    const flattenIdentifier = addFileImportHint({
+      file,
+      nameHint: 'flattenTextStyle',
+      path,
+      importName: 'flattenTextStyle',
+      moduleName: 'react-native-boost',
+    });
+    const flattenedStyleExpr = t.callExpression(t.identifier(flattenIdentifier.name), [styleExpr]);
+
+    // Use two separate JSX spread attributes so that accessibility and style props remain distinct.
+    path.node.attributes = [t.jsxSpreadAttribute(accessibilityExpr), t.jsxSpreadAttribute(flattenedStyleExpr)];
+  } else if (styleExpr) {
+    // Only style attribute is present.
+    const flattenIdentifier = addFileImportHint({
+      file,
+      nameHint: 'flattenTextStyle',
+      path,
+      importName: 'flattenTextStyle',
+      moduleName: 'react-native-boost',
+    });
+    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: 'normalizeAccessibilityProps',
+      path,
+      importName: 'normalizeAccessibilityProps',
+      moduleName: 'react-native-boost',
+    });
+    const propsObject = buildPropertiesFromAttributes(originalAttributes);
+    const normalized = t.callExpression(t.identifier(normalizeIdentifier.name), [propsObject]);
+    path.node.attributes = [t.jsxSpreadAttribute(normalized)];
+  }
+
+  // Add TextNativeComponent import (cached on file) so we only add it once per file.
+  const nativeTextIdentifier = addFileImportHint({
+    file,
+    nameHint: 'NativeText',
+    path,
+    importName: 'NativeText',
+    moduleName: 'react-native/Libraries/Text/TextNativeComponent',
+  });
   path.node.name.name = nativeTextIdentifier.name;
 
   // If the element is not self-closing, update the closing element as well
@@ -106,17 +179,16 @@ function hasOnlyStringChildren(path: NodePath<t.JSXOpeningElement>, node: t.JSXE
 }
 
 function isStringNode(path: NodePath<t.JSXOpeningElement>, child: t.Node): boolean {
-  if (t.isJSXText(child)) return true;
+  if (t.isJSXText(child) || t.isStringLiteral(child)) return true;
 
   // Check for JSX expressions
   if (t.isJSXExpressionContainer(child)) {
     const expression = child.expression;
-
-    // If the expression is an identifier, look it up in the current scope
     if (t.isIdentifier(expression)) {
       const binding = path.scope.getBinding(expression.name);
       return binding ? t.isStringLiteral(binding.path.node) : false;
     }
+    if (t.isStringLiteral(expression)) return true;
   }
   return false;
 }
@@ -155,38 +227,19 @@ function fixNegativeNumberOfLines({
   }
 }
 
-function optimizeStyleTag({ path, file }: { path: NodePath<t.JSXOpeningElement>; file: HubFile }) {
-  let shouldImportFlattenTextStyle = false;
-  const nameHint = '_flattenTextStyle';
-
-  for (const [index, attribute] of path.node.attributes.entries()) {
-    if (t.isJSXAttribute(attribute) && t.isJSXIdentifier(attribute.name, { name: 'style' })) {
-      shouldImportFlattenTextStyle = true;
-
-      if (t.isJSXExpressionContainer(attribute.value) && !t.isJSXEmptyExpression(attribute.value.expression)) {
-        path.node.attributes[index] = t.jsxSpreadAttribute(
-          t.callExpression(t.identifier(nameHint), [attribute.value.expression])
-        );
-      }
-    }
-  }
-
-  if (shouldImportFlattenTextStyle && !file.__hasImports?.flattenTextStyle) {
-    if (!file.__hasImports) file.__hasImports = {};
-    file.__hasImports.flattenTextStyle = addNamed(path, 'flattenTextStyle', 'react-native-boost', { nameHint });
-  }
-}
-
 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.isJSXSpreadAttribute(attribute)) continue; // 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);
+        if (!isStringNode(path, attribute.value)) {
+          return true;
+        }
+      } else if (textBlacklistedProperties.has(attribute.name.name)) {
+        return true;
       }
-      return textBlacklistedProperties.has(attribute.name.name);
     }
   }
   return false;

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

@@ -1,8 +1,7 @@
 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';
+import { addFileImportHint, hasBlacklistedProperty, shouldIgnoreOptimization } from '../../utils/common';
 
 export const viewBlacklistedProperties = new Set([
   'accessible',
@@ -79,15 +78,14 @@ export const viewOptimizer: Optimizer = (path, log = () => {}) => {
   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;
+  const viewNativeIdentifier = addFileImportHint({
+    file,
+    path,
+    importName: 'ViewNativeComponent',
+    moduleName: 'react-native/Libraries/Components/View/ViewNativeComponent',
+    importType: 'default',
+    nameHint: 'NativeView',
+  });
 
   // Replace the component with its native counterpart.
   path.node.name.name = viewNativeIdentifier.name;

package/src/plugin/types/index.ts

@@ -36,3 +36,26 @@ export type HubFile = t.File & {
   __hasImports?: Record<string, t.Identifier>;
   __optimized?: boolean;
 };
+
+/**
+ * Options for adding a file import hint.
+ */
+export interface FileImportOptions {
+  file: HubFile;
+  /** The name hint which also acts as the cache key to ensure the import is only added once (e.g. 'normalizeAccessibilityProps') */
+  nameHint: string;
+  /** The current Babel NodePath */
+  path: NodePath;
+  /**
+   * The named import string (e.g. 'normalizeAccessibilityProps'). Ignored if importType is "default".
+   */
+  importName: string;
+  /** The module to import from (e.g. 'react-native-boost') */
+  moduleName: string;
+  /**
+   * Determines which helper to use:
+   * - "named" (default) uses addNamed (requires importName)
+   * - "default" uses addDefault
+   */
+  importType?: 'named' | 'default';
+}

package/src/plugin/utils/common.ts

@@ -1,10 +1,41 @@
 import { NodePath, types as t } from '@babel/core';
 import { ensureArray } from './helpers';
-import { HubFile } from '../types';
+import { FileImportOptions, HubFile } from '../types';
 import { minimatch } from 'minimatch';
 import path from 'node:path';
 import PluginError from './plugin-error';
+import { addDefault, addNamed } from '@babel/helper-module-imports';
 
+/**
+ * Adds a hint to the file object to ensure that a specific import is added only once and cached on the file object.
+ *
+ * @param opts - Object containing the function arguments:
+ *   - file: The Babel file object (e.g. HubFile)
+ *   - 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')
+ *   - importType: Either 'named' (default) or 'default' to determine the type of import to use.
+ *
+ * @returns The identifier returned by addNamed or addDefault.
+ */
+export function addFileImportHint({
+  file,
+  nameHint,
+  path,
+  importName,
+  moduleName,
+  importType = 'named',
+}: FileImportOptions): t.Identifier {
+  if (!file.__hasImports?.[nameHint]) {
+    file.__hasImports = file.__hasImports || {};
+    file.__hasImports[nameHint] =
+      importType === 'default'
+        ? addDefault(path, moduleName, { nameHint })
+        : addNamed(path, importName, moduleName, { nameHint });
+  }
+  return file.__hasImports[nameHint];
+}
 /**
  * Checks if the file is in the list of ignored files.
  *
@@ -44,6 +75,9 @@ export const isIgnoredFile = (p: NodePath<t.JSXOpeningElement>, ignores: string[
  *
  * The function looks up the JSXOpeningElement's own leading comments as well as
  * the parent element's comments before falling back to inspect siblings.
+ *
+ * @param path - The path to the JSXOpeningElement.
+ * @returns true if the JSX element should be ignored.
  */
 export const shouldIgnoreOptimization = (path: NodePath<t.JSXOpeningElement>): boolean => {
   // Check for @boost-ignore in the leading comments on the JSX opening element.
@@ -109,6 +143,13 @@ export const shouldIgnoreOptimization = (path: NodePath<t.JSXOpeningElement>): b
   return false;
 };
 
+/**
+ * Checks if the JSX element has a blacklisted property.
+ *
+ * @param path - The path to the JSXOpeningElement.
+ * @param blacklist - The set of blacklisted properties.
+ * @returns true if the JSX element has a blacklisted property.
+ */
 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
@@ -141,3 +182,115 @@ export const hasBlacklistedProperty = (path: NodePath<t.JSXOpeningElement>, blac
     return false;
   });
 };
+
+/**
+ * Helper that builds an Object.assign expression out of the existing JSX attributes.
+ * It handles both plain JSXAttributes and spread attributes.
+ *
+ * @param attributes - The attributes to build the expression from.
+ * @returns The Object.assign expression.
+ */
+export const buildPropertiesFromAttributes = (attributes: (t.JSXAttribute | t.JSXSpreadAttribute)[]): t.Expression => {
+  const arguments_: t.Expression[] = [];
+  for (const attribute of attributes) {
+    if (t.isJSXSpreadAttribute(attribute)) {
+      arguments_.push(attribute.argument);
+    } else if (t.isJSXAttribute(attribute)) {
+      const key = attribute.name.name;
+      let value: t.Expression;
+      if (!attribute.value) {
+        value = t.booleanLiteral(true);
+      } else if (t.isStringLiteral(attribute.value)) {
+        value = attribute.value;
+      } else if (t.isJSXExpressionContainer(attribute.value)) {
+        value = t.isJSXEmptyExpression(attribute.value.expression)
+          ? t.booleanLiteral(true)
+          : attribute.value.expression;
+      } else {
+        value = t.nullLiteral();
+      }
+      // If the key is not a valid JavaScript identifier (e.g. "aria-label"), use a string literal.
+      const validIdentifierRegex = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;
+      const keyNode =
+        typeof key === 'string' && validIdentifierRegex.test(key) ? t.identifier(key) : t.stringLiteral(key.toString());
+
+      arguments_.push(t.objectExpression([t.objectProperty(keyNode, value)]));
+    }
+  }
+  if (arguments_.length === 0) {
+    return t.objectExpression([]);
+  }
+  return t.callExpression(t.memberExpression(t.identifier('Object'), t.identifier('assign')), [
+    t.objectExpression([]),
+    ...arguments_,
+  ]);
+};
+
+/**
+ * The set of accessibility properties that need to be normalized.
+ */
+export const accessibilityProperties = new Set([
+  'accessibilityLabel',
+  'aria-label',
+  'accessibilityState',
+  'aria-busy',
+  'aria-checked',
+  'aria-disabled',
+  'aria-expanded',
+  'aria-selected',
+  'accessible',
+]);
+
+/**
+ * Checks if the JSX element has an accessibility property.
+ *
+ * @param path - The NodePath for the JSXOpeningElement, used for scope lookup.
+ * @param attributes - The attributes to check.
+ * @returns true if the JSX element has an accessibility property.
+ */
+export const hasAccessibilityProperty = (
+  path: NodePath<t.JSXOpeningElement>,
+  attributes: (t.JSXAttribute | t.JSXSpreadAttribute)[]
+): boolean => {
+  for (const attribute of attributes) {
+    if (t.isJSXAttribute(attribute)) {
+      const key = attribute.name.name;
+      if (typeof key === 'string' && accessibilityProperties.has(key)) {
+        return true;
+      }
+    } else if (t.isJSXSpreadAttribute(attribute)) {
+      if (t.isObjectExpression(attribute.argument)) {
+        for (const property of attribute.argument.properties) {
+          if (
+            t.isObjectProperty(property) &&
+            t.isIdentifier(property.key) &&
+            accessibilityProperties.has(property.key.name)
+          ) {
+            return true;
+          }
+        }
+      } else if (t.isIdentifier(attribute.argument)) {
+        const binding = path.scope.getBinding(attribute.argument.name);
+        if (binding && t.isVariableDeclarator(binding.path.node)) {
+          const declarator = binding.path.node as t.VariableDeclarator;
+          if (declarator.init && t.isObjectExpression(declarator.init)) {
+            for (const property of declarator.init.properties) {
+              if (
+                t.isObjectProperty(property) &&
+                t.isIdentifier(property.key) &&
+                accessibilityProperties.has(property.key.name)
+              ) {
+                return true;
+              }
+            }
+            continue;
+          }
+        }
+        return true;
+      } else {
+        return true;
+      }
+    }
+  }
+  return false;
+};

package/src/runtime/index.ts

@@ -55,4 +55,60 @@ export const verticalAlignToTextAlignVerticalMap = {
   middle: 'center',
 };
 
+/**
+ * Normalizes accessibility props.
+ *
+ * @param props - The props to normalize.
+ * @returns The normalized props.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function normalizeAccessibilityProperties(props: Record<string, any>): Record<string, any> {
+  const {
+    accessibilityLabel,
+    ['aria-label']: ariaLabel,
+    accessibilityState,
+    ['aria-busy']: ariaBusy,
+    ['aria-checked']: ariaChecked,
+    ['aria-disabled']: ariaDisabled,
+    ['aria-expanded']: ariaExpanded,
+    ['aria-selected']: ariaSelected,
+    accessible,
+    ...restProperties
+  } = props;
+
+  // Merge label props: prefer the aria-label if defined.
+  const normalizedLabel = ariaLabel ?? accessibilityLabel;
+
+  // Merge the accessibilityState with any provided ARIA properties.
+  let normalizedState = accessibilityState;
+  if (ariaBusy != null || ariaChecked != null || ariaDisabled != null || ariaExpanded != null || ariaSelected != null) {
+    normalizedState =
+      normalizedState == null
+        ? {
+            busy: ariaBusy,
+            checked: ariaChecked,
+            disabled: ariaDisabled,
+            expanded: ariaExpanded,
+            selected: ariaSelected,
+          }
+        : {
+            busy: ariaBusy ?? normalizedState.busy,
+            checked: ariaChecked ?? normalizedState.checked,
+            disabled: ariaDisabled ?? normalizedState.disabled,
+            expanded: ariaExpanded ?? normalizedState.expanded,
+            selected: ariaSelected ?? normalizedState.selected,
+          };
+  }
+
+  // For the accessible prop, if not provided, default to `true`
+  const normalizedAccessible = accessible == null ? true : accessible;
+
+  return {
+    ...restProperties,
+    accessibilityLabel: normalizedLabel,
+    accessibilityState: normalizedState,
+    accessible: normalizedAccessible,
+  };
+}
+
 export * from './types';