@storybook/angular 9.0.0-beta.1 → 9.0.0-beta.10

package/dist/builders/build-storybook/index.d.ts

@@ -1,5 +1,5 @@
 import { CLIOptions } from 'storybook/internal/types';
-import { BuilderOutput } from '@angular-devkit/architect';
+import { BuilderOutput, Builder as DevkitBuilder } from '@angular-devkit/architect';
 import { StylePreprocessorOptions } from '@angular-devkit/build-angular';
 import { AssetPattern, SourceMapUnion, StyleElement } from '@angular-devkit/build-angular/src/builders/browser/schema';
 import { JsonObject } from '@angular-devkit/core';
@@ -21,19 +21,5 @@ export type StorybookBuilderOptions = JsonObject & {
 export type StorybookBuilderOutput = JsonObject & BuilderOutput & {
     [key: string]: any;
 };
-declare const _default: import("@angular-devkit/architect").Builder<JsonObject & {
-    browserTarget?: string | null;
-    tsConfig?: string;
-    test: boolean;
-    docs: boolean;
-    compodoc: boolean;
-    compodocArgs: string[];
-    enableProdMode?: boolean;
-    styles?: StyleElement[];
-    stylePreprocessorOptions?: StylePreprocessorOptions;
-    preserveSymlinks?: boolean;
-    assets?: AssetPattern[];
-    sourceMap?: SourceMapUnion;
-    experimentalZoneless?: boolean;
-} & Pick<CLIOptions, "statsJson" | "outputDir" | "configDir" | "loglevel" | "quiet" | "test" | "webpackStatsJson" | "disableTelemetry" | "debugWebpack" | "previewUrl">>;
+declare const _default: DevkitBuilder<StorybookBuilderOptions & JsonObject>;
 export default _default;

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

@@ -0,0 +1,78 @@
+import { getEnvConfig, versions } from 'storybook/internal/common';
+import { buildStaticStandalone, withTelemetry } from 'storybook/internal/core-server';
+import { addToGlobalContext } from 'storybook/internal/telemetry';
+import { createBuilder, targetFromTargetString, } from '@angular-devkit/architect';
+import { findPackageSync } from 'fd-package-json';
+import { sync as findUpSync } from 'find-up';
+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';
+addToGlobalContext('cliVersion', versions.storybook);
+const commandBuilder = (options, context) => {
+    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, preserveSymlinks = false, experimentalZoneless = false, } = options;
+        const standaloneOptions = {
+            packageJson: findPackageSync(__dirname),
+            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;
+};
+export default createBuilder(commandBuilder);
+async function setup(options, context) {
+    let browserOptions;
+    let browserTarget;
+    if (options.browserTarget) {
+        browserTarget = targetFromTargetString(options.browserTarget);
+        browserOptions = await context.validateOptions(await context.getTargetOptions(browserTarget), await context.getBuilderNameForTarget(browserTarget));
+    }
+    return {
+        tsConfig: options.tsConfig ??
+            findUpSync('tsconfig.json', { cwd: options.configDir }) ??
+            browserOptions.tsConfig,
+    };
+}
+function runInstance(options) {
+    return from(withTelemetry('build', {
+        cliOptions: options,
+        presetOptions: { ...options, corePresets: [], overridePresets: [] },
+        printError: printErrorDetails,
+    }, () => buildStaticStandalone(options))).pipe(catchError((error) => throwError(errorSummary(error))));
+}

package/dist/builders/build-storybook/index.spec.mjs

@@ -0,0 +1,187 @@
+import { Architect, createBuilder } from '@angular-devkit/architect';
+import { TestingArchitectHost } from '@angular-devkit/architect/testing';
+import { schema } from '@angular-devkit/core';
+import * as path from 'node:path';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+const buildDevStandaloneMock = vi.fn();
+const buildStaticStandaloneMock = vi.fn();
+const buildMock = {
+    buildDevStandalone: buildDevStandaloneMock,
+    buildStaticStandalone: buildStaticStandaloneMock,
+    withTelemetry: (name, options, fn) => fn(),
+};
+vi.doMock('storybook/internal/core-server', () => buildMock);
+vi.doMock('storybook/internal/common', () => ({
+    JsPackageManagerFactory: {
+        getPackageManager: () => ({
+            runPackageCommand: mockRunScript,
+        }),
+    },
+    getEnvConfig: (options) => options,
+    versions: {
+        storybook: 'x.x.x',
+    },
+}));
+vi.doMock('find-up', () => ({ sync: () => './storybook/tsconfig.ts' }));
+const mockRunScript = vi.fn();
+// Randomly fails on CI. TODO: investigate why
+describe.skip('Build Storybook Builder', () => {
+    let architect;
+    let architectHost;
+    beforeEach(async () => {
+        const registry = new schema.CoreSchemaRegistry();
+        registry.addPostTransform(schema.transforms.addUndefinedDefaults);
+        architectHost = new TestingArchitectHost();
+        architect = new Architect(architectHost, registry);
+        architectHost.addBuilder('@angular-devkit/build-angular:browser', createBuilder(() => {
+            return { success: true };
+        }));
+        architectHost.addTarget({ project: 'angular-cli', target: 'build-2' }, '@angular-devkit/build-angular:browser', {
+            outputPath: 'dist/angular-cli',
+            index: 'src/index.html',
+            main: 'src/main.ts',
+            polyfills: 'src/polyfills.ts',
+            tsConfig: 'src/tsconfig.app.json',
+            assets: ['src/favicon.ico', 'src/assets'],
+            styles: ['src/styles.css'],
+            scripts: [],
+        });
+        // This will either take a Node package name, or a path to the directory
+        // for the package.json file.
+        await architectHost.addBuilderFromPackage(path.join(__dirname, '../../..'));
+    });
+    beforeEach(() => {
+        buildStaticStandaloneMock.mockImplementation((_options) => Promise.resolve(_options));
+    });
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+    it('should start storybook with angularBrowserTarget', async () => {
+        const run = await architect.scheduleBuilder('@storybook/angular:build-storybook', {
+            browserTarget: 'angular-cli:build-2',
+            compodoc: false,
+        });
+        const output = await run.result;
+        await run.stop();
+        expect(output.success).toBeTruthy();
+        expect(mockRunScript).not.toHaveBeenCalledWith();
+        expect(buildStaticStandaloneMock).toHaveBeenCalledWith(expect.objectContaining({
+            angularBrowserTarget: 'angular-cli:build-2',
+            angularBuilderContext: expect.any(Object),
+            configDir: '.storybook',
+            loglevel: undefined,
+            quiet: false,
+            disableTelemetry: undefined,
+            outputDir: 'storybook-static',
+            packageJson: expect.any(Object),
+            mode: 'static',
+            tsConfig: './storybook/tsconfig.ts',
+            statsJson: false,
+        }));
+    });
+    it('should start storybook with tsConfig', async () => {
+        const run = await architect.scheduleBuilder('@storybook/angular:build-storybook', {
+            tsConfig: 'path/to/tsConfig.json',
+            compodoc: false,
+        });
+        const output = await run.result;
+        await run.stop();
+        expect(output.success).toBeTruthy();
+        expect(mockRunScript).not.toHaveBeenCalledWith();
+        expect(buildStaticStandaloneMock).toHaveBeenCalledWith(expect.objectContaining({
+            angularBrowserTarget: null,
+            angularBuilderContext: expect.any(Object),
+            configDir: '.storybook',
+            loglevel: undefined,
+            quiet: false,
+            disableTelemetry: undefined,
+            outputDir: 'storybook-static',
+            packageJson: expect.any(Object),
+            mode: 'static',
+            tsConfig: 'path/to/tsConfig.json',
+            statsJson: false,
+        }));
+    });
+    it('should build storybook with webpack stats.json', async () => {
+        const run = await architect.scheduleBuilder('@storybook/angular:build-storybook', {
+            tsConfig: 'path/to/tsConfig.json',
+            compodoc: false,
+            statsJson: true,
+        });
+        const output = await run.result;
+        await run.stop();
+        expect(output.success).toBeTruthy();
+        expect(mockRunScript).not.toHaveBeenCalledWith();
+        expect(buildStaticStandaloneMock).toHaveBeenCalledWith(expect.objectContaining({
+            angularBrowserTarget: null,
+            angularBuilderContext: expect.any(Object),
+            configDir: '.storybook',
+            loglevel: undefined,
+            quiet: false,
+            outputDir: 'storybook-static',
+            packageJson: expect.any(Object),
+            mode: 'static',
+            tsConfig: 'path/to/tsConfig.json',
+            statsJson: true,
+        }));
+    });
+    it('should throw error', async () => {
+        buildStaticStandaloneMock.mockRejectedValue(true);
+        const run = await architect.scheduleBuilder('@storybook/angular:build-storybook', {
+            browserTarget: 'angular-cli:build-2',
+            compodoc: false,
+        });
+        try {
+            await run.result;
+            expect(false).toEqual('Throw expected');
+        }
+        catch (error) {
+            expect(error).toEqual('Broken build, fix the error above.\nYou may need to refresh the browser.');
+        }
+    });
+    it('should run compodoc', async () => {
+        const run = await architect.scheduleBuilder('@storybook/angular:build-storybook', {
+            browserTarget: 'angular-cli:build-2',
+        });
+        const output = await run.result;
+        await run.stop();
+        expect(output.success).toBeTruthy();
+        expect(mockRunScript).toHaveBeenCalledWith('compodoc', ['-p', './storybook/tsconfig.ts', '-d', '.', '-e', 'json'], '');
+        expect(buildStaticStandaloneMock).toHaveBeenCalledWith(expect.objectContaining({
+            angularBrowserTarget: 'angular-cli:build-2',
+            angularBuilderContext: expect.any(Object),
+            configDir: '.storybook',
+            loglevel: undefined,
+            quiet: false,
+            outputDir: 'storybook-static',
+            packageJson: expect.any(Object),
+            mode: 'static',
+            tsConfig: './storybook/tsconfig.ts',
+            statsJson: false,
+        }));
+    });
+    it('should start storybook with styles options', async () => {
+        const run = await architect.scheduleBuilder('@storybook/angular:build-storybook', {
+            tsConfig: 'path/to/tsConfig.json',
+            compodoc: false,
+            styles: ['style.scss'],
+        });
+        const output = await run.result;
+        await run.stop();
+        expect(output.success).toBeTruthy();
+        expect(mockRunScript).not.toHaveBeenCalledWith();
+        expect(buildStaticStandaloneMock).toHaveBeenCalledWith(expect.objectContaining({
+            angularBrowserTarget: null,
+            angularBuilderContext: expect.any(Object),
+            angularBuilderOptions: { assets: [], styles: ['style.scss'] },
+            configDir: '.storybook',
+            loglevel: undefined,
+            quiet: false,
+            outputDir: 'storybook-static',
+            packageJson: expect.any(Object),
+            mode: 'static',
+            tsConfig: 'path/to/tsConfig.json',
+            statsJson: false,
+        }));
+    });
+});

package/dist/builders/build-storybook/schema.json

@@ -91,8 +91,7 @@
             "description": "Global styles to be included in the build.",
             "items": {
                 "$ref": "#/definitions/styleElement"
-            },
-            "default": ""
+            }
         },
         "stylePreprocessorOptions": {
             "description": "Options to pass to style preprocessors.",
@@ -106,8 +105,7 @@
                     }
                 }
             },
-            "additionalProperties": false,
-            "default": ""
+            "additionalProperties": false
         },
         "assets": {
             "type": "array",

package/dist/builders/start-storybook/index.d.ts

@@ -1,5 +1,5 @@
 import { CLIOptions } from 'storybook/internal/types';
-import { BuilderOutput } from '@angular-devkit/architect';
+import { BuilderOutput, Builder as DevkitBuilder } from '@angular-devkit/architect';
 import { StylePreprocessorOptions } from '@angular-devkit/build-angular';
 import { AssetPattern, SourceMapUnion, StyleElement } from '@angular-devkit/build-angular/src/builders/browser/schema';
 import { JsonObject } from '@angular-devkit/core';
@@ -17,17 +17,5 @@ export type StorybookBuilderOptions = JsonObject & {
     experimentalZoneless?: boolean;
 } & Pick<CLIOptions, 'port' | 'host' | 'configDir' | 'https' | 'sslCa' | 'sslCert' | 'sslKey' | 'smokeTest' | 'ci' | 'quiet' | 'disableTelemetry' | 'initialPath' | 'open' | 'docs' | 'debugWebpack' | 'webpackStatsJson' | 'statsJson' | 'loglevel' | 'previewUrl'>;
 export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
-declare const _default: import("@angular-devkit/architect").Builder<JsonObject & {
-    browserTarget?: string | null;
-    tsConfig?: string;
-    compodoc: boolean;
-    compodocArgs: string[];
-    enableProdMode?: boolean;
-    styles?: StyleElement[];
-    stylePreprocessorOptions?: StylePreprocessorOptions;
-    assets?: AssetPattern[];
-    preserveSymlinks?: boolean;
-    sourceMap?: SourceMapUnion;
-    experimentalZoneless?: boolean;
-} & Pick<CLIOptions, "docs" | "statsJson" | "configDir" | "loglevel" | "quiet" | "webpackStatsJson" | "disableTelemetry" | "debugWebpack" | "previewUrl" | "port" | "host" | "initialPath" | "https" | "sslCa" | "sslCert" | "sslKey" | "smokeTest" | "open" | "ci">>;
+declare const _default: DevkitBuilder<StorybookBuilderOptions & JsonObject>;
 export default _default;

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

@@ -0,0 +1,99 @@
+import { getEnvConfig, versions } from 'storybook/internal/common';
+import { buildDevStandalone, withTelemetry } from 'storybook/internal/core-server';
+import { addToGlobalContext } from 'storybook/internal/telemetry';
+import { createBuilder, targetFromTargetString, } from '@angular-devkit/architect';
+import { findPackageSync } from 'fd-package-json';
+import { sync as findUpSync } from 'find-up';
+import { Observable, from, of } from 'rxjs';
+import { map, mapTo, switchMap } from 'rxjs/operators';
+import { errorSummary, printErrorDetails } from '../utils/error-handler';
+import { runCompodoc } from '../utils/run-compodoc';
+addToGlobalContext('cliVersion', versions.storybook);
+const commandBuilder = (options, context) => {
+    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, ...(options.quiet ? ['--silent'] : [])],
+                tsconfig: docTSConfig ?? tsConfig,
+            }, context).pipe(mapTo({ tsConfig }))
+            : of({});
+        return runCompodoc$.pipe(mapTo({ tsConfig }));
+    }), map(({ tsConfig }) => {
+        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, preserveSymlinks = false, experimentalZoneless = false, } = options;
+        const standaloneOptions = {
+            packageJson: findPackageSync(__dirname),
+            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 } : {}),
+                preserveSymlinks,
+                sourceMap,
+                experimentalZoneless,
+            },
+            tsConfig,
+            initialPath,
+            open,
+            debugWebpack,
+            webpackStatsJson,
+            statsJson,
+            loglevel,
+            previewUrl,
+        };
+        return standaloneOptions;
+    }), switchMap((standaloneOptions) => runInstance(standaloneOptions)), map((port) => {
+        return { success: true, info: { port } };
+    }));
+    return builder;
+};
+export default createBuilder(commandBuilder);
+async function setup(options, context) {
+    let browserOptions;
+    let browserTarget;
+    if (options.browserTarget) {
+        browserTarget = targetFromTargetString(options.browserTarget);
+        browserOptions = await context.validateOptions(await context.getTargetOptions(browserTarget), await context.getBuilderNameForTarget(browserTarget));
+    }
+    return {
+        tsConfig: options.tsConfig ??
+            findUpSync('tsconfig.json', { cwd: options.configDir }) ??
+            browserOptions.tsConfig,
+    };
+}
+function runInstance(options) {
+    return new Observable((observer) => {
+        // This Observable intentionally never complete, leaving the process running ;)
+        withTelemetry('dev', {
+            cliOptions: options,
+            presetOptions: { ...options, corePresets: [], overridePresets: [] },
+            printError: printErrorDetails,
+        }, () => buildDevStandalone(options))
+            .then(({ port }) => observer.next(port))
+            .catch((error) => {
+            observer.error(errorSummary(error));
+        });
+    });
+}

package/dist/builders/start-storybook/index.spec.mjs

@@ -0,0 +1,186 @@
+import { Architect, createBuilder } from '@angular-devkit/architect';
+import { TestingArchitectHost } from '@angular-devkit/architect/testing';
+import { schema } from '@angular-devkit/core';
+import { join } from 'node:path';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+const buildDevStandaloneMock = vi.fn();
+const buildStaticStandaloneMock = vi.fn();
+const buildMock = {
+    buildDevStandalone: buildDevStandaloneMock,
+    buildStaticStandalone: buildStaticStandaloneMock,
+    withTelemetry: (_, __, fn) => fn(),
+};
+vi.doMock('storybook/internal/core-server', () => buildMock);
+vi.doMock('find-up', () => ({ sync: () => './storybook/tsconfig.ts' }));
+const mockRunScript = vi.fn();
+vi.mock('storybook/internal/common', () => ({
+    getEnvConfig: (options) => options,
+    versions: {
+        storybook: 'x.x.x',
+    },
+    JsPackageManagerFactory: {
+        getPackageManager: () => ({
+            runPackageCommand: mockRunScript,
+        }),
+    },
+}));
+// Randomly fails on CI. TODO: investigate why
+describe.skip('Start Storybook Builder', () => {
+    let architect;
+    let architectHost;
+    beforeEach(async () => {
+        const registry = new schema.CoreSchemaRegistry();
+        registry.addPostTransform(schema.transforms.addUndefinedDefaults);
+        architectHost = new TestingArchitectHost();
+        architect = new Architect(architectHost, registry);
+        architectHost.addBuilder('@angular-devkit/build-angular:browser', createBuilder(() => {
+            return { success: true };
+        }));
+        architectHost.addTarget({ project: 'angular-cli', target: 'build-2' }, '@angular-devkit/build-angular:browser', {
+            outputPath: 'dist/angular-cli',
+            index: 'src/index.html',
+            main: 'src/main.ts',
+            polyfills: 'src/polyfills.ts',
+            tsConfig: 'src/tsconfig.app.json',
+            assets: ['src/favicon.ico', 'src/assets'],
+            styles: ['src/styles.css'],
+            scripts: [],
+        });
+        // This will either take a Node package name, or a path to the directory
+        // for the package.json file.
+        await architectHost.addBuilderFromPackage(join(__dirname, '../../..'));
+    });
+    beforeEach(() => {
+        buildDevStandaloneMock.mockImplementation((_options) => Promise.resolve(_options));
+    });
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+    it('should start storybook with angularBrowserTarget', async () => {
+        const run = await architect.scheduleBuilder('@storybook/angular:start-storybook', {
+            browserTarget: 'angular-cli:build-2',
+            port: 4400,
+            compodoc: false,
+        });
+        const output = await run.result;
+        await run.stop();
+        expect(output.success).toBeTruthy();
+        expect(mockRunScript).not.toHaveBeenCalledWith();
+        expect(buildDevStandaloneMock).toHaveBeenCalledWith(expect.objectContaining({
+            angularBrowserTarget: 'angular-cli:build-2',
+            angularBuilderContext: expect.any(Object),
+            ci: false,
+            configDir: '.storybook',
+            disableTelemetry: undefined,
+            host: 'localhost',
+            https: false,
+            packageJson: expect.any(Object),
+            port: 4400,
+            quiet: false,
+            smokeTest: false,
+            sslCa: undefined,
+            sslCert: undefined,
+            sslKey: undefined,
+            tsConfig: './storybook/tsconfig.ts',
+        }));
+    });
+    it('should start storybook with tsConfig', async () => {
+        const run = await architect.scheduleBuilder('@storybook/angular:start-storybook', {
+            tsConfig: 'path/to/tsConfig.json',
+            port: 4400,
+            compodoc: false,
+        });
+        const output = await run.result;
+        await run.stop();
+        expect(output.success).toBeTruthy();
+        expect(mockRunScript).not.toHaveBeenCalledWith();
+        expect(buildDevStandaloneMock).toHaveBeenCalledWith(expect.objectContaining({
+            angularBrowserTarget: null,
+            angularBuilderContext: expect.any(Object),
+            ci: false,
+            configDir: '.storybook',
+            disableTelemetry: undefined,
+            host: 'localhost',
+            https: false,
+            packageJson: expect.any(Object),
+            port: 4400,
+            quiet: false,
+            smokeTest: false,
+            sslCa: undefined,
+            sslCert: undefined,
+            sslKey: undefined,
+            tsConfig: 'path/to/tsConfig.json',
+        }));
+    });
+    it('should throw error', async () => {
+        buildDevStandaloneMock.mockRejectedValue(true);
+        const run = await architect.scheduleBuilder('@storybook/angular:start-storybook', {
+            browserTarget: 'angular-cli:build-2',
+            port: 4400,
+            compodoc: false,
+        });
+        try {
+            await run.result;
+            expect(false).toEqual('Throw expected');
+        }
+        catch (error) {
+            expect(error).toEqual('Broken build, fix the error above.\nYou may need to refresh the browser.');
+        }
+    });
+    it('should run compodoc', async () => {
+        const run = await architect.scheduleBuilder('@storybook/angular:start-storybook', {
+            browserTarget: 'angular-cli:build-2',
+        });
+        const output = await run.result;
+        await run.stop();
+        expect(output.success).toBeTruthy();
+        expect(mockRunScript).toHaveBeenCalledWith('compodoc', ['-p', './storybook/tsconfig.ts', '-d', '.', '-e', 'json'], '');
+        expect(buildDevStandaloneMock).toHaveBeenCalledWith(expect.objectContaining({
+            angularBrowserTarget: 'angular-cli:build-2',
+            angularBuilderContext: expect.any(Object),
+            ci: false,
+            disableTelemetry: undefined,
+            configDir: '.storybook',
+            host: 'localhost',
+            https: false,
+            packageJson: expect.any(Object),
+            port: 9009,
+            quiet: false,
+            smokeTest: false,
+            sslCa: undefined,
+            sslCert: undefined,
+            sslKey: undefined,
+            tsConfig: './storybook/tsconfig.ts',
+        }));
+    });
+    it('should start storybook with styles options', async () => {
+        const run = await architect.scheduleBuilder('@storybook/angular:start-storybook', {
+            tsConfig: 'path/to/tsConfig.json',
+            port: 4400,
+            compodoc: false,
+            styles: ['src/styles.css'],
+        });
+        const output = await run.result;
+        await run.stop();
+        expect(output.success).toBeTruthy();
+        expect(mockRunScript).not.toHaveBeenCalledWith();
+        expect(buildDevStandaloneMock).toHaveBeenCalledWith({
+            angularBrowserTarget: null,
+            angularBuilderContext: expect.any(Object),
+            angularBuilderOptions: { assets: [], styles: ['src/styles.css'] },
+            disableTelemetry: undefined,
+            ci: false,
+            configDir: '.storybook',
+            host: 'localhost',
+            https: false,
+            port: 4400,
+            packageJson: expect.any(Object),
+            quiet: false,
+            smokeTest: false,
+            sslCa: undefined,
+            sslCert: undefined,
+            sslKey: undefined,
+            tsConfig: 'path/to/tsConfig.json',
+        });
+    });
+});

package/dist/builders/start-storybook/schema.json

@@ -7,8 +7,7 @@
         "browserTarget": {
             "type": "string",
             "description": "Build target to be served in project-name:builder:config format. Should generally target on the builder: '@angular-devkit/build-angular:browser'. Useful for Storybook to use options (styles, assets, ...).",
-            "pattern": "^[^:\\s]+:[^:\\s]+(:[^\\s]+)?$",
-            "default": null
+            "pattern": "^[^:\\s]+:[^:\\s]+(:[^\\s]+)?$"
         },
         "debugWebpack": {
             "type": "boolean",
@@ -104,8 +103,7 @@
             "description": "Global styles to be included in the build.",
             "items": {
                 "$ref": "#/definitions/styleElement"
-            },
-            "default": ""
+            }
         },
         "stylePreprocessorOptions": {
             "description": "Options to pass to style preprocessors.",
@@ -119,8 +117,7 @@
                     }
                 }
             },
-            "additionalProperties": false,
-            "default": ""
+            "additionalProperties": false
         },
         "assets": {
             "type": "array",