Release v4

- Node.js 20+
- Removed `fs-extra`
- Use `node:` imports
- Update dependencies
- Update README.md

Author: retyui

.github/workflows/test.yml

@@ -16,15 +16,16 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
+        nodejs-version: [24, 22, 20] # Three latest major versions of Node.js
         rn-version: [latest, 0.83.4, 0.82.1] # Three latest major versions of React Native
     steps:
       - name: Checkout
         uses: actions/checkout@v6
 
-      - name: Use Node.js ${{ env.NODEJS_VERSION }}
+      - name: Use Node.js ${{ matrix.nodejs-version }}
         uses: actions/setup-node@v6
         with:
-          node-version: ${{ env.NODEJS_VERSION }}
+          node-version: ${{ matrix.nodejs-version }}
           cache: 'yarn'
 
       - name: Install node_modules in ${{ github.workspace }}
@@ -47,15 +48,16 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
+        nodejs-version: [24, 22, 20]
         expo-sdk: [ 55, 54, 53 ] # Three latest major Expo SDK versions
     steps:
       - name: Checkout
         uses: actions/checkout@v6
 
-      - name: Use Node.js ${{ env.NODEJS_VERSION }}
+      - name: Use Node.js ${{ matrix.nodejs-version }}
         uses: actions/setup-node@v6
         with:
-          node-version: ${{ env.NODEJS_VERSION }}
+          node-version: ${{ matrix.nodejs-version }}
           cache: 'yarn'
 
       - name: Install node_modules in ${{ github.workspace }}

README.md

@@ -1,37 +1,39 @@
 # react-native-bundle-visualizer
 
-See what's inside of your react-native bundle 📦
+See what's inside your react-native bundle 📦
 
 ![bundle-visualizer-animation](./react-native-bundle-visualizer2.gif)
 
 Uses the awesome [source-map-explorer](https://github.com/danvk/source-map-explorer) to visualize the output of the [Metro bundler](https://github.com/facebook/metro).
 
 ## Purpose
 
-Sometimes, importing a single javascript library can drastically increase your bundle size. This package helps you to identify such a library, so you can keep the bundle size low and loading times fast.
+Sometimes, importing a single JavaScript library can drastically increase your bundle size. This package helps you to identify such a library, so you can keep the bundle size low and loading times fast.
 
 ## Usage
 
-Make sure [npx](https://github.com/npm/npx) is installed and run the following command in your project root
-
-`npx react-native-bundle-visualizer`
-
-### Or install as a dev-dependency
+Using `npx` is the recommended way to run the visualizer
 
 ```sh
-yarn add --dev react-native-bundle-visualizer
+# React Native 0.72+
+npx react-native-bundle-visualizer@latest
+# or Expo SDK 50+
+npx react-native-bundle-visualizer@latest --expo
 ```
 
-And run it:
+### Or you can install as a dev-dependency
 
-```
-yarn run react-native-bundle-visualizer
+```sh
+yarn add --dev react-native-bundle-visualizer
+# or npm
+npm install --save-dev react-native-bundle-visualizer
 ```
 
-_or when using npm:_
+To run the local version of visualizer, use the following command:
 
-```
-npm install --save-dev react-native-bundle-visualizer ./node_modules/.bin/react-native-bundle-visualizer
+```sh
+npx react-native-bundle-visualizer # if installed by yarn or npm
+yarn run react-native-bundle-visualizer # if installed by Yarn
 ```
 
 ## Command line arguments
@@ -58,11 +60,13 @@ All command-line arguments are optional. By default a production build will be c
 ## Version compatibility
 
 | Version                                                                      | Comments                                                                                        |
-| ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
-| 3.x                                                                          | Compatible with React-Native CLI bootstrapped projects and Expo SDK 41 or higher.               |
+|------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------|
+| 4.x                                                                          | Compatible with React Native 0.72+ or Expo SDK 50+                                              |
+| [3.x](https://github.com/IjzerenHein/react-native-bundle-visualizer/tree/v3) | Compatible with React-Native CLI bootstrapped projects and Expo SDK 41 or higher.               |
 | [2.x](https://github.com/IjzerenHein/react-native-bundle-visualizer/tree/v2) | Compatible with React-Native CLI bootstrapped projects and Expo SDK 40 or earlier.              |
 | [1.x](https://github.com/IjzerenHein/react-native-bundle-visualizer/tree/v1) | Uses the [Haul bundler](https://github.com/callstack/haul) instead instead of the Metro output. |
 
+
 ## License
 
 [MIT](./LICENSE.txt)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bundle-visualizer",
-  "version": "3.2.0",
+  "version": "4.0.0",
   "description": "See what's inside your react-native bundle",
   "author": "IjzerenHein <hrutjes@gmail.com>",
   "keywords": [
@@ -22,15 +22,17 @@
   ],
   "dependencies": {
     "chalk": "^4.1.2",
-    "execa": "^5.1.1",
-    "fs-extra": "^10.0.0",
-    "minimist": "^1.2.5",
-    "open": "^8.4.0",
+    "execa": "^9.6.1",
+    "minimist": "^1.2.8",
+    "open": "^11.0.0",
     "source-map-explorer": "^2.5.3"
   },
   "scripts": {
     "test": "yarn test:rn && yarn test:expo",
     "test:rn": "cd test/RN64 && yarn install && npx ../.. && cd ../..",
     "test:expo": "cd test/Expo42 && yarn install && npx ../.. --expo=true && cd ../.."
+  },
+  "engines": {
+    "node": ">=20"
   }
 }

src/react-native-bundle-visualizer.js

@@ -1,12 +1,12 @@
 #!/usr/bin/env node
+const fs = require('node:fs');
+const os = require('node:os');
+const process = require('node:process');
+const path = require('node:path');
 const chalk = require('chalk');
-const fs = require('fs-extra');
-const os = require('os');
-const process = require('process');
-const path = require('path');
 const argv = require('minimist')(process.argv.slice(2));
-const execa = require('execa');
-const open = require('open');
+const {execa} = require('execa');
+const open = require('open').default;
 const {explore} = require('source-map-explorer');
 const pkgJSON = JSON.parse(fs.readFileSync('./package.json'));
 
@@ -74,8 +74,8 @@ const borderChecks = argv['border-checks'] === true;
 const errorOnFail = argv['error-on-fail'] || false;
 
 // Make sure the temp dir exists
-fs.ensureDirSync(baseDir);
-fs.ensureDirSync(tmpDir);
+fs.mkdirSync(baseDir, { recursive: true });
+fs.mkdirSync(tmpDir, { recursive: true });
 
 // Try to obtain the previous file size
 let prevBundleSize;
@@ -162,7 +162,7 @@ bundlePromise
       );
 
       // Make sure the explorer output dir is removed
-      fs.removeSync(outDir);
+      fs.rmSync(outDir, { recursive: true, force: true });
       return explore(
         {
           code: bundleOutput,