@storybook/angular 8.0.0-alpha.8 → 8.0.0-beta.0

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

@@ -15,7 +15,7 @@ export type StorybookBuilderOptions = JsonObject & {
     stylePreprocessorOptions?: StylePreprocessorOptions;
     assets?: AssetPattern[];
     sourceMap?: SourceMapUnion;
-} & Pick<CLIOptions, 'outputDir' | 'configDir' | 'loglevel' | 'quiet' | 'webpackStatsJson' | 'disableTelemetry' | 'debugWebpack' | 'previewUrl'>;
+} & Pick<CLIOptions, 'outputDir' | 'configDir' | 'loglevel' | 'quiet' | 'test' | 'webpackStatsJson' | 'disableTelemetry' | 'debugWebpack' | 'previewUrl'>;
 export type StorybookBuilderOutput = JsonObject & BuilderOutput & {
     [key: string]: any;
 };
@@ -31,5 +31,5 @@ declare const _default: import("@angular-devkit/architect/src/internal").Builder
     stylePreprocessorOptions?: StylePreprocessorOptions | undefined;
     assets?: AssetPattern[] | undefined;
     sourceMap?: SourceMapUnion | undefined;
-} & Pick<CLIOptions, "webpackStatsJson" | "outputDir" | "configDir" | "loglevel" | "quiet" | "disableTelemetry" | "debugWebpack" | "previewUrl">>;
+} & Pick<CLIOptions, "webpackStatsJson" | "outputDir" | "configDir" | "loglevel" | "quiet" | "test" | "disableTelemetry" | "debugWebpack" | "previewUrl">>;
 export default _default;

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

@@ -5,12 +5,12 @@ 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 core_common_1 = require("@storybook/core-common");
 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);
+(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 runCompodoc$ = options.compodoc
@@ -18,18 +18,19 @@ const commandBuilder = (options, context) => {
             : (0, rxjs_1.of)({});
         return runCompodoc$.pipe((0, operators_1.mapTo)({ tsConfig }));
     }), (0, operators_1.map)(({ tsConfig }) => {
-        (0, cli_1.getEnvConfig)(options, {
+        (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, outputDir, quiet, enableProdMode = true, webpackStatsJson, debugWebpack, disableTelemetry, assets, previewUrl, sourceMap = false, } = options;
+        const { browserTarget, stylePreprocessorOptions, styles, configDir, docs, loglevel, test, outputDir, quiet, enableProdMode = true, webpackStatsJson, 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,

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

@@ -40,7 +40,7 @@ const buildMock = {
     withTelemetry: (name, options, fn) => fn(),
 };
 vitest_1.vi.doMock('@storybook/core-server', () => buildMock);
-vitest_1.vi.doMock('@storybook/cli', () => ({
+vitest_1.vi.doMock('@storybook/core-common', () => ({
     JsPackageManagerFactory: {
         getPackageManager: () => ({
             runPackageCommand: mockRunScript,
@@ -54,7 +54,6 @@ vitest_1.vi.doMock('@storybook/cli', () => ({
 vitest_1.vi.doMock('find-up', () => ({ sync: () => './storybook/tsconfig.ts' }));
 const mockRunScript = vitest_1.vi.fn();
 // Randomly fails on CI. TODO: investigate why
-// eslint-disable-next-line jest/no-disabled-tests
 vitest_1.describe.skip('Build Storybook Builder', () => {
     let architect;
     let architectHost;
@@ -83,10 +82,10 @@ vitest_1.describe.skip('Build Storybook Builder', () => {
     (0, vitest_1.beforeEach)(() => {
         buildStaticStandaloneMock.mockImplementation((_options) => Promise.resolve(_options));
     });
-    afterEach(() => {
+    (0, vitest_1.afterEach)(() => {
         vitest_1.vi.clearAllMocks();
     });
-    it('should start storybook with angularBrowserTarget', async () => {
+    (0, vitest_1.it)('should start storybook with angularBrowserTarget', async () => {
         const run = await architect.scheduleBuilder('@storybook/angular:build-storybook', {
             browserTarget: 'angular-cli:build-2',
             compodoc: false,
@@ -109,7 +108,7 @@ vitest_1.describe.skip('Build Storybook Builder', () => {
             webpackStatsJson: false,
         }));
     });
-    it('should start storybook with tsConfig', async () => {
+    (0, vitest_1.it)('should start storybook with tsConfig', async () => {
         const run = await architect.scheduleBuilder('@storybook/angular:build-storybook', {
             tsConfig: 'path/to/tsConfig.json',
             compodoc: false,
@@ -132,7 +131,7 @@ vitest_1.describe.skip('Build Storybook Builder', () => {
             webpackStatsJson: false,
         }));
     });
-    it('should build storybook with webpack stats.json', async () => {
+    (0, vitest_1.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,
@@ -155,7 +154,7 @@ vitest_1.describe.skip('Build Storybook Builder', () => {
             webpackStatsJson: true,
         }));
     });
-    it('should throw error', async () => {
+    (0, vitest_1.it)('should throw error', async () => {
         buildStaticStandaloneMock.mockRejectedValue(true);
         const run = await architect.scheduleBuilder('@storybook/angular:build-storybook', {
             browserTarget: 'angular-cli:build-2',
@@ -166,11 +165,10 @@ vitest_1.describe.skip('Build Storybook Builder', () => {
             (0, vitest_1.expect)(false).toEqual('Throw expected');
         }
         catch (error) {
-            // eslint-disable-next-line jest/no-try-expect, jest/no-conditional-expect
             (0, vitest_1.expect)(error).toEqual('Broken build, fix the error above.\nYou may need to refresh the browser.');
         }
     });
-    it('should run compodoc', async () => {
+    (0, vitest_1.it)('should run compodoc', async () => {
         const run = await architect.scheduleBuilder('@storybook/angular:build-storybook', {
             browserTarget: 'angular-cli:build-2',
         });
@@ -191,7 +189,7 @@ vitest_1.describe.skip('Build Storybook Builder', () => {
             webpackStatsJson: false,
         }));
     });
-    it('should start storybook with styles options', async () => {
+    (0, vitest_1.it)('should start storybook with styles options', async () => {
         const run = await architect.scheduleBuilder('@storybook/angular:build-storybook', {
             tsConfig: 'path/to/tsConfig.json',
             compodoc: false,

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

@@ -5,12 +5,12 @@ 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 core_common_1 = require("@storybook/core-common");
 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);
+(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 runCompodoc$ = options.compodoc
@@ -21,14 +21,13 @@ const commandBuilder = (options, context) => {
             : (0, rxjs_1.of)({});
         return runCompodoc$.pipe((0, operators_1.mapTo)({ tsConfig }));
     }), (0, operators_1.map)(({ tsConfig }) => {
-        (0, cli_1.getEnvConfig)(options, {
+        (0, core_common_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, debugWebpack, loglevel, webpackStatsJson, previewUrl, sourceMap = false, } = options;
         const standaloneOptions = {

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

@@ -42,7 +42,7 @@ const buildMock = {
 vitest_1.vi.doMock('@storybook/core-server', () => buildMock);
 vitest_1.vi.doMock('find-up', () => ({ sync: () => './storybook/tsconfig.ts' }));
 const mockRunScript = vitest_1.vi.fn();
-vitest_1.vi.mock('@storybook/cli', () => ({
+vitest_1.vi.mock('@storybook/core-common', () => ({
     getEnvConfig: (options) => options,
     versions: {
         storybook: 'x.x.x',
@@ -54,7 +54,6 @@ vitest_1.vi.mock('@storybook/cli', () => ({
     },
 }));
 // Randomly fails on CI. TODO: investigate why
-// eslint-disable-next-line jest/no-disabled-tests
 vitest_1.describe.skip('Start Storybook Builder', () => {
     let architect;
     let architectHost;
@@ -83,7 +82,7 @@ vitest_1.describe.skip('Start Storybook Builder', () => {
     (0, vitest_1.beforeEach)(() => {
         buildDevStandaloneMock.mockImplementation((_options) => Promise.resolve(_options));
     });
-    afterEach(() => {
+    (0, vitest_1.afterEach)(() => {
         vitest_1.vi.clearAllMocks();
     });
     (0, vitest_1.it)('should start storybook with angularBrowserTarget', async () => {
@@ -154,7 +153,6 @@ vitest_1.describe.skip('Start Storybook Builder', () => {
             (0, vitest_1.expect)(false).toEqual('Throw expected');
         }
         catch (error) {
-            // eslint-disable-next-line jest/no-try-expect, jest/no-conditional-expect
             (0, vitest_1.expect)(error).toEqual('Broken build, fix the error above.\nYou may need to refresh the browser.');
         }
     });

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

@@ -26,7 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.runCompodoc = void 0;
 const rxjs_1 = require("rxjs");
 const path = __importStar(require("path"));
-const cli_1 = require("@storybook/cli");
+const core_common_1 = require("@storybook/core-common");
 const hasTsConfigArg = (args) => args.indexOf('-p') !== -1;
 const hasOutputArg = (args) => args.indexOf('-d') !== -1 || args.indexOf('--output') !== -1;
 // path.relative is necessary to workaround a compodoc issue with
@@ -42,7 +42,7 @@ const runCompodoc = ({ compodocArgs, tsconfig }, context) => {
             ...(hasOutputArg(compodocArgs) ? [] : ['-d', `${context.workspaceRoot || '.'}`]),
             ...compodocArgs,
         ];
-        const packageManager = cli_1.JsPackageManagerFactory.getPackageManager();
+        const packageManager = core_common_1.JsPackageManagerFactory.getPackageManager();
         try {
             const stdout = packageManager.runPackageCommandSync('compodoc', finalCompodocArgs, context.workspaceRoot, 'inherit');
             context.logger.info(stdout);

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

@@ -5,7 +5,7 @@ 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/cli', () => ({
+vitest_1.vi.mock('@storybook/core-common', () => ({
     JsPackageManagerFactory: {
         getPackageManager: () => ({
             runPackageCommandSync: mockRunScript,

package/dist/client/angular-beta/AbstractRenderer.d.ts

@@ -16,16 +16,10 @@ export declare abstract class AbstractRenderer {
      * Wait and destroy the platform
      */
     static resetApplications(domNode?: HTMLElement): void;
-    /**
-     * Reset compiled components because we often want to compile the same component with
-     * more than one NgModule.
-     */
-    protected static resetCompiledComponents: () => Promise<void>;
     protected previousStoryRenderInfo: Map<HTMLElement, StoryRenderInfo>;
     protected storyProps$: Subject<ICollection | undefined>;
     constructor();
     protected abstract beforeFullRender(domNode?: HTMLElement): Promise<void>;
-    protected abstract afterFullRender(): Promise<void>;
     /**
      * Bootstrap main angular module with main component or send only new `props` with storyProps$
      *

package/dist/client/angular-beta/AbstractRenderer.js

@@ -1,28 +1,4 @@
 "use strict";
-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;
-};
-var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AbstractRenderer = exports.STORY_UID_ATTRIBUTE = void 0;
 const core_1 = require("@angular/core");
@@ -31,8 +7,8 @@ const rxjs_1 = require("rxjs");
 const telejson_1 = require("telejson");
 const StorybookModule_1 = require("./StorybookModule");
 const StorybookProvider_1 = require("./StorybookProvider");
-const StorybookWrapperComponent_1 = require("./StorybookWrapperComponent");
 const PropertyExtractor_1 = require("./utils/PropertyExtractor");
+const BootstrapQueue_1 = require("./utils/BootstrapQueue");
 const applicationRefs = new Map();
 /**
  * Attribute name for the story UID that may be written to the targetDOMNode.
@@ -46,7 +22,6 @@ class AbstractRenderer {
      * Wait and destroy the platform
      */
     static resetApplications(domNode) {
-        StorybookWrapperComponent_1.componentNgModules.clear();
         applicationRefs.forEach((appRef, appDOMNode) => {
             if (!appRef.destroyed && (!domNode || appDOMNode === domNode)) {
                 appRef.destroy();
@@ -61,7 +36,6 @@ class AbstractRenderer {
                 (0, core_1.enableProdMode)();
             }
             catch (e) {
-                // eslint-disable-next-line no-console
                 console.debug(e);
             }
         }
@@ -109,16 +83,17 @@ class AbstractRenderer {
             targetSelector: componentSelector,
             analyzedMetadata,
         });
-        const applicationRef = await (0, platform_browser_1.bootstrapApplication)(application, {
-            ...storyFnAngular.applicationConfig,
-            providers: [
-                (0, StorybookProvider_1.storyPropsProvider)(newStoryProps$),
-                ...analyzedMetadata.applicationProviders,
-                ...(storyFnAngular.applicationConfig?.providers ?? []),
-            ],
+        const applicationRef = await (0, BootstrapQueue_1.queueBootstrapping)(() => {
+            return (0, platform_browser_1.bootstrapApplication)(application, {
+                ...storyFnAngular.applicationConfig,
+                providers: [
+                    (0, StorybookProvider_1.storyPropsProvider)(newStoryProps$),
+                    ...analyzedMetadata.applicationProviders,
+                    ...(storyFnAngular.applicationConfig?.providers ?? []),
+                ],
+            });
         });
         applicationRefs.set(targetDOMNode, applicationRef);
-        await this.afterFullRender();
     }
     /**
      * Only ASCII alphanumerics can be used as HTML tag name.
@@ -141,7 +116,6 @@ class AbstractRenderer {
      * Adds DOM element that angular will use as bootstrap component.
      */
     initAngularRootElement(targetDOMNode, targetSelector) {
-        // eslint-disable-next-line no-param-reassign
         targetDOMNode.innerHTML = '';
         targetDOMNode.appendChild(document.createElement(targetSelector));
     }
@@ -149,7 +123,7 @@ class AbstractRenderer {
         const previousStoryRenderInfo = this.previousStoryRenderInfo.get(targetDOMNode);
         const currentStoryRender = {
             storyFnAngular,
-            moduleMetadataSnapshot: (0, telejson_1.stringify)(moduleMetadata),
+            moduleMetadataSnapshot: (0, telejson_1.stringify)(moduleMetadata, { allowFunction: false }),
         };
         this.previousStoryRenderInfo.set(targetDOMNode, currentStoryRender);
         if (
@@ -171,25 +145,3 @@ class AbstractRenderer {
     }
 }
 exports.AbstractRenderer = AbstractRenderer;
-_a = AbstractRenderer;
-/**
- * Reset compiled components because we often want to compile the same component with
- * more than one NgModule.
- */
-AbstractRenderer.resetCompiledComponents = async () => {
-    try {
-        // Clear global Angular component cache in order to be able to re-render the same component across multiple stories
-        //
-        // References:
-        // https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/webpack/plugins/hmr/hmr-accept.ts#L50
-        // https://github.com/angular/angular/blob/2ebe2bcb2fe19bf672316b05f15241fd7fd40803/packages/core/src/render3/jit/module.ts#L377-L384
-        const { ɵresetCompiledComponents } = await Promise.resolve().then(() => __importStar(require('@angular/core')));
-        ɵresetCompiledComponents();
-    }
-    catch (e) {
-        /**
-         * noop catch
-         * This means angular removed or modified ɵresetCompiledComponents
-         */
-    }
-};

package/dist/client/angular-beta/CanvasRenderer.d.ts

@@ -9,5 +9,4 @@ export declare class CanvasRenderer extends AbstractRenderer {
         targetDOMNode: HTMLElement;
     }): Promise<void>;
     beforeFullRender(): Promise<void>;
-    afterFullRender(): Promise<void>;
 }

package/dist/client/angular-beta/CanvasRenderer.js

@@ -9,8 +9,5 @@ class CanvasRenderer extends AbstractRenderer_1.AbstractRenderer {
     async beforeFullRender() {
         CanvasRenderer.resetApplications();
     }
-    async afterFullRender() {
-        await AbstractRenderer_1.AbstractRenderer.resetCompiledComponents();
-    }
 }
 exports.CanvasRenderer = CanvasRenderer;