Source map explorer

README.md

@@ -45,6 +45,7 @@ Haul is a drop-in replacement for `react-native` CLI built on open tools like We
 | `@haul-bundler/preset-0.60`                 | [![preset-0.60 version][version-preset-0.60]][package-preset-0.60]                                                 | Preset with configuration tweaked for RN 0.60.                                                                | Yes (installed by `init` command when using RN 0.60) |
 | `@haul-bundler/inspector`                   | [![inspector version][version-inspector]][package-inspector]                                                       | Haul inspector with `haul-inspector` binary.                                                                  | No (optional).                                       |
 | `@haul-bundler/inspector-events`            | [![inspector-events version][version-inspector-events]][package-inspector-events]                                  | Shared logic between `cli` and Haul `inspector`.                                                              | Yes (installed with `cli`)                           |
+| `@haul-bundler/explore`                     | [![explore version][version-explore]][package-explore]                                                             | Explore and analyse generated bundle                                                                          | No (optional)                                        |
 
 ## Getting started
 
@@ -155,3 +156,5 @@ Haul is an open source project and will always remain free to use. If you think
 [package-preset-0.59]: https://www.npmjs.com/package/@haul-bundler/preset-0.59
 [version-preset-0.60]: https://img.shields.io/npm/v/@haul-bundler/preset-0.60.svg?style=flat-square
 [package-preset-0.60]: https://www.npmjs.com/package/@haul-bundler/preset-0.60
+[version-explore]: https://img.shields.io/npm/v/@haul-bundler/explore.svg?style=flat-square
+[package-explore]: https://www.npmjs.com/package/@haul-bundler/explore

e2e/react_native_0_60x/__tests__/explore-bundle.test.ts

@@ -0,0 +1,71 @@
+import path from 'path';
+import fs from 'fs';
+import { installDeps } from '../../utils/common';
+import { bundleForPlatform, cleanup } from '../../utils/bundle';
+import { runProcessSync } from '../../utils/runProcess';
+
+const BIN_PATH = path.resolve(
+  __dirname,
+  '../../../packages/haul-explore/bin/haul-explore.js'
+);
+const PROJECT_FIXTURE = path.join(
+  __dirname,
+  '../../../fixtures',
+  'react_native_with_haul_0_60x'
+);
+
+describe('test exploring bundle', () => {
+  beforeAll(() => installDeps(PROJECT_FIXTURE));
+  beforeEach(() => cleanup(PROJECT_FIXTURE));
+  afterAll(() => cleanup(PROJECT_FIXTURE));
+
+  it('should return correct results for standard android bundle', () => {
+    const RESULT_PATH = path.join(PROJECT_FIXTURE, 'dist/output_android.json');
+    const bundlePath = bundleForPlatform(PROJECT_FIXTURE, 'android', {
+      dev: false,
+    });
+    const result = runProcessSync(PROJECT_FIXTURE, [
+      BIN_PATH,
+      bundlePath,
+      bundlePath + '.map',
+      `--json`,
+      RESULT_PATH,
+    ]);
+
+    expect(result.stderr.length).toBe(0);
+    expect(fs.existsSync(RESULT_PATH)).toBeTruthy();
+
+    const output = fs.readFileSync(RESULT_PATH);
+    const resultJSON = JSON.parse(output.toString());
+    const bundleInformation = resultJSON.results[0];
+
+    expect(bundleInformation.totalBytes).toBeGreaterThan(0);
+    expect(Object.keys(bundleInformation.files).length).toBeGreaterThan(0);
+    expect(bundleInformation.bundleName).toEqual(bundlePath);
+  });
+
+  it('should return correct results for standard ios bundle', () => {
+    const RESULT_PATH = path.join(PROJECT_FIXTURE, 'dist/output_ios.json');
+    const bundlePath = bundleForPlatform(PROJECT_FIXTURE, 'ios', {
+      dev: false,
+    });
+    const result = runProcessSync(PROJECT_FIXTURE, [
+      BIN_PATH,
+      bundlePath,
+      bundlePath + '.map',
+      `--json`,
+      RESULT_PATH,
+    ]);
+
+    expect(result.stderr.length).toBe(0);
+    expect(fs.existsSync(RESULT_PATH)).toBeTruthy();
+
+    const output = fs.readFileSync(RESULT_PATH);
+    const resultJSON = JSON.parse(output.toString());
+    const bundleInformation = resultJSON.results[0];
+
+    expect(bundleInformation.totalBytes).toBeGreaterThan(0);
+    expect(Object.keys(bundleInformation.files).length).toBeGreaterThan(0);
+    expect(bundleInformation.bundleName).toEqual(bundlePath);
+  });
+});

e2e/react_native_0_60x/__tests__/explore-ram-bundle.test.ts

@@ -0,0 +1,77 @@
+import path from 'path';
+import fs from 'fs';
+import { installDeps } from '../../utils/common';
+import { bundleForPlatform, cleanup } from '../../utils/bundle';
+import { runProcessSync } from '../../utils/runProcess';
+
+const BIN_PATH = path.resolve(
+  __dirname,
+  '../../../packages/haul-explore/bin/haul-explore.js'
+);
+const PROJECT_FIXTURE = path.join(
+  __dirname,
+  '../../../fixtures',
+  'react_native_with_haul_0_60x'
+);
+
+describe('test exploring ram bundle', () => {
+  beforeAll(() => installDeps(PROJECT_FIXTURE));
+  beforeEach(() => cleanup(PROJECT_FIXTURE));
+  afterAll(() => cleanup(PROJECT_FIXTURE));
+
+  it('should return correct results for ram android bundle', () => {
+    const RESULT_PATH = path.join(PROJECT_FIXTURE, 'dist/output_android.json');
+    const bundlePath = bundleForPlatform(PROJECT_FIXTURE, 'android', {
+      ramBundle: true,
+      dev: false,
+    });
+    const unbundleFilePath = path.join(
+      path.dirname(bundlePath),
+      'js-modules/UNBUNDLE'
+    );
+    const result = runProcessSync(PROJECT_FIXTURE, [
+      BIN_PATH,
+      unbundleFilePath,
+      bundlePath + '.map',
+      `--json`,
+      RESULT_PATH,
+    ]);
+
+    expect(fs.existsSync(RESULT_PATH)).toBeTruthy();
+    expect(result.stderr.length).toBe(0);
+
+    const output = fs.readFileSync(RESULT_PATH);
+    const resultJSON = JSON.parse(output.toString());
+    const bundleInformation = resultJSON.results[0];
+
+    expect(bundleInformation.totalBytes).toBeGreaterThan(0);
+    expect(Object.keys(bundleInformation.files).length).toBeGreaterThan(0);
+    expect(bundleInformation.bundleName).toEqual(path.basename(bundlePath));
+  });
+
+  it('should return correct results for ram ios bundle', () => {
+    const RESULT_PATH = path.join(PROJECT_FIXTURE, 'dist/output_ios.json');
+    const bundlePath = bundleForPlatform(PROJECT_FIXTURE, 'ios', {
+      ramBundle: true,
+      dev: false,
+    });
+    const result = runProcessSync(PROJECT_FIXTURE, [
+      BIN_PATH,
+      bundlePath,
+      bundlePath + '.map',
+      `--json`,
+      RESULT_PATH,
+    ]);
+
+    expect(result.stderr.length).toBe(0);
+    expect(fs.existsSync(RESULT_PATH)).toBeTruthy();
+
+    const output = fs.readFileSync(RESULT_PATH);
+    const resultJSON = JSON.parse(output.toString());
+    const bundleInformation = resultJSON.results[0];
+
+    expect(bundleInformation.totalBytes).toBeGreaterThan(0);
+    expect(Object.keys(bundleInformation.files).length).toBeGreaterThan(0);
+    expect(bundleInformation.bundleName).toEqual(path.basename(bundlePath));
+  });
+});

e2e/utils/bundle.ts

@@ -5,7 +5,7 @@ import rimraf from 'rimraf';
 export function bundleForPlatform(
   projectDir: string,
   platform: string,
-  { ramBundle }: { ramBundle?: boolean } = {}
+  { ramBundle, dev = true }: { ramBundle?: boolean; dev?: boolean } = {}
 ) {
   const bundlePath = path.resolve(
     projectDir,
@@ -20,12 +20,13 @@ export function bundleForPlatform(
     bundlePath,
     '--assets-dest',
     path.resolve(projectDir, 'dist'),
+    '--dev',
+    dev ? 'true' : 'false',
   ]);
 
   if (stdout.match(/(error ▶︎ |ERROR)/g)) {
     throw new Error(stdout);
   }
-
   return bundlePath;
 }
 

e2e/utils/runProcess.ts

@@ -0,0 +1,40 @@
+import path from 'path';
+import { spawnSync } from 'child_process';
+import { ExecOutput } from './common';
+
+const NYC_BIN = path.resolve(__dirname, '../../node_modules/.bin/nyc');
+const NYC_ARGS = [
+  '--silent',
+  '--no-clean',
+  '--exclude-after-remap',
+  'false',
+  '--cwd',
+  path.join(__dirname, '../../'),
+];
+
+function getEnv() {
+  return {
+    ...process.env,
+    NODE_ENV: 'development',
+  };
+}
+
+export function runProcessSync(dir: string, args: Array<string>): ExecOutput {
+  let cwd = dir;
+  const isRelative = cwd[0] !== '/';
+
+  if (isRelative) {
+    cwd = path.resolve(__dirname, cwd);
+  }
+
+  const result = spawnSync(NYC_BIN, [...NYC_ARGS, ...args], {
+    cwd,
+    env: getEnv(),
+  });
+
+  return {
+    ...result,
+    stdout: result.stdout.toString(),
+    stderr: result.stderr.toString(),
+  };
+}

packages/haul-explore/README.md

@@ -0,0 +1,62 @@
+# @haul-bundler/explore
+
+[![Version][version]][package]   
+
+[![PRs Welcome][prs-welcome-badge]][prs-welcome]
+[![MIT License][license-badge]][license]
+[![Chat][chat-badge]][chat]
+[![Code of Conduct][coc-badge]][coc]
+
+Wrapper for [source-map-explorer](https://github.com/danvk/source-map-explorer) that allows you to explore and analyse regular and RAM bundles for React Native.
+
+## Usage
+
+Install module:
+
+```bash
+yarn add -D @haul-bundler/explore
+```
+
+Then you can run:
+
+```bash
+yarn haul-explore <bundle_path> <source_map_path> --[html | tsv | json] [filename]
+```
+
+- `<bundle_path>` and `<source_map_path>` are required
+- Output type (`html | tsv | json`) is optional and set to `html` by default
+- If `filename` is specified with output type (`html | tsv | json`), the results will be saved to specified file, otherwise the results it will be shown in the browser
+
+## Examples
+
+### Regular iOS bundle
+
+```bash
+yarn haul-explore dist/main.jsbundle dist/main.jsbundle.map
+```
+
+### Indexed RAM bundle (default RAM bundle for iOS)
+
+```bash
+yarn haul-explore dist/main.jsbundle dist/main.jsbundle.map
+```
+
+### File RAM bundle (default RAM bundle for Arndroid)
+
+```bash
+yarn haul-explore dist/js-modules/UNBUNDLE dist/index.android.bundle.map
+```
+
+<!-- badges (common) -->
+
+[license-badge]: https://img.shields.io/npm/l/@haul-bundler/explore.svg?style=flat-square
+[license]: https://opensource.org/licenses/MIT
+[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
+[prs-welcome]: http://makeapullrequest.com
+[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
+[coc]: https://github.com/callstack/haul/blob/master/CODE_OF_CONDUCT.md
+[chat-badge]: https://img.shields.io/badge/chat-discord-brightgreen.svg?style=flat-square&colorB=7289DA&logo=discord
+[chat]: https://discord.gg/zwR2Cdh
+
+[version]: https://img.shields.io/npm/v/@haul-bundler/explore.svg?style=flat-square
+[package]: https://www.npmjs.com/package/@haul-bundler/explore

packages/haul-explore/bin/haul-explore.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+require('../build/index');

packages/haul-explore/package.json

@@ -0,0 +1,31 @@
+{
+  "version": "0.15.0",
+  "name": "@haul-bundler/explore",
+  "description": "Explore and analyse your React Native bundle",
+  "author": "Pawel Szymanski <pawel.szymanski@callstack.com>",
+  "repository": "github:callstack/haul",
+  "license": "MIT",
+  "bugs": "https://github.com/callstack/haul/issues",
+  "files": [
+    "build/",
+    "bin/"
+  ],
+  "bin": {
+    "haul-explore": "bin/haul-explore.js"
+  },
+  "engines": {
+    "node": ">=10.x"
+  },
+  "dependencies": {
+    "@babel/core": "7.4.3",
+    "@babel/plugin-proposal-class-properties": "7.4.0",
+    "@babel/plugin-transform-flow-strip-types": "7.4.0",
+    "@babel/preset-env": "7.4.3",
+    "@babel/preset-typescript": "7.3.3",
+    "hasha": "^5.0.0",
+    "metro": "^0.56.4",
+    "source-map": "^0.7.3",
+    "source-map-explorer": "git://github.com/pan-pawel/source-map-explorer.git#source-map-explorer-v3.2.2-gitpkg",
+    "yargs": "^15.1.0"
+  }
+}