Current Feature Set

.babelrc

@@ -1,6 +1,10 @@
 {
   "presets": [
     "@babel/preset-env",
-    "@babel/preset-react"
+    "@babel/preset-react",
+    "@babel/typescript"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-optional-chaining"
   ]
-}
+}

.eslintrc.js

@@ -1,142 +1,3 @@
-
 module.exports = {
-  "extends": [
-    "airbnb",
-    "prettier",
-    "prettier/react",
-    "plugin:jsx-a11y/recommended"
-  ],
-  "parser": "babel-eslint",
-  "parserOptions": {
-    "ecmaVersion": 2018,
-    "ecmaFeatures": {
-      "impliedStrict": true,
-      "classes": true
-    }
-  },
-  "env": {
-    "browser": true,
-    "node": true,
-    "jquery": true,
-    "jest": true
-  },
-  "rules": {
-    "no-debugger": 0,
-    "no-alert": 0,
-    "no-await-in-loop": 0,
-    "no-return-assign": [
-      "error",
-      "except-parens"
-    ],
-    "no-restricted-syntax": [
-      2,
-      "ForInStatement",
-      "LabeledStatement",
-      "WithStatement"
-    ],
-    "no-unused-vars": [
-      1,
-      {
-        "ignoreSiblings": true,
-        "argsIgnorePattern": "res|next|^err"
-      }
-    ],
-    "prefer-const": [
-      "error",
-      {
-        "destructuring": "all",
-      }
-    ],
-    "arrow-body-style": [
-      2,
-      "as-needed"
-    ],
-    "no-unused-expressions": [
-      2,
-      {
-        "allowTaggedTemplates": true
-      }
-    ],
-    "no-param-reassign": [
-      2,
-      {
-        "props": false
-      }
-    ],
-    "no-console": 0,
-    "import/prefer-default-export": 0,
-    "import": 0,
-    "func-names": 0,
-    "space-before-function-paren": 0,
-    "comma-dangle": 0,
-    "max-len": 0,
-    "import/extensions": 0,
-    "no-underscore-dangle": 0,
-    "consistent-return": 0,
-    "react/display-name": 1,
-    "react/no-array-index-key": 0,
-    "react/react-in-jsx-scope": 0,
-    "react/prefer-stateless-function": 0,
-    "react/forbid-prop-types": 0,
-    "react/no-unescaped-entities": 0,
-    "jsx-a11y/accessible-emoji": 0,
-    "react/require-default-props": 0,
-    "react/jsx-filename-extension": [
-      1,
-      {
-        "extensions": [
-          ".js",
-          ".jsx"
-        ]
-      }
-    ],
-    "radix": 0,
-    "no-shadow": [
-      2,
-      {
-        "hoist": "all",
-        "allow": [
-          "resolve",
-          "reject",
-          "done",
-          "next",
-          "err",
-          "error"
-        ]
-      }
-    ],
-    "quotes": [
-      2,
-      "single",
-      {
-        "avoidEscape": true,
-        "allowTemplateLiterals": true
-      }
-    ],
-    "prettier/prettier": [
-      "error",
-      {
-        "trailingComma": "es5",
-        "singleQuote": true,
-        "printWidth": 80,
-      }
-    ],
-    "jsx-a11y/href-no-hash": "off",
-    "jsx-a11y/anchor-is-valid": [
-      "warn",
-      {
-        "aspects": [
-          "invalidHref"
-        ]
-      }
-    ],
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn"
-  },
-  "plugins": [
-    "html",
-    "prettier",
-    "react-hooks",
-    "jsx-a11y"
-  ]
-}
+  extends: ['./js.config.js', './ts.config.js'],
+};

build-utils/webpack.common.js

@@ -4,13 +4,13 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
-  entry: './src/index.js',
+  entry: './src/index.tsx',
   module: {
     rules: [
       {
-        test: /\.(js|jsx)$/,
-        exclude: /node_modules/,
+        test: /\.(j|t)sx?$/,
         use: ['babel-loader', 'eslint-loader'],
+        exclude: /node_modules/,
       },
       {
         test: /\.svg$/,
@@ -34,7 +34,7 @@ module.exports = {
     ],
   },
   resolve: {
-    extensions: ['*', '.js', '.jsx'],
+    extensions: ['*', '.js', '.ts', '.jsx', '.tsx'],
   },
   plugins: [
     new CleanWebpackPlugin(),

build-utils/webpack.prod.js

@@ -1,9 +1,26 @@
 /* eslint-disable import/no-extraneous-dependencies */
 const Dotenv = require('dotenv-webpack');
+const TerserPlugin = require('terser-webpack-plugin');
 
 module.exports = {
   mode: 'production',
   devtool: 'source-map',
+  optimization: {
+    occurrenceOrder: true,
+    removeEmptyChunks: true,
+    mangleWasmImports: true,
+    removeAvailableModules: true,
+    usedExports: true,
+    mergeDuplicateChunks: true,
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        parallel: true,
+        sourceMap: true,
+        extractComments: false,
+      }),
+    ],
+  },
   plugins: [
     new Dotenv({
       path: './.env.production',

jest.config.js

@@ -77,10 +77,7 @@ module.exports = {
   // ],
 
   // A map from regular expressions to module names that allow to stub out resources with a single module
-  moduleNameMapper: {
-    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
-    "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
-  },
+  // moduleNameMapper: {},
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
   // modulePathIgnorePatterns: [],

js.config.js

@@ -0,0 +1,113 @@
+module.exports = {
+  extends: [
+    'airbnb',
+    'prettier',
+    'prettier/react',
+    'plugin:jsx-a11y/recommended',
+  ],
+  parser: 'babel-eslint',
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      impliedStrict: true,
+      classes: true,
+    },
+  },
+  env: {
+    browser: true,
+    node: true,
+    jquery: true,
+    jest: true,
+  },
+  rules: {
+    'no-debugger': 0,
+    'no-alert': 0,
+    'no-await-in-loop': 0,
+    'no-return-assign': ['error', 'except-parens'],
+    'no-restricted-syntax': [
+      2,
+      'ForInStatement',
+      'LabeledStatement',
+      'WithStatement',
+    ],
+    'no-unused-vars': [
+      1,
+      {
+        ignoreSiblings: true,
+        argsIgnorePattern: 'res|next|^err',
+      },
+    ],
+    'prefer-const': [
+      'error',
+      {
+        destructuring: 'all',
+      },
+    ],
+    'arrow-body-style': [2, 'as-needed'],
+    'no-unused-expressions': [
+      2,
+      {
+        allowTaggedTemplates: true,
+      },
+    ],
+    'no-param-reassign': [
+      2,
+      {
+        props: false,
+      },
+    ],
+    'no-console': 0,
+    'import/prefer-default-export': 0,
+    import: 0,
+    'func-names': 0,
+    'space-before-function-paren': 0,
+    'comma-dangle': 0,
+    'max-len': 0,
+    'import/extensions': 0,
+    'no-underscore-dangle': 0,
+    'consistent-return': 0,
+    'react/display-name': 1,
+    'react/no-array-index-key': 0,
+    'react/react-in-jsx-scope': 0,
+    'react/prefer-stateless-function': 0,
+    'react/forbid-prop-types': 0,
+    'react/no-unescaped-entities': 0,
+    'jsx-a11y/accessible-emoji': 0,
+    'react/require-default-props': 0,
+    'react/jsx-filename-extension': [1, { extensions: ['.tsx', '.ts', '.js'] }],
+    radix: 0,
+    'no-shadow': [
+      2,
+      {
+        hoist: 'all',
+        allow: ['resolve', 'reject', 'done', 'next', 'err', 'error'],
+      },
+    ],
+    quotes: [
+      2,
+      'single',
+      {
+        avoidEscape: true,
+        allowTemplateLiterals: true,
+      },
+    ],
+    'prettier/prettier': [
+      'error',
+      {
+        trailingComma: 'es5',
+        singleQuote: true,
+        printWidth: 80,
+      },
+    ],
+    'jsx-a11y/href-no-hash': 'off',
+    'jsx-a11y/anchor-is-valid': [
+      'warn',
+      {
+        aspects: ['invalidHref'],
+      },
+    ],
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+  },
+  plugins: ['babel', 'html', 'prettier', 'react-hooks', 'jsx-a11y'],
+};