build(lib): improve the build process

BREAKING CHANGE: removed the alternative es5 builds

Author: solkimicreb

.prettierignore

@@ -1 +1,12 @@
 README.md
+CONTRIBUTING.md
+package-lock.json
+node_modules
+dist
+build
+coverage
+.vscode
+.github
+.git
+.circleci
+

README.md

@@ -36,7 +36,6 @@
 * [Articles :loudspeaker:](#articles-loudspeaker)
 * [Performance :rocket:](#performance-rocket)
 * [Platform support :computer:](#platform-support-computer)
-* [Alternative builds :wrench:](#alternative-builds-wrench)
 * [Contributors :sparkles:](#contributors-sparkles)
 
 <!-- tocstop -->
@@ -844,17 +843,6 @@ You can compare Easy State with plain React and other state management libraries
 
 _This library is based on non polyfillable ES6 Proxies. Because of this, it will never support IE._
 
-## Alternative builds :wrench:
-
-This library detects if you use ES6 or commonJS modules and serve the right format to you. The default bundles use ES6 features, which may not yet be supported by some minifier tools. If you experience issues during the build process, you can switch to one of the ES5 builds from below.
-
-- `@risingstack/react-easy-state/dist/es.es6.js` exposes an ES6 build with ES6 modules.
-- `@risingstack/react-easy-state/dist/es.es5.js` exposes an ES5 build with ES6 modules.
-- `@risingstack/react-easy-state/dist/cjs.es6.js` exposes an ES6 build with commonJS modules.
-- `@risingstack/react-easy-state/dist/cjs.es5.js` exposes an ES5 build with commonJS modules.
-
-If you use a bundler, set up an alias for `@risingstack/react-easy-state` to point to your desired build. You can learn how to do it with webpack [here](https://webpack.js.org/configuration/resolve/#resolve-alias) and with rollup [here](https://github.com/rollup/rollup-plugin-alias#usage).
-
 ## Contributors :sparkles:
 
 Contributions are always welcome, please read our [contributing documentation](CONTRIBUTING.md).

__tests__/batching.test.jsx

@@ -272,7 +272,7 @@ describe('batching', () => {
     expect(renderCount).toBe(1);
     expect(container).toHaveTextContent('Bob');
     await new Promise(
-      resolve =>
+      (resolve) =>
         setTimeout(() => {
           person.name = 'Ann';
           person.name = 'Rick';
@@ -295,7 +295,7 @@ describe('batching', () => {
     const { container } = render(<MyComp />);
     expect(renderCount).toBe(1);
     expect(container).toHaveTextContent('Bob');
-    await new Promise(resolve =>
+    await new Promise((resolve) =>
       // eslint-disable-next-line
       requestAnimationFrame(() => {
         person.name = 'Ann';
@@ -418,18 +418,18 @@ describe('batching', () => {
 
   test('should not break Promises', async () => {
     await Promise.resolve(12)
-      .then(value => {
+      .then((value) => {
         expect(value).toBe(12);
         // eslint-disable-next-line
         throw 15;
       })
-      .catch(err => {
+      .catch((err) => {
         expect(err).toBe(15);
       });
   });
 
   test('should not break setTimeout', async () => {
-    await new Promise(resolve => {
+    await new Promise((resolve) => {
       setTimeout(
         (arg1, arg2, arg3) => {
           expect(arg1).toBe('Hello');
@@ -459,10 +459,10 @@ describe('batching', () => {
     expect(callCount).toBe(1);
   });
 
-  test('should not break method this value and args', done => {
+  test('should not break method this value and args', (done) => {
     const socket = new WebSocket('ws://www.example.com');
 
-    socket.onclose = function(ev) {
+    socket.onclose = function (ev) {
       expect(ev).toBeDefined();
       expect(this).toBe(socket);
       done();
@@ -471,11 +471,11 @@ describe('batching', () => {
     socket.close();
   });
 
-  test('should not break callback this value and args', done => {
+  test('should not break callback this value and args', (done) => {
     const ctx = {};
 
     setTimeout(
-      function(arg1, arg2) {
+      function (arg1, arg2) {
         expect(arg1).toBe('Test');
         expect(arg2).toBe('Test2');
         expect(this).toBe(ctx);

__tests__/edgeCases.test.jsx

@@ -57,7 +57,7 @@ describe('edge cases', () => {
         state = { counter: 0 };
 
         handleIncrement = () => {
-          this.setState(prevState => ({
+          this.setState((prevState) => ({
             counter: prevState.counter + 1,
           }));
         };
@@ -84,7 +84,7 @@ describe('edge cases', () => {
         state = { counter: 0 };
 
         handleIncrement = () => {
-          this.setState(prevState => ({
+          this.setState((prevState) => ({
             counter: prevState.counter + 1,
           }));
         };

__tests__/staticProps.test.jsx

@@ -26,7 +26,7 @@ describe('static props', () => {
   });
 
   test('view() should proxy defaultProps for functional components', () => {
-    const MyCustomCompName = props => {
+    const MyCustomCompName = (props) => {
       return <div>{props.name}</div>;
     };
 
@@ -54,7 +54,7 @@ describe('static props', () => {
 
     const errorSpy = jest
       .spyOn(console, 'error')
-      .mockImplementation(message =>
+      .mockImplementation((message) =>
         expect(message.indexOf('Failed prop type')).not.toBe(-1),
       );
     render(<ViewComp number="Bob" />);
@@ -63,7 +63,7 @@ describe('static props', () => {
   });
 
   test('view() should proxy propTypes for functional components', () => {
-    const MyCustomCompName = props => {
+    const MyCustomCompName = (props) => {
       return <div>{props.number}</div>;
     };
 
@@ -75,7 +75,7 @@ describe('static props', () => {
 
     const errorSpy = jest
       .spyOn(console, 'error')
-      .mockImplementation(message =>
+      .mockImplementation((message) =>
         expect(message.indexOf('Failed prop type')).not.toBe(-1),
       );
     render(<ViewComp number="Bob" />);

babel.config.js

@@ -1,26 +1,14 @@
 const development = {
-  plugins: [
-    '@babel/plugin-proposal-export-default-from',
-    '@babel/plugin-proposal-class-properties',
-    '@babel/plugin-proposal-object-rest-spread',
-  ],
+  // the library itself has no jsx code inside it
+  // so it does not need preset-react
+  presets: ['@babel/preset-env'],
 };
+
 const test = {
-  presets: ['@babel/preset-react'],
-  plugins: [
-    '@babel/plugin-proposal-export-default-from',
-    '@babel/plugin-proposal-class-properties',
-    '@babel/plugin-transform-async-to-generator',
-    '@babel/plugin-transform-modules-commonjs',
-    '@babel/plugin-proposal-object-rest-spread',
-  ],
+  // the tests include jsx code and require preset-react
+  presets: ['@babel/preset-react', '@babel/preset-env'],
 };
 
-const bundle = process.env.BUNDLE;
-if (bundle && bundle.indexOf('es5') !== -1) {
-  test.presets.push('@babel/preset-env');
-}
-
 module.exports = {
   env: { development, test },
 };

examples/beer-finder/build/asset-manifest.json

@@ -19,4 +19,4 @@
     "static/css/main.150d374a.chunk.css",
     "static/js/main.1d6354db.chunk.js"
   ]
-}
+}

examples/beer-finder/build/index.html

@@ -1 +1,134 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/react-easy-state/examples/beer-finder/build/manifest.json"><link rel="shortcut icon" href="/react-easy-state/examples/beer-finder/build/favicon.ico"><title>React App</title><link href="/react-easy-state/examples/beer-finder/build/static/css/main.150d374a.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,i,l=r[0],a=r[1],f=r[2],c=0,s=[];c<l.length;c++)i=l[c],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&s.push(o[i][0]),o[i]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(p&&p(r);s.length;)s.shift()();return u.push.apply(u,f||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,l=1;l<t.length;l++){var a=t[l];0!==o[a]&&(n=!1)}n&&(u.splice(r--,1),e=i(i.s=t[0]))}return e}var n={},o={1:0},u=[];function i(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,i),t.l=!0,t.exports}i.m=e,i.c=n,i.d=function(e,r,t){i.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,r){if(1&r&&(e=i(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(i.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)i.d(t,n,function(r){return e[r]}.bind(null,n));return t},i.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(r,"a",r),r},i.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},i.p="/react-easy-state/examples/beer-finder/build/";var l=this["webpackJsonpbeer-finder"]=this["webpackJsonpbeer-finder"]||[],a=l.push.bind(l);l.push=r,l=l.slice();for(var f=0;f<l.length;f++)r(l[f]);var p=a;t()}([])</script><script src="/react-easy-state/examples/beer-finder/build/static/js/2.1dd53533.chunk.js"></script><script src="/react-easy-state/examples/beer-finder/build/static/js/main.1d6354db.chunk.js"></script></body></html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1,shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <link
+      rel="manifest"
+      href="/react-easy-state/examples/beer-finder/build/manifest.json"
+    />
+    <link
+      rel="shortcut icon"
+      href="/react-easy-state/examples/beer-finder/build/favicon.ico"
+    />
+    <title>React App</title>
+    <link
+      href="/react-easy-state/examples/beer-finder/build/static/css/main.150d374a.chunk.css"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <noscript
+      >You need to enable JavaScript to run this app.</noscript
+    >
+    <div id="root"></div>
+    <script>
+      !(function (e) {
+        function r(r) {
+          for (
+            var n, i, l = r[0], a = r[1], f = r[2], c = 0, s = [];
+            c < l.length;
+            c++
+          )
+            (i = l[c]),
+              Object.prototype.hasOwnProperty.call(o, i) &&
+                o[i] &&
+                s.push(o[i][0]),
+              (o[i] = 0);
+          for (n in a)
+            Object.prototype.hasOwnProperty.call(a, n) &&
+              (e[n] = a[n]);
+          for (p && p(r); s.length; ) s.shift()();
+          return u.push.apply(u, f || []), t();
+        }
+        function t() {
+          for (var e, r = 0; r < u.length; r++) {
+            for (var t = u[r], n = !0, l = 1; l < t.length; l++) {
+              var a = t[l];
+              0 !== o[a] && (n = !1);
+            }
+            n && (u.splice(r--, 1), (e = i((i.s = t[0]))));
+          }
+          return e;
+        }
+        var n = {},
+          o = { 1: 0 },
+          u = [];
+        function i(r) {
+          if (n[r]) return n[r].exports;
+          var t = (n[r] = { i: r, l: !1, exports: {} });
+          return (
+            e[r].call(t.exports, t, t.exports, i),
+            (t.l = !0),
+            t.exports
+          );
+        }
+        (i.m = e),
+          (i.c = n),
+          (i.d = function (e, r, t) {
+            i.o(e, r) ||
+              Object.defineProperty(e, r, { enumerable: !0, get: t });
+          }),
+          (i.r = function (e) {
+            'undefined' != typeof Symbol &&
+              Symbol.toStringTag &&
+              Object.defineProperty(e, Symbol.toStringTag, {
+                value: 'Module',
+              }),
+              Object.defineProperty(e, '__esModule', { value: !0 });
+          }),
+          (i.t = function (e, r) {
+            if ((1 & r && (e = i(e)), 8 & r)) return e;
+            if (4 & r && 'object' == typeof e && e && e.__esModule)
+              return e;
+            var t = Object.create(null);
+            if (
+              (i.r(t),
+              Object.defineProperty(t, 'default', {
+                enumerable: !0,
+                value: e,
+              }),
+              2 & r && 'string' != typeof e)
+            )
+              for (var n in e)
+                i.d(
+                  t,
+                  n,
+                  function (r) {
+                    return e[r];
+                  }.bind(null, n),
+                );
+            return t;
+          }),
+          (i.n = function (e) {
+            var r =
+              e && e.__esModule
+                ? function () {
+                    return e.default;
+                  }
+                : function () {
+                    return e;
+                  };
+            return i.d(r, 'a', r), r;
+          }),
+          (i.o = function (e, r) {
+            return Object.prototype.hasOwnProperty.call(e, r);
+          }),
+          (i.p = '/react-easy-state/examples/beer-finder/build/');
+        var l = (this['webpackJsonpbeer-finder'] =
+            this['webpackJsonpbeer-finder'] || []),
+          a = l.push.bind(l);
+        (l.push = r), (l = l.slice());
+        for (var f = 0; f < l.length; f++) r(l[f]);
+        var p = a;
+        t();
+      })([]);
+    </script>
+    <script src="/react-easy-state/examples/beer-finder/build/static/js/2.1dd53533.chunk.js"></script>
+    <script src="/react-easy-state/examples/beer-finder/build/static/js/main.1d6354db.chunk.js"></script>
+  </body>
+</html>

examples/beer-finder/build/precache-manifest.a4f816da9af78d1eb5360e0a1c648d69.js

@@ -1,26 +1,31 @@
 self.__precacheManifest = (self.__precacheManifest || []).concat([
   {
-    "revision": "00784bd91d5b8e277e5dfb166760dd39",
-    "url": "/react-easy-state/examples/beer-finder/build/index.html"
+    revision: '00784bd91d5b8e277e5dfb166760dd39',
+    url: '/react-easy-state/examples/beer-finder/build/index.html',
   },
   {
-    "revision": "d9941695e22b868af942",
-    "url": "/react-easy-state/examples/beer-finder/build/static/css/main.150d374a.chunk.css"
+    revision: 'd9941695e22b868af942',
+    url:
+      '/react-easy-state/examples/beer-finder/build/static/css/main.150d374a.chunk.css',
   },
   {
-    "revision": "e3d522a2ec82f007c3a8",
-    "url": "/react-easy-state/examples/beer-finder/build/static/js/2.1dd53533.chunk.js"
+    revision: 'e3d522a2ec82f007c3a8',
+    url:
+      '/react-easy-state/examples/beer-finder/build/static/js/2.1dd53533.chunk.js',
   },
   {
-    "revision": "5e9b6f5c16b720e8a86875f97734673e",
-    "url": "/react-easy-state/examples/beer-finder/build/static/js/2.1dd53533.chunk.js.LICENSE.txt"
+    revision: '5e9b6f5c16b720e8a86875f97734673e',
+    url:
+      '/react-easy-state/examples/beer-finder/build/static/js/2.1dd53533.chunk.js.LICENSE.txt',
   },
   {
-    "revision": "d9941695e22b868af942",
-    "url": "/react-easy-state/examples/beer-finder/build/static/js/main.1d6354db.chunk.js"
+    revision: 'd9941695e22b868af942',
+    url:
+      '/react-easy-state/examples/beer-finder/build/static/js/main.1d6354db.chunk.js',
   },
   {
-    "revision": "a82e0e9f7581a49002d1",
-    "url": "/react-easy-state/examples/beer-finder/build/static/js/runtime-main.5a628cab.js"
-  }
-]);
+    revision: 'a82e0e9f7581a49002d1',
+    url:
+      '/react-easy-state/examples/beer-finder/build/static/js/runtime-main.5a628cab.js',
+  },
+]);