UNPKG

@storybook/html

Version:
14 lines (11 loc) 1.55 kB
import { global } from '@storybook/global'; import { dedent } from 'ts-dedent'; import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-api'; var {Node}=global,render=(args,context)=>{let{id,component:Component}=context;if(typeof Component=="string"){let output=Component;return Object.keys(args).forEach(key=>{output=output.replace(`{{${key}}}`,args[key]);}),output}if(Component instanceof HTMLElement){let output=Component.cloneNode(!0);return Object.keys(args).forEach(key=>{output.setAttribute(key,typeof args[key]=="string"?args[key]:JSON.stringify(args[key]));}),output}if(typeof Component=="function")return Component(args,context);throw console.warn(dedent` Storybook's HTML renderer only supports rendering DOM elements and strings. Received: ${Component} `),new Error(`Unable to render story ${id}`)};function renderToCanvas({storyFn,kind,name,showMain,showError,forceRemount},canvasElement){let element=storyFn();if(showMain(),typeof element=="string")canvasElement.innerHTML=element,simulatePageLoad(canvasElement);else if(element instanceof Node){if(canvasElement.firstChild===element&&forceRemount===!1)return;canvasElement.innerHTML="",canvasElement.appendChild(element),simulateDOMContentLoaded();}else showError({title:`Expecting an HTML snippet or DOM node from the story: "${name}" of "${kind}".`,description:dedent` Did you forget to return the HTML snippet from the story? Use "() => <your snippet or node>" or when defining the story. `});} export { render, renderToCanvas };