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

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

@@ -0,0 +1,140 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var __param = (this && this.__param) || function (paramIndex, decorator) {
+    return function (target, key) { decorator(target, key, paramIndex); }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createStorybookWrapperComponent = exports.componentNgModules = void 0;
+const core_1 = require("@angular/core");
+const rxjs_1 = require("rxjs");
+const operators_1 = require("rxjs/operators");
+const StorybookProvider_1 = require("./StorybookProvider");
+const NgComponentAnalyzer_1 = require("./utils/NgComponentAnalyzer");
+const PropertyExtractor_1 = require("./utils/PropertyExtractor");
+const getNonInputsOutputsProps = (ngComponentInputsOutputs, props = {}) => {
+    const inputs = ngComponentInputsOutputs.inputs
+        .filter((i) => i.templateName in props)
+        .map((i) => i.templateName);
+    const outputs = ngComponentInputsOutputs.outputs
+        .filter((o) => o.templateName in props)
+        .map((o) => o.templateName);
+    return Object.keys(props).filter((k) => ![...inputs, ...outputs].includes(k));
+};
+// component modules cache
+exports.componentNgModules = new Map();
+/**
+ * Wraps the story template into a component
+ */
+const createStorybookWrapperComponent = ({ selector, template, storyComponent, styles, moduleMetadata, initialProps, analyzedMetadata, }) => {
+    // In ivy, a '' selector is not allowed, therefore we need to just set it to anything if
+    // storyComponent was not provided.
+    const viewChildSelector = storyComponent ?? '__storybook-noop';
+    const { imports, declarations, providers } = analyzedMetadata;
+    // Only create a new module if it doesn't already exist
+    // This is to prevent the module from being recreated on every story change
+    // Declarations & Imports are only added once
+    // Providers are added on every story change to allow for story-specific providers
+    let ngModule = exports.componentNgModules.get(storyComponent);
+    if (!ngModule) {
+        let StorybookComponentModule = class StorybookComponentModule {
+        };
+        StorybookComponentModule = __decorate([
+            (0, core_1.NgModule)({
+                declarations,
+                imports,
+                exports: [...declarations, ...imports],
+            })
+        ], StorybookComponentModule);
+        exports.componentNgModules.set(storyComponent, StorybookComponentModule);
+        ngModule = exports.componentNgModules.get(storyComponent);
+    }
+    PropertyExtractor_1.PropertyExtractor.warnImportsModuleWithProviders(analyzedMetadata);
+    let StorybookWrapperComponent = class StorybookWrapperComponent {
+        constructor(storyProps$, changeDetectorRef) {
+            this.storyProps$ = storyProps$;
+            this.changeDetectorRef = changeDetectorRef;
+            // Used in case of a component without selector
+            this.storyComponent = storyComponent ?? '';
+        }
+        ngOnInit() {
+            // Subscribes to the observable storyProps$ to keep these properties up to date
+            this.storyWrapperPropsSubscription = this.storyProps$.subscribe((storyProps = {}) => {
+                // All props are added as component properties
+                Object.assign(this, storyProps);
+                this.changeDetectorRef.detectChanges();
+                this.changeDetectorRef.markForCheck();
+            });
+        }
+        ngAfterViewInit() {
+            // Bind properties to component, if the story have component
+            if (this.storyComponentElementRef) {
+                const ngComponentInputsOutputs = (0, NgComponentAnalyzer_1.getComponentInputsOutputs)(storyComponent);
+                const initialOtherProps = getNonInputsOutputsProps(ngComponentInputsOutputs, initialProps);
+                // Initializes properties that are not Inputs | Outputs
+                // Allows story props to override local component properties
+                initialOtherProps.forEach((p) => {
+                    this.storyComponentElementRef[p] = initialProps[p];
+                });
+                // `markForCheck` the component in case this uses changeDetection: OnPush
+                // And then forces the `detectChanges`
+                this.storyComponentViewContainerRef.injector.get(core_1.ChangeDetectorRef).markForCheck();
+                this.changeDetectorRef.detectChanges();
+                // Once target component has been initialized, the storyProps$ observable keeps target component properties than are not Input|Output up to date
+                this.storyComponentPropsSubscription = this.storyProps$
+                    .pipe((0, operators_1.skip)(1), (0, operators_1.map)((props) => {
+                    const propsKeyToKeep = getNonInputsOutputsProps(ngComponentInputsOutputs, props);
+                    return propsKeyToKeep.reduce((acc, p) => ({ ...acc, [p]: props[p] }), {});
+                }))
+                    .subscribe((props) => {
+                    // Replace inputs with new ones from props
+                    Object.assign(this.storyComponentElementRef, props);
+                    // `markForCheck` the component in case this uses changeDetection: OnPush
+                    // And then forces the `detectChanges`
+                    this.storyComponentViewContainerRef.injector.get(core_1.ChangeDetectorRef).markForCheck();
+                    this.changeDetectorRef.detectChanges();
+                });
+            }
+        }
+        ngOnDestroy() {
+            if (this.storyComponentPropsSubscription != null) {
+                this.storyComponentPropsSubscription.unsubscribe();
+            }
+            if (this.storyWrapperPropsSubscription != null) {
+                this.storyWrapperPropsSubscription.unsubscribe();
+            }
+        }
+    };
+    __decorate([
+        (0, core_1.ViewChild)(viewChildSelector, { static: true }),
+        __metadata("design:type", core_1.ElementRef)
+    ], StorybookWrapperComponent.prototype, "storyComponentElementRef", void 0);
+    __decorate([
+        (0, core_1.ViewChild)(viewChildSelector, { read: core_1.ViewContainerRef, static: true }),
+        __metadata("design:type", core_1.ViewContainerRef)
+    ], StorybookWrapperComponent.prototype, "storyComponentViewContainerRef", void 0);
+    StorybookWrapperComponent = __decorate([
+        (0, core_1.Component)({
+            selector,
+            template,
+            standalone: true,
+            imports: [ngModule],
+            providers,
+            styles,
+            schemas: moduleMetadata.schemas,
+        }),
+        __param(0, (0, core_1.Inject)(StorybookProvider_1.STORY_PROPS)),
+        __param(1, (0, core_1.Inject)(core_1.ChangeDetectorRef)),
+        __metadata("design:paramtypes", [rxjs_1.Subject,
+            core_1.ChangeDetectorRef])
+    ], StorybookWrapperComponent);
+    return StorybookWrapperComponent;
+};
+exports.createStorybookWrapperComponent = createStorybookWrapperComponent;

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

@@ -0,0 +1,26 @@
+import { EventEmitter } from '@angular/core';
+export declare const exportedConstant = "An exported constant";
+export declare enum ButtonAccent {
+    'Normal' = "Normal",
+    'High' = "High"
+}
+export interface ISomeInterface {
+    one: string;
+    two: boolean;
+    three: any[];
+}
+export declare class InputComponent<T> {
+    /** Appearance style of the button. */
+    appearance: 'primary' | 'secondary';
+    counter: number;
+    /** Specify the accent-type of the button */
+    accent: ButtonAccent;
+    /** To test source-generation with overridden propertyname */
+    foregroundColor: string;
+    /** Sets the button to a disabled state. */
+    isDisabled: boolean;
+    label: string;
+    /** Specifies some arbitrary object */
+    someDataObject: ISomeInterface;
+    onClick: EventEmitter<Event>;
+}

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

@@ -0,0 +1,67 @@
+"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 });
+exports.InputComponent = exports.ButtonAccent = exports.exportedConstant = void 0;
+const core_1 = require("@angular/core");
+exports.exportedConstant = 'An exported constant';
+var ButtonAccent;
+(function (ButtonAccent) {
+    ButtonAccent["Normal"] = "Normal";
+    ButtonAccent["High"] = "High";
+})(ButtonAccent = exports.ButtonAccent || (exports.ButtonAccent = {}));
+let InputComponent = class InputComponent {
+    constructor() {
+        /** Appearance style of the button. */
+        this.appearance = 'secondary';
+        /** Sets the button to a disabled state. */
+        this.isDisabled = false;
+        this.onClick = new core_1.EventEmitter();
+    }
+};
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", String)
+], InputComponent.prototype, "appearance", void 0);
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", Number)
+], InputComponent.prototype, "counter", void 0);
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", String)
+], InputComponent.prototype, "accent", void 0);
+__decorate([
+    (0, core_1.Input)('color'),
+    __metadata("design:type", String)
+], InputComponent.prototype, "foregroundColor", void 0);
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", Object)
+], InputComponent.prototype, "isDisabled", void 0);
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", String)
+], InputComponent.prototype, "label", void 0);
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", Object)
+], InputComponent.prototype, "someDataObject", void 0);
+__decorate([
+    (0, core_1.Output)(),
+    __metadata("design:type", Object)
+], InputComponent.prototype, "onClick", void 0);
+InputComponent = __decorate([
+    (0, core_1.Component)({
+        selector: 'doc-button',
+        template: '<button>{{ label }}</button>',
+    })
+], InputComponent);
+exports.InputComponent = InputComponent;

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

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

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

@@ -0,0 +1,20 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithOfficialModule = void 0;
+const common_1 = require("@angular/common");
+const http_1 = require("@angular/common/http");
+const core_1 = require("@angular/core");
+let WithOfficialModule = class WithOfficialModule {
+};
+WithOfficialModule = __decorate([
+    (0, core_1.NgModule)({
+        imports: [common_1.CommonModule, http_1.HttpClientModule],
+    })
+], WithOfficialModule);
+exports.WithOfficialModule = WithOfficialModule;

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

@@ -0,0 +1,29 @@
+import { Type, Component } from '@angular/core';
+export type ComponentInputsOutputs = {
+    inputs: {
+        propName: string;
+        templateName: string;
+    }[];
+    outputs: {
+        propName: string;
+        templateName: string;
+    }[];
+};
+/**
+ * Returns component Inputs / Outputs by browsing these properties and decorator
+ */
+export declare const getComponentInputsOutputs: (component: any) => ComponentInputsOutputs;
+export declare const isDeclarable: (component: any) => boolean;
+export declare const isComponent: (component: any) => component is Type<unknown>;
+export declare const isStandaloneComponent: (component: any) => component is Type<unknown>;
+/**
+ * Returns all component decorator properties
+ * is used to get all `@Input` and `@Output` Decorator
+ */
+export declare const getComponentPropsDecoratorMetadata: (component: any) => {
+    [key: string]: any[];
+};
+/**
+ * Returns component decorator `@Component`
+ */
+export declare const getComponentDecoratorMetadata: (component: any) => Component | undefined;

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

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getComponentDecoratorMetadata = exports.getComponentPropsDecoratorMetadata = exports.isStandaloneComponent = exports.isComponent = exports.isDeclarable = exports.getComponentInputsOutputs = void 0;
+const core_1 = require("@angular/core");
+const reflectionCapabilities = new core_1.ɵReflectionCapabilities();
+/**
+ * Returns component Inputs / Outputs by browsing these properties and decorator
+ */
+const getComponentInputsOutputs = (component) => {
+    const componentMetadata = (0, exports.getComponentDecoratorMetadata)(component);
+    const componentPropsMetadata = (0, exports.getComponentPropsDecoratorMetadata)(component);
+    const initialValue = {
+        inputs: [],
+        outputs: [],
+    };
+    // Adds the I/O present in @Component metadata
+    if (componentMetadata && componentMetadata.inputs) {
+        initialValue.inputs.push(...componentMetadata.inputs.map((i) => ({
+            propName: typeof i === 'string' ? i : i.name,
+            templateName: typeof i === 'string' ? i : i.alias,
+        })));
+    }
+    if (componentMetadata && componentMetadata.outputs) {
+        initialValue.outputs.push(...componentMetadata.outputs.map((i) => ({ propName: i, templateName: i })));
+    }
+    if (!componentPropsMetadata) {
+        return initialValue;
+    }
+    // Browses component properties to extract I/O
+    // Filters properties that have the same name as the one present in the @Component property
+    return Object.entries(componentPropsMetadata).reduce((previousValue, [propertyName, values]) => {
+        const value = values.find((v) => v instanceof core_1.Input || v instanceof core_1.Output);
+        if (value instanceof core_1.Input) {
+            const inputToAdd = {
+                propName: propertyName,
+                templateName: value.bindingPropertyName ?? value.alias ?? propertyName,
+            };
+            const previousInputsFiltered = previousValue.inputs.filter((i) => i.templateName !== propertyName);
+            return {
+                ...previousValue,
+                inputs: [...previousInputsFiltered, inputToAdd],
+            };
+        }
+        if (value instanceof core_1.Output) {
+            const outputToAdd = {
+                propName: propertyName,
+                templateName: value.bindingPropertyName ?? value.alias ?? propertyName,
+            };
+            const previousOutputsFiltered = previousValue.outputs.filter((i) => i.templateName !== propertyName);
+            return {
+                ...previousValue,
+                outputs: [...previousOutputsFiltered, outputToAdd],
+            };
+        }
+        return previousValue;
+    }, initialValue);
+};
+exports.getComponentInputsOutputs = getComponentInputsOutputs;
+const isDeclarable = (component) => {
+    if (!component) {
+        return false;
+    }
+    const decorators = reflectionCapabilities.annotations(component);
+    return !!(decorators || []).find((d) => d instanceof core_1.Directive || d instanceof core_1.Pipe || d instanceof core_1.Component);
+};
+exports.isDeclarable = isDeclarable;
+const isComponent = (component) => {
+    if (!component) {
+        return false;
+    }
+    const decorators = reflectionCapabilities.annotations(component);
+    return (decorators || []).some((d) => d instanceof core_1.Component);
+};
+exports.isComponent = isComponent;
+const isStandaloneComponent = (component) => {
+    if (!component) {
+        return false;
+    }
+    const decorators = reflectionCapabilities.annotations(component);
+    // TODO: `standalone` is only available in Angular v14. Remove cast to `any` once
+    // Angular deps are updated to v14.x.x.
+    return (decorators || []).some((d) => (d instanceof core_1.Component || d instanceof core_1.Directive || d instanceof core_1.Pipe) && d.standalone);
+};
+exports.isStandaloneComponent = isStandaloneComponent;
+/**
+ * Returns all component decorator properties
+ * is used to get all `@Input` and `@Output` Decorator
+ */
+const getComponentPropsDecoratorMetadata = (component) => {
+    return reflectionCapabilities.propMetadata(component);
+};
+exports.getComponentPropsDecoratorMetadata = getComponentPropsDecoratorMetadata;
+/**
+ * Returns component decorator `@Component`
+ */
+const getComponentDecoratorMetadata = (component) => {
+    const decorators = reflectionCapabilities.annotations(component);
+    return decorators.reverse().find((d) => d instanceof core_1.Component);
+};
+exports.getComponentDecoratorMetadata = getComponentDecoratorMetadata;

package/dist/client/angular-beta/utils/NgComponentAnalyzer.test.d.ts

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