@storybook/angular 0.0.0-pr-23609-sha-f47ef339

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

@@ -0,0 +1,167 @@
+{
+    "$schema": "http://json-schema.org/schema",
+    "title": "Build Storybook",
+    "description": "Serve up storybook in development mode.",
+    "type": "object",
+    "properties": {
+        "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
+        },
+        "tsConfig": {
+            "type": "string",
+            "description": "The full path for the TypeScript configuration file, relative to the current workspace."
+        },
+        "outputDir": {
+            "type": "string",
+            "description": "Directory where to store built files.",
+            "default": "storybook-static"
+        },
+        "configDir": {
+            "type": "string",
+            "description": "Directory where to load Storybook configurations from.",
+            "default": ".storybook"
+        },
+        "loglevel": {
+            "type": "string",
+            "description": "Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent].",
+            "pattern": "(silly|verbose|info|warn|silent)"
+        },
+        "enableProdMode": {
+            "type": "boolean",
+            "description": "Disable Angular's development mode, which turns off assertions and other checks within the framework.",
+            "default": true
+        },
+        "quiet": {
+            "type": "boolean",
+            "description": "Suppress verbose build output.",
+            "default": false
+        },
+        "docs": {
+            "type": "boolean",
+            "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.",
+            "default": false
+        },
+        "compodoc": {
+            "type": "boolean",
+            "description": "Execute compodoc before.",
+            "default": true
+        },
+        "compodocArgs": {
+            "type": "array",
+            "description": "Compodoc options : https://compodoc.app/guides/options.html. Options `-p` with tsconfig path and `-d` with workspace root is always given.",
+            "default": ["-e", "json"],
+            "items": {
+                "type": "string"
+            }
+        },
+        "webpackStatsJson": {
+            "type": ["boolean", "string"],
+            "description": "Write Webpack Stats JSON to disk",
+            "default": false
+        },
+        "styles": {
+            "type": "array",
+            "description": "Global styles to be included in the build.",
+            "items": {
+                "$ref": "#/definitions/styleElement"
+            },
+            "default": ""
+        },
+        "stylePreprocessorOptions": {
+            "description": "Options to pass to style preprocessors.",
+            "type": "object",
+            "properties": {
+                "includePaths": {
+                    "description": "Paths to include. Paths will be resolved to workspace root.",
+                    "type": "array",
+                    "items": {
+                        "type": "string"
+                    }
+                }
+            },
+            "additionalProperties": false,
+            "default": ""
+        },
+        "assets": {
+            "type": "array",
+            "description": "List of static application assets.",
+            "default": [],
+            "items": {
+                "$ref": "#/definitions/assetPattern"
+            }
+        }
+    },
+    "additionalProperties": false,
+    "definitions": {
+        "assetPattern": {
+            "oneOf": [
+                {
+                    "type": "object",
+                    "properties": {
+                        "followSymlinks": {
+                            "type": "boolean",
+                            "default": false,
+                            "description": "Allow glob patterns to follow symlink directories. This allows subdirectories of the symlink to be searched."
+                        },
+                        "glob": {
+                            "type": "string",
+                            "description": "The pattern to match."
+                        },
+                        "input": {
+                            "type": "string",
+                            "description": "The input directory path in which to apply 'glob'. Defaults to the project root."
+                        },
+                        "ignore": {
+                            "description": "An array of globs to ignore.",
+                            "type": "array",
+                            "items": {
+                                "type": "string"
+                            }
+                        },
+                        "output": {
+                            "type": "string",
+                            "description": "Absolute path within the output."
+                        }
+                    },
+                    "additionalProperties": false,
+                    "required": ["glob", "input", "output"]
+                },
+                {
+                    "type": "string"
+                }
+            ]
+        },
+        "styleElement": {
+            "oneOf": [
+                {
+                    "type": "object",
+                    "properties": {
+                        "input": {
+                            "type": "string",
+                            "description": "The file to include."
+                        },
+                        "bundleName": {
+                            "type": "string",
+                            "pattern": "^[\\w\\-.]*$",
+                            "description": "The bundle name for this extra entry point."
+                        },
+                        "inject": {
+                            "type": "boolean",
+                            "description": "If the bundle will be referenced in the HTML file.",
+                            "default": true
+                        }
+                    },
+                    "additionalProperties": false,
+                    "required": ["input"]
+                },
+                {
+                    "type": "string",
+                    "description": "The file to include."
+                }
+            ]
+        }
+    }
+}

package/dist/builders/builders.json

@@ -0,0 +1,14 @@
+{
+    "builders": {
+        "build-storybook": {
+            "implementation": "./build-storybook",
+            "schema": "./build-storybook/schema.json",
+            "description": "Build storybook"
+        },
+        "start-storybook": {
+            "implementation": "./start-storybook",
+            "schema": "./start-storybook/schema.json",
+            "description": "Start storybook"
+        }
+    }
+}

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

@@ -0,0 +1,93 @@
+"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 cli_1 = require("@storybook/cli");
+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");
+(0, telemetry_1.addToGlobalContext)('cliVersion', cli_1.versions.storybook);
+const commandBuilder = (options, context) => {
+    const builder = (0, rxjs_1.from)(setup(options, context)).pipe((0, operators_1.switchMap)(({ tsConfig }) => {
+        const runCompodoc$ = options.compodoc
+            ? (0, run_compodoc_1.runCompodoc)({
+                compodocArgs: [...options.compodocArgs, ...(options.quiet ? ['--silent'] : [])],
+                tsconfig: 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, cli_1.getEnvConfig)(options, {
+            port: 'SBCONFIG_PORT',
+            host: 'SBCONFIG_HOSTNAME',
+            staticDir: 'SBCONFIG_STATIC_DIR',
+            configDir: 'SBCONFIG_CONFIG_DIR',
+            ci: 'CI',
+        });
+        // eslint-disable-next-line no-param-reassign
+        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, } = 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 } : {}),
+            },
+            tsConfig,
+            initialPath,
+            open,
+        };
+        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));
+    }
+    return {
+        tsConfig: options.tsConfig ??
+            (0, find_up_1.sync)('tsconfig.json', { cwd: options.configDir }) ??
+            browserOptions.tsConfig,
+    };
+}
+function runInstance(options) {
+    return new rxjs_1.Observable((observer) => {
+        // This Observable intentionally never complete, leaving the process running ;)
+        (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));
+        });
+    });
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,215 @@
+"use strict";
+/*
+ * @jest-environment node
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const architect_1 = require("@angular-devkit/architect");
+const testing_1 = require("@angular-devkit/architect/testing");
+const core_1 = require("@angular-devkit/core");
+const path = __importStar(require("path"));
+const buildDevStandaloneMock = jest.fn();
+const buildStaticStandaloneMock = jest.fn();
+const buildMock = {
+    buildDevStandalone: buildDevStandaloneMock,
+    buildStaticStandalone: buildStaticStandaloneMock,
+    withTelemetry: (_, __, fn) => fn(),
+};
+jest.doMock('@storybook/core-server', () => buildMock);
+jest.doMock('find-up', () => ({ sync: () => './storybook/tsconfig.ts' }));
+const mockRunScript = jest.fn();
+jest.mock('@storybook/cli', () => ({
+    getEnvConfig: (options) => options,
+    versions: {
+        storybook: 'x.x.x',
+    },
+    JsPackageManagerFactory: {
+        getPackageManager: () => ({
+            runPackageCommand: mockRunScript,
+        }),
+    },
+}));
+// Randomly fails on CI. TODO: investigate why
+// eslint-disable-next-line jest/no-disabled-tests
+describe.skip('Start Storybook Builder', () => {
+    let architect;
+    let architectHost;
+    beforeEach(async () => {
+        const registry = new core_1.schema.CoreSchemaRegistry();
+        registry.addPostTransform(core_1.schema.transforms.addUndefinedDefaults);
+        architectHost = new testing_1.TestingArchitectHost();
+        architect = new architect_1.Architect(architectHost, registry);
+        architectHost.addBuilder('@angular-devkit/build-angular:browser', (0, architect_1.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(() => {
+        buildDevStandaloneMock.mockImplementation((_options) => Promise.resolve(_options));
+    });
+    afterEach(() => {
+        jest.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) {
+            // eslint-disable-next-line jest/no-try-expect, jest/no-conditional-expect
+            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',
+        });
+    });
+});