@storybook/angular 8.3.0-alpha.2 → 8.3.0-alpha.4

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

@@ -1,6 +1,11 @@
 import { Type } from '@angular/core';
 import { ArgTypes } from 'storybook/internal/types';
 import { ICollection } from '../types';
+/**
+ * Returns the property name, if it can be accessed with dot notation. If not,
+ * it returns `this['propertyName']`.
+ */
+export declare const formatPropInTemplate: (propertyName: string) => string;
 /**
  * Converts a component into a template with inputs/outputs present in initial props
  * @param component

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

@@ -1,7 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.computesTemplateSourceFromComponent = exports.computesTemplateFromComponent = void 0;
+exports.computesTemplateSourceFromComponent = exports.computesTemplateFromComponent = exports.formatPropInTemplate = void 0;
 const NgComponentAnalyzer_1 = require("./utils/NgComponentAnalyzer");
+/**
+ * Check if the name matches the criteria for a valid identifier.
+ * A valid identifier can only contain letters, digits, underscores, or dollar signs.
+ * It cannot start with a digit.
+ */
+const isValidIdentifier = (name) => /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(name);
+/**
+ * Returns the property name, if it can be accessed with dot notation. If not,
+ * it returns `this['propertyName']`.
+ */
+const formatPropInTemplate = (propertyName) => isValidIdentifier(propertyName) ? propertyName : `this['${propertyName}']`;
+exports.formatPropInTemplate = formatPropInTemplate;
 const separateInputsOutputsAttributes = (ngComponentInputsOutputs, props = {}) => {
     const inputs = ngComponentInputsOutputs.inputs
         .filter((i) => i.templateName in props)
@@ -29,13 +41,30 @@ const computesTemplateFromComponent = (component, initialProps, innerTemplate =
         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 templateInputs = initialInputs.length > 0
+        ? ` ${initialInputs.map((i) => `[${i}]="${(0, exports.formatPropInTemplate)(i)}"`).join(' ')}`
+        : '';
     const templateOutputs = initialOutputs.length > 0
-        ? ` ${initialOutputs.map((i) => `(${i})="${i}($event)"`).join(' ')}`
+        ? ` ${initialOutputs.map((i) => `(${i})="${(0, exports.formatPropInTemplate)(i)}($event)"`).join(' ')}`
         : '';
     return buildTemplate(ngComponentMetadata.selector, innerTemplate, templateInputs, templateOutputs);
 };
 exports.computesTemplateFromComponent = computesTemplateFromComponent;
+/**
+ * Stringify an object with a placholder in the circular references.
+ */
+function stringifyCircular(obj) {
+    const seen = new Set();
+    return JSON.stringify(obj, (key, value) => {
+        if (typeof value === 'object' && value !== null) {
+            if (seen.has(value)) {
+                return '[Circular]';
+            }
+            seen.add(value);
+        }
+        return value;
+    });
+}
 const createAngularInputProperty = ({ propertyName, value, argType, }) => {
     let templateValue;
     switch (typeof value) {
@@ -43,7 +72,7 @@ const createAngularInputProperty = ({ propertyName, value, argType, }) => {
             templateValue = `'${value}'`;
             break;
         case 'object':
-            templateValue = JSON.stringify(value)
+            templateValue = stringifyCircular(value)
                 .replace(/'/g, '\u2019')
                 .replace(/\\"/g, '\u201D')
                 .replace(/"([^-"]+)":/g, '$1: ')
@@ -85,7 +114,7 @@ const computesTemplateSourceFromComponent = (component, initialProps, argTypes)
             .join(' ')}`
         : '';
     const templateOutputs = initialOutputs.length > 0
-        ? ` ${initialOutputs.map((i) => `(${i})="${i}($event)"`).join(' ')}`
+        ? ` ${initialOutputs.map((i) => `(${i})="${(0, exports.formatPropInTemplate)(i)}($event)"`).join(' ')}`
         : '';
     return buildTemplate(ngComponentMetadata.selector, '', templateInputs, templateOutputs);
 };

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

@@ -10,8 +10,309 @@ const core_1 = require("@angular/core");
 const vitest_1 = require("vitest");
 const ComputesTemplateFromComponent_1 = require("./ComputesTemplateFromComponent");
 const input_component_1 = require("./__testfixtures__/input.component");
+(0, vitest_1.describe)('angular template decorator', () => {
+    (0, vitest_1.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,
+            'aria-label': 'Hello world',
+        };
+        const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+        (0, vitest_1.expect)(source).toEqual(`<doc-button [counter]="counter" [accent]="accent" [isDisabled]="isDisabled" [label]="label" [aria-label]="this['aria-label']"></doc-button>`);
+    });
+    (0, vitest_1.it)('with props should generate tag with outputs', () => {
+        const component = input_component_1.InputComponent;
+        const props = {
+            isDisabled: true,
+            label: 'Hello world',
+            onClick: ($event) => { },
+            'dash-out': ($event) => { },
+        };
+        const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+        (0, vitest_1.expect)(source).toEqual(`<doc-button [isDisabled]="isDisabled" [label]="label" (onClick)="onClick($event)" (dash-out)="this['dash-out']($event)"></doc-button>`);
+    });
+    (0, vitest_1.it)('with no props should generate simple tag', () => {
+        const component = input_component_1.InputComponent;
+        const props = {};
+        const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+        (0, vitest_1.expect)(source).toEqual('<doc-button></doc-button>');
+    });
+    (0, vitest_1.describe)('with component without selector', () => {
+        let WithoutSelectorComponent = class WithoutSelectorComponent {
+        };
+        WithoutSelectorComponent = __decorate([
+            (0, core_1.Component)({
+                template: `The content`,
+            })
+        ], WithoutSelectorComponent);
+        (0, vitest_1.it)('should add component ng-container', async () => {
+            const component = WithoutSelectorComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<ng-container *ngComponentOutlet="storyComponent"></ng-container>`);
+        });
+    });
+    (0, vitest_1.describe)('with component with attribute selector', () => {
+        let WithAttributeComponent = class WithAttributeComponent {
+        };
+        WithAttributeComponent = __decorate([
+            (0, core_1.Component)({
+                selector: 'doc-button[foo]',
+                template: '<button></button>',
+            })
+        ], WithAttributeComponent);
+        (0, vitest_1.it)('should add attribute to template', async () => {
+            const component = WithAttributeComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button foo></doc-button>`);
+        });
+    });
+    (0, vitest_1.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);
+        (0, vitest_1.it)('should add attribute to template', async () => {
+            const component = WithAttributeValueComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button foo="bar"></doc-button>`);
+        });
+    });
+    (0, vitest_1.describe)('with component with attribute only selector', () => {
+        let WithAttributeOnlyComponent = class WithAttributeOnlyComponent {
+        };
+        WithAttributeOnlyComponent = __decorate([
+            (0, core_1.Component)({
+                selector: '[foo]',
+                template: '<button></button>',
+            })
+        ], WithAttributeOnlyComponent);
+        (0, vitest_1.it)('should create a div and add attribute to template', async () => {
+            const component = WithAttributeOnlyComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<div foo></div>`);
+        });
+    });
+    (0, vitest_1.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);
+        (0, vitest_1.it)('should create without separate closing tag', async () => {
+            const component = VoidElementWithAttributeComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<input foo />`);
+        });
+    });
+    (0, vitest_1.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);
+        (0, vitest_1.it)('should create a div and add attribute to template', async () => {
+            const component = WithAttributeOnlyComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<div foo="bar"></div>`);
+        });
+    });
+    (0, vitest_1.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);
+        (0, vitest_1.it)('should create and add attribute to template without separate closing tag', async () => {
+            const component = VoidElementWithAttributeComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<input foo="bar" />`);
+        });
+    });
+    (0, vitest_1.describe)('with component with class selector', () => {
+        let WithClassComponent = class WithClassComponent {
+        };
+        WithClassComponent = __decorate([
+            (0, core_1.Component)({
+                selector: 'doc-button.foo',
+                template: '<button></button>',
+            })
+        ], WithClassComponent);
+        (0, vitest_1.it)('should add class to template', async () => {
+            const component = WithClassComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button class="foo"></doc-button>`);
+        });
+    });
+    (0, vitest_1.describe)('with component with class only selector', () => {
+        let WithClassComponent = class WithClassComponent {
+        };
+        WithClassComponent = __decorate([
+            (0, core_1.Component)({
+                selector: '.foo',
+                template: '<button></button>',
+            })
+        ], WithClassComponent);
+        (0, vitest_1.it)('should create a div and add attribute to template', async () => {
+            const component = WithClassComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<div class="foo"></div>`);
+        });
+    });
+    (0, vitest_1.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);
+        (0, vitest_1.it)('should use the first selector', async () => {
+            const component = WithMultipleSelectorsComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button></doc-button>`);
+        });
+    });
+    (0, vitest_1.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);
+        (0, vitest_1.it)('should use the first selector', async () => {
+            const component = WithMultipleSelectorsComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button foo></doc-button>`);
+        });
+    });
+    (0, vitest_1.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);
+        (0, vitest_1.it)('should use the first selector', async () => {
+            const component = WithMultipleSelectorsComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button foo="bar"></doc-button>`);
+        });
+    });
+    (0, vitest_1.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);
+        (0, vitest_1.it)('should use the first selector', async () => {
+            const component = WithMultipleSelectorsComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button></doc-button>`);
+        });
+    });
+    (0, vitest_1.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);
+        (0, vitest_1.it)('should use the first selector', async () => {
+            const component = WithMultipleSelectorsComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button></doc-button>`);
+        });
+    });
+    (0, vitest_1.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);
+        (0, vitest_1.it)('should use the first selector', async () => {
+            const component = WithMultipleSelectorsComponent;
+            const props = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+            (0, vitest_1.expect)(source).toEqual(`<div foo></div>`);
+        });
+    });
+    (0, vitest_1.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 source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+        (0, vitest_1.expect)(source).toEqual(`<doc-button [counter]="counter" [accent]="accent" [isDisabled]="isDisabled" [label]="label"></doc-button>`);
+    });
+    (0, vitest_1.it)('with props should generate tag with outputs', () => {
+        const component = input_component_1.InputComponent;
+        const props = {
+            isDisabled: true,
+            label: 'Hello world',
+            onClick: ($event) => { },
+        };
+        const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+        (0, vitest_1.expect)(source).toEqual(`<doc-button [isDisabled]="isDisabled" [label]="label" (onClick)="onClick($event)"></doc-button>`);
+    });
+    (0, vitest_1.it)('should generate correct property for overridden name for Input', () => {
+        const component = input_component_1.InputComponent;
+        const props = {
+            color: '#ffffff',
+        };
+        const source = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props);
+        (0, vitest_1.expect)(source).toEqual(`<doc-button [color]="color"></doc-button>`);
+    });
+});
 (0, vitest_1.describe)('angular source decorator', () => {
-    (0, vitest_1.it)('With no props should generate simple tag', () => {
+    (0, vitest_1.it)('with no props should generate simple tag', () => {
         const component = input_component_1.InputComponent;
         const props = {};
         const argTypes = {};
@@ -282,28 +583,30 @@ const input_component_1 = require("./__testfixtures__/input.component");
             const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
             (0, vitest_1.expect)(source).toEqual(`<doc-button></doc-button>`);
         });
-        (0, vitest_1.it)('With props should generate tag with properties', () => {
+        (0, vitest_1.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,
+                'aria-label': 'Hello world',
             };
             const argTypes = {};
             const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
-            (0, vitest_1.expect)(source).toEqual(`<doc-button [counter]="4" [accent]="'High'" [isDisabled]="true" [label]="'Hello world'"></doc-button>`);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button [counter]="4" [accent]="'High'" [isDisabled]="true" [label]="'Hello world'" [aria-label]="'Hello world'"></doc-button>`);
         });
-        (0, vitest_1.it)('With props should generate tag with outputs', () => {
+        (0, vitest_1.it)('with props should generate tag with outputs', () => {
             const component = input_component_1.InputComponent;
             const props = {
                 isDisabled: true,
                 label: 'Hello world',
                 onClick: ($event) => { },
+                'dash-out': ($event) => { },
             };
             const argTypes = {};
             const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
-            (0, vitest_1.expect)(source).toEqual(`<doc-button [isDisabled]="true" [label]="'Hello world'" (onClick)="onClick($event)"></doc-button>`);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button [isDisabled]="true" [label]="'Hello world'" (onClick)="onClick($event)" (dash-out)="this['dash-out']($event)"></doc-button>`);
         });
         (0, vitest_1.it)('should generate correct property for overridden name for Input', () => {
             const component = input_component_1.InputComponent;
@@ -316,7 +619,7 @@ const input_component_1 = require("./__testfixtures__/input.component");
         });
     });
     (0, vitest_1.describe)('with argTypes (from compodoc)', () => {
-        (0, vitest_1.it)('Should handle enum as strongly typed enum', () => {
+        (0, vitest_1.it)('should handle enum as strongly typed enum', () => {
             const component = input_component_1.InputComponent;
             const props = {
                 isDisabled: false,
@@ -343,7 +646,7 @@ const input_component_1 = require("./__testfixtures__/input.component");
             const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
             (0, vitest_1.expect)(source).toEqual(`<doc-button [accent]="'High'" [isDisabled]="false" [label]="'Hello world'"></doc-button>`);
         });
-        (0, vitest_1.it)('Should handle enum without values as string', () => {
+        (0, vitest_1.it)('should handle enum without values as string', () => {
             const component = input_component_1.InputComponent;
             const props = {
                 isDisabled: false,
@@ -370,7 +673,7 @@ const input_component_1 = require("./__testfixtures__/input.component");
             const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
             (0, vitest_1.expect)(source).toEqual(`<doc-button [accent]="'High'" [isDisabled]="false" [label]="'Hello world'"></doc-button>`);
         });
-        (0, vitest_1.it)('Should handle objects correctly', () => {
+        (0, vitest_1.it)('should handle simple object as stringified', () => {
             const component = input_component_1.InputComponent;
             const someDataObject = {
                 one: 'Hello world',
@@ -398,5 +701,34 @@ const input_component_1 = require("./__testfixtures__/input.component");
             // This will have to do for now
             (0, vitest_1.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>`);
         });
+        (0, vitest_1.it)('should handle circular object as stringified', () => {
+            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\"",
+                    `a string literal with \'escaped single quotes\'`,
+                    `a string literal with \"escaped double quotes\"`,
+                ],
+            };
+            someDataObject.ref = someDataObject;
+            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
+            (0, vitest_1.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\\''], ref: '[Circular]'}"></doc-button>`);
+        });
     });
 });

package/dist/client/angular-beta/__testfixtures__/input.component.d.ts

@@ -8,6 +8,7 @@ export interface ISomeInterface {
     one: string;
     two: boolean;
     three: any[];
+    ref?: ISomeInterface;
 }
 export declare class InputComponent<T> {
     /** Appearance style of the button. */
@@ -20,7 +21,9 @@ export declare class InputComponent<T> {
     /** Sets the button to a disabled state. */
     isDisabled: boolean;
     label: string;
+    ariaLabel: string;
     /** Specifies some arbitrary object */
     someDataObject: ISomeInterface;
     onClick: EventEmitter<Event>;
+    dashOut: EventEmitter<any>;
 }

package/dist/client/angular-beta/__testfixtures__/input.component.js

@@ -24,6 +24,7 @@ let InputComponent = class InputComponent {
         /** Sets the button to a disabled state. */
         this.isDisabled = false;
         this.onClick = new core_1.EventEmitter();
+        this.dashOut = new core_1.EventEmitter();
     }
 };
 exports.InputComponent = InputComponent;
@@ -51,6 +52,10 @@ __decorate([
     (0, core_1.Input)(),
     __metadata("design:type", String)
 ], InputComponent.prototype, "label", void 0);
+__decorate([
+    (0, core_1.Input)('aria-label'),
+    __metadata("design:type", String)
+], InputComponent.prototype, "ariaLabel", void 0);
 __decorate([
     (0, core_1.Input)(),
     __metadata("design:type", Object)
@@ -59,6 +64,10 @@ __decorate([
     (0, core_1.Output)(),
     __metadata("design:type", Object)
 ], InputComponent.prototype, "onClick", void 0);
+__decorate([
+    (0, core_1.Output)('dash-out'),
+    __metadata("design:type", Object)
+], InputComponent.prototype, "dashOut", void 0);
 exports.InputComponent = InputComponent = __decorate([
     (0, core_1.Component)({
         selector: 'doc-button',

package/dist/client/argsToTemplate.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.argsToTemplate = void 0;
+const ComputesTemplateFromComponent_1 = require("./angular-beta/ComputesTemplateFromComponent");
 /**
  * Converts an object of arguments to a string of property and event bindings and excludes undefined values.
  * Why? Because Angular treats undefined values in property bindings as an actual value
@@ -48,7 +49,9 @@ function argsToTemplate(args, options = {}) {
             return !excludeSet.has(key);
         return true;
     })
-        .map(([key, value]) => typeof value === 'function' ? `(${key})="${key}($event)"` : `[${key}]="${key}"`)
+        .map(([key, value]) => typeof value === 'function'
+        ? `(${key})="${(0, ComputesTemplateFromComponent_1.formatPropInTemplate)(key)}($event)"`
+        : `[${key}]="${(0, ComputesTemplateFromComponent_1.formatPropInTemplate)(key)}"`)
         .join(' ');
 }
 exports.argsToTemplate = argsToTemplate;

package/dist/client/argsToTemplate.test.js

@@ -93,4 +93,9 @@ const argsToTemplate_1 = require("./argsToTemplate"); // adjust path
         const result = (0, argsToTemplate_1.argsToTemplate)(args, {});
         (0, vitest_1.expect)(result).toEqual('[input]="input" (event1)="event1($event)"');
     });
+    (0, vitest_1.it)('should format for non dot notation', () => {
+        const args = { 'non-dot': 'Value1', 'dash-out': () => { } };
+        const result = (0, argsToTemplate_1.argsToTemplate)(args, {});
+        (0, vitest_1.expect)(result).toEqual('[non-dot]="this[\'non-dot\']" (dash-out)="this[\'dash-out\']($event)"');
+    });
 });

package/dist/client/decorators.test.js

@@ -22,6 +22,8 @@ const defaultContext = {
     args: {},
     argTypes: {},
     globals: {},
+    globalTypes: {},
+    storyGlobals: {},
     hooks: {},
     loaded: {},
     originalStoryFn: vitest_1.vi.fn(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "8.3.0-alpha.2",
+  "version": "8.3.0-alpha.4",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -37,13 +37,13 @@
     "prep": "rimraf dist && node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "8.3.0-alpha.2",
-    "@storybook/components": "^8.3.0-alpha.2",
-    "@storybook/core-webpack": "8.3.0-alpha.2",
+    "@storybook/builder-webpack5": "8.3.0-alpha.4",
+    "@storybook/components": "^8.3.0-alpha.4",
+    "@storybook/core-webpack": "8.3.0-alpha.4",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "^8.3.0-alpha.2",
-    "@storybook/preview-api": "^8.3.0-alpha.2",
-    "@storybook/theming": "^8.3.0-alpha.2",
+    "@storybook/manager-api": "^8.3.0-alpha.4",
+    "@storybook/preview-api": "^8.3.0-alpha.4",
+    "@storybook/theming": "^8.3.0-alpha.4",
     "@types/node": "^18.0.0",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
@@ -93,7 +93,7 @@
     "@angular/platform-browser": ">=15.0.0 < 19.0.0",
     "@angular/platform-browser-dynamic": ">=15.0.0 < 19.0.0",
     "rxjs": "^6.0.0 || ^7.4.0",
-    "storybook": "^8.3.0-alpha.2",
+    "storybook": "^8.3.0-alpha.4",
     "typescript": "^4.0.0 || ^5.0.0",
     "zone.js": ">= 0.11.1 < 1.0.0"
   },