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

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CanvasRenderer = void 0;
+const AbstractRenderer_1 = require("./AbstractRenderer");
+class CanvasRenderer extends AbstractRenderer_1.AbstractRenderer {
+    async render(options) {
+        await super.render(options);
+    }
+    async beforeFullRender() {
+        CanvasRenderer.resetApplications();
+    }
+    async afterFullRender() {
+        await AbstractRenderer_1.AbstractRenderer.resetCompiledComponents();
+    }
+}
+exports.CanvasRenderer = CanvasRenderer;

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

@@ -0,0 +1,17 @@
+import { Type } from '@angular/core';
+import { ArgTypes } from '@storybook/types';
+import { ICollection } from '../types';
+/**
+ * Converts a component into a template with inputs/outputs present in initial props
+ * @param component
+ * @param initialProps
+ * @param innerTemplate
+ */
+export declare const computesTemplateFromComponent: (component: Type<unknown>, initialProps?: ICollection, innerTemplate?: string) => string;
+/**
+ * Converts a component into a template with inputs/outputs present in initial props
+ * @param component
+ * @param initialProps
+ * @param innerTemplate
+ */
+export declare const computesTemplateSourceFromComponent: (component: Type<unknown>, initialProps?: ICollection, argTypes?: ArgTypes) => string | null;

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

@@ -0,0 +1,132 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.computesTemplateSourceFromComponent = exports.computesTemplateFromComponent = void 0;
+const NgComponentAnalyzer_1 = require("./utils/NgComponentAnalyzer");
+const separateInputsOutputsAttributes = (ngComponentInputsOutputs, props = {}) => {
+    const inputs = ngComponentInputsOutputs.inputs
+        .filter((i) => i.templateName in props)
+        .map((i) => i.templateName);
+    const outputs = ngComponentInputsOutputs.outputs
+        .filter((o) => o.templateName in props)
+        .map((o) => o.templateName);
+    return {
+        inputs,
+        outputs,
+        otherProps: Object.keys(props).filter((k) => ![...inputs, ...outputs].includes(k)),
+    };
+};
+/**
+ * Converts a component into a template with inputs/outputs present in initial props
+ * @param component
+ * @param initialProps
+ * @param innerTemplate
+ */
+const computesTemplateFromComponent = (component, initialProps, innerTemplate = '') => {
+    const ngComponentMetadata = (0, NgComponentAnalyzer_1.getComponentDecoratorMetadata)(component);
+    const ngComponentInputsOutputs = (0, NgComponentAnalyzer_1.getComponentInputsOutputs)(component);
+    if (!ngComponentMetadata.selector) {
+        // Allow to add renderer component when NgComponent selector is undefined
+        return `<ng-container *ngComponentOutlet="storyComponent"></ng-container>`;
+    }
+    const { inputs: initialInputs, outputs: initialOutputs } = separateInputsOutputsAttributes(ngComponentInputsOutputs, initialProps);
+    const templateInputs = initialInputs.length > 0 ? ` ${initialInputs.map((i) => `[${i}]="${i}"`).join(' ')}` : '';
+    const templateOutputs = initialOutputs.length > 0
+        ? ` ${initialOutputs.map((i) => `(${i})="${i}($event)"`).join(' ')}`
+        : '';
+    return buildTemplate(ngComponentMetadata.selector, innerTemplate, templateInputs, templateOutputs);
+};
+exports.computesTemplateFromComponent = computesTemplateFromComponent;
+const createAngularInputProperty = ({ propertyName, value, argType, }) => {
+    let templateValue;
+    switch (typeof value) {
+        case 'string':
+            templateValue = `'${value}'`;
+            break;
+        case 'object':
+            templateValue = JSON.stringify(value)
+                .replace(/'/g, '\u2019')
+                .replace(/\\"/g, '\u201D')
+                .replace(/"([^-"]+)":/g, '$1: ')
+                .replace(/"/g, "'")
+                .replace(/\u2019/g, "\\'")
+                .replace(/\u201D/g, "\\'")
+                .split(',')
+                .join(', ');
+            break;
+        default:
+            templateValue = value;
+    }
+    return `[${propertyName}]="${templateValue}"`;
+};
+/**
+ * Converts a component into a template with inputs/outputs present in initial props
+ * @param component
+ * @param initialProps
+ * @param innerTemplate
+ */
+const computesTemplateSourceFromComponent = (component, initialProps, argTypes) => {
+    const ngComponentMetadata = (0, NgComponentAnalyzer_1.getComponentDecoratorMetadata)(component);
+    if (!ngComponentMetadata) {
+        return null;
+    }
+    if (!ngComponentMetadata.selector) {
+        // Allow to add renderer component when NgComponent selector is undefined
+        return `<ng-container *ngComponentOutlet="${component.name}"></ng-container>`;
+    }
+    const ngComponentInputsOutputs = (0, NgComponentAnalyzer_1.getComponentInputsOutputs)(component);
+    const { inputs: initialInputs, outputs: initialOutputs } = separateInputsOutputsAttributes(ngComponentInputsOutputs, initialProps);
+    const templateInputs = initialInputs.length > 0
+        ? ` ${initialInputs
+            .map((propertyName) => createAngularInputProperty({
+            propertyName,
+            value: initialProps[propertyName],
+            argType: argTypes?.[propertyName],
+        }))
+            .join(' ')}`
+        : '';
+    const templateOutputs = initialOutputs.length > 0
+        ? ` ${initialOutputs.map((i) => `(${i})="${i}($event)"`).join(' ')}`
+        : '';
+    return buildTemplate(ngComponentMetadata.selector, '', templateInputs, templateOutputs);
+};
+exports.computesTemplateSourceFromComponent = computesTemplateSourceFromComponent;
+const buildTemplate = (selector, innerTemplate, inputs, outputs) => {
+    // https://www.w3.org/TR/2011/WD-html-markup-20110113/syntax.html#syntax-elements
+    const voidElements = [
+        'area',
+        'base',
+        'br',
+        'col',
+        'command',
+        'embed',
+        'hr',
+        'img',
+        'input',
+        'keygen',
+        'link',
+        'meta',
+        'param',
+        'source',
+        'track',
+        'wbr',
+    ];
+    const firstSelector = selector.split(',')[0];
+    const templateReplacers = [
+        [/(^.*?)(?=[,])/, '$1'],
+        [/(^\..+)/, 'div$1'],
+        [/(^\[.+?])/, 'div$1'],
+        [/([\w[\]]+)(\s*,[\w\s-[\],]+)+/, `$1`],
+        [/#([\w-]+)/, ` id="$1"`],
+        [/((\.[\w-]+)+)/, (_, c) => ` class="${c.split `.`.join ` `.trim()}"`],
+        [/(\[.+?])/g, (_, a) => ` ${a.slice(1, -1)}`],
+        [
+            /([\S]+)(.*)/,
+            (template, elementSelector) => {
+                return voidElements.some((element) => elementSelector === element)
+                    ? template.replace(/([\S]+)(.*)/, `<$1$2${inputs}${outputs} />`)
+                    : template.replace(/([\S]+)(.*)/, `<$1$2${inputs}${outputs}>${innerTemplate}</$1>`);
+            },
+        ],
+    ];
+    return templateReplacers.reduce((prevSelector, [searchValue, replacer]) => prevSelector.replace(searchValue, replacer), firstSelector);
+};

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

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

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

@@ -0,0 +1,403 @@
+"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 ComputesTemplateFromComponent_1 = require("./ComputesTemplateFromComponent");
+const input_component_1 = require("./__testfixtures__/input.component");
+describe('angular source decorator', () => {
+    it('With no props should generate simple tag', () => {
+        const component = input_component_1.InputComponent;
+        const props = {};
+        const argTypes = {};
+        const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+        expect(source).toEqual('<doc-button></doc-button>');
+    });
+    describe('with component without selector', () => {
+        let WithoutSelectorComponent = class WithoutSelectorComponent {
+        };
+        WithoutSelectorComponent = __decorate([
+            (0, core_1.Component)({
+                template: `The content`,
+            })
+        ], WithoutSelectorComponent);
+        it('should add component ng-container', async () => {
+            const component = WithoutSelectorComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<ng-container *ngComponentOutlet="WithoutSelectorComponent"></ng-container>`);
+        });
+    });
+    describe('with component with attribute selector', () => {
+        let WithAttributeComponent = class WithAttributeComponent {
+        };
+        WithAttributeComponent = __decorate([
+            (0, core_1.Component)({
+                selector: 'doc-button[foo]',
+                template: '<button></button>',
+            })
+        ], WithAttributeComponent);
+        it('should add attribute to template', async () => {
+            const component = WithAttributeComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<doc-button foo></doc-button>`);
+        });
+    });
+    describe('with component with attribute and value selector', () => {
+        let WithAttributeValueComponent = class WithAttributeValueComponent {
+        };
+        WithAttributeValueComponent = __decorate([
+            (0, core_1.Component)({
+                selector: 'doc-button[foo="bar"]',
+                template: '<button></button>',
+            })
+        ], WithAttributeValueComponent);
+        it('should add attribute to template', async () => {
+            const component = WithAttributeValueComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<doc-button foo="bar"></doc-button>`);
+        });
+    });
+    describe('with component with attribute only selector', () => {
+        let WithAttributeOnlyComponent = class WithAttributeOnlyComponent {
+        };
+        WithAttributeOnlyComponent = __decorate([
+            (0, core_1.Component)({
+                selector: '[foo]',
+                template: '<button></button>',
+            })
+        ], WithAttributeOnlyComponent);
+        it('should create a div and add attribute to template', async () => {
+            const component = WithAttributeOnlyComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<div foo></div>`);
+        });
+    });
+    describe('with component with void element and attribute selector', () => {
+        let VoidElementWithAttributeComponent = class VoidElementWithAttributeComponent {
+        };
+        VoidElementWithAttributeComponent = __decorate([
+            (0, core_1.Component)({
+                selector: 'input[foo]',
+                template: '<button></button>',
+            })
+        ], VoidElementWithAttributeComponent);
+        it('should create without separate closing tag', async () => {
+            const component = VoidElementWithAttributeComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<input foo />`);
+        });
+    });
+    describe('with component with attribute and value only selector', () => {
+        let WithAttributeOnlyComponent = class WithAttributeOnlyComponent {
+        };
+        WithAttributeOnlyComponent = __decorate([
+            (0, core_1.Component)({
+                selector: '[foo="bar"]',
+                template: '<button></button>',
+            })
+        ], WithAttributeOnlyComponent);
+        it('should create a div and add attribute to template', async () => {
+            const component = WithAttributeOnlyComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<div foo="bar"></div>`);
+        });
+    });
+    describe('with component with void element, attribute and value only selector', () => {
+        let VoidElementWithAttributeComponent = class VoidElementWithAttributeComponent {
+        };
+        VoidElementWithAttributeComponent = __decorate([
+            (0, core_1.Component)({
+                selector: 'input[foo="bar"]',
+                template: '<button></button>',
+            })
+        ], VoidElementWithAttributeComponent);
+        it('should create and add attribute to template without separate closing tag', async () => {
+            const component = VoidElementWithAttributeComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<input foo="bar" />`);
+        });
+    });
+    describe('with component with class selector', () => {
+        let WithClassComponent = class WithClassComponent {
+        };
+        WithClassComponent = __decorate([
+            (0, core_1.Component)({
+                selector: 'doc-button.foo',
+                template: '<button></button>',
+            })
+        ], WithClassComponent);
+        it('should add class to template', async () => {
+            const component = WithClassComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<doc-button class="foo"></doc-button>`);
+        });
+    });
+    describe('with component with class only selector', () => {
+        let WithClassComponent = class WithClassComponent {
+        };
+        WithClassComponent = __decorate([
+            (0, core_1.Component)({
+                selector: '.foo',
+                template: '<button></button>',
+            })
+        ], WithClassComponent);
+        it('should create a div and add attribute to template', async () => {
+            const component = WithClassComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<div class="foo"></div>`);
+        });
+    });
+    describe('with component with multiple selectors', () => {
+        let WithMultipleSelectorsComponent = class WithMultipleSelectorsComponent {
+        };
+        WithMultipleSelectorsComponent = __decorate([
+            (0, core_1.Component)({
+                selector: 'doc-button, doc-button2',
+                template: '<button></button>',
+            })
+        ], WithMultipleSelectorsComponent);
+        it('should use the first selector', async () => {
+            const component = WithMultipleSelectorsComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<doc-button></doc-button>`);
+        });
+    });
+    describe('with component with multiple selectors starting with attribute', () => {
+        let WithMultipleSelectorsComponent = class WithMultipleSelectorsComponent {
+        };
+        WithMultipleSelectorsComponent = __decorate([
+            (0, core_1.Component)({
+                selector: 'doc-button[foo], doc-button2',
+                template: '<button></button>',
+            })
+        ], WithMultipleSelectorsComponent);
+        it('should use the first selector', async () => {
+            const component = WithMultipleSelectorsComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<doc-button foo></doc-button>`);
+        });
+    });
+    describe('with component with multiple selectors starting with attribute and value', () => {
+        let WithMultipleSelectorsComponent = class WithMultipleSelectorsComponent {
+        };
+        WithMultipleSelectorsComponent = __decorate([
+            (0, core_1.Component)({
+                selector: 'doc-button[foo="bar"], doc-button2',
+                template: '<button></button>',
+            })
+        ], WithMultipleSelectorsComponent);
+        it('should use the first selector', async () => {
+            const component = WithMultipleSelectorsComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<doc-button foo="bar"></doc-button>`);
+        });
+    });
+    describe('with component with multiple selectors including 2 attributes and a class', () => {
+        let WithMultipleSelectorsComponent = class WithMultipleSelectorsComponent {
+        };
+        WithMultipleSelectorsComponent = __decorate([
+            (0, core_1.Component)({
+                selector: 'doc-button, button[foo], .button[foo], button[baz]',
+                template: '<button></button>',
+            })
+        ], WithMultipleSelectorsComponent);
+        it('should use the first selector', async () => {
+            const component = WithMultipleSelectorsComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<doc-button></doc-button>`);
+        });
+    });
+    describe('with component with multiple selectors with line breaks', () => {
+        let WithMultipleSelectorsComponent = class WithMultipleSelectorsComponent {
+        };
+        WithMultipleSelectorsComponent = __decorate([
+            (0, core_1.Component)({
+                selector: `doc-button, 
+      doc-button2`,
+                template: '<button></button>',
+            })
+        ], WithMultipleSelectorsComponent);
+        it('should use the first selector', async () => {
+            const component = WithMultipleSelectorsComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<doc-button></doc-button>`);
+        });
+    });
+    describe('with component with multiple selectors starting with attribute only with line breaks', () => {
+        let WithMultipleSelectorsComponent = class WithMultipleSelectorsComponent {
+        };
+        WithMultipleSelectorsComponent = __decorate([
+            (0, core_1.Component)({
+                selector: `[foo], 
+      doc-button2`,
+                template: '<button></button>',
+            })
+        ], WithMultipleSelectorsComponent);
+        it('should use the first selector', async () => {
+            const component = WithMultipleSelectorsComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<div foo></div>`);
+        });
+    });
+    describe('no argTypes', () => {
+        it('should generate tag-only template with no props', () => {
+            const component = input_component_1.InputComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<doc-button></doc-button>`);
+        });
+        it('With props should generate tag with properties', () => {
+            const component = input_component_1.InputComponent;
+            const props = {
+                isDisabled: true,
+                label: 'Hello world',
+                accent: input_component_1.ButtonAccent.High,
+                counter: 4,
+            };
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<doc-button [counter]="4" [accent]="'High'" [isDisabled]="true" [label]="'Hello world'"></doc-button>`);
+        });
+        it('With props should generate tag with outputs', () => {
+            const component = input_component_1.InputComponent;
+            const props = {
+                isDisabled: true,
+                label: 'Hello world',
+                onClick: ($event) => { },
+            };
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<doc-button [isDisabled]="true" [label]="'Hello world'" (onClick)="onClick($event)"></doc-button>`);
+        });
+        it('should generate correct property for overridden name for Input', () => {
+            const component = input_component_1.InputComponent;
+            const props = {
+                color: '#ffffff',
+            };
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<doc-button [color]="'#ffffff'"></doc-button>`);
+        });
+    });
+    describe('with argTypes (from compodoc)', () => {
+        it('Should handle enum as strongly typed enum', () => {
+            const component = input_component_1.InputComponent;
+            const props = {
+                isDisabled: false,
+                label: 'Hello world',
+                accent: input_component_1.ButtonAccent.High,
+            };
+            const argTypes = {
+                accent: {
+                    control: {
+                        options: ['Normal', 'High'],
+                        type: 'radio',
+                    },
+                    defaultValue: undefined,
+                    table: {
+                        category: 'inputs',
+                    },
+                    type: {
+                        name: 'enum',
+                        required: true,
+                        value: [],
+                    },
+                },
+            };
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<doc-button [accent]="'High'" [isDisabled]="false" [label]="'Hello world'"></doc-button>`);
+        });
+        it('Should handle enum without values as string', () => {
+            const component = input_component_1.InputComponent;
+            const props = {
+                isDisabled: false,
+                label: 'Hello world',
+                accent: input_component_1.ButtonAccent.High,
+            };
+            const argTypes = {
+                accent: {
+                    control: {
+                        options: ['Normal', 'High'],
+                        type: 'radio',
+                    },
+                    defaultValue: undefined,
+                    table: {
+                        category: 'inputs',
+                    },
+                    type: {
+                        name: 'object',
+                        required: true,
+                        value: {},
+                    },
+                },
+            };
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<doc-button [accent]="'High'" [isDisabled]="false" [label]="'Hello world'"></doc-button>`);
+        });
+        it('Should handle objects correctly', () => {
+            const component = input_component_1.InputComponent;
+            const someDataObject = {
+                one: 'Hello world',
+                two: true,
+                three: [
+                    `a string literal with "double quotes"`,
+                    `a string literal with 'single quotes'`,
+                    'a single quoted string with "double quotes"',
+                    "a double quoted string with 'single quotes'",
+                    // eslint-disable-next-line prettier/prettier
+                    'a single quoted string with escaped \'single quotes\'',
+                    // eslint-disable-next-line prettier/prettier
+                    "a double quoted string with escaped \"double quotes\"",
+                    // eslint-disable-next-line no-useless-escape
+                    `a string literal with \'escaped single quotes\'`,
+                    // eslint-disable-next-line no-useless-escape
+                    `a string literal with \"escaped double quotes\"`,
+                ],
+            };
+            const props = {
+                isDisabled: false,
+                label: 'Hello world',
+                someDataObject,
+            };
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, null);
+            // Ideally we should stringify the object, but that could cause the story to break because of unescaped values in the JSON object.
+            // This will have to do for now
+            expect(source).toEqual(`<doc-button [isDisabled]="false" [label]="'Hello world'" [someDataObject]="{one: 'Hello world', two: true, three: ['a string literal with \\'double quotes\\'', 'a string literal with \\'single quotes\\'', 'a single quoted string with \\'double quotes\\'', 'a double quoted string with \\'single quotes\\'', 'a single quoted string with escaped \\'single quotes\\'', 'a double quoted string with escaped \\'double quotes\\'', 'a string literal with \\'escaped single quotes\\'', 'a string literal with \\'escaped double quotes\\'']}"></doc-button>`);
+        });
+    });
+});

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

@@ -0,0 +1,13 @@
+import { AbstractRenderer } from './AbstractRenderer';
+import { StoryFnAngularReturnType, Parameters } from '../types';
+export declare class DocsRenderer extends AbstractRenderer {
+    render(options: {
+        storyFnAngular: StoryFnAngularReturnType;
+        forced: boolean;
+        component: any;
+        parameters: Parameters;
+        targetDOMNode: HTMLElement;
+    }): Promise<void>;
+    beforeFullRender(domNode?: HTMLElement): Promise<void>;
+    afterFullRender(): Promise<void>;
+}

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DocsRenderer = void 0;
+const preview_api_1 = require("@storybook/preview-api");
+const core_events_1 = require("@storybook/core-events");
+const AbstractRenderer_1 = require("./AbstractRenderer");
+class DocsRenderer extends AbstractRenderer_1.AbstractRenderer {
+    async render(options) {
+        const channel = preview_api_1.addons.getChannel();
+        /**
+         * Destroy and recreate the PlatformBrowserDynamic of angular
+         * For several stories to be rendered in the same docs we should
+         * not destroy angular between each rendering but do it when the
+         * rendered stories are not needed anymore.
+         *
+         * Note for improvement: currently there is one event per story
+         * rendered in the doc. But one event could be enough for the whole docs
+         *
+         */
+        channel.once(core_events_1.STORY_CHANGED, async () => {
+            await DocsRenderer.resetApplications();
+        });
+        /**
+         * Destroy and recreate the PlatformBrowserDynamic of angular
+         * when doc re render. Allows to call ngOnDestroy of angular
+         * for previous component
+         */
+        channel.once(core_events_1.DOCS_RENDERED, async () => {
+            await DocsRenderer.resetApplications();
+        });
+        await super.render({ ...options, forced: false });
+    }
+    async beforeFullRender(domNode) {
+        DocsRenderer.resetApplications(domNode);
+    }
+    async afterFullRender() {
+        await AbstractRenderer_1.AbstractRenderer.resetCompiledComponents();
+    }
+}
+exports.DocsRenderer = DocsRenderer;

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

@@ -0,0 +1,11 @@
+import { AbstractRenderer } from './AbstractRenderer';
+type RenderType = 'canvas' | 'docs';
+export declare class RendererFactory {
+    private lastRenderType;
+    private rendererMap;
+    getRendererInstance(targetDOMNode: HTMLElement): Promise<AbstractRenderer | null>;
+    private buildRenderer;
+}
+export declare const getRenderType: (targetDOMNode: HTMLElement) => RenderType;
+export declare function clearRootHTMLElement(renderType: RenderType): void;
+export {};