feat(cli): restore --watch flag for build-storybook command

code/builders/builder-vite/src/build.ts

@@ -91,6 +91,13 @@ export async function build(options: Options) {
 
   finalConfig.customLogger ??= await createViteLogger();
 
+  if (options.watch) {
+    finalConfig.build = {
+      ...finalConfig.build,
+      watch: finalConfig.build?.watch ?? {},
+    };
+  }
+
   await viteBuild(finalConfig);
 
   const statsPlugin = findPlugin(

code/builders/builder-webpack5/src/index.ts

@@ -268,36 +268,91 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
   }
 
   const webpackCompilation = new Promise<Stats>((succeed, fail) => {
-    compiler.run((error, stats) => {
-      if (error) {
-        compiler.close(() => fail(new WebpackInvocationError({ error })));
-        return;
-      }
+    if (options.watch) {
+      let isFirstBuild = true;
+      let rebuildStartTime = startTime;
+      logger.info('Watching for changes...');
+      compiler.watch(config.watchOptions || {}, (error, stats) => {
+        const currentRebuildStart = rebuildStartTime;
+        rebuildStartTime = process.hrtime();
+        if (error) {
+          logger.error(error.message);
+          if (isFirstBuild) {
+            isFirstBuild = false;
+            fail(new WebpackInvocationError({ error }));
+          }
+          return;
+        }
 
-      if (!stats) {
-        throw new WebpackMissingStatsError();
-      }
+        if (!stats) {
+          if (isFirstBuild) {
+            isFirstBuild = false;
+            fail(new WebpackMissingStatsError());
+          }
+          return;
+        }
 
-      const { warnings, errors } = getWebpackStats({ config, stats });
+        const { warnings, errors } = getWebpackStats({ config, stats });
 
-      if (warnings.length > 0) {
-        warnings?.forEach((e) => logger.warn(e.message));
-      }
+        if (warnings.length > 0) {
+          warnings?.forEach((e) => logger.warn(e.message));
+        }
 
-      if (errors.length > 0) {
-        errors.forEach((e) => logger.error(e.message));
-        compiler.close(() => fail(new WebpackCompilationError({ errors })));
-        return;
-      }
+        if (errors.length > 0) {
+          errors.forEach((e) => logger.error(e.message));
+          if (isFirstBuild) {
+            isFirstBuild = false;
+            fail(new WebpackCompilationError({ errors }));
+          }
+          return;
+        }
 
-      compiler.close((closeErr) => {
-        if (closeErr) {
-          return fail(new WebpackInvocationError({ error: closeErr }));
+        if (isFirstBuild) {
+          isFirstBuild = false;
+          succeed(stats);
+        } else {
+          logger.info(`Rebuild completed in ${printDuration(currentRebuildStart)}`);
+        }
+        logger.info('Watching for changes...');
+      });
+    } else {
+      compiler.run((error, stats) => {
+        if (error) {
+          compiler.close(() => fail(new WebpackInvocationError({ error })));
+          return;
         }
 
-        return succeed(stats as Stats);
+        if (!stats) {
+          compiler.close((closeErr) => {
+            if (closeErr) {
+              return fail(new WebpackInvocationError({ error: closeErr }));
+            }
+            return fail(new WebpackMissingStatsError());
+          });
+          return;
+        }
+
+        const { warnings, errors } = getWebpackStats({ config, stats });
+
+        if (warnings.length > 0) {
+          warnings?.forEach((e) => logger.warn(e.message));
+        }
+
+        if (errors.length > 0) {
+          errors.forEach((e) => logger.error(e.message));
+          compiler.close(() => fail(new WebpackCompilationError({ errors })));
+          return;
+        }
+
+        compiler.close((closeErr) => {
+          if (closeErr) {
+            return fail(new WebpackInvocationError({ error: closeErr }));
+          }
+
+          return succeed(stats as Stats);
+        });
       });
-    });
+    }
   });
 
   const previewResolvedDir = join(corePath, 'dist/preview');

code/core/src/bin/core.ts

@@ -146,6 +146,7 @@ command('dev')
 command('build')
   .option('-o, --output-dir <dir-name>', 'Directory where to store built files')
   .option('-c, --config-dir <dir-name>', 'Directory where to load Storybook configurations from')
+  .option('-w, --watch', 'Watch for changes and rebuild automatically')
   .option('--quiet', 'Suppress verbose build output')
   .option('--debug-webpack', 'Display final webpack configurations for debugging purposes')
   .option(
@@ -188,7 +189,9 @@ command('build')
       process.exit(1);
     });
 
-    logger.outro('Storybook build completed successfully');
+    if (!options.watch) {
+      logger.outro('Storybook build completed successfully');
+    }
   });
 
 command('index')

code/core/src/core-server/build-static.ts

@@ -174,6 +174,8 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption
 
   if (options.ignorePreview) {
     logger.info(`Not building preview`);
+  } else if (options.watch) {
+    logger.info('Building preview in watch mode..');
   } else {
     logger.info('Building preview..');
   }

code/core/src/types/modules/core-common.ts

@@ -205,6 +205,7 @@ export interface CLIOptions extends CLIBaseOptions {
   statsJson?: string | boolean;
   outputDir?: string;
   previewOnly?: boolean;
+  watch?: boolean;
 }
 
 export interface BuilderOptions {