UNPKG

@storybook/angular

Version:

Storybook for Angular: Develop Angular components in isolation with hot reloading.

57 lines (56 loc) 2.16 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.getRenderType = exports.RendererFactory = void 0; exports.clearRootHTMLElement = clearRootHTMLElement; const AbstractRenderer_1 = require("./AbstractRenderer"); const CanvasRenderer_1 = require("./CanvasRenderer"); const DocsRenderer_1 = require("./DocsRenderer"); class RendererFactory { constructor() { this.rendererMap = new Map(); } async getRendererInstance(targetDOMNode) { const targetId = targetDOMNode.id; // 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 null; } const renderType = (0, exports.getRenderType)(targetDOMNode); // keep only instances of the same type if (this.lastRenderType && this.lastRenderType !== renderType) { await AbstractRenderer_1.AbstractRenderer.resetApplications(); clearRootHTMLElement(renderType); this.rendererMap.clear(); } if (!this.rendererMap.has(targetId)) { this.rendererMap.set(targetId, this.buildRenderer(renderType)); } this.lastRenderType = renderType; return this.rendererMap.get(targetId); } buildRenderer(renderType) { if (renderType === 'docs') { return new DocsRenderer_1.DocsRenderer(); } return new CanvasRenderer_1.CanvasRenderer(); } } exports.RendererFactory = RendererFactory; const getRenderType = (targetDOMNode) => { return targetDOMNode.id === 'storybook-root' ? 'canvas' : 'docs'; }; exports.getRenderType = getRenderType; function clearRootHTMLElement(renderType) { switch (renderType) { case 'canvas': global.document.getElementById('storybook-docs').innerHTML = ''; break; case 'docs': global.document.getElementById('storybook-root').innerHTML = ''; break; default: break; } }