@web/dev-server-storybook
Version:
Dev server plugin for using storybook with es modules.
125 lines • 5.59 kB
JavaScript
import { createRequire } from 'node:module';
import { nodeResolve as resolve } from '@rollup/plugin-node-resolve';
import { babel } from '@rollup/plugin-babel';
import { rollupPluginHTML as html } from '@web/rollup-plugin-html';
import { polyfillsLoader } from '@web/rollup-plugin-polyfills-loader';
import { DEFAULT_EXTENSIONS } from '@babel/core';
import terser from '@rollup/plugin-terser';
import { mdxPlugin } from './mdxPlugin.js';
import { mdjsPlugin } from './mdjsPlugin.js';
import { injectExportsOrderPlugin } from './injectExportsOrderPlugin.js';
const require = createRequire(import.meta.url);
const prebuiltDir = require
.resolve('@web/storybook-prebuilt/package.json')
.replace('/package.json', '');
const ignoredWarnings = ['EVAL', 'THIS_IS_UNDEFINED'];
function onwarn(warning, warn) {
if (ignoredWarnings.includes(warning.code)) {
return;
}
warn(warning);
}
export function createRollupConfig(params) {
const { outputDir, indexFilename, indexHtmlString, storyFilePaths } = params;
const options = {
preserveEntrySignatures: false,
onwarn,
output: {
entryFileNames: '[hash].js',
chunkFileNames: '[hash].js',
assetFileNames: '[hash][extname]',
format: 'system',
dir: outputDir,
},
plugins: [
resolve({
moduleDirectories: ['node_modules', 'web_modules'],
}),
babel({
babelHelpers: 'bundled',
babelrc: false,
configFile: false,
extensions: [...DEFAULT_EXTENSIONS, 'md', 'mdx'],
exclude: `${prebuiltDir}/**`,
sourceMaps: true,
// @ts-ignore The provided types are wrong. See https://babeljs.io/docs/options#inputsourcemap
inputSourceMap: false,
presets: [
[
require.resolve('@babel/preset-env'),
{
targets: [
'last 3 Chrome major versions',
'last 3 ChromeAndroid major versions',
'last 3 Firefox major versions',
'last 3 Edge major versions',
'last 3 Safari major versions',
'last 3 iOS major versions',
'ie 11',
],
useBuiltIns: false,
shippedProposals: true,
modules: false,
bugfixes: true,
},
],
],
plugins: [
[require.resolve('babel-plugin-bundled-import-meta'), { importStyle: 'baseURI' }],
[
require.resolve('babel-plugin-template-html-minifier'),
{
modules: {
// this is web component specific, but has no effect on other project styles
'lit-html': ['html'],
'lit-element': ['html', { name: 'css', encapsulation: 'style' }],
'@web/storybook-prebuilt/web-components': [
'html',
{ name: 'css', encapsulation: 'style' },
],
'@web/storybook-prebuilt/web-components.js': [
'html',
{ name: 'css', encapsulation: 'style' },
],
'@open-wc/testing': ['html', { name: 'css', encapsulation: 'style' }],
'@open-wc/testing-helpers': ['html', { name: 'css', encapsulation: 'style' }],
},
logOnError: true,
failOnError: false,
strictCSS: true,
htmlMinifier: {
collapseWhitespace: true,
conservativeCollapse: true,
removeComments: true,
caseSensitive: true,
minifyCSS: true,
},
},
],
],
}),
html({ input: { name: indexFilename, html: indexHtmlString } }),
polyfillsLoader({
polyfills: {
coreJs: true,
fetch: true,
abortController: true,
regeneratorRuntime: 'always',
webcomponents: true,
intersectionObserver: true,
resizeObserver: true,
},
}),
// @ts-ignore the provided type is wrong
terser({ format: { comments: false } }),
],
};
if (storyFilePaths && storyFilePaths.length > 0 && Array.isArray(options.plugins)) {
// plugins we need to inject only in the preview
options.plugins.unshift(injectExportsOrderPlugin(storyFilePaths));
options.plugins.unshift(mdxPlugin());
options.plugins.unshift(mdjsPlugin(params.type));
}
return options;
}
//# sourceMappingURL=createRollupConfig.js.map