@storybook/angular 6.4.0-beta.24 → 6.4.0-beta.28

package/dist/ts3.9/client/preview/angular/app.token.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.STORY = void 0;
+var core_1 = require("@angular/core");
+exports.STORY = new core_1.InjectionToken('story');

package/dist/ts3.9/client/preview/angular/components/app.component.d.ts

@@ -0,0 +1,38 @@
+import { OnInit, ViewContainerRef, ComponentFactoryResolver, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
+import { StoryFnAngularReturnType } from '../../types';
+export declare class AppComponent implements OnInit, OnDestroy {
+    private cfr;
+    private changeDetectorRef;
+    private data;
+    target: ViewContainerRef;
+    readonly previousValues: {
+        [key: string]: any;
+    };
+    subscription: Subscription;
+    propSubscriptions: Map<any, {
+        prop: any;
+        sub: Subscription;
+    }>;
+    constructor(cfr: ComponentFactoryResolver, changeDetectorRef: ChangeDetectorRef, data: Observable<StoryFnAngularReturnType>);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Set inputs and outputs
+     */
+    private setProps;
+    /**
+     * Manually call 'ngOnChanges' hook because angular doesn't do that for dynamic components
+     * Issue: [https://github.com/angular/angular/issues/8903]
+     */
+    private callNgOnChangesHook;
+    /**
+     * If component implements ControlValueAccessor interface try to set ngModel
+     */
+    private setNgModel;
+    /**
+     * Store ref to subscription for cleanup in 'ngOnDestroy' and check if
+     * observable needs to be resubscribed to, before creating a new subscription.
+     */
+    private setPropSubscription;
+}

package/dist/ts3.9/client/preview/angular/components/app.component.js

@@ -0,0 +1,146 @@
+"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;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var __param = (this && this.__param) || function (paramIndex, decorator) {
+    return function (target, key) { decorator(target, key, paramIndex); }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppComponent = void 0;
+/* eslint-disable no-useless-constructor */
+// We could use NgComponentOutlet here but there's currently no easy way
+// to provide @Inputs and subscribe to @Outputs, see
+// https://github.com/angular/angular/issues/15360
+// For the time being, the ViewContainerRef approach works pretty well.
+var core_1 = require("@angular/core");
+var rxjs_1 = require("rxjs");
+var operators_1 = require("rxjs/operators");
+var app_token_1 = require("../app.token");
+var AppComponent = /** @class */ (function () {
+    function AppComponent(cfr, changeDetectorRef, data) {
+        this.cfr = cfr;
+        this.changeDetectorRef = changeDetectorRef;
+        this.data = data;
+        this.previousValues = {};
+        this.propSubscriptions = new Map();
+    }
+    AppComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        this.data.pipe(operators_1.first()).subscribe(function (data) {
+            _this.target.clear();
+            var compFactory = _this.cfr.resolveComponentFactory(data.component);
+            var componentRef = _this.target.createComponent(compFactory);
+            var instance = componentRef.instance;
+            // For some reason, manual change detection ref is only working when getting the ref from the injector (rather than componentRef.changeDetectorRef)
+            var childChangeDetectorRef = componentRef.injector.get(core_1.ChangeDetectorRef);
+            _this.subscription = _this.data.subscribe(function (newData) {
+                _this.setProps(instance, newData);
+                childChangeDetectorRef.markForCheck();
+                // Must detect changes on the current component in order to update any changes in child component's @HostBinding properties (angular/angular#22560)
+                _this.changeDetectorRef.detectChanges();
+            });
+        });
+    };
+    AppComponent.prototype.ngOnDestroy = function () {
+        this.target.clear();
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+        this.propSubscriptions.forEach(function (v) {
+            if (!v.sub.closed) {
+                v.sub.unsubscribe();
+            }
+        });
+        this.propSubscriptions.clear();
+    };
+    /**
+     * Set inputs and outputs
+     */
+    AppComponent.prototype.setProps = function (instance, _a) {
+        var _this = this;
+        var _b = _a.props, props = _b === void 0 ? {} : _b;
+        var changes = {};
+        var hasNgOnChangesHook = !!instance.ngOnChanges;
+        Object.keys(props).forEach(function (key) {
+            var value = props[key];
+            var instanceProperty = instance[key];
+            if (!(instanceProperty instanceof core_1.EventEmitter) && value !== undefined && value !== null) {
+                // eslint-disable-next-line no-param-reassign
+                instance[key] = value;
+                if (hasNgOnChangesHook) {
+                    var previousValue = _this.previousValues[key];
+                    if (previousValue !== value) {
+                        changes[key] = new core_1.SimpleChange(previousValue, value, !Object.prototype.hasOwnProperty.call(_this.previousValues, key));
+                        _this.previousValues[key] = value;
+                    }
+                }
+            }
+            else if (typeof value === 'function' && key !== 'ngModelChange') {
+                _this.setPropSubscription(key, instanceProperty, value);
+            }
+        });
+        this.callNgOnChangesHook(instance, changes);
+        this.setNgModel(instance, props);
+    };
+    /**
+     * Manually call 'ngOnChanges' hook because angular doesn't do that for dynamic components
+     * Issue: [https://github.com/angular/angular/issues/8903]
+     */
+    AppComponent.prototype.callNgOnChangesHook = function (instance, changes) {
+        if (Object.keys(changes).length) {
+            instance.ngOnChanges(changes);
+        }
+    };
+    /**
+     * If component implements ControlValueAccessor interface try to set ngModel
+     */
+    AppComponent.prototype.setNgModel = function (instance, props) {
+        if (props.ngModel) {
+            instance.writeValue(props.ngModel);
+        }
+        if (typeof props.ngModelChange === 'function') {
+            instance.registerOnChange(props.ngModelChange);
+        }
+    };
+    /**
+     * Store ref to subscription for cleanup in 'ngOnDestroy' and check if
+     * observable needs to be resubscribed to, before creating a new subscription.
+     */
+    AppComponent.prototype.setPropSubscription = function (key, instanceProperty, value) {
+        if (this.propSubscriptions.has(key)) {
+            var v = this.propSubscriptions.get(key);
+            if (v.prop === value) {
+                // Prop hasn't changed, so the existing subscription can stay.
+                return;
+            }
+            // Now that the value has changed, unsubscribe from the previous value's subscription.
+            if (!v.sub.closed) {
+                v.sub.unsubscribe();
+            }
+        }
+        var sub = instanceProperty.subscribe(value);
+        this.propSubscriptions.set(key, { prop: value, sub: sub });
+    };
+    __decorate([
+        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({
+            selector: 'storybook-dynamic-app-root',
+            template: '<ng-template #target></ng-template>',
+        }),
+        __param(2, core_1.Inject(app_token_1.STORY)),
+        __metadata("design:paramtypes", [core_1.ComponentFactoryResolver,
+            core_1.ChangeDetectorRef,
+            rxjs_1.Observable])
+    ], AppComponent);
+    return AppComponent;
+}());
+exports.AppComponent = AppComponent;

package/dist/ts3.9/client/preview/angular/helpers.d.ts

@@ -0,0 +1,8 @@
+import { PartialStoryFn } from '@storybook/csf';
+import { AngularFramework } from '../types-6-0';
+declare global {
+    interface Window {
+        NODE_ENV: 'string' | 'development' | undefined;
+    }
+}
+export declare const renderNgApp: (storyFn: PartialStoryFn<AngularFramework>, forced: boolean) => void;

package/dist/ts3.9/client/preview/angular/helpers.js

@@ -0,0 +1,165 @@
+"use strict";
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderNgApp = void 0;
+// @ts-ignore
+var global_1 = __importDefault(require("global"));
+var core_1 = require("@angular/core");
+var forms_1 = require("@angular/forms");
+var platform_browser_dynamic_1 = require("@angular/platform-browser-dynamic");
+var platform_browser_1 = require("@angular/platform-browser");
+var rxjs_1 = require("rxjs");
+var app_component_1 = require("./components/app.component");
+var app_token_1 = require("./app.token");
+var document = global_1.default.document;
+var platform = null;
+var promises = [];
+var storyData = new rxjs_1.ReplaySubject(1);
+var moduleClass = /** @class */ (function () {
+    function DynamicModule() {
+    }
+    return DynamicModule;
+}());
+var componentClass = /** @class */ (function () {
+    function DynamicComponent() {
+    }
+    return DynamicComponent;
+}());
+function storyDataFactory(data) {
+    return function (ngZone) {
+        return new rxjs_1.Observable(function (subscriber) {
+            var sub = data.subscribe(function (v) {
+                ngZone.run(function () { return subscriber.next(v); });
+            }, function (err) {
+                ngZone.run(function () { return subscriber.error(err); });
+            }, function () {
+                ngZone.run(function () { return subscriber.complete(); });
+            });
+            return function () {
+                sub.unsubscribe();
+            };
+        });
+    };
+}
+var getModule = function (declarations, entryComponents, bootstrap, data, moduleMetadata) {
+    // Complete last ReplaySubject and create a new one for the current module
+    storyData.complete();
+    storyData = new rxjs_1.ReplaySubject(1);
+    storyData.next(data);
+    var moduleMeta = {
+        declarations: __spreadArrays(declarations, (moduleMetadata.declarations || [])),
+        imports: __spreadArrays([platform_browser_1.BrowserModule, forms_1.FormsModule], (moduleMetadata.imports || [])),
+        providers: __spreadArrays([
+            { provide: app_token_1.STORY, useFactory: storyDataFactory(storyData.asObservable()), deps: [core_1.NgZone] }
+        ], (moduleMetadata.providers || [])),
+        entryComponents: __spreadArrays(entryComponents, (moduleMetadata.entryComponents || [])),
+        schemas: __spreadArrays((moduleMetadata.schemas || [])),
+        bootstrap: __spreadArrays(bootstrap),
+    };
+    return core_1.NgModule(moduleMeta)(moduleClass);
+};
+var createComponentFromTemplate = function (template, styles) {
+    return core_1.Component({
+        template: template,
+        styles: styles,
+    })(componentClass);
+};
+var extractNgModuleMetadata = function (importItem) {
+    var target = importItem && importItem.ngModule ? importItem.ngModule : importItem;
+    var decoratorKey = '__annotations__';
+    var decorators = Reflect &&
+        Reflect.getOwnPropertyDescriptor &&
+        Reflect.getOwnPropertyDescriptor(target, decoratorKey)
+        ? Reflect.getOwnPropertyDescriptor(target, decoratorKey).value
+        : target[decoratorKey];
+    if (!decorators || decorators.length === 0) {
+        return null;
+    }
+    var ngModuleDecorator = decorators.find(function (decorator) { return decorator instanceof core_1.NgModule; });
+    if (!ngModuleDecorator) {
+        return null;
+    }
+    return ngModuleDecorator;
+};
+var getExistenceOfComponentInModules = function (component, declarations, imports) {
+    if (declarations && declarations.some(function (declaration) { return declaration === component; })) {
+        // Found component in declarations array
+        return true;
+    }
+    if (!imports) {
+        return false;
+    }
+    return imports.some(function (importItem) {
+        var extractedNgModuleMetadata = extractNgModuleMetadata(importItem);
+        if (!extractedNgModuleMetadata) {
+            // Not an NgModule
+            return false;
+        }
+        return getExistenceOfComponentInModules(component, extractedNgModuleMetadata.declarations, extractedNgModuleMetadata.imports);
+    });
+};
+var initModule = function (storyFn) {
+    var storyObj = storyFn();
+    var component = storyObj.component, template = storyObj.template, props = storyObj.props, styles = storyObj.styles, _a = storyObj.moduleMetadata, moduleMetadata = _a === void 0 ? {} : _a;
+    var isCreatingComponentFromTemplate = Boolean(template);
+    var AnnotatedComponent = isCreatingComponentFromTemplate
+        ? createComponentFromTemplate(template, styles)
+        : component;
+    var componentRequiresDeclaration = isCreatingComponentFromTemplate ||
+        !getExistenceOfComponentInModules(component, moduleMetadata.declarations, moduleMetadata.imports);
+    var componentDeclarations = componentRequiresDeclaration
+        ? [app_component_1.AppComponent, AnnotatedComponent]
+        : [app_component_1.AppComponent];
+    var story = {
+        component: AnnotatedComponent,
+        props: props,
+    };
+    return getModule(componentDeclarations, [AnnotatedComponent], [app_component_1.AppComponent], story, moduleMetadata);
+};
+var staticRoot = document.getElementById('root');
+var insertDynamicRoot = function () {
+    var app = document.createElement('storybook-dynamic-app-root');
+    staticRoot.innerHTML = '';
+    staticRoot.appendChild(app);
+};
+var draw = function (newModule) {
+    if (!platform) {
+        insertDynamicRoot();
+        // eslint-disable-next-line no-undef
+        if (typeof NODE_ENV === 'string' && NODE_ENV !== 'development') {
+            try {
+                core_1.enableProdMode();
+            }
+            catch (e) {
+                //
+            }
+        }
+        platform = platform_browser_dynamic_1.platformBrowserDynamic();
+        promises.push(platform.bootstrapModule(newModule));
+    }
+    else {
+        Promise.all(promises).then(function (modules) {
+            modules.forEach(function (mod) { return mod.destroy(); });
+            insertDynamicRoot();
+            promises = [];
+            promises.push(platform.bootstrapModule(newModule));
+        });
+    }
+};
+exports.renderNgApp = function (storyFn, forced) {
+    if (!forced) {
+        draw(initModule(storyFn));
+    }
+    else {
+        storyData.next(storyFn());
+    }
+};

package/dist/ts3.9/client/preview/angular-beta/AbstractRenderer.d.ts

@@ -0,0 +1,44 @@
+import { Subject } from 'rxjs';
+import { ICollection, StoryFnAngularReturnType } from '../types';
+import { Parameters } from '../types-6-0';
+declare type StoryRenderInfo = {
+    storyFnAngular: StoryFnAngularReturnType;
+    moduleMetadataSnapshot: string;
+};
+export declare abstract class AbstractRenderer {
+    storyId: string;
+    /**
+     * Wait and destroy the platform
+     */
+    static resetPlatformBrowserDynamic(): Promise<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: StoryRenderInfo;
+    protected storyProps$: Subject<ICollection | undefined>;
+    constructor(storyId: string);
+    protected abstract beforeFullRender(): Promise<void>;
+    protected abstract afterFullRender(): Promise<void>;
+    /**
+     * Bootstrap main angular module with main component or send only new `props` with storyProps$
+     *
+     * @param storyFnAngular {StoryFnAngularReturnType}
+     * @param forced {boolean} If :
+     * - true render will only use the StoryFn `props' in storyProps observable that will update sotry's component/template properties. Improves performance without reloading the whole module&component if props changes
+     * - false fully recharges or initializes angular module & component
+     * @param component {Component}
+     * @param parameters {Parameters}
+     */
+    render({ storyFnAngular, forced, parameters, component, targetDOMNode, }: {
+        storyFnAngular: StoryFnAngularReturnType;
+        forced: boolean;
+        component?: any;
+        parameters: Parameters;
+        targetDOMNode: HTMLElement;
+    }): Promise<void>;
+    protected initAngularRootElement(targetDOMNode: HTMLElement, targetSelector: string): void;
+    private fullRendererRequired;
+}
+export {};

package/dist/ts3.9/client/preview/angular-beta/AbstractRenderer.js

@@ -0,0 +1,215 @@
+"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]; } });
+}) : (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.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 __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AbstractRenderer = void 0;
+/* eslint-disable no-undef */
+var core_1 = require("@angular/core");
+var platform_browser_dynamic_1 = require("@angular/platform-browser-dynamic");
+var rxjs_1 = require("rxjs");
+var telejson_1 = require("telejson");
+var StorybookModule_1 = require("./StorybookModule");
+// platform must be init only if render is called at least once
+var platformRef;
+function getPlatform(newPlatform) {
+    if (!platformRef || newPlatform) {
+        platformRef = platform_browser_dynamic_1.platformBrowserDynamic();
+    }
+    return platformRef;
+}
+var AbstractRenderer = /** @class */ (function () {
+    function AbstractRenderer(storyId) {
+        this.storyId = storyId;
+        if (typeof NODE_ENV === 'string' && NODE_ENV !== 'development') {
+            try {
+                // platform should be set after enableProdMode()
+                core_1.enableProdMode();
+            }
+            catch (e) {
+                // eslint-disable-next-line no-console
+                console.debug(e);
+            }
+        }
+    }
+    /**
+     * Wait and destroy the platform
+     */
+    AbstractRenderer.resetPlatformBrowserDynamic = function () {
+        var _this = this;
+        return new Promise(function (resolve) {
+            if (platformRef && !platformRef.destroyed) {
+                platformRef.onDestroy(function () { return __awaiter(_this, void 0, void 0, function () {
+                    return __generator(this, function (_a) {
+                        resolve();
+                        return [2 /*return*/];
+                    });
+                }); });
+                // Destroys the current Angular platform and all Angular applications on the page.
+                // So call each angular ngOnDestroy and avoid memory leaks
+                platformRef.destroy();
+                return;
+            }
+            resolve();
+        }).then(function () {
+            getPlatform(true);
+        });
+    };
+    /**
+     * Bootstrap main angular module with main component or send only new `props` with storyProps$
+     *
+     * @param storyFnAngular {StoryFnAngularReturnType}
+     * @param forced {boolean} If :
+     * - true render will only use the StoryFn `props' in storyProps observable that will update sotry's component/template properties. Improves performance without reloading the whole module&component if props changes
+     * - false fully recharges or initializes angular module & component
+     * @param component {Component}
+     * @param parameters {Parameters}
+     */
+    AbstractRenderer.prototype.render = function (_a) {
+        var _b;
+        var storyFnAngular = _a.storyFnAngular, forced = _a.forced, parameters = _a.parameters, component = _a.component, targetDOMNode = _a.targetDOMNode;
+        return __awaiter(this, void 0, void 0, function () {
+            var targetSelector, newStoryProps$, moduleMetadata;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        targetSelector = "" + this.storyId;
+                        newStoryProps$ = new rxjs_1.BehaviorSubject(storyFnAngular.props);
+                        moduleMetadata = StorybookModule_1.getStorybookModuleMetadata({ storyFnAngular: storyFnAngular, component: component, targetSelector: targetSelector }, newStoryProps$);
+                        if (!this.fullRendererRequired({
+                            storyFnAngular: storyFnAngular,
+                            moduleMetadata: moduleMetadata,
+                            forced: forced,
+                        })) {
+                            this.storyProps$.next(storyFnAngular.props);
+                            return [2 /*return*/];
+                        }
+                        return [4 /*yield*/, this.beforeFullRender()];
+                    case 1:
+                        _c.sent();
+                        // 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);
+                        return [4 /*yield*/, getPlatform().bootstrapModule(StorybookModule_1.createStorybookModule(moduleMetadata), (_b = parameters.bootstrapModuleOptions) !== null && _b !== void 0 ? _b : undefined)];
+                    case 2:
+                        _c.sent();
+                        return [4 /*yield*/, this.afterFullRender()];
+                    case 3:
+                        _c.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    AbstractRenderer.prototype.initAngularRootElement = function (targetDOMNode, targetSelector) {
+        // Adds DOM element that angular will use as bootstrap component
+        // eslint-disable-next-line no-param-reassign
+        targetDOMNode.innerHTML = '';
+        targetDOMNode.appendChild(document.createElement(targetSelector));
+    };
+    AbstractRenderer.prototype.fullRendererRequired = function (_a) {
+        var _b;
+        var storyFnAngular = _a.storyFnAngular, moduleMetadata = _a.moduleMetadata, forced = _a.forced;
+        var previousStoryRenderInfo = this.previousStoryRenderInfo;
+        var currentStoryRender = {
+            storyFnAngular: storyFnAngular,
+            moduleMetadataSnapshot: telejson_1.stringify(moduleMetadata),
+        };
+        this.previousStoryRenderInfo = currentStoryRender;
+        if (
+        // check `forceRender` of story RenderContext
+        !forced ||
+            // if it's the first rendering and storyProps$ is not init
+            !this.storyProps$) {
+            return true;
+        }
+        // force the rendering if the template has changed
+        var hasChangedTemplate = !!(storyFnAngular === null || storyFnAngular === void 0 ? void 0 : storyFnAngular.template) &&
+            ((_b = previousStoryRenderInfo === null || previousStoryRenderInfo === void 0 ? void 0 : previousStoryRenderInfo.storyFnAngular) === null || _b === void 0 ? void 0 : _b.template) !== storyFnAngular.template;
+        if (hasChangedTemplate) {
+            return true;
+        }
+        // force the rendering if the metadata structure has changed
+        var hasChangedModuleMetadata = currentStoryRender.moduleMetadataSnapshot !== (previousStoryRenderInfo === null || previousStoryRenderInfo === void 0 ? void 0 : previousStoryRenderInfo.moduleMetadataSnapshot);
+        return hasChangedModuleMetadata;
+    };
+    /**
+     * Reset compiled components because we often want to compile the same component with
+     * more than one NgModule.
+     */
+    AbstractRenderer.resetCompiledComponents = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var ɵresetCompiledComponents, e_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require('@angular/core')); })];
+                case 1:
+                    ɵresetCompiledComponents = (_a.sent()).ɵresetCompiledComponents;
+                    ɵresetCompiledComponents();
+                    return [3 /*break*/, 3];
+                case 2:
+                    e_1 = _a.sent();
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    return AbstractRenderer;
+}());
+exports.AbstractRenderer = AbstractRenderer;

package/dist/ts3.9/client/preview/angular-beta/CanvasRenderer.d.ts

@@ -0,0 +1,14 @@
+import { AbstractRenderer } from './AbstractRenderer';
+import { StoryFnAngularReturnType } from '../types';
+import { Parameters } from '../types-6-0';
+export declare class CanvasRenderer extends AbstractRenderer {
+    render(options: {
+        storyFnAngular: StoryFnAngularReturnType;
+        forced: boolean;
+        parameters: Parameters;
+        component: any;
+        targetDOMNode: HTMLElement;
+    }): Promise<void>;
+    beforeFullRender(): Promise<void>;
+    afterFullRender(): Promise<void>;
+}