@storybook/angular 7.0.0-beta.29 → 7.0.0-beta.30

package/README.md

@@ -1,5 +1,11 @@
 # Storybook for Angular
 
+- [Storybook for Angular](#storybook-for-angular)
+  - [Getting Started](#getting-started)
+    - [Setup Compodoc](#setup-compodoc)
+  - [Support for multi-project workspace](#support-for-multi-project-workspace)
+  - [Run Storybook](#run-storybook)
+
 Storybook for Angular is a UI development environment for your Angular components.
 With it, you can visualize different states of your UI components and develop them interactively.
 
@@ -15,6 +21,66 @@ cd my-angular-app
 npx storybook init
 ```
 
+### Setup Compodoc
+
+When installing, you will be given the option to set up Compodoc, which is a tool for creating documentation for Angular projects.
+
+You can include JSDoc comments above components, directives, and other parts of your Angular code to include documentation for those elements. Compodoc uses these comments to generate documentation for your application. In Storybook, it is useful to add explanatory comments above @Inputs and @Outputs, since these are the main elements that Storybook displays in its user interface. The @Inputs and @Outputs are the elements that you can interact with in Storybook, such as controls.
+
+## Support for multi-project workspace
+
+Storybook supports Angular multi-project workspace. You can setup Storybook for each project in the workspace. When running `npx storybook init` you will be asked for which project Storybook should be set up. Essentially, during initialization, the `angular.json` will be edited to add the Storybook configuration for the selected project. The configuration looks approximately like this:
+
+```json
+// angular.json
+{
+  ...
+  "projects": {
+    ...
+    "your-project": {
+      ...
+      "architect": {
+        ...
+        "storybook": {
+          "builder": "@storybook/angular:start-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "browserTarget": "your-project:build",
+            "compodoc": false,
+            "port": 6006
+          }
+        },
+        "build-storybook": {
+          "builder": "@storybook/angular:build-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "browserTarget": "your-project:build",
+            "compodoc": false,
+            "outputDir": "dist/storybook/your-project"
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+## Run Storybook
+
+To run Storybook for a particular project, please run:
+
+```sh
+ng run your-project:storybook
+```
+
+To build Storybook, run:
+
+```sh
+ng run your-project:build-storybook
+```
+
+You will find the output in `dist/storybook/your-project`.
+
 For more information visit: [storybook.js.org](https://storybook.js.org)
 
 ---

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

@@ -1,16 +1,17 @@
 import { BuilderOutput } from '@angular-devkit/architect';
 import { JsonObject } from '@angular-devkit/core';
 import { CLIOptions } from '@storybook/types';
-import { ExtraEntryPoint, StylePreprocessorOptions } from '@angular-devkit/build-angular';
+import { StylePreprocessorOptions } from '@angular-devkit/build-angular';
+import { StyleElement } from '@angular-devkit/build-angular/src/builders/browser/schema';
 export type StorybookBuilderOptions = JsonObject & {
     browserTarget?: string | null;
     tsConfig?: string;
     docsMode: boolean;
     compodoc: boolean;
     compodocArgs: string[];
-    styles?: ExtraEntryPoint[];
+    styles?: StyleElement[];
     stylePreprocessorOptions?: StylePreprocessorOptions;
-} & Pick<CLIOptions, 'outputDir' | 'configDir' | 'loglevel' | 'quiet' | 'webpackStatsJson'>;
+} & Pick<CLIOptions, 'outputDir' | 'configDir' | 'loglevel' | 'quiet' | 'webpackStatsJson' | 'disableTelemetry'>;
 export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
 declare const _default: import("@angular-devkit/architect/src/internal").Builder<any>;
 export default _default;

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

@@ -16,7 +16,7 @@ function commandBuilder(options, context) {
             : (0, rxjs_1.of)({});
         return runCompodoc$.pipe((0, operators_1.mapTo)({ tsConfig }));
     }), (0, operators_1.map)(({ tsConfig }) => {
-        const { browserTarget, stylePreprocessorOptions, styles, configDir, docsMode, loglevel, outputDir, quiet, webpackStatsJson, } = options;
+        const { browserTarget, stylePreprocessorOptions, styles, configDir, docsMode, loglevel, outputDir, quiet, webpackStatsJson, disableTelemetry, } = options;
         const standaloneOptions = {
             packageJson: (0, read_pkg_up_1.sync)({ cwd: __dirname }).packageJson,
             configDir,
@@ -24,6 +24,7 @@ function commandBuilder(options, context) {
             loglevel,
             outputDir,
             quiet,
+            disableTelemetry,
             angularBrowserTarget: browserTarget,
             angularBuilderContext: context,
             angularBuilderOptions: {
@@ -52,5 +53,8 @@ async function setup(options, context) {
     };
 }
 function runInstance(options) {
-    return (0, rxjs_1.from)((0, core_server_1.buildStaticStandalone)(options)).pipe((0, operators_1.catchError)((error) => (0, rxjs_1.throwError)((0, build_standalone_errors_handler_1.buildStandaloneErrorHandler)(error))));
+    return (0, rxjs_1.from)((0, core_server_1.withTelemetry)('build', {
+        cliOptions: options,
+        presetOptions: { ...options, corePresets: [], overridePresets: [] },
+    }, () => (0, core_server_1.buildStaticStandalone)(options))).pipe((0, operators_1.catchError)((error) => (0, rxjs_1.throwError)((0, build_standalone_errors_handler_1.buildStandaloneErrorHandler)(error))));
 }

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

@@ -61,7 +61,7 @@
             "type": "array",
             "description": "Global styles to be included in the build.",
             "items": {
-                "$ref": "#/definitions/extraEntryPoint"
+                "$ref": "#/definitions/styleElement"
             },
             "default": ""
         },
@@ -83,7 +83,7 @@
     },
     "additionalProperties": false,
     "definitions": {
-        "extraEntryPoint": {
+        "styleElement": {
             "oneOf": [
                 {
                     "type": "object",

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

@@ -1,16 +1,17 @@
 import { BuilderOutput } from '@angular-devkit/architect';
 import { JsonObject } from '@angular-devkit/core';
-import { ExtraEntryPoint, StylePreprocessorOptions } from '@angular-devkit/build-angular';
+import { StylePreprocessorOptions } from '@angular-devkit/build-angular';
 import { CLIOptions } from '@storybook/types';
+import { StyleElement } from '@angular-devkit/build-angular/src/builders/browser/schema';
 export type StorybookBuilderOptions = JsonObject & {
     browserTarget?: string | null;
     tsConfig?: string;
     docsMode: boolean;
     compodoc: boolean;
     compodocArgs: string[];
-    styles?: ExtraEntryPoint[];
+    styles?: StyleElement[];
     stylePreprocessorOptions?: StylePreprocessorOptions;
-} & Pick<CLIOptions, 'port' | 'host' | 'configDir' | 'https' | 'sslCa' | 'sslCert' | 'sslKey' | 'smokeTest' | 'ci' | 'quiet'>;
+} & Pick<CLIOptions, 'port' | 'host' | 'configDir' | 'https' | 'sslCa' | 'sslCert' | 'sslKey' | 'smokeTest' | 'ci' | 'quiet' | 'disableTelemetry'>;
 export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
 declare const _default: import("@angular-devkit/architect/src/internal").Builder<any>;
 export default _default;

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

@@ -16,7 +16,7 @@ function commandBuilder(options, context) {
             : (0, rxjs_1.of)({});
         return runCompodoc$.pipe((0, operators_1.mapTo)({ tsConfig }));
     }), (0, operators_1.map)(({ tsConfig }) => {
-        const { browserTarget, stylePreprocessorOptions, styles, ci, configDir, docsMode, host, https, port, quiet, smokeTest, sslCa, sslCert, sslKey, } = options;
+        const { browserTarget, stylePreprocessorOptions, styles, ci, configDir, docsMode, host, https, port, quiet, smokeTest, sslCa, sslCert, sslKey, disableTelemetry, } = options;
         const standaloneOptions = {
             packageJson: (0, read_pkg_up_1.sync)({ cwd: __dirname }).packageJson,
             ci,
@@ -30,6 +30,7 @@ function commandBuilder(options, context) {
             sslCa,
             sslCert,
             sslKey,
+            disableTelemetry,
             angularBrowserTarget: browserTarget,
             angularBuilderContext: context,
             angularBuilderOptions: {
@@ -59,6 +60,9 @@ async function setup(options, context) {
 function runInstance(options) {
     return new rxjs_1.Observable((observer) => {
         // This Observable intentionally never complete, leaving the process running ;)
-        (0, core_server_1.buildDevStandalone)(options).then(({ port }) => observer.next(port), (error) => observer.error((0, build_standalone_errors_handler_1.buildStandaloneErrorHandler)(error)));
+        (0, core_server_1.withTelemetry)('dev', {
+            cliOptions: options,
+            presetOptions: { ...options, corePresets: [], overridePresets: [] },
+        }, () => (0, core_server_1.buildDevStandalone)(options).then(({ port }) => observer.next(port), (error) => observer.error((0, build_standalone_errors_handler_1.buildStandaloneErrorHandler)(error))));
     });
 }

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

@@ -83,7 +83,7 @@
             "type": "array",
             "description": "Global styles to be included in the build.",
             "items": {
-                "$ref": "#/definitions/extraEntryPoint"
+                "$ref": "#/definitions/styleElement"
             },
             "default": ""
         },
@@ -105,7 +105,7 @@
     },
     "additionalProperties": false,
     "definitions": {
-        "extraEntryPoint": {
+        "styleElement": {
             "oneOf": [
                 {
                     "type": "object",

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

@@ -24,9 +24,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.runCompodoc = void 0;
-const child_process_1 = require("child_process");
 const rxjs_1 = require("rxjs");
 const path = __importStar(require("path"));
+const cli_1 = require("@storybook/cli");
 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
@@ -38,36 +38,20 @@ const runCompodoc = ({ compodocArgs, tsconfig }, context) => {
     return new rxjs_1.Observable((observer) => {
         const tsConfigPath = toRelativePath(tsconfig);
         const finalCompodocArgs = [
-            'compodoc',
-            // Default options
             ...(hasTsConfigArg(compodocArgs) ? [] : ['-p', tsConfigPath]),
-            ...(hasOutputArg(compodocArgs) ? [] : ['-d', `${context.workspaceRoot}`]),
+            ...(hasOutputArg(compodocArgs) ? [] : ['-d', `${context.workspaceRoot || '.'}`]),
             ...compodocArgs,
         ];
+        const packageManager = cli_1.JsPackageManagerFactory.getPackageManager();
         try {
-            context.logger.info(finalCompodocArgs.join(' '));
-            const child = (0, child_process_1.spawn)('npx', finalCompodocArgs, {
-                cwd: context.workspaceRoot,
-                shell: true,
-            });
-            child.stdout.on('data', (data) => {
-                context.logger.info(data.toString());
-            });
-            child.stderr.on('data', (data) => {
-                context.logger.error(data.toString());
-            });
-            child.on('close', (code) => {
-                if (code === 0) {
-                    observer.next();
-                    observer.complete();
-                }
-                else {
-                    observer.error();
-                }
-            });
+            const stdout = packageManager.runScript('compodoc', finalCompodocArgs, context.workspaceRoot);
+            context.logger.info(stdout);
+            observer.next();
+            observer.complete();
         }
-        catch (error) {
-            observer.error(error);
+        catch (e) {
+            context.logger.error(e);
+            observer.error();
         }
     });
 };

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

@@ -1,6 +1,6 @@
 import { BuilderContext } from '@angular-devkit/architect';
 import { LoadOptions, CLIOptions, BuilderOptions } from '@storybook/types';
-export type StandaloneOptions = Partial<CLIOptions & LoadOptions & BuilderOptions & {
+export type StandaloneOptions = CLIOptions & LoadOptions & BuilderOptions & {
     mode?: 'static' | 'dev';
     angularBrowserTarget?: string | null;
     angularBuilderOptions?: Record<string, any> & {
@@ -9,4 +9,4 @@ export type StandaloneOptions = Partial<CLIOptions & LoadOptions & BuilderOption
     };
     angularBuilderContext?: BuilderContext | null;
     tsConfig?: string;
-}>;
+};

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

@@ -9,7 +9,7 @@ export declare abstract class AbstractRenderer {
     /**
      * Wait and destroy the platform
      */
-    static resetPlatformBrowserDynamic(): Promise<void>;
+    static resetApplications(): void;
     /**
      * Reset compiled components because we often want to compile the same component with
      * more than one NgModule.

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

@@ -26,36 +26,23 @@ var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AbstractRenderer = void 0;
 const core_1 = require("@angular/core");
-const platform_browser_dynamic_1 = require("@angular/platform-browser-dynamic");
+const platform_browser_1 = require("@angular/platform-browser");
 const rxjs_1 = require("rxjs");
 const telejson_1 = require("telejson");
 const StorybookModule_1 = require("./StorybookModule");
-// platform must be init only if render is called at least once
-let platformRef;
-function getPlatform(newPlatform) {
-    if (!platformRef || newPlatform) {
-        platformRef = (0, platform_browser_dynamic_1.platformBrowserDynamic)();
-    }
-    return platformRef;
-}
+const StorybookProvider_1 = require("./StorybookProvider");
+const StorybookWrapperComponent_1 = require("./StorybookWrapperComponent");
+const applicationRefs = new Set();
 class AbstractRenderer {
     /**
      * Wait and destroy the platform
      */
-    static resetPlatformBrowserDynamic() {
-        return new Promise((resolve) => {
-            if (platformRef && !platformRef.destroyed) {
-                platformRef.onDestroy(async () => {
-                    resolve();
-                });
-                // Destroys the current Angular platform and all Angular applications on the page.
-                // So call each angular ngOnDestroy and avoid memory leaks
-                platformRef.destroy();
-                return;
+    static resetApplications() {
+        StorybookWrapperComponent_1.componentNgModules.clear();
+        applicationRefs.forEach((appRef) => {
+            if (!appRef.destroyed) {
+                appRef.destroy();
             }
-            resolve();
-        }).then(() => {
-            getPlatform(true);
         });
     }
     constructor(storyId) {
@@ -84,23 +71,27 @@ class AbstractRenderer {
     async render({ storyFnAngular, forced, parameters, component, targetDOMNode, }) {
         const targetSelector = `${this.generateTargetSelectorFromStoryId()}`;
         const newStoryProps$ = new rxjs_1.BehaviorSubject(storyFnAngular.props);
-        const moduleMetadata = (0, StorybookModule_1.getStorybookModuleMetadata)({ storyFnAngular, component, targetSelector }, newStoryProps$);
         if (!this.fullRendererRequired({
             storyFnAngular,
-            moduleMetadata,
+            moduleMetadata: {
+                ...storyFnAngular.moduleMetadata,
+            },
             forced,
         })) {
             this.storyProps$.next(storyFnAngular.props);
             return;
         }
-        await this.beforeFullRender();
         // Complete last BehaviorSubject and set a new one for the current module
         if (this.storyProps$) {
             this.storyProps$.complete();
         }
         this.storyProps$ = newStoryProps$;
         this.initAngularRootElement(targetDOMNode, targetSelector);
-        await getPlatform().bootstrapModule((0, StorybookModule_1.createStorybookModule)(moduleMetadata), parameters.bootstrapModuleOptions ?? undefined);
+        const application = (0, StorybookModule_1.getApplication)({ storyFnAngular, component, targetSelector });
+        const applicationRef = await (0, platform_browser_1.bootstrapApplication)(application, {
+            providers: [(0, StorybookProvider_1.storyPropsProvider)(newStoryProps$)],
+        });
+        applicationRefs.add(applicationRef);
         await this.afterFullRender();
     }
     /**

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

@@ -7,7 +7,7 @@ class CanvasRenderer extends AbstractRenderer_1.AbstractRenderer {
         await super.render(options);
     }
     async beforeFullRender() {
-        await CanvasRenderer.resetPlatformBrowserDynamic();
+        CanvasRenderer.resetApplications();
     }
     async afterFullRender() {
         await AbstractRenderer_1.AbstractRenderer.resetCompiledComponents();

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

@@ -18,7 +18,7 @@ class DocsRenderer extends AbstractRenderer_1.AbstractRenderer {
          *
          */
         channel.once(core_events_1.STORY_CHANGED, async () => {
-            await DocsRenderer.resetPlatformBrowserDynamic();
+            await DocsRenderer.resetApplications();
         });
         /**
          * Destroy and recreate the PlatformBrowserDynamic of angular
@@ -26,11 +26,13 @@ class DocsRenderer extends AbstractRenderer_1.AbstractRenderer {
          * for previous component
          */
         channel.once(core_events_1.DOCS_RENDERED, async () => {
-            await DocsRenderer.resetPlatformBrowserDynamic();
+            await DocsRenderer.resetApplications();
         });
         await super.render({ ...options, forced: false });
     }
-    async beforeFullRender() { }
+    async beforeFullRender() {
+        DocsRenderer.resetApplications();
+    }
     async afterFullRender() {
         await AbstractRenderer_1.AbstractRenderer.resetCompiledComponents();
     }

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

@@ -18,7 +18,7 @@ class RendererFactory {
         const renderType = (0, exports.getRenderType)(targetDOMNode);
         // keep only instances of the same type
         if (this.lastRenderType && this.lastRenderType !== renderType) {
-            await AbstractRenderer_1.AbstractRenderer.resetPlatformBrowserDynamic();
+            await AbstractRenderer_1.AbstractRenderer.resetApplications();
             clearRootHTMLElement(renderType);
             this.rendererMap.clear();
         }

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

@@ -1,9 +1,6 @@
-import { Type, NgModule } from '@angular/core';
-import { Subject } from 'rxjs';
-import { ICollection, StoryFnAngularReturnType } from '../types';
-export declare const getStorybookModuleMetadata: ({ storyFnAngular, component, targetSelector, }: {
+import { StoryFnAngularReturnType } from '../types';
+export declare const getApplication: ({ storyFnAngular, component, targetSelector, }: {
     storyFnAngular: StoryFnAngularReturnType;
     component?: any;
     targetSelector: string;
-}, storyProps$: Subject<ICollection>) => NgModule;
-export declare const createStorybookModule: (ngModule: NgModule) => Type<unknown>;
+}) => import("@angular/core").Type<any>;

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

@@ -1,20 +1,9 @@
 "use strict";
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createStorybookModule = exports.getStorybookModuleMetadata = void 0;
-const core_1 = require("@angular/core");
-const platform_browser_1 = require("@angular/platform-browser");
-const StorybookProvider_1 = require("./StorybookProvider");
-const NgModulesAnalyzer_1 = require("./utils/NgModulesAnalyzer");
-const NgComponentAnalyzer_1 = require("./utils/NgComponentAnalyzer");
+exports.getApplication = void 0;
 const StorybookWrapperComponent_1 = require("./StorybookWrapperComponent");
 const ComputesTemplateFromComponent_1 = require("./ComputesTemplateFromComponent");
-const getStorybookModuleMetadata = ({ storyFnAngular, component, targetSelector, }, storyProps$) => {
+const getApplication = ({ storyFnAngular, component, targetSelector, }) => {
     const { props, styles, moduleMetadata = {} } = storyFnAngular;
     let { template } = storyFnAngular;
     const hasTemplate = !hasNoTemplate(template);
@@ -24,39 +13,9 @@ const getStorybookModuleMetadata = ({ storyFnAngular, component, targetSelector,
     /**
      * Create a component that wraps generated template and gives it props
      */
-    const ComponentToInject = (0, StorybookWrapperComponent_1.createStorybookWrapperComponent)(targetSelector, template, component, styles, props);
-    const isStandalone = (0, NgComponentAnalyzer_1.isStandaloneComponent)(component);
-    // Look recursively (deep) if the component is not already declared by an import module
-    const requiresComponentDeclaration = (0, NgComponentAnalyzer_1.isDeclarable)(component) &&
-        !(0, NgModulesAnalyzer_1.isComponentAlreadyDeclaredInModules)(component, moduleMetadata.declarations, moduleMetadata.imports) &&
-        !isStandalone;
-    return {
-        declarations: [
-            ...(requiresComponentDeclaration ? [component] : []),
-            ComponentToInject,
-            ...(moduleMetadata.declarations ?? []),
-        ],
-        imports: [
-            platform_browser_1.BrowserModule,
-            ...(isStandalone ? [component] : []),
-            ...(moduleMetadata.imports ?? []),
-        ],
-        providers: [(0, StorybookProvider_1.storyPropsProvider)(storyProps$), ...(moduleMetadata.providers ?? [])],
-        entryComponents: [...(moduleMetadata.entryComponents ?? [])],
-        schemas: [...(moduleMetadata.schemas ?? [])],
-        bootstrap: [ComponentToInject],
-    };
-};
-exports.getStorybookModuleMetadata = getStorybookModuleMetadata;
-const createStorybookModule = (ngModule) => {
-    let StorybookModule = class StorybookModule {
-    };
-    StorybookModule = __decorate([
-        (0, core_1.NgModule)(ngModule)
-    ], StorybookModule);
-    return StorybookModule;
+    return (0, StorybookWrapperComponent_1.createStorybookWrapperComponent)(targetSelector, template, component, styles, moduleMetadata, props);
 };
-exports.createStorybookModule = createStorybookModule;
+exports.getApplication = getApplication;
 function hasNoTemplate(template) {
     return template === null || template === undefined;
 }