#48 review build config

.babelrc

@@ -1,6 +1,43 @@
 {
-  "presets": [
-    "@babel/preset-react",
-    "@babel/preset-env"
-  ]
-}
+  "env": {
+    // Compatibility Profile.
+    // ES5 output and CommonJS module format.
+    "es5_cjs": {
+      "presets": [
+        "@babel/preset-env",
+        "@babel/preset-react"
+      ]
+    },
+    // Future Profile.
+    // ES6 output with no module transformation (ES Modules syntax).
+    "es": {
+      "presets": [
+        ["@babel/preset-env", {
+          "modules": false,
+          "targets": {
+            "node": "6.5"
+          }
+        }],
+        "@babel/preset-react"
+      ]
+    },
+    // Bundled Profile.
+    // ES5 output and UMD module format.
+    "umd": {
+      "presets": [
+        ["@babel/preset-env", {
+          "modules": false,
+        }],
+        "@babel/preset-react"
+      ]
+    },
+    // Jest Profile.
+    // To be used by jest tests.
+    "test": {
+      "presets": [
+        "@babel/preset-env",
+        "@babel/preset-react"
+      ]
+    }
+  }
+}

.gitignore

@@ -1,12 +1,27 @@
-node_modules
-.DS_Store
-dist/
-typings/
-*.orig
+# Common aux folders
+.awcache/
+.vscode/
 .idea/
+.cache/
+
+# Dependencies & Build
+node_modules/
+build/
+
+# Aux files
+*.cer
+*.log
+*/src/**/*.orig
 */src/**/*.js.map
+
+# Win
+desktop.ini
+
+# MacOs
+.DS_Store
+
+# Yarn
 yarn.lock
-*.log
-lib/
-es/
+
+# NPM
 package-lock.json

config/test/polyfills.js

@@ -0,0 +1,2 @@
+// Polyfill requestAnimationFrame required by React >=16.0.0
+require('raf/polyfill');

config/webpack/helpers.js

@@ -0,0 +1,25 @@
+const path = require('path');
+
+// String helpers
+const capitalizeString = s => s.charAt(0).toUpperCase() + s.slice(1);
+const camelCaseString = dashedName => dashedName.split("-").map(
+  (s, i) => i > 0 ? capitalizeString(s) : s
+).join("");
+
+// Name helpers
+const packageName = process.env.npm_package_name;
+const packageNameCamelCase = camelCaseString(packageName);
+const version = JSON.stringify(process.env.npm_package_version).replace(/"/g, '');
+const getBundleFileName = min => `${packageName}-${version}${min ? ".min" : ''}.js`;
+
+// Path helpers
+const rootPath = path.resolve(__dirname, "../..");
+const resolveFromRootPath = (...args) => path.join(rootPath, ...args);
+
+// Export constants
+exports.srcPath = resolveFromRootPath("src");
+exports.buildPath = resolveFromRootPath("build",);
+exports.distPath = resolveFromRootPath("build", "dist");
+exports.version = version;
+exports.packageNameCamelCase = packageNameCamelCase;
+exports.getBundleFileName = getBundleFileName;

config/webpack/webpack.common.js

@@ -0,0 +1,30 @@
+const helpers = require('./helpers');
+
+module.exports = (env, argv) => {
+  const minimizeBundle = Boolean(argv['optimize-minimize']);
+
+  return {
+    entry: ['./src/index.js'],
+    output: {
+      path: helpers.distPath,
+      filename: helpers.getBundleFileName(minimizeBundle),
+      library: helpers.packageNameCamelCase,
+      libraryTarget: 'umd',
+    },
+    externals: {
+      react: 'react',
+    },
+    optimization: {
+      minimize: minimizeBundle,
+    },
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          loader: 'babel-loader',
+        },
+      ],
+    },
+  };
+};

config/webpack/webpack.dev.js

@@ -0,0 +1,7 @@
+const merge = require('webpack-merge');
+const commonConfig = require('./webpack.common.js');
+
+module.exports = (env, argv) => merge(commonConfig(env, argv), {
+  mode: 'development',
+  devtool: 'inline-source-map',
+});

config/webpack/webpack.prod.js

@@ -0,0 +1,17 @@
+const merge = require('webpack-merge');
+const commonConfig = require('./webpack.common.js');
+const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
+const CompressionPlugin = require('compression-webpack-plugin');
+
+module.exports = (env, argv) => merge(commonConfig(env, argv), {
+  mode: 'production',
+  devtool: 'none',
+  plugins: [
+    new BundleAnalyzerPlugin({
+      analyzerMode: "static",
+      openAnalyzer: false,
+      reportFilename: "report/report.html",
+    }),
+    new CompressionPlugin(),
+  ],
+});

examples/00-example-basic/package.json

@@ -29,6 +29,6 @@
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-loader-spinner": "^2.3.0",
-    "react-promise-tracker": "file:../../"
+    "react-promise-tracker": "file:../../build"
   }
 }

examples/00-example-basic/webpack.config.js

@@ -10,7 +10,8 @@ module.exports = {
   resolve: {
     extensions: [".js", ".jsx"],
     alias: {
-      react: path.resolve('./node_modules/react')
+      react: path.resolve('./node_modules/react'),
+      'react-dom': path.resolve('./node_modules/react-dom')
     },
   },
   entry: {

examples/01-example-areas/package.json

@@ -29,6 +29,6 @@
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-loader-spinner": "^2.3.0",
-    "react-promise-tracker": "file:../../"
+    "react-promise-tracker": "file:../../build"
   }
 }

examples/01-example-areas/webpack.config.js

@@ -10,7 +10,8 @@ module.exports = {
   resolve: {
     extensions: [".js", ".jsx"],
     alias: {
-      react: path.resolve('./node_modules/react')
+      react: path.resolve('./node_modules/react'),
+      'react-dom': path.resolve('./node_modules/react-dom')
     },
   },
   entry: {

examples/02-example-delay/package.json

@@ -29,6 +29,6 @@
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-loader-spinner": "^2.3.0",
-    "react-promise-tracker": "file:../../"
+    "react-promise-tracker": "file:../../build"
   }
 }

examples/02-example-delay/webpack.config.js

@@ -10,7 +10,8 @@ module.exports = {
   resolve: {
     extensions: [".js", ".jsx"],
     alias: {
-      react: path.resolve('./node_modules/react')
+      react: path.resolve('./node_modules/react'),
+      'react-dom': path.resolve('./node_modules/react-dom')
     },
   },
   entry: {

examples/03-example-hoc/package.json

@@ -29,6 +29,6 @@
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-loader-spinner": "^2.3.0",
-    "react-promise-tracker": "file:../../"
+    "react-promise-tracker": "file:../../build"
   }
 }

examples/03-example-hoc/webpack.config.js

@@ -10,7 +10,8 @@ module.exports = {
   resolve: {
     extensions: [".js", ".jsx"],
     alias: {
-      react: path.resolve('./node_modules/react')
+      react: path.resolve('./node_modules/react'),
+      'react-dom': path.resolve('./node_modules/react-dom')
     },
   },
   entry: {

examples/04-initial-load/package.json

@@ -29,6 +29,6 @@
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-loader-spinner": "^2.3.0",
-    "react-promise-tracker": "file:../../"
+    "react-promise-tracker": "file:../../build"
   }
 }

examples/04-initial-load/webpack.config.js

@@ -10,7 +10,8 @@ module.exports = {
   resolve: {
     extensions: [".js", ".jsx"],
     alias: {
-      react: path.resolve('./node_modules/react')
+      react: path.resolve('./node_modules/react'),
+      'react-dom': path.resolve('./node_modules/react-dom')
     },
   },
   entry: {

examples/05-typescript/.babelrc

@@ -1,5 +1,6 @@
 {
   "presets": [
+    "@babel/preset-react",
     [
       "@babel/preset-env",
       {

examples/05-typescript/package.json

@@ -19,6 +19,7 @@
     "@babel/core": "^7.2.2",
     "@babel/polyfill": "^7.2.5",
     "@babel/preset-env": "^7.3.1",
+    "@babel/preset-react": "^7.0.0",
     "@types/react": "^16.8.3",
     "@types/react-dom": "^16.8.1",
     "awesome-typescript-loader": "^5.2.1",
@@ -38,6 +39,6 @@
     "react": "^16.8.5",
     "react-dom": "^16.8.5",
     "react-loader-spinner": "^2.3.0",
-    "react-promise-tracker": "file:../.."
+    "react-promise-tracker": "file:../../build"
   }
 }

examples/05-typescript/src/common/spinner/spinner.tsx

@@ -3,7 +3,7 @@ import { usePromiseTracker } from 'react-promise-tracker';
 import Loader from 'react-loader-spinner';
 import './spinner.css';
 
-export const Spinner = (props) => {
+export const Spinner: React.FunctionComponent = () => {
   const { promiseInProgress } = usePromiseTracker(null);
 
   return (

examples/05-typescript/webpack.config.js

@@ -8,7 +8,11 @@ var basePath = __dirname;
 module.exports = {
   context: path.join(basePath, "src"),
   resolve: {
-    extensions: [".js", ".ts", ".tsx"]
+    extensions: [".js", ".ts", ".tsx"],
+    alias: {
+      react: path.resolve('./node_modules/react'),
+      'react-dom': path.resolve('./node_modules/react-dom')
+    }
   },
   entry: ["@babel/polyfill", "./index.tsx"],
   output: {