@storybook/angular 0.0.0-pr-23609-sha-f47ef339

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

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 PropertyExtractor_1 = require("./PropertyExtractor");
+const test_module_1 = require("../__testfixtures__/test.module");
+const TEST_TOKEN = new core_1.InjectionToken('testToken');
+const TestTokenProvider = { provide: TEST_TOKEN, useValue: 123 };
+const TestService = (0, core_1.Injectable)()(class {
+});
+const TestComponent1 = (0, core_1.Component)({})(class {
+});
+const TestComponent2 = (0, core_1.Component)({})(class {
+});
+const StandaloneTestComponent = (0, core_1.Component)({ standalone: true })(class {
+});
+const TestDirective = (0, core_1.Directive)({})(class {
+});
+const TestModuleWithDeclarations = (0, core_1.NgModule)({ declarations: [TestComponent1] })(class {
+});
+const TestModuleWithImportsAndProviders = (0, core_1.NgModule)({
+    imports: [TestModuleWithDeclarations],
+    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 extractApplicationProviders = (metadata, component) => {
+    const { applicationProviders } = new PropertyExtractor_1.PropertyExtractor(metadata, component);
+    return applicationProviders;
+};
+describe('PropertyExtractor', () => {
+    jest.spyOn(console, 'warn').mockImplementation(() => { });
+    describe('analyzeMetadata', () => {
+        it('should remove BrowserModule', () => {
+            const metadata = {
+                imports: [platform_browser_1.BrowserModule],
+            };
+            const { imports, providers, applicationProviders } = analyzeMetadata(metadata);
+            expect(imports.flat(Number.MAX_VALUE)).toEqual([common_1.CommonModule]);
+            expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
+            expect(applicationProviders.flat(Number.MAX_VALUE)).toEqual([]);
+        });
+        it('should remove BrowserAnimationsModule and use its providers instead', () => {
+            const metadata = {
+                imports: [animations_1.BrowserAnimationsModule],
+            };
+            const { imports, providers, applicationProviders } = analyzeMetadata(metadata);
+            expect(imports.flat(Number.MAX_VALUE)).toEqual([common_1.CommonModule]);
+            expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
+            expect(applicationProviders.flat(Number.MAX_VALUE)).toEqual((0, animations_1.provideAnimations)());
+        });
+        it('should remove NoopAnimationsModule and use its providers instead', () => {
+            const metadata = {
+                imports: [animations_1.NoopAnimationsModule],
+            };
+            const { imports, providers, applicationProviders } = analyzeMetadata(metadata);
+            expect(imports.flat(Number.MAX_VALUE)).toEqual([common_1.CommonModule]);
+            expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
+            expect(applicationProviders.flat(Number.MAX_VALUE)).toEqual((0, animations_1.provideNoopAnimations)());
+        });
+        it('should remove Browser/Animations modules recursively', () => {
+            const metadata = {
+                imports: [animations_1.BrowserAnimationsModule, platform_browser_1.BrowserModule],
+            };
+            const { imports, providers, applicationProviders } = analyzeMetadata(metadata);
+            expect(imports.flat(Number.MAX_VALUE)).toEqual([common_1.CommonModule]);
+            expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
+            expect(applicationProviders.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, applicationProviders } = analyzeMetadata(metadata);
+            expect(imports.flat(Number.MAX_VALUE)).toEqual([common_1.CommonModule, test_module_1.WithOfficialModule]);
+            expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
+            expect(applicationProviders.flat(Number.MAX_VALUE)).toEqual([]);
+        });
+    });
+    describe('extractImports', () => {
+        it('should return Angular official modules', () => {
+            const imports = extractImports({ imports: [TestModuleWithImportsAndProviders] });
+            expect(imports).toEqual([common_1.CommonModule, TestModuleWithImportsAndProviders]);
+        });
+        it('should return standalone components', () => {
+            const imports = extractImports({
+                imports: [TestModuleWithImportsAndProviders],
+            }, StandaloneTestComponent);
+            expect(imports).toEqual([
+                common_1.CommonModule,
+                TestModuleWithImportsAndProviders,
+                StandaloneTestComponent,
+            ]);
+        });
+    });
+    describe('extractDeclarations', () => {
+        it('should return an array of declarations that contains `storyComponent`', () => {
+            const declarations = extractDeclarations({ declarations: [TestComponent1] }, TestComponent2);
+            expect(declarations).toEqual([TestComponent1, TestComponent2]);
+        });
+    });
+    describe('analyzeDecorators', () => {
+        it('isStandalone should be false', () => {
+            const { isStandalone } = PropertyExtractor_1.PropertyExtractor.analyzeDecorators(TestComponent1);
+            expect(isStandalone).toBe(false);
+        });
+        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 = extractProviders({
+                providers: [TestService],
+            });
+            expect(providers).toEqual([TestService]);
+        });
+        it('should return an array of singletons extracted', () => {
+            const singeltons = extractApplicationProviders({
+                imports: [animations_1.BrowserAnimationsModule],
+            });
+            expect(singeltons).toEqual((0, animations_1.provideAnimations)());
+        });
+    });
+});

package/dist/client/config.d.ts

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

package/dist/client/config.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parameters = exports.applyDecorators = exports.renderToCanvas = exports.render = void 0;
+require("./globals");
+var render_1 = require("./render");
+Object.defineProperty(exports, "render", { enumerable: true, get: function () { return render_1.render; } });
+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 = { renderer: 'angular' };

package/dist/client/decorateStory.d.ts

@@ -0,0 +1,4 @@
+import { DecoratorFunction, LegacyStoryFn } from '@storybook/types';
+import { AngularRenderer } from './types';
+export default function decorateStory(mainStoryFn: LegacyStoryFn<AngularRenderer>, decorators: DecoratorFunction<AngularRenderer>[]): LegacyStoryFn<AngularRenderer>;
+export { decorateStory };

package/dist/client/decorateStory.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.decorateStory = void 0;
+const preview_api_1 = require("@storybook/preview-api");
+const ComputesTemplateFromComponent_1 = require("./angular-beta/ComputesTemplateFromComponent");
+function decorateStory(mainStoryFn, decorators) {
+    const returnDecorators = [cleanArgsDecorator, ...decorators].reduce((previousStoryFn, decorator) => (context) => {
+        const decoratedStory = decorator((update) => {
+            return previousStoryFn({
+                ...context,
+                ...(0, preview_api_1.sanitizeStoryContextUpdate)(update),
+            });
+        }, context);
+        return decoratedStory;
+    }, (context) => prepareMain(mainStoryFn(context), context));
+    return returnDecorators;
+}
+exports.default = decorateStory;
+exports.decorateStory = decorateStory;
+const prepareMain = (story, context) => {
+    let { template } = story;
+    const { component } = context;
+    const userDefinedTemplate = !hasNoTemplate(template);
+    if (!userDefinedTemplate && component) {
+        template = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, story.props, '');
+    }
+    return {
+        ...story,
+        ...(template ? { template, userDefinedTemplate } : {}),
+    };
+};
+function hasNoTemplate(template) {
+    return template === null || template === undefined;
+}
+const cleanArgsDecorator = (storyFn, context) => {
+    if (!context.argTypes || !context.args) {
+        return storyFn();
+    }
+    const argsToClean = context.args;
+    context.args = Object.entries(argsToClean).reduce((obj, [key, arg]) => {
+        const argType = context.argTypes[key];
+        // Only keeps args with a control or an action in argTypes
+        if (argType?.action || argType?.control) {
+            return { ...obj, [key]: arg };
+        }
+        return obj;
+    }, {});
+    return storyFn();
+};

package/dist/client/decorateStory.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/client/decorateStory.test.js

@@ -0,0 +1,304 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const core_1 = require("@angular/core");
+const decorators_1 = require("./decorators");
+const decorateStory_1 = __importDefault(require("./decorateStory"));
+describe('decorateStory', () => {
+    describe('angular behavior', () => {
+        it('should use componentWrapperDecorator with args', () => {
+            const decorators = [
+                (0, decorators_1.componentWrapperDecorator)(ParentComponent, ({ args }) => args),
+                (0, decorators_1.componentWrapperDecorator)((story) => `<grandparent [grandparentInput]="grandparentInput">${story}</grandparent>`, ({ args }) => args),
+                (0, decorators_1.componentWrapperDecorator)((story) => `<great-grandparent>${story}</great-grandparent>`),
+            ];
+            const decorated = (0, decorateStory_1.default)(() => ({ template: '</child>' }), decorators);
+            expect(decorated(makeContext({
+                component: FooComponent,
+                args: {
+                    parentInput: 'Parent input',
+                    grandparentInput: 'grandparent input',
+                    parentOutput: () => { },
+                },
+            }))).toEqual({
+                props: {
+                    parentInput: 'Parent input',
+                    grandparentInput: 'grandparent input',
+                    parentOutput: expect.any(Function),
+                },
+                template: '<great-grandparent><grandparent [grandparentInput]="grandparentInput"><parent [parentInput]="parentInput" (parentOutput)="parentOutput($event)"></child></parent></grandparent></great-grandparent>',
+                userDefinedTemplate: true,
+            });
+        });
+        it('should use componentWrapperDecorator with input / output', () => {
+            const decorators = [
+                (0, decorators_1.componentWrapperDecorator)(ParentComponent, {
+                    parentInput: 'Parent input',
+                    parentOutput: () => { },
+                }),
+                (0, decorators_1.componentWrapperDecorator)((story) => `<grandparent [grandparentInput]="grandparentInput">${story}</grandparent>`, {
+                    grandparentInput: 'Grandparent input',
+                    sameInput: 'Should be override by story props',
+                }),
+                (0, decorators_1.componentWrapperDecorator)((story) => `<great-grandparent>${story}</great-grandparent>`),
+            ];
+            const decorated = (0, decorateStory_1.default)(() => ({ template: '</child>', props: { sameInput: 'Story input' } }), decorators);
+            expect(decorated(makeContext({
+                component: FooComponent,
+            }))).toEqual({
+                props: {
+                    parentInput: 'Parent input',
+                    parentOutput: expect.any(Function),
+                    grandparentInput: 'Grandparent input',
+                    sameInput: 'Story input',
+                },
+                template: '<great-grandparent><grandparent [grandparentInput]="grandparentInput"><parent [parentInput]="parentInput" (parentOutput)="parentOutput($event)"></child></parent></grandparent></great-grandparent>',
+                userDefinedTemplate: true,
+            });
+        });
+        it('should use componentWrapperDecorator', () => {
+            const decorators = [
+                (0, decorators_1.componentWrapperDecorator)(ParentComponent),
+                (0, decorators_1.componentWrapperDecorator)((story) => `<grandparent>${story}</grandparent>`),
+                (0, decorators_1.componentWrapperDecorator)((story) => `<great-grandparent>${story}</great-grandparent>`),
+            ];
+            const decorated = (0, decorateStory_1.default)(() => ({ template: '</child>' }), decorators);
+            expect(decorated(makeContext({ component: FooComponent }))).toEqual({
+                template: '<great-grandparent><grandparent><parent></child></parent></grandparent></great-grandparent>',
+                userDefinedTemplate: true,
+            });
+        });
+        it('should use template in preference to component parameters', () => {
+            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)(() => ({ template: '</child>' }), decorators);
+            expect(decorated(makeContext({ component: FooComponent }))).toEqual({
+                template: '<great-grandparent><grandparent><parent></child></parent></grandparent></great-grandparent>',
+                userDefinedTemplate: true,
+            });
+        });
+        it('should include story templates 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)(() => ({ template: '</child>' }), decorators);
+            expect(decorated(makeContext({}))).toEqual({
+                template: '<great-grandparent><grandparent><parent></child></parent></grandparent></great-grandparent>',
+                userDefinedTemplate: true,
+            });
+        });
+        it('should include 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)(() => ({}), decorators);
+            expect(decorated(makeContext({ component: FooComponent }))).toEqual({
+                template: '<great-grandparent><grandparent><parent><foo></foo></parent></grandparent></great-grandparent>',
+                userDefinedTemplate: false,
+            });
+        });
+        it('should keep template with an empty value', () => {
+            const decorators = [
+                (0, decorators_1.componentWrapperDecorator)(ParentComponent),
+            ];
+            const decorated = (0, decorateStory_1.default)(() => ({ template: '' }), decorators);
+            expect(decorated(makeContext({ component: FooComponent }))).toEqual({
+                template: '<parent></parent>',
+            });
+        });
+        it('should only keeps args with a control or an action in argTypes', () => {
+            const decorated = (0, decorateStory_1.default)((context) => ({
+                template: `Args available in the story : ${Object.keys(context.args).join()}`,
+            }), []);
+            expect(decorated(makeContext({
+                component: FooComponent,
+                argTypes: {
+                    withControl: { control: { type: 'object' }, name: 'withControl' },
+                    withAction: { action: 'onClick', name: 'withAction' },
+                    toRemove: { name: 'toRemove' },
+                },
+                args: {
+                    withControl: 'withControl',
+                    withAction: () => ({}),
+                    toRemove: 'toRemove',
+                },
+            }))).toEqual({
+                template: 'Args available in the story : withControl,withAction',
+                userDefinedTemplate: true,
+            });
+        });
+    });
+    describe('default behavior', () => {
+        it('calls decorators in out to in order', () => {
+            const decorators = [
+                (s) => {
+                    const story = s();
+                    return { ...story, props: { a: [...story.props.a, 1] } };
+                },
+                (s) => {
+                    const story = s();
+                    return { ...story, props: { a: [...story.props.a, 2] } };
+                },
+                (s) => {
+                    const story = s();
+                    return { ...story, props: { a: [...story.props.a, 3] } };
+                },
+            ];
+            const decorated = (0, decorateStory_1.default)(() => ({ props: { a: [0] } }), decorators);
+            expect(decorated(makeContext({}))).toEqual({ props: { a: [0, 1, 2, 3] } });
+        });
+        it('passes context through to sub decorators', () => {
+            const decorators = [
+                (s, c) => {
+                    const story = s({ ...c, k: 1 });
+                    return { ...story, props: { a: [...story.props.a, c.k] } };
+                },
+                (s, c) => {
+                    const story = s({ ...c, k: 2 });
+                    return { ...story, props: { a: [...story.props.a, c.k] } };
+                },
+                (s, c) => {
+                    const story = s({ ...c, k: 3 });
+                    return { ...story, props: { a: [...story.props.a, c.k] } };
+                },
+            ];
+            const decorated = (0, decorateStory_1.default)((c) => ({ props: { a: [c.k] } }), decorators);
+            expect(decorated(makeContext({ k: 0 }))).toEqual({ props: { a: [1, 2, 3, 0] } });
+        });
+        it('DOES NOT merge parameter or pass through parameters key in context', () => {
+            const decorators = [
+                (s, c) => {
+                    const story = s({ ...c, k: 1, parameters: { p: 1 } });
+                    return {
+                        ...story,
+                        props: { a: [...story.props.a, c.k], p: [...story.props.p, c.parameters.p] },
+                    };
+                },
+                (s, c) => {
+                    const story = s({ ...c, k: 2, parameters: { p: 2 } });
+                    return {
+                        ...story,
+                        props: { a: [...story.props.a, c.k], p: [...story.props.p, c.parameters.p] },
+                    };
+                },
+                (s, c) => {
+                    const story = s({ ...c, k: 3, parameters: { p: 3 } });
+                    return {
+                        ...story,
+                        props: { a: [...story.props.a, c.k], p: [...story.props.p, c.parameters.p] },
+                    };
+                },
+            ];
+            const decorated = (0, decorateStory_1.default)((c) => ({ props: { a: [c.k], p: [c.parameters.p] } }), decorators);
+            expect(decorated(makeContext({ k: 0, parameters: { p: 0 } }))).toEqual({
+                props: { a: [1, 2, 3, 0], p: [0, 0, 0, 0] },
+            });
+        });
+    });
+});
+function makeContext(input) {
+    return {
+        id: 'id',
+        kind: 'kind',
+        name: 'name',
+        viewMode: 'story',
+        parameters: {},
+        ...input,
+    };
+}
+let FooComponent = class FooComponent {
+};
+FooComponent = __decorate([
+    (0, core_1.Component)({
+        selector: 'foo',
+        template: `foo`,
+    })
+], FooComponent);
+let ParentComponent = class ParentComponent {
+};
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", String)
+], ParentComponent.prototype, "parentInput", void 0);
+__decorate([
+    (0, core_1.Output)(),
+    __metadata("design:type", Object)
+], ParentComponent.prototype, "parentOutput", void 0);
+ParentComponent = __decorate([
+    (0, core_1.Component)({
+        selector: 'parent',
+        template: `<ng-content></ng-content>`,
+    })
+], ParentComponent);

package/dist/client/decorators.d.ts

@@ -0,0 +1,14 @@
+import { Type } from '@angular/core';
+import { ApplicationConfig } from '@angular/platform-browser';
+import { DecoratorFunction, StoryContext } from '@storybook/types';
+import { ICollection, NgModuleMetadata, AngularRenderer } from './types';
+export declare const moduleMetadata: <TArgs = any>(metadata: Partial<NgModuleMetadata>) => DecoratorFunction<AngularRenderer, TArgs>;
+/**
+ * Decorator to set the config options which are available during the application bootstrap operation
+ */
+export declare function applicationConfig<TArgs = any>(
+/**
+ * Set of config options available during the application bootstrap operation.
+ */
+config: ApplicationConfig): DecoratorFunction<AngularRenderer, TArgs>;
+export declare const componentWrapperDecorator: <TArgs = any>(element: Type<unknown> | ((story: string) => string), props?: ICollection | ((storyContext: StoryContext<AngularRenderer, TArgs>) => ICollection) | undefined) => DecoratorFunction<AngularRenderer, TArgs>;

package/dist/client/decorators.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentWrapperDecorator = exports.applicationConfig = exports.moduleMetadata = void 0;
+const ComputesTemplateFromComponent_1 = require("./angular-beta/ComputesTemplateFromComponent");
+const NgComponentAnalyzer_1 = require("./angular-beta/utils/NgComponentAnalyzer");
+// We use `any` here as the default type rather than `Args` because we need something that is
+// castable to any component-specific args type when the user is being careful.
+const moduleMetadata = (metadata) => (storyFn) => {
+    const story = storyFn();
+    const storyMetadata = story.moduleMetadata || {};
+    metadata = metadata || {};
+    return {
+        ...story,
+        moduleMetadata: {
+            declarations: [...(metadata.declarations || []), ...(storyMetadata.declarations || [])],
+            entryComponents: [
+                ...(metadata.entryComponents || []),
+                ...(storyMetadata.entryComponents || []),
+            ],
+            imports: [...(metadata.imports || []), ...(storyMetadata.imports || [])],
+            schemas: [...(metadata.schemas || []), ...(storyMetadata.schemas || [])],
+            providers: [...(metadata.providers || []), ...(storyMetadata.providers || [])],
+        },
+    };
+};
+exports.moduleMetadata = moduleMetadata;
+/**
+ * Decorator to set the config options which are available during the application bootstrap operation
+ */
+function applicationConfig(
+/**
+ * Set of config options available during the application bootstrap operation.
+ */
+config) {
+    return (storyFn) => {
+        const story = storyFn();
+        const storyConfig = story.applicationConfig;
+        return {
+            ...story,
+            applicationConfig: storyConfig || config
+                ? {
+                    ...config,
+                    ...storyConfig,
+                    providers: [...(config?.providers || []), ...(storyConfig?.providers || [])],
+                }
+                : undefined,
+        };
+    };
+}
+exports.applicationConfig = applicationConfig;
+const componentWrapperDecorator = (element, props) => (storyFn, storyContext) => {
+    const story = storyFn();
+    const currentProps = typeof props === 'function' ? props(storyContext) : props;
+    const template = (0, NgComponentAnalyzer_1.isComponent)(element)
+        ? (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(element, currentProps ?? {}, story.template)
+        : element(story.template);
+    return {
+        ...story,
+        template,
+        ...(currentProps || story.props
+            ? {
+                props: {
+                    ...currentProps,
+                    ...story.props,
+                },
+            }
+            : {}),
+    };
+};
+exports.componentWrapperDecorator = componentWrapperDecorator;

package/dist/client/decorators.test.d.ts

@@ -0,0 +1 @@
+export {};