[Watch mode] Listen to EUI dependency changes

packages/kbn-cli-dev-mode/src/cli_dev_mode.test.ts

@@ -105,6 +105,7 @@ it('passes correct args to sub-classes', () => {
           "mapLogLine": [Function],
           "script": <absolute path>/scripts/kibana,
           "watcher": Watcher {
+            "optimizerShouldRestart$": [MockFunction],
             "serverShouldRestart$": [MockFunction],
           },
         },
@@ -219,6 +220,7 @@ describe('#start()/#stop()', () => {
       watcherRun$ = new Rx.Subject();
       return {
         run$: watcherRun$,
+        optimizerShouldRestart$: jest.fn(() => Rx.NEVER),
       };
     });
     DevServer.mockImplementation(() => {

packages/kbn-cli-dev-mode/src/cli_dev_mode.ts

@@ -245,8 +245,10 @@ export class CliDevMode {
     }
 
     this.subscription.add(
-      this.optimizer.run$
+      // the same pattern as: `kibana/packages/kbn-cli-dev-mode/src/dev_server.ts`
+      Rx.concat([undefined], this.watcher.optimizerShouldRestart$())
         .pipe(
+          switchMap(() => this.optimizer.run$),
           // stop the optimizer as soon as we get an exit signal
           takeUntil(exitSignal$)
         )

packages/kbn-cli-dev-mode/src/watcher.ts

@@ -13,6 +13,7 @@ import { REPO_ROOT } from '@kbn/repo-info';
 import { RepoSourceClassifier } from '@kbn/repo-source-classifier';
 import { ImportResolver } from '@kbn/import-resolver';
 import { makeMatcher } from '@kbn/picomatcher';
+import Path from 'path';
 
 import type { Log } from './log';
 
@@ -41,6 +42,7 @@ export class Watcher {
   private readonly repoRoot: string;
   private readonly classifier: RepoSourceClassifier;
   private readonly restart$ = new Rx.Subject<void>();
+  private readonly restartOptimizer$ = new Rx.Subject<void>();
   private readonly resolver: ImportResolver;
 
   constructor(options: Options) {
@@ -63,6 +65,11 @@ export class Watcher {
       this.restart$.next();
     };
 
+    const fireOptimizer = (repoRel: string) => {
+      this.log.warn(`restarting optimizer`, `due to changes in ${repoRel}`);
+      this.restartOptimizer$.next();
+    };
+
     Pw.subscribe(
       this.repoRoot,
       (error, events) => {
@@ -139,13 +146,43 @@ export class Watcher {
       }
     );
 
+    const sharedDepsDir = Path.resolve(
+      this.repoRoot,
+      'target/build/src/platform/packages/private/kbn-ui-shared-deps-npm/shared_built_assets'
+    );
+    const manifestName = 'kbn-ui-shared-deps-npm-manifest.json';
+
+    // check for shared dependencies manifest update and restart Optimizer
+    Pw.subscribe(sharedDepsDir, (err, events) => {
+      if (err) return;
+
+      const isManifestChanged = events.some(
+        (e) =>
+          Path.basename(e.path) === manifestName && (e.type === 'update' || e.type === 'create')
+      );
+
+      if (isManifestChanged) {
+        fireOptimizer(Path.relative(this.repoRoot, Path.join(sharedDepsDir, manifestName)));
+      }
+    }).then(
+      (sub) => subscriber.add(() => sub.unsubscribe()),
+      () => {
+        // ignore errors, file might not exist
+      }
+    );
+
     // complete state subjects when run$ completes
     subscriber.add(() => {
       this.restart$.complete();
+      this.restartOptimizer$.complete();
     });
   });
 
   serverShouldRestart$() {
     return this.restart$.asObservable();
   }
+
+  optimizerShouldRestart$() {
+    return this.restartOptimizer$.asObservable();
+  }
 }

src/platform/packages/private/kbn-ui-shared-deps-npm/webpack.config.js

@@ -171,10 +171,19 @@ module.exports = (_, argv) => {
       hints: false,
     },
 
-    cache: {
-      type: 'filesystem',
+    // the gist of the change, making Webpack listen to `node_modules/@elastic/eui` change
+    watchOptions: {
+      ignored: /[\\/]node_modules[\\/](?!@elastic($|[\\/]$|[\\/]eui([\\/]|$)))/,
     },
 
+    // snapshot: {
+    //  managedPaths: [/^(.+?[\\/]node_modules[\\/])(?!@elastic[\\/]eui)/],
+    // },
+
+    // so far only disabling cache worked but we should re-enable it for better performance
+    // and make `node_modules/@elastic/eui` work at the same time
+    cache: false,
+
     plugins: [
       new NodeLibsBrowserPlugin(),
       new CleanWebpackPlugin({
@@ -193,6 +202,11 @@ module.exports = (_, argv) => {
         path: Path.resolve(outputPath, '[name]-manifest.json'),
         name: '__kbnSharedDeps_npm__',
       }),
+      // adds a useful comment at the top of the DLL for debugging
+      new webpack.BannerPlugin({
+        banner: `/* Build: ${new Date().toLocaleString()} */`,
+        raw: true,
+      }),
     ],
   };
 };