Angular: Migrate from RxJS to async/await in command builders and run Compodoc utility as spinner

code/frameworks/angular/src/builders/build-storybook/index.ts

@@ -10,7 +10,6 @@ import type {
   BuilderContext,
   BuilderHandlerFn,
   BuilderOutput,
-  BuilderOutputLike,
   Target,
   Builder as DevkitBuilder,
 } from '@angular-devkit/architect';
@@ -27,8 +26,6 @@ import type {
 import type { JsonObject } from '@angular-devkit/core';
 import * as find from 'empathic/find';
 import * as pkg from 'empathic/package';
-import { from, of, throwError } from 'rxjs';
-import { catchError, map, mapTo, switchMap } from 'rxjs/operators';
 
 import { errorSummary, printErrorDetails } from '../utils/error-handler';
 import { runCompodoc } from '../utils/run-compodoc';
@@ -70,94 +67,88 @@ export type StorybookBuilderOutput = JsonObject & BuilderOutput & { [key: string
 
 type StandaloneBuildOptions = StandaloneOptions & { outputDir: string };
 
-const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (
+const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = async (
   options,
   context
-): BuilderOutputLike => {
-  const builder = from(setup(options, context)).pipe(
-    switchMap(({ tsConfig }) => {
-      const docTSConfig = find.up('tsconfig.doc.json', {
-        cwd: options.configDir,
-        last: getProjectRoot(),
-      });
-      const runCompodoc$ = options.compodoc
-        ? runCompodoc(
-            { compodocArgs: options.compodocArgs, tsconfig: docTSConfig ?? tsConfig },
-            context
-          ).pipe(mapTo({ tsConfig }))
-        : of({});
-
-      return runCompodoc$.pipe(mapTo({ tsConfig }));
-    }),
-    map(({ tsConfig }) => {
-      getEnvConfig(options, {
-        staticDir: 'SBCONFIG_STATIC_DIR',
-        outputDir: 'SBCONFIG_OUTPUT_DIR',
-        configDir: 'SBCONFIG_CONFIG_DIR',
-      });
-
-      const {
-        browserTarget,
-        stylePreprocessorOptions,
-        styles,
-        configDir,
-        docs,
-        loglevel,
-        test,
-        outputDir,
-        quiet,
-        enableProdMode = true,
-        webpackStatsJson,
-        statsJson,
-        debugWebpack,
-        disableTelemetry,
-        assets,
-        previewUrl,
-        sourceMap = false,
-        preserveSymlinks = false,
-        experimentalZoneless = !!(VERSION.major && Number(VERSION.major) >= 21),
-      } = options;
-
-      const packageJsonPath = pkg.up({ cwd: __dirname });
-      const packageJson =
-        packageJsonPath != null ? JSON.parse(readFileSync(packageJsonPath, 'utf8')) : null;
-
-      const standaloneOptions: StandaloneBuildOptions = {
-        packageJson,
-        configDir,
-        ...(docs ? { docs } : {}),
-        loglevel,
-        outputDir,
-        test,
-        quiet,
-        enableProdMode,
-        disableTelemetry,
-        angularBrowserTarget: browserTarget,
-        angularBuilderContext: context,
-        angularBuilderOptions: {
-          ...(stylePreprocessorOptions ? { stylePreprocessorOptions } : {}),
-          ...(styles ? { styles } : {}),
-          ...(assets ? { assets } : {}),
-          sourceMap,
-          preserveSymlinks,
-          experimentalZoneless,
-        },
-        tsConfig,
-        webpackStatsJson,
-        statsJson,
-        debugWebpack,
-        previewUrl,
-      };
-
-      return standaloneOptions;
-    }),
-    switchMap((standaloneOptions) => runInstance({ ...standaloneOptions, mode: 'static' })),
-    map(() => {
-      return { success: true };
-    })
-  );
-
-  return builder as any as BuilderOutput;
+): Promise<BuilderOutput> => {
+  logger.intro('Building Storybook');
+
+  const { tsConfig } = await setup(options, context);
+
+  const docTSConfig = find.up('tsconfig.doc.json', {
+    cwd: options.configDir,
+    last: getProjectRoot(),
+  });
+
+  if (options.compodoc) {
+    await runCompodoc(
+      { compodocArgs: options.compodocArgs, tsconfig: docTSConfig ?? tsConfig },
+      context
+    );
+  }
+
+  getEnvConfig(options, {
+    staticDir: 'SBCONFIG_STATIC_DIR',
+    outputDir: 'SBCONFIG_OUTPUT_DIR',
+    configDir: 'SBCONFIG_CONFIG_DIR',
+  });
+
+  const {
+    browserTarget,
+    stylePreprocessorOptions,
+    styles,
+    configDir,
+    docs,
+    loglevel,
+    test,
+    outputDir,
+    quiet,
+    enableProdMode = true,
+    webpackStatsJson,
+    statsJson,
+    debugWebpack,
+    disableTelemetry,
+    assets,
+    previewUrl,
+    sourceMap = false,
+    preserveSymlinks = false,
+    experimentalZoneless = !!(VERSION.major && Number(VERSION.major) >= 21),
+  } = options;
+
+  const packageJsonPath = pkg.up({ cwd: __dirname });
+  const packageJson =
+    packageJsonPath != null ? JSON.parse(readFileSync(packageJsonPath, 'utf8')) : null;
+
+  const standaloneOptions: StandaloneBuildOptions = {
+    packageJson,
+    configDir,
+    ...(docs ? { docs } : {}),
+    loglevel,
+    outputDir,
+    test,
+    quiet,
+    enableProdMode,
+    disableTelemetry,
+    angularBrowserTarget: browserTarget,
+    angularBuilderContext: context,
+    angularBuilderOptions: {
+      ...(stylePreprocessorOptions ? { stylePreprocessorOptions } : {}),
+      ...(styles ? { styles } : {}),
+      ...(assets ? { assets } : {}),
+      sourceMap,
+      preserveSymlinks,
+      experimentalZoneless,
+    },
+    tsConfig,
+    webpackStatsJson,
+    statsJson,
+    debugWebpack,
+    previewUrl,
+  };
+
+  await runInstance({ ...standaloneOptions, mode: 'static' });
+  logger.outro('Storybook build completed successfully');
+  return { success: true } as BuilderOutput;
 };
 
 export default createBuilder(commandBuilder) as DevkitBuilder<StorybookBuilderOptions & JsonObject>;
@@ -182,21 +173,22 @@ async function setup(options: StorybookBuilderOptions, context: BuilderContext)
   };
 }
 
-function runInstance(options: StandaloneBuildOptions) {
-  return from(
-    withTelemetry(
+async function runInstance(options: StandaloneBuildOptions) {
+  try {
+    await withTelemetry(
       'build',
       {
         cliOptions: options,
         presetOptions: { ...options, corePresets: [], overridePresets: [] },
         printError: printErrorDetails,
       },
       async () => {
-        logger.intro('Building storybook');
         const result = await buildStaticStandalone(options);
-        logger.outro('Storybook build completed successfully');
         return result;
       }
-    )
-  ).pipe(catchError((error: any) => throwError(errorSummary(error))));
+    );
+  } catch (error) {
+    const summary = errorSummary(error);
+    throw new Error(summary);
+  }
 }