@storybook/angular 8.1.0 → 8.1.2

package/dist/builders/build-storybook/index.js

@@ -1,8 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const architect_1 = require("@angular-devkit/architect");
-const rxjs_1 = require("rxjs");
-const operators_1 = require("rxjs/operators");
 const find_up_1 = require("find-up");
 const read_pkg_up_1 = require("read-pkg-up");
 const core_common_1 = require("@storybook/core-common");
@@ -10,69 +8,55 @@ const telemetry_1 = require("@storybook/telemetry");
 const core_server_1 = require("@storybook/core-server");
 const run_compodoc_1 = require("../utils/run-compodoc");
 const error_handler_1 = require("../utils/error-handler");
+const setup_1 = require("../utils/setup");
 (0, telemetry_1.addToGlobalContext)('cliVersion', core_common_1.versions.storybook);
-const commandBuilder = (options, context) => {
-    const builder = (0, rxjs_1.from)(setup(options, context)).pipe((0, operators_1.switchMap)(({ tsConfig }) => {
-        const docTSConfig = (0, find_up_1.sync)('tsconfig.doc.json', { cwd: options.configDir });
-        const runCompodoc$ = options.compodoc
-            ? (0, run_compodoc_1.runCompodoc)({ compodocArgs: options.compodocArgs, tsconfig: docTSConfig ?? tsConfig }, context).pipe((0, operators_1.mapTo)({ tsConfig }))
-            : (0, rxjs_1.of)({});
-        return runCompodoc$.pipe((0, operators_1.mapTo)({ tsConfig }));
-    }), (0, operators_1.map)(({ tsConfig }) => {
-        (0, core_common_1.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 = {
-            packageJson: (0, read_pkg_up_1.sync)({ 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;
-    }), (0, operators_1.switchMap)((standaloneOptions) => runInstance({ ...standaloneOptions, mode: 'static' })), (0, operators_1.map)(() => {
-        return { success: true };
-    }));
-    return builder;
+const commandBuilder = async (options, context) => {
+    const { tsConfig, angularBuilderContext, angularBuilderOptions } = await (0, setup_1.setup)(options, context);
+    const docTSConfig = (0, find_up_1.sync)('tsconfig.doc.json', { cwd: options.configDir });
+    if (options.compodoc) {
+        await (0, run_compodoc_1.runCompodoc)({ compodocArgs: options.compodocArgs, tsconfig: docTSConfig ?? tsConfig }, context);
+    }
+    (0, core_common_1.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 = {
+        packageJson: (0, read_pkg_up_1.sync)({ cwd: __dirname }).packageJson,
+        configDir,
+        ...(docs ? { docs } : {}),
+        excludeChunks: angularBuilderOptions.styles
+            ?.filter((style) => typeof style !== 'string' && style.inject === false)
+            .map((s) => s.bundleName),
+        loglevel,
+        outputDir,
+        test,
+        quiet,
+        enableProdMode,
+        disableTelemetry,
+        angularBrowserTarget: options.browserTarget,
+        angularBuilderContext,
+        angularBuilderOptions,
+        tsConfig,
+        webpackStatsJson,
+        statsJson,
+        debugWebpack,
+        previewUrl,
+    };
+    await runInstance({ ...standaloneOptions, mode: 'static' });
+    return { success: true };
 };
 exports.default = (0, architect_1.createBuilder)(commandBuilder);
-async function setup(options, context) {
-    let browserOptions;
-    let browserTarget;
-    if (options.browserTarget) {
-        browserTarget = (0, architect_1.targetFromTargetString)(options.browserTarget);
-        browserOptions = await context.validateOptions(await context.getTargetOptions(browserTarget), await context.getBuilderNameForTarget(browserTarget));
+async function runInstance(options) {
+    try {
+        await (0, core_server_1.withTelemetry)('build', {
+            cliOptions: options,
+            presetOptions: { ...options, corePresets: [], overridePresets: [] },
+            printError: error_handler_1.printErrorDetails,
+        }, () => (0, core_server_1.buildStaticStandalone)(options));
+    }
+    catch (error) {
+        throw new Error((0, error_handler_1.errorSummary)(error));
     }
-    return {
-        tsConfig: options.tsConfig ??
-            (0, find_up_1.sync)('tsconfig.json', { cwd: options.configDir }) ??
-            browserOptions.tsConfig,
-    };
-}
-function runInstance(options) {
-    return (0, rxjs_1.from)((0, core_server_1.withTelemetry)('build', {
-        cliOptions: options,
-        presetOptions: { ...options, corePresets: [], overridePresets: [] },
-        printError: error_handler_1.printErrorDetails,
-    }, () => (0, core_server_1.buildStaticStandalone)(options))).pipe((0, operators_1.catchError)((error) => (0, rxjs_1.throwError)((0, error_handler_1.errorSummary)(error))));
 }

package/dist/builders/start-storybook/index.js

@@ -1,8 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const architect_1 = require("@angular-devkit/architect");
-const rxjs_1 = require("rxjs");
-const operators_1 = require("rxjs/operators");
 const find_up_1 = require("find-up");
 const read_pkg_up_1 = require("read-pkg-up");
 const core_common_1 = require("@storybook/core-common");
@@ -10,90 +8,70 @@ const telemetry_1 = require("@storybook/telemetry");
 const core_server_1 = require("@storybook/core-server");
 const run_compodoc_1 = require("../utils/run-compodoc");
 const error_handler_1 = require("../utils/error-handler");
+const setup_1 = require("../utils/setup");
 (0, telemetry_1.addToGlobalContext)('cliVersion', core_common_1.versions.storybook);
-const commandBuilder = (options, context) => {
-    const builder = (0, rxjs_1.from)(setup(options, context)).pipe((0, operators_1.switchMap)(({ tsConfig }) => {
-        const docTSConfig = (0, find_up_1.sync)('tsconfig.doc.json', { cwd: options.configDir });
-        const runCompodoc$ = options.compodoc
-            ? (0, run_compodoc_1.runCompodoc)({
-                compodocArgs: [...options.compodocArgs, ...(options.quiet ? ['--silent'] : [])],
-                tsconfig: docTSConfig ?? tsConfig,
-            }, context).pipe((0, operators_1.mapTo)({ tsConfig }))
-            : (0, rxjs_1.of)({});
-        return runCompodoc$.pipe((0, operators_1.mapTo)({ tsConfig }));
-    }), (0, operators_1.map)(({ tsConfig }) => {
-        (0, core_common_1.getEnvConfig)(options, {
-            port: 'SBCONFIG_PORT',
-            host: 'SBCONFIG_HOSTNAME',
-            staticDir: 'SBCONFIG_STATIC_DIR',
-            configDir: 'SBCONFIG_CONFIG_DIR',
-            ci: 'CI',
-        });
-        options.port = parseInt(`${options.port}`, 10);
-        const { browserTarget, stylePreprocessorOptions, styles, ci, configDir, docs, host, https, port, quiet, enableProdMode = false, smokeTest, sslCa, sslCert, sslKey, disableTelemetry, assets, initialPath, open, debugWebpack, loglevel, webpackStatsJson, statsJson, previewUrl, sourceMap = false, } = options;
-        const standaloneOptions = {
-            packageJson: (0, read_pkg_up_1.sync)({ cwd: __dirname }).packageJson,
-            ci,
-            configDir,
-            ...(docs ? { docs } : {}),
-            host,
-            https,
-            port,
-            quiet,
-            enableProdMode,
-            smokeTest,
-            sslCa,
-            sslCert,
-            sslKey,
-            disableTelemetry,
-            angularBrowserTarget: browserTarget,
-            angularBuilderContext: context,
-            angularBuilderOptions: {
-                ...(stylePreprocessorOptions ? { stylePreprocessorOptions } : {}),
-                ...(styles ? { styles } : {}),
-                ...(assets ? { assets } : {}),
-                sourceMap,
-            },
-            tsConfig,
-            initialPath,
-            open,
-            debugWebpack,
-            webpackStatsJson,
-            statsJson,
-            loglevel,
-            previewUrl,
-        };
-        return standaloneOptions;
-    }), (0, operators_1.switchMap)((standaloneOptions) => runInstance(standaloneOptions)), (0, operators_1.map)((port) => {
-        return { success: true, info: { port } };
-    }));
-    return builder;
-};
-exports.default = (0, architect_1.createBuilder)(commandBuilder);
-async function setup(options, context) {
-    let browserOptions;
-    let browserTarget;
-    if (options.browserTarget) {
-        browserTarget = (0, architect_1.targetFromTargetString)(options.browserTarget);
-        browserOptions = await context.validateOptions(await context.getTargetOptions(browserTarget), await context.getBuilderNameForTarget(browserTarget));
+const commandBuilder = async (options, context) => {
+    const { tsConfig, angularBuilderContext, angularBuilderOptions } = await (0, setup_1.setup)(options, context);
+    const docTSConfig = (0, find_up_1.sync)('tsconfig.doc.json', { cwd: options.configDir });
+    if (options.compodoc) {
+        await (0, run_compodoc_1.runCompodoc)({
+            compodocArgs: [...options.compodocArgs, ...(options.quiet ? ['--silent'] : [])],
+            tsconfig: docTSConfig ?? tsConfig,
+        }, context);
     }
-    return {
-        tsConfig: options.tsConfig ??
-            (0, find_up_1.sync)('tsconfig.json', { cwd: options.configDir }) ??
-            browserOptions.tsConfig,
+    (0, core_common_1.getEnvConfig)(options, {
+        port: 'SBCONFIG_PORT',
+        host: 'SBCONFIG_HOSTNAME',
+        staticDir: 'SBCONFIG_STATIC_DIR',
+        configDir: 'SBCONFIG_CONFIG_DIR',
+        ci: 'CI',
+    });
+    options.port = parseInt(`${options.port}`, 10);
+    const { browserTarget, ci, configDir, docs, host, https, port, quiet, enableProdMode = false, smokeTest, sslCa, sslCert, sslKey, disableTelemetry, initialPath, open, debugWebpack, loglevel, webpackStatsJson, statsJson, previewUrl, } = options;
+    const standaloneOptions = {
+        packageJson: (0, read_pkg_up_1.sync)({ cwd: __dirname }).packageJson,
+        ci,
+        configDir,
+        ...(docs ? { docs } : {}),
+        excludeChunks: angularBuilderOptions.styles
+            ?.filter((style) => typeof style !== 'string' && style.inject === false)
+            .map((s) => s.bundleName),
+        host,
+        https,
+        port,
+        quiet,
+        enableProdMode,
+        smokeTest,
+        sslCa,
+        sslCert,
+        sslKey,
+        disableTelemetry,
+        angularBrowserTarget: browserTarget,
+        angularBuilderContext,
+        angularBuilderOptions,
+        tsConfig,
+        initialPath,
+        open,
+        debugWebpack,
+        webpackStatsJson,
+        statsJson,
+        loglevel,
+        previewUrl,
     };
-}
-function runInstance(options) {
-    return new rxjs_1.Observable((observer) => {
-        // This Observable intentionally never complete, leaving the process running ;)
-        (0, core_server_1.withTelemetry)('dev', {
+    const devPort = await runInstance(standaloneOptions);
+    return { success: true, info: { port: devPort } };
+};
+exports.default = (0, architect_1.createBuilder)(commandBuilder);
+async function runInstance(options) {
+    try {
+        const { port } = await (0, core_server_1.withTelemetry)('dev', {
             cliOptions: options,
             presetOptions: { ...options, corePresets: [], overridePresets: [] },
             printError: error_handler_1.printErrorDetails,
-        }, () => (0, core_server_1.buildDevStandalone)(options))
-            .then(({ port }) => observer.next(port))
-            .catch((error) => {
-            observer.error((0, error_handler_1.errorSummary)(error));
-        });
-    });
+        }, () => (0, core_server_1.buildDevStandalone)(options));
+        return port;
+    }
+    catch (error) {
+        throw new Error((0, error_handler_1.errorSummary)(error));
+    }
 }

package/dist/builders/utils/run-compodoc.d.ts

@@ -1,6 +1,5 @@
 import { BuilderContext } from '@angular-devkit/architect';
-import { Observable } from 'rxjs';
 export declare const runCompodoc: ({ compodocArgs, tsconfig }: {
     compodocArgs: string[];
     tsconfig: string;
-}, context: BuilderContext) => Observable<void>;
+}, context: BuilderContext) => Promise<void>;

package/dist/builders/utils/run-compodoc.js

@@ -24,7 +24,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.runCompodoc = void 0;
-const rxjs_1 = require("rxjs");
 const path = __importStar(require("path"));
 const core_common_1 = require("@storybook/core-common");
 const hasTsConfigArg = (args) => args.indexOf('-p') !== -1;
@@ -34,25 +33,21 @@ const hasOutputArg = (args) => args.indexOf('-d') !== -1 || args.indexOf('--outp
 const toRelativePath = (pathToTsConfig) => {
     return path.isAbsolute(pathToTsConfig) ? path.relative('.', pathToTsConfig) : pathToTsConfig;
 };
-const runCompodoc = ({ compodocArgs, tsconfig }, context) => {
-    return new rxjs_1.Observable((observer) => {
-        const tsConfigPath = toRelativePath(tsconfig);
-        const finalCompodocArgs = [
-            ...(hasTsConfigArg(compodocArgs) ? [] : ['-p', tsConfigPath]),
-            ...(hasOutputArg(compodocArgs) ? [] : ['-d', `${context.workspaceRoot || '.'}`]),
-            ...compodocArgs,
-        ];
-        const packageManager = core_common_1.JsPackageManagerFactory.getPackageManager();
-        try {
-            const stdout = packageManager.runPackageCommandSync('compodoc', finalCompodocArgs, context.workspaceRoot, 'inherit');
-            context.logger.info(stdout);
-            observer.next();
-            observer.complete();
-        }
-        catch (e) {
-            context.logger.error(e);
-            observer.error();
-        }
-    });
+const runCompodoc = async ({ compodocArgs, tsconfig }, context) => {
+    const tsConfigPath = toRelativePath(tsconfig);
+    const finalCompodocArgs = [
+        ...(hasTsConfigArg(compodocArgs) ? [] : ['-p', tsConfigPath]),
+        ...(hasOutputArg(compodocArgs) ? [] : ['-d', `${context.workspaceRoot || '.'}`]),
+        ...compodocArgs,
+    ];
+    const packageManager = core_common_1.JsPackageManagerFactory.getPackageManager();
+    try {
+        const stdout = packageManager.runPackageCommandSync('compodoc', finalCompodocArgs, context.workspaceRoot, 'inherit');
+        context.logger.info(stdout);
+    }
+    catch (e) {
+        context.logger.error(e);
+        throw e;
+    }
 };
 exports.runCompodoc = runCompodoc;

package/dist/builders/utils/run-compodoc.spec.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 // eslint-disable-next-line import/no-extraneous-dependencies
 const vitest_1 = require("vitest");
-const operators_1 = require("rxjs/operators");
 const run_compodoc_1 = require("./run-compodoc");
 const mockRunScript = vitest_1.vi.fn();
 vitest_1.vi.mock('@storybook/core-common', () => ({
@@ -30,48 +29,38 @@ const builderContextLoggerMock = {
         logger: builderContextLoggerMock,
     };
     (0, vitest_1.it)('should run compodoc with tsconfig from context', async () => {
-        (0, run_compodoc_1.runCompodoc)({
+        await (0, run_compodoc_1.runCompodoc)({
             compodocArgs: [],
             tsconfig: 'path/to/tsconfig.json',
-        }, builderContextMock)
-            .pipe((0, operators_1.take)(1))
-            .subscribe();
+        }, builderContextMock);
         (0, vitest_1.expect)(mockRunScript).toHaveBeenCalledWith('compodoc', ['-p', 'path/to/tsconfig.json', '-d', 'path/to/project'], 'path/to/project', 'inherit');
     });
     (0, vitest_1.it)('should run compodoc with tsconfig from compodocArgs', async () => {
-        (0, run_compodoc_1.runCompodoc)({
+        await (0, run_compodoc_1.runCompodoc)({
             compodocArgs: ['-p', 'path/to/tsconfig.stories.json'],
             tsconfig: 'path/to/tsconfig.json',
-        }, builderContextMock)
-            .pipe((0, operators_1.take)(1))
-            .subscribe();
+        }, builderContextMock);
         (0, vitest_1.expect)(mockRunScript).toHaveBeenCalledWith('compodoc', ['-d', 'path/to/project', '-p', 'path/to/tsconfig.stories.json'], 'path/to/project', 'inherit');
     });
     (0, vitest_1.it)('should run compodoc with default output folder.', async () => {
-        (0, run_compodoc_1.runCompodoc)({
+        await (0, run_compodoc_1.runCompodoc)({
             compodocArgs: [],
             tsconfig: 'path/to/tsconfig.json',
-        }, builderContextMock)
-            .pipe((0, operators_1.take)(1))
-            .subscribe();
+        }, builderContextMock);
         (0, vitest_1.expect)(mockRunScript).toHaveBeenCalledWith('compodoc', ['-p', 'path/to/tsconfig.json', '-d', 'path/to/project'], 'path/to/project', 'inherit');
     });
     (0, vitest_1.it)('should run with custom output folder specified with --output compodocArgs', async () => {
-        (0, run_compodoc_1.runCompodoc)({
+        await (0, run_compodoc_1.runCompodoc)({
             compodocArgs: ['--output', 'path/to/customFolder'],
             tsconfig: 'path/to/tsconfig.json',
-        }, builderContextMock)
-            .pipe((0, operators_1.take)(1))
-            .subscribe();
+        }, builderContextMock);
         (0, vitest_1.expect)(mockRunScript).toHaveBeenCalledWith('compodoc', ['-p', 'path/to/tsconfig.json', '--output', 'path/to/customFolder'], 'path/to/project', 'inherit');
     });
     (0, vitest_1.it)('should run with custom output folder specified with -d compodocArgs', async () => {
-        (0, run_compodoc_1.runCompodoc)({
+        await (0, run_compodoc_1.runCompodoc)({
             compodocArgs: ['-d', 'path/to/customFolder'],
             tsconfig: 'path/to/tsconfig.json',
-        }, builderContextMock)
-            .pipe((0, operators_1.take)(1))
-            .subscribe();
+        }, builderContextMock);
         (0, vitest_1.expect)(mockRunScript).toHaveBeenCalledWith('compodoc', ['-p', 'path/to/tsconfig.json', '-d', 'path/to/customFolder'], 'path/to/project', 'inherit');
     });
 });

package/dist/builders/utils/setup.d.ts

@@ -0,0 +1,26 @@
+import { BuilderContext } from '@angular-devkit/architect';
+import { StylePreprocessorOptions } from '@angular-devkit/build-angular';
+import { AssetPattern, SourceMapUnion, StyleElement } from '@angular-devkit/build-angular/src/builders/browser/schema';
+type AngularBuilderOptions = {
+    stylePreprocessorOptions?: StylePreprocessorOptions;
+    styles?: StyleElement[];
+    assets?: AssetPattern[];
+    sourceMap?: SourceMapUnion;
+};
+type Options = AngularBuilderOptions & {
+    browserTarget?: string | null;
+    tsConfig?: string;
+    configDir?: string;
+};
+export declare function setup(options: Options, context: BuilderContext): Promise<{
+    tsConfig: string;
+    angularBuilderContext: BuilderContext;
+    angularBuilderOptions: {
+        tsConfig: string;
+        stylePreprocessorOptions?: StylePreprocessorOptions | undefined;
+        styles?: StyleElement[] | undefined;
+        assets?: AssetPattern[] | undefined;
+        sourceMap?: SourceMapUnion | undefined;
+    };
+}>;
+export {};

package/dist/builders/utils/setup.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setup = void 0;
+const architect_1 = require("@angular-devkit/architect");
+const core_1 = require("@angular-devkit/core");
+const find_up_1 = require("find-up");
+const node_logger_1 = require("@storybook/node-logger");
+async function setup(options, context) {
+    let browserOptions;
+    let browserTarget;
+    if (options.browserTarget) {
+        browserTarget = (0, architect_1.targetFromTargetString)(options.browserTarget);
+        browserOptions = await context.validateOptions(await context.getTargetOptions(browserTarget), await context.getBuilderNameForTarget(browserTarget));
+    }
+    const tsConfig = options.tsConfig ??
+        (0, find_up_1.sync)('tsconfig.json', { cwd: options.configDir }) ??
+        browserOptions.tsConfig;
+    const angularBuilderContext = getBuilderContext(context);
+    const angularBuilderOptions = await getBuilderOptions(options.browserTarget, {
+        ...(options.stylePreprocessorOptions
+            ? { stylePreprocessorOptions: options.stylePreprocessorOptions }
+            : {}),
+        ...(options.styles ? { styles: options.styles } : {}),
+        ...(options.assets ? { assets: options.assets } : {}),
+        sourceMap: options.sourceMap ?? false,
+    }, tsConfig, options.configDir, angularBuilderContext);
+    return {
+        tsConfig,
+        angularBuilderContext,
+        angularBuilderOptions,
+    };
+}
+exports.setup = setup;
+/**
+ * Get Builder Context
+ * If storybook is not start by angular builder create dumb BuilderContext
+ */
+function getBuilderContext(builderContext) {
+    return (builderContext ??
+        {
+            target: { project: 'noop-project', builder: '', options: {} },
+            workspaceRoot: process.cwd(),
+            getProjectMetadata: () => ({}),
+            getTargetOptions: () => ({}),
+            logger: new core_1.logging.Logger('Storybook'),
+        });
+}
+/**
+ * Get builder options
+ * Merge target options from browser target and from storybook options
+ */
+async function getBuilderOptions(angularBrowserTarget, angularBuilderOptions, tsConfig, configDir, builderContext) {
+    /**
+     * Get Browser Target options
+     */
+    let browserTargetOptions = {};
+    if (angularBrowserTarget) {
+        const browserTarget = (0, architect_1.targetFromTargetString)(angularBrowserTarget);
+        browserTargetOptions = await builderContext.getTargetOptions(browserTarget);
+    }
+    /**
+     * Merge target options from browser target options and from storybook options
+     */
+    const builderOptions = {
+        ...browserTargetOptions,
+        ...angularBuilderOptions,
+        tsConfig: tsConfig ?? (0, find_up_1.sync)('tsconfig.json', { cwd: configDir }) ?? browserTargetOptions.tsConfig,
+    };
+    node_logger_1.logger.info(`=> Using angular project with "tsConfig:${builderOptions.tsConfig}"`);
+    return builderOptions;
+}

package/dist/builders/utils/standalone-options.d.ts

@@ -1,16 +1,12 @@
 import { BuilderContext } from '@angular-devkit/architect';
-import { AssetPattern, SourceMapUnion, StyleElement, StylePreprocessorOptions } from '@angular-devkit/build-angular/src/builders/browser/schema';
 import { LoadOptions, CLIOptions, BuilderOptions } from '@storybook/types';
+import { AngularBuilderOptions } from '../../server/framework-preset-angular-cli';
 export type StandaloneOptions = CLIOptions & LoadOptions & BuilderOptions & {
     mode?: 'static' | 'dev';
     enableProdMode: boolean;
     angularBrowserTarget?: string | null;
-    angularBuilderOptions?: Record<string, any> & {
-        styles?: StyleElement[];
-        stylePreprocessorOptions?: StylePreprocessorOptions;
-        assets?: AssetPattern[];
-        sourceMap?: SourceMapUnion;
-    };
+    angularBuilderOptions?: AngularBuilderOptions;
     angularBuilderContext?: BuilderContext | null;
     tsConfig?: string;
+    excludeChunks?: string[];
 };

package/dist/server/angular-cli-webpack.js

@@ -46,9 +46,13 @@ exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext }
         outputPath: 'noop-out',
         // Options provided by user
         ...builderOptions,
-        styles: builderOptions.styles
-            ?.map((style) => (typeof style === 'string' ? style : style.input))
-            .filter((style) => typeof style === 'string' || style.inject !== false),
+        styles: builderOptions.styles?.map((style) => typeof style === 'string'
+            ? {
+                input: style,
+                inject: true,
+                bundleName: style.split('/').pop(),
+            }
+            : style),
         // Fixed options
         optimization: false,
         namedChunks: false,

package/dist/server/framework-preset-angular-cli.js

@@ -3,9 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.webpackFinal = void 0;
 const node_logger_1 = require("@storybook/node-logger");
 const server_errors_1 = require("@storybook/core-events/server-errors");
-const architect_1 = require("@angular-devkit/architect");
-const find_up_1 = require("find-up");
-const core_1 = require("@angular-devkit/core");
 const angular_cli_webpack_1 = require("./angular-cli-webpack");
 const module_is_available_1 = require("./utils/module-is-available");
 async function webpackFinal(baseConfig, options) {
@@ -14,58 +11,15 @@ async function webpackFinal(baseConfig, options) {
         return baseConfig;
     }
     checkForLegacyBuildOptions(options);
-    const builderContext = getBuilderContext(options);
-    const builderOptions = await getBuilderOptions(options, builderContext);
     return (0, angular_cli_webpack_1.getWebpackConfig)(baseConfig, {
         builderOptions: {
             watch: options.configType === 'DEVELOPMENT',
-            ...builderOptions,
+            ...options.angularBuilderOptions,
         },
-        builderContext,
+        builderContext: options.angularBuilderContext,
     });
 }
 exports.webpackFinal = webpackFinal;
-/**
- * Get Builder Context
- * If storybook is not start by angular builder create dumb BuilderContext
- */
-function getBuilderContext(options) {
-    return (options.angularBuilderContext ??
-        {
-            target: { project: 'noop-project', builder: '', options: {} },
-            workspaceRoot: process.cwd(),
-            getProjectMetadata: () => ({}),
-            getTargetOptions: () => ({}),
-            logger: new core_1.logging.Logger('Storybook'),
-        });
-}
-/**
- * Get builder options
- * Merge target options from browser target and from storybook options
- */
-async function getBuilderOptions(options, builderContext) {
-    /**
-     * Get Browser Target options
-     */
-    let browserTargetOptions = {};
-    if (options.angularBrowserTarget) {
-        const browserTarget = (0, architect_1.targetFromTargetString)(options.angularBrowserTarget);
-        node_logger_1.logger.info(`=> Using angular browser target options from "${browserTarget.project}:${browserTarget.target}${browserTarget.configuration ? `:${browserTarget.configuration}` : ''}"`);
-        browserTargetOptions = await builderContext.getTargetOptions(browserTarget);
-    }
-    /**
-     * Merge target options from browser target options and from storybook options
-     */
-    const builderOptions = {
-        ...browserTargetOptions,
-        ...options.angularBuilderOptions,
-        tsConfig: options.tsConfig ??
-            (0, find_up_1.sync)('tsconfig.json', { cwd: options.configDir }) ??
-            browserTargetOptions.tsConfig,
-    };
-    node_logger_1.logger.info(`=> Using angular project with "tsConfig:${builderOptions.tsConfig}"`);
-    return builderOptions;
-}
 /**
  * Checks if using legacy configuration that doesn't use builder and logs message referring to migration docs.
  */

package/dist/server/preset-options.d.ts

@@ -1,13 +1,9 @@
 import { Options as CoreOptions } from '@storybook/types';
 import { BuilderContext } from '@angular-devkit/architect';
-import { StylePreprocessorOptions } from '@angular-devkit/build-angular';
-import { StyleElement } from '@angular-devkit/build-angular/src/builders/browser/schema';
+import { JsonObject } from '@angular-devkit/core';
 export type PresetOptions = CoreOptions & {
     angularBrowserTarget?: string | null;
-    angularBuilderOptions?: {
-        styles?: StyleElement[];
-        stylePreprocessorOptions?: StylePreprocessorOptions;
-    };
+    angularBuilderOptions?: JsonObject;
     angularBuilderContext?: BuilderContext | null;
     tsConfig?: string;
 };

package/dist/types.d.ts

@@ -1,7 +1,8 @@
 import { StorybookConfig as StorybookConfigBase, TypescriptOptions as TypescriptOptionsReact } from '@storybook/core-webpack';
 import { StorybookConfigWebpack, BuilderOptions, TypescriptOptions as TypescriptOptionsBuilder } from '@storybook/builder-webpack5';
-type FrameworkName = '@storybook/angular';
-type BuilderName = '@storybook/builder-webpack5';
+import { CompatibleString } from '@storybook/types';
+type FrameworkName = CompatibleString<'@storybook/angular'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
 export type FrameworkOptions = AngularOptions & {
     builder?: BuilderOptions;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "8.1.0",
+  "version": "8.1.2",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -37,18 +37,18 @@
     "prep": "rimraf dist && node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "8.1.0",
-    "@storybook/client-logger": "8.1.0",
-    "@storybook/core-common": "8.1.0",
-    "@storybook/core-events": "8.1.0",
-    "@storybook/core-server": "8.1.0",
-    "@storybook/core-webpack": "8.1.0",
-    "@storybook/docs-tools": "8.1.0",
+    "@storybook/builder-webpack5": "8.1.2",
+    "@storybook/client-logger": "8.1.2",
+    "@storybook/core-common": "8.1.2",
+    "@storybook/core-events": "8.1.2",
+    "@storybook/core-server": "8.1.2",
+    "@storybook/core-webpack": "8.1.2",
+    "@storybook/docs-tools": "8.1.2",
     "@storybook/global": "^5.0.0",
-    "@storybook/node-logger": "8.1.0",
-    "@storybook/preview-api": "8.1.0",
-    "@storybook/telemetry": "8.1.0",
-    "@storybook/types": "8.1.0",
+    "@storybook/node-logger": "8.1.2",
+    "@storybook/preview-api": "8.1.2",
+    "@storybook/telemetry": "8.1.2",
+    "@storybook/types": "8.1.2",
     "@types/node": "^18.0.0",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",