Track plugin changes and notify frontend

Summary: Watch source plugin folders and notify frontend that any of them changed. In subsequent diffs, we will start reloading plugins that changed.

Reviewed By: lblasa

Differential Revision: D39539443

fbshipit-source-id: 726916c0bce336a2c0179558526bcb1b74e35b93

desktop/pkg-lib/package.json

@@ -9,7 +9,10 @@
   "license": "MIT",
   "bugs": "https://github.com/facebook/flipper/issues",
   "dependencies": {
+    "chalk": "^4",
     "esbuild": "^0.15.7",
+    "fb-watchman": "^2.0.1",
+    "flipper-common": "0.0.0",
     "flipper-plugin-lib": "0.0.0",
     "fs-extra": "^10.1.0",
     "metro": "^0.70.2",

desktop/pkg-lib/src/index.tsx

@@ -11,3 +11,5 @@ export {default as runBuild} from './runBuild';
 export {default as getWatchFolders} from './getWatchFolders';
 export {default as computePackageChecksum} from './computePackageChecksum';
 export {default as stripSourceMapComment} from './stripSourceMap';
+export {default as startWatchPlugins} from './startWatchPlugins';
+export {default as Watchman} from './watchman';

desktop/pkg-lib/src/startWatchPlugins.tsx

@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import Watchman from './watchman';
+import {
+  getInstalledPluginDetails,
+  getPluginSourceFolders,
+  isPluginDir,
+} from 'flipper-plugin-lib';
+import path from 'path';
+import chalk from 'chalk';
+import runBuild from './runBuild';
+import {InstalledPluginDetails} from 'flipper-common';
+
+async function rebuildPlugin(pluginPath: string) {
+  try {
+    await runBuild(pluginPath, true);
+    console.info(chalk.green('Rebuilt plugin'), pluginPath);
+  } catch (e) {
+    console.error(
+      chalk.red(
+        'Failed to compile a plugin, waiting for additional changes...',
+      ),
+      e,
+    );
+  }
+}
+
+export default async function startWatchPlugins(
+  onChanged?: (
+    changedPlugins: InstalledPluginDetails[],
+  ) => void | Promise<void>,
+) {
+  // eslint-disable-next-line no-console
+  console.log('🕵️‍  Watching for plugin changes');
+
+  let delayedCompilation: NodeJS.Timeout | undefined;
+  const kCompilationDelayMillis = 1000;
+  const onPluginChangeDetected = (root: string, files: string[]) => {
+    if (!delayedCompilation) {
+      delayedCompilation = setTimeout(async () => {
+        delayedCompilation = undefined;
+        // eslint-disable-next-line no-console
+        console.log(`🕵️‍  Detected plugin change`);
+        const changedDirs = await Promise.all(
+          // https://facebook.github.io/watchman/docs/nodejs.html#subscribing-to-changes
+          files.map(async (file: string) => {
+            const filePathAbs = path.resolve(root, file);
+            let dirPath = path.dirname(filePathAbs);
+            while (
+              // Stop when we reach plugin root
+              !(await isPluginDir(dirPath))
+            ) {
+              const relative = path.relative(root, dirPath);
+              // Stop when we reach desktop/plugins folder
+              if (!relative || relative.startsWith('..')) {
+                console.warn(
+                  chalk.yellow('Failed to find a plugin root for path'),
+                  filePathAbs,
+                );
+                return;
+              }
+              dirPath = path.resolve(dirPath, '..');
+            }
+            await rebuildPlugin(dirPath);
+            return dirPath;
+          }),
+        );
+        const changedPlugins = await Promise.all(
+          changedDirs
+            .filter((dirPath): dirPath is string => !!dirPath)
+            .map((dirPath) => getInstalledPluginDetails(dirPath)),
+        );
+        onChanged?.(changedPlugins);
+      }, kCompilationDelayMillis);
+    }
+  };
+  try {
+    await startWatchingPluginsUsingWatchman(onPluginChangeDetected);
+  } catch (err) {
+    console.error(
+      'Failed to start watching plugin files using Watchman, continue without hot reloading',
+      err,
+    );
+  }
+}
+
+async function startWatchingPluginsUsingWatchman(
+  onChange: (root: string, files: string[]) => void,
+) {
+  const pluginFolders = await getPluginSourceFolders();
+  await Promise.all(
+    pluginFolders.map(async (pluginFolder) => {
+      const watchman = new Watchman(pluginFolder);
+      await watchman.initialize();
+      await watchman.startWatchFiles(
+        '.',
+        ({files}) => onChange(pluginFolder, files),
+        {
+          excludes: [
+            '**/__tests__/**/*',
+            '**/node_modules/**/*',
+            '**/dist/*',
+            '**/.*',
+          ],
+        },
+      );
+    }),
+  );
+}

desktop/pkg-lib/src/watchman.tsx

@@ -0,0 +1,126 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {Client} from 'fb-watchman';
+import {uuid} from 'flipper-common';
+import path from 'path';
+
+const watchmanTimeout = 60 * 1000;
+
+export default class Watchman {
+  constructor(private rootDir: string) {}
+
+  private client?: Client;
+  private watch?: any;
+  private relativeRoot?: string;
+
+  async initialize(): Promise<void> {
+    if (this.client) {
+      return;
+    }
+    this.client = new Client();
+    this.client.setMaxListeners(250);
+    await new Promise<void>((resolve, reject) => {
+      const onError = (err: Error) => {
+        this.client!.removeAllListeners('error');
+        reject(err);
+        this.client!.end();
+        delete this.client;
+      };
+
+      const timeouthandle = setTimeout(() => {
+        onError(new Error('Timeout when trying to start Watchman'));
+      }, watchmanTimeout);
+
+      this.client!.once('error', onError);
+      this.client!.capabilityCheck(
+        {optional: [], required: ['relative_root']},
+        (error) => {
+          if (error) {
+            onError(error);
+            return;
+          }
+          this.client!.command(
+            ['watch-project', this.rootDir],
+            (error, resp) => {
+              if (error) {
+                onError(error);
+                return;
+              }
+              if ('warning' in resp) {
+                console.warn(resp.warning);
+              }
+              this.watch = resp.watch;
+              this.relativeRoot = resp.relative_path;
+              clearTimeout(timeouthandle);
+              resolve();
+            },
+          );
+        },
+      );
+    });
+  }
+
+  async startWatchFiles(
+    relativeDir: string,
+    handler: (resp: any) => void,
+    options: {excludes: string[]},
+  ): Promise<void> {
+    if (!this.watch) {
+      throw new Error(
+        'Watchman is not initialized, please call "initialize" function and wait for the returned promise completion before calling "startWatchFiles".',
+      );
+    }
+    options = Object.assign({excludes: []}, options);
+    return new Promise((resolve, reject) => {
+      this.client!.command(['clock', this.watch], (error, resp) => {
+        if (error) {
+          return reject(error);
+        }
+
+        try {
+          const {clock} = resp;
+
+          const sub = {
+            expression: [
+              'allof',
+              ['not', ['type', 'd']],
+              ...options!.excludes.map((e) => [
+                'not',
+                ['match', e, 'wholename'],
+              ]),
+            ],
+            fields: ['name'],
+            since: clock,
+            relative_root: this.relativeRoot
+              ? path.join(this.relativeRoot, relativeDir)
+              : relativeDir,
+          };
+
+          const id = uuid();
+
+          this.client!.command(['subscribe', this.watch, id, sub], (error) => {
+            if (error) {
+              return reject(error);
+            }
+            this.client!.on('subscription', (resp) => {
+              if (resp.subscription !== id || !resp.files) {
+                return;
+              }
+              handler(resp);
+            });
+            resolve();
+          });
+        } catch (err) {
+          reject(err);
+        }
+      });
+    });
+  }
+}

desktop/pkg-lib/tsconfig.json

@@ -9,6 +9,9 @@
     {
       "path": "../babel-transformer"
     },
+    {
+      "path": "../flipper-common"
+    },
     {
       "path": "../plugin-lib"
     }