Convert project to Typescript

.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint"],
+  extends: ["eslint-config-mitodl", "plugin:@typescript-eslint/recommended"],
+  settings: {
+    react: {
+      version: "16.14.0"
+    }
+  },
+  env: {
+    browser: true,
+    jquery: true,
+    jest: true
+  },
+  rules: {
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { argsIgnorePattern: "_" }
+    ],
+    "mocha/no-top-level-hooks": "off"
+  }
+}

.github/workflows/ci.yml

@@ -163,10 +163,7 @@ jobs:
         run: npm run fmt:check
 
       - name: Scss lint
-        run: npm run scss_lint
-
-      - name: Flow
-        run: npm run flow
+        run: npm run scss_lint:check
 
       - name: Tests
         run: npm run test

.swcrc

@@ -0,0 +1,11 @@
+{
+    "sourceMaps": true,
+    "jsc": {
+      "parser": {
+        "syntax": "typescript",
+        "tsx": true,
+        "decorators": false,
+        "dynamicImport": true
+      }
+    }
+  }

docker-compose.yml

@@ -71,7 +71,7 @@ services:
     extra_hosts: *default-extra-hosts
 
   watch:
-    image: node:15.14.0
+    image: node:17.4.0
     working_dir: /src
     command: >
       /bin/bash -c './webpack_dev_server.sh --install'

jest.config.js

@@ -1,30 +1,16 @@
 module.exports = {
-  setupFilesAfterEnv: ["<rootDir>static/js/test_setup.ts"],
+  setupFilesAfterEnv: [
+    // see https://github.com/ricardo-ch/jest-fail-on-console/issues/4
+    '@testing-library/react-hooks/disable-error-filtering.js',
+    "<rootDir>static/js/test_setup.ts"
+  ],
   cacheDirectory: ".jest-cache",
-  transform: {
-    "^.+\\.tsx?$": "ts-jest",
-    "^.+\\.js$": "babel-jest",
-  },
+  transform: {    "^.+\\.(t|j)sx?$": ["@swc/jest"],  },
   moduleNameMapper: {
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
       "<rootDir>/static/js/mocks/fileMock.js",
     "\\.(css|less)$": "<rootDir>/static/js/mocks/styleMock.js"
   },
-  // this here is a little bit of hackery! we need to mark a few modules in node_modules
-  // not to *ignore* them but actually to include them in the transform. Jest doesn't have
-  // a transformIncludePattern option, so this is how they recommend you explicitly include
-  // code in node_modules. We need to do this because CKEditor code is distributed as ES6
-  // modules with some webpack-specific syntax in it. This will ensure it gets transpiled
-  // with Babel (this is cached between test runs so it doesn't have too much performance
-  // overhead. See here for some details:
-  // https://jestjs.io/docs/en/tutorial-react-native#transformignorepatterns-customization
-  transformIgnorePatterns: [
-    "/node_modules/(?!(" +
-      "@ckeditor/*" +
-      "|ckeditor5/*" +
-      "|lodash-es" +
-      ")/)"
-  ],
   testPathIgnorePatterns: ["<rootDir>/staticfiles/", "<rootDir>/node_modules/"],
   testEnvironment: "jsdom"
-}
+}

package.json

@@ -22,10 +22,42 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.0.0",
     "@fancyapps/fancybox": "^3.5.7",
+    "@khanacademy/flow-to-ts": "^0.5.2",
     "@material/layout-grid": "^0.41.0",
     "@material/top-app-bar": "^1.1.1",
     "@sentry/browser": "^6.13.2",
+    "@swc/core": "^1.2.127",
+    "@swc/jest": "^0.2.15",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/react-hooks": "^7.0.2",
     "@trust/webcrypto": "^0.9.2",
+    "@types/chai": "^4.3.0",
+    "@types/chai-as-promised": "^7.1.4",
+    "@types/enzyme": "^3.10.10",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/fetch-mock": "^7.3.5",
+    "@types/history": "^4.7.9",
+    "@types/isomorphic-fetch": "^0.0.35",
+    "@types/jest": "^27.4.0",
+    "@types/js-cookie": "^3.0.1",
+    "@types/lodash": "^4.14.178",
+    "@types/ramda": "^0.27.60",
+    "@types/react": "16.14.0",
+    "@types/react-document-title": "^2.0.5",
+    "@types/react-dom": "^17.0.11",
+    "@types/react-google-recaptcha": "^2.1.3",
+    "@types/react-redux": "^7.1.20",
+    "@types/react-router": "^5.1.17",
+    "@types/react-router-dom": "^5.3.2",
+    "@types/redux-logger": "^3.0.9",
+    "@types/sanctuary": "^3.0.3",
+    "@types/sinon": "^10.0.6",
+    "@types/styled-components": "^5.1.21",
+    "@types/url-join": "^4.0.1",
+    "@types/webpack-env": "^1.16.3",
+    "@typescript-eslint/eslint-plugin": "^5.9.0",
+    "@typescript-eslint/parser": "^5.9.0",
     "autoprefixer": "^9.7.3",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.5",
@@ -38,106 +70,119 @@
     "css-loader": "^3.1.0",
     "decimal.js-light": "^2.5.0",
     "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.12.1",
-    "eslint": "^6.8.0",
+    "enzyme-adapter-react-16": "^1.15.6",
+    "eslint": "~7",
     "eslint-config-google": "^0.9.1",
     "eslint-config-mitodl": "^0.0.7",
-    "eslint-plugin-babel": "^5.3.0",
+    "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-flow-vars": "^0.5.0",
-    "eslint-plugin-flowtype": "^4.7.0",
+    "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-mocha": "^6.3.0",
-    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react": "^7.28.0",
     "expose-loader": "^0.7.5",
     "express": "^4.15.3",
     "fetch-mock": "^5.12.1",
-    "flow": "^0.2.3",
-    "flow-bin": "^0.95.1",
-    "flow-typed": "^3.2.1",
     "formik": "^1.5.1",
     "history": "^4.6.3",
     "isomorphic-fetch": "^2.2.1",
+    "jest": "^27.4.7",
+    "jest-fail-on-console": "^2.1.1",
+    "jest-location-mock": "^1.0.9",
     "jquery": "^3.5.1",
+    "js-cookie": "^3.0.1",
     "jsdom": "^16.2.2",
     "lodash": "^4.17.21",
     "mini-css-extract-plugin": "^0.5.0",
     "minimist": "^1.2.5",
     "mocha": "^4.0.1",
     "moment": "^2.29.1",
     "moment-timezone": "^0.5.33",
-    "named-urls": "^1.4.0",
-    "node-gyp": "^5.0.3",
-    "node-sass": "^4.14.1",
+    "named-urls": "2.0.1",
     "nyc": "^15.1.0",
-    "object.entries": "^1.0.4",
     "postcss-loader": "^2.0.6",
-    "prettier-eslint": "^9.0.1",
-    "prettier-eslint-cli": "^5.0.0",
+    "prettier-eslint": "^13.0.0",
+    "prettier-eslint-cli": "latest",
+    "prettier-plugin-organize-imports": "^2.3.4",
     "prop-types": "^15.5.10",
     "query-string": "^6.4.0",
     "raf": "^3.4.1",
     "ramda": "^0.26.1",
-    "react": "^16.8.4",
-    "react-addons-shallow-compare": "^15.6.0",
+    "react": "16.14.0",
     "react-day-picker": "^7.3.0",
     "react-device-detect": "^1.17.0",
     "react-document-title": "^2.0.3",
-    "react-dom": "^16.8.4",
+    "react-dom": "16.14.0",
     "react-ga": "^2.2.0",
     "react-google-recaptcha": "^1.0.5",
     "react-hot-loader": "^4.8.0",
     "react-markdown": "^5.0.3",
     "react-picky": "^4.2.0",
-    "react-redux": "^5.0.5",
-    "react-router": "^4.1.1",
-    "react-router-dom": "^4.1.1",
+    "react-redux": "^7.2.6",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
     "react-select": "^3.0.4",
-    "react-test-renderer": "^16.8.4",
+    "react-use": "^17.3.2",
     "react-zendesk": "^0.1.5",
     "reactstrap": "^8.0.0",
-    "redux": "^3.7.2",
+    "redux": "^4.1.2",
     "redux-actions": "^2.2.1",
     "redux-asserts": "^0.0.10",
     "redux-logger": "^3.0.6",
-    "redux-query": "^2.3.1",
+    "redux-query": "^3.4.2",
+    "redux-query-interface-superagent": "^3.4.2",
+    "redux-query-react": "^3.4.2",
     "reselect": "^4.0.0",
     "sanctuary": "^0.13.2",
-    "sass-lint": "^1.13.1",
-    "sass-loader": "^8.0.2",
+    "sass": "^1.49.7",
+    "sass-loader": "^12.4.0",
     "serialize-javascript": "^3.1.0",
     "shelljs": "^0.8.3",
-    "sinon": "^4.1.3",
+    "sinon": "^12.0.1",
     "style-loader": "^0.18.2",
     "styled-components": "^4.2.0",
+    "stylelint": "^14.3.0",
+    "stylelint-config-prettier-scss": "^0.0.1",
+    "stylelint-config-standard-scss": "^3.0.0",
+    "swc-loader": "^0.1.15",
+    "ts-migrate": "^0.1.26",
+    "typescript": "^4.5.3",
     "unzipper": "^0.10.1",
     "url-join": "^4.0.0",
     "url-loader": "^4.1.0",
     "validator": "^13.7.0",
     "video.js": "^7.0.3",
     "videojs-youtube": "^2.6.1",
     "waait": "^1.0.4",
-    "webpack": "^4.42.1",
-    "webpack-bundle-tracker": "^0.4.3",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-middleware": "^3.6.1",
-    "webpack-hot-middleware": "^2.24.3",
-    "yup": "^0.31.0"
+    "webpack": "^5.65.0",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-bundle-tracker": "^1.4.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-middleware": "^5.3.0",
+    "webpack-hot-middleware": "^2.25.1",
+    "yup": "0.32.11"
   },
   "engines": {
     "node": "15.14.0"
   },
   "scripts": {
-    "postinstall": "./webpack_if_prod.sh",
-    "lint": "node ./node_modules/eslint/bin/eslint.js ./static/js",
-    "scss_lint": "node ./node_modules/sass-lint/bin/sass-lint.js --verbose --no-exit",
-    "test": "./scripts/test/js_test.sh",
-    "coverage": "COVERAGE=1 ./scripts/test/js_test.sh",
-    "codecov": "CODECOV=1 ./scripts/test/js_test.sh",
-    "watch": "WATCH=1 ./scripts/test/js_test.sh",
+    "lint": "eslint static/js --ext .js,.jsx,.ts,.tsx",
+    "lint:cache": "eslint static/js --ext .js,.jsx,.ts,.tsx --cache",
+    "scss_lint": "npx stylelint --fix 'static/scss/**/*.scss'",
+    "scss_lint:check": "npx stylelint 'static/scss/**/*.scss'",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
     "repl": "node --require ./scripts/repl.js",
-    "flow": "flow check",
-    "fmt": "LOG_LEVEL= prettier-eslint --write --no-semi --ignore 'static/js/flow/**/*.js' $PWD/'static/js/**/*.js'",
-    "fmt:check": "LOG_LEVEL= prettier-eslint --list-different --no-semi --ignore 'static/js/flow/**/*.js' $PWD/'static/js/**/*.js'"
+    "fmt": "LOG_LEVEL= prettier-eslint --write --no-semi --ignore $PWD/'static/js/types/*.d.ts' $PWD/'static/js/**/*.ts' $PWD/'static/js/**/*.tsx' $PWD/'static/scss/**/*.scss'",
+    "fmt:check": "LOG_LEVEL= prettier-eslint --list-different --no-semi --ignore $PWD/'static/js/types/*.d.ts' $PWD/'static/js/**/*.ts' $PWD/'static/js/**/*.tsx' $PWD/'static/scss/**/*.scss'",
+    "typescript": "rm -rf dist && rm -f .tsbuildinfo && tsc",
+    "typecheck": "tsc --noEmit",
+    "typecheck:watch": "tsc --noEmit --watch",
+    "build": "webpack --config webpack.config.prod.js --bail"
   },
+  "browserslist": [
+    "> 1%"
+  ],
   "resolutions": {
     "mixin-deep": "^1.3.2",
     "set-value": "^2.0.1",

postcss.config.js

@@ -1,7 +1,5 @@
 module.exports = {
   plugins: [
-    require('autoprefixer')({
-      browsers: ['> 1%']
-    })
+    require('autoprefixer')()
   ]
 }