Convert Webpack config to TypeScript

.eslintrc.js

@@ -14,7 +14,7 @@ module.exports = {
         argsIgnorePattern: '^event$',
         ignoreRestSiblings: true,
         vars: 'all',
-        varsIgnorePattern: 'jsx|emotionJSX'
+        varsIgnorePattern: 'jsx|emotionJSX',
       },
     ],
     curly: [2, 'multi-line'],
@@ -39,4 +39,38 @@ module.exports = {
     semi: 2,
     strict: 0,
   },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      extends: ['plugin:@typescript-eslint/base'],
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: ['./tsconfig.json'],
+      },
+      rules: {
+        'no-unused-vars': 'off',
+        '@typescript-eslint/no-unused-vars': [
+          'error',
+          {
+            args: 'after-used',
+            argsIgnorePattern: '^event$',
+            ignoreRestSiblings: true,
+            vars: 'all',
+            varsIgnorePattern: 'jsx|emotionJSX',
+          },
+        ],
+        'no-unused-expressions': 'off',
+        '@typescript-eslint/no-unused-expressions': 1,
+        quotes: 'off',
+        '@typescript-eslint/quotes': [2, 'single', 'avoid-escape'],
+        semi: 'off',
+        '@typescript-eslint/semi': 2,
+      },
+    },
+  ],
 };

babel.config.js

@@ -5,4 +5,19 @@ module.exports = {
     '@babel/plugin-transform-runtime',
   ],
   presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow'],
+  overrides: [
+    {
+      test: ['**/*.ts', '**/*.tsx'],
+      plugins: [
+        'emotion',
+        ['@babel/plugin-proposal-class-properties', { loose: true }],
+        '@babel/plugin-transform-runtime',
+      ],
+      presets: [
+        '@babel/preset-env',
+        '@babel/preset-react',
+        '@babel/preset-typescript',
+      ],
+    },
+  ],
 };

docs/App/index.d.ts

@@ -0,0 +1,3 @@
+import { Component } from 'react';
+
+export default class App extends Component {}

docs/package.json

@@ -16,8 +16,16 @@
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.10.4",
     "@babel/runtime": "^7.4.4",
     "@emotion/core": "^10.0.9",
+    "@types/copy-webpack-plugin": "^5.0.2",
+    "@types/html-webpack-plugin": "^3.2.3",
+    "@types/node": "^14.0.26",
+    "@types/react": "^16.9.43",
+    "@types/react-dom": "^16.9.8",
+    "@types/webpack": "^4.41.21",
+    "@types/webpack-dev-server": "^3.11.0",
     "babel-loader": "^8.0.0",
     "babel-plugin-emotion": "^10.0.9",
     "chroma-js": "^1.3.6",
@@ -26,9 +34,10 @@
     "copy-webpack-plugin": "^5.0.3",
     "cross-env": "^5.1.3",
     "css-loader": "^0.28.7",
-    "dotenv": "^7.0.0",
+    "dotenv": "^8.2.0",
     "extract-react-types-loader": "^0.3.0",
     "flow-bin": "^0.91.0",
+    "fork-ts-checker-webpack-plugin": "^5.0.9",
     "html-webpack-plugin": "^3.2.0",
     "moment": "^2.20.1",
     "pretty-proptypes": "^0.5.0",
@@ -44,6 +53,8 @@
     "react-sortable-hoc": "^1.9.1",
     "react-syntax-highlighter": "^7.0.1",
     "style-loader": "^0.23.1",
+    "ts-node": "^8.10.2",
+    "typescript": "^3.9.7",
     "unfetch": "^3.0.0",
     "webpack": "^4.30.0",
     "webpack-cli": "^3.3.1",

docs/webpack.config.js → docs/webpack.config.ts

@@ -1,16 +1,17 @@
-// @flow
+import * as path from 'path';
+import * as webpack from 'webpack';
+import 'webpack-dev-server';
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import { config } from 'dotenv';
 
-const path = require('path');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
+config();
 
-// const webpack = require('webpack');
-require('dotenv').config();
-
-module.exports = {
+const webpackConfig: webpack.Configuration = {
   context: __dirname,
   entry: {
-    index: './index.js',
+    index: './index',
   },
   output: {
     path: path.resolve(__dirname, 'dist'),
@@ -23,10 +24,13 @@ module.exports = {
   },
   // devtool: 'source-map',
   devtool: 'cheap-module-eval-source-map',
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
+  },
   module: {
     rules: [
       {
-        test: /\.js$/,
+        test: /\.(ts|js)x?$/,
         exclude: [/node_modules/],
         use: [
           {
@@ -45,9 +49,7 @@ module.exports = {
   },
   plugins: [
     // new webpack.DefinePlugin({
-    //   // $FlowFixMe: This definitely exists here.
     //   'process.env.CLIENT_ID': `'${process.env.CLIENT_ID}'`,
-    //   // $FlowFixMe: This definitely exists here.
     //   'process.env.CLIENT_SECRET': `'${process.env.CLIENT_SECRET}'`,
     // }),
     new HtmlWebpackPlugin({
@@ -56,5 +58,13 @@ module.exports = {
       template: path.resolve(__dirname, 'index.html'),
     }),
     new CopyWebpackPlugin(['_redirects', 'favicon.ico', 'index.css']),
+    new ForkTsCheckerWebpackPlugin({
+      async: false,
+      typescript: {
+        configFile: '../tsconfig.json',
+      },
+    }),
   ],
 };
+
+export default webpackConfig;

package.json

@@ -22,6 +22,7 @@
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.10.4",
     "@babel/runtime": "^7.4.4",
     "@changesets/cli": "^2.0.3",
     "@changesets/get-github-info": "^0.2.1",
@@ -33,8 +34,17 @@
     "@testing-library/jest-dom": "5.1.1",
     "@testing-library/react": "10.0.1",
     "@testing-library/user-event": "^10.0.0",
+    "@types/copy-webpack-plugin": "^5.0.2",
+    "@types/html-webpack-plugin": "^3.2.3",
+    "@types/node": "^14.0.26",
+    "@types/react": "^16.9.43",
+    "@types/react-dom": "^16.9.8",
+    "@types/webpack": "^4.41.21",
+    "@types/webpack-dev-server": "^3.11.0",
+    "@typescript-eslint/eslint-plugin": "^3.7.0",
+    "@typescript-eslint/parser": "^3.7.0",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^9.0.0",
+    "babel-eslint": "^10.1.0",
     "babel-jest": "^23.6.0",
     "babel-loader": "^8.0.0",
     "babel-plugin-emotion": "^10.0.9",
@@ -49,14 +59,15 @@
     "css-loader": "^0.28.7",
     "cypress": "^4.11.0",
     "dataloader": "^1.4.0",
-    "dotenv": "^7.0.0",
+    "dotenv": "^8.2.0",
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "enzyme-to-json": "^3.3.0",
-    "eslint": "^4.6.1",
-    "eslint-plugin-react": "^7.3.0",
+    "eslint": "^7.5.0",
+    "eslint-plugin-react": "^7.20.3",
     "extract-react-types-loader": "^0.3.0",
     "flow-bin": "^0.91.0",
+    "fork-ts-checker-webpack-plugin": "^5.0.9",
     "gh-pages": "^1.1.0",
     "html-webpack-plugin": "^3.2.0",
     "jest": "^25.1.0",
@@ -65,6 +76,7 @@
     "memoize-one": "^5.0.0",
     "moment": "^2.20.1",
     "node-fetch": "^2.5.0",
+    "prettier": "^2.0.5",
     "pretty-proptypes": "^0.5.0",
     "prop-types": "^15.6.0",
     "raf": "^3.4.0",
@@ -81,6 +93,8 @@
     "react-syntax-highlighter": "^7.0.1",
     "react-transition-group": "^4.3.0",
     "style-loader": "^0.23.1",
+    "ts-node": "^8.10.2",
+    "typescript": "^3.9.7",
     "unfetch": "^3.0.0",
     "webpack": "^4.30.0",
     "webpack-cli": "^3.3.1",
@@ -97,7 +111,7 @@
     "test": "npm run test:jest && npm run test:cypress",
     "test:jest": "jest --coverage",
     "e2e": "concurrently --kill-others --success=first --names 'SERVER,E2E' 'yarn start --progress=false --no-info' 'yarn test:cypress'",
-    "precommit": "flow check",
+    "precommit": "flow check && tsc",
     "postinstall": "preconstruct dev",
     "test:cypress": "yarn test:cypress:chrome && yarn test:cypress:firefox",
     "test:cypress:chrome": "cypress run --browser chrome",

tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "commonjs",
+    "jsx": "react",
+    "noEmit": true,
+    "strict": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  }
+}