Instantsearch.js: Include ES6 modules in npm dist

[timkelty]

Do you want to request a feature or report a bug?
feature

Feature: What is your use case for such a feature?
If you are already compiling with Babel/Webpack, you may want to import instantsearch's ES6 modules directly. Currently included are the compiled webpack output and the es5 modules.

What is the version you are using? Always use the latest one before opening a bug issue.
2.0.0.beta 4

[Haroenv]

Yes, but usually the code itself should still be transformed to lowest common denominator, while only the imports/exports are kept es6. This was already the roadmap after 2 is out of beta.

[iam4x]

We will not provide the source files as it on npm, what we do is:

• Providing an UMD build to include in a webpage through a <script> tag (/dist) on npm
• Providing ES6 to ES5 files already transpiled through babel

You can easily reduce your final build size by importing the files you only need:

import instantsearch from 'instantsearch.js/dist/instantsearch'

Results to a build of ~1.14mb (not minified/uglified), but when importing that way:

import instantsearch from 'instantsearch.js/dist-es5-module/src/lib/main';

// you can combine with specific parts
// for instance when using only connectors to build your app
import * as connectors from 'instantsearch.js/dist-es5-module/src/connectors';

These two imports (without using widgets in your code but only connectors) results to a ~175kb (not minified/uglified).

Right now this a little bit complicated and not enough documented, the roadmap for the v2.1 is to simplify and update the building tools so you will be abble to import that way:

import instantsearch, { connectors, widgets } from 'instantsearch.js'

Can you try to import from dist-es5-modules and tell me the result?

[timkelty]

Can you try to import from dist-es5-modules and tell me the result?

@iam4x yep, that's what I'm doing right now, and it works. I just need to exclude it from my babel-loader, or I get errors.

However, as I'm already compiling with webpack/babel, ideally I still want to import the ES6 modules. Why? For one, tree shaking.

[iam4x]

It's recommended to exclude any libraries from node_modules into babel-loader comfiguration, this is an expected behaviour.

And yes when transpiling from ES6 to ES5 with babel-present-env and modules: false like @Haroenv said only the imports/exports are kept es6.

[iam4x]

This has been shipped into v2.1.0 you can find the usage guide here

[timkelty]

Thanks!