install dependencies

Summary:
In the previous implementation plugins were downloaded from npm, but dependencies weren't. This diff uses the `live-plugin-manager` which does mostly what we want. It install a package from NPM with all its dependencies.
live-plugin-manager puts the plugin and its dependencies in the same folder. We expect the plugins to be in `node_modules`. For this reason, we are installing the plugin into `$pluginName/node_modules` and move the plugin after the installation out of the `node_modules` folder.

* Fixed plugin loading path for thirdparty plugins.
* Disabled hot reloading for plugins in the flipper folder to prevent reloads when moving around files and installing dependencies here.
* an empty `.watchmanconfig` is created, because metro requires it
* tsx files are added to the list of supported extensions for metro

Reviewed By: passy

Differential Revision: D17570413

fbshipit-source-id: ecbedc60841b36188fec9c83da41ef1f27e5e155

static/compilePlugins.js

@@ -61,21 +61,25 @@ function watchChanges(
   const delayedCompilation = {};
   const kCompilationDelayMillis = 1000;
 
-  Object.values(plugins).map(plugin =>
-    fs.watch(plugin.rootDir, {recursive: true}, (eventType, filename) => {
-      // only recompile for changes in not hidden files. Watchman might create
-      // a file called .watchman-cookie
-      if (!filename.startsWith('.') && !delayedCompilation[plugin.name]) {
-        delayedCompilation[plugin.name] = setTimeout(() => {
-          delayedCompilation[plugin.name] = null;
-          // eslint-disable-next-line no-console
-          console.log(`🕵️‍  Detected changes in ${plugin.name}`);
-          const watchOptions = Object.assign(options, {force: true});
-          compilePlugin(plugin, pluginCache, watchOptions).then(reloadCallback);
-        }, kCompilationDelayMillis);
-      }
-    }),
-  );
+  Object.values(plugins)
+    // no hot reloading for plugins in .flipper folder. This is to prevent
+    // Flipper from reloading, while we are doing changes on thirdparty plugins.
+    .filter(plugin => !plugin.rootDir.startsWith(path.join(HOME_DIR, '.flipper')))
+    .map(plugin =>
+      fs.watch(plugin.rootDir, {recursive: true}, (eventType, filename) => {
+        // only recompile for changes in not hidden files. Watchman might create
+        // a file called .watchman-cookie
+        if (!filename.startsWith('.') && !delayedCompilation[plugin.name]) {
+          delayedCompilation[plugin.name] = setTimeout(() => {
+            delayedCompilation[plugin.name] = null;
+            // eslint-disable-next-line no-console
+            console.log(`🕵️‍  Detected changes in ${plugin.name}`);
+            const watchOptions = Object.assign(options, {force: true});
+            compilePlugin(plugin, pluginCache, watchOptions).then(reloadCallback);
+          }, kCompilationDelayMillis);
+        }
+      }),
+    );
 }
 function hash(string) {
   let hash = 0;
@@ -208,6 +212,7 @@ async function compilePlugin(
             ),
           },
           resolver: {
+            sourceExts: ['tsx', 'ts', 'js'],
             blacklistRE: /\/(sonar|flipper-public)\/dist\//,
           },
         },

static/index.js

@@ -74,7 +74,7 @@ const {config, configPath, flipperDir} = setup(argv);
 
 const pluginPaths = config.pluginPaths
   .concat(
-    path.join(configPath, 'thirdparty'),
+    path.join(configPath, '..', 'thirdparty'),
     path.join(__dirname, '..', 'src', 'plugins'),
     path.join(__dirname, '..', 'src', 'fb', 'plugins'),
   )

static/transforms/electron-requires.js

@@ -41,6 +41,7 @@ const BUILTINS = [
   'v8',
   'repl',
   'timers',
+  'node-fetch',
 ];
 
 const IGNORED_MODULES = [