How to use the rollup-plugin-svelte function in rollup-plugin-svelte

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.

github datawrapper / datawrapper / src / rollup.config.js View on Github external
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,
github launchlet / launchlet / os-app / dev-launcher / rollup-config-custom.js View on Github external
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) {
github escalon / microfrontends / cartcomponents / rollup.config.js View on Github external
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({
github WeAreGenki / minna-ui / utils / build-component / src / index.ts View on Github external
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,
github stone-payments / pos-mamba-sdk / tools / rollup / config.component.js View on Github external
},
    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({
github datawrapper / datawrapper / src / rollup.config.js View on Github external
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: true
github datawrapper / datawrapper / src / v2 / rollup.config.js View on Github external
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: true
github stone-payments / pos-mamba-sdk / tools / rollup / config.component.watch.js View on Github external
resolve: ['.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

MIT
Latest version published 2 months ago

Package Health Score

77 / 100
Full package analysis

Popular rollup-plugin-svelte functions