Rollup

This repo contains a bare-bones example of how to create an application using Rollup and calcite-components. It was generated with rollup-starter-app.

Installation

Run from the Rollup project directory:

  
1
2
npm install
npm run dev

This will install dependencies and then start up a development server on http://localhost:5000.

Calcite Components with Rollup

To install calcite components, first run:

 
1
npm install --save @esri/calcite-components

After calcite-components is installed, import the custom elements bundle and the global CSS in your main.js file:

     
1
2
3
4
5
import '@esri/calcite-components/dist/calcite/calcite.css';
import { defineCustomElements, setAssetPath } from '@esri/calcite-components/dist/custom-elements';

setAssetPath(document.currentScript.src);
defineCustomElements();

Using setAssetPath will ensure that calcite components look for assets like icons in the correct location (more on copying assets below).

Notice in the above code sample we aren't passing any arguments to defineCustomElements. This will define all of the available components. You can also import just what you need by selecting individual icons:

   
1
2
3
import { CalciteButton } from '@esri/calcite-components/dist/custom-elements';

customElements.define('calcite-button', CalciteButton);

See Stencil's custom elements documentation for more information.

Configuring Rollup

There are a few more steps we need to take so that rollup can successfully bundle our application. In addition to the basic configuration provided by rollup-starter-app, we need to:

  • copy over icons
  • enable importing css into our bundle
  • set the output format to es

To that end, at the top of your config, add the following imports:

   
1
2
3
import copy from 'rollup-plugin-copy';
import postcss from 'rollup-plugin-postcss';
import path from 'path';

Set the Format to ES

For the module to bundle properly you'll need to use the es output format. Note: This will not work if you need to support legacy browsers like IE11. To set the output format, add the following to the output property:

 
1
output: [{ dir: path.resolve('public'), format: 'es' }],

Enable CSS Import

Simply add the postcss plugin to the plugins array:

   
1
2
3
postcss({
  extensions: ['.css']
}),

Copying Icons

To copy the icon assets over, you can use the rollup-plugin-copy package, adding it the the same plugins array:

        
1
2
3
4
5
6
7
8
copy({
  targets: [
    {
      src: path.resolve(__dirname, 'node_modules/@esri/calcite-components/dist/calcite/assets'),
      dest: path.resolve(__dirname, 'public')
    },
  ]
}),

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.