react-native-bundle-discovery 1.2.0 → 1.2.2

package/README.md

@@ -18,13 +18,18 @@ With this tool, you can easily explore your app's codebase, identify large or he
 
 ### Setup:
 
-#### 1. Install
+There are two ways to install the package:
+
+1. As in independent tool 
+2. Or as a [Rozenite](https://www.rozenite.dev/) plugin (see below).
+
+#### 1. Install (independent tool)
 
 ```bash
 yarn add -D react-native-bundle-discovery
 ```
 
-#### 2. Add to your metro.config.js
+Add to your `metro.config.js`:
 
 ```diff
 // metro.config.js
@@ -48,6 +53,46 @@ const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
 module.exports = mergeConfig(getDefaultConfig(__dirname), config);
 ```
 
+---
+
+#### 2. Install as a Rozenite plugin (OPTIONAL)
+
+
+```bash
+yarn dlx rozenite@latest init # init rozenite in your project (from: https://www.rozenite.dev/docs/getting-started)
+yarn add -D react-native-bundle-discovery-rozenite-plugin # add the plugin to your project
+```
+
+Then in the `metro.config.js` file add the following:
+
+```diff
+const { withRozenite } = require('@rozenite/metro');
++const { withRozeniteBundleDiscoveryPlugin } = require('react-native-bundle-discovery-rozenite-plugin');
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+
+/**
+ * Metro configuration
+ * https://reactnative.dev/docs/metro
+ *
+ * @type {import('@react-native/metro-config').MetroConfig}
+ */
+const config = {};
+
+module.exports = withRozenite(
+  mergeConfig(getDefaultConfig(__dirname), config),
+  {
++    enhanceMetroConfig: config => withRozeniteBundleDiscoveryPlugin(config, { /* Your Bundle Discovery Options */ }),
+    enabled: true,
+  },
+);
+```
+
+Now you can run `yarn start` and open [React Native DevTools](https://reactnative.dev/docs/react-native-devtools)
+
+
+---
+
+
 #### 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:
@@ -61,7 +106,9 @@ npx react-native bundle \
   --assets-dest ios/assets
 ```
 
-#### 4. View the report in the browser
+#### 4. CLI
+
+##### 4.1 View the report in the browser
 
 Run webserver to view the report:
 
@@ -69,7 +116,7 @@ Run webserver to view the report:
 npx react-native-bundle-discovery server metro-stats.json [--port <port>]
 ```
 
-#### 4. Build the HTML report
+##### 4.2 Build the HTML report
 
 Run the following command to generate an HTML report from the JSON file:
 
@@ -102,7 +149,7 @@ Become a financial contributor at [OpenCollective](https://opencollective.com/re
 - https://github.com/callstack/react-native-bundle-visualizer
 - https://github.com/webpack-contrib/webpack-bundle-analyzer
 - https://github.com/statoscope/statoscope
-- https://github.com/relative-ci/bundle-stats/tree/master/packages/cli
+- [https://github.com/relative-ci/bundle-stats/tree/master/packages/cli](https://github.com/relative-ci/bundle-stats/tree/master/packages/cli#readme)
 
 **Built using [Discovery.js](https://github.com/discoveryjs/discovery):**
 

package/lib/.tmp.js

@@ -1,6 +1,6 @@
 module.exports = {
  "name": "react-native-bundle-discovery",
- "data": () => require("/Users/davyd.narbutovich/open-source/bundle-discovery/tmp/rocket-chat-metro-stats.json"),
+ "data": () => require("/Users/davyd.narbutovich/open-source/bundle-discovery/tmp/dtv-metro-stats.json"),
  "setup": "/Users/davyd.narbutovich/open-source/bundle-discovery/setup.js",
  "view": {
   "assets": [

package/lib/customSerializer.js

@@ -1,3 +1,4 @@
+const { parse } = require("path");
 const { writeFileSync, existsSync } = require("fs");
 const { resolve } = require("path");
 const { Buffer } = require("buffer");
@@ -5,9 +6,18 @@ const chalk = require("chalk");
 
 const NAME = require("../package.json").name;
 
+function getDefault(module) {
+  return module.__esModule ? module.default : module;
+}
+
 function getDefaultSerializer() {
-  const bundleToString = require("metro/src/lib/bundleToString");
-  const baseJSBundle = require("metro/src/DeltaBundler/Serializers/baseJSBundle");
+  const metroPath = parse(require.resolve("metro/package.json")).dir;
+  const bundleToString = getDefault(
+    require(`${metroPath}/src/lib/bundleToString.js`),
+  );
+  const baseJSBundle = getDefault(
+    require(`${metroPath}/src/DeltaBundler/Serializers/baseJSBundle.js`),
+  );
 
   return (entryPoint, preModules, graph, options) =>
     bundleToString(baseJSBundle(entryPoint, preModules, graph, options)).code;
@@ -94,6 +104,7 @@ function createJsonReport({
   includeCode,
   outputJsonPath,
   rootFolder,
+  silent,
 }) {
   const dependencies = Array.from(graph.dependencies.values());
 
@@ -114,9 +125,11 @@ function createJsonReport({
 
   writeFileSync(outputJsonPath, JSON.stringify(stats));
 
-  console.log(
-    `${chalk.yellow(`[${NAME}]`)}: Saved stats to ${chalk.green(outputJsonPath)}`,
-  );
+  if (!silent) {
+    console.log(
+      `${chalk.yellow(`[${NAME}]`)}: Saved stats to ${chalk.green(outputJsonPath)}`,
+    );
+  }
 }
 
 /**
@@ -137,6 +150,7 @@ function createSerializer({
   projectRoot,
   outputJsonPath,
   includeCode = true,
+  silent = false,
   includeEnvs = [],
 } = {}) {
   const mySerializer = serializer || getDefaultSerializer();
@@ -159,6 +173,7 @@ function createSerializer({
       includeCode,
       outputJsonPath: myOutputJsonPath,
       rootFolder: projectRoot,
+      silent,
     });
 
     return code;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bundle-discovery",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "main": "index.js",
   "bin": "lib/bin.js",
   "repository": "git@github.com:retyui/react-native-bundle-discovery.git",