[metro-visualizer] Add README and development script

.gitignore

@@ -11,3 +11,4 @@ website/i18n/*
 website/node_modules
 website/translated_docs
 .idea
+.vscode

packages/metro-visualizer/README.md

@@ -0,0 +1,66 @@
+# Metro Visualizer
+
+[![npm version](https://badge.fury.io/js/metro-visualizer.svg)](https://badge.fury.io/js/metro-visualizer)
+
+📊 The interactive visualizer for Metro 🚇
+
+A friendly and versatile tool to visualize the bundler's work.
+
+The goal of this project is to provide a suite of analysis tools for bundle sizes and dependencies, while also making Metro more transparent and fun to use for entry level developers.
+
+## Setup
+
+1. Install the `metro-visualizer` package in your project. 
+
+    ```
+    yarn add metro-visualizer 
+    ```
+    ```
+    npm install metro-visualizer --save 
+    ```
+
+2. Enable the visualizer in your [metro config](https://facebook.github.io/metro/docs/en/configuration#server-options). For a `metro.config.js` config file, add the following:
+
+    ```js
+    module.exports = {
+        // ...
+        server: {
+            // ...
+            enableVisualizer: true
+        }
+    };
+    ```
+
+3. Run `metro` and point your browser to http://localhost:8080/visualizer.
+
+## Overview
+
+### Dashboard for triggering builds 
+
+You can easily toggle options for your builds. 
+
+![build-options](/packages/metro-visualizer/screenshots/build-options.png)
+
+The bundler's performance and activity is shown graphically. 
+
+![build-options](/packages/metro-visualizer/screenshots/build-stats.png)
+
+### Dependency graph 
+
+Visualize a bundle's dependency graph. Search for modules to explore the graph incrementally. 
+
+![build-options](/packages/metro-visualizer/screenshots/search.gif)
+
+![build-options](/packages/metro-visualizer/screenshots/info.gif)
+
+Search for all the paths between two modules to better understand your bundle. 
+
+![build-options](/packages/metro-visualizer/screenshots/path-search.png)
+
+Customize the way the graph is displayed. 
+
+![build-options](/packages/metro-visualizer/screenshots/options.png)
+
+## Development 
+
+Follow the Metro guidelines for contributing to the project. There's a utility script to facilitate development. It spawns a Metro server with the visualizer enabled on this package itself. Run it with `yarn dev` or `npm run dev` from the `metro-visualizer` folder and trigger builds as it is shown in the screenshots above. 

packages/metro-visualizer/metro.config.js

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails oncall+javascript_foundation
+ * @format
+ */
+
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+let resolveRequest;
+let getWatchFolders;
+try {
+  /* eslint-disable import/no-extraneous-dependencies */
+  resolveRequest = require('@xplatjs/metro-scripts/resolver');
+  getWatchFolders = require('@xplatjs/metro-scripts/get-watch-folders');
+  /* eslint-enable import/no-extraneous-dependencies */
+} catch (e) {
+  resolveRequest = undefined;
+  getWatchFolders = () => [
+    fs.realpathSync(path.resolve(__dirname, './')),
+    fs.realpathSync(path.resolve(__dirname, './../..')),
+  ];
+}
+
+module.exports = {
+  dev: true,
+  resolver: {
+    resolveRequest,
+  },
+  projectRoot: fs.realpathSync(path.resolve(__dirname, './')),
+  watchFolders: getWatchFolders(),
+  server: {port: 8080, enableVisualizer: true},
+  transformer: {
+    babelTransformerPath: require.resolve(
+      './src/middleware/build-utils/transformer',
+    ),
+    workerPath: require.resolve('./src/middleware/build-utils/transformWorker'),
+  },
+};

packages/metro-visualizer/package.json

@@ -6,15 +6,18 @@
   "license": "MIT",
   "scripts": {
     "prepare-release": "test -d build && rm -rf src.real && mv src src.real && mv build src",
-    "cleanup-release": "test ! -e build && mv src build && mv src.real src"
+    "cleanup-release": "test ! -e build && mv src build && mv src.real src",
+    "dev": "babel-node --presets @babel/preset-env,@babel/preset-flow,@babel/preset-react scripts/dev"
   },
   "dependencies": {
     "@babel/core": "^7.0.0",
+    "@babel/node": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
-    "antd": "^3.7.1",
+    "@babel/register": "^7.0.0",
+    "antd": "^3.8.1",
     "babel-plugin-import": "^1.8.0",
     "connect": "^3.6.5",
     "cytoscape": "^3.2.14",

packages/metro-visualizer/scripts/dev.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+'use strict';
+
+require('@babel/register')({
+  presets: ['@babel/env', '@babel/preset-react', '@babel/preset-flow'],
+  plugins: ['@babel/plugin-proposal-class-properties'],
+  only: [/metro/],
+  ignore: [/node_modules/],
+});
+
+const Metro = require('metro');
+
+async function dev() {
+  const config = await Metro.loadConfig({
+    config: require.resolve('../metro.config.js'),
+  });
+
+  await Metro.runServer(config, {});
+}
+
+dev();

packages/metro-visualizer/src/middleware/build-utils/metro.config.js

@@ -20,7 +20,10 @@ try {
   getWatchFolders = require('@xplatjs/metro-scripts/get-watch-folders');
   /* eslint-enable import/no-extraneous-dependencies */
 } catch (e) {
-  getWatchFolders = () => [];
+  resolveRequest = undefined;
+  getWatchFolders = () => [
+    fs.realpathSync(path.resolve(__dirname, '../../../../../')),
+  ];
 }
 
 module.exports = {