chore: Move to Typescript (outline#2783)

This PR moves the entire project to Typescript. Due to the ~1000 ignores this will lead to a messy codebase for a while, but the churn is worth it – all of those ignore comments are places that were never type-safe previously.

closes outline#1282

Author: tommoor

.babelrc

@@ -1,7 +1,7 @@
 {
   "presets": [
     "@babel/preset-react",
-    "@babel/preset-flow",
+    "@babel/preset-typescript",
     [
       "@babel/preset-env",
       {

.circleci/config.yml

@@ -41,8 +41,8 @@ jobs:
           name: lint
           command: yarn lint
       - run:
-          name: flow
-          command: yarn flow check --max-workers 4
+          name: typescript
+          command: yarn tsc
       - run:
           name: test
           command: yarn test

.dockerignore

@@ -6,14 +6,13 @@ __mocks__
 .DS_Store
 .env*
 .eslint*
-.flowconfig
 .log
 Makefile
 Procfile
 app.json
+crowdin.yml
 build
 docker-compose.yml
 fakes3
-flow-typed
 node_modules
-setupJest.js
+tsconfig.json

.eslintrc

@@ -1,20 +1,34 @@
 {
-  "parser": "babel-eslint",
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "sourceType": "module",
+    "extraFileExtensions": [".json"],
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
   "extends": [
-    "react-app",
-    "plugin:import/errors",
-    "plugin:import/warnings",
-    "plugin:flowtype/recommended",
-    "plugin:react-hooks/recommended"
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended"
   ],
   "plugins": [
-    "prettier",
-    "flowtype"
+    "@typescript-eslint",
+    "eslint-plugin-import",
+    "eslint-plugin-node",
+    "eslint-plugin-react",
+    "eslint-plugin-react-hooks",
+    "import"
   ],
   "rules": {
     "eqeqeq": 2,
-    "no-unused-vars": 2,
     "no-mixed-operators": "off",
+    "padding-line-between-statements": ["error", { "blankLine": "always", "prev": "*", "next": "export" }],
+    "lines-between-class-members": ["error", "always", { "exceptAfterSingleLine": true }],
+    "import/newline-after-import": 2,
     "import/order": [
       "error",
       {
@@ -23,53 +37,48 @@
         },
         "pathGroups": [
           {
-            "pattern": "shared/**",
+            "pattern": "@shared/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "@server/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "~/stores",
             "group": "external",
             "position": "after"
           },
           {
-            "pattern": "stores",
+            "pattern": "~/stores/**",
             "group": "external",
             "position": "after"
           },
           {
-            "pattern": "stores/**",
+            "pattern": "~/models/**",
             "group": "external",
             "position": "after"
           },
           {
-            "pattern": "models/**",
+            "pattern": "~/scenes/**",
             "group": "external",
             "position": "after"
           },
           {
-            "pattern": "scenes/**",
+            "pattern": "~/components/**",
             "group": "external",
             "position": "after"
           },
           {
-            "pattern": "components/**",
+            "pattern": "~/**",
             "group": "external",
             "position": "after"
           }
         ]
       }
     ],
-    "flowtype/require-valid-file-annotation": [
-      2,
-      "always",
-      {
-        "annotationStyle": "line"
-      }
-    ],
-    "flowtype/space-after-type-colon": [
-      2,
-      "always"
-    ],
-    "flowtype/space-before-type-colon": [
-      2,
-      "never"
-    ],
     "prettier/prettier": [
       "error",
       {
@@ -84,21 +93,13 @@
       "pragma": "React",
       "version": "detect"
     },
-    "import/resolver": {
-      "node": {
-        "paths": [
-          "app",
-          "."
-        ]
-      }
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
     },
-    "flowtype": {
-      "onlyFilesWithFlowAnnotation": false
+    "import/resolver": {
+      "typescript": {}
     }
   },
-  "env": {
-    "jest": true
-  },
   "globals": {
     "EDITOR_VERSION": true
   }

.flowconfig

@@ -1,7 +1,7 @@
 {
-  "javascript.validate.enable": false,
-  "javascript.format.enable": false,
-  "typescript.validate.enable": false,
-  "typescript.format.enable": false,
+  "javascript.validate.enable": true,
+  "javascript.format.enable": true,
+  "typescript.validate.enable": true,
+  "typescript.format.enable": true,
   "editor.formatOnSave": true,
 }

.vscode/settings.json

@@ -8,9 +8,10 @@
 </p>
 <p align="center">
   <a href="https://circleci.com/gh/outline/outline" rel="nofollow"><img src="https://circleci.com/gh/outline/outline.svg?style=shield&amp;circle-token=c0c4c2f39990e277385d5c1ae96169c409eb887a"></a>
-  <a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat"></a>
-  <a href="https://github.com/styled-components/styled-components"><img src="https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg"></a>
-  <a href="https://translate.getoutline.com/project/outline"><img src="https://badges.crowdin.net/outline/localized.svg"></a>
+  <a href="http://www.typescriptlang.org" rel="nofollow"><img src="https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg" alt="TypeScript"></a>
+  <a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat" alt="Prettier"></a>
+  <a href="https://github.com/styled-components/styled-components"><img src="https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg" alt="Styled Components"></a>
+  <a href="https://translate.getoutline.com/project/outline" alt="Localized"><img src="https://badges.crowdin.net/outline/localized.svg"></a>
 </p>
 
 This is the source code that runs [**Outline**](https://www.getoutline.com) and all the associated services. If you want to use Outline then you don't need to run this code, we offer a hosted version of the app at [getoutline.com](https://www.getoutline.com).

README.md

@@ -1,4 +1,3 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 export default class Queue {
   name;
 

__mocks__/bull.js

@@ -0,0 +1,9 @@
+{
+  "extends": [
+    "../.eslintrc"
+  ],
+  "env": {
+    "jest": true,
+    "browser": true
+  }
+}

app/.eslintrc

@@ -7,14 +7,10 @@
     "<rootDir>/shared"
   ],
   "moduleNameMapper": {
-    "^shared/(.*)$": "<rootDir>/shared/$1",
+    "^~/(.*)$": "<rootDir>/app/$1",
+    "^@shared/(.*)$": "<rootDir>/shared/$1",
     "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js"
   },
-  "moduleFileExtensions": [
-    "js",
-    "jsx",
-    "json"
-  ],
   "moduleDirectories": [
     "node_modules"
   ],
@@ -25,6 +21,6 @@
     "<rootDir>/__mocks__/window.js"
   ],
   "setupFilesAfterEnv": [
-    "./app/test/setup.js"
+    "./app/test/setup.ts"
   ]
 }