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

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

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clearRootHTMLElement = exports.getRenderType = exports.RendererFactory = void 0;
+const AbstractRenderer_1 = require("./AbstractRenderer");
+const DocsRenderer_1 = require("./DocsRenderer");
+const CanvasRenderer_1 = require("./CanvasRenderer");
+class RendererFactory {
+    constructor() {
+        this.rendererMap = new Map();
+    }
+    async getRendererInstance(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 🤷‍♂️
+        if (targetDOMNode === null) {
+            return null;
+        }
+        const renderType = (0, exports.getRenderType)(targetDOMNode);
+        // keep only instances of the same type
+        if (this.lastRenderType && this.lastRenderType !== renderType) {
+            await AbstractRenderer_1.AbstractRenderer.resetApplications();
+            clearRootHTMLElement(renderType);
+            this.rendererMap.clear();
+        }
+        if (!this.rendererMap.has(targetId)) {
+            this.rendererMap.set(targetId, this.buildRenderer(renderType));
+        }
+        this.lastRenderType = renderType;
+        return this.rendererMap.get(targetId);
+    }
+    buildRenderer(renderType) {
+        if (renderType === 'docs') {
+            return new DocsRenderer_1.DocsRenderer();
+        }
+        return new CanvasRenderer_1.CanvasRenderer();
+    }
+}
+exports.RendererFactory = RendererFactory;
+const getRenderType = (targetDOMNode) => {
+    return targetDOMNode.id === 'storybook-root' ? 'canvas' : 'docs';
+};
+exports.getRenderType = getRenderType;
+function clearRootHTMLElement(renderType) {
+    switch (renderType) {
+        case 'canvas':
+            global.document.getElementById('storybook-docs').innerHTML = '';
+            break;
+        case 'docs':
+            global.document.getElementById('storybook-root').innerHTML = '';
+            break;
+        default:
+            break;
+    }
+}
+exports.clearRootHTMLElement = clearRootHTMLElement;

package/dist/client/angular-beta/RendererFactory.test.d.ts

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

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

@@ -0,0 +1,164 @@
+"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 });
+const core_1 = require("@angular/core");
+const testing_1 = require("@angular/platform-browser-dynamic/testing");
+const platform_browser_dynamic_1 = require("@angular/platform-browser-dynamic");
+const CanvasRenderer_1 = require("./CanvasRenderer");
+const RendererFactory_1 = require("./RendererFactory");
+const DocsRenderer_1 = require("./DocsRenderer");
+jest.mock('@angular/platform-browser-dynamic');
+describe('RendererFactory', () => {
+    let rendererFactory;
+    let rootTargetDOMNode;
+    let rootDocstargetDOMNode;
+    beforeEach(async () => {
+        rendererFactory = new RendererFactory_1.RendererFactory();
+        document.body.innerHTML =
+            '<div id="storybook-root"></div><div id="root-docs"><div id="story-in-docs"></div></div>';
+        rootTargetDOMNode = global.document.getElementById('storybook-root');
+        rootDocstargetDOMNode = global.document.getElementById('root-docs');
+        platform_browser_dynamic_1.platformBrowserDynamic.mockImplementation(testing_1.platformBrowserDynamicTesting);
+        jest.spyOn(console, 'log').mockImplementation(() => { });
+    });
+    afterEach(() => {
+        jest.clearAllMocks();
+        // Necessary to avoid this error "Provided value for `preserveWhitespaces` can not be changed once it has been set." :
+        // Source: https://github.com/angular/angular/commit/e342ffd855ffeb8af7067b42307ffa320d82177e#diff-92b125e532cc22977b46a91f068d6d7ea81fd61b772842a4a0212f1cfd875be6R28
+        (0, core_1.ɵresetJitOptions)();
+    });
+    describe('CanvasRenderer', () => {
+        it('should get CanvasRenderer instance', async () => {
+            const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
+            expect(render).toBeInstanceOf(CanvasRenderer_1.CanvasRenderer);
+        });
+        it('should render my-story for story template', async () => {
+            const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
+            await render?.render({
+                storyFnAngular: {
+                    template: '🦊',
+                    props: {},
+                },
+                forced: false,
+                targetDOMNode: rootTargetDOMNode,
+            });
+            expect(document.body.getElementsByTagName('storybook-root')[0].innerHTML).toBe('🦊');
+        });
+        it('should render my-story for story component', async () => {
+            let FooComponent = class FooComponent {
+            };
+            FooComponent = __decorate([
+                (0, core_1.Component)({ selector: 'foo', template: '🦊' })
+            ], FooComponent);
+            const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
+            await render?.render({
+                storyFnAngular: {
+                    props: {},
+                },
+                forced: false,
+                component: FooComponent,
+                targetDOMNode: rootTargetDOMNode,
+            });
+            expect(document.body.getElementsByTagName('storybook-root')[0].innerHTML).toBe('<foo>🦊</foo><!--container-->');
+        });
+        it('should handle circular reference in moduleMetadata', async () => {
+            class Thing {
+                constructor() {
+                    this.token = this;
+                }
+            }
+            const token = new Thing();
+            const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
+            await render?.render({
+                storyFnAngular: {
+                    template: '🦊',
+                    props: {},
+                    moduleMetadata: { providers: [{ provide: 'foo', useValue: token }] },
+                },
+                forced: false,
+                targetDOMNode: rootTargetDOMNode,
+            });
+            expect(document.body.getElementsByTagName('storybook-root')[0].innerHTML).toBe('🦊');
+        });
+        describe('when forced=true', () => {
+            beforeEach(async () => {
+                // Init first render
+                const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
+                await render?.render({
+                    storyFnAngular: {
+                        template: '{{ logo }}: {{ name }}',
+                        props: {
+                            logo: '🦊',
+                            name: 'Fox',
+                        },
+                    },
+                    forced: true,
+                    targetDOMNode: rootTargetDOMNode,
+                });
+            });
+            it('should be rendered a first time', async () => {
+                expect(document.body.getElementsByTagName('storybook-root')[0].innerHTML).toBe('🦊: Fox');
+            });
+            it('should not be re-rendered when only props change', async () => {
+                // only props change
+                const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
+                await render?.render({
+                    storyFnAngular: {
+                        props: {
+                            logo: '👾',
+                        },
+                    },
+                    forced: true,
+                    targetDOMNode: rootTargetDOMNode,
+                });
+                expect(document.body.getElementsByTagName('storybook-root')[0].innerHTML).toBe('👾: Fox');
+            });
+            it('should be re-rendered when template change', async () => {
+                const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
+                await render?.render({
+                    storyFnAngular: {
+                        template: '{{ beer }}',
+                        props: {
+                            beer: '🍺',
+                        },
+                    },
+                    forced: true,
+                    targetDOMNode: rootTargetDOMNode,
+                });
+                expect(document.body.getElementsByTagName('storybook-root')[0].innerHTML).toBe('🍺');
+            });
+        });
+    });
+    describe('DocsRenderer', () => {
+        describe('when canvas render is done before', () => {
+            beforeEach(async () => {
+                // Init first Canvas render
+                const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
+                await render?.render({
+                    storyFnAngular: {
+                        template: 'Canvas 🖼',
+                    },
+                    forced: true,
+                    targetDOMNode: rootTargetDOMNode,
+                });
+            });
+            it('should reset root HTML', async () => {
+                global.document
+                    .getElementById('storybook-root')
+                    .appendChild(global.document.createElement('👾'));
+                expect(global.document.getElementById('storybook-root').innerHTML).toContain('Canvas 🖼');
+                await rendererFactory.getRendererInstance(rootDocstargetDOMNode);
+                expect(global.document.getElementById('storybook-root').innerHTML).toBe('');
+            });
+        });
+        it('should get DocsRenderer instance', async () => {
+            const render = await rendererFactory.getRendererInstance(rootDocstargetDOMNode);
+            expect(render).toBeInstanceOf(DocsRenderer_1.DocsRenderer);
+        });
+    });
+});

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

@@ -0,0 +1,8 @@
+import { StoryFnAngularReturnType } from '../types';
+import { PropertyExtractor } from './utils/PropertyExtractor';
+export declare const getApplication: ({ storyFnAngular, component, targetSelector, analyzedMetadata, }: {
+    storyFnAngular: StoryFnAngularReturnType;
+    component?: any;
+    targetSelector: string;
+    analyzedMetadata: PropertyExtractor;
+}) => import("@angular/core").Type<any>;

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getApplication = void 0;
+const StorybookWrapperComponent_1 = require("./StorybookWrapperComponent");
+const ComputesTemplateFromComponent_1 = require("./ComputesTemplateFromComponent");
+const getApplication = ({ storyFnAngular, component, targetSelector, analyzedMetadata, }) => {
+    const { props, styles, moduleMetadata = {} } = storyFnAngular;
+    let { template } = storyFnAngular;
+    const hasTemplate = !hasNoTemplate(template);
+    if (!hasTemplate && component) {
+        template = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props, '');
+    }
+    /**
+     * Create a component that wraps generated template and gives it props
+     */
+    return (0, StorybookWrapperComponent_1.createStorybookWrapperComponent)({
+        moduleMetadata,
+        selector: targetSelector,
+        template,
+        storyComponent: component,
+        styles,
+        initialProps: props,
+        analyzedMetadata,
+    });
+};
+exports.getApplication = getApplication;
+function hasNoTemplate(template) {
+    return template === null || template === undefined;
+}

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

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

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

@@ -0,0 +1,311 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const core_1 = require("@angular/core");
+const testing_1 = require("@angular/core/testing");
+const rxjs_1 = require("rxjs");
+const StorybookModule_1 = require("./StorybookModule");
+const StorybookProvider_1 = require("./StorybookProvider");
+const PropertyExtractor_1 = require("./utils/PropertyExtractor");
+describe('StorybookModule', () => {
+    describe('getStorybookModuleMetadata', () => {
+        describe('with simple component', () => {
+            let FooComponent = class FooComponent {
+                constructor() {
+                    this.output = new core_1.EventEmitter();
+                    this.localOutput = new core_1.EventEmitter();
+                    this.localFunction = () => '';
+                    this.setterCallNb = 0;
+                }
+                set setter(value) {
+                    this.setterCallNb += 1;
+                }
+            };
+            __decorate([
+                (0, core_1.Input)(),
+                __metadata("design:type", String)
+            ], FooComponent.prototype, "input", void 0);
+            __decorate([
+                (0, core_1.Input)('inputBindingPropertyName'),
+                __metadata("design:type", String)
+            ], FooComponent.prototype, "localPropertyName", void 0);
+            __decorate([
+                (0, core_1.Input)(),
+                __metadata("design:type", String),
+                __metadata("design:paramtypes", [String])
+            ], FooComponent.prototype, "setter", null);
+            __decorate([
+                (0, core_1.Output)(),
+                __metadata("design:type", Object)
+            ], FooComponent.prototype, "output", void 0);
+            __decorate([
+                (0, core_1.Output)('outputBindingPropertyName'),
+                __metadata("design:type", Object)
+            ], FooComponent.prototype, "localOutput", void 0);
+            FooComponent = __decorate([
+                (0, core_1.Component)({
+                    selector: 'foo',
+                    template: `
+          <p id="input">{{ input }}</p>
+          <p id="inputBindingPropertyName">{{ localPropertyName }}</p>
+          <p id="setterCallNb">{{ setterCallNb }}</p>
+          <p id="localProperty">{{ localProperty }}</p>
+          <p id="localFunction">{{ localFunction() }}</p>
+          <p id="output" (click)="output.emit('outputEmitted')"></p>
+          <p id="outputBindingPropertyName" (click)="localOutput.emit('outputEmitted')"></p>
+        `,
+                })
+            ], FooComponent);
+            it('should initialize inputs', async () => {
+                const props = {
+                    input: 'input',
+                    inputBindingPropertyName: 'inputBindingPropertyName',
+                    localProperty: 'localProperty',
+                    localFunction: () => 'localFunction',
+                };
+                const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor({}, FooComponent);
+                const application = (0, StorybookModule_1.getApplication)({
+                    storyFnAngular: { props },
+                    component: FooComponent,
+                    targetSelector: 'my-selector',
+                    analyzedMetadata,
+                });
+                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);
+                expect(fixture.nativeElement.querySelector('p#localProperty').innerHTML).toEqual(props.localProperty);
+                expect(fixture.nativeElement.querySelector('p#localFunction').innerHTML).toEqual(props.localFunction());
+            });
+            it('should initialize outputs', async () => {
+                let expectedOutputValue;
+                let expectedOutputBindingValue;
+                const props = {
+                    output: (value) => {
+                        expectedOutputValue = value;
+                    },
+                    outputBindingPropertyName: (value) => {
+                        expectedOutputBindingValue = value;
+                    },
+                };
+                const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor({}, FooComponent);
+                const application = (0, StorybookModule_1.getApplication)({
+                    storyFnAngular: { props },
+                    component: FooComponent,
+                    targetSelector: 'my-selector',
+                    analyzedMetadata,
+                });
+                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();
+                expect(expectedOutputValue).toEqual('outputEmitted');
+                expect(expectedOutputBindingValue).toEqual('outputEmitted');
+            });
+            it('should change inputs if storyProps$ Subject emit', async () => {
+                const initialProps = {
+                    input: 'input',
+                    inputBindingPropertyName: '',
+                };
+                const storyProps$ = new rxjs_1.BehaviorSubject(initialProps);
+                const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor({}, FooComponent);
+                const application = (0, StorybookModule_1.getApplication)({
+                    storyFnAngular: { props: initialProps },
+                    component: FooComponent,
+                    targetSelector: 'my-selector',
+                    analyzedMetadata,
+                });
+                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('');
+                const newProps = {
+                    input: 'new input',
+                    inputBindingPropertyName: 'new inputBindingPropertyName',
+                    localProperty: 'new localProperty',
+                    localFunction: () => 'new localFunction',
+                };
+                storyProps$.next(newProps);
+                fixture.detectChanges();
+                expect(fixture.nativeElement.querySelector('p#input').innerHTML).toEqual(newProps.input);
+                expect(fixture.nativeElement.querySelector('p#inputBindingPropertyName').innerHTML).toEqual(newProps.inputBindingPropertyName);
+                expect(fixture.nativeElement.querySelector('p#localProperty').innerHTML).toEqual(newProps.localProperty);
+                expect(fixture.nativeElement.querySelector('p#localFunction').innerHTML).toEqual(newProps.localFunction());
+            });
+            it('should override outputs if storyProps$ Subject emit', async () => {
+                let expectedOutputValue;
+                let expectedOutputBindingValue;
+                const initialProps = {
+                    input: '',
+                    output: (value) => {
+                        expectedOutputValue = value;
+                    },
+                    outputBindingPropertyName: (value) => {
+                        expectedOutputBindingValue = value;
+                    },
+                };
+                const storyProps$ = new rxjs_1.BehaviorSubject(initialProps);
+                const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor({}, FooComponent);
+                const application = (0, StorybookModule_1.getApplication)({
+                    storyFnAngular: { props: initialProps },
+                    component: FooComponent,
+                    targetSelector: 'my-selector',
+                    analyzedMetadata,
+                });
+                const { fixture } = await configureTestingModule({
+                    imports: [application],
+                    providers: [(0, StorybookProvider_1.storyPropsProvider)(storyProps$)],
+                });
+                fixture.detectChanges();
+                const newProps = {
+                    input: 'new input',
+                    output: () => {
+                        expectedOutputValue = 'should be called';
+                    },
+                    outputBindingPropertyName: () => {
+                        expectedOutputBindingValue = 'should be called';
+                    },
+                };
+                storyProps$.next(newProps);
+                fixture.detectChanges();
+                fixture.nativeElement.querySelector('p#output').click();
+                fixture.nativeElement.querySelector('p#outputBindingPropertyName').click();
+                expect(fixture.nativeElement.querySelector('p#input').innerHTML).toEqual(newProps.input);
+                expect(expectedOutputValue).toEqual('should be called');
+                expect(expectedOutputBindingValue).toEqual('should be called');
+            });
+            it('should change template inputs if storyProps$ Subject emit', async () => {
+                const initialProps = {
+                    color: 'red',
+                    input: 'input',
+                };
+                const storyProps$ = new rxjs_1.BehaviorSubject(initialProps);
+                const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor({}, FooComponent);
+                const application = (0, StorybookModule_1.getApplication)({
+                    storyFnAngular: {
+                        props: initialProps,
+                        template: '<p [style.color]="color"><foo [input]="input"></foo></p>',
+                    },
+                    component: FooComponent,
+                    targetSelector: 'my-selector',
+                    analyzedMetadata,
+                });
+                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);
+                const newProps = {
+                    color: 'black',
+                    input: 'new input',
+                };
+                storyProps$.next(newProps);
+                fixture.detectChanges();
+                expect(fixture.nativeElement.querySelector('p').style.color).toEqual('black');
+                expect(fixture.nativeElement.querySelector('p#input').innerHTML).toEqual(newProps.input);
+            });
+            it('should call the Input() setter the right number of times', async () => {
+                const initialProps = {
+                    setter: 'init',
+                };
+                const storyProps$ = new rxjs_1.BehaviorSubject(initialProps);
+                const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor({}, FooComponent);
+                const application = (0, StorybookModule_1.getApplication)({
+                    storyFnAngular: { props: initialProps },
+                    component: FooComponent,
+                    targetSelector: 'my-selector',
+                    analyzedMetadata,
+                });
+                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 = {
+                    setter: 'new setter value',
+                };
+                storyProps$.next(newProps);
+                fixture.detectChanges();
+                expect(fixture.nativeElement.querySelector('p#setterCallNb').innerHTML).toEqual('2');
+            });
+        });
+        describe('with component without selector', () => {
+            let WithoutSelectorComponent = class WithoutSelectorComponent {
+            };
+            WithoutSelectorComponent = __decorate([
+                (0, core_1.Component)({
+                    template: `The content`,
+                })
+            ], WithoutSelectorComponent);
+            it('should display the component', async () => {
+                const props = {};
+                const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor({ entryComponents: [WithoutSelectorComponent] }, WithoutSelectorComponent);
+                const application = (0, StorybookModule_1.getApplication)({
+                    storyFnAngular: {
+                        props,
+                        moduleMetadata: { entryComponents: [WithoutSelectorComponent] },
+                    },
+                    component: WithoutSelectorComponent,
+                    targetSelector: 'my-selector',
+                    analyzedMetadata,
+                });
+                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');
+            });
+        });
+        it('should keep template with an empty value', async () => {
+            let FooComponent = class FooComponent {
+            };
+            FooComponent = __decorate([
+                (0, core_1.Component)({
+                    selector: 'foo',
+                    template: `Should not be displayed`,
+                })
+            ], FooComponent);
+            const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor({}, FooComponent);
+            const application = (0, StorybookModule_1.getApplication)({
+                storyFnAngular: { template: '' },
+                component: FooComponent,
+                targetSelector: 'my-selector',
+                analyzedMetadata,
+            });
+            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(ngModule).compileComponents();
+        const fixture = testing_1.TestBed.createComponent(ngModule.imports[0]);
+        return {
+            fixture,
+        };
+    }
+});

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

@@ -0,0 +1,5 @@
+import { Provider, InjectionToken } from '@angular/core';
+import { Subject } from 'rxjs';
+import { ICollection } from '../types';
+export declare const STORY_PROPS: InjectionToken<Subject<ICollection | undefined>>;
+export declare const storyPropsProvider: (storyProps$: Subject<ICollection | undefined>) => Provider;

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.storyPropsProvider = exports.STORY_PROPS = void 0;
+const core_1 = require("@angular/core");
+const rxjs_1 = require("rxjs");
+exports.STORY_PROPS = new core_1.InjectionToken('STORY_PROPS');
+const storyPropsProvider = (storyProps$) => ({
+    provide: exports.STORY_PROPS,
+    useFactory: storyDataFactory(storyProps$.asObservable()),
+    deps: [core_1.NgZone],
+});
+exports.storyPropsProvider = storyPropsProvider;
+function storyDataFactory(data) {
+    return (ngZone) => new rxjs_1.Observable((subscriber) => {
+        const sub = data.subscribe((v) => {
+            ngZone.run(() => subscriber.next(v));
+        }, (err) => {
+            ngZone.run(() => subscriber.error(err));
+        }, () => {
+            ngZone.run(() => subscriber.complete());
+        });
+        return () => {
+            sub.unsubscribe();
+        };
+    });
+}

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

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