@storybook/angular 7.0.0-beta.50 → 7.0.0-beta.52

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

@@ -88,11 +88,17 @@ class AbstractRenderer {
         }
         this.storyProps$ = newStoryProps$;
         this.initAngularRootElement(targetDOMNode, targetSelector);
+        const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor(storyFnAngular.moduleMetadata, component);
         const providers = [
             // Providers for BrowserAnimations & NoopAnimationsModule
-            (0, PropertyExtractor_1.extractSingletons)(storyFnAngular.moduleMetadata),
+            analyzedMetadata.singletons,
+            (0, core_1.importProvidersFrom)(...analyzedMetadata.imports.filter((imported) => {
+                const { isStandalone } = PropertyExtractor_1.PropertyExtractor.analyzeDecorators(component);
+                return !isStandalone;
+            })),
+            analyzedMetadata.providers,
             (0, StorybookProvider_1.storyPropsProvider)(newStoryProps$),
-        ];
+        ].filter(Boolean);
         const application = (0, StorybookModule_1.getApplication)({ storyFnAngular, component, targetSelector });
         const applicationRef = await (0, platform_browser_1.bootstrapApplication)(application, { providers });
         applicationRefs.add(applicationRef);

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

@@ -40,9 +40,8 @@ const createStorybookWrapperComponent = (selector, template, storyComponent, sty
     // In ivy, a '' selector is not allowed, therefore we need to just set it to anything if
     // storyComponent was not provided.
     const viewChildSelector = storyComponent ?? '__storybook-noop';
-    const imports = (0, PropertyExtractor_1.extractImports)(moduleMetadata, storyComponent);
-    const declarations = (0, PropertyExtractor_1.extractDeclarations)(moduleMetadata, storyComponent);
-    const providers = (0, PropertyExtractor_1.extractProviders)(moduleMetadata);
+    const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor(moduleMetadata, storyComponent);
+    const { imports, declarations, providers } = analyzedMetadata;
     // Only create a new module if it doesn't already exist
     // This is to prevent the module from being recreated on every story change
     // Declarations & Imports are only added once

package/dist/client/angular-beta/__testfixtures__/test.module.d.ts

@@ -1,4 +1,2 @@
-export declare class WithAnimationsModule {
-}
 export declare class WithOfficialModule {
 }

package/dist/client/angular-beta/__testfixtures__/test.module.js

@@ -6,24 +6,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithOfficialModule = exports.WithAnimationsModule = void 0;
+exports.WithOfficialModule = void 0;
 const common_1 = require("@angular/common");
 const http_1 = require("@angular/common/http");
 const core_1 = require("@angular/core");
-const platform_browser_1 = require("@angular/platform-browser");
-const animations_1 = require("@angular/platform-browser/animations");
-let WithAnimationsModule = class WithAnimationsModule {
-};
-WithAnimationsModule = __decorate([
-    (0, core_1.NgModule)({
-        imports: [
-            //
-            platform_browser_1.BrowserModule,
-            animations_1.BrowserAnimationsModule,
-        ],
-    })
-], WithAnimationsModule);
-exports.WithAnimationsModule = WithAnimationsModule;
 let WithOfficialModule = class WithOfficialModule {
 };
 WithOfficialModule = __decorate([

package/dist/client/angular-beta/utils/PropertyExtractor.d.ts

@@ -1,50 +1,32 @@
-import { InjectionToken, Provider } from '@angular/core';
+import { InjectionToken, NgModule, Provider, ɵReflectionCapabilities as ReflectionCapabilities } from '@angular/core';
 import { NgModuleMetadata } from '../../types';
+export declare const reflectionCapabilities: ReflectionCapabilities;
 export declare const REMOVED_MODULES: InjectionToken<unknown>;
-/**
- * Analyze NgModule Metadata
- *
- * - Removes Restricted Imports
- * - Extracts providers from ModuleWithProviders
- * - Flattens imports
- * - Returns a new NgModuleMetadata object
- *
- *
- */
-export declare const analyzeMetadata: (metadata: NgModuleMetadata) => {
-    imports: any;
-    providers: any[];
-    singletons: any[];
-    declarations: any[];
-    entryComponents?: any[];
-    schemas?: any[];
-};
-/**
- * Extract Imports from NgModule
- *
- * CommonModule is always imported
- * Only standalone components are imported
- *
- */
-export declare const extractImports: (metadata: NgModuleMetadata, storyComponent?: any) => any[];
-/**
- * Extract providers from NgModule
- *
- * - A new array is returned with:
- *   - metadata.providers
- *   - providers from each **ModuleWithProviders** (e.g. forRoot() & forChild() )
- *
- *
- */
-export declare const extractProviders: (metadata: NgModuleMetadata) => Provider[];
-export declare const extractSingletons: (metadata: NgModuleMetadata) => Provider[];
-/**
- * Extract declarations from NgModule
- *
- * - If a story component is provided, it will be added to the declarations array if:
- *    - It is a component or directive or pipe
- *    - It is not already declared
- *    - It is not a standalone component
- *
- */
-export declare const extractDeclarations: (metadata: NgModuleMetadata, storyComponent?: any) => any[];
+export declare const uniqueArray: (arr: any[]) => any[];
+export declare class PropertyExtractor implements NgModuleMetadata {
+    private metadata;
+    private component?;
+    declarations?: any[];
+    imports?: any[];
+    providers?: Provider[];
+    singletons?: Provider[];
+    constructor(metadata: NgModuleMetadata, component?: any);
+    private init;
+    /**
+     * Analyze NgModule Metadata
+     *
+     * - Removes Restricted Imports
+     * - Extracts providers from ModuleWithProviders
+     * - Flattens imports
+     * - Returns a new NgModuleMetadata object
+     *
+     *
+     */
+    private analyzeMetadata;
+    static analyzeRestricted: (ngModule: NgModule) => (boolean | Provider[])[];
+    static analyzeDecorators: (component: any) => {
+        isDeclarable: boolean;
+        isStandalone: boolean;
+    };
+    static isDecoratorInstanceOf: (decorator: any, name: string) => boolean;
+}

package/dist/client/angular-beta/utils/PropertyExtractor.js

@@ -1,17 +1,78 @@
 "use strict";
+var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.extractDeclarations = exports.extractSingletons = exports.extractProviders = exports.extractImports = exports.analyzeMetadata = exports.REMOVED_MODULES = void 0;
+exports.PropertyExtractor = exports.uniqueArray = exports.REMOVED_MODULES = exports.reflectionCapabilities = void 0;
 const common_1 = require("@angular/common");
-const http_1 = require("@angular/common/http");
 const core_1 = require("@angular/core");
 const platform_browser_1 = require("@angular/platform-browser");
 const animations_1 = require("@angular/platform-browser/animations");
-const NgComponentAnalyzer_1 = require("./NgComponentAnalyzer");
 const NgModulesAnalyzer_1 = require("./NgModulesAnalyzer");
+exports.reflectionCapabilities = new core_1.ɵReflectionCapabilities();
+exports.REMOVED_MODULES = new core_1.InjectionToken('REMOVED_MODULES');
 const uniqueArray = (arr) => {
-    return arr.flat(Number.MAX_VALUE).filter((value, index, self) => self.indexOf(value) === index);
+    return arr
+        .flat(Number.MAX_VALUE)
+        .filter(Boolean)
+        .filter((value, index, self) => self.indexOf(value) === index);
 };
-const analyzeRestricted = (ngModule) => {
+exports.uniqueArray = uniqueArray;
+class PropertyExtractor {
+    /* eslint-enable @typescript-eslint/lines-between-class-members */
+    constructor(metadata, component) {
+        this.metadata = metadata;
+        this.component = component;
+        /* eslint-disable @typescript-eslint/lines-between-class-members */
+        this.declarations = [];
+        /**
+         * Analyze NgModule Metadata
+         *
+         * - Removes Restricted Imports
+         * - Extracts providers from ModuleWithProviders
+         * - Flattens imports
+         * - Returns a new NgModuleMetadata object
+         *
+         *
+         */
+        this.analyzeMetadata = (metadata) => {
+            const declarations = [...(metadata?.declarations || [])];
+            const providers = [...(metadata?.providers || [])];
+            const singletons = [...(metadata?.singletons || [])];
+            const imports = [...(metadata?.imports || [])].reduce((acc, imported) => {
+                // remove ngModule and use only its providers if it is restricted
+                // (e.g. BrowserModule, BrowserAnimationsModule, NoopAnimationsModule, ...etc)
+                const [isRestricted, restrictedProviders] = PropertyExtractor.analyzeRestricted(imported);
+                if (isRestricted) {
+                    singletons.unshift(restrictedProviders || []);
+                    return acc;
+                }
+                acc.push(imported);
+                return acc;
+            }, []);
+            return { ...metadata, imports, providers, singletons, declarations };
+        };
+        this.init();
+    }
+    init() {
+        const analyzed = this.analyzeMetadata(this.metadata);
+        this.imports = (0, exports.uniqueArray)([common_1.CommonModule, analyzed.imports]);
+        this.providers = (0, exports.uniqueArray)(analyzed.providers);
+        this.singletons = (0, exports.uniqueArray)(analyzed.singletons);
+        this.declarations = (0, exports.uniqueArray)(analyzed.declarations);
+        if (this.component) {
+            const { isDeclarable, isStandalone } = PropertyExtractor.analyzeDecorators(this.component);
+            const isDeclared = (0, NgModulesAnalyzer_1.isComponentAlreadyDeclared)(this.component, analyzed.declarations, this.imports);
+            if (isStandalone) {
+                this.imports.push(this.component);
+            }
+            else if (isDeclarable && !isDeclared) {
+                this.declarations.push(this.component);
+            }
+        }
+    }
+}
+exports.PropertyExtractor = PropertyExtractor;
+_a = PropertyExtractor;
+PropertyExtractor.analyzeRestricted = (ngModule) => {
     /**
      * BrowserModule is restricted,
      * because bootstrapApplication API, which mounts the component to the DOM,
@@ -36,124 +97,40 @@ const analyzeRestricted = (ngModule) => {
     if (ngModule === animations_1.NoopAnimationsModule) {
         return [true, (0, animations_1.provideNoopAnimations)()];
     }
-    /**
-     * HttpClient has to be provided manually as a singleton
-     */
-    if (ngModule === http_1.HttpClientModule) {
-        return [true, (0, http_1.provideHttpClient)()];
-    }
     return [false];
 };
-exports.REMOVED_MODULES = new core_1.InjectionToken('REMOVED_MODULES');
-/**
- * Analyze NgModule Metadata
- *
- * - Removes Restricted Imports
- * - Extracts providers from ModuleWithProviders
- * - Flattens imports
- * - Returns a new NgModuleMetadata object
- *
- *
- */
-const analyzeMetadata = (metadata) => {
-    const declarations = [...(metadata?.declarations || [])];
-    const providers = [...(metadata?.providers || [])];
-    const singletons = [];
-    const imports = [...(metadata?.imports || [])]
-        .reduce((acc, ngModule) => {
-        // remove ngModule and use only its providers if it is restricted
-        // (e.g. BrowserModule, BrowserAnimationsModule, NoopAnimationsModule, ...etc)
-        const [isRestricted, restrictedProviders] = analyzeRestricted(ngModule);
-        if (isRestricted) {
-            singletons.unshift(restrictedProviders || []);
-            return acc;
-        }
-        // destructure into ngModule & providers if it is a ModuleWithProviders
-        if (ngModule?.providers) {
-            providers.unshift(ngModule.providers || []);
-            // eslint-disable-next-line no-param-reassign
-            ngModule = ngModule.ngModule;
-        }
-        // extract providers, declarations, singletons from ngModule
-        // eslint-disable-next-line no-underscore-dangle
-        const ngMetadata = ngModule?.__annotations__?.[0];
-        if (ngMetadata) {
-            const newMetadata = (0, exports.analyzeMetadata)(ngMetadata);
-            acc.unshift(...newMetadata.imports);
-            providers.unshift(...newMetadata.providers);
-            singletons.unshift(...newMetadata.singletons);
-            declarations.unshift(...newMetadata.declarations);
-            if (ngMetadata.standalone === true) {
-                acc.push(ngModule);
-            }
-            // keeping a copy of the removed module
-            providers.push({ provide: exports.REMOVED_MODULES, useValue: ngModule, multi: true });
-            return acc;
-        }
-        // include Angular official modules as-is
-        if (ngModule.ɵmod) {
-            acc.push(ngModule);
-            return acc;
-        }
-        return acc;
-    }, [])
-        .flat(Number.MAX_VALUE);
-    return { ...metadata, imports, providers, singletons, declarations };
-};
-exports.analyzeMetadata = analyzeMetadata;
-/**
- * Extract Imports from NgModule
- *
- * CommonModule is always imported
- * Only standalone components are imported
- *
- */
-const extractImports = (metadata, storyComponent) => {
-    const { imports } = (0, exports.analyzeMetadata)(metadata);
-    if ((0, NgComponentAnalyzer_1.isStandaloneComponent)(storyComponent)) {
-        imports.push(storyComponent);
-    }
-    return uniqueArray([common_1.CommonModule, imports]);
-};
-exports.extractImports = extractImports;
-/**
- * Extract providers from NgModule
- *
- * - A new array is returned with:
- *   - metadata.providers
- *   - providers from each **ModuleWithProviders** (e.g. forRoot() & forChild() )
- *
- *
- */
-const extractProviders = (metadata) => {
-    const { providers } = (0, exports.analyzeMetadata)(metadata);
-    return uniqueArray(providers);
+PropertyExtractor.analyzeDecorators = (component) => {
+    const decorators = exports.reflectionCapabilities.annotations(component);
+    const isComponent = decorators.some((d) => _a.isDecoratorInstanceOf(d, 'Component'));
+    const isDirective = decorators.some((d) => _a.isDecoratorInstanceOf(d, 'Directive'));
+    const isPipe = decorators.some((d) => _a.isDecoratorInstanceOf(d, 'Pipe'));
+    const isDeclarable = isComponent || isDirective || isPipe;
+    const isStandalone = isComponent && decorators.some((d) => d.standalone);
+    return { isDeclarable, isStandalone };
 };
-exports.extractProviders = extractProviders;
-const extractSingletons = (metadata) => {
-    const { singletons } = (0, exports.analyzeMetadata)(metadata);
-    return uniqueArray(singletons);
-};
-exports.extractSingletons = extractSingletons;
-/**
- * Extract declarations from NgModule
- *
- * - If a story component is provided, it will be added to the declarations array if:
- *    - It is a component or directive or pipe
- *    - It is not already declared
- *    - It is not a standalone component
- *
- */
-const extractDeclarations = (metadata, storyComponent) => {
-    const { declarations } = (0, exports.analyzeMetadata)(metadata);
-    if (storyComponent) {
-        const isStandalone = (0, NgComponentAnalyzer_1.isStandaloneComponent)(storyComponent);
-        const isDeclared = (0, NgModulesAnalyzer_1.isComponentAlreadyDeclared)(storyComponent, declarations, metadata.imports);
-        const requiresDeclaration = (0, NgComponentAnalyzer_1.isDeclarable)(storyComponent) && !isDeclared && !isStandalone;
-        if (requiresDeclaration) {
-            declarations.push(storyComponent);
-        }
+PropertyExtractor.isDecoratorInstanceOf = (decorator, name) => {
+    let factory;
+    switch (name) {
+        case 'Component':
+            factory = core_1.Component;
+            break;
+        case 'Directive':
+            factory = core_1.Directive;
+            break;
+        case 'Pipe':
+            factory = core_1.Pipe;
+            break;
+        case 'Injectable':
+            factory = core_1.Injectable;
+            break;
+        case 'Input':
+            factory = core_1.Input;
+            break;
+        case 'Output':
+            factory = core_1.Output;
+            break;
+        default:
+            throw new Error(`Unknown decorator type: ${name}`);
     }
-    return uniqueArray(declarations);
+    return decorator instanceof factory || decorator.ngMetadataName === name;
 };
-exports.extractDeclarations = extractDeclarations;

package/dist/client/angular-beta/utils/PropertyExtractor.test.js

@@ -4,7 +4,6 @@ const common_1 = require("@angular/common");
 const core_1 = require("@angular/core");
 const platform_browser_1 = require("@angular/platform-browser");
 const animations_1 = require("@angular/platform-browser/animations");
-const http_1 = require("@angular/common/http");
 const PropertyExtractor_1 = require("./PropertyExtractor");
 const test_module_1 = require("../__testfixtures__/test.module");
 const TEST_TOKEN = new core_1.InjectionToken('testToken');
@@ -26,14 +25,33 @@ const TestModuleWithImportsAndProviders = (0, core_1.NgModule)({
     providers: [TestTokenProvider],
 })(class {
 });
+const analyzeMetadata = (metadata, component) => {
+    return new PropertyExtractor_1.PropertyExtractor(metadata, component);
+};
+const extractImports = (metadata, component) => {
+    const { imports } = new PropertyExtractor_1.PropertyExtractor(metadata, component);
+    return imports;
+};
+const extractDeclarations = (metadata, component) => {
+    const { declarations } = new PropertyExtractor_1.PropertyExtractor(metadata, component);
+    return declarations;
+};
+const extractProviders = (metadata, component) => {
+    const { providers } = new PropertyExtractor_1.PropertyExtractor(metadata, component);
+    return providers;
+};
+const extractSingletons = (metadata, component) => {
+    const { singletons } = new PropertyExtractor_1.PropertyExtractor(metadata, component);
+    return singletons;
+};
 describe('PropertyExtractor', () => {
     describe('analyzeMetadata', () => {
         it('should remove BrowserModule', () => {
             const metadata = {
                 imports: [platform_browser_1.BrowserModule],
             };
-            const { imports, providers, singletons } = (0, PropertyExtractor_1.analyzeMetadata)(metadata);
-            expect(imports.flat(Number.MAX_VALUE)).toEqual([]);
+            const { imports, providers, singletons } = analyzeMetadata(metadata);
+            expect(imports.flat(Number.MAX_VALUE)).toEqual([common_1.CommonModule]);
             expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
             expect(singletons.flat(Number.MAX_VALUE)).toEqual([]);
         });
@@ -41,8 +59,8 @@ describe('PropertyExtractor', () => {
             const metadata = {
                 imports: [animations_1.BrowserAnimationsModule],
             };
-            const { imports, providers, singletons } = (0, PropertyExtractor_1.analyzeMetadata)(metadata);
-            expect(imports.flat(Number.MAX_VALUE)).toEqual([]);
+            const { imports, providers, singletons } = analyzeMetadata(metadata);
+            expect(imports.flat(Number.MAX_VALUE)).toEqual([common_1.CommonModule]);
             expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
             expect(singletons.flat(Number.MAX_VALUE)).toEqual((0, animations_1.provideAnimations)());
         });
@@ -50,127 +68,71 @@ describe('PropertyExtractor', () => {
             const metadata = {
                 imports: [animations_1.NoopAnimationsModule],
             };
-            const { imports, providers, singletons } = (0, PropertyExtractor_1.analyzeMetadata)(metadata);
-            expect(imports.flat(Number.MAX_VALUE)).toEqual([]);
+            const { imports, providers, singletons } = analyzeMetadata(metadata);
+            expect(imports.flat(Number.MAX_VALUE)).toEqual([common_1.CommonModule]);
             expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
             expect(singletons.flat(Number.MAX_VALUE)).toEqual((0, animations_1.provideNoopAnimations)());
         });
         it('should remove Browser/Animations modules recursively', () => {
             const metadata = {
-                imports: [test_module_1.WithAnimationsModule],
+                imports: [animations_1.BrowserAnimationsModule, platform_browser_1.BrowserModule],
             };
-            const { imports, providers, singletons } = (0, PropertyExtractor_1.analyzeMetadata)(metadata);
-            expect(imports.flat(Number.MAX_VALUE)).toEqual([]);
-            expect(providers.flat(Number.MAX_VALUE)).toEqual([
-                { provide: PropertyExtractor_1.REMOVED_MODULES, useValue: test_module_1.WithAnimationsModule, multi: true },
-            ]);
+            const { imports, providers, singletons } = analyzeMetadata(metadata);
+            expect(imports.flat(Number.MAX_VALUE)).toEqual([common_1.CommonModule]);
+            expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
             expect(singletons.flat(Number.MAX_VALUE)).toEqual((0, animations_1.provideAnimations)());
         });
         it('should not destructure Angular official module', () => {
             const metadata = {
                 imports: [test_module_1.WithOfficialModule],
             };
-            const { imports, providers, singletons } = (0, PropertyExtractor_1.analyzeMetadata)(metadata);
-            expect(imports.flat(Number.MAX_VALUE)).toEqual([common_1.CommonModule, http_1.HttpClientModule]);
-            expect(providers.flat(Number.MAX_VALUE)).toEqual([
-                { provide: PropertyExtractor_1.REMOVED_MODULES, useValue: test_module_1.WithOfficialModule, multi: true },
-            ]);
+            const { imports, providers, singletons } = analyzeMetadata(metadata);
+            expect(imports.flat(Number.MAX_VALUE)).toEqual([common_1.CommonModule, test_module_1.WithOfficialModule]);
+            expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
             expect(singletons.flat(Number.MAX_VALUE)).toEqual([]);
         });
     });
     describe('extractImports', () => {
         it('should return Angular official modules', () => {
-            const imports = (0, PropertyExtractor_1.extractImports)({ imports: [TestModuleWithImportsAndProviders] });
-            expect(imports).toEqual([common_1.CommonModule]);
+            const imports = extractImports({ imports: [TestModuleWithImportsAndProviders] });
+            expect(imports).toEqual([common_1.CommonModule, TestModuleWithImportsAndProviders]);
         });
         it('should return standalone components', () => {
-            const imports = (0, PropertyExtractor_1.extractImports)({
+            const imports = extractImports({
                 imports: [TestModuleWithImportsAndProviders],
             }, StandaloneTestComponent);
-            expect(imports).toEqual([common_1.CommonModule, StandaloneTestComponent]);
-        });
-        it('should not return any regular modules (they get destructured)', () => {
-            const imports = (0, PropertyExtractor_1.extractImports)({
-                imports: [
-                    TestModuleWithDeclarations,
-                    { ngModule: TestModuleWithImportsAndProviders, providers: [] },
-                ],
-            });
-            expect(imports).toEqual([common_1.CommonModule]);
+            expect(imports).toEqual([
+                common_1.CommonModule,
+                TestModuleWithImportsAndProviders,
+                StandaloneTestComponent,
+            ]);
         });
     });
     describe('extractDeclarations', () => {
         it('should return an array of declarations that contains `storyComponent`', () => {
-            const declarations = (0, PropertyExtractor_1.extractDeclarations)({ declarations: [TestComponent1] }, TestComponent2);
+            const declarations = extractDeclarations({ declarations: [TestComponent1] }, TestComponent2);
             expect(declarations).toEqual([TestComponent1, TestComponent2]);
         });
-        it('should ignore `storyComponent` if it is already declared', () => {
-            const declarations = (0, PropertyExtractor_1.extractDeclarations)({
-                imports: [TestModuleWithImportsAndProviders],
-                declarations: [TestComponent2, StandaloneTestComponent, TestDirective],
-            }, TestComponent1);
-            expect(declarations).toEqual([
-                TestComponent1,
-                TestComponent2,
-                StandaloneTestComponent,
-                TestDirective,
-            ]);
-        });
-        it('should ignore `storyComponent` if it is standalone', () => {
-            const declarations = (0, PropertyExtractor_1.extractDeclarations)({
-                imports: [TestModuleWithImportsAndProviders],
-                declarations: [TestComponent1, TestComponent2, TestDirective],
-            }, StandaloneTestComponent);
-            expect(declarations).toEqual([TestComponent1, TestComponent2, TestDirective]);
+    });
+    describe('analyzeDecorators', () => {
+        it('isStandalone should be false', () => {
+            const { isStandalone } = PropertyExtractor_1.PropertyExtractor.analyzeDecorators(TestComponent1);
+            expect(isStandalone).toBe(false);
         });
-        it('should ignore `storyComponent` if it is not a component/directive/pipe', () => {
-            const declarations = (0, PropertyExtractor_1.extractDeclarations)({
-                imports: [TestModuleWithImportsAndProviders],
-                declarations: [TestComponent1, TestComponent2, StandaloneTestComponent],
-            }, TestService);
-            expect(declarations).toEqual([TestComponent1, TestComponent2, StandaloneTestComponent]);
+        it('isStandalone should be true', () => {
+            const { isStandalone } = PropertyExtractor_1.PropertyExtractor.analyzeDecorators(StandaloneTestComponent);
+            expect(isStandalone).toBe(true);
         });
     });
     describe('extractProviders', () => {
         it('should return an array of providers', () => {
-            const providers = (0, PropertyExtractor_1.extractProviders)({
+            const providers = extractProviders({
                 providers: [TestService],
             });
             expect(providers).toEqual([TestService]);
         });
-        it('should return an array of providers extracted from ModuleWithProviders', () => {
-            const providers = (0, PropertyExtractor_1.extractProviders)({
-                imports: [{ ngModule: TestModuleWithImportsAndProviders, providers: [TestService] }],
-            });
-            expect(providers).toEqual([
-                { provide: TEST_TOKEN, useValue: 123 },
-                { provide: PropertyExtractor_1.REMOVED_MODULES, useValue: TestModuleWithDeclarations, multi: true },
-                TestService,
-                { provide: PropertyExtractor_1.REMOVED_MODULES, useValue: TestModuleWithImportsAndProviders, multi: true },
-            ]);
-        });
-        it('should return an array of unique providers', () => {
-            const providers = (0, PropertyExtractor_1.extractProviders)({
-                imports: [{ ngModule: TestModuleWithImportsAndProviders, providers: [TestService] }],
-                providers: [TestService, { provide: TEST_TOKEN, useValue: 123 }],
-            });
-            expect(providers).toEqual([
-                { provide: TEST_TOKEN, useValue: 123 },
-                { provide: PropertyExtractor_1.REMOVED_MODULES, useValue: TestModuleWithDeclarations, multi: true },
-                TestService,
-                {
-                    provide: new core_1.InjectionToken('testToken'),
-                    useValue: 123,
-                },
-                {
-                    provide: PropertyExtractor_1.REMOVED_MODULES,
-                    useValue: TestModuleWithImportsAndProviders,
-                    multi: true,
-                },
-            ]);
-        });
         it('should return an array of singletons extracted', () => {
-            const singeltons = (0, PropertyExtractor_1.extractSingletons)({
+            const singeltons = extractSingletons({
                 imports: [animations_1.BrowserAnimationsModule],
             });
             expect(singeltons).toEqual((0, animations_1.provideAnimations)());

package/dist/client/config.d.ts

@@ -2,5 +2,5 @@ import './globals';
 export { render, renderToCanvas } from './render';
 export { decorateStory as applyDecorators } from './decorateStory';
 export declare const parameters: {
-    framework: "angular";
+    renderer: "angular";
 };

package/dist/client/config.js

@@ -7,4 +7,4 @@ Object.defineProperty(exports, "render", { enumerable: true, get: function () {
 Object.defineProperty(exports, "renderToCanvas", { enumerable: true, get: function () { return render_1.renderToCanvas; } });
 var decorateStory_1 = require("./decorateStory");
 Object.defineProperty(exports, "applyDecorators", { enumerable: true, get: function () { return decorateStory_1.decorateStory; } });
-exports.parameters = { framework: 'angular' };
+exports.parameters = { renderer: 'angular' };

package/dist/client/public-api.js

@@ -22,15 +22,15 @@ const core_client_1 = require("@storybook/core-client");
 const render_1 = require("./render");
 const decorateStory_1 = __importDefault(require("./decorateStory"));
 __exportStar(require("./public-types"), exports);
-const FRAMEWORK = 'angular';
+const RENDERER = 'angular';
 const api = (0, core_client_1.start)(render_1.renderToCanvas, { decorateStory: decorateStory_1.default, render: render_1.render });
 const storiesOf = (kind, m) => {
     return api.clientApi.storiesOf(kind, m).addParameters({
-        framework: FRAMEWORK,
+        renderer: RENDERER,
     });
 };
 exports.storiesOf = storiesOf;
-const configure = (...args) => api.configure(FRAMEWORK, ...args);
+const configure = (...args) => api.configure(RENDERER, ...args);
 exports.configure = configure;
 exports.forceReRender = api.forceReRender;
 exports.raw = api.clientApi.raw;

package/dist/client/types.d.ts

@@ -5,6 +5,7 @@ export interface NgModuleMetadata {
     imports?: any[];
     schemas?: any[];
     providers?: any[];
+    singletons?: any[];
 }
 export interface ICollection {
     [p: string]: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "7.0.0-beta.50",
+  "version": "7.0.0-beta.52",
   "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-beta.50",
-    "@storybook/cli": "7.0.0-beta.50",
-    "@storybook/client-logger": "7.0.0-beta.50",
-    "@storybook/core-client": "7.0.0-beta.50",
-    "@storybook/core-common": "7.0.0-beta.50",
-    "@storybook/core-events": "7.0.0-beta.50",
-    "@storybook/core-server": "7.0.0-beta.50",
-    "@storybook/core-webpack": "7.0.0-beta.50",
-    "@storybook/docs-tools": "7.0.0-beta.50",
+    "@storybook/builder-webpack5": "7.0.0-beta.52",
+    "@storybook/cli": "7.0.0-beta.52",
+    "@storybook/client-logger": "7.0.0-beta.52",
+    "@storybook/core-client": "7.0.0-beta.52",
+    "@storybook/core-common": "7.0.0-beta.52",
+    "@storybook/core-events": "7.0.0-beta.52",
+    "@storybook/core-server": "7.0.0-beta.52",
+    "@storybook/core-webpack": "7.0.0-beta.52",
+    "@storybook/docs-tools": "7.0.0-beta.52",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.0.0-beta.50",
-    "@storybook/node-logger": "7.0.0-beta.50",
-    "@storybook/preview-api": "7.0.0-beta.50",
-    "@storybook/types": "7.0.0-beta.50",
+    "@storybook/manager-api": "7.0.0-beta.52",
+    "@storybook/node-logger": "7.0.0-beta.52",
+    "@storybook/preview-api": "7.0.0-beta.52",
+    "@storybook/types": "7.0.0-beta.52",
     "@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": "ecbe308bda919d3cc60188dbb17dc4511f6b7a0e"
+  "gitHead": "1f559ed69a4fdd8eeb88e4190b16a8932104908e"
 }

package/template/stories/others/app-initializer-use-factory/app-initializer-use-factory.stories.ts

@@ -0,0 +1,34 @@
+import { moduleMetadata, Meta } from '@storybook/angular';
+import { APP_INITIALIZER } from '@angular/core';
+import { action } from '@storybook/addon-actions';
+import Button from '../../button.component';
+
+const meta: Meta<Button> = {
+  component: Button,
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+  }),
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: APP_INITIALIZER,
+          useFactory: () => {
+            return action('APP_INITIALIZER useFactory called successfully');
+          },
+          multi: true,
+        },
+      ],
+    }),
+  ],
+};
+
+export default meta;
+
+export const Default = {
+  args: {
+    text: 'Button',
+  },
+};