chore: add build configuration files (#41)

* chore: add build configuration files

* chore: add browser compatibility section

Co-authored-by: Erick Belfort <[email protected]>

README.md

@@ -202,3 +202,34 @@ import { DevTool } from 'little-state-machine-devtools';
     <img width="500" src="https://github.com/bluebill1049/little-state-machine/blob/master/docs/DevToolScreen.png?raw=true" />
   </a>
 </div>
+
+<h2>Browser Compatibility</h2>
+Little State Machine supports all major browsers
+
+For legacy IE11 support, you can import little-state-machine IE11 version.
+
+```js
+import { createStore } from 'little-state-machine/dist/little-state-machine.ie11'
+```
+
+
+<h2>Polyfill</h2>
+
+Consider adding `Object.entries()` polyfill if you're wondering to have support for old browsers.
+You can weather consider adding snippet below into your code, ideally before your App.js file:
+
+📋 `utils.[js|ts]`
+```js
+if (!Object.entries) {
+  Object.entries = function( obj ){
+    var ownProps = Object.keys( obj ),
+        i = ownProps.length,
+        resArray = new Array(i); // preallocate the Array
+    while (i--)
+      resArray[i] = [ownProps[i], obj[ownProps[i]]];    
+    return resArray;
+  };
+}
+```
+
+Or you can add [core-js](https://github.com/zloirock/core-js) polyfill into your project and add `core-js/es/object/entries` in your `polyfills.[js|ts]` file.

package.json

@@ -2,12 +2,17 @@
   "name": "little-state-machine",
   "sideEffects": false,
   "version": "3.0.1",
-  "main": "dist/index.js",
-  "module": "dist/index.es.js",
+  "main": "dist/little-state-machine.js",
+  "module": "dist/little-state-machine.es.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "clean": "rimraf dist/*",
-    "build": "rollup -c",
+    "prebuild": "yarn clean",
+    "build": "yarn build:modern && yarn build:umd && yarn build:ie11 && yarn build:min",
+    "build:modern": "rollup -c ./rollup/rollup.config.js",
+    "build:umd": "rollup -c ./rollup/rollup.umd.config.js",
+    "build:min": "rollup -c ./rollup/rollup.min.config.js",
+    "build:ie11": "rollup -c ./rollup/rollup.ie11.config.js",
     "watch": "tsc --watch",
     "release": "npm version",
     "postrelease": "yarn publish && git push --follow-tags",
@@ -23,6 +28,13 @@
   "author": "<[email protected]>",
   "license": "MIT",
   "devDependencies": {
+    "@babel/core": "^7.9.6",
+    "@babel/plugin-transform-runtime": "^7.9.6",
+    "@babel/runtime-corejs3": "^7.9.6",
+    "@rollup/plugin-babel": "^5.0.2",
+    "@rollup/plugin-commonjs": "^12.0.0",
+    "@rollup/plugin-node-resolve": "^8.0.0",
+    "@rollup/plugin-replace": "^2.3.2",
     "@types/enzyme": "^3.9.0",
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/jest": "^24.0.17",
@@ -37,7 +49,8 @@
     "react-dom": "^16.8.4",
     "react-test-renderer": "^16.8.3",
     "rimraf": "^2.6.3",
-    "rollup": "^1.6.0",
+    "rollup": "^2.10.9",
+    "rollup-plugin-terser": "^6.1.0",
     "rollup-plugin-typescript2": "^0.19.2",
     "ts-jest": "^24.0.0",
     "typescript": "^3.3.3333",
@@ -47,4 +60,4 @@
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
   }
-}
+}

rollup/rollup.config.js

@@ -0,0 +1,33 @@
+import typescript from 'rollup-plugin-typescript2';
+import pkg from '../package.json';
+
+export function getConfig({
+  tsconfig = './tsconfig.json',
+  output = [
+    {
+      file: `dist/${pkg.name}.js`,
+      format: 'cjs',
+      exports: 'named',
+    },
+    {
+      file: `dist/${pkg.name}.es.js`,
+      format: 'esm',
+    },
+  ],
+  plugins = [],
+} = {}) {
+  return {
+    input: 'src/index.ts',
+    external: ['react'],
+    plugins: [
+      typescript({
+        tsconfig,
+        clean: true,
+      }),
+      ...plugins,
+    ],
+    output,
+  };
+}
+
+export default getConfig();

rollup/rollup.ie11.config.js

@@ -0,0 +1,31 @@
+import { getConfig } from './rollup.config';
+import { getBabelOutputPlugin } from '@rollup/plugin-babel';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import pkg from '../package.json';
+
+export default getConfig({
+  tsconfig: './tsconfig.ie11.json',
+  output: [
+    {
+      file: `dist/${pkg.name}.ie11.js`,
+      format: 'cjs',
+      exports: 'named',
+    },
+  ],
+  plugins: [
+    resolve(),
+    commonjs({
+      include: 'node_modules/**'
+    }),
+    getBabelOutputPlugin({
+      plugins: [
+        ['@babel/plugin-transform-runtime',
+          {
+            corejs: 3,
+          }
+        ]
+      ],
+    })
+  ]
+});

rollup/rollup.min.config.js

@@ -0,0 +1,13 @@
+import { getConfig } from './rollup.config';
+import { terser } from 'rollup-plugin-terser';
+import pkg from '../package.json';
+
+export default getConfig({
+  plugins: [terser()],
+  output: [
+    {
+      file: `dist/${pkg.name}.min.es.js`,
+      format: 'es',
+    },
+  ],
+});

rollup/rollup.umd.config.js

@@ -0,0 +1,21 @@
+import { getConfig } from './rollup.config';
+import replace from '@rollup/plugin-replace';
+import pkg from '../package.json';
+
+export default getConfig({
+  plugins: [
+    replace({
+      'process.env.NODE_ENV': JSON.stringify('production'),
+    }),
+  ],
+  output: [
+    {
+      name: 'ReactHookForm',
+      file: `dist/${pkg.name}.umd.js`,
+      format: 'umd',
+      globals: {
+        react: 'React',
+      },
+    },
+  ],
+});

tsconfig.ie11.json

@@ -0,0 +1,7 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "target": "es5",
+        "downlevelIteration": true
+    }
+}

tsconfig.json

@@ -10,13 +10,23 @@
     "declaration": true,
     "noEmit": true,
     "allowSyntheticDefaultImports": true,
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"],
-  "exclude": ["node_modules", "test", "examples"]
-}
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "test",
+    "examples"
+  ]
+}