react-native-boost 0.7.0 → 1.1.0

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

@@ -39,54 +39,52 @@ export const isIgnoredFile = (path: NodePath<t.JSXOpeningElement>, ignores: stri
   return false;
 };
 
+export const isForcedLine = (path: NodePath<t.JSXOpeningElement>): boolean => {
+  return hasDecoratorComment(path, '@boost-force');
+};
+
+export const isIgnoredLine = (path: NodePath<t.JSXOpeningElement>): boolean => {
+  return hasDecoratorComment(path, '@boost-ignore');
+};
+
 /**
- * Checks if the JSX element should be ignored based on a preceding comment.
- *
- * The function looks up the JSXOpeningElement's own leading comments as well as
- * the parent element's comments before falling back to inspect siblings.
+ * Checks if the JSX element has a preceding comment containing the given decorator string.
  *
- * @param path - The path to the JSXOpeningElement.
- * @returns true if the JSX element should be ignored.
+ * Scans the JSXOpeningElement's own leading comments, the parent element's comments,
+ * ObjectProperty containers, and backward siblings.
  */
-export const isIgnoredLine = (path: NodePath<t.JSXOpeningElement>): boolean => {
-  // Check for @boost-ignore in the leading comments on the JSX opening element.
-  if (path.node.leadingComments?.some((comment) => comment.value.includes('@boost-ignore'))) {
+function hasDecoratorComment(path: NodePath<t.JSXOpeningElement>, decorator: string): boolean {
+  if (path.node.leadingComments?.some((comment) => comment.value.includes(decorator))) {
     return true;
   }
 
-  // Check for @boost-ignore in the leading comments on the parent JSX element.
   const jsxElementPath = path.parentPath;
-  if (jsxElementPath.node.leadingComments?.some((comment) => comment.value.includes('@boost-ignore'))) {
+  if (jsxElementPath.node.leadingComments?.some((comment) => comment.value.includes(decorator))) {
     return true;
   }
 
-  // NEW: Check for @boost-ignore in the leading comments on the ObjectProperty (if it exists)
-  // This handles cases where the JSX element is used as a value inside an object literal.
+  // Check leading comments on the ObjectProperty (if the JSX element is a value inside an object literal).
   const propertyPath = jsxElementPath.parentPath;
   if (
     propertyPath &&
     propertyPath.isObjectProperty() &&
-    propertyPath.node.leadingComments?.some((comment) => comment.value.includes('@boost-ignore'))
+    propertyPath.node.leadingComments?.some((comment) => comment.value.includes(decorator))
   ) {
     return true;
   }
 
   if (!jsxElementPath.parentPath) return false;
 
-  // Get the container that holds this element (for example, a JSX fragment or JSX element)
   const containerPath = jsxElementPath.parentPath;
   const siblings = ensureArray(containerPath.get('children'));
   const index = siblings.findIndex((sibling) => sibling.node === jsxElementPath.node);
   if (index === -1) return false;
 
-  // Look backward from the current element for a non-empty node.
   for (let index_ = index - 1; index_ >= 0; index_--) {
     const sibling = siblings[index_];
-    // Skip over any whitespace (only in JSXText nodes)
     if (sibling.isJSXText() && sibling.node.value.trim() === '') {
       continue;
     }
-    // If the sibling is a JSX expression container, check its empty expression's comments.
     if (sibling.isJSXExpressionContainer()) {
       const expression = sibling.get('expression');
       if (expression && expression.node) {
@@ -95,22 +93,21 @@ export const isIgnoredLine = (path: NodePath<t.JSXOpeningElement>): boolean => {
           ...(expression.node.trailingComments || []),
           ...(expression.node.innerComments || []),
         ].map((comment) => comment.value.trim());
-        if (comments.some((comment) => comment.includes('@boost-ignore'))) {
+        if (comments.some((comment) => comment.includes(decorator))) {
           return true;
         }
       }
     }
-    // Also check if the node itself carries a leadingComments property.
     if (
       sibling.node.leadingComments &&
-      sibling.node.leadingComments.some((comment) => comment.value.includes('@boost-ignore'))
+      sibling.node.leadingComments.some((comment) => comment.value.includes(decorator))
     ) {
       return true;
     }
-    break; // if the immediate non-whitespace node is not our ignore marker, stop
+    break;
   }
   return false;
-};
+}
 
 /**
  * Checks if the path represents a valid JSX component with the specified name.
@@ -181,6 +178,7 @@ export const isReactNativeImport = (path: NodePath<t.JSXOpeningElement>, expecte
 };
 
 type AncestorClassification = 'safe' | 'text' | 'unknown';
+export type ViewAncestorClassification = AncestorClassification;
 type ScopeBinding = NonNullable<ReturnType<NodePath<t.Node>['scope']['getBinding']>>;
 
 type AncestorAnalysisContext = {
@@ -189,11 +187,8 @@ type AncestorAnalysisContext = {
   renderExpressionInProgress: WeakSet<t.Node>;
 };
 
-export const hasUnsafeViewAncestor = (path: NodePath<t.JSXOpeningElement>, allowUnknownAncestors = false): boolean => {
-  const classification = classifyViewAncestors(path);
-  if (classification === 'text') return true;
-  if (classification === 'unknown' && !allowUnknownAncestors) return true;
-  return false;
+export const getViewAncestorClassification = (path: NodePath<t.JSXOpeningElement>): ViewAncestorClassification => {
+  return classifyViewAncestors(path);
 };
 
 function classifyViewAncestors(path: NodePath<t.JSXOpeningElement>): AncestorClassification {

package/src/plugin/utils/generate-test-plugin.ts

@@ -1,7 +1,13 @@
 import { declare } from '@babel/helper-plugin-utils';
 import { Optimizer, PluginOptions } from '../types';
+import { createLogger } from './logger';
 
 export const generateTestPlugin = (optimizer: Optimizer, options: PluginOptions = {}) => {
+  const logger = createLogger({
+    verbose: false,
+    silent: true,
+  });
+
   return declare((api) => {
     api.assertVersion(7);
 
@@ -9,7 +15,7 @@ export const generateTestPlugin = (optimizer: Optimizer, options: PluginOptions
       name: 'react-native-boost',
       visitor: {
         JSXOpeningElement(path) {
-          optimizer(path, undefined, options);
+          optimizer(path, logger, options);
         },
       },
     };

package/src/plugin/utils/helpers.ts

@@ -2,3 +2,18 @@ export const ensureArray = <T>(value: T | T[]): T[] => {
   if (Array.isArray(value)) return value;
   return [value];
 };
+
+export type BailoutCheck = {
+  reason: string;
+  shouldBail: () => boolean;
+};
+
+export const getFirstBailoutReason = (checks: readonly BailoutCheck[]): string | null => {
+  for (const check of checks) {
+    if (check.shouldBail()) {
+      return check.reason;
+    }
+  }
+
+  return null;
+};

package/src/plugin/utils/logger.ts

@@ -1,3 +1,124 @@
-export const log = (message: string) => {
-  console.log(`[react-native-boost] ${message}`);
+import {
+  HubFile,
+  OptimizationLogPayload,
+  PluginLogger,
+  SkippedOptimizationLogPayload,
+  WarningLogPayload,
+} from '../types';
+
+const LOG_PREFIX = '[react-native-boost]';
+
+const ANSI_RESET = '\u001B[0m';
+const ANSI_GREEN = '\u001B[32m';
+const ANSI_YELLOW = '\u001B[33m';
+const ANSI_MAGENTA = '\u001B[35m';
+const ANSI_RED = '\u001B[31m';
+
+export const noopLogger: PluginLogger = {
+  optimized() {},
+  skipped() {},
+  forced() {},
+  warning() {},
 };
+
+export const createLogger = ({ verbose, silent }: { verbose: boolean; silent: boolean }): PluginLogger => {
+  if (silent) return noopLogger;
+
+  return {
+    optimized(payload) {
+      writeLog('optimized', `Optimized ${payload.component} in ${formatPathLocation(payload.path)}`);
+    },
+    skipped(payload) {
+      if (!verbose) return;
+      writeLog('skipped', `Skipped ${payload.component} in ${formatPathLocation(payload.path)} (${payload.reason})`);
+    },
+    forced(payload) {
+      writeLog(
+        'forced',
+        `Force-optimized ${payload.component} in ${formatPathLocation(payload.path)} (skipped bailout: ${payload.reason})`
+      );
+    },
+    warning(payload) {
+      const context = formatWarningContext(payload);
+      const message = context.length > 0 ? `${context}: ${payload.message}` : payload.message;
+      writeLog('warning', message);
+    },
+  };
+};
+
+function formatWarningContext(payload: WarningLogPayload): string {
+  const location = formatPathLocation(payload.path);
+
+  if (payload.component && location.length > 0) {
+    return `${payload.component} in ${location}`;
+  }
+
+  if (payload.component) {
+    return payload.component;
+  }
+
+  return location;
+}
+
+type LogLevel = 'optimized' | 'skipped' | 'forced' | 'warning';
+
+function writeLog(level: LogLevel, message: string): void {
+  const levelTag = formatLevel(level);
+  console.log(`${LOG_PREFIX} ${levelTag} ${message}`);
+}
+
+function formatLevel(level: LogLevel): string {
+  if (level === 'optimized') {
+    return colorize('[optimized]', ANSI_GREEN);
+  }
+
+  if (level === 'skipped') {
+    return colorize('[skipped]', ANSI_YELLOW);
+  }
+
+  if (level === 'forced') {
+    return colorize('[forced]', ANSI_RED);
+  }
+
+  return colorize('[warning]', ANSI_MAGENTA);
+}
+
+function colorize(value: string, colorCode: string): string {
+  if (!shouldUseColor()) return value;
+  return `${colorCode}${value}${ANSI_RESET}`;
+}
+
+function shouldUseColor(): boolean {
+  if (process.env.NO_COLOR != null) return false;
+
+  if (process.env.FORCE_COLOR === '0') return false;
+  if (process.env.FORCE_COLOR != null) return true;
+
+  if (process.env.CLICOLOR === '0') return false;
+  if (process.env.CLICOLOR_FORCE != null && process.env.CLICOLOR_FORCE !== '0') return true;
+
+  if (process.stdout?.isTTY === true || process.stderr?.isTTY === true) {
+    return true;
+  }
+
+  const colorTerm = process.env.COLORTERM;
+  if (colorTerm != null && colorTerm !== '') {
+    return true;
+  }
+
+  const term = process.env.TERM;
+  return term != null && term !== '' && term.toLowerCase() !== 'dumb';
+}
+
+function formatPathLocation(
+  payloadPath: OptimizationLogPayload['path'] | SkippedOptimizationLogPayload['path'] | undefined
+): string {
+  if (!payloadPath) return 'unknown file:unknown line';
+
+  const hub = payloadPath.hub as unknown;
+  const file = typeof hub === 'object' && hub !== null && 'file' in hub ? (hub.file as HubFile) : undefined;
+  const filename = file?.opts?.filename ?? 'unknown file';
+  const lineNumber = payloadPath.node.loc?.start.line ?? 'unknown line';
+
+  return `${filename}:${lineNumber}`;
+}

package/src/runtime/components/native-text.tsx

@@ -1,7 +1,23 @@
 /* eslint-disable @typescript-eslint/no-require-imports,unicorn/prefer-module */
-import { Platform } from 'react-native';
 
-export const NativeText =
-  Platform.OS === 'web'
-    ? require('react-native').Text
-    : require('react-native/Libraries/Text/TextNativeComponent').NativeText;
+import type { ComponentType } from 'react';
+import type { TextProps } from 'react-native';
+
+const reactNative = require('react-native');
+const isWeb = reactNative.Platform.OS === 'web';
+
+let nativeText = reactNative.unstable_NativeText;
+
+if (isWeb || nativeText == null) {
+  // Fallback to regular Text component if unstable_NativeText is not available or we're on Web
+  nativeText = reactNative.Text;
+}
+
+/**
+ * Native Text component with graceful fallback.
+ *
+ * @remarks
+ * Uses `unstable_NativeText` on supported native runtimes and falls back to `Text`
+ * on web or when the unstable export is unavailable.
+ */
+export const NativeText: ComponentType<TextProps> = nativeText;

package/src/runtime/components/native-view.tsx

@@ -1,7 +1,23 @@
 /* eslint-disable @typescript-eslint/no-require-imports,unicorn/prefer-module */
-import { Platform } from 'react-native';
 
-export const NativeView =
-  Platform.OS === 'web'
-    ? require('react-native').View
-    : require('react-native/Libraries/Components/View/ViewNativeComponent').default;
+import type { ComponentType } from 'react';
+import type { ViewProps } from 'react-native';
+
+const reactNative = require('react-native');
+const isWeb = reactNative.Platform.OS === 'web';
+
+let nativeView = reactNative.unstable_NativeView;
+
+if (isWeb || nativeView == null) {
+  // Fallback to regular View component if unstable_NativeView is not available or we're on Web
+  nativeView = reactNative.View;
+}
+
+/**
+ * Native View component with graceful fallback.
+ *
+ * @remarks
+ * Uses `unstable_NativeView` on supported native runtimes and falls back to `View`
+ * on web or when the unstable export is unavailable.
+ */
+export const NativeView: ComponentType<ViewProps> = nativeView;

package/src/runtime/index.ts

@@ -4,6 +4,16 @@ import { userSelectToSelectableMap, verticalAlignToTextAlignVerticalMap } from '
 
 const propsCache = new WeakMap();
 
+/**
+ * Normalizes `Text` style values for `NativeText`.
+ *
+ * @param style - Style prop passed to a text-like component.
+ * @returns Native-friendly text props. Returns an empty object when `style` is falsy or cannot be normalized.
+ * @remarks
+ * - Flattens style arrays via `StyleSheet.flatten`
+ * - Converts numeric `fontWeight` values to string values
+ * - Maps `userSelect` and `verticalAlign` to native-compatible props
+ */
 export function processTextStyle(style: GenericStyleProp<TextStyle>): Partial<TextProps> {
   if (!style) return {};
 
@@ -38,6 +48,16 @@ export function processTextStyle(style: GenericStyleProp<TextStyle>): Partial<Te
   return props;
 }
 
+/**
+ * Normalizes accessibility and ARIA props for runtime native components.
+ *
+ * @param props - Accessibility and ARIA props.
+ * @returns Props with normalized accessibility fields.
+ * @remarks
+ * - Merges `aria-label` with `accessibilityLabel`
+ * - Merges ARIA state fields into `accessibilityState`
+ * - Defaults `accessible` to `true` when omitted
+ */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function processAccessibilityProps(props: Record<string, any>): Record<string, any> {
   const {

package/src/runtime/types/index.ts

@@ -1 +1,6 @@
+/**
+ * Recursive style prop shape accepted by runtime style helpers.
+ *
+ * @template T - Style object type.
+ */
 export type GenericStyleProp<T> = null | void | T | false | '' | ReadonlyArray<GenericStyleProp<T>>;

package/src/runtime/utils/constants.ts

@@ -1,4 +1,6 @@
-// Maps the `userSelect` prop to the native `selectable` prop
+/**
+ * Maps CSS-like `userSelect` values to React Native's `selectable` prop.
+ */
 export const userSelectToSelectableMap = {
   auto: true,
   text: true,
@@ -7,7 +9,9 @@ export const userSelectToSelectableMap = {
   all: true,
 };
 
-// Maps the `verticalAlign` prop to the native `textAlignVertical` prop
+/**
+ * Maps CSS-like `verticalAlign` values to React Native's `textAlignVertical`.
+ */
 export const verticalAlignToTextAlignVerticalMap = {
   auto: 'auto',
   top: 'top',