@storybook/angular 6.5.9 → 7.0.0-alpha.10

package/dist/{ts3.9 → types}/builders/build-storybook/index.d.ts

@@ -11,5 +11,5 @@ export declare type StorybookBuilderOptions = JsonObject & {
     stylePreprocessorOptions?: StylePreprocessorOptions;
 } & Pick<CLIOptions, 'outputDir' | 'configDir' | 'loglevel' | 'quiet' | 'docs' | 'webpackStatsJson'>;
 export declare type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
-declare const _default: import("@angular-devkit/architect/src/internal").Builder<StorybookBuilderOptions>;
+declare const _default: import("@angular-devkit/architect/src/internal").Builder<any>;
 export default _default;

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

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const architect_1 = require("@angular-devkit/architect");
+const rxjs_1 = require("rxjs");
+const operators_1 = require("rxjs/operators");
+const find_up_1 = require("find-up");
+const read_pkg_up_1 = require("read-pkg-up");
+const core_server_1 = require("@storybook/core-server");
+const run_compodoc_1 = require("../utils/run-compodoc");
+const build_standalone_errors_handler_1 = require("../utils/build-standalone-errors-handler");
+exports.default = (0, architect_1.createBuilder)(commandBuilder);
+function commandBuilder(options, context) {
+    return (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, 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 }) => {
+        const { browserTarget, stylePreprocessorOptions, styles, configDir, docs, loglevel, outputDir, quiet, webpackStatsJson, } = options;
+        const standaloneOptions = {
+            packageJson: (0, read_pkg_up_1.sync)({ cwd: __dirname }).packageJson,
+            configDir,
+            docs,
+            loglevel,
+            outputDir,
+            quiet,
+            angularBrowserTarget: browserTarget,
+            angularBuilderContext: context,
+            angularBuilderOptions: {
+                ...(stylePreprocessorOptions ? { stylePreprocessorOptions } : {}),
+                ...(styles ? { styles } : {}),
+            },
+            tsConfig,
+            webpackStatsJson,
+        };
+        return standaloneOptions;
+    }), (0, operators_1.switchMap)((standaloneOptions) => runInstance({ ...standaloneOptions, mode: 'static' })), (0, operators_1.map)(() => {
+        return { success: true };
+    }));
+}
+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 (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))));
+}

package/dist/{ts3.9 → types}/builders/start-storybook/index.d.ts

@@ -11,5 +11,5 @@ export declare type StorybookBuilderOptions = JsonObject & {
     stylePreprocessorOptions?: StylePreprocessorOptions;
 } & Pick<CLIOptions, 'port' | 'host' | 'configDir' | 'https' | 'sslCa' | 'sslCert' | 'sslKey' | 'smokeTest' | 'ci' | 'quiet' | 'docs'>;
 export declare type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
-declare const _default: import("@angular-devkit/architect/src/internal").Builder<StorybookBuilderOptions>;
+declare const _default: import("@angular-devkit/architect/src/internal").Builder<any>;
 export default _default;

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

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const architect_1 = require("@angular-devkit/architect");
+const rxjs_1 = require("rxjs");
+const operators_1 = require("rxjs/operators");
+const find_up_1 = require("find-up");
+const read_pkg_up_1 = require("read-pkg-up");
+const core_server_1 = require("@storybook/core-server");
+const run_compodoc_1 = require("../utils/run-compodoc");
+const build_standalone_errors_handler_1 = require("../utils/build-standalone-errors-handler");
+exports.default = (0, architect_1.createBuilder)(commandBuilder);
+function commandBuilder(options, context) {
+    return (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, 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 }) => {
+        const { browserTarget, stylePreprocessorOptions, styles, ci, configDir, docs, host, https, port, quiet, smokeTest, sslCa, sslCert, sslKey, } = options;
+        const standaloneOptions = {
+            packageJson: (0, read_pkg_up_1.sync)({ cwd: __dirname }).packageJson,
+            ci,
+            configDir,
+            docs,
+            host,
+            https,
+            port,
+            quiet,
+            smokeTest,
+            sslCa,
+            sslCert,
+            sslKey,
+            angularBrowserTarget: browserTarget,
+            angularBuilderContext: context,
+            angularBuilderOptions: {
+                ...(stylePreprocessorOptions ? { stylePreprocessorOptions } : {}),
+                ...(styles ? { styles } : {}),
+            },
+            tsConfig,
+        };
+        return standaloneOptions;
+    }), (0, operators_1.switchMap)((standaloneOptions) => runInstance(standaloneOptions)), (0, operators_1.map)(() => {
+        return { success: true };
+    }));
+}
+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.buildDevStandalone)(options).then(() => observer.next(), (error) => observer.error((0, build_standalone_errors_handler_1.buildStandaloneErrorHandler)(error)));
+    });
+}

package/dist/{ts3.9 → types}/builders/utils/build-standalone-errors-handler.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.buildStandaloneErrorHandler = void 0;
 const node_logger_1 = require("@storybook/node-logger");
 const ts_dedent_1 = __importDefault(require("ts-dedent"));
-exports.buildStandaloneErrorHandler = (error) => {
-    var _a;
+const buildStandaloneErrorHandler = (error) => {
     // Duplicate code for Standalone error handling
     // Source: https://github.com/storybookjs/storybook/blob/39c7ba09ad84fbd466f9c25d5b92791a5450b9f6/lib/core-server/src/build-dev.ts#L136
     node_logger_1.instance.heading = '';
@@ -22,17 +21,18 @@ exports.buildStandaloneErrorHandler = (error) => {
             node_logger_1.logger.error(error);
         }
     }
-    else if ((_a = error.compilation) === null || _a === void 0 ? void 0 : _a.errors) {
+    else if (error.compilation?.errors) {
         error.compilation.errors.forEach((e) => node_logger_1.logger.plain(e));
     }
     node_logger_1.logger.line();
     return error.close
-        ? ts_dedent_1.default `
+        ? (0, ts_dedent_1.default) `
       FATAL broken build!, will close the process,
       Fix the error below and restart storybook.
     `
-        : ts_dedent_1.default `
+        : (0, ts_dedent_1.default) `
       Broken build, fix the error above.
       You may need to refresh the browser.
     `;
 };
+exports.buildStandaloneErrorHandler = buildStandaloneErrorHandler;

package/dist/{ts3.9 → types}/builders/utils/run-compodoc.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -14,7 +18,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    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;
 };
@@ -29,7 +33,7 @@ const hasTsConfigArg = (args) => args.indexOf('-p') !== -1;
 const toRelativePath = (pathToTsConfig) => {
     return path.isAbsolute(pathToTsConfig) ? path.relative('.', pathToTsConfig) : pathToTsConfig;
 };
-exports.runCompodoc = ({ compodocArgs, tsconfig }, context) => {
+const runCompodoc = ({ compodocArgs, tsconfig }, context) => {
     return new rxjs_1.Observable((observer) => {
         const tsConfigPath = toRelativePath(tsconfig);
         const finalCompodocArgs = [
@@ -42,7 +46,7 @@ exports.runCompodoc = ({ compodocArgs, tsconfig }, context) => {
         ];
         try {
             context.logger.info(finalCompodocArgs.join(' '));
-            const child = child_process_1.spawn('npx', finalCompodocArgs, {
+            const child = (0, child_process_1.spawn)('npx', finalCompodocArgs, {
                 cwd: context.workspaceRoot,
                 env: process.env,
                 shell: true,
@@ -68,3 +72,4 @@ exports.runCompodoc = ({ compodocArgs, tsconfig }, context) => {
         }
     });
 };
+exports.runCompodoc = runCompodoc;

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

@@ -0,0 +1,12 @@
+import type { BuilderContext } from '@angular-devkit/architect';
+import type { LoadOptions, CLIOptions, BuilderOptions } from '@storybook/core-common';
+export declare type StandaloneOptions = Partial<CLIOptions & LoadOptions & BuilderOptions & {
+    mode?: 'static' | 'dev';
+    angularBrowserTarget?: string | null;
+    angularBuilderOptions?: Record<string, any> & {
+        styles?: any[];
+        stylePreprocessorOptions?: any;
+    };
+    angularBuilderContext?: BuilderContext | null;
+    tsConfig?: string;
+}>;

package/dist/{ts3.9/client/preview/angular/components → types/client/angular}/app.component.d.ts

@@ -1,6 +1,6 @@
 import { OnInit, ViewContainerRef, ComponentFactoryResolver, OnDestroy, ChangeDetectorRef } from '@angular/core';
 import { Observable, Subscription } from 'rxjs';
-import { StoryFnAngularReturnType } from '../../types';
+import { StoryFnAngularReturnType } from '../types';
 export declare class AppComponent implements OnInit, OnDestroy {
     private cfr;
     private changeDetectorRef;

package/dist/{ts3.9/client/preview/angular/components → types/client/angular}/app.component.js

@@ -21,7 +21,7 @@ exports.AppComponent = void 0;
 const core_1 = require("@angular/core");
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
-const app_token_1 = require("../app.token");
+const app_token_1 = require("./app.token");
 let AppComponent = class AppComponent {
     constructor(cfr, changeDetectorRef, data) {
         this.cfr = cfr;
@@ -31,7 +31,7 @@ let AppComponent = class AppComponent {
         this.propSubscriptions = new Map();
     }
     ngOnInit() {
-        this.data.pipe(operators_1.first()).subscribe((data) => {
+        this.data.pipe((0, operators_1.first)()).subscribe((data) => {
             this.target.clear();
             const compFactory = this.cfr.resolveComponentFactory(data.component);
             const componentRef = this.target.createComponent(compFactory);
@@ -126,15 +126,15 @@ let AppComponent = class AppComponent {
     }
 };
 __decorate([
-    core_1.ViewChild('target', { read: core_1.ViewContainerRef, static: true }),
+    (0, core_1.ViewChild)('target', { read: core_1.ViewContainerRef, static: true }),
     __metadata("design:type", core_1.ViewContainerRef)
 ], AppComponent.prototype, "target", void 0);
 AppComponent = __decorate([
-    core_1.Component({
+    (0, core_1.Component)({
         selector: 'storybook-dynamic-app-root',
         template: '<ng-template #target></ng-template>',
     }),
-    __param(2, core_1.Inject(app_token_1.STORY)),
+    __param(2, (0, core_1.Inject)(app_token_1.STORY)),
     __metadata("design:paramtypes", [core_1.ComponentFactoryResolver,
         core_1.ChangeDetectorRef,
         rxjs_1.Observable])

package/dist/{ts3.9/client/preview → types/client}/angular/helpers.d.ts

@@ -1,5 +1,5 @@
 import type { PartialStoryFn } from '@storybook/csf';
-import type { AngularFramework } from '../types-6-0';
+import type { AngularFramework } from '../types';
 declare global {
     interface Window {
         NODE_ENV: 'string' | 'development' | undefined;

package/dist/{ts3.9/client/preview → types/client}/angular/helpers.js

@@ -11,7 +11,7 @@ const forms_1 = require("@angular/forms");
 const platform_browser_dynamic_1 = require("@angular/platform-browser-dynamic");
 const platform_browser_1 = require("@angular/platform-browser");
 const rxjs_1 = require("rxjs");
-const app_component_1 = require("./components/app.component");
+const app_component_1 = require("./app.component");
 const app_token_1 = require("./app.token");
 const { document } = global_1.default;
 let platform = null;
@@ -51,10 +51,10 @@ const getModule = (declarations, entryComponents, bootstrap, data, moduleMetadat
         schemas: [...(moduleMetadata.schemas || [])],
         bootstrap: [...bootstrap],
     };
-    return core_1.NgModule(moduleMeta)(moduleClass);
+    return (0, core_1.NgModule)(moduleMeta)(moduleClass);
 };
 const createComponentFromTemplate = (template, styles) => {
-    return core_1.Component({
+    return (0, core_1.Component)({
         template,
         styles,
     })(componentClass);
@@ -120,16 +120,15 @@ const insertDynamicRoot = () => {
 const draw = (newModule) => {
     if (!platform) {
         insertDynamicRoot();
-        // eslint-disable-next-line no-undef
         if (typeof NODE_ENV === 'string' && NODE_ENV !== 'development') {
             try {
-                core_1.enableProdMode();
+                (0, core_1.enableProdMode)();
             }
             catch (e) {
                 //
             }
         }
-        platform = platform_browser_dynamic_1.platformBrowserDynamic();
+        platform = (0, platform_browser_dynamic_1.platformBrowserDynamic)();
         promises.push(platform.bootstrapModule(newModule));
     }
     else {
@@ -141,7 +140,7 @@ const draw = (newModule) => {
         });
     }
 };
-exports.renderNgApp = (storyFn, forced) => {
+const renderNgApp = (storyFn, forced) => {
     if (!forced) {
         draw(initModule(storyFn));
     }
@@ -149,3 +148,4 @@ exports.renderNgApp = (storyFn, forced) => {
         storyData.next(storyFn());
     }
 };
+exports.renderNgApp = renderNgApp;

package/dist/{ts3.9/client/preview → types/client}/angular-beta/AbstractRenderer.d.ts

@@ -1,6 +1,5 @@
 import { Subject } from 'rxjs';
-import { ICollection, StoryFnAngularReturnType } from '../types';
-import { Parameters } from '../types-6-0';
+import { ICollection, StoryFnAngularReturnType, Parameters } from '../types';
 declare type StoryRenderInfo = {
     storyFnAngular: StoryFnAngularReturnType;
     moduleMetadataSnapshot: string;

package/dist/{ts3.9/client/preview → types/client}/angular-beta/AbstractRenderer.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -14,22 +18,13 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
+var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AbstractRenderer = void 0;
-/* eslint-disable no-undef */
 const core_1 = require("@angular/core");
 const platform_browser_dynamic_1 = require("@angular/platform-browser-dynamic");
 const rxjs_1 = require("rxjs");
@@ -39,7 +34,7 @@ const StorybookModule_1 = require("./StorybookModule");
 let platformRef;
 function getPlatform(newPlatform) {
     if (!platformRef || newPlatform) {
-        platformRef = platform_browser_dynamic_1.platformBrowserDynamic();
+        platformRef = (0, platform_browser_dynamic_1.platformBrowserDynamic)();
     }
     return platformRef;
 }
@@ -49,7 +44,7 @@ class AbstractRenderer {
         if (typeof NODE_ENV === 'string' && NODE_ENV !== 'development') {
             try {
                 // platform should be set after enableProdMode()
-                core_1.enableProdMode();
+                (0, core_1.enableProdMode)();
             }
             catch (e) {
                 // eslint-disable-next-line no-console
@@ -63,9 +58,9 @@ class AbstractRenderer {
     static resetPlatformBrowserDynamic() {
         return new Promise((resolve) => {
             if (platformRef && !platformRef.destroyed) {
-                platformRef.onDestroy(() => __awaiter(this, void 0, void 0, function* () {
+                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();
@@ -86,30 +81,27 @@ class AbstractRenderer {
      * @param component {Component}
      * @param parameters {Parameters}
      */
-    render({ storyFnAngular, forced, parameters, component, targetDOMNode, }) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            const targetSelector = `${this.generateTargetSelectorFromStoryId()}`;
-            const newStoryProps$ = new rxjs_1.BehaviorSubject(storyFnAngular.props);
-            const moduleMetadata = StorybookModule_1.getStorybookModuleMetadata({ storyFnAngular, component, targetSelector }, newStoryProps$);
-            if (!this.fullRendererRequired({
-                storyFnAngular,
-                moduleMetadata,
-                forced,
-            })) {
-                this.storyProps$.next(storyFnAngular.props);
-                return;
-            }
-            yield 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);
-            yield getPlatform().bootstrapModule(StorybookModule_1.createStorybookModule(moduleMetadata), (_a = parameters.bootstrapModuleOptions) !== null && _a !== void 0 ? _a : undefined);
-            yield this.afterFullRender();
-        });
+    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,
+            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);
+        await this.afterFullRender();
     }
     /**
      * Only ASCII alphanumerics can be used as HTML tag name.
@@ -137,11 +129,10 @@ class AbstractRenderer {
         targetDOMNode.appendChild(document.createElement(targetSelector));
     }
     fullRendererRequired({ storyFnAngular, moduleMetadata, forced, }) {
-        var _a;
         const { previousStoryRenderInfo } = this;
         const currentStoryRender = {
             storyFnAngular,
-            moduleMetadataSnapshot: telejson_1.stringify(moduleMetadata),
+            moduleMetadataSnapshot: (0, telejson_1.stringify)(moduleMetadata),
         };
         this.previousStoryRenderInfo = currentStoryRender;
         if (
@@ -152,29 +143,30 @@ class AbstractRenderer {
             return true;
         }
         // force the rendering if the template has changed
-        const hasChangedTemplate = !!(storyFnAngular === null || storyFnAngular === void 0 ? void 0 : storyFnAngular.template) &&
-            ((_a = previousStoryRenderInfo === null || previousStoryRenderInfo === void 0 ? void 0 : previousStoryRenderInfo.storyFnAngular) === null || _a === void 0 ? void 0 : _a.template) !== storyFnAngular.template;
+        const hasChangedTemplate = !!storyFnAngular?.template &&
+            previousStoryRenderInfo?.storyFnAngular?.template !== storyFnAngular.template;
         if (hasChangedTemplate) {
             return true;
         }
         // force the rendering if the metadata structure has changed
-        const hasChangedModuleMetadata = currentStoryRender.moduleMetadataSnapshot !== (previousStoryRenderInfo === null || previousStoryRenderInfo === void 0 ? void 0 : previousStoryRenderInfo.moduleMetadataSnapshot);
+        const hasChangedModuleMetadata = currentStoryRender.moduleMetadataSnapshot !== previousStoryRenderInfo?.moduleMetadataSnapshot;
         return hasChangedModuleMetadata;
     }
 }
 exports.AbstractRenderer = AbstractRenderer;
+_a = AbstractRenderer;
 /**
  * Reset compiled components because we often want to compile the same component with
  * more than one NgModule.
  */
-AbstractRenderer.resetCompiledComponents = () => __awaiter(void 0, void 0, void 0, function* () {
+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 } = yield Promise.resolve().then(() => __importStar(require('@angular/core')));
+        const { ɵresetCompiledComponents } = await Promise.resolve().then(() => __importStar(require('@angular/core')));
         ɵresetCompiledComponents();
     }
     catch (e) {
@@ -183,4 +175,4 @@ AbstractRenderer.resetCompiledComponents = () => __awaiter(void 0, void 0, void
          * This means angular removed or modified ɵresetCompiledComponents
          */
     }
-});
+};

package/dist/{ts3.9/client/preview → types/client}/angular-beta/CanvasRenderer.d.ts

@@ -1,6 +1,5 @@
 import { AbstractRenderer } from './AbstractRenderer';
-import { StoryFnAngularReturnType } from '../types';
-import { Parameters } from '../types-6-0';
+import { StoryFnAngularReturnType, Parameters } from '../types';
 export declare class CanvasRenderer extends AbstractRenderer {
     render(options: {
         storyFnAngular: StoryFnAngularReturnType;

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CanvasRenderer = void 0;
+const AbstractRenderer_1 = require("./AbstractRenderer");
+class CanvasRenderer extends AbstractRenderer_1.AbstractRenderer {
+    async render(options) {
+        await super.render(options);
+    }
+    async beforeFullRender() {
+        await CanvasRenderer.resetPlatformBrowserDynamic();
+    }
+    async afterFullRender() {
+        await AbstractRenderer_1.AbstractRenderer.resetCompiledComponents();
+    }
+}
+exports.CanvasRenderer = CanvasRenderer;

package/dist/{ts3.9/client/preview → types/client}/angular-beta/ComputesTemplateFromComponent.js

@@ -21,9 +21,9 @@ const separateInputsOutputsAttributes = (ngComponentInputsOutputs, props = {}) =
  * @param initialProps
  * @param innerTemplate
  */
-exports.computesTemplateFromComponent = (component, initialProps, innerTemplate = '') => {
-    const ngComponentMetadata = NgComponentAnalyzer_1.getComponentDecoratorMetadata(component);
-    const ngComponentInputsOutputs = NgComponentAnalyzer_1.getComponentInputsOutputs(component);
+const computesTemplateFromComponent = (component, initialProps, innerTemplate = '') => {
+    const ngComponentMetadata = (0, NgComponentAnalyzer_1.getComponentDecoratorMetadata)(component);
+    const ngComponentInputsOutputs = (0, NgComponentAnalyzer_1.getComponentInputsOutputs)(component);
     if (!ngComponentMetadata.selector) {
         // Allow to add renderer component when NgComponent selector is undefined
         return `<ng-container *ngComponentOutlet="storyComponent"></ng-container>`;
@@ -35,8 +35,9 @@ exports.computesTemplateFromComponent = (component, initialProps, innerTemplate
         : '';
     return buildTemplate(ngComponentMetadata.selector, innerTemplate, templateInputs, templateOutputs);
 };
+exports.computesTemplateFromComponent = computesTemplateFromComponent;
 const createAngularInputProperty = ({ propertyName, value, argType, }) => {
-    const { name: type = null, summary = null } = (argType === null || argType === void 0 ? void 0 : argType.type) || {};
+    const { name: type = null, summary = null } = argType?.type || {};
     let templateValue = type === 'enum' && !!summary ? `${summary}.${value}` : value;
     const actualType = type === 'enum' && summary ? 'enum' : typeof value;
     const requiresBrackets = ['object', 'any', 'boolean', 'enum', 'number'].includes(actualType);
@@ -51,8 +52,8 @@ const createAngularInputProperty = ({ propertyName, value, argType, }) => {
  * @param initialProps
  * @param innerTemplate
  */
-exports.computesTemplateSourceFromComponent = (component, initialProps, argTypes) => {
-    const ngComponentMetadata = NgComponentAnalyzer_1.getComponentDecoratorMetadata(component);
+const computesTemplateSourceFromComponent = (component, initialProps, argTypes) => {
+    const ngComponentMetadata = (0, NgComponentAnalyzer_1.getComponentDecoratorMetadata)(component);
     if (!ngComponentMetadata) {
         return null;
     }
@@ -60,14 +61,14 @@ exports.computesTemplateSourceFromComponent = (component, initialProps, argTypes
         // Allow to add renderer component when NgComponent selector is undefined
         return `<ng-container *ngComponentOutlet="${component.name}"></ng-container>`;
     }
-    const ngComponentInputsOutputs = NgComponentAnalyzer_1.getComponentInputsOutputs(component);
+    const ngComponentInputsOutputs = (0, NgComponentAnalyzer_1.getComponentInputsOutputs)(component);
     const { inputs: initialInputs, outputs: initialOutputs } = separateInputsOutputsAttributes(ngComponentInputsOutputs, initialProps);
     const templateInputs = initialInputs.length > 0
         ? ` ${initialInputs
             .map((propertyName) => createAngularInputProperty({
             propertyName,
             value: initialProps[propertyName],
-            argType: argTypes === null || argTypes === void 0 ? void 0 : argTypes[propertyName],
+            argType: argTypes?.[propertyName],
         }))
             .join(' ')}`
         : '';
@@ -76,6 +77,7 @@ exports.computesTemplateSourceFromComponent = (component, initialProps, argTypes
         : '';
     return buildTemplate(ngComponentMetadata.selector, '', templateInputs, templateOutputs);
 };
+exports.computesTemplateSourceFromComponent = computesTemplateSourceFromComponent;
 const buildTemplate = (selector, innerTemplate, inputs, outputs) => {
     // https://www.w3.org/TR/2011/WD-html-markup-20110113/syntax.html#syntax-elements
     const voidElements = [

package/dist/{ts3.9/client/preview → types/client}/angular-beta/DocsRenderer.d.ts

@@ -1,6 +1,5 @@
 import { AbstractRenderer } from './AbstractRenderer';
-import { StoryFnAngularReturnType } from '../types';
-import { Parameters } from '../types-6-0';
+import { StoryFnAngularReturnType, Parameters } from '../types';
 export declare class DocsRenderer extends AbstractRenderer {
     render(options: {
         storyFnAngular: StoryFnAngularReturnType;