@storybook/web-components
Version:
Storybook Web Components renderer: Develop, document, and test UI components in isolation
63 lines (58 loc) • 2.14 kB
JavaScript
import {
__export
} from "./chunk-4BE7D4DS.js";
// src/entry-preview.ts
var entry_preview_exports = {};
__export(entry_preview_exports, {
parameters: () => parameters,
render: () => render,
renderToCanvas: () => renderToCanvas
});
// src/render.ts
import { global } from "@storybook/global";
import { render as litRender } from "lit";
import { isTemplateResult } from "lit/directive-helpers.js";
import { simulateDOMContentLoaded, simulatePageLoad } from "storybook/preview-api";
import { dedent } from "ts-dedent";
var { Node } = global, render = (args, context) => {
let { id, component } = context;
if (!component)
throw new Error(
`Unable to render story ${id} as the component annotation is missing from the default export`
);
let element = document.createElement(component);
return Object.entries(args).forEach(([key, val]) => {
element[key] = val;
}), element;
};
function renderToCanvas({ storyFn, kind, name, showMain, showError, forceRemount }, canvasElement) {
let element = storyFn();
if (showMain(), isTemplateResult(element)) {
(forceRemount || !canvasElement.querySelector('[id="root-inner"]')) && (canvasElement.innerHTML = '<div id="root-inner"></div>');
let renderTo = canvasElement.querySelector('[id="root-inner"]');
litRender(element, renderTo), simulatePageLoad(canvasElement);
} else if (typeof element == "string")
canvasElement.innerHTML = element, simulatePageLoad(canvasElement);
else if (element instanceof Node) {
if (canvasElement.firstChild === element && !forceRemount)
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.
`
});
}
// src/entry-preview.ts
var parameters = {
renderer: "web-components"
};
export {
render,
renderToCanvas,
parameters,
entry_preview_exports
};