@storybook/angular 7.0.0 → 7.0.2

package/dist/client/decorateStory.test.js

@@ -169,37 +169,6 @@ describe('decorateStory', () => {
                 userDefinedTemplate: false,
             });
         });
-        it('should include legacy story components in decorators', () => {
-            const decorators = [
-                (s) => {
-                    const story = s();
-                    return {
-                        ...story,
-                        template: `<parent>${story.template}</parent>`,
-                    };
-                },
-                (s) => {
-                    const story = s();
-                    return {
-                        ...story,
-                        template: `<grandparent>${story.template}</grandparent>`,
-                    };
-                },
-                (s) => {
-                    const story = s();
-                    return {
-                        ...story,
-                        template: `<great-grandparent>${story.template}</great-grandparent>`,
-                    };
-                },
-            ];
-            const decorated = (0, decorateStory_1.default)(() => ({ component: FooComponent }), decorators);
-            expect(decorated(makeContext({}))).toEqual({
-                template: '<great-grandparent><grandparent><parent><foo></foo></parent></grandparent></great-grandparent>',
-                component: FooComponent,
-                userDefinedTemplate: false,
-            });
-        });
         it('should keep template with an empty value', () => {
             const decorators = [
                 (0, decorators_1.componentWrapperDecorator)(ParentComponent),

package/dist/client/decorators.test.js

@@ -87,13 +87,10 @@ describe('moduleMetadata', () => {
         const result = (0, decorators_1.moduleMetadata)({
             imports: [MockModule],
             providers: [MockService],
-        })(() => ({
-            component: MockComponent,
-        }), 
+        })(() => ({}), 
         // deepscan-disable-next-line
         defaultContext);
         expect(result).toEqual({
-            component: MockComponent,
             moduleMetadata: {
                 declarations: [],
                 entryComponents: [],

package/dist/client/types.d.ts

@@ -23,11 +23,7 @@ export interface ICollection {
     [p: string]: any;
 }
 export interface StoryFnAngularReturnType {
-    /** @deprecated `component` story input is deprecated, and will be removed in Storybook 7.0. */
-    component?: any;
     props?: ICollection;
-    /** @deprecated `propsMeta` story input is deprecated, and will be removed in Storybook 7.0. */
-    propsMeta?: ICollection;
     moduleMetadata?: NgModuleMetadata;
     applicationConfig?: ApplicationConfig;
     template?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "7.0.0",
+  "version": "7.0.2",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -36,20 +36,20 @@
     "prep": "../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0",
-    "@storybook/cli": "7.0.0",
-    "@storybook/client-logger": "7.0.0",
-    "@storybook/core-client": "7.0.0",
-    "@storybook/core-common": "7.0.0",
-    "@storybook/core-events": "7.0.0",
-    "@storybook/core-server": "7.0.0",
-    "@storybook/core-webpack": "7.0.0",
-    "@storybook/docs-tools": "7.0.0",
+    "@storybook/builder-webpack5": "7.0.2",
+    "@storybook/cli": "7.0.2",
+    "@storybook/client-logger": "7.0.2",
+    "@storybook/core-client": "7.0.2",
+    "@storybook/core-common": "7.0.2",
+    "@storybook/core-events": "7.0.2",
+    "@storybook/core-server": "7.0.2",
+    "@storybook/core-webpack": "7.0.2",
+    "@storybook/docs-tools": "7.0.2",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.0.0",
-    "@storybook/node-logger": "7.0.0",
-    "@storybook/preview-api": "7.0.0",
-    "@storybook/types": "7.0.0",
+    "@storybook/manager-api": "7.0.2",
+    "@storybook/node-logger": "7.0.2",
+    "@storybook/preview-api": "7.0.2",
+    "@storybook/types": "7.0.2",
     "@types/node": "^16.0.0",
     "@types/react": "^16.14.34",
     "@types/react-dom": "^16.9.14",
@@ -123,5 +123,5 @@
   "bundler": {
     "tsConfig": "tsconfig.build.json"
   },
-  "gitHead": "4f2afa644d7f2833181fc03187f5597d442285a6"
+  "gitHead": "96b498debee8b89d0c4050c13172a5a818c9997a"
 }

package/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts

@@ -1,5 +1,5 @@
 import { OnDestroy, OnInit, Component } from '@angular/core';
-import { Meta, StoryFn } from '@storybook/angular';
+import { Meta, StoryObj } from '@storybook/angular';
 
 @Component({
   selector: 'on-destroy',
@@ -37,6 +37,4 @@ export default {
   },
 } as Meta;
 
-export const SimpleComponent: StoryFn = () => ({
-  component: OnDestroyComponent,
-});
+export const SimpleComponent: StoryObj = {};

package/dist/client/angular/app.component.d.ts

@@ -1,38 +0,0 @@
-import { ViewContainerRef, ChangeDetectorRef, OnInit, ComponentFactoryResolver, OnDestroy } 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/client/angular/app.component.js

@@ -1,141 +0,0 @@
-"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;
-// 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.
-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();
-    }
-    ngOnInit() {
-        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);
-            const { instance } = componentRef;
-            // For some reason, manual change detection ref is only working when getting the ref from the injector (rather than componentRef.changeDetectorRef)
-            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();
-            });
-        });
-    }
-    ngOnDestroy() {
-        this.target.clear();
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
-        this.propSubscriptions.forEach((v) => {
-            if (!v.sub.closed) {
-                v.sub.unsubscribe();
-            }
-        });
-        this.propSubscriptions.clear();
-    }
-    /**
-     * Set inputs and outputs
-     */
-    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) {
-                    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;
-                    }
-                }
-            }
-            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]
-     */
-    callNgOnChangesHook(instance, changes) {
-        if (Object.keys(changes).length) {
-            instance.ngOnChanges(changes);
-        }
-    }
-    /**
-     * If component implements ControlValueAccessor interface try to set ngModel
-     */
-    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.
-     */
-    setPropSubscription(key, instanceProperty, value) {
-        if (this.propSubscriptions.has(key)) {
-            const 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();
-            }
-        }
-        const sub = instanceProperty.subscribe(value);
-        this.propSubscriptions.set(key, { prop: value, sub });
-    }
-};
-__decorate([
-    (0, core_1.ViewChild)('target', { read: core_1.ViewContainerRef, static: true }),
-    __metadata("design:type", core_1.ViewContainerRef)
-], AppComponent.prototype, "target", void 0);
-AppComponent = __decorate([
-    (0, core_1.Component)({
-        selector: 'storybook-dynamic-app-root',
-        template: '<ng-template #target></ng-template>',
-    }),
-    __param(2, (0, 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/client/angular/app.token.d.ts

@@ -1,3 +0,0 @@
-import { InjectionToken } from '@angular/core';
-import { StoryFnAngularReturnType } from '../types';
-export declare const STORY: InjectionToken<StoryFnAngularReturnType>;

package/dist/client/angular/app.token.js

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