packages/cli: add build option to watchDeps and use for app serve

package.json

@@ -5,7 +5,7 @@
     "node": ">=12.0.0"
   },
   "scripts": {
-    "start": "yarn build && yarn workspace example-app start",
+    "start": "yarn workspace example-app start",
     "bundle": "yarn build && yarn workspace example-app bundle",
     "build": "lerna run build",
     "test": "yarn build && lerna run test --since origin/master -- --coverage",

packages/cli/src/commands/app/serve.ts

@@ -21,7 +21,7 @@ export default async () => {
   const args = ['start'];
 
   // Start dynamic watch and build of dependencies, then serve the app
-  await watchDeps();
+  await watchDeps({ build: true });
   await run('react-scripts', args, {
     env: {
       EXTEND_ESLINT: 'true',

packages/cli/src/commands/watch-deps/index.ts

@@ -15,13 +15,13 @@
  */
 
 import chalk from 'chalk';
-
+import fs from 'fs-extra';
 import { createLoggerFactory } from './logger';
-import { getPackageDeps } from './packages';
+import { findAllDeps } from './packages';
 import { startWatcher, startPackageWatcher } from './watcher';
 import { startCompiler } from './compiler';
 import { startChild } from './child';
-import { waitForExit } from 'helpers/run';
+import { waitForExit, run } from 'helpers/run';
 import { paths } from 'helpers/paths';
 
 const PACKAGE_BLACKLIST = [
@@ -31,9 +31,13 @@ const PACKAGE_BLACKLIST = [
 
 const WATCH_LOCATIONS = ['package.json', 'src', 'assets'];
 
+export type Options = {
+  build?: boolean;
+};
+
 // Start watching for dependency changes.
 // The returned promise resolves when watchers have started for all current dependencies.
-export async function watchDeps() {
+export async function watchDeps(options: Options = {}) {
   const localPackagePath = paths.resolveTarget('package.json');
 
   // Rotate through different prefix colors to make it easier to differenciate between different deps
@@ -46,7 +50,21 @@ export async function watchDeps() {
   ]);
 
   // Find all direct and transitive local dependencies of the current package.
-  const deps = await getPackageDeps(localPackagePath, PACKAGE_BLACKLIST);
+  const packageData = await fs.readFile(localPackagePath, 'utf8');
+  const packageJson = JSON.parse(packageData);
+  const packageName = packageJson.name;
+
+  const deps = await findAllDeps(packageName, PACKAGE_BLACKLIST);
+
+  if (options.build) {
+    await run('lerna', [
+      'run',
+      '--scope',
+      packageName,
+      '--include-dependencies',
+      'build',
+    ]);
+  }
 
   // We lazily watch all our deps, as in we don't start the actual watch compiler until a change is detected
   const watcher = await startWatcher(deps, WATCH_LOCATIONS, pkg => {
@@ -56,7 +74,7 @@ export async function watchDeps() {
   });
 
   await startPackageWatcher(localPackagePath, async () => {
-    const newDeps = await getPackageDeps(localPackagePath, PACKAGE_BLACKLIST);
+    const newDeps = await findAllDeps(packageName, PACKAGE_BLACKLIST);
     await watcher.update(newDeps);
   });
 }

packages/cli/src/commands/watch-deps/packages.ts

@@ -14,12 +14,8 @@
  * limitations under the License.
  */
 
-import fs from 'fs';
-import { promisify } from 'util';
 import { paths } from 'helpers/paths';
 
-const readFile = promisify(fs.readFile);
-
 const LernaProject = require('@lerna/project');
 const PackageGraph = require('@lerna/package-graph');
 
@@ -64,10 +60,3 @@ export async function findAllDeps(
 
   return [...deps.values()];
 }
-
-export async function getPackageDeps(packagePath: string, blacklist: string[]) {
-  const packageData = await readFile(packagePath, 'utf8');
-  const packageJson = JSON.parse(packageData);
-
-  return await findAllDeps(packageJson.name, blacklist);
-}