Calcite-components: rollup.js support?

[jwasilgeo]

I'm looking for clarification of rollup.js support, whether it be new documentation or something else in the code that needs to happen to support it first.

The last thing I could identify was PR #17 from May 2019 that references rollup in some comments. Otherwise, I do see the webpack usage notes in the README.

I've tried with sveltejs+rollup in a project and I couldn't figure out the magic combo to get it rolling. _(my puns are always intended)_

Thanks in advance for any help and info about this.

cc @gavinr

[paulcpederson]

@jwasilgeo yeah, those references are in regards to rollup _in this project_ as stencil I think uses rollup under the hood to do the bundling. I don't think we've experimented with using rollup in a consuming application. Svelte is an interesting use case I don't think we've looked at. I'm going to mark this as research, and when we get a second we can try to set up a demo repo somewhere.

[jwasilgeo]

Thanks @paulcpederson for the info and consideration. I could help set up a repo to reduce the barrier to research and investigation. Also open to meeting and showing how we are using calcite-components in a private repo so far with a Svelte app.

[paulcpederson]

A repo with a very basic svelte app would actually help a lot. That way I can just jump in and give it a go.

[gavinr]

git clone https://github.com/gavinr/calcite-components-svelte-example
cd .\calcite-components-svelte-example\
npm install
npm run dev

Go to http://localhost:5000, notice that we are trying to render a calcite-dropdown right under the first paragraph of text, but it is not rendering correctly (Expected, since we have not included calcite-components yet)

git checkout traditional-includes-in-header
npm run dev

Go to http://localhost:5000, notice that the dropdown works if we just include the script tags on the page like it says in the README. This is a workaround but not preferred because we are not actually building calcite using Rollup.

git checkout import --force
npm install
npm run dev

In this branch I am trying to import from calciate-components. Maybe I'm importing incorrectly here. Notice in the terminal we get an error:

[!] Error: 'Calcite' is not exported by node_modules\@esri\calcite-components\dist\index.mjs, imported by src\App.svelte https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
src\App.svelte (2:10)
1: <script>
2:   import { Calcite } from '@esri/calcite-components';
              ^
3:   export let name;
4: </script>
Error: 'Calcite' is not exported by node_modules\@esri\calcite-components\dist\index.mjs, imported by src\App.svelte
    at error (.....calcite-components-svelte-example\node_modules\rollup\dist\shared\node-entry.js:5400:30)
    at Module.error (.....calcite-components-svelte-example\node_modules\rollup\dist\shared\node-entry.js:9824:16)
    at handleMissingExport (.....calcite-components-svelte-example\node_modules\rollup\dist\shared\node-entry.js:9725:28)
    at Module.traceVariable (.....calcite-components-svelte-example\node_modules\rollup\dist\shared\node-entry.js:10163:24)
    at ModuleScope.findVariable (.....calcite-components-svelte-example\node_modules\rollup\dist\shared\node-entry.js:8770:39)
    at FunctionScope.findVariable (.....calcite-components-svelte-example\node_modules\rollup\dist\shared\node-entry.js:3065:38)
    at ChildScope.findVariable (.....calcite-components-svelte-example\node_modules\rollup\dist\shared\node-entry.js:3065:38)
    at ReturnValueScope.findVariable (.....calcite-components-svelte-example\node_modules\rollup\dist\shared\node-entry.js:3065:38)
    at Identifier$1.bind (.....calcite-components-svelte-example\node_modules\rollup\dist\shared\node-entry.js:4403:40)
    at Property$1.bind (.....calcite-components-svelte-example\node_modules\rollup\dist\shared\node-entry.js:3152:23)

Which refers to https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module which may be a helpful place for us to start - seems like node_modules\@esri\calcite-components\dist\index.mjs says export * from './esm-es5/index.mjs'; but the file it's referring to - node_modules\@esri\calcite-components\dist\esm-es5\index.mjs is empty - is that an issue?

[jwasilgeo]

@gavinr, thank you! You should get a 🏆 for one of the best debugging GitHub comments I've ever seen. No joke.

[paulcpederson]

So here is a pretty simple way to get this working until I can figure out a more js-centric way:

https://github.com/gavinr/calcite-components-svelte-example/pull/1

[paulcpederson]

NVM, just saw the rest of the comment by @gavinr I'll keep exploring.

[jwasilgeo]

@paulcpederson thanks for investigating. I also tried your first solution above from https://github.com/Esri/calcite-components/issues/485#issuecomment-619286285 in another sveltejs project and the npm run dev script was quite slow to the point of appearing stalled at the copy command, at which point I realized it was moving over _everything_ from /dist/calcite into /public/build/calcite/.

If this ends up being an intermediate solution for the time being, is there a way to reduce this down to only the 3 files that would be referenced if one was using the standard link and script imports from CDN?

Otherwise, maybe there is something to Gavin's idea about

but the file it's referring to - [email protected] is empty - is that an issue?

[paulcpederson]

OK, I am starting up a conversation around solving the empty index files in the dist (which I think is a stencil bug), and I'll look at this again after that gets taken care of. But after banging my head against this and trying basically every approach I could think I haven't found a way to get this working as you'd like with rollup. Here's what I've found, though, maybe it will help y'all on your journey:

1. There is no "Calcite" export. Not really sure where the original code you're trying to use came from (import { Calcite } from '@esri/calcite-components';) AFAICT that's not a thing. If that's in our docs we should remove...
2. There are two things that need to be done for components to work:
3. apply the polyfills (only if you need ie11 + Edge support)
4. define the custom elements (this enables your browser to understand the new tag names)
5. Even if we manage to bundle with svelte + rollup + stencil.js, it wouldn't actually be bundling all of the component logic into the build. It would be bundling the _loader_ and the components themselves would still be lazy-loaded and not part of your bundle. This is actually good, IMO. Pulling in all the components would add lots and lots of KB to your build when you probably won't use every single component.
6. You'd lose the optimization that stencil gives you around only polyfilling import for browsers without it (this is why our sample has two script tags, one for browsers that support modules natively, one for those that don't). Unless you went out of your way to provide two import paths and optimized it yourself, which seems like a lot of work...

This is a workaround but not preferred because we are not actually building calcite using Rollup.

I guess I'm curious why you want to do this? What advantage does this give you? Curious behind the core requirements from your team.

I will say that bundling of the loader seems like something that is possible in other tool chains. From reading about the Vue.js Integration page they recommend this:

import { applyPolyfills, defineCustomElements } from '@esri/calcite-components/dist/loader';

applyPolyfills().then(() => {
  defineCustomElements();
});

Seems like that example uses webpack, so maybe that is the deal-breaker. Seems very strange that a rollup-built project wouldn't work inside another rollup-build project.

As per needing all of the assets, most of those will be icons from the icon system. These are imported dynamically by the calcite-icon component.

[paulcpederson]

This is now possible for real! See https://github.com/ArcGIS/calcite-components-examples/pull/7/ for how to import components into a rollup application. This will only work in 1.0.0-beta.36+

[jwasilgeo]

Wonderful. Looking forward to trying it out myself!

[gavinr]

I've got it working in Svelte. Check out the repo here, and the summary of changes needed vs the default Svelte template to get it to work here: https://github.com/gavinr/calcite-components-svelte-example/commit/76c9f6d19040f32c8523301c92a708bf2a338079

[jwasilgeo]

🔥 🔥 🔥
🔥 🔥 🔥
🔥 🔥 🔥