react-native-boost 0.0.1

package/eslint.config.mjs

@@ -0,0 +1,14 @@
+import globals from 'globals';
+import pluginJs from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import eslintPluginUnicorn from 'eslint-plugin-unicorn';
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  { files: ['**/*.{js,mjs,cjs,ts}'] },
+  { languageOptions: { globals: globals.node } },
+  { ignores: ['**/fixtures', '**/*.config.{js,mjs,cjs}'] },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  eslintPluginUnicorn.configs.recommended,
+];

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "react-native-boost",
+  "description": "🚀 Boost your React Native app's performance with a single line of code",
+  "version": "0.0.1",
+  "main": "dist/plugin.js",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "yarn clean && esbuild src/plugin.ts --bundle --outfile=dist/plugin.js --sourcemap --platform=node",
+    "test": "vitest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src/**/*.ts",
+    "format": "prettier --write .",
+    "prepare": "husky",
+    "release": "release-it"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kuatsu/react-native-boost.git"
+  },
+  "author": "Kuatsu App Agency <hello@kuatsu.de>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/kuatsu/react-native-boost/issues"
+  },
+  "homepage": "https://github.com/kuatsu/react-native-boost#readme",
+  "packageManager": "yarn@3.6.1",
+  "devDependencies": {
+    "@babel/core": "^7.25.0",
+    "@babel/helper-module-imports": "^7.25.0",
+    "@babel/helper-plugin-utils": "^7.25.0",
+    "@babel/plugin-syntax-jsx": "^7.25.0",
+    "@babel/preset-typescript": "^7.25.0",
+    "@commitlint/cli": "^19.7.1",
+    "@commitlint/config-conventional": "^17.0.2",
+    "@eslint/js": "^9.21.0",
+    "@release-it/conventional-changelog": "^5.0.0",
+    "@types/babel__helper-module-imports": "^7.0.0",
+    "@types/babel__helper-plugin-utils": "^7.0.0",
+    "@types/node": "^20",
+    "babel-plugin-tester": "^11.0.4",
+    "esbuild": "^0.25.0",
+    "eslint": "^9.21.0",
+    "eslint-plugin-unicorn": "^57.0.0",
+    "globals": "^16.0.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.4.3",
+    "prettier": "^3.5.2",
+    "release-it": "^18.1.2",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.24.1",
+    "vitest": "^3.0.6"
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  }
+}

package/src/optimizers/text/__tests__/fixtures/basic/code.js

@@ -0,0 +1,2 @@
+import { Text } from "react-native";
+<Text />;

package/src/optimizers/text/__tests__/fixtures/basic/options.js

@@ -0,0 +1,4 @@
+/**
+ * @type {import('babel-plugin-tester').TestObject}
+ */
+module.exports = {};

package/src/optimizers/text/__tests__/fixtures/basic/output.js

@@ -0,0 +1,3 @@
+import { NativeText as _NativeText } from "react-native/Libraries/Text/TextNativeComponent";
+import { Text } from "react-native";
+<_NativeText />;

package/src/optimizers/text/__tests__/fixtures/text-content/code.js

@@ -0,0 +1,2 @@
+import { Text } from "react-native";
+<Text>Hello, world!</Text>;

package/src/optimizers/text/__tests__/fixtures/text-content/options.js

@@ -0,0 +1,4 @@
+/**
+ * @type {import('babel-plugin-tester').TestObject}
+ */
+module.exports = {};

package/src/optimizers/text/__tests__/fixtures/text-content/output.js

@@ -0,0 +1,3 @@
+import { NativeText as _NativeText } from "react-native/Libraries/Text/TextNativeComponent";
+import { Text } from "react-native";
+<_NativeText>Hello, world!</_NativeText>;

package/src/optimizers/text/__tests__/fixtures/text-content-as-explicit-child-prop/code.js

@@ -0,0 +1,2 @@
+import { Text } from "react-native";
+<Text children="Hello, world!" />;

package/src/optimizers/text/__tests__/fixtures/text-content-as-explicit-child-prop/options.js

@@ -0,0 +1,4 @@
+/**
+ * @type {import('babel-plugin-tester').TestObject}
+ */
+module.exports = {};

package/src/optimizers/text/__tests__/fixtures/text-content-as-explicit-child-prop/output.js

@@ -0,0 +1,3 @@
+import { NativeText as _NativeText } from "react-native/Libraries/Text/TextNativeComponent";
+import { Text } from "react-native";
+<_NativeText children="Hello, world!" />;

package/src/optimizers/text/__tests__/fixtures/two-components/code.js

@@ -0,0 +1,3 @@
+import { Text } from "react-native";
+<Text />;
+<Text></Text>;

package/src/optimizers/text/__tests__/fixtures/two-components/options.js

@@ -0,0 +1,4 @@
+/**
+ * @type {import('babel-plugin-tester').TestObject}
+ */
+module.exports = {};

package/src/optimizers/text/__tests__/fixtures/two-components/output.js

@@ -0,0 +1,4 @@
+import { NativeText as _NativeText } from "react-native/Libraries/Text/TextNativeComponent";
+import { Text } from "react-native";
+<_NativeText />;
+<_NativeText></_NativeText>;

package/src/optimizers/text/__tests__/index.test.ts

@@ -0,0 +1,12 @@
+import path from 'node:path';
+import { pluginTester } from 'babel-plugin-tester/pure';
+import plugin from '../../../plugin';
+
+pluginTester({
+  plugin,
+  title: 'text',
+  fixtures: path.resolve(import.meta.dirname, 'fixtures'),
+  babelOptions: {
+    plugins: ['@babel/plugin-syntax-jsx'],
+  },
+});

package/src/optimizers/text/index.ts

@@ -0,0 +1,128 @@
+import { NodePath, types as t } from '@babel/core';
+import { addNamed } from '@babel/helper-module-imports';
+
+export function textOptimizer(path: NodePath<t.JSXOpeningElement>): void {
+  // Ensure we're processing a JSX element
+  if (!t.isJSXIdentifier(path.node.name)) return;
+
+  const parent = path.parent;
+  if (!t.isJSXElement(parent)) return;
+
+  const elementName = path.node.name.name;
+  if (elementName !== 'Text') return;
+
+  // Ensure Text element comes from react-native
+  const binding = path.scope.getBinding(elementName);
+  if (!binding) return;
+  if (binding.kind === 'module') {
+    const parentNode = binding.path.parent;
+    if (!t.isImportDeclaration(parentNode) || parentNode.source.value !== 'react-native') {
+      return;
+    }
+  }
+
+  // Bail if the element has any blacklisted properties or non-string children props
+  if (hasBlacklistedProperties(path)) return;
+  if (!hasOnlyStringChildren(path, parent)) return;
+  // TODO: Don't bail if the element has a style prop
+
+  // Add NativeTextComponent import (cached on file) so we only add it once per file
+  const file = (path.hub as unknown as { file: t.File }).file as t.File & {
+    __nativeTextImport?: t.Identifier;
+  };
+  if (!file.__nativeTextImport) {
+    file.__nativeTextImport = addNamed(path, 'NativeText', 'react-native/Libraries/Text/TextNativeComponent');
+  }
+  const nativeTextIdentifier = file.__nativeTextImport;
+  path.node.name.name = nativeTextIdentifier.name;
+
+  // If the element is not self-closing, update the closing element as well
+  if (
+    !path.node.selfClosing &&
+    parent.closingElement &&
+    t.isJSXIdentifier(parent.closingElement.name) &&
+    parent.closingElement.name.name === 'Text'
+  ) {
+    parent.closingElement.name.name = nativeTextIdentifier.name;
+  }
+}
+
+function hasOnlyStringChildren(path: NodePath<t.JSXOpeningElement>, node: t.JSXElement): boolean {
+  return node.children.every((child) => isStringNode(path, child));
+}
+
+function isStringNode(path: NodePath<t.JSXOpeningElement>, child: t.Node): boolean {
+  if (t.isJSXText(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;
+    }
+  }
+  return false;
+}
+
+const blacklistedProperties = new Set([
+  'accessible',
+  'accessibilityLabel',
+  'accessibilityState',
+  'allowFontScaling',
+  'aria-busy',
+  'aria-checked',
+  'aria-disabled',
+  'aria-expanded',
+  'aria-label',
+  'aria-selected',
+  'ellipsizeMode',
+  'id',
+  'nativeID',
+  'onLongPress',
+  'onPress',
+  'onPressIn',
+  'onPressOut',
+  'onResponderGrant',
+  'onResponderMove',
+  'onResponderRelease',
+  'onResponderTerminate',
+  'onResponderTerminationRequest',
+  'onStartShouldSetResponder',
+  'pressRetentionOffset',
+  'suppressHighlighting',
+  'style',
+]);
+
+function hasBlacklistedProperties(path: NodePath<t.JSXOpeningElement>): boolean {
+  return path.node.attributes.some((attribute) => {
+    if (t.isJSXSpreadAttribute(attribute)) {
+      if (t.isIdentifier(attribute.argument)) {
+        const binding = path.scope.getBinding(attribute.argument.name);
+        if (binding && t.isObjectExpression(binding.path.node)) {
+          return binding.path.node.properties.some((property) => {
+            if (t.isObjectProperty(property) && t.isIdentifier(property.key)) {
+              return blacklistedProperties.has(property.key.name);
+            }
+            return false;
+          });
+        }
+      }
+      // Bail if we can't resolve the spread attribute
+      return true;
+    }
+
+    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);
+      }
+      return blacklistedProperties.has(attribute.name.name);
+    }
+
+    // For other attribute types (e.g. namespaced), assume no blacklisting
+    return false;
+  });
+}

package/src/plugin.ts

@@ -0,0 +1,15 @@
+import { declare } from '@babel/helper-plugin-utils';
+import { textOptimizer } from './optimizers/text';
+
+export default declare((api) => {
+  api.assertVersion(7);
+
+  return {
+    name: 'react-native-boost/text',
+    visitor: {
+      JSXOpeningElement(path) {
+        textOptimizer(path);
+      },
+    },
+  };
+});

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "lib": ["ESNext"],
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "target": "es2019",
+    "declaration": true,
+    "outDir": "./dist",
+    "types": ["node"],
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "fixtures"]
+}

package/vitest.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    // babel-plugin-tester requires it and describe to be set globally
+    globals: true,
+  },
+});