@storybook/angular 6.4.0-beta.24 → 6.4.0-beta.28

package/dist/ts3.9/client/preview/angular-beta/CanvasRenderer.js

@@ -0,0 +1,97 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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 __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CanvasRenderer = void 0;
+var AbstractRenderer_1 = require("./AbstractRenderer");
+var CanvasRenderer = /** @class */ (function (_super) {
+    __extends(CanvasRenderer, _super);
+    function CanvasRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CanvasRenderer.prototype.render = function (options) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, _super.prototype.render.call(this, options)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    CanvasRenderer.prototype.beforeFullRender = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, CanvasRenderer.resetPlatformBrowserDynamic()];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    CanvasRenderer.prototype.afterFullRender = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, AbstractRenderer_1.AbstractRenderer.resetCompiledComponents()];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    return CanvasRenderer;
+}(AbstractRenderer_1.AbstractRenderer));
+exports.CanvasRenderer = CanvasRenderer;

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

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

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

@@ -0,0 +1,112 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.computesTemplateSourceFromComponent = exports.computesTemplateFromComponent = void 0;
+var NgComponentAnalyzer_1 = require("./utils/NgComponentAnalyzer");
+var separateInputsOutputsAttributes = function (ngComponentInputsOutputs, props) {
+    if (props === void 0) { props = {}; }
+    var inputs = ngComponentInputsOutputs.inputs
+        .filter(function (i) { return i.templateName in props; })
+        .map(function (i) { return i.templateName; });
+    var outputs = ngComponentInputsOutputs.outputs
+        .filter(function (o) { return o.templateName in props; })
+        .map(function (o) { return o.templateName; });
+    return {
+        inputs: inputs,
+        outputs: outputs,
+        otherProps: Object.keys(props).filter(function (k) { return !__spreadArrays(inputs, outputs).includes(k); }),
+    };
+};
+/**
+ * Converts a component into a template with inputs/outputs present in initial props
+ * @param component
+ * @param initialProps
+ * @param innerTemplate
+ */
+exports.computesTemplateFromComponent = function (component, initialProps, innerTemplate) {
+    if (innerTemplate === void 0) { innerTemplate = ''; }
+    var ngComponentMetadata = NgComponentAnalyzer_1.getComponentDecoratorMetadata(component);
+    var ngComponentInputsOutputs = NgComponentAnalyzer_1.getComponentInputsOutputs(component);
+    if (!ngComponentMetadata.selector) {
+        // Allow to add renderer component when NgComponent selector is undefined
+        return "<ng-container *ngComponentOutlet=\"storyComponent\"></ng-container>";
+    }
+    var _a = separateInputsOutputsAttributes(ngComponentInputsOutputs, initialProps), initialInputs = _a.inputs, initialOutputs = _a.outputs;
+    var templateInputs = initialInputs.length > 0 ? " " + initialInputs.map(function (i) { return "[" + i + "]=\"" + i + "\""; }).join(' ') : '';
+    var templateOutputs = initialOutputs.length > 0
+        ? " " + initialOutputs.map(function (i) { return "(" + i + ")=\"" + i + "($event)\""; }).join(' ')
+        : '';
+    return buildTemplate(ngComponentMetadata.selector, innerTemplate, templateInputs, templateOutputs);
+};
+var createAngularInputProperty = function (_a) {
+    var propertyName = _a.propertyName, value = _a.value, argType = _a.argType;
+    var _b = (argType === null || argType === void 0 ? void 0 : argType.type) || {}, _c = _b.name, type = _c === void 0 ? null : _c, _d = _b.summary, summary = _d === void 0 ? null : _d;
+    var templateValue = type === 'enum' && !!summary ? summary + "." + value : value;
+    var actualType = type === 'enum' && summary ? 'enum' : typeof value;
+    var requiresBrackets = ['object', 'any', 'boolean', 'enum', 'number'].includes(actualType);
+    if (typeof value === 'object') {
+        templateValue = propertyName;
+    }
+    return "" + (requiresBrackets ? '[' : '') + propertyName + (requiresBrackets ? ']' : '') + "=\"" + templateValue + "\"";
+};
+/**
+ * Converts a component into a template with inputs/outputs present in initial props
+ * @param component
+ * @param initialProps
+ * @param innerTemplate
+ */
+exports.computesTemplateSourceFromComponent = function (component, initialProps, argTypes) {
+    var ngComponentMetadata = NgComponentAnalyzer_1.getComponentDecoratorMetadata(component);
+    if (!ngComponentMetadata) {
+        return null;
+    }
+    if (!ngComponentMetadata.selector) {
+        // Allow to add renderer component when NgComponent selector is undefined
+        return "<ng-container *ngComponentOutlet=\"" + component.name + "\"></ng-container>";
+    }
+    var ngComponentInputsOutputs = NgComponentAnalyzer_1.getComponentInputsOutputs(component);
+    var _a = separateInputsOutputsAttributes(ngComponentInputsOutputs, initialProps), initialInputs = _a.inputs, initialOutputs = _a.outputs;
+    var templateInputs = initialInputs.length > 0
+        ? " " + initialInputs
+            .map(function (propertyName) {
+            return createAngularInputProperty({
+                propertyName: propertyName,
+                value: initialProps[propertyName],
+                argType: argTypes === null || argTypes === void 0 ? void 0 : argTypes[propertyName],
+            });
+        })
+            .join(' ')
+        : '';
+    var templateOutputs = initialOutputs.length > 0
+        ? " " + initialOutputs.map(function (i) { return "(" + i + ")=\"" + i + "($event)\""; }).join(' ')
+        : '';
+    return buildTemplate(ngComponentMetadata.selector, '', templateInputs, templateOutputs);
+};
+var buildTemplate = function (selector, innerTemplate, inputs, outputs) {
+    var firstSelector = selector.split(',')[0];
+    var templateReplacers = [
+        [/(^.*?)(?=[,])/, '$1'],
+        [/(^\..+)/, 'div$1'],
+        [/(^\[.+?])/, 'div$1'],
+        [/([\w[\]]+)(\s*,[\w\s-[\],]+)+/, "$1"],
+        [/#([\w-]+)/, " id=\"$1\""],
+        [/((\.[\w-]+)+)/, function (_, c) { return " class=\"" + c.split(templateObject_1 || (templateObject_1 = __makeTemplateObject(["."], ["."]))).join(templateObject_2 || (templateObject_2 = __makeTemplateObject([" "], [" "]))).trim() + "\""; }],
+        [/(\[.+?])/g, function (_, a) { return " " + a.slice(1, -1); }],
+        [/([\S]+)(.*)/, "<$1$2" + inputs + outputs + ">" + innerTemplate + "</$1>"],
+    ];
+    return templateReplacers.reduce(function (prevSelector, _a) {
+        var searchValue = _a[0], replacer = _a[1];
+        return prevSelector.replace(searchValue, replacer);
+    }, firstSelector);
+};
+var templateObject_1, templateObject_2;

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

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

package/dist/ts3.9/client/preview/angular-beta/DocsRenderer.js

@@ -0,0 +1,145 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DocsRenderer = void 0;
+var addons_1 = require("@storybook/addons");
+var core_events_1 = __importDefault(require("@storybook/core-events"));
+var AbstractRenderer_1 = require("./AbstractRenderer");
+var DocsRenderer = /** @class */ (function (_super) {
+    __extends(DocsRenderer, _super);
+    function DocsRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DocsRenderer.prototype.render = function (options) {
+        return __awaiter(this, void 0, void 0, function () {
+            var channel;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        channel = addons_1.addons.getChannel();
+                        /**
+                         * Destroy and recreate the PlatformBrowserDynamic of angular
+                         * For several stories to be rendered in the same docs we should
+                         * not destroy angular between each rendering but do it when the
+                         * rendered stories are not needed anymore.
+                         *
+                         * Note for improvement: currently there is one event per story
+                         * rendered in the doc. But one event could be enough for the whole docs
+                         *
+                         */
+                        channel.once(core_events_1.default.STORY_CHANGED, function () { return __awaiter(_this, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, DocsRenderer.resetPlatformBrowserDynamic()];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); });
+                        /**
+                         * Destroy and recreate the PlatformBrowserDynamic of angular
+                         * when doc re render. Allows to call ngOnDestroy of angular
+                         * for previous component
+                         */
+                        channel.once(core_events_1.default.DOCS_RENDERED, function () { return __awaiter(_this, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, DocsRenderer.resetPlatformBrowserDynamic()];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); });
+                        return [4 /*yield*/, _super.prototype.render.call(this, __assign(__assign({}, options), { forced: false }))];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    DocsRenderer.prototype.beforeFullRender = function () {
+        return __awaiter(this, void 0, void 0, function () { return __generator(this, function (_a) {
+            return [2 /*return*/];
+        }); });
+    };
+    DocsRenderer.prototype.afterFullRender = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, AbstractRenderer_1.AbstractRenderer.resetCompiledComponents()];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    return DocsRenderer;
+}(AbstractRenderer_1.AbstractRenderer));
+exports.DocsRenderer = DocsRenderer;

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

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

package/dist/ts3.9/client/preview/angular-beta/RendererFactory.js

@@ -0,0 +1,101 @@
+"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 __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clearRootHTMLElement = exports.getRenderType = exports.RendererFactory = void 0;
+var AbstractRenderer_1 = require("./AbstractRenderer");
+var DocsRenderer_1 = require("./DocsRenderer");
+var CanvasRenderer_1 = require("./CanvasRenderer");
+var RendererFactory = /** @class */ (function () {
+    function RendererFactory() {
+        this.rendererMap = new Map();
+    }
+    RendererFactory.prototype.getRendererInstance = function (storyId, targetDOMNode) {
+        return __awaiter(this, void 0, void 0, function () {
+            var renderType;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        // do nothing if the target node is null
+                        // fix a problem when the docs asks 2 times the same component at the same time
+                        // the 1st targetDOMNode of the 1st requested rendering becomes null 🤷‍♂️
+                        if (targetDOMNode === null) {
+                            return [2 /*return*/, null];
+                        }
+                        renderType = exports.getRenderType(targetDOMNode);
+                        if (!(this.lastRenderType && this.lastRenderType !== renderType)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, AbstractRenderer_1.AbstractRenderer.resetPlatformBrowserDynamic()];
+                    case 1:
+                        _a.sent();
+                        clearRootHTMLElement(renderType);
+                        this.rendererMap.clear();
+                        _a.label = 2;
+                    case 2:
+                        if (!this.rendererMap.has(storyId)) {
+                            this.rendererMap.set(storyId, this.buildRenderer(storyId, renderType));
+                        }
+                        this.lastRenderType = renderType;
+                        return [2 /*return*/, this.rendererMap.get(storyId)];
+                }
+            });
+        });
+    };
+    RendererFactory.prototype.buildRenderer = function (storyId, renderType) {
+        if (renderType === 'docs') {
+            return new DocsRenderer_1.DocsRenderer(storyId);
+        }
+        return new CanvasRenderer_1.CanvasRenderer(storyId);
+    };
+    return RendererFactory;
+}());
+exports.RendererFactory = RendererFactory;
+exports.getRenderType = function (targetDOMNode) {
+    return targetDOMNode.id === 'root' ? 'canvas' : 'docs';
+};
+function clearRootHTMLElement(renderType) {
+    switch (renderType) {
+        case 'canvas':
+            global.document.getElementById('docs-root').innerHTML = '';
+            break;
+        case 'docs':
+            global.document.getElementById('root').innerHTML = '';
+            break;
+        default:
+            break;
+    }
+}
+exports.clearRootHTMLElement = clearRootHTMLElement;

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

@@ -0,0 +1,9 @@
+import { NgModule, Type } from '@angular/core';
+import { Subject } from 'rxjs';
+import { ICollection, StoryFnAngularReturnType } from '../types';
+export declare const getStorybookModuleMetadata: ({ storyFnAngular, component: annotatedComponent, targetSelector, }: {
+    storyFnAngular: StoryFnAngularReturnType;
+    component?: any;
+    targetSelector: string;
+}, storyProps$: Subject<ICollection>) => NgModule;
+export declare const createStorybookModule: (ngModule: NgModule) => Type<unknown>;

package/dist/ts3.9/client/preview/angular-beta/StorybookModule.js

@@ -0,0 +1,78 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createStorybookModule = exports.getStorybookModuleMetadata = void 0;
+var core_1 = require("@angular/core");
+var platform_browser_1 = require("@angular/platform-browser");
+var ts_dedent_1 = __importDefault(require("ts-dedent"));
+var util_deprecate_1 = __importDefault(require("util-deprecate"));
+var StorybookProvider_1 = require("./StorybookProvider");
+var NgModulesAnalyzer_1 = require("./utils/NgModulesAnalyzer");
+var NgComponentAnalyzer_1 = require("./utils/NgComponentAnalyzer");
+var StorybookWrapperComponent_1 = require("./StorybookWrapperComponent");
+var ComputesTemplateFromComponent_1 = require("./ComputesTemplateFromComponent");
+var deprecatedStoryComponentWarning = util_deprecate_1.default(function () { }, ts_dedent_1.default(templateObject_1 || (templateObject_1 = __makeTemplateObject(["`component` story return value is deprecated, and will be removed in Storybook 7.0.\n        Instead, use `export const default = () => ({ component: AppComponent });`\n        or\n        ```\n        export const Primary: Story = () => ({});\n        Primary.parameters = { component: AppComponent };\n        ```\n        Read more at \n        - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-angular-story-component).\n        - https://storybook.js.org/docs/angular/writing-stories/parameters\n      "], ["\\`component\\` story return value is deprecated, and will be removed in Storybook 7.0.\n        Instead, use \\`export const default = () => ({ component: AppComponent });\\`\n        or\n        \\`\\`\\`\n        export const Primary: Story = () => ({});\n        Primary.parameters = { component: AppComponent };\n        \\`\\`\\`\n        Read more at \n        - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-angular-story-component).\n        - https://storybook.js.org/docs/angular/writing-stories/parameters\n      "]))));
+exports.getStorybookModuleMetadata = function (_a, storyProps$) {
+    var _b, _c, _d, _e, _f;
+    var storyFnAngular = _a.storyFnAngular, annotatedComponent = _a.component, targetSelector = _a.targetSelector;
+    var storyComponent = storyFnAngular.component, props = storyFnAngular.props, styles = storyFnAngular.styles, _g = storyFnAngular.moduleMetadata, moduleMetadata = _g === void 0 ? {} : _g;
+    var template = storyFnAngular.template;
+    if (storyComponent) {
+        deprecatedStoryComponentWarning();
+    }
+    var component = storyComponent !== null && storyComponent !== void 0 ? storyComponent : annotatedComponent;
+    if (hasNoTemplate(template) && component) {
+        template = ComputesTemplateFromComponent_1.computesTemplateFromComponent(component, props, '');
+    }
+    /**
+     * Create a component that wraps generated template and gives it props
+     */
+    var ComponentToInject = StorybookWrapperComponent_1.createStorybookWrapperComponent(targetSelector, template, component, styles, props);
+    // Look recursively (deep) if the component is not already declared by an import module
+    var requiresComponentDeclaration = NgComponentAnalyzer_1.isDeclarable(component) &&
+        !NgModulesAnalyzer_1.isComponentAlreadyDeclaredInModules(component, moduleMetadata.declarations, moduleMetadata.imports);
+    return {
+        declarations: __spreadArrays((requiresComponentDeclaration ? [component] : []), [
+            ComponentToInject
+        ], ((_b = moduleMetadata.declarations) !== null && _b !== void 0 ? _b : [])),
+        imports: __spreadArrays([platform_browser_1.BrowserModule], ((_c = moduleMetadata.imports) !== null && _c !== void 0 ? _c : [])),
+        providers: __spreadArrays([StorybookProvider_1.storyPropsProvider(storyProps$)], ((_d = moduleMetadata.providers) !== null && _d !== void 0 ? _d : [])),
+        entryComponents: __spreadArrays(((_e = moduleMetadata.entryComponents) !== null && _e !== void 0 ? _e : [])),
+        schemas: __spreadArrays(((_f = moduleMetadata.schemas) !== null && _f !== void 0 ? _f : [])),
+        bootstrap: [ComponentToInject],
+    };
+};
+exports.createStorybookModule = function (ngModule) {
+    var StorybookModule = /** @class */ (function () {
+        function StorybookModule() {
+        }
+        StorybookModule = __decorate([
+            core_1.NgModule(ngModule)
+        ], StorybookModule);
+        return StorybookModule;
+    }());
+    return StorybookModule;
+};
+function hasNoTemplate(template) {
+    return template === null || template === undefined;
+}
+var templateObject_1;

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

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

package/dist/ts3.9/client/preview/angular-beta/StorybookProvider.js

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

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

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