How to use the @storybook/web-components.setCustomElements function in @storybook/web-components
To help you get started, we’ve selected a few @storybook/web-components examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
open-wc / open-wc / packages / create / src / generators / demoing-storybook / templates / static / .storybook / config.js View on Github 
import { configure, addDecorator, setCustomElements } from '@storybook/web-components';
import { withA11y } from '@storybook/addon-a11y';
import '@storybook/addon-console';
import customElements from '../custom-elements.json';
setCustomElements(customElements);
addDecorator(withA11y);
// force full reload to not reregister web components
const req = require.context('../stories', true, /\.stories\.(js|mdx)$/);
configure(req, module);
if (module.hot) {
module.hot.accept(req.id, () => {
const currentLocationHref = window.location.href;
window.history.pushState(null, null, currentLocationHref);
window.location.reload();
});
}/**
* -------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
* See License in the project root for license information.
* -------------------------------------------------------------------------------------------
*/
/* global window */
import { configure, addParameters, setCustomElements } from '@storybook/web-components';
import customElements from '../custom-elements.json';
import theme from './theme';
import '../dist/es6/components/mgt-login/mgt-login.js';
setCustomElements(customElements);
addParameters({
docs: {
iframeHeight: '200px'
},
options: {
// disable keyboard shortcuts because they interfere with the stories
enableShortcuts: false,
theme
}
});
// force full reload to not reregister web components
const req = require.context('../stories', true, /\.stories\.(js|mdx)$/);
configure(req, module);
if (module.hot) {import { configure, addDecorator, setCustomElements } from '@storybook/web-components';
import { withA11y } from '@storybook/addon-a11y';
import '@storybook/addon-console';
import customElements from '../custom-elements.json';
setCustomElements(customElements);
addDecorator(withA11y);
// force full reload to not reregister web components
const req = require.context('../components', true, /\.stories\.(js|mdx)$/);
configure(req, module);
if (module.hot) {
module.hot.accept(req.id, () => {
const currentLocationHref = window.location.href;
window.history.pushState(null, null, currentLocationHref);
window.location.reload();
});
}restoreScroll: true,
},
viewport: { viewports },
});
// Temporary patch for default values and redundancy
function addDefaultValue (def) {
def.defaultValue = def.default;
}
customElements.tags.forEach((tagDefinition) => {
(tagDefinition.attributes || []).forEach((def) => addDefaultValue(def));
(tagDefinition.properties || []).forEach((def) => addDefaultValue(def));
});
setCustomElements(customElements);
// We cannot use main.js (stories: []) yet because of the HMR config for web-components
const csfStories = require.context('../stories', true, /\.stories\.js$/);
const mdxDocsPages = require.context('../docs', true, /\.mdx$/);
configure([csfStories, mdxDocsPages], module);
// Force full reload instead of HMR for Web Components
// https://github.com/storybookjs/storybook/tree/next/app/web-components
if (module.hot) {
module.hot.accept(csfStories.id, () => {
const currentLocationHref = window.location.href;
window.history.pushState(null, null, currentLocationHref);
window.location.reload();
});
}@storybook/web-components
Storybook web-components renderer
