Skip to content

Commit 81e1974

Browse files
committed
docs: add docs
1 parent 3023d8b commit 81e1974

File tree

1 file changed

+58
-5
lines changed

1 file changed

+58
-5
lines changed

README.md

Lines changed: 58 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,74 @@
11
# react-native-code-push-diff
22

3-
This library builds upon the foundational strengths of the react-native-code-push library, adding advanced functionality to precisely identify and manage differences between code-push builds.
3+
The primary objective of this library is to significantly decrease the size of codepush bundles, which comprise both the JavaScript bundle and its associated assets. This is achieved by utilizing a script that retains only the modified or newly added files within the bundle. As a result, this selective retention mechanism enables a drastic reduction in the overall bundle size, often decreasing it by several times. This optimization facilitates more efficient updates and faster distribution, enhancing the overall deployment process and user experience.
44

55
## Installation
66

77
```sh
88
npm install react-native-code-push-diff
99
```
1010

11+
```sh
12+
yarn add react-native-code-push-diff
13+
```
14+
1115
## Usage
1216

13-
```js
14-
import { multiply } from 'react-native-code-push-diff';
17+
1. Add `import 'react-native-code-push-diff/setup'` in the root file.
18+
19+
```diff
20+
+import 'react-native-code-push-diff/setup'
21+
import { AppRegistry } from 'react-native'
22+
import App from './src/App'
23+
import { name as appName } from './app.json'
24+
25+
AppRegistry.registerComponent(appName, () => App)
26+
```
27+
28+
2. Run the `code-push-diff release-react -a {YOUR_APP_NAME} -base {BRANCH_OR_COMMIT}` if you need to create and release a codepush bundle.
29+
30+
## How does it work?
31+
The `bundle` or `release-react` scripts initiate their process by generating bundles corresponding to the current active `git commit` and a specified `base` commit, which is provided as an argument. This step is crucial for identifying the exact changes in assets that have occurred between these two states. Following this, the scripts compute the differences in assets across the generated bundles to pinpoint which files have been modified or added.
32+
33+
To streamline the integration of these changes into the final bundle, the process involves creating a bundle_config.json file. This file acts as a manifest, listing the paths of all files that have undergone changes. With this configuration in hand, the scripts proceed to rebuild the bundle for a third and final time, this time incorporating only the assets that have been identified as changed, ensuring an optimized bundle size.
34+
35+
The `react-native-code-push-diff/setup` plays a key role by setting up a custom source transformer based on [the specified transformer mechanism](https://github.com/facebook/react-native/blob/v0.71.7/Libraries/Image/resolveAssetSource.js#L77) in React Native. This transformer is designed to consult the `bundle_config.json` file at runtime. If it encounters a file whose path is listed in `bundle_config.json`, it recognises that file as modified. It makes sure that this file is extracted from the codepush bundle and not the main bundle, otherwise the file will be extracted from the `main` bundle.
36+
37+
## Script Usage
38+
39+
### bundle
40+
41+
The `bundle` command is designed to generate a codepush bundle incorporating only the assets that have changed:
42+
```sh
43+
code-push-diff bundle {appOrOs} -base {branchOrCommit}
44+
```
45+
46+
- `appOrOs` -This parameter specifies the context in which the bundle is to be built. You can either input the name of an application as defined within your appcenter configuration or directly specify the platform for which you are building the bundle (`ios` or `android`).
47+
48+
- `branchOrCommit` - This argument determines the reference point for calculating asset differences. It should be the identifier of the branch or commit that served as the basis for your most recent application build. By specifying this, the script can accurately assess which assets have changed and need to be included in the codepush bundle, ensuring that your updates are both efficient and relevant.
1549

16-
// ...
50+
For example:
51+
`code-push-diff i.kuchaev/AwesomeProject release-2.1`
1752

18-
const result = await multiply(3, 7);
53+
Also the script apply all args for the [release-react](https://github.com/microsoft/code-push/tree/v3.0.1/cli#releasing-updates-react-native) command, like `plistFile`, `outputDir` etc.
54+
55+
For example:
56+
`code-push-diff i.kuchaev/AwesomeProject release-2.1 -plistFile ios/project/Info.plist`
57+
58+
### release-react
59+
The `release-react` command leverages the code-push-diff bundle functionality to construct a bundle and then releases it to App Center:
60+
```sh
61+
code-push-diff release-react -a {appName} -base {branchOrCommit}
62+
```
63+
64+
- `app` - This should be the exact name of your application as registered in App Center. It enables the script to correctly identify and target the application for the update release.
65+
66+
- `branchOrCommit` - Specify the branch or commit that will act as a reference point for identifying changes. Typically, you should use the commit or branch that corresponds to the last build of your released application. This comparison helps in determining which assets have changed and need to be included in the release.
67+
68+
This script also supports all the parameters available for the [release-react command](https://github.com/microsoft/code-push/tree/v3.0.1/cli#releasing-updates-react-native) used by CodePush, , like `plistFile`, `outputDir` etc.
69+
70+
```sh
71+
code-push-diff i.kuchaev/AwesomeProject release-2.1 -plistFile ios/project/Info.plist -rallout 50
1972
```
2073

2174
## Contributing

0 commit comments

Comments
 (0)