@storybook/angular 7.0.0-beta.9 → 7.0.0-rc.0

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

@@ -26,36 +26,24 @@ var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AbstractRenderer = void 0;
 const core_1 = require("@angular/core");
-const platform_browser_dynamic_1 = require("@angular/platform-browser-dynamic");
+const platform_browser_1 = require("@angular/platform-browser");
 const rxjs_1 = require("rxjs");
 const telejson_1 = require("telejson");
 const StorybookModule_1 = require("./StorybookModule");
-// platform must be init only if render is called at least once
-let platformRef;
-function getPlatform(newPlatform) {
-    if (!platformRef || newPlatform) {
-        platformRef = (0, platform_browser_dynamic_1.platformBrowserDynamic)();
-    }
-    return platformRef;
-}
+const StorybookProvider_1 = require("./StorybookProvider");
+const StorybookWrapperComponent_1 = require("./StorybookWrapperComponent");
+const PropertyExtractor_1 = require("./utils/PropertyExtractor");
+const applicationRefs = new Set();
 class AbstractRenderer {
     /**
      * Wait and destroy the platform
      */
-    static resetPlatformBrowserDynamic() {
-        return new Promise((resolve) => {
-            if (platformRef && !platformRef.destroyed) {
-                platformRef.onDestroy(async () => {
-                    resolve();
-                });
-                // Destroys the current Angular platform and all Angular applications on the page.
-                // So call each angular ngOnDestroy and avoid memory leaks
-                platformRef.destroy();
-                return;
+    static resetApplications() {
+        StorybookWrapperComponent_1.componentNgModules.clear();
+        applicationRefs.forEach((appRef) => {
+            if (!appRef.destroyed) {
+                appRef.destroy();
             }
-            resolve();
-        }).then(() => {
-            getPlatform(true);
         });
     }
     constructor(storyId) {
@@ -82,12 +70,13 @@ class AbstractRenderer {
      * @param parameters {Parameters}
      */
     async render({ storyFnAngular, forced, parameters, component, targetDOMNode, }) {
-        const targetSelector = `${this.generateTargetSelectorFromStoryId()}`;
+        const targetSelector = this.generateTargetSelectorFromStoryId(targetDOMNode.id);
         const newStoryProps$ = new rxjs_1.BehaviorSubject(storyFnAngular.props);
-        const moduleMetadata = (0, StorybookModule_1.getStorybookModuleMetadata)({ storyFnAngular, component, targetSelector }, newStoryProps$);
         if (!this.fullRendererRequired({
             storyFnAngular,
-            moduleMetadata,
+            moduleMetadata: {
+                ...storyFnAngular.moduleMetadata,
+            },
             forced,
         })) {
             this.storyProps$.next(storyFnAngular.props);
@@ -100,7 +89,20 @@ class AbstractRenderer {
         }
         this.storyProps$ = newStoryProps$;
         this.initAngularRootElement(targetDOMNode, targetSelector);
-        await getPlatform().bootstrapModule((0, StorybookModule_1.createStorybookModule)(moduleMetadata), parameters.bootstrapModuleOptions ?? undefined);
+        const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor(storyFnAngular.moduleMetadata, component);
+        const providers = [
+            // Providers for BrowserAnimations & NoopAnimationsModule
+            analyzedMetadata.singletons,
+            (0, core_1.importProvidersFrom)(...analyzedMetadata.imports.filter((imported) => {
+                const { isStandalone } = PropertyExtractor_1.PropertyExtractor.analyzeDecorators(imported);
+                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);
         await this.afterFullRender();
     }
     /**
@@ -115,12 +117,10 @@ class AbstractRenderer {
      * @protected
      * @memberof AbstractRenderer
      */
-    generateTargetSelectorFromStoryId() {
+    generateTargetSelectorFromStoryId(id) {
         const invalidHtmlTag = /[^A-Za-z0-9-]/g;
-        const storyIdIsInvalidHtmlTagName = invalidHtmlTag.test(this.storyId);
-        return storyIdIsInvalidHtmlTagName
-            ? `sb-${this.storyId.replace(invalidHtmlTag, '')}-component`
-            : this.storyId;
+        const storyIdIsInvalidHtmlTagName = invalidHtmlTag.test(id);
+        return storyIdIsInvalidHtmlTagName ? `sb-${id.replace(invalidHtmlTag, '')}-component` : id;
     }
     initAngularRootElement(targetDOMNode, targetSelector) {
         // Adds DOM element that angular will use as bootstrap component

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

@@ -7,7 +7,7 @@ class CanvasRenderer extends AbstractRenderer_1.AbstractRenderer {
         await super.render(options);
     }
     async beforeFullRender() {
-        await CanvasRenderer.resetPlatformBrowserDynamic();
+        CanvasRenderer.resetApplications();
     }
     async afterFullRender() {
         await AbstractRenderer_1.AbstractRenderer.resetCompiledComponents();

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

@@ -18,7 +18,7 @@ class DocsRenderer extends AbstractRenderer_1.AbstractRenderer {
          *
          */
         channel.once(core_events_1.STORY_CHANGED, async () => {
-            await DocsRenderer.resetPlatformBrowserDynamic();
+            await DocsRenderer.resetApplications();
         });
         /**
          * Destroy and recreate the PlatformBrowserDynamic of angular
@@ -26,11 +26,13 @@ class DocsRenderer extends AbstractRenderer_1.AbstractRenderer {
          * for previous component
          */
         channel.once(core_events_1.DOCS_RENDERED, async () => {
-            await DocsRenderer.resetPlatformBrowserDynamic();
+            await DocsRenderer.resetApplications();
         });
         await super.render({ ...options, forced: false });
     }
-    async beforeFullRender() { }
+    async beforeFullRender() {
+        DocsRenderer.resetApplications();
+    }
     async afterFullRender() {
         await AbstractRenderer_1.AbstractRenderer.resetCompiledComponents();
     }

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

@@ -9,6 +9,7 @@ class RendererFactory {
         this.rendererMap = new Map();
     }
     async getRendererInstance(storyId, targetDOMNode) {
+        const targetId = targetDOMNode.id;
         // do nothing if the target node is null
         // fix a problem when the docs asks 2 times the same component at the same time
         // the 1st targetDOMNode of the 1st requested rendering becomes null 🤷‍♂️
@@ -18,15 +19,15 @@ class RendererFactory {
         const renderType = (0, exports.getRenderType)(targetDOMNode);
         // keep only instances of the same type
         if (this.lastRenderType && this.lastRenderType !== renderType) {
-            await AbstractRenderer_1.AbstractRenderer.resetPlatformBrowserDynamic();
+            await AbstractRenderer_1.AbstractRenderer.resetApplications();
             clearRootHTMLElement(renderType);
             this.rendererMap.clear();
         }
-        if (!this.rendererMap.has(storyId)) {
-            this.rendererMap.set(storyId, this.buildRenderer(storyId, renderType));
+        if (!this.rendererMap.has(targetId)) {
+            this.rendererMap.set(targetId, this.buildRenderer(storyId, renderType));
         }
         this.lastRenderType = renderType;
-        return this.rendererMap.get(storyId);
+        return this.rendererMap.get(targetId);
     }
     buildRenderer(storyId, renderType) {
         if (renderType === 'docs') {

package/dist/client/angular-beta/StorybookModule.d.ts

@@ -1,9 +1,6 @@
-import { Type, NgModule } from '@angular/core';
-import { Subject } from 'rxjs';
-import { ICollection, StoryFnAngularReturnType } from '../types';
-export declare const getStorybookModuleMetadata: ({ storyFnAngular, component, targetSelector, }: {
+import { StoryFnAngularReturnType } from '../types';
+export declare const getApplication: ({ storyFnAngular, component, targetSelector, }: {
     storyFnAngular: StoryFnAngularReturnType;
     component?: any;
     targetSelector: string;
-}, storyProps$: Subject<ICollection>) => NgModule;
-export declare const createStorybookModule: (ngModule: NgModule) => Type<unknown>;
+}) => import("@angular/core").Type<any>;

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

@@ -1,20 +1,9 @@
 "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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createStorybookModule = exports.getStorybookModuleMetadata = void 0;
-const core_1 = require("@angular/core");
-const platform_browser_1 = require("@angular/platform-browser");
-const StorybookProvider_1 = require("./StorybookProvider");
-const NgModulesAnalyzer_1 = require("./utils/NgModulesAnalyzer");
-const NgComponentAnalyzer_1 = require("./utils/NgComponentAnalyzer");
+exports.getApplication = void 0;
 const StorybookWrapperComponent_1 = require("./StorybookWrapperComponent");
 const ComputesTemplateFromComponent_1 = require("./ComputesTemplateFromComponent");
-const getStorybookModuleMetadata = ({ storyFnAngular, component, targetSelector, }, storyProps$) => {
+const getApplication = ({ storyFnAngular, component, targetSelector, }) => {
     const { props, styles, moduleMetadata = {} } = storyFnAngular;
     let { template } = storyFnAngular;
     const hasTemplate = !hasNoTemplate(template);
@@ -24,39 +13,9 @@ const getStorybookModuleMetadata = ({ storyFnAngular, component, targetSelector,
     /**
      * Create a component that wraps generated template and gives it props
      */
-    const ComponentToInject = (0, StorybookWrapperComponent_1.createStorybookWrapperComponent)(targetSelector, template, component, styles, props);
-    const isStandalone = (0, NgComponentAnalyzer_1.isStandaloneComponent)(component);
-    // Look recursively (deep) if the component is not already declared by an import module
-    const requiresComponentDeclaration = (0, NgComponentAnalyzer_1.isDeclarable)(component) &&
-        !(0, NgModulesAnalyzer_1.isComponentAlreadyDeclaredInModules)(component, moduleMetadata.declarations, moduleMetadata.imports) &&
-        !isStandalone;
-    return {
-        declarations: [
-            ...(requiresComponentDeclaration ? [component] : []),
-            ComponentToInject,
-            ...(moduleMetadata.declarations ?? []),
-        ],
-        imports: [
-            platform_browser_1.BrowserModule,
-            ...(isStandalone ? [component] : []),
-            ...(moduleMetadata.imports ?? []),
-        ],
-        providers: [(0, StorybookProvider_1.storyPropsProvider)(storyProps$), ...(moduleMetadata.providers ?? [])],
-        entryComponents: [...(moduleMetadata.entryComponents ?? [])],
-        schemas: [...(moduleMetadata.schemas ?? [])],
-        bootstrap: [ComponentToInject],
-    };
-};
-exports.getStorybookModuleMetadata = getStorybookModuleMetadata;
-const createStorybookModule = (ngModule) => {
-    let StorybookModule = class StorybookModule {
-    };
-    StorybookModule = __decorate([
-        (0, core_1.NgModule)(ngModule)
-    ], StorybookModule);
-    return StorybookModule;
+    return (0, StorybookWrapperComponent_1.createStorybookWrapperComponent)(targetSelector, template, component, styles, moduleMetadata, props);
 };
-exports.createStorybookModule = createStorybookModule;
+exports.getApplication = getApplication;
 function hasNoTemplate(template) {
     return template === null || template === undefined;
 }

package/dist/client/angular-beta/StorybookModule.test.js

@@ -11,9 +11,9 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const core_1 = require("@angular/core");
 const testing_1 = require("@angular/core/testing");
-const platform_browser_1 = require("@angular/platform-browser");
 const rxjs_1 = require("rxjs");
 const StorybookModule_1 = require("./StorybookModule");
+const StorybookProvider_1 = require("./StorybookProvider");
 describe('StorybookModule', () => {
     describe('getStorybookModuleMetadata', () => {
         describe('with simple component', () => {
@@ -70,12 +70,15 @@ describe('StorybookModule', () => {
                     localProperty: 'localProperty',
                     localFunction: () => 'localFunction',
                 };
-                const ngModule = (0, StorybookModule_1.getStorybookModuleMetadata)({
+                const application = (0, StorybookModule_1.getApplication)({
                     storyFnAngular: { props },
                     component: FooComponent,
                     targetSelector: 'my-selector',
-                }, new rxjs_1.BehaviorSubject(props));
-                const { fixture } = await configureTestingModule(ngModule);
+                });
+                const { fixture } = await configureTestingModule({
+                    imports: [application],
+                    providers: [(0, StorybookProvider_1.storyPropsProvider)(new rxjs_1.BehaviorSubject(props))],
+                });
                 fixture.detectChanges();
                 expect(fixture.nativeElement.querySelector('p#input').innerHTML).toEqual(props.input);
                 expect(fixture.nativeElement.querySelector('p#inputBindingPropertyName').innerHTML).toEqual(props.inputBindingPropertyName);
@@ -93,12 +96,15 @@ describe('StorybookModule', () => {
                         expectedOutputBindingValue = value;
                     },
                 };
-                const ngModule = (0, StorybookModule_1.getStorybookModuleMetadata)({
+                const application = (0, StorybookModule_1.getApplication)({
                     storyFnAngular: { props },
                     component: FooComponent,
                     targetSelector: 'my-selector',
-                }, new rxjs_1.BehaviorSubject(props));
-                const { fixture } = await configureTestingModule(ngModule);
+                });
+                const { fixture } = await configureTestingModule({
+                    imports: [application],
+                    providers: [(0, StorybookProvider_1.storyPropsProvider)(new rxjs_1.BehaviorSubject(props))],
+                });
                 fixture.detectChanges();
                 fixture.nativeElement.querySelector('p#output').click();
                 fixture.nativeElement.querySelector('p#outputBindingPropertyName').click();
@@ -111,12 +117,15 @@ describe('StorybookModule', () => {
                     inputBindingPropertyName: '',
                 };
                 const storyProps$ = new rxjs_1.BehaviorSubject(initialProps);
-                const ngModule = (0, StorybookModule_1.getStorybookModuleMetadata)({
+                const application = (0, StorybookModule_1.getApplication)({
                     storyFnAngular: { props: initialProps },
                     component: FooComponent,
                     targetSelector: 'my-selector',
-                }, storyProps$);
-                const { fixture } = await configureTestingModule(ngModule);
+                });
+                const { fixture } = await configureTestingModule({
+                    imports: [application],
+                    providers: [(0, StorybookProvider_1.storyPropsProvider)(storyProps$)],
+                });
                 fixture.detectChanges();
                 expect(fixture.nativeElement.querySelector('p#input').innerHTML).toEqual(initialProps.input);
                 expect(fixture.nativeElement.querySelector('p#inputBindingPropertyName').innerHTML).toEqual('');
@@ -146,12 +155,15 @@ describe('StorybookModule', () => {
                     },
                 };
                 const storyProps$ = new rxjs_1.BehaviorSubject(initialProps);
-                const ngModule = (0, StorybookModule_1.getStorybookModuleMetadata)({
+                const application = (0, StorybookModule_1.getApplication)({
                     storyFnAngular: { props: initialProps },
                     component: FooComponent,
                     targetSelector: 'my-selector',
-                }, storyProps$);
-                const { fixture } = await configureTestingModule(ngModule);
+                });
+                const { fixture } = await configureTestingModule({
+                    imports: [application],
+                    providers: [(0, StorybookProvider_1.storyPropsProvider)(storyProps$)],
+                });
                 fixture.detectChanges();
                 const newProps = {
                     input: 'new input',
@@ -176,15 +188,18 @@ describe('StorybookModule', () => {
                     input: 'input',
                 };
                 const storyProps$ = new rxjs_1.BehaviorSubject(initialProps);
-                const ngModule = (0, StorybookModule_1.getStorybookModuleMetadata)({
+                const application = (0, StorybookModule_1.getApplication)({
                     storyFnAngular: {
                         props: initialProps,
                         template: '<p [style.color]="color"><foo [input]="input"></foo></p>',
                     },
                     component: FooComponent,
                     targetSelector: 'my-selector',
-                }, storyProps$);
-                const { fixture } = await configureTestingModule(ngModule);
+                });
+                const { fixture } = await configureTestingModule({
+                    imports: [application],
+                    providers: [(0, StorybookProvider_1.storyPropsProvider)(storyProps$)],
+                });
                 fixture.detectChanges();
                 expect(fixture.nativeElement.querySelector('p').style.color).toEqual('red');
                 expect(fixture.nativeElement.querySelector('p#input').innerHTML).toEqual(initialProps.input);
@@ -202,12 +217,15 @@ describe('StorybookModule', () => {
                     setter: 'init',
                 };
                 const storyProps$ = new rxjs_1.BehaviorSubject(initialProps);
-                const ngModule = (0, StorybookModule_1.getStorybookModuleMetadata)({
+                const application = (0, StorybookModule_1.getApplication)({
                     storyFnAngular: { props: initialProps },
                     component: FooComponent,
                     targetSelector: 'my-selector',
-                }, storyProps$);
-                const { fixture } = await configureTestingModule(ngModule);
+                });
+                const { fixture } = await configureTestingModule({
+                    imports: [application],
+                    providers: [(0, StorybookProvider_1.storyPropsProvider)(storyProps$)],
+                });
                 fixture.detectChanges();
                 expect(fixture.nativeElement.querySelector('p#setterCallNb').innerHTML).toEqual('1');
                 const newProps = {
@@ -228,15 +246,18 @@ describe('StorybookModule', () => {
             ], WithoutSelectorComponent);
             it('should display the component', async () => {
                 const props = {};
-                const ngModule = (0, StorybookModule_1.getStorybookModuleMetadata)({
+                const application = (0, StorybookModule_1.getApplication)({
                     storyFnAngular: {
                         props,
                         moduleMetadata: { entryComponents: [WithoutSelectorComponent] },
                     },
                     component: WithoutSelectorComponent,
                     targetSelector: 'my-selector',
-                }, new rxjs_1.BehaviorSubject(props));
-                const { fixture } = await configureTestingModule(ngModule);
+                });
+                const { fixture } = await configureTestingModule({
+                    imports: [application],
+                    providers: [(0, StorybookProvider_1.storyPropsProvider)(new rxjs_1.BehaviorSubject(props))],
+                });
                 fixture.detectChanges();
                 expect(fixture.nativeElement.innerHTML).toContain('The content');
             });
@@ -250,28 +271,22 @@ describe('StorybookModule', () => {
                     template: `Should not be displayed`,
                 })
             ], FooComponent);
-            const ngModule = (0, StorybookModule_1.getStorybookModuleMetadata)({
+            const application = (0, StorybookModule_1.getApplication)({
                 storyFnAngular: { template: '' },
                 component: FooComponent,
                 targetSelector: 'my-selector',
-            }, new rxjs_1.BehaviorSubject({}));
-            const { fixture } = await configureTestingModule(ngModule);
+            });
+            const { fixture } = await configureTestingModule({
+                imports: [application],
+                providers: [(0, StorybookProvider_1.storyPropsProvider)(new rxjs_1.BehaviorSubject({}))],
+            });
             fixture.detectChanges();
             expect(fixture.nativeElement.innerHTML).toEqual('');
         });
     });
     async function configureTestingModule(ngModule) {
-        await testing_1.TestBed.configureTestingModule({
-            declarations: ngModule.declarations,
-            providers: ngModule.providers,
-        })
-            .overrideModule(platform_browser_1.BrowserModule, {
-            set: {
-                entryComponents: [...ngModule.entryComponents],
-            },
-        })
-            .compileComponents();
-        const fixture = testing_1.TestBed.createComponent(ngModule.bootstrap[0]);
+        await testing_1.TestBed.configureTestingModule(ngModule).compileComponents();
+        const fixture = testing_1.TestBed.createComponent(ngModule.imports[0]);
         return {
             fixture,
         };

package/dist/client/angular-beta/StorybookWrapperComponent.d.ts

@@ -1,9 +1,10 @@
 import { Type } from '@angular/core';
-import { ICollection } from '../types';
+import { ICollection, NgModuleMetadata } from '../types';
+export declare const componentNgModules: Map<any, Type<any>>;
 /**
  * Wraps the story template into a component
  *
  * @param storyComponent
  * @param initialProps
  */
-export declare const createStorybookWrapperComponent: (selector: string, template: string, storyComponent: Type<unknown> | undefined, styles: string[], initialProps?: ICollection) => Type<any>;
+export declare const createStorybookWrapperComponent: (selector: string, template: string, storyComponent: Type<unknown> | undefined, styles: string[], moduleMetadata: NgModuleMetadata, initialProps?: ICollection) => Type<any>;

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

@@ -12,12 +12,13 @@ var __param = (this && this.__param) || function (paramIndex, decorator) {
     return function (target, key) { decorator(target, key, paramIndex); }
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createStorybookWrapperComponent = void 0;
+exports.createStorybookWrapperComponent = exports.componentNgModules = void 0;
 const core_1 = require("@angular/core");
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
 const StorybookProvider_1 = require("./StorybookProvider");
 const NgComponentAnalyzer_1 = require("./utils/NgComponentAnalyzer");
+const PropertyExtractor_1 = require("./utils/PropertyExtractor");
 const getNonInputsOutputsProps = (ngComponentInputsOutputs, props = {}) => {
     const inputs = ngComponentInputsOutputs.inputs
         .filter((i) => i.templateName in props)
@@ -27,16 +28,38 @@ const getNonInputsOutputsProps = (ngComponentInputsOutputs, props = {}) => {
         .map((o) => o.templateName);
     return Object.keys(props).filter((k) => ![...inputs, ...outputs].includes(k));
 };
+// component modules cache
+exports.componentNgModules = new Map();
 /**
  * Wraps the story template into a component
  *
  * @param storyComponent
  * @param initialProps
  */
-const createStorybookWrapperComponent = (selector, template, storyComponent, styles, initialProps) => {
+const createStorybookWrapperComponent = (selector, template, storyComponent, styles, moduleMetadata, initialProps) => {
     // 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 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
+    // Providers are added on every story change to allow for story-specific providers
+    let ngModule = exports.componentNgModules.get(storyComponent);
+    if (!ngModule) {
+        let StorybookComponentModule = class StorybookComponentModule {
+        };
+        StorybookComponentModule = __decorate([
+            (0, core_1.NgModule)({
+                declarations,
+                imports,
+                exports: [...declarations, ...imports],
+            })
+        ], StorybookComponentModule);
+        exports.componentNgModules.set(storyComponent, StorybookComponentModule);
+        ngModule = exports.componentNgModules.get(storyComponent);
+    }
     let StorybookWrapperComponent = class StorybookWrapperComponent {
         constructor(storyProps$, changeDetectorRef) {
             this.storyProps$ = storyProps$;
@@ -104,9 +127,14 @@ const createStorybookWrapperComponent = (selector, template, storyComponent, sty
         (0, core_1.Component)({
             selector,
             template,
+            standalone: true,
+            imports: [ngModule],
+            providers,
             styles,
+            schemas: moduleMetadata.schemas,
         }),
         __param(0, (0, core_1.Inject)(StorybookProvider_1.STORY_PROPS)),
+        __param(1, (0, core_1.Inject)(core_1.ChangeDetectorRef)),
         __metadata("design:paramtypes", [rxjs_1.Subject,
             core_1.ChangeDetectorRef])
     ], StorybookWrapperComponent);

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

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

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

@@ -0,0 +1,20 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithOfficialModule = void 0;
+const common_1 = require("@angular/common");
+const http_1 = require("@angular/common/http");
+const core_1 = require("@angular/core");
+let WithOfficialModule = class WithOfficialModule {
+};
+WithOfficialModule = __decorate([
+    (0, core_1.NgModule)({
+        imports: [common_1.CommonModule, http_1.HttpClientModule],
+    })
+], WithOfficialModule);
+exports.WithOfficialModule = WithOfficialModule;

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

@@ -76,7 +76,7 @@ const isStandaloneComponent = (component) => {
     const decorators = reflectionCapabilities.annotations(component);
     // TODO: `standalone` is only available in Angular v14. Remove cast to `any` once
     // Angular deps are updated to v14.x.x.
-    return (decorators || []).some((d) => d instanceof core_1.Component && d.standalone);
+    return (decorators || []).some((d) => (d instanceof core_1.Component || d instanceof core_1.Directive || d instanceof core_1.Pipe) && d.standalone);
 };
 exports.isStandaloneComponent = isStandaloneComponent;
 /**

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

@@ -252,8 +252,6 @@ describe('isComponent', () => {
 });
 describe('isStandaloneComponent', () => {
     it('should return true with a Component with "standalone: true"', () => {
-        // TODO: `standalone` is only available in Angular v14. Remove cast to `any` once
-        // Angular deps are updated to v14.x.x.
         let FooComponent = class FooComponent {
         };
         FooComponent = __decorate([
@@ -262,8 +260,6 @@ describe('isStandaloneComponent', () => {
         expect((0, NgComponentAnalyzer_1.isStandaloneComponent)(FooComponent)).toEqual(true);
     });
     it('should return false with a Component with "standalone: false"', () => {
-        // TODO: `standalone` is only available in Angular v14. Remove cast to `any` once
-        // Angular deps are updated to v14.x.x.
         let FooComponent = class FooComponent {
         };
         FooComponent = __decorate([
@@ -284,7 +280,23 @@ describe('isStandaloneComponent', () => {
         }
         expect((0, NgComponentAnalyzer_1.isStandaloneComponent)(FooPipe)).toEqual(false);
     });
-    it('should return false with Directive', () => {
+    it('should return true with a Directive with "standalone: true"', () => {
+        let FooDirective = class FooDirective {
+        };
+        FooDirective = __decorate([
+            (0, core_1.Directive)({ standalone: true })
+        ], FooDirective);
+        expect((0, NgComponentAnalyzer_1.isStandaloneComponent)(FooDirective)).toEqual(true);
+    });
+    it('should return false with a Directive with "standalone: false"', () => {
+        let FooDirective = class FooDirective {
+        };
+        FooDirective = __decorate([
+            (0, core_1.Directive)({ standalone: false })
+        ], FooDirective);
+        expect((0, NgComponentAnalyzer_1.isStandaloneComponent)(FooDirective)).toEqual(false);
+    });
+    it('should return false with Directive without the "standalone" property', () => {
         let FooDirective = class FooDirective {
         };
         FooDirective = __decorate([
@@ -292,6 +304,32 @@ describe('isStandaloneComponent', () => {
         ], FooDirective);
         expect((0, NgComponentAnalyzer_1.isStandaloneComponent)(FooDirective)).toEqual(false);
     });
+    it('should return true with a Pipe with "standalone: true"', () => {
+        let FooPipe = class FooPipe {
+        };
+        FooPipe = __decorate([
+            (0, core_1.Pipe)({ name: 'FooPipe', standalone: true })
+        ], FooPipe);
+        expect((0, NgComponentAnalyzer_1.isStandaloneComponent)(FooPipe)).toEqual(true);
+    });
+    it('should return false with a Pipe with "standalone: false"', () => {
+        let FooPipe = class FooPipe {
+        };
+        FooPipe = __decorate([
+            (0, core_1.Pipe)({ name: 'FooPipe', standalone: false })
+        ], FooPipe);
+        expect((0, NgComponentAnalyzer_1.isStandaloneComponent)(FooPipe)).toEqual(false);
+    });
+    it('should return false with Pipe without the "standalone" property', () => {
+        let FooPipe = class FooPipe {
+        };
+        FooPipe = __decorate([
+            (0, core_1.Pipe)({
+                name: 'fooPipe',
+            })
+        ], FooPipe);
+        expect((0, NgComponentAnalyzer_1.isStandaloneComponent)(FooPipe)).toEqual(false);
+    });
 });
 describe('getComponentDecoratorMetadata', () => {
     it('should return Component with a Component', () => {

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

@@ -3,4 +3,4 @@
  *
  * Checks recursively if the component has already been declared in all import Module
  */
-export declare const isComponentAlreadyDeclaredInModules: (componentToFind: any, moduleDeclarations: any[], moduleImports: any[]) => boolean;
+export declare const isComponentAlreadyDeclared: (componentToFind: any, moduleDeclarations: any[], moduleImports: any[]) => boolean;