react-native-bundle-discovery 2.0.0-rc.3 → 2.0.0-rc.5

package/README.md

@@ -10,18 +10,26 @@ With this tool, you can easily explore your app's codebase, identify large or he
 <img width="800" alt="" src="./assets/img.png" />
 
 
+### Packages:
+
+- `react-native-bundle-discovery` - simple JS library to generate a JSON report of the bundle.
+- `react-native-bundle-discovery-ui` - UI to visualize the bundle report.
+- `react-native-bundle-discovery-cli` - CLI to analyze the bundle report.
+- `react-native-bundle-discovery-rozenite-plugin` - Rozenite plugin to integrate UI tool to [React Native DevTools](https://reactnative.dev/docs/react-native-devtools).
 
 ### Setup:
 
 There are two ways to install the package:
 
 1. As in independent tool (UI + CLI) 
-2. Or as a [Rozenite](https://www.rozenite.dev/) plugin
+2. Or as a [Rozenite](_rozenite/README.md) plugin (see: [_rozenite/README.md](_rozenite/README.md))
 
 #### 1. Install (independent tool)
 
 ```bash
-yarn add -D react-native-bundle-discovery react-native-bundle-discovery-ui
+yarn add -D react-native-bundle-discovery # required for generating the JSON report
+yarn add -D react-native-bundle-discovery-ui # optional: used for visualizing the report in the browser
+yarn add -D react-native-bundle-discovery-cli # optional: used for analysis of the report in the CLI
 ```
 
 Add to your `metro.config.js`:
@@ -40,22 +48,19 @@ const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
 
 -const config = {};
 +const config = {
-+  serializer: {
-+    customSerializer: mySerializer
-+  },
-+};
+  serializer: { customSerializer: mySerializer },
+};
 
 module.exports = mergeConfig(getDefaultConfig(__dirname), config);
 ```
 
----
-
+#### 2. Install (as plugin for Rozenite)
 
+See: [_rozenite/README.md](_rozenite/README.md)
 
 ---
 
-
-#### 3. Build the app
+### 3. Build the app
 
 As example, for iOS you can run the following command, and it will generate the `metro-stats.json` file in the root of your project:
 
@@ -68,28 +73,37 @@ npx react-native bundle \
   --assets-dest ios/assets
 ```
 
-#### 4. CLI
+### 4. Commands
 
-##### 4.1 View the report in the browser
+#### CLI package
 
-Run webserver to view the report:
+You need to install `react-native-bundle-discovery-cli`
 
 ```bash
-npx react-native-bundle-discovery-ui server metro-stats.json [--port <port>]
+# Display all recommended optimizations for the bundle
+npx react-native-bundle-discovery-cli metro-stats.json
+
+# Display all packages in the bundle report
+npx react-native-bundle-discovery-cli packages metro-stats.json [--sort size|name] [--format json|table|default]
 ```
 
-##### 4.2 Build the HTML report
+#### UI package
 
-Run the following command to generate an HTML report from the JSON file:
+You need to install `react-native-bundle-discovery-ui`
 
 ```bash
+# Start server to view the report in the browser (default port: 8079)
+npx react-native-bundle-discovery-ui metro-stats.json [--port <port>]
+
+# Build the report into a static HTML file
 npx react-native-bundle-discovery-ui build metro-stats.json
 ```
 
-
 ---
 
-### `createSerializer(options: Options)`
+### `react-native-bundle-discovery` JS API
+
+#### `createSerializer(options: Options)`
 
 | Prop                   | Default value             | Description                                                                                                                              |
 | ---------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
@@ -98,6 +112,34 @@ npx react-native-bundle-discovery-ui build metro-stats.json
 | outputJsonPath: string | `<root>/metro-stats.json` | The path where the JSON report will be saved. Defaults to `metro-stats.json` in project root.                                            |
 | includeCode: boolean   | `true`                    | Whether to include the source and output code in the JSON report.                                                                        |
 
+### `createProcessModuleFilter(options: ProcessModuleFilterOptions)`
+
+
+| Prop                   | Default value             | Description                   |
+| ---------------------- | ------------------------- | ----------------------------- |
+| removePromisePolyfill: boolean | `false` | Remove the Promise polyfill as Hermes provide own impl. (issue: [#57702](https://github.com/react/react-native/issues/57702)) |
+| removeOldRenderer: boolean     | `false` | Whether to remove the old renderer. Set to `true` when New Arch is enabled    |
+| removeNewRenderer: boolean     | `false` | Whether to remove the new renderer. Set to `true` when New Arch is disabled    |
+| removeUTFSequence: boolean     | `false` | Remove useless undocumented RN module.     |
+
+
+Simple helper that devs can use to filter out unnecessary modules from the bundle report.
+You can get recommendations during the analysis of the bundle report using the CLI tool.
+
+```js
+// metro.config.js
+const {createProcessModuleFilter} = require('react-native-bundle-discovery');
+const config = {
+  serializer: {
+    processModuleFilter: createProcessModuleFilter({
+      removePromisePolyfill: true,
+      removeOldRenderer: true,
+      removeUTFSequence: true,
+    }),
+  },
+};
+```
+
 ### Financial Contributors
 
 Become a financial contributor at [OpenCollective](https://opencollective.com/react-native-bundle-discovery) or [GitHub Sponsors](https://github.com/sponsors/retyui)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bundle-discovery",
-  "version": "2.0.0-rc.3",
+  "version": "2.0.0-rc.5",
   "main": "index.js",
   "repository": "git@github.com:retyui/react-native-bundle-discovery.git",
   "author": "David <4661784+retyui@users.noreply.github.com>",