feat(bundle): update bundle strategy (#3260)

## Migrate from Webpack to Rollup Rollup is now used to bundle InstantSearch.js. Rollup is more suited for libraries. It allows us to create lighter bundles and multiple bundle strategies. | | Webpack | Rollup |---|---|--- | Bundle | 372 kB | 301 kB | GZipped | 97 kB | 84 kB This sizes are without any further optimizations (will come gradually). ## Different bundles This is what is exported: ``` dist ├── instantsearch.development.js ├── instantsearch.development.js.map ├── instantsearch.production.min.js └── instantsearch.production.min.js.map cjs ├── components ├── connectors ├── helpers ├── index.js ├── lib ├── src └── widgets es ├── components ├── connectors ├── helpers ├── index.js ├── lib └── widgets ``` ### UMD The files have been renamed to become clearer for the users. #### Usage ```html <script src="instantsearch.production.min.js"></script> ``` ### CJS #### Usage ```js const instantsearch = require('instantsearch.js').default ``` ### ES No changes. ## Development and production bundles Since the bundle is getting heavy, the migration to Rollup has made it easier to create separate UMD bundles: - `instantsearch.development.js` - `instantsearch.production.min.js` These names were inspired by the [React strategy](https://unpkg.com/[email protected]/umd/). The development bundle will include everything that the default bundle has so far. The production bundle will not include the warnings (everything that is runtime) and the verbose widget/connector usages. Everything under this condition will get stripped in the production bundle: ```js if (__DEV__) { // development only } ``` In the CJS and ES bundle, it's converted to: ```js if (process.env.NODE_ENV === 'development') { // development only } ``` ## What's next This new bundle strategy allows to gradually remove development feature from the production bundle.
algolia · Dec 13, 2018 · a7dab81 · a7dab81
1 parent a5ff6af
commit a7dab81
Show file tree

Hide file tree

Showing 53 changed files with 664 additions and 298 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,30 +1,54 @@
 {
   "env": {
-    "test": {
+    "development": {
       "presets": [
-        ["env", {"targets": { "node": "current" }}],
+        [
+          "env",
+          {
+            "targets": {
+              "browsers": ["last 2 versions", "ie >= 9"]
+            }
+          }
+        ],
         "react",
         "stage-2"
       ],
       "plugins": [
-        "babel-plugin-rewire",
-        ["module-resolver", {
-          "alias": {
-            "preact-compat": "react"
-          }
-        }]
+        "transform-react-remove-prop-types",
+        "transform-react-constant-elements",
+        "transform-react-pure-class-to-function"
       ]
     },
-    "development": {
+    "production": {
       "presets": [
-        ["env", { "targets": { "browsers": ["last 2 versions", "ie >= 10"] } }],
+        [
+          "env",
+          {
+            "targets": {
+              "browsers": ["last 2 versions", "ie >= 9"]
+            }
+          }
+        ],
         "react",
         "stage-2"
+      ],
+      "plugins": [
+        "transform-react-remove-prop-types",
+        "transform-react-constant-elements",
+        "transform-react-pure-class-to-function"
       ]
     },
-    "production": {
+    "umd": {
       "presets": [
-        ["env", { "targets": { "browsers": ["last 2 versions", "ie >= 10"] } }],
+        [
+          "env",
+          {
+            "modules": false,
+            "targets": {
+              "browsers": ["last 2 versions", "ie >= 9"]
+            }
+          }
+        ],
         "react",
         "stage-2"
       ],
@@ -34,16 +58,86 @@
         "transform-react-pure-class-to-function"
       ]
     },
-    "production-es6": {
+    "cjs": {
       "presets": [
-        ["env", { "modules": false, "targets": { "browsers": ["last 2 versions", "ie >= 10"] } }],
+        [
+          "env",
+          {
+            "targets": {
+              "browsers": ["last 2 versions", "ie >= 9"]
+            }
+          }
+        ],
         "react",
         "stage-2"
       ],
       "plugins": [
         "transform-react-remove-prop-types",
         "transform-react-constant-elements",
-        "transform-react-pure-class-to-function"
+        "transform-react-pure-class-to-function",
+        [
+          "inline-replace-variables",
+          {
+            "__DEV__": {
+              "type": "node",
+              "replacement": "process.env.NODE_ENV === 'development'"
+            }
+          }
+        ]
+      ]
+    },
+    "es": {
+      "presets": [
+        [
+          "env",
+          {
+            "modules": false,
+            "targets": {
+              "browsers": ["last 2 versions", "ie >= 9"]
+            }
+          }
+        ],
+        "react",
+        "stage-2"
+      ],
+      "plugins": [
+        "transform-react-remove-prop-types",
+        "transform-react-constant-elements",
+        "transform-react-pure-class-to-function",
+        [
+          "inline-replace-variables",
+          {
+            "__DEV__": {
+              "type": "node",
+              "replacement": "process.env.NODE_ENV === 'development'"
+            }
+          }
+        ]
+      ]
+    },
+    "test": {
+      "presets": [
+        [
+          "env",
+          {
+            "targets": {
+              "node": "current"
+            }
+          }
+        ],
+        "react",
+        "stage-2"
+      ],
+      "plugins": [
+        "rewire",
+        [
+          "module-resolver",
+          {
+            "alias": {
+              "preact-compat": "react"
+            }
+          }
+        ]
       ]
     }
   }

diff --git a/.eslintignore b/.eslintignore
@@ -1,7 +1,7 @@
-dist/
-dist-es5-module/
+/dist
+/cjs
+/es
+/docgen
 docs/
 docs.old/
-docgen/
 node_modules/
-es/
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,8 +1,11 @@
 module.exports = {
   extends: ['algolia', 'algolia/jest', 'algolia/react'],
   rules: {
-    "no-param-reassign": 0,
-    "import/no-extraneous-dependencies": 0,
-    "react/no-string-refs": 1
-  }
-}
+    'no-param-reassign': 0,
+    'import/no-extraneous-dependencies': 0,
+    'react/no-string-refs': 1,
+  },
+  globals: {
+    __DEV__: false,
+  },
+};
diff --git a/.gitignore b/.gitignore
@@ -1,18 +1,17 @@
 node_modules/
-dist/
-dist-es5-module/
+!scripts/docs/
 npm-debug.log
+yarn-error.log
 .DS_Store
-docs/
-!scripts/docs/
 
-# Ignore staging build files
-dev/dist/*
+# Bundle build files
+/dist
+/cjs
+/es
 
-# Ignore Argos CI screenshots.
-functional-tests/screenshots/
+# Generated files
+/docs
+/storybook/dist/*
 
-# Ignore ES6 build files
-es/
-
-yarn-error.log
+# Argos CI screenshots
+/functional-tests/screenshots/
diff --git a/.npmignore b/.npmignore
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -157,15 +157,13 @@ And also relaunch the dev environement afterwards.
 Here are the main files and folders of the project.
 
 ```
-▸ dev/                << the dev app source
 ▸ docgen/             << the documentation source
 ▸ functional-tests/   << the functional tests
 ▸ scripts/            << the scripts for maintaining the project
 ▸ src/                << the source of the library
+▸ storybook/          << the storybook source
   CHANGELOG.md        << the autogenerated changelog (based on commits)
   CONTRIBUTING.md     << this file
-  index.es6.js        << the root js file for the ES6 module
-  index.js            << the root js file for the bundle
   package.json        << the definition of the project
   README.md           << the introduction of the project
 ```
@@ -206,10 +204,10 @@ Here are the main files and folders of the project.
     webpack.config.start.babel.js   << dev webpack config
 ```
 
-### The dev app
+### The storybook source
 
 ```
-▾ dev/
+▾ storybook/
   ▾ app/                      << the source of the dev app
     ▸ builtin/                << templates used for built-in widgets
     ▸ utils/                  << utility functions to build stories
@@ -327,7 +325,7 @@ npm run release
 For the maintenance version, go on maintenance (`git checkout maintenance`) and use:
 
 ```sh
-npm run release-maintenance
+npm run release:maintenance
 ```
 
 **Be sure to use `$ npm run` instead of `$ yarn run` to avoid issues**

diff --git a/docgen/layouts/example.pug b/docgen/layouts/example.pug
@@ -5,9 +5,8 @@ head
   link(rel='stylesheet', href='https://cdn.jsdelivr.net/bootstrap/3.3.5/css/bootstrap.min.css')
   link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css')
   link(href='https://fonts.googleapis.com/css?family=Roboto', rel='stylesheet', type='text/css')
-  link(rel='stylesheet', href='instantsearch.min.css')
   link(rel='stylesheet', type='text/css', href='main.css')
   script(src='https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.includes')
-  script(src='instantsearch.min.js')
+  script(src='/lib/instantsearch.production.min.js')
 body
   | !{contents}
diff --git a/docgen/src/guides/v3-migration.md b/docgen/src/guides/v3-migration.md
@@ -13,6 +13,48 @@ This document helps you migrate from InstantSearch 2 to InstantSearch 3.
 
 InstantSearch 3 introduces some breaking changes in the widgets' naming, options and markup.
 
+## Imports
+
+The CJS and ES imports remain unchanged.
+
+### UMD
+
+We're introducing a new naming for the UMD imports. This makes it clearer which InstantSearch.js bundle to use either in development or in production. The production bundle will get lighter over time as it won't include the runtime warnings and documentation.
+
+#### Before
+
+```
+dist
+├── instantsearch.js
+├── instantsearch.js.map
+├── instantsearch.min.js
+└── instantsearch.min.js.map
+```
+
+#### After
+
+```
+dist
+├── instantsearch.development.js
+├── instantsearch.development.js.map
+├── instantsearch.production.min.js
+└── instantsearch.production.min.js.map
+```
+
+### CommonJS
+
+#### Before
+
+```js
+const instantsearch = require('instantsearch.js');
+```
+
+#### After
+
+```js
+const instantsearch = require('instantsearch.js').default;
+```
+
 ## InstantSearch
 
 ### `appId` and `apiKey` are replaced by `searchClient`

diff --git a/index.es6.js b/index.es6.js
diff --git a/index.js b/index.js