react-native-boost 0.0.1 → 0.0.2

package/README.md

@@ -2,15 +2,15 @@
 
 ![npm bundle size](https://img.shields.io/bundlephobia/min/react-native-boost?style=flat-square) ![GitHub](https://img.shields.io/github/license/kuatsu/react-native-boost?style=flat-square) ![GitHub last commit](https://img.shields.io/github/last-commit/kuatsu/react-native-boost?style=flat-square)
 
-A powerful Babel plugin that automatically optimizes React Native apps by intelligently replacing standard components with their native counterparts. Through clever source code analysis, it identifies safe optimization opportunities, leading to significant performance improvements.
+A powerful Babel plugin that automatically optimizes React Native apps through source code analysis and optimization. It identifies safe micro-optimization opportunities, which can lead to significant performance improvements.
 
 > [!WARNING]
-> This project is highly experimental and under active development. **Your app might break** and the optimization strategies used might change significantly between versions. Use with caution!
+> This project is highly experimental and under active development. **Your app might break** and the optimization strategies used can change significantly between versions. Use with caution!
 
 - ⚡ Automatic performance optimization through source code analysis
-- 🔄 Direct & safe mapping of React Native components to native equivalents
+- 🔒 Safe optimizations that don't break your app
 - 🎯 Zero runtime overhead - all optimizations happen during build time
-- 📱 Compatible with both iOS and Android
+- 📱 Cross-platform compatible
 - 🧪 Works seamlessly with Expo
 - 🎨 Configurable optimization strategies
 
@@ -18,22 +18,45 @@ A powerful Babel plugin that automatically optimizes React Native apps by intell
 
 ```sh
 npm install --save-dev react-native-boost
+# or
+yarn add --dev react-native-boost
 ```
 
 Then, add the plugin to your Babel configuration (`babel.config.js`):
 
 ```js
 module.exports = {
-  plugins: ['module:react-native-boost'],
+  plugins: ['react-native-boost/plugin'],
 };
 ```
 
-## Quick Start
+Optionally, you can configure the plugin to disable specific optimizations:
 
-The plugin works automatically once installed. Here's an example of how it optimizes your code:
+```js
+module.exports = {
+  plugins: [
+    [
+      'react-native-boost/plugin',
+      {
+        optimizations: {
+          text: false,
+        },
+      },
+    ],
+  ],
+};
+```
+
+## How It Works
+
+Several standard components in React Native are actually wrappers around their native counterparts. These wrappers often only handle edge cases and aren't needed in most cases. However, they add additional runtime overhead and depth to the component tree, which can lead to performance bottlenecks.
+
+React Native Boost replaces these wrapper components directly with their respective native components, flattening the component tree. It intelligently analyzes your code and only optimizes components that are used in a way where they can be optimized without breaking the app.
+
+Here's an example of how it works:
 
 ```jsx
-// Your original code
+// Your original code 🐌
 import React from 'react';
 import { View, Text } from 'react-native';
 
@@ -43,7 +66,7 @@ const MyComponent = () => (
   </View>
 );
 
-// Automatically transformed to
+// Automafically transformed to ✨
 import React from 'react';
 import { View } from 'react-native';
 import { NativeText } from 'react-native/Libraries/Components/Text/NativeText';
@@ -55,14 +78,6 @@ const MyComponent = () => (
 );
 ```
 
-## How It Works
-
-react-native-boost analyzes your code during the build process and:
-
-- Identifies React Native components with optimization opportunities
-- Verifies that the usage of the component meets the criteria for optimization
-- Transforms the imports and component usage to their native, more performant equivalents
-
 ## Contributing
 
 See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "react-native-boost",
   "description": "🚀 Boost your React Native app's performance with a single line of code",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "dist/plugin.js",
   "scripts": {
-    "clean": "rm -rf dist",
-    "build": "yarn clean && esbuild src/plugin.ts --bundle --outfile=dist/plugin.js --sourcemap --platform=node",
+    "clean": "rm -rf plugin",
+    "build": "yarn clean && esbuild src/plugin.ts --bundle --outfile=plugin/index.js --platform=node",
     "test": "vitest",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src/**/*.ts",
@@ -13,6 +13,14 @@
     "prepare": "husky",
     "release": "release-it"
   },
+  "files": [
+    "src",
+    "plugin",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/kuatsu/react-native-boost.git"
@@ -24,6 +32,9 @@
   },
   "homepage": "https://github.com/kuatsu/react-native-boost#readme",
   "packageManager": "yarn@3.6.1",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
   "devDependencies": {
     "@babel/core": "^7.25.0",
     "@babel/helper-module-imports": "^7.25.0",
@@ -33,7 +44,7 @@
     "@commitlint/cli": "^19.7.1",
     "@commitlint/config-conventional": "^17.0.2",
     "@eslint/js": "^9.21.0",
-    "@release-it/conventional-changelog": "^5.0.0",
+    "@release-it/conventional-changelog": "^10.0.0",
     "@types/babel__helper-module-imports": "^7.0.0",
     "@types/babel__helper-plugin-utils": "^7.0.0",
     "@types/node": "^20",
@@ -63,7 +74,10 @@
     },
     "plugins": {
       "@release-it/conventional-changelog": {
-        "preset": "angular"
+        "preset": {
+          "name": "angular"
+        },
+        "infile": "CHANGELOG.md"
       }
     }
   }

package/{dist/plugin.js → plugin/index.js}

@@ -1,4 +1,3 @@
-console.log('hello world')
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -54600,9 +54599,9 @@ var require_native_modules2 = __commonJS({
   }
 });
 
-// node_modules/@babel/helper-compilation-targets/node_modules/yallist/iterator.js
+// node_modules/yallist/iterator.js
 var require_iterator = __commonJS({
-  "node_modules/@babel/helper-compilation-targets/node_modules/yallist/iterator.js"(exports2, module2) {
+  "node_modules/yallist/iterator.js"(exports2, module2) {
     "use strict";
     module2.exports = function(Yallist) {
       Yallist.prototype[Symbol.iterator] = function* () {
@@ -54614,9 +54613,9 @@ var require_iterator = __commonJS({
   }
 });
 
-// node_modules/@babel/helper-compilation-targets/node_modules/yallist/yallist.js
+// node_modules/yallist/yallist.js
 var require_yallist = __commonJS({
-  "node_modules/@babel/helper-compilation-targets/node_modules/yallist/yallist.js"(exports2, module2) {
+  "node_modules/yallist/yallist.js"(exports2, module2) {
     "use strict";
     module2.exports = Yallist;
     Yallist.Node = Node;
@@ -54983,9 +54982,9 @@ var require_yallist = __commonJS({
   }
 });
 
-// node_modules/@babel/helper-compilation-targets/node_modules/lru-cache/index.js
+// node_modules/lru-cache/index.js
 var require_lru_cache = __commonJS({
-  "node_modules/@babel/helper-compilation-targets/node_modules/lru-cache/index.js"(exports2, module2) {
+  "node_modules/lru-cache/index.js"(exports2, module2) {
     "use strict";
     var Yallist = require_yallist();
     var MAX = Symbol("max");
@@ -70364,7 +70363,7 @@ var import_helper_plugin_utils = __toESM(require_lib());
 // src/optimizers/text/index.ts
 var import_core = __toESM(require_lib27());
 var import_helper_module_imports = __toESM(require_lib11());
-function textOptimizer(path) {
+var textOptimizer = (path) => {
   if (!import_core.types.isJSXIdentifier(path.node.name)) return;
   const parent = path.parent;
   if (!import_core.types.isJSXElement(parent)) return;
@@ -70389,7 +70388,7 @@ function textOptimizer(path) {
   if (!path.node.selfClosing && parent.closingElement && import_core.types.isJSXIdentifier(parent.closingElement.name) && parent.closingElement.name.name === "Text") {
     parent.closingElement.name.name = nativeTextIdentifier.name;
   }
-}
+};
 function hasOnlyStringChildren(path, node) {
   return node.children.every((child) => isStringNode(path, child));
 }
@@ -70437,8 +70436,16 @@ function hasBlacklistedProperties(path) {
     if (import_core.types.isJSXSpreadAttribute(attribute)) {
       if (import_core.types.isIdentifier(attribute.argument)) {
         const binding = path.scope.getBinding(attribute.argument.name);
-        if (binding && import_core.types.isObjectExpression(binding.path.node)) {
-          return binding.path.node.properties.some((property) => {
+        let objectExpression;
+        if (binding) {
+          if (import_core.types.isVariableDeclarator(binding.path.node)) {
+            objectExpression = binding.path.node.init;
+          } else if (import_core.types.isObjectExpression(binding.path.node)) {
+            objectExpression = binding.path.node;
+          }
+        }
+        if (objectExpression && import_core.types.isObjectExpression(objectExpression)) {
+          return objectExpression.properties.some((property) => {
             if (import_core.types.isObjectProperty(property) && import_core.types.isIdentifier(property.key)) {
               return blacklistedProperties.has(property.key.name);
             }
@@ -70462,12 +70469,12 @@ function hasBlacklistedProperties(path) {
 var plugin_default = (0, import_helper_plugin_utils.declare)((api) => {
   api.assertVersion(7);
   return {
-    name: "react-native-boost/text",
+    name: "react-native-boost",
     visitor: {
-      JSXOpeningElement(path) {
-        textOptimizer(path);
+      JSXOpeningElement(path, state) {
+        const options = state.opts ?? {};
+        if (options.optimizations?.text !== false) textOptimizer(path);
       }
     }
   };
 });
-//# sourceMappingURL=plugin.js.map

package/src/optimizers/text/index.ts

@@ -1,8 +1,9 @@
 import { NodePath, types as t } from '@babel/core';
 import { addNamed } from '@babel/helper-module-imports';
+import { Optimizer } from '../../types';
 
-export function textOptimizer(path: NodePath<t.JSXOpeningElement>): void {
-  // Ensure we're processing a JSX element
+export const textOptimizer: Optimizer = (path) => {
+  // Ensure we're processing a JSX Text element
   if (!t.isJSXIdentifier(path.node.name)) return;
 
   const parent = path.parent;
@@ -45,7 +46,7 @@ export function textOptimizer(path: NodePath<t.JSXOpeningElement>): void {
   ) {
     parent.closingElement.name.name = nativeTextIdentifier.name;
   }
-}
+};
 
 function hasOnlyStringChildren(path: NodePath<t.JSXOpeningElement>, node: t.JSXElement): boolean {
   return node.children.every((child) => isStringNode(path, child));
@@ -98,11 +99,21 @@ const blacklistedProperties = new Set([
 
 function hasBlacklistedProperties(path: NodePath<t.JSXOpeningElement>): boolean {
   return path.node.attributes.some((attribute) => {
+    // Check if we can resolve the spread 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) => {
+        let objectExpression: t.ObjectExpression | undefined;
+        if (binding) {
+          // If the binding node is a VariableDeclarator, use its initializer.
+          if (t.isVariableDeclarator(binding.path.node)) {
+            objectExpression = binding.path.node.init as t.ObjectExpression;
+          } else if (t.isObjectExpression(binding.path.node)) {
+            objectExpression = binding.path.node;
+          }
+        }
+        if (objectExpression && t.isObjectExpression(objectExpression)) {
+          return objectExpression.properties.some((property) => {
             if (t.isObjectProperty(property) && t.isIdentifier(property.key)) {
               return blacklistedProperties.has(property.key.name);
             }

package/src/plugin.ts

@@ -1,14 +1,16 @@
 import { declare } from '@babel/helper-plugin-utils';
 import { textOptimizer } from './optimizers/text';
+import { PluginOptions } from './types';
 
 export default declare((api) => {
   api.assertVersion(7);
 
   return {
-    name: 'react-native-boost/text',
+    name: 'react-native-boost',
     visitor: {
-      JSXOpeningElement(path) {
-        textOptimizer(path);
+      JSXOpeningElement(path, state) {
+        const options = (state.opts ?? {}) as PluginOptions;
+        if (options.optimizations?.text !== false) textOptimizer(path);
       },
     },
   };

package/src/types/index.ts

@@ -0,0 +1,9 @@
+import { NodePath, types as t } from '@babel/core';
+
+export interface PluginOptions {
+  optimizations?: {
+    text?: boolean;
+  };
+}
+
+export type Optimizer = (path: NodePath<t.JSXOpeningElement>) => void;

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

@@ -0,0 +1,17 @@
+import { declare } from '@babel/helper-plugin-utils';
+import { Optimizer } from '../types';
+
+export const generateTestPlugin = (optimizer: Optimizer) => {
+  return declare((api) => {
+    api.assertVersion(7);
+
+    return {
+      name: 'react-native-boost',
+      visitor: {
+        JSXOpeningElement(path) {
+          optimizer(path);
+        },
+      },
+    };
+  });
+};

package/.github/FUNDING.yml

@@ -1 +0,0 @@
-github: mfkrause

package/.github/actions/setup/action.yml

@@ -1,28 +0,0 @@
-name: Setup
-description: Setup Node.js and install dependencies
-
-runs:
-  using: composite
-  steps:
-    - name: Setup Node.js
-      uses: actions/setup-node@v4
-      with:
-        node-version-file: .nvmrc
-
-    - name: Cache dependencies
-      id: yarn-cache
-      uses: actions/cache@v4
-      with:
-        path: |
-          **/node_modules
-        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-        restore-keys: |
-          ${{ runner.os }}-yarn-
-
-    - name: Install dependencies
-      if: steps.yarn-cache.outputs.cache-hit != 'true'
-      run: |
-        # yarn install --cwd example --frozen-lockfile # TODO: re-enable once example has been added
-        # yarn install --cwd docs --frozen-lockfile # TODO: re-enable once docs have been added
-        yarn install --frozen-lockfile
-      shell: bash

package/.github/workflows/release.yml

@@ -1,87 +0,0 @@
-name: Release
-on:
-  workflow_dispatch:
-    inputs:
-      release_type:
-        description: 'Release type (patch, minor, major, or a semver version)'
-        required: false
-        type: string
-
-jobs:
-  lint:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Setup
-        uses: ./.github/actions/setup
-
-      - name: Lint files
-        run: yarn lint
-
-      - name: Run Prettier
-        run: yarn format
-
-      - name: Verify formatted code is unchanged
-        run: git diff --exit-code HEAD
-
-      - name: Typecheck files
-        run: yarn typecheck
-
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Setup
-        uses: ./.github/actions/setup
-
-      - name: Run tests
-        run: yarn test
-
-  build-release:
-    runs-on: ubuntu-latest
-    needs: [lint, test]
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Setup
-        uses: ./.github/actions/setup
-
-      - name: Build package
-        run: yarn build
-
-      - name: Set NPM token & GitHub config
-        run: |
-          npm config set //registry.npmjs.org/:_authToken $NPM_TOKEN
-          git config user.name "Kuatsu CI/CD"
-          git config user.email "null@kuatsu.de"
-        env:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-      - name: Validate release type
-        if: ${{ inputs.release_type != '' }}
-        run: |
-          if [[ "${{ inputs.release_type }}" =~ ^(patch|minor|major)$ ]]; then
-            echo "Valid release type: ${{ inputs.release_type }}"
-          elif [[ "${{ inputs.release_type }}" =~ ^[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
-            echo "Valid semver version: ${{ inputs.release_type }}"
-          else
-            echo "Invalid input. Must be 'patch', 'minor', 'major', or a valid semver version (e.g., 1.2.3)."
-            exit 1
-          fi
-
-      - name: Release
-        run: |
-          if [ -n "${{ inputs.release_type }}" ]; then
-            yarn release --increment ${{ inputs.release_type }}
-          else
-            yarn release
-          fi
-        env:
-          GITHUB_TOKEN: ${{ secrets.CICD_PAT }}

package/.github/workflows/stale.yml

@@ -1,37 +0,0 @@
-name: 'Close stale issues and PRs'
-on:
-  schedule:
-    - cron: '30 1 * * *'
-
-jobs:
-  stale:
-    runs-on: ubuntu-latest
-    permissions:
-      issues: write
-      pull-requests: write
-    steps:
-      - uses: actions/stale@v9
-        with:
-          stale-issue-message: 'This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days.'
-          stale-pr-message: 'This PR is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days.'
-          days-before-stale: 60
-          days-before-close: 7
-          stale-issue-label: stale
-          stale-pr-label: stale
-          exempt-issue-labels: 'help wanted,in progress,pinned'
-          exempt-pr-labels: 'in progress,pinned'
-  stale-missing-info:
-    runs-on: ubuntu-latest
-    permissions:
-      issues: write
-      pull-requests: write
-    steps:
-      - uses: actions/stale@v9
-        with:
-          any-of-labels: 'repro-missing'
-          stale-issue-message: 'This issue is stale because it is missing information. Please add the requested information or this will be closed in 7 days.'
-          stale-pr-message: 'This PR is stale because it is missing information. Please add the requested information or this will be closed in 7 days.'
-          days-before-stale: 14
-          days-before-close: 7
-          stale-issue-label: stale
-          stale-pr-label: stale

package/.github/workflows/test.yml

@@ -1,54 +0,0 @@
-name: Test & build
-on:
-  push:
-    branches:
-      - master
-  pull_request:
-    branches:
-      - master
-
-jobs:
-  lint:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Setup
-        uses: ./.github/actions/setup
-
-      - name: Lint files
-        run: yarn lint
-
-      - name: Run Prettier
-        run: yarn format
-
-      - name: Verify formatted code is unchanged
-        run: git diff --exit-code HEAD
-
-      - name: Typecheck files
-        run: yarn typecheck
-
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Setup
-        uses: ./.github/actions/setup
-
-      - name: Run tests
-        run: yarn test
-
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Setup
-        uses: ./.github/actions/setup
-
-      - name: Build package
-        run: yarn build

package/.husky/pre-commit

@@ -1,2 +0,0 @@
-npx commitlint --edit
-npx lint-staged

package/.lintstagedrc

@@ -1,3 +0,0 @@
-{
-  "*.ts": "npx eslint"
-}

package/.nvmrc

@@ -1 +0,0 @@
-v20

package/.prettierignore

@@ -1,4 +0,0 @@
-fixtures
-node_modules
-yarn.lock
-.yarn

package/.prettierrc

@@ -1,14 +0,0 @@
-{
-  "printWidth": 120,
-  "tabWidth": 2,
-  "useTabs": false,
-  "semi": true,
-  "singleQuote": true,
-  "quoteProps": "consistent",
-  "jsxSingleQuote": false,
-  "trailingComma": "es5",
-  "bracketSpacing": true,
-  "bracketSameLine": true,
-  "arrowParens": "always",
-  "endOfLine": "lf"
-}