react-native-boost 0.0.3 โ 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +88 -0
- package/package.json +6 -3
- package/plugin/index.js +1 -70508
package/README.md
ADDED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
# ๐ react-native-boost
|
|
2
|
+
|
|
3
|
+
  
|
|
4
|
+
|
|
5
|
+
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.
|
|
6
|
+
|
|
7
|
+
> [!WARNING]
|
|
8
|
+
> 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!
|
|
9
|
+
|
|
10
|
+
- โก Automatic performance optimization through source code analysis
|
|
11
|
+
- ๐ Safe optimizations that don't break your app
|
|
12
|
+
- ๐ฏ Zero runtime overhead - all optimizations happen during build time
|
|
13
|
+
- ๐ฑ Cross-platform compatible
|
|
14
|
+
- ๐งช Works seamlessly with Expo
|
|
15
|
+
- ๐จ Configurable optimization strategies
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
18
|
+
|
|
19
|
+
```sh
|
|
20
|
+
npm install --save-dev react-native-boost
|
|
21
|
+
# or
|
|
22
|
+
yarn add --dev react-native-boost
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Then, add the plugin to your Babel configuration (`babel.config.js`):
|
|
26
|
+
|
|
27
|
+
```js
|
|
28
|
+
module.exports = {
|
|
29
|
+
plugins: ['react-native-boost/plugin'],
|
|
30
|
+
};
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
Optionally, you can configure the plugin to log optimized files to the console and disable specific optimizations:
|
|
34
|
+
|
|
35
|
+
```js
|
|
36
|
+
module.exports = {
|
|
37
|
+
plugins: [
|
|
38
|
+
[
|
|
39
|
+
'react-native-boost/plugin',
|
|
40
|
+
{
|
|
41
|
+
verbose: true,
|
|
42
|
+
optimizations: {
|
|
43
|
+
text: false,
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
],
|
|
47
|
+
],
|
|
48
|
+
};
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## How It Works
|
|
52
|
+
|
|
53
|
+
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.
|
|
54
|
+
|
|
55
|
+
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.
|
|
56
|
+
|
|
57
|
+
Here's an example of how it works:
|
|
58
|
+
|
|
59
|
+
```jsx
|
|
60
|
+
// Your original code ๐
|
|
61
|
+
import React from 'react';
|
|
62
|
+
import { View, Text } from 'react-native';
|
|
63
|
+
|
|
64
|
+
const MyComponent = () => (
|
|
65
|
+
<View>
|
|
66
|
+
<Text>Hello, World!</Text>
|
|
67
|
+
</View>
|
|
68
|
+
);
|
|
69
|
+
|
|
70
|
+
// Automagically transformed to โจ
|
|
71
|
+
import React from 'react';
|
|
72
|
+
import { View } from 'react-native';
|
|
73
|
+
import { NativeText } from 'react-native/Libraries/Text/TextNativeComponent';
|
|
74
|
+
|
|
75
|
+
const MyComponent = () => (
|
|
76
|
+
<View>
|
|
77
|
+
<NativeText>Hello, World!</NativeText>
|
|
78
|
+
</View>
|
|
79
|
+
);
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
## Contributing
|
|
83
|
+
|
|
84
|
+
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
|
|
85
|
+
|
|
86
|
+
## License
|
|
87
|
+
|
|
88
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-boost",
|
|
3
3
|
"description": "๐ Boost your React Native app's performance with a single line of code",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.5",
|
|
5
5
|
"main": "dist/plugin.js",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"react-native",
|
|
@@ -14,12 +14,14 @@
|
|
|
14
14
|
],
|
|
15
15
|
"scripts": {
|
|
16
16
|
"clean": "rm -rf plugin",
|
|
17
|
-
"build": "yarn clean &&
|
|
17
|
+
"build": "yarn clean && node scripts/esbuild.js",
|
|
18
18
|
"test": "vitest",
|
|
19
19
|
"typecheck": "tsc --noEmit",
|
|
20
20
|
"lint": "eslint src/**/*.ts",
|
|
21
21
|
"format": "prettier --write .",
|
|
22
|
-
"release": "release-it"
|
|
22
|
+
"release": "release-it",
|
|
23
|
+
"prepack": "cp ../../README.md ./README.md",
|
|
24
|
+
"postpack": "rm ./README.md"
|
|
23
25
|
},
|
|
24
26
|
"files": [
|
|
25
27
|
"src",
|
|
@@ -57,6 +59,7 @@
|
|
|
57
59
|
"@types/node": "^20",
|
|
58
60
|
"babel-plugin-tester": "^11.0.4",
|
|
59
61
|
"esbuild": "^0.25.0",
|
|
62
|
+
"esbuild-node-externals": "^1.18.0",
|
|
60
63
|
"globals": "^16.0.0",
|
|
61
64
|
"release-it": "^18.1.2",
|
|
62
65
|
"typescript": "^5.7.3",
|