@storybook/angular 6.5.0-alpha.4 → 6.5.0-alpha.40

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

@@ -18,103 +18,100 @@ exports.AppComponent = void 0;
 // 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) {
+const core_1 = require("@angular/core");
+const rxjs_1 = require("rxjs");
+const operators_1 = require("rxjs/operators");
+const app_token_1 = require("../app.token");
+let AppComponent = class AppComponent {
+    constructor(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;
+    ngOnInit() {
+        this.data.pipe(operators_1.first()).subscribe((data) => {
+            this.target.clear();
+            const compFactory = this.cfr.resolveComponentFactory(data.component);
+            const componentRef = this.target.createComponent(compFactory);
+            const { instance } = componentRef;
             // 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);
+            const childChangeDetectorRef = componentRef.injector.get(core_1.ChangeDetectorRef);
+            this.subscription = this.data.subscribe((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();
+                this.changeDetectorRef.detectChanges();
             });
         });
-    };
-    AppComponent.prototype.ngOnDestroy = function () {
+    }
+    ngOnDestroy() {
         this.target.clear();
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
-        this.propSubscriptions.forEach(function (v) {
+        this.propSubscriptions.forEach((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];
+    setProps(instance, { props = {} }) {
+        const changes = {};
+        const hasNgOnChangesHook = !!instance.ngOnChanges;
+        Object.keys(props).forEach((key) => {
+            const value = props[key];
+            const 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];
+                    const 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;
+                        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.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) {
+    callNgOnChangesHook(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) {
+    setNgModel(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) {
+    setPropSubscription(key, instanceProperty, value) {
         if (this.propSubscriptions.has(key)) {
-            var v = this.propSubscriptions.get(key);
+            const v = this.propSubscriptions.get(key);
             if (v.prop === value) {
                 // Prop hasn't changed, so the existing subscription can stay.
                 return;
@@ -124,23 +121,22 @@ var AppComponent = /** @class */ (function () {
                 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;
-}());
+        const sub = instanceProperty.subscribe(value);
+        this.propSubscriptions.set(key, { prop: value, 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);
 exports.AppComponent = AppComponent;

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

@@ -1,82 +1,68 @@
 "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;
-}());
+const global_1 = __importDefault(require("global"));
+const core_1 = require("@angular/core");
+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_token_1 = require("./app.token");
+const { document } = global_1.default;
+let platform = null;
+let promises = [];
+let storyData = new rxjs_1.ReplaySubject(1);
+const moduleClass = class DynamicModule {
+};
+const componentClass = class 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();
-            };
+    return (ngZone) => new rxjs_1.Observable((subscriber) => {
+        const sub = data.subscribe((v) => {
+            ngZone.run(() => subscriber.next(v));
+        }, (err) => {
+            ngZone.run(() => subscriber.error(err));
+        }, () => {
+            ngZone.run(() => subscriber.complete());
         });
-    };
+        return () => {
+            sub.unsubscribe();
+        };
+    });
 }
-var getModule = function (declarations, entryComponents, bootstrap, data, moduleMetadata) {
+const getModule = (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),
+    const moduleMeta = {
+        declarations: [...declarations, ...(moduleMetadata.declarations || [])],
+        imports: [platform_browser_1.BrowserModule, forms_1.FormsModule, ...(moduleMetadata.imports || [])],
+        providers: [
+            { provide: app_token_1.STORY, useFactory: storyDataFactory(storyData.asObservable()), deps: [core_1.NgZone] },
+            ...(moduleMetadata.providers || []),
+        ],
+        entryComponents: [...entryComponents, ...(moduleMetadata.entryComponents || [])],
+        schemas: [...(moduleMetadata.schemas || [])],
+        bootstrap: [...bootstrap],
     };
     return core_1.NgModule(moduleMeta)(moduleClass);
 };
-var createComponentFromTemplate = function (template, styles) {
+const createComponentFromTemplate = (template, styles) => {
     return core_1.Component({
-        template: template,
-        styles: styles,
+        template,
+        styles,
     })(componentClass);
 };
-var extractNgModuleMetadata = function (importItem) {
-    var target = importItem && importItem.ngModule ? importItem.ngModule : importItem;
-    var decoratorKey = '__annotations__';
-    var decorators = Reflect &&
+const extractNgModuleMetadata = (importItem) => {
+    const target = importItem && importItem.ngModule ? importItem.ngModule : importItem;
+    const decoratorKey = '__annotations__';
+    const decorators = Reflect &&
         Reflect.getOwnPropertyDescriptor &&
         Reflect.getOwnPropertyDescriptor(target, decoratorKey)
         ? Reflect.getOwnPropertyDescriptor(target, decoratorKey).value
@@ -84,22 +70,22 @@ var extractNgModuleMetadata = function (importItem) {
     if (!decorators || decorators.length === 0) {
         return null;
     }
-    var ngModuleDecorator = decorators.find(function (decorator) { return decorator instanceof core_1.NgModule; });
+    const ngModuleDecorator = decorators.find((decorator) => 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; })) {
+const getExistenceOfComponentInModules = (component, declarations, imports) => {
+    if (declarations && declarations.some((declaration) => declaration === component)) {
         // Found component in declarations array
         return true;
     }
     if (!imports) {
         return false;
     }
-    return imports.some(function (importItem) {
-        var extractedNgModuleMetadata = extractNgModuleMetadata(importItem);
+    return imports.some((importItem) => {
+        const extractedNgModuleMetadata = extractNgModuleMetadata(importItem);
         if (!extractedNgModuleMetadata) {
             // Not an NgModule
             return false;
@@ -107,31 +93,31 @@ var getExistenceOfComponentInModules = function (component, declarations, import
         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
+const initModule = (storyFn) => {
+    const storyObj = storyFn();
+    const { component, template, props, styles, moduleMetadata = {} } = storyObj;
+    const isCreatingComponentFromTemplate = Boolean(template);
+    const AnnotatedComponent = isCreatingComponentFromTemplate
         ? createComponentFromTemplate(template, styles)
         : component;
-    var componentRequiresDeclaration = isCreatingComponentFromTemplate ||
+    const componentRequiresDeclaration = isCreatingComponentFromTemplate ||
         !getExistenceOfComponentInModules(component, moduleMetadata.declarations, moduleMetadata.imports);
-    var componentDeclarations = componentRequiresDeclaration
+    const componentDeclarations = componentRequiresDeclaration
         ? [app_component_1.AppComponent, AnnotatedComponent]
         : [app_component_1.AppComponent];
-    var story = {
+    const story = {
         component: AnnotatedComponent,
-        props: 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');
+const staticRoot = document.getElementById('root');
+const insertDynamicRoot = () => {
+    const app = document.createElement('storybook-dynamic-app-root');
     staticRoot.innerHTML = '';
     staticRoot.appendChild(app);
 };
-var draw = function (newModule) {
+const draw = (newModule) => {
     if (!platform) {
         insertDynamicRoot();
         // eslint-disable-next-line no-undef
@@ -147,15 +133,15 @@ var draw = function (newModule) {
         promises.push(platform.bootstrapModule(newModule));
     }
     else {
-        Promise.all(promises).then(function (modules) {
-            modules.forEach(function (mod) { return mod.destroy(); });
+        Promise.all(promises).then((modules) => {
+            modules.forEach((mod) => mod.destroy());
             insertDynamicRoot();
             promises = [];
             promises.push(platform.bootstrapModule(newModule));
         });
     }
 };
-exports.renderNgApp = function (storyFn, forced) {
+exports.renderNgApp = (storyFn, forced) => {
     if (!forced) {
         draw(initModule(storyFn));
     }