Merge pull request #27361 from storybookjs/valentin/revert-angular-st…

…yle-adjustments

Angular: Revert style adjustments

code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts

@@ -2,7 +2,6 @@ import { dirname, join, resolve } from 'path';
 import { DefinePlugin, HotModuleReplacementPlugin, ProgressPlugin, ProvidePlugin } from 'webpack';
 import type { Configuration } from 'webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
-
 // @ts-expect-error (I removed this on purpose, because it's incorrect)
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import TerserWebpackPlugin from 'terser-webpack-plugin';
@@ -54,11 +53,7 @@ const storybookPaths: Record<string, string> = {
 };
 
 export default async (
-  options: Options & {
-    typescriptOptions: TypescriptOptions;
-    /* Build entries, which should not be linked in the iframe HTML file */
-    excludeChunks?: string[];
-  }
+  options: Options & { typescriptOptions: TypescriptOptions }
 ): Promise<Configuration> => {
   const {
     outputDir = join('.', 'public'),
@@ -69,7 +64,6 @@ export default async (
     previewUrl,
     typescriptOptions,
     features,
-    excludeChunks = [],
   } = options;
 
   const isProd = configType === 'PRODUCTION';
@@ -178,7 +172,6 @@ export default async (
         alwaysWriteToDisk: true,
         inject: false,
         template,
-        excludeChunks,
         templateParameters: {
           version: packageJson.version,
           globals: {

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

@@ -1,29 +1,47 @@
-import { BuilderContext, BuilderOutput, createBuilder } from '@angular-devkit/architect';
+import {
+  BuilderContext,
+  BuilderHandlerFn,
+  BuilderOutput,
+  BuilderOutputLike,
+  Target,
+  createBuilder,
+  targetFromTargetString,
+} from '@angular-devkit/architect';
 import { JsonObject } from '@angular-devkit/core';
+import { from, of, throwError } from 'rxjs';
+import { catchError, map, mapTo, switchMap } from 'rxjs/operators';
 import { sync as findUpSync } from 'find-up';
 import { sync as readUpSync } from 'read-pkg-up';
+import { BrowserBuilderOptions, StylePreprocessorOptions } from '@angular-devkit/build-angular';
 
 import { CLIOptions } from '@storybook/types';
 import { getEnvConfig, versions } from '@storybook/core-common';
 import { addToGlobalContext } from '@storybook/telemetry';
 
 import { buildStaticStandalone, withTelemetry } from '@storybook/core-server';
-import { StyleClass } from '@angular-devkit/build-angular/src/builders/browser/schema';
+import {
+  AssetPattern,
+  SourceMapUnion,
+  StyleElement,
+} from '@angular-devkit/build-angular/src/builders/browser/schema';
 import { StandaloneOptions } from '../utils/standalone-options';
 import { runCompodoc } from '../utils/run-compodoc';
 import { errorSummary, printErrorDetails } from '../utils/error-handler';
-import { AngularBuilderOptions, setup } from '../utils/setup';
 
 addToGlobalContext('cliVersion', versions.storybook);
 
-export type StorybookBuilderOptions = AngularBuilderOptions & {
+export type StorybookBuilderOptions = JsonObject & {
   browserTarget?: string | null;
   tsConfig?: string;
   test: boolean;
   docs: boolean;
   compodoc: boolean;
   compodocArgs: string[];
   enableProdMode?: boolean;
+  styles?: StyleElement[];
+  stylePreprocessorOptions?: StylePreprocessorOptions;
+  assets?: AssetPattern[];
+  sourceMap?: SourceMapUnion;
 } & Pick<
     // makes sure the option exists
     CLIOptions,
@@ -41,86 +59,119 @@ export type StorybookBuilderOptions = AngularBuilderOptions & {
 
 export type StorybookBuilderOutput = JsonObject & BuilderOutput & { [key: string]: any };
 
-type StandaloneBuildOptions = StandaloneOptions & { outputDir: string; excludeChunks: string[] };
+type StandaloneBuildOptions = StandaloneOptions & { outputDir: string };
+
+const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (
+  options,
+  context
+): BuilderOutputLike => {
+  const builder = from(setup(options, context)).pipe(
+    switchMap(({ tsConfig }) => {
+      const docTSConfig = findUpSync('tsconfig.doc.json', { cwd: options.configDir });
+      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,
+      } = options;
+
+      const standaloneOptions: StandaloneBuildOptions = {
+        packageJson: readUpSync({ cwd: __dirname }).packageJson,
+        configDir,
+        ...(docs ? { docs } : {}),
+        loglevel,
+        outputDir,
+        test,
+        quiet,
+        enableProdMode,
+        disableTelemetry,
+        angularBrowserTarget: browserTarget,
+        angularBuilderContext: context,
+        angularBuilderOptions: {
+          ...(stylePreprocessorOptions ? { stylePreprocessorOptions } : {}),
+          ...(styles ? { styles } : {}),
+          ...(assets ? { assets } : {}),
+          sourceMap,
+        },
+        tsConfig,
+        webpackStatsJson,
+        statsJson,
+        debugWebpack,
+        previewUrl,
+      };
+
+      return standaloneOptions;
+    }),
+    switchMap((standaloneOptions) => runInstance({ ...standaloneOptions, mode: 'static' })),
+    map(() => {
+      return { success: true };
+    })
+  );
+
+  return builder as any as BuilderOutput;
+};
 
-const commandBuilder = async (
-  options: StorybookBuilderOptions,
-  context: BuilderContext
-): Promise<BuilderOutput> => {
-  const { tsConfig, angularBuilderContext, angularBuilderOptions } = await setup(options, context);
+export default createBuilder(commandBuilder);
 
-  const docTSConfig = findUpSync('tsconfig.doc.json', { cwd: options.configDir });
+async function setup(options: StorybookBuilderOptions, context: BuilderContext) {
+  let browserOptions: (JsonObject & BrowserBuilderOptions) | undefined;
+  let browserTarget: Target | undefined;
 
-  if (options.compodoc) {
-    await runCompodoc(
-      { compodocArgs: options.compodocArgs, tsconfig: docTSConfig ?? tsConfig },
-      context
+  if (options.browserTarget) {
+    browserTarget = targetFromTargetString(options.browserTarget);
+    browserOptions = await context.validateOptions<JsonObject & BrowserBuilderOptions>(
+      await context.getTargetOptions(browserTarget),
+      await context.getBuilderNameForTarget(browserTarget)
     );
   }
 
-  getEnvConfig(options, {
-    staticDir: 'SBCONFIG_STATIC_DIR',
-    outputDir: 'SBCONFIG_OUTPUT_DIR',
-    configDir: 'SBCONFIG_CONFIG_DIR',
-  });
-
-  const {
-    configDir,
-    docs,
-    loglevel,
-    test,
-    outputDir,
-    quiet,
-    enableProdMode = true,
-    webpackStatsJson,
-    statsJson,
-    debugWebpack,
-    disableTelemetry,
-    previewUrl,
-  } = options;
-
-  const standaloneOptions: StandaloneBuildOptions = {
-    packageJson: readUpSync({ cwd: __dirname }).packageJson,
-    configDir,
-    ...(docs ? { docs } : {}),
-    excludeChunks: angularBuilderOptions.styles
-      ?.filter((style) => typeof style !== 'string' && style.inject === false)
-      .map((s: StyleClass) => s.bundleName),
-    loglevel,
-    outputDir,
-    test,
-    quiet,
-    enableProdMode,
-    disableTelemetry,
-    angularBrowserTarget: options.browserTarget,
-    angularBuilderContext,
-    angularBuilderOptions,
-    tsConfig,
-    webpackStatsJson,
-    statsJson,
-    debugWebpack,
-    previewUrl,
+  return {
+    tsConfig:
+      options.tsConfig ??
+      findUpSync('tsconfig.json', { cwd: options.configDir }) ??
+      browserOptions.tsConfig,
   };
+}
 
-  await runInstance({ ...standaloneOptions, mode: 'static' });
-
-  return { success: true };
-};
-
-export default createBuilder(commandBuilder);
-
-async function runInstance(options: StandaloneBuildOptions) {
-  try {
-    await withTelemetry(
+function runInstance(options: StandaloneBuildOptions) {
+  return from(
+    withTelemetry(
       'build',
       {
         cliOptions: options,
         presetOptions: { ...options, corePresets: [], overridePresets: [] },
         printError: printErrorDetails,
       },
       () => buildStaticStandalone(options)
-    );
-  } catch (error) {
-    throw new Error(errorSummary(error));
-  }
+    )
+  ).pipe(catchError((error: any) => throwError(errorSummary(error))));
 }