diff --git a/desktop/flipper-server/src/attachDevServer.tsx b/desktop/flipper-server/src/attachDevServer.tsx index ab5e3e9b3..2ba50d2a4 100644 --- a/desktop/flipper-server/src/attachDevServer.tsx +++ b/desktop/flipper-server/src/attachDevServer.tsx @@ -15,6 +15,7 @@ import fs from 'fs-extra'; import {WebSocketServer} from 'ws'; import pFilter from 'p-filter'; import {homedir} from 'os'; +import {InstalledPluginDetails} from 'flipper-common'; // This file is heavily inspired by scripts/start-dev-server.ts! // part of that is done by start-flipper-server-dev (compiling "main"), @@ -24,6 +25,8 @@ const uiSourceDirs = [ 'flipper-ui-browser', 'flipper-ui-core', 'flipper-plugin-core', + 'flipper-plugin', + 'flipper-frontend-core', 'flipper-common', ]; @@ -65,7 +68,8 @@ export async function attachDevServer( // prevent bundling! const Metro = electronRequire('metro'); const MetroResolver = electronRequire('metro-resolver'); - const {getWatchFolders} = electronRequire('flipper-pkg-lib'); + const {getWatchFolders, startWatchPlugins} = + electronRequire('flipper-pkg-lib'); const babelTransformationsDir = path.resolve( rootDir, @@ -90,7 +94,6 @@ export async function attachDevServer( uiSourceDirs.map((dir) => getWatchFolders(path.resolve(rootDir, dir))), ) ).flat(), - ...(await getPluginSourceFolders()), ]); const baseConfig = await Metro.loadConfig(); @@ -154,6 +157,17 @@ export async function attachDevServer( next(); }); + await startWatchPlugins((changedPlugins: InstalledPluginDetails[]) => { + socket.clients.forEach((client) => { + client.send( + JSON.stringify({ + event: 'plugins-source-updated', + payload: changedPlugins, + }), + ); + }); + }); + console.log('DEV webserver started.'); } diff --git a/desktop/pkg-lib/package.json b/desktop/pkg-lib/package.json index b773e83c9..f9753bb15 100644 --- a/desktop/pkg-lib/package.json +++ b/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", diff --git a/desktop/pkg-lib/src/index.tsx b/desktop/pkg-lib/src/index.tsx index e4b6e4b8a..813ee02c6 100644 --- a/desktop/pkg-lib/src/index.tsx +++ b/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'; diff --git a/desktop/scripts/startWatchPlugins.tsx b/desktop/pkg-lib/src/startWatchPlugins.tsx similarity index 73% rename from desktop/scripts/startWatchPlugins.tsx rename to desktop/pkg-lib/src/startWatchPlugins.tsx index 1c3ecca9f..ca67e3183 100644 --- a/desktop/scripts/startWatchPlugins.tsx +++ b/desktop/pkg-lib/src/startWatchPlugins.tsx @@ -8,13 +8,34 @@ */ import Watchman from './watchman'; -import {getPluginSourceFolders, isPluginDir} from 'flipper-plugin-lib'; +import { + getInstalledPluginDetails, + getPluginSourceFolders, + isPluginDir, +} from 'flipper-plugin-lib'; import path from 'path'; import chalk from 'chalk'; -import {rebuildPlugin} from './build-utils'; +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?: () => void | Promise, + onChanged?: ( + changedPlugins: InstalledPluginDetails[], + ) => void | Promise, ) { // eslint-disable-next-line no-console console.log('🕵️‍ Watching for plugin changes'); @@ -27,7 +48,7 @@ export default async function startWatchPlugins( delayedCompilation = undefined; // eslint-disable-next-line no-console console.log(`🕵️‍ Detected plugin change`); - await Promise.all( + 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); @@ -48,9 +69,15 @@ export default async function startWatchPlugins( dirPath = path.resolve(dirPath, '..'); } await rebuildPlugin(dirPath); + return dirPath; }), ); - onChanged?.(); + const changedPlugins = await Promise.all( + changedDirs + .filter((dirPath): dirPath is string => !!dirPath) + .map((dirPath) => getInstalledPluginDetails(dirPath)), + ); + onChanged?.(changedPlugins); }, kCompilationDelayMillis); } }; diff --git a/desktop/scripts/watchman.tsx b/desktop/pkg-lib/src/watchman.tsx similarity index 98% rename from desktop/scripts/watchman.tsx rename to desktop/pkg-lib/src/watchman.tsx index e3d558e4e..e193382db 100644 --- a/desktop/scripts/watchman.tsx +++ b/desktop/pkg-lib/src/watchman.tsx @@ -8,7 +8,7 @@ */ import {Client} from 'fb-watchman'; -import {v4 as uuid} from 'uuid'; +import {uuid} from 'flipper-common'; import path from 'path'; const watchmanTimeout = 60 * 1000; diff --git a/desktop/pkg-lib/tsconfig.json b/desktop/pkg-lib/tsconfig.json index fe62a0d3b..0984a625f 100644 --- a/desktop/pkg-lib/tsconfig.json +++ b/desktop/pkg-lib/tsconfig.json @@ -9,6 +9,9 @@ { "path": "../babel-transformer" }, + { + "path": "../flipper-common" + }, { "path": "../plugin-lib" } diff --git a/desktop/scripts/build-utils.tsx b/desktop/scripts/build-utils.tsx index e854b64d9..ad8592a57 100644 --- a/desktop/scripts/build-utils.tsx +++ b/desktop/scripts/build-utils.tsx @@ -511,17 +511,3 @@ function defaultResolve(...rest: any[]) { ...rest, ); } - -export 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, - ); - } -} diff --git a/desktop/scripts/package.json b/desktop/scripts/package.json index 7e9a345fb..76ac6b623 100644 --- a/desktop/scripts/package.json +++ b/desktop/scripts/package.json @@ -21,7 +21,6 @@ "dotenv": "^14.2.0", "electron-builder": "23.0.3", "express": "^4.17.3", - "fb-watchman": "^2.0.1", "flipper-common": "0.0.0", "flipper-pkg-lib": "0.0.0", "flipper-plugin-lib": "0.0.0", diff --git a/desktop/scripts/start-dev-server.tsx b/desktop/scripts/start-dev-server.tsx index 26fc1aa86..f554b5ea7 100644 --- a/desktop/scripts/start-dev-server.tsx +++ b/desktop/scripts/start-dev-server.tsx @@ -21,7 +21,6 @@ import path from 'path'; import fs from 'fs-extra'; import {hostname} from 'os'; import {compileMain, prepareDefaultPlugins} from './build-utils'; -import Watchman from './watchman'; // @ts-ignore no typings for metro import Metro from 'metro'; import {staticDir, babelTransformationsDir, rootDir} from './paths'; @@ -29,8 +28,8 @@ import isFB from './isFB'; import getAppWatchFolders from './get-app-watch-folders'; import {getPluginSourceFolders} from 'flipper-plugin-lib'; import ensurePluginFoldersWatchable from './ensurePluginFoldersWatchable'; -import startWatchPlugins from './startWatchPlugins'; import yargs from 'yargs'; +import {startWatchPlugins, Watchman} from 'flipper-pkg-lib'; const argv = yargs .usage('yarn start [args]') @@ -445,8 +444,8 @@ function checkDevServer() { await startMetroServer(app, server); outputScreen(socket); await compileMain(); - await startWatchPlugins(() => { - socket.emit('refresh'); + await startWatchPlugins((changedPlugins) => { + socket.emit('plugins-source-updated', changedPlugins); }); if (dotenv && dotenv.parsed) { console.log('✅ Loaded env vars from .env file: ', dotenv.parsed); diff --git a/desktop/scripts/start-flipper-server-dev.tsx b/desktop/scripts/start-flipper-server-dev.tsx index 21024ae4f..8154ea992 100644 --- a/desktop/scripts/start-flipper-server-dev.tsx +++ b/desktop/scripts/start-flipper-server-dev.tsx @@ -15,11 +15,10 @@ import { launchServer, prepareDefaultPlugins, } from './build-utils'; -import Watchman from './watchman'; import isFB from './isFB'; import yargs from 'yargs'; import ensurePluginFoldersWatchable from './ensurePluginFoldersWatchable'; -import startWatchPlugins from './startWatchPlugins'; +import {Watchman} from 'flipper-pkg-lib'; const argv = yargs .usage('yarn flipper-server [args]') @@ -195,5 +194,4 @@ async function startWatchChanges() { await restartServer(); // watch await startWatchChanges(); - await startWatchPlugins(); })();