How to use rollup-plugin-svelte - 8 common examples
To help you get started, we’ve selected a few rollup-plugin-svelte 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.
datawrapper / datawrapper / src / rollup.config.js View on Github 
targets.push({
input: `${appId}/${entry}`,
external: ['chroma', 'Handsontable', 'cm', 'vendor', '/static/vendor/jschardet/jschardet.min.js', '/static/vendor/xlsx/xlsx.full.min.js'],
output: {
sourcemap: !production,
name: appId,
file: `../www/static/js/svelte/${appId}${append}.js`,
format: 'umd',
amd: noAMD ? undefined : { id: `svelte/${appId}${append}` },
globals: {
'/static/vendor/jschardet/jschardet.min.js': 'jschardet',
'/static/vendor/xlsx/xlsx.full.min.js': 'xlsx'
}
},
plugins: [
svelte({
dev: !production,
parser: 'v2',
// we'll extract any component CSS out into
// a separate file — better for performance
css: css => {
css.write(`../www/static/css/svelte/${appId}${append}.css`);
},
// this results in smaller CSS files
cascade: false,
store: true,
preprocess: {
style: ({ content, attributes }) => {
if (attributes.lang !== 'less') return;
return new Promise((resolve, reject) => {
less.render(
content,OLSKRollupConfigCustomFor (inputData) {
inputData.plugins.splice(inputData.plugins.filter(function (e) {
return e.name === 'svelte';
}).pop(), 1, svelte({
preprocess: [autoPreprocess({}), {
style({ content, filename }) {
return {
code: (filename.match(pathPackage.join(__dirname, 'main.svelte')) ? module.exports.LCHRollupPrefixSelector(module.exports.LCHRollupGrabContainerSelector(content), require('fs').readFileSync(pathPackage.join(__dirname, '../_shared/__external/normalize.css/normalize.css'), 'utf8')) : '') + content,
map: ''
};
}
}],
// --- COPY PREVIOUS CONFIGURATION ---
// enable run-time checks when not in production
dev: !production,
// extract component CSS into separate file for better performance
css: function (css) {function plugins() {
return [
svelte({
hydratable: true,
store: true,
cascade: false, // remove unused css
onwarn: function (warning, defaultHandler) {
if (warning.message === "Unused CSS selector") {
// suppress
} else {
defaultHandler(warning);
}
},
preprocess: {
style: ({ content, attributes }) => {
if (attributes.type !== 'text/scss') return;
return new Promise((fulfil, reject) => {
sass.render({const banner = `/*!
* ${pkgName} v${pkgVersion} (${pkgHomepage})
* Copyright ${new Date().getFullYear()} We Are Genki
* Apache 2.0 license - https://github.com/WeAreGenki/minna-ui/blob/master/LICENCE
*/`;
try {
let resolveCss: (value: CssResult) => void;
const resultCss: Promise = new Promise((res) => {
resolveCss = res;
});
const bundleCjs = await rollup.rollup({
input: pkgSvelte,
plugins: [
svelte({
css(css: RollupSvelteCss) {
// eslint-disable-next-line no-param-reassign
css.code = `${banner}\n${css.code}`;
resolveCss({
code: css.code,
map: css.map,
});
css.write(pkgStyle);
},
preprocess,
}),
resolve(),
commonjs(),
buble({
transforms: {
dangerousForOf: true,},
plugins: [
/** Virtual entry module to bootstrap the example app */
virtual({
__entry__: `import App from '${posixify(
fromWorkspace('example/App.svelte'),
)}'
new App({ target: document.getElementById('root') })`,
}),
nodeResolve({
extensions: ['.js', '.svelte', '.html'],
}),
cjs(),
eslint(),
/** Compile svelte components and extract its css to /example/style.css */
svelte(defaultSvelteConfig),
babel({
exclude: 'node_modules/**',
/** Enforce usage of '.babelrc.js' at the project's root directory */
babelrc: false,
...babelrc,
}),
filesize(),
copyStaticArtifacts('example'),
/** Create an html template in the example directory */
html({
template: fromProject(
'tools/rollup/helpers/componentExampleTemplate.html',
),
}),
/** Create a server with '/example' as the root */
serve({append: ''
},
opts
);
if (!checkTarget(appId)) return;
targets.push({
input: `${appId}/${entry}`,
output: {
sourcemap: !production,
name: appId,
file: `../www/static/js/svelte/${appId}${append}.js`,
format: 'umd',
amd: noAMD ? undefined : { id: `svelte/${appId}${append}` }
},
plugins: [
svelte({
dev: !production,
css: css => {
css.write(`../www/static/css/svelte/${appId}${append}.css`);
},
cascade: false,
store: true,
preprocess: {
style: ({ content, attributes }) => {
if (attributes.lang !== 'less') return;
return new Promise((resolve, reject) => {
less.render(
content,
{
data: content,
includePaths: ['src'],
sourceMap: trueappend: ''
},
opts
);
if (!checkTarget(appId)) return;
targets.push({
input: `${appId}/${entry}`,
output: {
sourcemap: !production,
name: appId,
file: `../../www/static/js/svelte/${appId}${append}.js`,
format: 'umd',
amd: noAMD ? undefined : { id: `svelte/${appId}${append}` }
},
plugins: [
svelte({
dev: !production,
css: css => {
css.write(`../../www/static/css/svelte/${appId}${append}.css`);
},
cascade: false,
store: true,
preprocess: {
style: ({ content, attributes }) => {
if (attributes.lang !== 'less') return;
return new Promise((resolve, reject) => {
less.render(
content,
{
data: content,
includePaths: ['src'],
sourceMap: trueresolve: ['.html'],
[`${PKG.name}`]: fromWorkspace(),
}),
/** Virtual entry module to bootstrap the example app */
virtual({
__entry__: `
import '${posixify('@mamba/pos/simulator/index.js')}';
import App from '${posixify(fromWorkspace('example', 'Example.html'))}'
new App({ target: document.getElementById('root') })`,
}),
nodeResolve({
extensions: ['.js', '.svelte', '.html'],
}),
cjs(),
/** Compile svepte components and extract it's css to /example/style.css */
svelte(svelteConfig),
babel({
/** Enforce usage of '.babelrc.js' at the project's root directory */
babelrc: false,
...babelConfig,
externalHelpers: true,
exclude: /node_modules[/\\](?!(svelte)|(@mamba))/,
}),
filesize(),
/** Create an html template in the example directory */
html({
template: fromProject(
'tools',
'rollup',
'helpers',
'componentExampleTemplate.html',
),rollup-plugin-svelte
Compile Svelte components with Rollup
