Merge pull request #6 from MLH-Fellowship/feat/generate-source-map

Feat/generate source map

.vscode/settings.json

@@ -1,10 +1,8 @@
 {
-  "editor.rulers": [
-    80
-  ],
+  "editor.rulers": [80],
   "files.exclude": {
     "**/.git": true,
-    "**/node_modules": true,
+    "**/node_modules": false,
     "**/build": true
   },
   "editor.codeActionsOnSave": {

docs/profile-hermes.md

@@ -0,0 +1,61 @@
+# Visualize JavaScript's performance in a React Native app using Hermes
+
+## How to profile your app using Hermes
+
+- Instructions on how to enable Hermes: [Using Hermes](https://reactnative.dev/docs/hermes)
+- How to profile the app:
+  - Open Developer Menu with `Cmd+M` or Shake the device. Select `Enable Sampling Profiler`
+  - Execute JavaScript by using the app's functions (pressing buttons, etc.)
+  - Open Developer Menu again, select `Disable Sampling Profiler`. A toast shows the location where the sampling profiler is saved - usually in `/data/user/0/com.appName/cache/*.cpuprofile`.
+
+## How to pull the sampling profiler to your local machine
+
+### React Native CLI
+
+Usage:
+
+### `react-native profile-hermes [destinationDir]`
+
+Pull and convert a Hermes tracing profile to Chrome tracing profile, then store them in the directory <destinationDir> of the local machine. `destinationDir` is optional, if provided, pull the file to that directory (if not present, pull to the current React Native app root directory)
+
+Options:
+
+#### `--fileName [string]`
+
+File name of the profile to be downloaded, eg. sampling-profiler-trace8593107139682635366.cpuprofile. If not provided, pull the latest file
+
+#### `--verbose`
+
+Listing adb commands that are run internally to pull the file from Android device
+
+#### `--raw`
+
+Pull the original Hermes tracing profile without any transformation
+
+#### `--sourcemap-path [string]`
+
+The local path to where source map file is stored, eg. Users/.../Desktop/sourcemap.json
+
+#### `--generate-sourcemap`
+
+Generate the JS bundle and source map
+
+## Common errors encountered during the process
+
+#### adb: no devices/emulators found
+
+Solution: make sure your Android device/ emulator is connected and running. The command only works when it can access adb
+
+#### There is no file in the cache/ directory
+
+User may have forgotten to record a profile from the device (instruction on how to enable/ disable profiler is above)
+
+## Testing plan
+
+Using `yarn link` as instructed by the CLI's [Testing Plan](https://github.com/MLH-Fellowship/cli/blob/master/CONTRIBUTING.md#testing-your-changes) does not work for us.
+
+### Reason:
+
+Get the error `ReferenceError: SHA-1 for file ... is not computed` even if we run `react-native start --watchFolders /path/to/cloned/cli/`. That's because we use the command `react-native bundle` within our code, which creates a new Metro Server that can't find the symlinked folder
+
+### Solution:

packages/cli/package.json

@@ -33,7 +33,9 @@
     "@react-native-community/cli-server-api": "^4.10.1",
     "@react-native-community/cli-tools": "^4.10.1",
     "@react-native-community/cli-types": "^4.10.1",
+    "@types/ip": "^1.1.0",
     "@types/source-map": "^0.5.7",
+    "axios": "^0.19.2",
     "chalk": "^3.0.0",
     "command-exists": "^1.2.8",
     "commander": "^2.19.0",
@@ -45,7 +47,9 @@
     "fs-extra": "^8.1.0",
     "glob": "^7.1.3",
     "graceful-fs": "^4.1.3",
+    "hermes-profile-transformer": "^0.0.2",
     "inquirer": "^3.0.6",
+    "ip": "^1.1.5",
     "leven": "^3.1.0",
     "lodash": "^4.17.15",
     "metro": "^0.58.0",

packages/cli/src/commands/bundle/buildBundle.ts

@@ -44,11 +44,13 @@ async function buildBundle(
   ctx: Config,
   output: typeof outputBundle = outputBundle,
 ) {
+  //console.log('not load metro config yet');
   const config = await loadMetroConfig(ctx, {
     maxWorkers: args.maxWorkers,
     resetCache: args.resetCache,
     config: args.config,
   });
+  //console.log('loaded metro config');
 
   if (config.resolver.platforms.indexOf(args.platform) === -1) {
     logger.error(
@@ -84,8 +86,9 @@ async function buildBundle(
     minify: args.minify !== undefined ? args.minify : !args.dev,
     platform: args.platform,
   };
-
+  //console.log('not build server yet');
   const server = new Server(config);
+  //console.log('built new server');
 
   try {
     const bundle = await output.build(server, requestOpts);

packages/cli/src/commands/bundle/bundle.ts

@@ -18,6 +18,9 @@ function bundleWithOutput(
   args: CommandLineArgs,
   output: any, // untyped metro/src/shared/output/bundle or metro/src/shared/output/RamBundle
 ) {
+  // console.log('config: ', config);
+  // console.log('args: ', args);
+  // console.log('output: ', output);
   return buildBundle(args, config, output);
 }