react-native-boost 1.1.0 → 1.2.0

package/README.md

@@ -20,10 +20,13 @@ The documentation is available at [react-native-boost.oss.kuatsu.de](https://rea
 The app in the `apps/example` directory serves as a benchmark for the performance of the plugin.
 
 <div align="center">
-  <img src="./apps/docs/content/docs/information/img/benchmark-ios.png" width="500" />
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="./apps/docs/content/docs/information/img/fps-ios.svg" />
+    <img alt="React Native Boost — iOS frame rate vs render load" src="./apps/docs/content/docs/information/img/fps-ios-light.svg" width="640" />
+  </picture>
 </div>
 
-More benchmarks are available in the [docs](https://react-native-boost.oss.kuatsu.de/docs/information/benchmarks).
+See the [benchmarks page](https://react-native-boost.oss.kuatsu.de/docs/information/benchmarks) for Android results and the full methodology.
 
 ## Compatibility
 

package/dist/plugin/esm/index.mjs

@@ -125,10 +125,7 @@ const isReactNativeImport = (path, expectedImportedName) => {
   }
   return false;
 };
-const getViewAncestorClassification = (path) => {
-  return classifyViewAncestors(path);
-};
-function classifyViewAncestors(path) {
+const getAncestorClassification = (path) => {
   const context = {
     componentCache: /* @__PURE__ */ new WeakMap(),
     componentInProgress: /* @__PURE__ */ new WeakSet(),
@@ -145,7 +142,21 @@ function classifyViewAncestors(path) {
     ancestorPath = ancestorPath.parentPath;
   }
   return classification;
-}
+};
+const ancestorBailoutChecks = (path, dangerousOptimizationEnabled) => {
+  let classification;
+  const classify = () => classification != null ? classification : classification = getAncestorClassification(path);
+  return [
+    {
+      reason: "has Text ancestor",
+      shouldBail: () => classify() === "text"
+    },
+    {
+      reason: "has unresolved ancestor and dangerous optimization is disabled",
+      shouldBail: () => classify() === "unknown" && !dangerousOptimizationEnabled
+    }
+  ];
+};
 function classifyJSXElementAsAncestor(path, context) {
   const openingElementName = path.node.openingElement.name;
   if (types.isJSXIdentifier(openingElementName)) {
@@ -673,18 +684,37 @@ function extractSelectableAndUpdateStyle(styleExpr) {
   }
   return void 0;
 }
-const isStringNode = (path, child) => {
-  if (types.isJSXText(child) || types.isStringLiteral(child)) return true;
-  if (types.isJSXExpressionContainer(child)) {
-    const expression = child.expression;
-    if (types.isIdentifier(expression)) {
-      const binding = path.scope.getBinding(expression.name);
-      if (binding && binding.path.node && types.isVariableDeclarator(binding.path.node)) {
-        return !!binding.path.node.init && types.isStringLiteral(binding.path.node.init);
-      }
-      return false;
+const isPrimitiveExpression = (path, expression, resolved = /* @__PURE__ */ new Set()) => {
+  if (types.isStringLiteral(expression) || types.isNumericLiteral(expression)) return true;
+  if (types.isTemplateLiteral(expression)) return true;
+  if (types.isBinaryExpression(expression)) {
+    const { left, right } = expression;
+    return types.isExpression(left) && isPrimitiveExpression(path, left, resolved) && isPrimitiveExpression(path, right, resolved);
+  }
+  if (types.isConditionalExpression(expression)) {
+    return isPrimitiveExpression(path, expression.consequent, resolved) && isPrimitiveExpression(path, expression.alternate, resolved);
+  }
+  if (types.isLogicalExpression(expression)) {
+    return isPrimitiveExpression(path, expression.left, resolved) && isPrimitiveExpression(path, expression.right, resolved);
+  }
+  if (types.isIdentifier(expression)) {
+    if (resolved.has(expression.name)) return false;
+    const binding = path.scope.getBinding(expression.name);
+    if (binding && binding.constant && binding.path.node && types.isVariableDeclarator(binding.path.node)) {
+      const init = binding.path.node.init;
+      return !!init && types.isExpression(init) && isPrimitiveExpression(path, init, new Set(resolved).add(expression.name));
     }
-    if (types.isStringLiteral(expression)) return true;
+    return false;
+  }
+  return false;
+};
+const isPrimitiveChild = (path, child) => {
+  if (types.isJSXText(child)) return true;
+  if (types.isStringLiteral(child)) return true;
+  if (types.isJSXExpressionContainer(child)) {
+    const { expression } = child;
+    if (types.isJSXEmptyExpression(expression)) return false;
+    return isPrimitiveExpression(path, expression);
   }
   return false;
 };
@@ -723,6 +753,10 @@ const replaceWithNativeComponent = (path, parent, file, nativeComponentName) =>
 };
 
 const textBlacklistedProperties = /* @__PURE__ */ new Set([
+  // The `Text` wrapper translates `aria-hidden` into `accessibilityElementsHidden` /
+  // `importantForAccessibility`, which `processAccessibilityProps` does not yet handle. Passing it
+  // through would drop it, so bail. TODO: handle this in the runtime helper instead.
+  "aria-hidden",
   "id",
   "nativeID",
   "onLongPress",
@@ -740,7 +774,9 @@ const textBlacklistedProperties = /* @__PURE__ */ new Set([
   "selectionColor"
   // TODO: we can use react-native's internal `processColor` to process this at runtime
 ]);
-const textOptimizer = (path, logger) => {
+const NORMALIZED_PROPERTIES = /* @__PURE__ */ new Set([...ACCESSIBILITY_PROPERTIES, "disabled"]);
+const isNormalizedProperty = (attribute) => types.isJSXAttribute(attribute) && types.isJSXIdentifier(attribute.name) && NORMALIZED_PROPERTIES.has(attribute.name.name);
+const textOptimizer = (path, logger, options, platform) => {
   if (!isValidJSXComponent(path, "Text")) return;
   if (!isReactNativeImport(path, "Text")) return;
   const parent = path.parent;
@@ -754,10 +790,13 @@ const textOptimizer = (path, logger) => {
       reason: "is a direct child of expo-router Link with asChild",
       shouldBail: () => hasExpoRouterLinkParentWithAsChild(path)
     },
+    // The local children check runs before the ancestor checks because it is cheap and prunes the
+    // common nested-element `Text` before the unbounded ancestor walk those checks trigger.
     {
-      reason: "contains non-string children",
+      reason: "contains non-primitive children",
       shouldBail: () => hasInvalidChildren(path, parent)
-    }
+    },
+    ...ancestorBailoutChecks(path, (options == null ? void 0 : options.dangerouslyOptimizeTextWithUnknownAncestors) === true)
   ];
   if (forced) {
     const overriddenReason = getFirstBailoutReason(overridableChecks);
@@ -789,18 +828,18 @@ const textOptimizer = (path, logger) => {
   fixNegativeNumberOfLines({ path, logger });
   addDefaultProperty(path, "allowFontScaling", types.booleanLiteral(true));
   addDefaultProperty(path, "ellipsizeMode", types.stringLiteral("tail"));
-  processProps(path, file);
+  processProps(path, file, platform);
   replaceWithNativeComponent(path, parent, file, "NativeText");
 };
 function hasInvalidChildren(path, parent) {
   for (const attribute of path.node.attributes) {
     if (types.isJSXSpreadAttribute(attribute)) continue;
-    if (types.isJSXIdentifier(attribute.name) && attribute.value && // For a "children" attribute, optimization is allowed only if it is a string
-    attribute.name.name === "children" && !isStringNode(path, attribute.value)) {
+    if (types.isJSXIdentifier(attribute.name) && attribute.value && // For a "children" attribute, optimization is allowed only if it is a provable primitive
+    attribute.name.name === "children" && !isPrimitiveChild(path, attribute.value)) {
       return true;
     }
   }
-  return !parent.children.every((child) => isStringNode(path, child));
+  return !parent.children.every((child) => isPrimitiveChild(path, child));
 }
 function fixNegativeNumberOfLines({ path, logger }) {
   for (const attribute of path.node.attributes) {
@@ -822,16 +861,15 @@ function fixNegativeNumberOfLines({ path, logger }) {
     }
   }
 }
-function processProps(path, file) {
+function processProps(path, file, platform) {
   const currentAttributes = [...path.node.attributes];
   const { styleExpr, styleAttribute } = extractStyleAttribute(currentAttributes);
-  const hasA11y = hasAccessibilityProperty(path, currentAttributes);
+  const shouldNormalize = hasAccessibilityProperty(path, currentAttributes) || currentAttributes.some(
+    (attribute) => types.isJSXAttribute(attribute) && types.isJSXIdentifier(attribute.name, { name: "disabled" })
+  );
   const spreadAttributes = [];
-  if (hasA11y) {
-    const accessibilityAttributes = currentAttributes.filter((attribute) => {
-      if (!types.isJSXAttribute(attribute)) return false;
-      return types.isJSXIdentifier(attribute.name) && ACCESSIBILITY_PROPERTIES.has(attribute.name.name);
-    });
+  if (shouldNormalize) {
+    const normalizedAttributes = currentAttributes.filter((attribute) => isNormalizedProperty(attribute));
     const normalizeIdentifier = addFileImportHint({
       file,
       nameHint: "processAccessibilityProps",
@@ -839,7 +877,7 @@ function processProps(path, file) {
       importName: "processAccessibilityProps",
       moduleName: RUNTIME_MODULE_NAME
     });
-    const accessibilityObject = buildPropertiesFromAttributes(accessibilityAttributes);
+    const accessibilityObject = buildPropertiesFromAttributes(normalizedAttributes);
     const accessibilityExpr = types.callExpression(types.identifier(normalizeIdentifier.name), [accessibilityObject]);
     spreadAttributes.push(types.jsxSpreadAttribute(accessibilityExpr));
   }
@@ -865,15 +903,31 @@ function processProps(path, file) {
   const remainingAttributes = [];
   for (const attribute of currentAttributes) {
     if (styleAttribute && attribute === styleAttribute) continue;
-    if (hasA11y && types.isJSXAttribute(attribute) && types.isJSXIdentifier(attribute.name) && ACCESSIBILITY_PROPERTIES.has(attribute.name.name)) {
-      continue;
-    }
+    if (shouldNormalize && isNormalizedProperty(attribute)) continue;
     remainingAttributes.push(attribute);
   }
-  path.node.attributes = [...spreadAttributes, selectableAttribute, ...remainingAttributes].filter(
+  const accessibleAttribute = shouldNormalize ? void 0 : buildAccessibleDefault(path, file, platform);
+  path.node.attributes = [...spreadAttributes, selectableAttribute, ...remainingAttributes, accessibleAttribute].filter(
     (attribute) => attribute !== void 0
   );
 }
+function buildAccessibleDefault(path, file, platform) {
+  if (platform === "web") return void 0;
+  let value;
+  if (platform === "ios" || platform === "android") {
+    value = types.booleanLiteral(platform === "ios");
+  } else {
+    const accessibleIdentifier = addFileImportHint({
+      file,
+      nameHint: "getDefaultTextAccessible",
+      path,
+      importName: "getDefaultTextAccessible",
+      moduleName: RUNTIME_MODULE_NAME
+    });
+    value = types.callExpression(types.identifier(accessibleIdentifier.name), []);
+  }
+  return types.jsxAttribute(types.jsxIdentifier("accessible"), types.jsxExpressionContainer(value));
+}
 
 const LOG_PREFIX = "[react-native-boost]";
 const ANSI_RESET = "\x1B[0m";
@@ -972,7 +1026,9 @@ function formatPathLocation(payloadPath) {
 }
 
 const viewBlacklistedProperties = /* @__PURE__ */ new Set([
-  // TODO: process a11y props at runtime
+  // The `View` wrapper translates these into native props (e.g. `aria-*` → `accessibility*`,
+  // `tabIndex` → `focusable`). The native host does not understand them, so passing them through
+  // would silently drop them. TODO: process these at runtime instead of bailing.
   "accessible",
   "accessibilityLabel",
   "accessibilityState",
@@ -980,37 +1036,29 @@ const viewBlacklistedProperties = /* @__PURE__ */ new Set([
   "aria-checked",
   "aria-disabled",
   "aria-expanded",
+  "aria-hidden",
   "aria-label",
+  "aria-labelledby",
+  "aria-live",
   "aria-selected",
+  "aria-valuemax",
+  "aria-valuemin",
+  "aria-valuenow",
+  "aria-valuetext",
   "id",
   "nativeID",
-  "style"
-  // TODO: process style at runtime
+  "tabIndex"
 ]);
 const viewOptimizer = (path, logger, options) => {
   if (!isValidJSXComponent(path, "View")) return;
   if (!isReactNativeImport(path, "View")) return;
-  let ancestorClassification;
-  const getAncestorClassification = () => {
-    if (!ancestorClassification) {
-      ancestorClassification = getViewAncestorClassification(path);
-    }
-    return ancestorClassification;
-  };
   const forced = isForcedLine(path);
   const overridableChecks = [
     {
       reason: "contains blacklisted props",
       shouldBail: () => hasBlacklistedProperty(path, viewBlacklistedProperties)
     },
-    {
-      reason: "has Text ancestor",
-      shouldBail: () => getAncestorClassification() === "text"
-    },
-    {
-      reason: "has unresolved ancestor and dangerous optimization is disabled",
-      shouldBail: () => getAncestorClassification() === "unknown" && (options == null ? void 0 : options.dangerouslyOptimizeViewWithUnknownAncestors) !== true
-    }
+    ...ancestorBailoutChecks(path, (options == null ? void 0 : options.dangerouslyOptimizeViewWithUnknownAncestors) === true)
   ];
   if (forced) {
     const overriddenReason = getFirstBailoutReason(overridableChecks);
@@ -1045,6 +1093,7 @@ const viewOptimizer = (path, logger, options) => {
 
 var index = declare((api) => {
   api.assertVersion(7);
+  const platform = api.caller((caller) => caller == null ? void 0 : caller.platform);
   return {
     name: "react-native-boost",
     visitor: {
@@ -1054,7 +1103,7 @@ var index = declare((api) => {
         const options = (_a = pluginState.opts) != null ? _a : {};
         const logger = getOrCreateLogger(pluginState, options);
         if (isIgnoredFile(path, (_b = options.ignores) != null ? _b : [])) return;
-        if (((_c = options.optimizations) == null ? void 0 : _c.text) !== false) textOptimizer(path, logger);
+        if (((_c = options.optimizations) == null ? void 0 : _c.text) !== false) textOptimizer(path, logger, options, platform);
         if (((_d = options.optimizations) == null ? void 0 : _d.view) !== false) viewOptimizer(path, logger, options);
       }
     }