Initial v2 commit using metro & source-map-explorer

Author: IjzerenHein

README.md

@@ -2,25 +2,19 @@
 
 See what's inside of your react-native bundle 📦
 
-![bundle-visualizer-animation](./react-native-bundle-visualizer.gif)
+![bundle-visualizer-animation](./react-native-bundle-visualizer2.gif)
 
-Uses the awesome [webpack-visualizer](https://github.com/chrisbateman/webpack-visualizer) and [haul](https://github.com/callstack-io/haul) bundler.
+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.
 
 ## Usage
 
-*Make sure you have node 8 or higher installed.*
+Install as a dev-dependency:
 
-Depending on your react-native version, install the appropriate package as a dev dependency:
-
-| RN version  | Install react-native-bundle-visualizer |
-|-------------|------------|
-| >= 0.57     | `yarn add --dev react-native-bundle-visualizer` | 
-| 0.49 - 0.56 | `yarn add --dev react-native-bundle-visualizer@1.3.5` |
-| <= 0.48     | `yarn add --dev react-native-bundle-visualizer@1.1.0` |
+`yarn add --dev react-native-bundle-visualizer`
 
 And run it:
 
@@ -31,22 +25,13 @@ And run it:
 	npm install --save-dev react-native-bundle-visualizer
 	./node_modules/.bin/react-native-bundle-visualizer
 
-### Gitignore output files
 
-Additionally, add the haul generated files & folders to your `.gitignore` file:
+## Usage with older react-native versions and the Haul bundler
 
-```
-# Haul bundler
-/assets
-stats.html
-index.ios.bundle
-index.ios.bundle.map
-haul-debug.log
-```
+As of `react-native-bundle-visualizer` version 2.x, the direct output of the [Metro bundler](https://github.com/facebook/metro) is visualized using the [source-map-explorer](https://github.com/danvk/source-map-explorer).
 
-## Disclaimer
+Prior to version 2, the Haul bundler was used which used Webpack. If you are having problems visualizing the output for older react-native versions, or you want to explicitly use the Haul bundler, [please check out the V1 documentation]('./README_v1.md).
 
-The sizes reported are an indication rather than the exact byte size in your bundle. This is because the Haul packager returns different bundles compared to the react-native Metro bundler. Also, due to limitations in webpack's stats, the "actual" (minified) numbers reported here are approximate, but they should be pretty close.
 
 ## License
 

README_v1.md

@@ -0,0 +1,54 @@
+# react-native-bundle-visualizer
+
+See what's inside of your react-native bundle 📦
+
+![bundle-visualizer-animation](./react-native-bundle-visualizer.gif)
+
+Uses the awesome [webpack-visualizer](https://github.com/chrisbateman/webpack-visualizer) and [haul](https://github.com/callstack-io/haul) bundler.
+
+## 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.
+
+## Usage
+
+*Make sure you have node 8 or higher installed.*
+
+Depending on your react-native version, install the appropriate package as a dev dependency:
+
+| RN version  | Install react-native-bundle-visualizer                |
+| ----------- | ----------------------------------------------------- |
+| >= 0.57     | `yarn add --dev react-native-bundle-visualizer@1`     |
+| 0.49 - 0.56 | `yarn add --dev react-native-bundle-visualizer@1.3.5` |
+| <= 0.48     | `yarn add --dev react-native-bundle-visualizer@1.1.0` |
+	
+And run it:
+
+	yarn run react-native-bundle-visualizer
+
+*or when using npm:*
+
+	npm install --save-dev react-native-bundle-visualizer
+	./node_modules/.bin/react-native-bundle-visualizer
+
+### Gitignore output files
+
+Additionally, add the haul generated files & folders to your `.gitignore` file:
+
+```
+# Haul bundler
+/assets
+stats.html
+index.ios.bundle
+index.ios.bundle.map
+haul-debug.log
+```
+
+## Disclaimer
+
+The sizes reported are an indication rather than the exact byte size in your bundle. This is because the Haul packager returns different bundles compared to the react-native Metro bundler. Also, due to limitations in webpack's stats, the "actual" (minified) numbers reported here are approximate, but they should be pretty close.
+
+## License
+
+[MIT](./LICENSE.txt)
+

package.json

@@ -5,21 +5,21 @@
   "author": "IjzerenHein <hrutjes@gmail.com>",
   "keywords": [
     "react-native-bundle-visualizer",
+    "react native bundle size",
     "react-native",
     "react native",
     "bundle",
     "visualizer",
     "size",
     "bundle-size"
   ],
-  "bin": "./src/react-native-bundle-visualizer.sh",
+  "bin": "./src/react-native-bundle-visualizer.js",
   "repository": "https://github.com/IjzerenHein/react-native-bundle-visualizer",
   "bugs": "https://github.com/IjzerenHein/react-native-bundle-visualizer/issues",
   "license": "MIT",
   "dependencies": {
-    "haul": "^1.0.0-rc.15",
-    "react-dom": "^16.8.4",
-    "react-hot-loader": "^4.8.0",
-    "webpack-visualizer-plugin": "^0.1.11"
+    "execa": "^2.0.3",
+    "minimist": "^1.2.0",
+    "source-map-explorer": "^2.0.1"
   }
 }

src/get-entry-point.js

@@ -0,0 +1,48 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const tmpdir = require('os').tmpdir() + '/react-native-bundle-visualizer';
+const argv = require('minimist')(process.argv.slice(2));
+const execa = require('execa');
+
+function getEntryPoint() {
+  const pkgJSON = JSON.parse(fs.readFileSync('./package.json'));
+  let entry = pkgJSON.main || 'index.js';
+  if (entry[0] !== '.' && entry[0] !== '/' && entry[0] !== '\\') {
+    entry = './' + entry;
+  }
+  return entry;
+}
+
+// Get (default) arguments
+const entryFile = argv['entry-file'] || getEntryPoint();
+const platform = argv.platform || 'ios';
+const dev = argv.dev || false;
+const bundleOutput =
+  argv['bundle-output'] || tmpdir + '/' + platform + '.bundle';
+const bundleOutputSourceMap = bundleOutput + '.map';
+
+// Make sure output dir exists
+if (!fs.existsSync(tmpdir)) fs.mkdirSync(tmpdir);
+
+// Start
+const bundlePromise = execa('./node_modules/.bin/react-native', [
+  'bundle',
+  '--platform',
+  platform,
+  '--dev',
+  dev,
+  '--entry-file',
+  entryFile,
+  '--bundle-output',
+  bundleOutput,
+  '--sourcemap-output',
+  bundleOutputSourceMap
+]);
+bundlePromise.stdout.pipe(process.stdout);
+bundlePromise.then(() => {
+  const explorerPromise = execa('./node_modules/.bin/source-map-explorer', [
+    bundleOutput,
+    bundleOutputSourceMap
+  ]);
+  explorerPromise.stdout.pipe(process.stdout);
+});