react-native-boost 0.0.2 → 0.0.3

package/package.json

@@ -1,8 +1,17 @@
 {
   "name": "react-native-boost",
   "description": "🚀 Boost your React Native app's performance with a single line of code",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "main": "dist/plugin.js",
+  "keywords": [
+    "react-native",
+    "ios",
+    "android",
+    "performance",
+    "optimization",
+    "bundle",
+    "optimize"
+  ],
   "scripts": {
     "clean": "rm -rf plugin",
     "build": "yarn clean && esbuild src/plugin.ts --bundle --outfile=plugin/index.js --platform=node",
@@ -10,7 +19,6 @@
     "typecheck": "tsc --noEmit",
     "lint": "eslint src/**/*.ts",
     "format": "prettier --write .",
-    "prepare": "husky",
     "release": "release-it"
   },
   "files": [
@@ -35,32 +43,35 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "devDependencies": {
+  "dependencies": {
     "@babel/core": "^7.25.0",
     "@babel/helper-module-imports": "^7.25.0",
-    "@babel/helper-plugin-utils": "^7.25.0",
+    "@babel/helper-plugin-utils": "^7.25.0"
+  },
+  "devDependencies": {
     "@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": "^10.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"
   },
+  "peerDependencies": {
+    "expo": "*",
+    "react": "*",
+    "react-native": "*"
+  },
+  "peerDependenciesMeta": {
+    "expo": {
+      "optional": true
+    }
+  },
   "release-it": {
     "git": {
       "commitMessage": "chore: release ${version}",

package/plugin/index.js

@@ -1,3 +1,4 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -32250,9 +32251,9 @@ var require_browser = __commonJS({
   }
 });
 
-// node_modules/has-flag/index.js
+// ../../node_modules/has-flag/index.js
 var require_has_flag = __commonJS({
-  "node_modules/has-flag/index.js"(exports2, module2) {
+  "../../node_modules/has-flag/index.js"(exports2, module2) {
     "use strict";
     module2.exports = (flag, argv = process.argv) => {
       const prefix = flag.startsWith("-") ? "" : flag.length === 1 ? "-" : "--";
@@ -32263,9 +32264,9 @@ var require_has_flag = __commonJS({
   }
 });
 
-// node_modules/supports-color/index.js
+// ../../node_modules/supports-color/index.js
 var require_supports_color = __commonJS({
-  "node_modules/supports-color/index.js"(exports2, module2) {
+  "../../node_modules/supports-color/index.js"(exports2, module2) {
     "use strict";
     var os = require("os");
     var tty = require("tty");
@@ -32371,7 +32372,7 @@ var require_node = __commonJS({
     var tty = require("tty");
     var util = require("util");
     exports2.init = init;
-    exports2.log = log;
+    exports2.log = log2;
     exports2.formatArgs = formatArgs;
     exports2.save = save;
     exports2.load = load;
@@ -32506,7 +32507,7 @@ var require_node = __commonJS({
       }
       return (/* @__PURE__ */ new Date()).toISOString() + " ";
     }
-    function log(...args) {
+    function log2(...args) {
       return process.stderr.write(util.formatWithOptions(exports2.inspectOpts, ...args) + "\n");
     }
     function save(namespaces) {
@@ -70363,7 +70364,18 @@ 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());
-var textOptimizer = (path) => {
+
+// src/utils/plugin-error.ts
+var PluginError = class extends Error {
+  constructor(message) {
+    super(`[react-native-boost] Babel plugin exception: ${message}`);
+    this.name = "PluginError";
+  }
+};
+
+// src/optimizers/text/index.ts
+var textOptimizer = (path, log2 = () => {
+}) => {
   if (!import_core.types.isJSXIdentifier(path.node.name)) return;
   const parent = path.parent;
   if (!import_core.types.isJSXElement(parent)) return;
@@ -70379,7 +70391,16 @@ var textOptimizer = (path) => {
   }
   if (hasBlacklistedProperties(path)) return;
   if (!hasOnlyStringChildren(path, parent)) return;
-  const file = path.hub.file;
+  const hub = path.hub;
+  const file = typeof hub === "object" && hub !== null && "file" in hub ? hub.file : void 0;
+  if (!file) {
+    throw new PluginError("No file found in Babel hub");
+  }
+  if (!file.__optimized) {
+    const filename = file.opts?.filename || "unknown file";
+    log2(`Optimizing file: ${filename}`);
+    file.__optimized = true;
+  }
   if (!file.__nativeTextImport) {
     file.__nativeTextImport = (0, import_helper_module_imports.addNamed)(path, "NativeText", "react-native/Libraries/Text/TextNativeComponent");
   }
@@ -70465,6 +70486,11 @@ function hasBlacklistedProperties(path) {
   });
 }
 
+// src/utils/logger.ts
+var log = (message) => {
+  console.log(`[react-native-boost] ${message}`);
+};
+
 // src/plugin.ts
 var plugin_default = (0, import_helper_plugin_utils.declare)((api) => {
   api.assertVersion(7);
@@ -70473,7 +70499,9 @@ var plugin_default = (0, import_helper_plugin_utils.declare)((api) => {
     visitor: {
       JSXOpeningElement(path, state) {
         const options = state.opts ?? {};
-        if (options.optimizations?.text !== false) textOptimizer(path);
+        const logger = options.verbose ? log : () => {
+        };
+        if (options.optimizations?.text !== false) textOptimizer(path, logger);
       }
     }
   };

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';
+import { HubFile, Optimizer } from '../../types';
+import PluginError from '../../utils/plugin-error';
 
-export const textOptimizer: Optimizer = (path) => {
+export const textOptimizer: Optimizer = (path, log = () => {}) => {
   // Ensure we're processing a JSX Text element
   if (!t.isJSXIdentifier(path.node.name)) return;
 
@@ -27,10 +28,22 @@ export const textOptimizer: Optimizer = (path) => {
   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;
-  };
+  // Extract the file from the Babel hub and add flags for logging & import caching
+  const hub = path.hub as unknown;
+  const file = typeof hub === 'object' && hub !== null && 'file' in hub ? (hub.file as HubFile) : undefined;
+
+  if (!file) {
+    throw new PluginError('No file found in Babel hub');
+  }
+
+  // Log the file's optimized status only once
+  if (!file.__optimized) {
+    const filename = file.opts?.filename || 'unknown file';
+    log(`Optimizing file: ${filename}`);
+    file.__optimized = true;
+  }
+
+  // Add TextNativeComponent import (cached on file) so we only add it once per file
   if (!file.__nativeTextImport) {
     file.__nativeTextImport = addNamed(path, 'NativeText', 'react-native/Libraries/Text/TextNativeComponent');
   }
@@ -105,7 +118,7 @@ function hasBlacklistedProperties(path: NodePath<t.JSXOpeningElement>): boolean
         const binding = path.scope.getBinding(attribute.argument.name);
         let objectExpression: t.ObjectExpression | undefined;
         if (binding) {
-          // If the binding node is a VariableDeclarator, use its initializer.
+          // 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)) {

package/src/plugin.ts

@@ -1,6 +1,7 @@
 import { declare } from '@babel/helper-plugin-utils';
 import { textOptimizer } from './optimizers/text';
 import { PluginOptions } from './types';
+import { log } from './utils/logger';
 
 export default declare((api) => {
   api.assertVersion(7);
@@ -10,7 +11,8 @@ export default declare((api) => {
     visitor: {
       JSXOpeningElement(path, state) {
         const options = (state.opts ?? {}) as PluginOptions;
-        if (options.optimizations?.text !== false) textOptimizer(path);
+        const logger = options.verbose ? log : () => {};
+        if (options.optimizations?.text !== false) textOptimizer(path, logger);
       },
     },
   };

package/src/types/index.ts

@@ -1,9 +1,29 @@
 import { NodePath, types as t } from '@babel/core';
 
 export interface PluginOptions {
+  /**
+   * Whether or not to log optimized files to the console.
+   * @default false
+   */
+  verbose?: boolean;
+  /**
+   * The optimizations to apply to the plugin.
+   */
   optimizations?: {
+    /**
+     * Whether or not to optimize the text component.
+     * @default true
+     */
     text?: boolean;
   };
 }
 
-export type Optimizer = (path: NodePath<t.JSXOpeningElement>) => void;
+export type Optimizer = (path: NodePath<t.JSXOpeningElement>, log?: (message: string) => void) => void;
+
+export type HubFile = t.File & {
+  opts: {
+    filename: string;
+  };
+  __nativeTextImport?: t.Identifier;
+  __optimized?: boolean;
+};

package/src/utils/logger.ts

@@ -0,0 +1,3 @@
+export const log = (message: string) => {
+  console.log(`[react-native-boost] ${message}`);
+};

package/src/utils/plugin-error.ts

@@ -0,0 +1,6 @@
+export default class PluginError extends Error {
+  constructor(message: string) {
+    super(`[react-native-boost] Babel plugin exception: ${message}`);
+    this.name = 'PluginError';
+  }
+}

package/README.md

@@ -1,87 +0,0 @@
-# 🚀 react-native-boost
-
-![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 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 can change significantly between versions. Use with caution!
-
-- ⚡ Automatic performance optimization through source code analysis
-- 🔒 Safe optimizations that don't break your app
-- 🎯 Zero runtime overhead - all optimizations happen during build time
-- 📱 Cross-platform compatible
-- 🧪 Works seamlessly with Expo
-- 🎨 Configurable optimization strategies
-
-## Installation
-
-```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: ['react-native-boost/plugin'],
-};
-```
-
-Optionally, you can configure the plugin to disable specific optimizations:
-
-```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 🐌
-import React from 'react';
-import { View, Text } from 'react-native';
-
-const MyComponent = () => (
-  <View>
-    <Text>Hello, World!</Text>
-  </View>
-);
-
-// Automafically transformed to ✨
-import React from 'react';
-import { View } from 'react-native';
-import { NativeText } from 'react-native/Libraries/Components/Text/NativeText';
-
-const MyComponent = () => (
-  <View>
-    <NativeText>Hello, World!</NativeText>
-  </View>
-);
-```
-
-## Contributing
-
-See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
-
-## License
-
-MIT