@storybook/angular 6.5.0-alpha.46 → 6.5.0-alpha.49

package/dist/ts3.4/client/docs/compodoc.d.ts

@@ -0,0 +1,18 @@
+import { ArgTypes } from '@storybook/api';
+import { Class, CompodocJson, Component, Injectable, Method, Pipe, Property, Directive } from './types';
+export declare const isMethod: (methodOrProp: Method | Property) => methodOrProp is Method;
+export declare const setCompodocJson: (compodocJson: CompodocJson) => void;
+export declare const getCompodocJson: () => CompodocJson;
+export declare const checkValidComponentOrDirective: (component: Component | Directive) => void;
+export declare const checkValidCompodocJson: (compodocJson: CompodocJson) => void;
+export declare const findComponentByName: (name: string, compodocJson: CompodocJson) => Class | Injectable | Pipe | Directive;
+export declare const extractType: (property: Property, defaultValue: any) => {
+    name: string;
+    value?: undefined;
+} | {
+    name: string;
+    value: any[];
+};
+export declare const extractArgTypesFromData: (componentData: Class | Directive | Injectable | Pipe) => ArgTypes;
+export declare const extractArgTypes: (component: Component | Directive) => ArgTypes;
+export declare const extractComponentDescription: (component: Component | Directive) => string;

package/dist/ts3.4/client/docs/config.d.ts

@@ -0,0 +1,15 @@
+import { SourceType } from '@storybook/docs-tools';
+export declare const parameters: {
+    docs: {
+        inlineStories: boolean;
+        prepareForInline: (storyFn: import("@storybook/csf").PartialStoryFn<import("..").AngularFramework, import("@storybook/csf").Args>, { id, parameters, component }: import("..").StoryContext) => import("react").DetailedReactHTMLElement<import("react").HTMLAttributes<undefined>, undefined>;
+        extractArgTypes: (component: import("./types").Directive) => import("@storybook/api").ArgTypes;
+        extractComponentDescription: (component: import("./types").Directive) => string;
+        source: {
+            type: SourceType;
+            language: string;
+        };
+    };
+};
+export declare const decorators: ((storyFn: import("@storybook/csf").PartialStoryFn<import("..").AngularFramework, import("@storybook/csf").Args>, context: import("..").StoryContext) => import("..").IStory)[];
+export declare const argTypesEnhancers: (<TFramework extends import("@storybook/csf").AnyFramework>(context: import("@storybook/csf").StoryContextForEnhancers<TFramework, import("@storybook/csf").Args>) => import("@storybook/csf").StrictArgTypes<import("@storybook/csf").Args> | import("@storybook/addons").Parameters)[];

package/dist/ts3.4/client/docs/index.d.ts

@@ -0,0 +1 @@
+export * from './compodoc';

package/dist/ts3.4/client/docs/prepareForInline.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { PartialStoryFn } from '@storybook/csf';
+import { AngularFramework, StoryContext } from '..';
+/**
+ * Uses the angular renderer to generate a story. Uses p-limit to run synchronously
+ */
+export declare const prepareForInline: (storyFn: PartialStoryFn<AngularFramework>, { id, parameters, component }: StoryContext) => React.DetailedReactHTMLElement<React.HTMLAttributes<undefined>, undefined>;

package/dist/ts3.4/client/docs/sourceDecorator.d.ts

@@ -0,0 +1,9 @@
+import { PartialStoryFn } from '@storybook/csf';
+import { StoryContext, AngularFramework } from '..';
+export declare const skipSourceRender: (context: StoryContext) => any;
+/**
+ * Angular source decorator.
+ * @param storyFn Fn
+ * @param context  StoryContext
+ */
+export declare const sourceDecorator: (storyFn: PartialStoryFn<AngularFramework>, context: StoryContext) => import("..").IStory;

package/dist/ts3.4/client/docs/types.d.ts

@@ -0,0 +1,102 @@
+export interface Method {
+    name: string;
+    args: Argument[];
+    returnType: string;
+    decorators?: Decorator[];
+    description?: string;
+    rawdescription?: string;
+}
+export interface JsDocTag {
+    comment?: string;
+    tagName?: {
+        escapedText?: string;
+    };
+}
+export interface Property {
+    name: string;
+    decorators?: Decorator[];
+    type: string;
+    optional: boolean;
+    defaultValue?: string;
+    description?: string;
+    rawdescription?: string;
+    jsdoctags?: JsDocTag[];
+}
+export interface Class {
+    name: string;
+    ngname: string;
+    type: 'pipe';
+    properties: Property[];
+    methods: Method[];
+    description?: string;
+    rawdescription?: string;
+}
+export interface Injectable {
+    name: string;
+    type: 'injectable';
+    properties: Property[];
+    methods: Method[];
+    description?: string;
+    rawdescription?: string;
+}
+export interface Pipe {
+    name: string;
+    type: 'class';
+    properties: Property[];
+    methods: Method[];
+    description?: string;
+    rawdescription?: string;
+}
+export interface Directive {
+    name: string;
+    type: 'directive' | 'component';
+    propertiesClass: Property[];
+    inputsClass: Property[];
+    outputsClass: Property[];
+    methodsClass: Method[];
+    description?: string;
+    rawdescription?: string;
+}
+export declare type Component = Directive;
+export interface Argument {
+    name: string;
+    type: string;
+    optional?: boolean;
+}
+export interface Decorator {
+    name: string;
+}
+export interface TypeAlias {
+    name: string;
+    ctype: string;
+    subtype: string;
+    rawtype: string;
+    file: string;
+    kind: number;
+    description?: string;
+    rawdescription?: string;
+}
+export interface EnumType {
+    name: string;
+    childs: EnumTypeChild[];
+    ctype: string;
+    subtype: string;
+    file: string;
+    description?: string;
+    rawdescription?: string;
+}
+export interface EnumTypeChild {
+    name: string;
+    value?: string;
+}
+export interface CompodocJson {
+    directives: Directive[];
+    components: Component[];
+    pipes: Pipe[];
+    injectables: Injectable[];
+    classes: Class[];
+    miscellaneous?: {
+        typealiases?: TypeAlias[];
+        enumerations?: EnumType[];
+    };
+}

package/dist/ts3.4/server/framework-preset-angular-docs.d.ts

@@ -0,0 +1,2 @@
+import { StorybookConfig } from '@storybook/core-common';
+export declare const config: StorybookConfig['config'];

package/dist/ts3.9/builders/build-storybook/index.d.ts

@@ -1,6 +1,6 @@
 import { BuilderOutput } from '@angular-devkit/architect';
 import { JsonObject } from '@angular-devkit/core';
-import { CLIOptions } from '@storybook/core-common';
+import type { CLIOptions } from '@storybook/core-common';
 import { ExtraEntryPoint, StylePreprocessorOptions } from '@angular-devkit/build-angular';
 export declare type StorybookBuilderOptions = JsonObject & {
     browserTarget?: string | null;

package/dist/ts3.9/builders/start-storybook/index.d.ts

@@ -1,7 +1,7 @@
 import { BuilderOutput } from '@angular-devkit/architect';
 import { JsonObject } from '@angular-devkit/core';
 import { ExtraEntryPoint, StylePreprocessorOptions } from '@angular-devkit/build-angular';
-import { CLIOptions } from '@storybook/core-common';
+import type { CLIOptions } from '@storybook/core-common';
 export declare type StorybookBuilderOptions = JsonObject & {
     browserTarget?: string | null;
     tsConfig?: string;

package/dist/ts3.9/client/docs/compodoc.d.ts

@@ -0,0 +1,18 @@
+import type { ArgTypes } from '@storybook/api';
+import type { Class, CompodocJson, Component, Injectable, Method, Pipe, Property, Directive } from './types';
+export declare const isMethod: (methodOrProp: Method | Property) => methodOrProp is Method;
+export declare const setCompodocJson: (compodocJson: CompodocJson) => void;
+export declare const getCompodocJson: () => CompodocJson;
+export declare const checkValidComponentOrDirective: (component: Component | Directive) => void;
+export declare const checkValidCompodocJson: (compodocJson: CompodocJson) => void;
+export declare const findComponentByName: (name: string, compodocJson: CompodocJson) => Class | Injectable | Pipe | Directive;
+export declare const extractType: (property: Property, defaultValue: any) => {
+    name: string;
+    value?: undefined;
+} | {
+    name: string;
+    value: any[];
+};
+export declare const extractArgTypesFromData: (componentData: Class | Directive | Injectable | Pipe) => ArgTypes;
+export declare const extractArgTypes: (component: Component | Directive) => ArgTypes;
+export declare const extractComponentDescription: (component: Component | Directive) => string;

package/dist/ts3.9/client/docs/compodoc.js

@@ -0,0 +1,247 @@
+"use strict";
+/* eslint-disable no-underscore-dangle */
+/* global window */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractComponentDescription = exports.extractArgTypes = exports.extractArgTypesFromData = exports.extractType = exports.findComponentByName = exports.checkValidCompodocJson = exports.checkValidComponentOrDirective = exports.getCompodocJson = exports.setCompodocJson = exports.isMethod = void 0;
+const client_logger_1 = require("@storybook/client-logger");
+exports.isMethod = (methodOrProp) => {
+    return methodOrProp.args !== undefined;
+};
+exports.setCompodocJson = (compodocJson) => {
+    // @ts-ignore
+    window.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
+};
+// @ts-ignore
+exports.getCompodocJson = () => window.__STORYBOOK_COMPODOC_JSON__;
+exports.checkValidComponentOrDirective = (component) => {
+    if (!component.name) {
+        throw new Error(`Invalid component ${JSON.stringify(component)}`);
+    }
+};
+exports.checkValidCompodocJson = (compodocJson) => {
+    if (!compodocJson || !compodocJson.components) {
+        throw new Error('Invalid compodoc JSON');
+    }
+};
+const hasDecorator = (item, decoratorName) => item.decorators && item.decorators.find((x) => x.name === decoratorName);
+const mapPropertyToSection = (item) => {
+    if (hasDecorator(item, 'ViewChild')) {
+        return 'view child';
+    }
+    if (hasDecorator(item, 'ViewChildren')) {
+        return 'view children';
+    }
+    if (hasDecorator(item, 'ContentChild')) {
+        return 'content child';
+    }
+    if (hasDecorator(item, 'ContentChildren')) {
+        return 'content children';
+    }
+    return 'properties';
+};
+const mapItemToSection = (key, item) => {
+    switch (key) {
+        case 'methods':
+        case 'methodsClass':
+            return 'methods';
+        case 'inputsClass':
+            return 'inputs';
+        case 'outputsClass':
+            return 'outputs';
+        case 'properties':
+        case 'propertiesClass':
+            if (exports.isMethod(item)) {
+                throw new Error("Cannot be of type Method if key === 'propertiesClass'");
+            }
+            return mapPropertyToSection(item);
+        default:
+            throw new Error(`Unknown key: ${key}`);
+    }
+};
+exports.findComponentByName = (name, compodocJson) => compodocJson.components.find((c) => c.name === name) ||
+    compodocJson.directives.find((c) => c.name === name) ||
+    compodocJson.pipes.find((c) => c.name === name) ||
+    compodocJson.injectables.find((c) => c.name === name) ||
+    compodocJson.classes.find((c) => c.name === name);
+const getComponentData = (component) => {
+    if (!component) {
+        return null;
+    }
+    exports.checkValidComponentOrDirective(component);
+    const compodocJson = exports.getCompodocJson();
+    if (!compodocJson) {
+        return null;
+    }
+    exports.checkValidCompodocJson(compodocJson);
+    const { name } = component;
+    const metadata = exports.findComponentByName(name, compodocJson);
+    if (!metadata) {
+        client_logger_1.logger.warn(`Component not found in compodoc JSON: '${name}'`);
+    }
+    return metadata;
+};
+const displaySignature = (item) => {
+    const args = item.args.map((arg) => `${arg.name}${arg.optional ? '?' : ''}: ${arg.type}`);
+    return `(${args.join(', ')}) => ${item.returnType}`;
+};
+const extractTypeFromValue = (defaultValue) => {
+    const valueType = typeof defaultValue;
+    return defaultValue || valueType === 'number' || valueType === 'boolean' || valueType === 'string'
+        ? valueType
+        : null;
+};
+const extractEnumValues = (compodocType) => {
+    var _a, _b;
+    const compodocJson = exports.getCompodocJson();
+    const enumType = (_b = (_a = compodocJson === null || compodocJson === void 0 ? void 0 : compodocJson.miscellaneous) === null || _a === void 0 ? void 0 : _a.enumerations) === null || _b === void 0 ? void 0 : _b.find((x) => x.name === compodocType);
+    if (enumType === null || enumType === void 0 ? void 0 : enumType.childs.every((x) => x.value)) {
+        return enumType.childs.map((x) => x.value);
+    }
+    if (typeof compodocType !== 'string' || compodocType.indexOf('|') === -1) {
+        return null;
+    }
+    try {
+        return compodocType.split('|').map((value) => JSON.parse(value));
+    }
+    catch (e) {
+        return null;
+    }
+};
+exports.extractType = (property, defaultValue) => {
+    const compodocType = property.type || extractTypeFromValue(defaultValue);
+    switch (compodocType) {
+        case 'string':
+        case 'boolean':
+        case 'number':
+            return { name: compodocType };
+        case undefined:
+        case null:
+            return { name: 'void' };
+        default: {
+            const resolvedType = resolveTypealias(compodocType);
+            const enumValues = extractEnumValues(resolvedType);
+            return enumValues ? { name: 'enum', value: enumValues } : { name: 'object' };
+        }
+    }
+};
+const castDefaultValue = (property, defaultValue) => {
+    const compodocType = property.type;
+    // All these checks are necessary as compodoc does not always set the type ie. @HostBinding have empty types.
+    // null and undefined also have 'any' type
+    if (['boolean', 'number', 'string', 'EventEmitter'].includes(compodocType)) {
+        switch (compodocType) {
+            case 'boolean':
+                return defaultValue === 'true';
+            case 'number':
+                return Number(defaultValue);
+            case 'EventEmitter':
+                return undefined;
+            default:
+                return defaultValue;
+        }
+    }
+    else {
+        switch (defaultValue) {
+            case 'true':
+                return true;
+            case 'false':
+                return false;
+            case 'null':
+                return null;
+            case 'undefined':
+                return undefined;
+            default:
+                return defaultValue;
+        }
+    }
+};
+const extractDefaultValueFromComments = (property, value) => {
+    let commentValue = value;
+    property.jsdoctags.forEach((tag) => {
+        if (['default', 'defaultvalue'].includes(tag.tagName.escapedText)) {
+            // @ts-ignore
+            const dom = new window.DOMParser().parseFromString(tag.comment, 'text/html');
+            commentValue = dom.body.textContent;
+        }
+    });
+    return commentValue;
+};
+const extractDefaultValue = (property) => {
+    var _a, _b;
+    try {
+        let value = (_a = property.defaultValue) === null || _a === void 0 ? void 0 : _a.replace(/^'(.*)'$/, '$1');
+        value = castDefaultValue(property, value);
+        if (value == null && ((_b = property.jsdoctags) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+            value = extractDefaultValueFromComments(property, value);
+        }
+        return value;
+    }
+    catch (err) {
+        client_logger_1.logger.debug(`Error extracting ${property.name}: ${property.defaultValue}`);
+        return undefined;
+    }
+};
+const resolveTypealias = (compodocType) => {
+    var _a, _b;
+    const compodocJson = exports.getCompodocJson();
+    const typeAlias = (_b = (_a = compodocJson === null || compodocJson === void 0 ? void 0 : compodocJson.miscellaneous) === null || _a === void 0 ? void 0 : _a.typealiases) === null || _b === void 0 ? void 0 : _b.find((x) => x.name === compodocType);
+    return typeAlias ? resolveTypealias(typeAlias.rawtype) : compodocType;
+};
+exports.extractArgTypesFromData = (componentData) => {
+    const sectionToItems = {};
+    const compodocClasses = ['component', 'directive'].includes(componentData.type)
+        ? ['propertiesClass', 'methodsClass', 'inputsClass', 'outputsClass']
+        : ['properties', 'methods'];
+    compodocClasses.forEach((key) => {
+        const data = componentData[key] || [];
+        data.forEach((item) => {
+            const section = mapItemToSection(key, item);
+            const defaultValue = exports.isMethod(item) ? undefined : extractDefaultValue(item);
+            const type = exports.isMethod(item) || (section !== 'inputs' && section !== 'properties')
+                ? { name: 'void' }
+                : exports.extractType(item, defaultValue);
+            const action = section === 'outputs' ? { action: item.name } : {};
+            const argType = Object.assign(Object.assign({ name: item.name, description: item.rawdescription || item.description, defaultValue,
+                type }, action), { table: {
+                    category: section,
+                    type: {
+                        summary: exports.isMethod(item) ? displaySignature(item) : item.type,
+                        required: exports.isMethod(item) ? false : !item.optional,
+                    },
+                    defaultValue: { summary: defaultValue },
+                } });
+            if (!sectionToItems[section]) {
+                sectionToItems[section] = [];
+            }
+            sectionToItems[section].push(argType);
+        });
+    });
+    const SECTIONS = [
+        'properties',
+        'inputs',
+        'outputs',
+        'methods',
+        'view child',
+        'view children',
+        'content child',
+        'content children',
+    ];
+    const argTypes = {};
+    SECTIONS.forEach((section) => {
+        const items = sectionToItems[section];
+        if (items) {
+            items.forEach((argType) => {
+                argTypes[argType.name] = argType;
+            });
+        }
+    });
+    return argTypes;
+};
+exports.extractArgTypes = (component) => {
+    const componentData = getComponentData(component);
+    return componentData && exports.extractArgTypesFromData(componentData);
+};
+exports.extractComponentDescription = (component) => {
+    const componentData = getComponentData(component);
+    return componentData && (componentData.rawdescription || componentData.description);
+};

package/dist/ts3.9/client/docs/config.d.ts

@@ -0,0 +1,15 @@
+import { SourceType } from '@storybook/docs-tools';
+export declare const parameters: {
+    docs: {
+        inlineStories: boolean;
+        prepareForInline: (storyFn: import("@storybook/csf").PartialStoryFn<import("..").AngularFramework, import("@storybook/csf").Args>, { id, parameters, component }: import("..").StoryContext) => import("react").DetailedReactHTMLElement<import("react").HTMLAttributes<undefined>, undefined>;
+        extractArgTypes: (component: import("./types").Directive) => import("@storybook/api").ArgTypes;
+        extractComponentDescription: (component: import("./types").Directive) => string;
+        source: {
+            type: SourceType;
+            language: string;
+        };
+    };
+};
+export declare const decorators: ((storyFn: import("@storybook/csf").PartialStoryFn<import("..").AngularFramework, import("@storybook/csf").Args>, context: import("..").StoryContext) => import("..").IStory)[];
+export declare const argTypesEnhancers: (<TFramework extends import("@storybook/csf").AnyFramework>(context: import("@storybook/csf").StoryContextForEnhancers<TFramework, import("@storybook/csf").Args>) => import("@storybook/csf").StrictArgTypes<import("@storybook/csf").Args> | import("@storybook/addons").Parameters)[];

package/dist/ts3.9/client/docs/config.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.argTypesEnhancers = exports.decorators = exports.parameters = void 0;
+const docs_tools_1 = require("@storybook/docs-tools");
+const compodoc_1 = require("./compodoc");
+const sourceDecorator_1 = require("./sourceDecorator");
+const prepareForInline_1 = require("./prepareForInline");
+exports.parameters = {
+    docs: {
+        // probably set this to true by default once it's battle-tested
+        inlineStories: false,
+        prepareForInline: prepareForInline_1.prepareForInline,
+        extractArgTypes: compodoc_1.extractArgTypes,
+        extractComponentDescription: compodoc_1.extractComponentDescription,
+        source: {
+            type: docs_tools_1.SourceType.DYNAMIC,
+            language: 'html',
+        },
+    },
+};
+exports.decorators = [sourceDecorator_1.sourceDecorator];
+exports.argTypesEnhancers = [docs_tools_1.enhanceArgTypes];

package/dist/ts3.9/client/docs/index.d.ts

@@ -0,0 +1 @@
+export * from './compodoc';

package/dist/ts3.9/client/docs/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./compodoc"), exports);

package/dist/ts3.9/client/docs/prepareForInline.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { PartialStoryFn } from '@storybook/csf';
+import { AngularFramework, StoryContext } from '..';
+/**
+ * Uses the angular renderer to generate a story. Uses p-limit to run synchronously
+ */
+export declare const prepareForInline: (storyFn: PartialStoryFn<AngularFramework>, { id, parameters, component }: StoryContext) => React.DetailedReactHTMLElement<React.HTMLAttributes<undefined>, undefined>;

package/dist/ts3.9/client/docs/prepareForInline.js

@@ -0,0 +1,45 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prepareForInline = void 0;
+const react_1 = __importDefault(require("react"));
+const p_limit_1 = __importDefault(require("p-limit"));
+const nanoid_1 = require("nanoid");
+const renderer_1 = require("../../renderer");
+const limit = p_limit_1.default(1);
+/**
+ * Uses the angular renderer to generate a story. Uses p-limit to run synchronously
+ */
+exports.prepareForInline = (storyFn, { id, parameters, component }) => {
+    const el = react_1.default.useRef();
+    react_1.default.useEffect(() => {
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            limit(() => __awaiter(void 0, void 0, void 0, function* () {
+                const renderer = yield renderer_1.rendererFactory.getRendererInstance(`${id}-${nanoid_1.nanoid(10)}`.toLowerCase(), el.current);
+                if (renderer) {
+                    yield renderer.render({
+                        forced: false,
+                        component,
+                        parameters,
+                        storyFnAngular: storyFn(),
+                        targetDOMNode: el.current,
+                    });
+                }
+            }));
+        }))();
+    });
+    return react_1.default.createElement('div', {
+        ref: el,
+    });
+};

package/dist/ts3.9/client/docs/sourceDecorator.d.ts

@@ -0,0 +1,9 @@
+import type { PartialStoryFn } from '@storybook/csf';
+import { StoryContext, AngularFramework } from '..';
+export declare const skipSourceRender: (context: StoryContext) => any;
+/**
+ * Angular source decorator.
+ * @param storyFn Fn
+ * @param context  StoryContext
+ */
+export declare const sourceDecorator: (storyFn: PartialStoryFn<AngularFramework>, context: StoryContext) => import("..").IStory;

package/dist/ts3.9/client/docs/sourceDecorator.js

@@ -0,0 +1,97 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sourceDecorator = exports.skipSourceRender = void 0;
+const addons_1 = require("@storybook/addons");
+const docs_tools_1 = require("@storybook/docs-tools");
+const renderer_1 = require("../../renderer");
+exports.skipSourceRender = (context) => {
+    var _a;
+    const sourceParams = (_a = context === null || context === void 0 ? void 0 : context.parameters.docs) === null || _a === void 0 ? void 0 : _a.source;
+    // always render if the user forces it
+    if ((sourceParams === null || sourceParams === void 0 ? void 0 : sourceParams.type) === docs_tools_1.SourceType.DYNAMIC) {
+        return false;
+    }
+    // never render if the user is forcing the block to render code, or
+    // if the user provides code
+    return (sourceParams === null || sourceParams === void 0 ? void 0 : sourceParams.code) || (sourceParams === null || sourceParams === void 0 ? void 0 : sourceParams.type) === docs_tools_1.SourceType.CODE;
+};
+let prettyUpInternal;
+const makePrettyUp = () => __awaiter(void 0, void 0, void 0, function* () {
+    if (prettyUpInternal) {
+        return prettyUpInternal;
+    }
+    const prettierHtml = yield Promise.resolve().then(() => __importStar(require('prettier/parser-html')));
+    const prettier = yield Promise.resolve().then(() => __importStar(require('prettier/standalone')));
+    prettyUpInternal = (source) => {
+        return prettier.format(source, {
+            parser: 'angular',
+            plugins: [prettierHtml],
+            htmlWhitespaceSensitivity: 'ignore',
+        });
+    };
+    return prettyUpInternal;
+});
+/**
+ * Angular source decorator.
+ * @param storyFn Fn
+ * @param context  StoryContext
+ */
+exports.sourceDecorator = (storyFn, context) => {
+    const story = storyFn();
+    if (exports.skipSourceRender(context)) {
+        return story;
+    }
+    const channel = addons_1.addons.getChannel();
+    const { props, template, userDefinedTemplate } = story;
+    const { component, argTypes } = context;
+    let toEmit;
+    const prettyUpPromise = makePrettyUp();
+    addons_1.useEffect(() => {
+        prettyUpPromise.then((prettyUp) => {
+            if (toEmit)
+                channel.emit(docs_tools_1.SNIPPET_RENDERED, context.id, prettyUp(toEmit));
+        });
+    });
+    prettyUpPromise.then((prettyUp) => {
+        if (component && !userDefinedTemplate) {
+            const source = renderer_1.computesTemplateSourceFromComponent(component, props, argTypes);
+            // We might have a story with a Directive or Service defined as the component
+            // In these cases there might exist a template, even if we aren't able to create source from component
+            if (source || template) {
+                toEmit = prettyUp(source || template);
+            }
+        }
+        else if (template) {
+            toEmit = prettyUp(template);
+        }
+    });
+    return story;
+};

package/dist/ts3.9/client/docs/types.d.ts

@@ -0,0 +1,102 @@
+export interface Method {
+    name: string;
+    args: Argument[];
+    returnType: string;
+    decorators?: Decorator[];
+    description?: string;
+    rawdescription?: string;
+}
+export interface JsDocTag {
+    comment?: string;
+    tagName?: {
+        escapedText?: string;
+    };
+}
+export interface Property {
+    name: string;
+    decorators?: Decorator[];
+    type: string;
+    optional: boolean;
+    defaultValue?: string;
+    description?: string;
+    rawdescription?: string;
+    jsdoctags?: JsDocTag[];
+}
+export interface Class {
+    name: string;
+    ngname: string;
+    type: 'pipe';
+    properties: Property[];
+    methods: Method[];
+    description?: string;
+    rawdescription?: string;
+}
+export interface Injectable {
+    name: string;
+    type: 'injectable';
+    properties: Property[];
+    methods: Method[];
+    description?: string;
+    rawdescription?: string;
+}
+export interface Pipe {
+    name: string;
+    type: 'class';
+    properties: Property[];
+    methods: Method[];
+    description?: string;
+    rawdescription?: string;
+}
+export interface Directive {
+    name: string;
+    type: 'directive' | 'component';
+    propertiesClass: Property[];
+    inputsClass: Property[];
+    outputsClass: Property[];
+    methodsClass: Method[];
+    description?: string;
+    rawdescription?: string;
+}
+export declare type Component = Directive;
+export interface Argument {
+    name: string;
+    type: string;
+    optional?: boolean;
+}
+export interface Decorator {
+    name: string;
+}
+export interface TypeAlias {
+    name: string;
+    ctype: string;
+    subtype: string;
+    rawtype: string;
+    file: string;
+    kind: number;
+    description?: string;
+    rawdescription?: string;
+}
+export interface EnumType {
+    name: string;
+    childs: EnumTypeChild[];
+    ctype: string;
+    subtype: string;
+    file: string;
+    description?: string;
+    rawdescription?: string;
+}
+export interface EnumTypeChild {
+    name: string;
+    value?: string;
+}
+export interface CompodocJson {
+    directives: Directive[];
+    components: Component[];
+    pipes: Pipe[];
+    injectables: Injectable[];
+    classes: Class[];
+    miscellaneous?: {
+        typealiases?: TypeAlias[];
+        enumerations?: EnumType[];
+    };
+}

package/dist/ts3.9/client/docs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/ts3.9/client/preview/angular/helpers.d.ts

@@ -1,5 +1,5 @@
-import { PartialStoryFn } from '@storybook/csf';
-import { AngularFramework } from '../types-6-0';
+import type { PartialStoryFn } from '@storybook/csf';
+import type { AngularFramework } from '../types-6-0';
 declare global {
     interface Window {
         NODE_ENV: 'string' | 'development' | undefined;

package/dist/ts3.9/client/preview/angular-beta/ComputesTemplateFromComponent.d.ts

@@ -1,6 +1,6 @@
-import { Type } from '@angular/core';
-import { ArgTypes } from '@storybook/api';
-import { ICollection } from '../types';
+import type { Type } from '@angular/core';
+import type { ArgTypes } from '@storybook/api';
+import type { ICollection } from '../types';
 /**
  * Converts a component into a template with inputs/outputs present in initial props
  * @param component

package/dist/ts3.9/client/preview/decorateStory.d.ts

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

package/dist/ts3.9/client/preview/decorators.d.ts

@@ -1,6 +1,6 @@
-import { Type } from '@angular/core';
-import { DecoratorFunction, StoryContext } from '@storybook/csf';
-import { ICollection, NgModuleMetadata } from './types';
-import { AngularFramework } from './types-6-0';
+import type { Type } from '@angular/core';
+import type { DecoratorFunction, StoryContext } from '@storybook/csf';
+import type { ICollection, NgModuleMetadata } from './types';
+import type { AngularFramework } from './types-6-0';
 export declare const moduleMetadata: <TArgs = any>(metadata: Partial<NgModuleMetadata>) => DecoratorFunction<AngularFramework, TArgs>;
 export declare const componentWrapperDecorator: <TArgs = any>(element: Type<unknown> | ((story: string) => string), props?: ICollection | ((storyContext: StoryContext<AngularFramework, TArgs>) => ICollection)) => DecoratorFunction<AngularFramework, TArgs>;

package/dist/ts3.9/client/preview/index.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="webpack-env" />
 /// <reference types="node" />
-import { ClientStoryApi, Loadable } from '@storybook/addons';
+import type { ClientStoryApi, Loadable } from '@storybook/addons';
 import './globals';
-import { IStorybookSection } from './types';
-import { AngularFramework } from './types-6-0';
+import type { IStorybookSection } from './types';
+import type { AngularFramework } from './types-6-0';
 interface ClientApi extends ClientStoryApi<AngularFramework['storyResult']> {
     setAddon(addon: any): void;
     configure(loader: Loadable, module: NodeModule): void;

package/dist/ts3.9/client/preview/render.d.ts

@@ -1,6 +1,6 @@
-import { RenderContext } from '@storybook/store';
-import { ArgsStoryFn } from '@storybook/csf';
-import { AngularFramework } from './types-6-0';
+import type { RenderContext } from '@storybook/store';
+import type { ArgsStoryFn } from '@storybook/csf';
+import type { AngularFramework } from './types-6-0';
 import { RendererFactory } from './angular-beta/RendererFactory';
 export declare const rendererFactory: RendererFactory;
 export declare const render: ArgsStoryFn<AngularFramework>;

package/dist/ts3.9/client/preview/types-6-0.d.ts

@@ -1,5 +1,5 @@
-import { Args, Parameters as DefaultParameters, StoryContext as DefaultStoryContext, ComponentAnnotations, StoryAnnotations, AnnotatedStoryFn } from '@storybook/csf';
-import { StoryFnAngularReturnType } from './types';
+import type { Args, Parameters as DefaultParameters, StoryContext as DefaultStoryContext, ComponentAnnotations, StoryAnnotations, AnnotatedStoryFn } from '@storybook/csf';
+import type { StoryFnAngularReturnType } from './types';
 export type { Args, ArgTypes } from '@storybook/csf';
 export declare type AngularFramework = {
     component: any;

package/dist/ts3.9/client/preview/types-7-0.d.ts

@@ -1,4 +1,4 @@
-import { Args } from '@storybook/csf';
+import type { Args } from '@storybook/csf';
 import type { StoryObj } from './types-6-0';
 export type { StoryFn, StoryObj, Meta } from './types-6-0';
 /**

package/dist/ts3.9/server/create-fork-ts-checker-plugin.js

@@ -10,7 +10,7 @@ function default_1(tsLoaderOptions) {
     if (tsLoaderOptions && tsLoaderOptions.configFile) {
         return new fork_ts_checker_webpack_plugin_1.default({
             tsconfig: tsLoaderOptions.configFile,
-            async: false,
+            async: true,
         });
     }
     node_logger_1.logger.info('=> Using default options for ForkTsCheckerWebpackPlugin');

package/dist/ts3.9/server/framework-preset-angular-docs.d.ts

@@ -0,0 +1,2 @@
+import { StorybookConfig } from '@storybook/core-common';
+export declare const config: StorybookConfig['config'];

package/dist/ts3.9/server/framework-preset-angular-docs.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.config = void 0;
+const path_1 = __importDefault(require("path"));
+const docs_tools_1 = require("@storybook/docs-tools");
+exports.config = (entry = [], options) => {
+    if (!docs_tools_1.hasDocsOrControls(options))
+        return entry;
+    return [...entry, path_1.default.join(__dirname, '../../../dist/ts3.9/client/docs/config')];
+};

package/dist/ts3.9/server/options.d.ts

@@ -1,4 +1,4 @@
-import { LoadOptions, Options as CoreOptions } from '@storybook/core-common';
+import type { LoadOptions, Options as CoreOptions } from '@storybook/core-common';
 import { BuilderContext } from '@angular-devkit/architect';
 import { ExtraEntryPoint, StylePreprocessorOptions } from '@angular-devkit/build-angular';
 export declare type PresetOptions = CoreOptions & {

package/dist/ts3.9/server/preset.js

@@ -9,4 +9,5 @@ exports.addons = [
     require.resolve('./framework-preset-angular'),
     require.resolve('./framework-preset-angular-cli'),
     require.resolve('./framework-preset-angular-ivy'),
+    require.resolve('./framework-preset-angular-docs'),
 ];

package/dist/ts3.9/types/index.d.ts

@@ -1,4 +1,4 @@
-import { StorybookConfig as BaseConfig } from '@storybook/core-common';
+import type { StorybookConfig as BaseConfig } from '@storybook/core-common';
 export interface StorybookConfig extends BaseConfig {
     angularOptions?: {
         enableIvy: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "6.5.0-alpha.46",
+  "version": "6.5.0-alpha.49",
   "description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -45,15 +45,17 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.46",
-    "@storybook/api": "6.5.0-alpha.46",
-    "@storybook/core": "6.5.0-alpha.46",
-    "@storybook/core-common": "6.5.0-alpha.46",
-    "@storybook/core-events": "6.5.0-alpha.46",
+    "@storybook/addons": "6.5.0-alpha.49",
+    "@storybook/api": "6.5.0-alpha.49",
+    "@storybook/client-logger": "6.5.0-alpha.49",
+    "@storybook/core": "6.5.0-alpha.49",
+    "@storybook/core-common": "6.5.0-alpha.49",
+    "@storybook/core-events": "6.5.0-alpha.49",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/node-logger": "6.5.0-alpha.46",
+    "@storybook/docs-tools": "6.5.0-alpha.49",
+    "@storybook/node-logger": "6.5.0-alpha.49",
     "@storybook/semver": "^7.3.2",
-    "@storybook/store": "6.5.0-alpha.46",
+    "@storybook/store": "6.5.0-alpha.49",
     "@types/node": "^14.14.20 || ^16.0.0",
     "@types/react": "^16.14.23",
     "@types/react-dom": "^16.9.14",
@@ -63,15 +65,17 @@
     "find-up": "^5.0.0",
     "fork-ts-checker-webpack-plugin": "^4.1.6",
     "global": "^4.4.0",
+    "nanoid": "^3.1.23",
+    "p-limit": "^3.1.0",
     "postcss": "^7.0.36",
     "postcss-loader": "^4.2.0",
+    "prettier": ">=2.2.1 <=2.3.0",
     "raw-loader": "^4.0.2",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "read-pkg-up": "^7.0.1",
     "regenerator-runtime": "^0.13.7",
     "sass-loader": "^10.1.0",
-    "strip-json-comments": "3.1.1",
     "telejson": "^5.3.3",
     "ts-dedent": "^2.0.0",
     "ts-loader": "^8.0.14",
@@ -93,10 +97,12 @@
     "@angular/platform-browser-dynamic": "^11.2.14",
     "@nrwl/workspace": "^11.6.3",
     "@types/autoprefixer": "^9.7.2",
-    "@types/jest": "^26.0.16",
+    "@types/tmp": "^0.2.3",
+    "cross-spawn": "^7.0.3",
     "jest": "^26.6.3",
     "jest-preset-angular": "^8.3.2",
-    "ts-jest": "^26.4.4"
+    "jest-specific-snapshot": "^4.0.0",
+    "tmp": "^0.2.1"
   },
   "peerDependencies": {
     "@angular-devkit/architect": ">=0.8.9",
@@ -131,5 +137,5 @@
     "access": "public"
   },
   "builders": "dist/ts3.9/builders/builders.json",
-  "gitHead": "a64dc8426d21a70970728878c3bba0ac0a377a48"
+  "gitHead": "5cd3cd92ff4ab3dce81726f0d3913d7077926bee"
 }

package/standalone.d.ts

@@ -1,5 +1,5 @@
-import { CLIOptions, LoadOptions, BuilderOptions } from '@storybook/core-common';
-import { BuilderContext } from '@angular-devkit/architect';
+import type { CLIOptions, LoadOptions, BuilderOptions } from '@storybook/core-common';
+import type { BuilderContext } from '@angular-devkit/architect';
 
 export type StandaloneOptions = Partial<
   CLIOptions &