react-native-boost 0.6.1 → 1.0.0

package/src/plugin/utils/logger.ts

@@ -1,3 +1,110 @@
-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';
+
+export const noopLogger: PluginLogger = {
+  optimized() {},
+  skipped() {},
+  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})`);
+    },
+    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;
+}
+
+function writeLog(level: 'optimized' | 'skipped' | 'warning', message: string): void {
+  const levelTag = formatLevel(level);
+  console.log(`${LOG_PREFIX} ${levelTag} ${message}`);
+}
+
+function formatLevel(level: 'optimized' | 'skipped' | 'warning'): string {
+  if (level === 'optimized') {
+    return colorize('[optimized]', ANSI_GREEN);
+  }
+
+  if (level === 'skipped') {
+    return colorize('[skipped]', ANSI_YELLOW);
+  }
+
+  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

@@ -1,10 +1,19 @@
-import { TextProps, TextStyle } from 'react-native';
-import flattenStyle from 'react-native/Libraries/StyleSheet/flattenStyle';
+import { TextProps, TextStyle, StyleSheet } from 'react-native';
 import { GenericStyleProp } from './types';
 import { userSelectToSelectableMap, verticalAlignToTextAlignVerticalMap } from './utils/constants';
 
 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 {};
 
@@ -15,7 +24,7 @@ export function processTextStyle(style: GenericStyleProp<TextStyle>): Partial<Te
   props = {};
   propsCache.set(style, props);
 
-  style = flattenStyle(style);
+  style = StyleSheet.flatten(style) as TextStyle;
 
   if (!style) return {};
 
@@ -39,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/types/react-native.d.ts

@@ -1,9 +1,3 @@
-declare module 'react-native/Libraries/StyleSheet/flattenStyle' {
-  type GenericStyleProp<T> = null | void | T | false | '' | ReadonlyArray<GenericStyleProp<T>>;
-
-  export default function flattenStyle<T>(style: T): T extends GenericStyleProp<infer U> ? U : never;
-}
-
 declare module 'react-native/Libraries/Text/TextNativeComponent' {
   export const NativeText: React.ComponentType<TextProps>;
 }

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',

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

@@ -1,120 +0,0 @@
-import { NodePath, types as t } from '@babel/core';
-
-/**
- * Checks if any ancestor element is of the specified component type or contains that component type.
- * This function handles both direct ancestors and custom components that may contain the specified component.
- *
- * @param path - The path to the JSXOpeningElement.
- * @param componentName - The name of the component to check for in ancestors.
- * @param skipComponents - Optional array of component names to skip when checking ancestors.
- * @returns true if any ancestor is or contains the specified component.
- */
-export function hasComponentAncestor(
-  path: NodePath<t.JSXOpeningElement>,
-  componentName: string,
-  skipComponents: string[] = ['Fragment']
-): boolean {
-  // Check for direct ancestors of the specified component type
-  const directAncestor = path.findParent((parentPath) => {
-    return (
-      t.isJSXElement(parentPath.node) && t.isJSXIdentifier(parentPath.node.openingElement.name, { name: componentName })
-    );
-  });
-
-  if (directAncestor) return true;
-
-  // Check for indirect ancestors (custom components that contain the specified component)
-  return !!path.findParent((parentPath) => {
-    // Only check JSX elements
-    if (!t.isJSXElement(parentPath.node)) return false;
-
-    // Get the component name
-    const openingElement = parentPath.node.openingElement;
-    if (!t.isJSXIdentifier(openingElement.name)) return false;
-
-    const ancestorComponentName = openingElement.name.name;
-
-    // Skip the component we're looking for
-    if (ancestorComponentName === componentName) {
-      return false;
-    }
-
-    // Skip components in the skipComponents list
-    if (skipComponents.includes(ancestorComponentName)) {
-      return false;
-    }
-
-    // Skip lowercase components (built-in HTML elements)
-    if (ancestorComponentName[0] === ancestorComponentName[0].toLowerCase()) {
-      return false;
-    }
-
-    // Try to find the component definition through variable binding
-    const binding = parentPath.scope.getBinding(ancestorComponentName);
-    if (!binding) return false;
-
-    // Now check the component definition for the specified component
-    if (t.isVariableDeclarator(binding.path.node)) {
-      const init = binding.path.node.init;
-
-      // Handle arrow functions or function expressions
-      if (t.isArrowFunctionExpression(init) || t.isFunctionExpression(init)) {
-        // Check the function body for the specified component
-        return t.isBlockStatement(init.body)
-          ? hasComponentInReturnStatement(init.body, componentName)
-          : hasComponentInExpression(init.body, componentName);
-      }
-    } else if (t.isFunctionDeclaration(binding.path.node)) {
-      // Handle function declarations
-      return hasComponentInReturnStatement(binding.path.node.body, componentName);
-    }
-
-    return false;
-  });
-}
-
-/**
- * Check if a block statement contains a return statement with the specified component
- *
- * @param blockStatement - The block statement to check
- * @param componentName - The name of the component to look for
- * @returns true if the block statement contains a return with the specified component
- */
-function hasComponentInReturnStatement(blockStatement: t.BlockStatement, componentName: string): boolean {
-  for (const statement of blockStatement.body) {
-    if (
-      t.isReturnStatement(statement) &&
-      statement.argument &&
-      hasComponentInExpression(statement.argument, componentName)
-    ) {
-      return true;
-    }
-  }
-  return false;
-}
-
-/**
- * Check if an expression contains the specified component
- *
- * @param expression - The expression to check
- * @param componentName - The name of the component to look for
- * @returns true if the expression contains the specified component
- */
-function hasComponentInExpression(expression: t.Expression, componentName: string): boolean {
-  // If directly returning a JSX element
-  if (t.isJSXElement(expression)) {
-    // Check if it's the specified component
-    if (t.isJSXIdentifier(expression.openingElement.name, { name: componentName })) {
-      return true;
-    }
-
-    // Check if any children are the specified component
-    for (const child of expression.children) {
-      if (t.isJSXElement(child) && t.isJSXIdentifier(child.openingElement.name, { name: componentName })) {
-        return true;
-      }
-    }
-  }
-
-  return false;
-}

package/src/plugin/utils/common/node-types.ts

@@ -1,22 +0,0 @@
-import { NodePath, types as t } from '@babel/core';
-
-/**
- * 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;
-
-  // Check for JSX expressions
-  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;
-};