fix: display warnings only in development (#4150)

Author: francoischalifour

babel.config.js

@@ -1,5 +1,7 @@
 /* eslint-disable import/no-commonjs */
 
+const wrapWarningWithDevCheck = require('./scripts/babel/wrap-warning-with-dev-check');
+
 const isCJS = process.env.BABEL_ENV === 'cjs';
 const isES = process.env.BABEL_ENV === 'es';
 
@@ -18,6 +20,7 @@ module.exports = api => {
 
   const testPlugins = [
     '@babel/plugin-proposal-class-properties',
+    wrapWarningWithDevCheck,
     [
       'module-resolver',
       {
@@ -33,6 +36,7 @@ module.exports = api => {
     '@babel/plugin-transform-react-constant-elements',
     'babel-plugin-transform-react-remove-prop-types',
     'babel-plugin-transform-react-pure-class-to-function',
+    wrapWarningWithDevCheck,
     (isCJS || isES) && [
       'inline-replace-variables',
       {

package.json

@@ -144,7 +144,7 @@
   "bundlesize": [
     {
       "path": "./dist/instantsearch.production.min.js",
-      "maxSize": "69 kB"
+      "maxSize": "66 kB"
     },
     {
       "path": "./dist/instantsearch.development.js",

scripts/babel/__tests__/wrap-warning-with-dev-check-test.js

@@ -0,0 +1,23 @@
+import { transformSync } from '@babel/core';
+import wrapWarningWithDevCheck from '../wrap-warning-with-dev-check';
+
+function babelTransform(code) {
+  return transformSync(code, {
+    configFile: false,
+    plugins: [wrapWarningWithDevCheck],
+  }).code;
+}
+
+describe('wrap-warning-with-dev-check', () => {
+  test('should wrap warning calls', () => {
+    expect(babelTransform("warning(condition, 'message');")).toEqual(
+      "__DEV__ ? warning(condition, 'message') : void 0;"
+    );
+  });
+
+  test('should not wrap other calls', () => {
+    expect(babelTransform("deprecate(fn, 'message');")).toEqual(
+      "deprecate(fn, 'message');"
+    );
+  });
+});

scripts/babel/wrap-warning-with-dev-check.js

@@ -0,0 +1,57 @@
+/* eslint-disable import/no-commonjs */
+
+/**
+ * Babel plugin that wraps `warning` calls with development check to be
+ * completely stripped from the production bundle.
+ *
+ * In the development bundle, warnings get wrapped with their condition
+ * and their condition becomes false to trigger them without evaluating twice.
+ *
+ * Input:
+ *
+ * ```
+ * warning(condition, message);
+ * ```
+ *
+ * Output:
+ *
+ * ```
+ * if (__DEV__) {
+ *   warning(condition, message);
+ * }
+ * ```
+ */
+
+function wrapWarningInDevCheck(babel) {
+  const t = babel.types;
+
+  const DEV_EXPRESSION = t.identifier('__DEV__');
+  const SEEN_SYMBOL = Symbol('expression.seen');
+
+  return {
+    visitor: {
+      CallExpression: {
+        exit(path) {
+          const node = path.node;
+
+          if (node[SEEN_SYMBOL]) {
+            return;
+          }
+
+          if (path.get('callee').isIdentifier({ name: 'warning' })) {
+            node[SEEN_SYMBOL] = true;
+
+            path.replaceWith(
+              t.ifStatement(
+                DEV_EXPRESSION,
+                t.blockStatement([t.expressionStatement(node)])
+              )
+            );
+          }
+        },
+      },
+    },
+  };
+}
+
+module.exports = wrapWarningInDevCheck;