Basic setup of TS, eslint for TS. Fix related linter errors

iterative · Mar 24, 2020 · 0b1d948 · 0b1d948
1 parent 1776024
commit 0b1d948
Show file tree

Hide file tree

Showing 16 changed files with 344 additions and 76 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,12 +1,18 @@
 {
   "extends": [
-    "eslint:recommended",
-    "plugin:prettier/recommended",
     "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier/@typescript-eslint",
+    "plugin:prettier/recommended",
     "plugin:jsx-a11y/recommended",
     "plugin:json/recommended"
   ],
-  "parser": "babel-eslint",
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true // Allows for the parsing of JSX
+    }
+  },
   "env": {
     "browser": true,
     "jest": true
@@ -21,6 +27,13 @@
       "error",
       { "code": 80, "ignoreTemplateLiterals": true, "ignoreUrls": true }
     ],
-    "no-tabs": "error"
+    "@typescript-eslint/interface-name-prefix": [
+      "error",
+      { "prefixWithI": "always" }
+    ],
+    "no-tabs": "error",
+    // TODO: remove after rewriting code to TS
+    "@typescript-eslint/explicit-function-return-type": "warn",
+    "@typescript-eslint/no-var-requires": "warn"
   }
 }
diff --git a/.tmp-empty-package/index.d.ts b/.tmp-empty-package/index.d.ts
diff --git a/.tmp-empty-package/package.json b/.tmp-empty-package/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "empty-package",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT"
+}
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -21,6 +21,13 @@ const keywords = [
 ]
 
 const plugins = [
+  {
+    resolve: `gatsby-plugin-typescript`,
+    options: {
+      isTSX: true,
+      allExtensions: true
+    }
+  },
   {
     resolve: 'gatsby-source-filesystem',
     options: {
@@ -58,13 +65,15 @@ const plugins = [
   {
     resolve: 'gatsby-plugin-manifest',
     options: {
+      /* eslint-disable @typescript-eslint/camelcase */
       background_color: '#eff4f8',
       display: 'minimal-ui',
       icon: 'static/favicon-512x512.png',
       name: 'dvc.org',
       short_name: 'dvc.org',
       start_url: '/',
       theme_color: '#eff4f8'
+      /* eslint-enable @typescript-eslint/camelcase */
     }
   },
   'gatsby-plugin-react-helmet',

diff --git a/middleware/api/discourse.js b/middleware/api/discourse.js
@@ -32,10 +32,10 @@ module.exports = async (_, res) => {
     const data = await response.text()
 
     const {
-      topic_list: { topics: original_topics }
+      topic_list: { topics: originalTopics }
     } = JSON.parse(data)
 
-    const topics = original_topics.slice(0, 3).map(item => ({
+    const topics = originalTopics.slice(0, 3).map(item => ({
       title: item.title,
       comments: item.posts_count - 1,
       date: item.last_posted_at,

diff --git a/middleware/redirects/index.js b/middleware/redirects/index.js
@@ -11,19 +11,20 @@ module.exports = (req, res, next) => {
   const { pathname, query } = parsedUrl
   const host = req.headers.host
 
-  let [redirectCode, redirectLocation] = getRedirect(host, pathname, {
+  const redirect = getRedirect(host, pathname, {
     req,
     dev
   })
 
-  if (redirectLocation) {
+  if (redirect.redirectLocation) {
     // HTTP redirects
+    let redirectLocation = redirect.redirectLocation
 
     const queryStr = stringify(query)
     if (queryStr) {
       redirectLocation += '?' + queryStr
     }
-    res.writeHead(redirectCode, {
+    res.writeHead(redirect.redirectCode, {
       Location: redirectLocation
     })
 

diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "start": "./scripts/clear-cloudflare-cache.js; NODE_ENV=production node server.js",
     "format-staged": "pretty-quick --staged --no-restage --bail",
     "format-check": "prettier --check '{.,pages/**,content/docs/**,src/**}/*.{js,md,json}'",
-    "lint-check": "eslint --ext .json,.js src middleware",
+    "lint-check": "tsc --noEmit && eslint --ext .json,.js,.ts,.tsx src middleware --quiet",
     "format-all": "prettier --write '{.,pages/**,content/docs/**,src/**}/*.{js,md,json}'",
     "format": "prettier --write",
     "link-check": "scripts/link-check-git-all.sh",
@@ -31,6 +31,7 @@
     "@octokit/graphql": "^4.3.1",
     "@reach/router": "^1.3.1",
     "@sentry/browser": "^5.12.1",
+    "@types/styled-components": "^5.0.1",
     "color": "^3.1.2",
     "compression": "^1.7.4",
     "date-fns": "^2.8.1",
@@ -39,6 +40,7 @@
     "express": "^4.17.1",
     "gatsby": "^2.20.2",
     "gatsby-link": "^2.3.0",
+    "gatsby-plugin-typescript": "^2.2.5",
     "gatsby-plugin-webpack-bundle-analyzer": "^1.0.5",
     "github-markdown-css": "^3.0.1",
     "isomorphic-fetch": "^2.2.1",
@@ -56,7 +58,7 @@
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-collapse": "^5.0.1",
-    "react-collapsible": "^2.6.2",
+    "react-collapsible": "^2.7.0",
     "react-dom": "^16.12.0",
     "react-ga": "^2.7.0",
     "react-helmet": "^5.2.1",
@@ -71,10 +73,13 @@
     "slick-carousel": "^1.8.1",
     "styled-components": "^4.4.1",
     "styled-reset": "^4.0.8",
-    "unist-util-visit": "2.0.1"
+    "unist-util-visit": "2.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.7.7",
+    "@types/vfile-message": "^1.0.1",
+    "@typescript-eslint/eslint-plugin": "^2.24.0",
+    "@typescript-eslint/parser": "^2.24.0",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
     "babel-plugin-styled-components": "^1.10.7",
@@ -99,19 +104,23 @@
     "gatsby-remark-prismjs": "^3.3.31",
     "gatsby-remark-smartypants": "^2.1.21",
     "gatsby-source-filesystem": "^2.1.48",
-    "gatsby-transformer-remark": "^2.6.53",
+    "gatsby-transformer-remark": "^2.6.59",
     "husky": "^4.0.10",
     "jest": "^24.9.0",
     "lint-staged": "^10.0.0",
     "prettier": "^1.19.1",
-    "pretty-quick": "^2.0.1"
+    "pretty-quick": "^2.0.1",
+    "typescript": "^3.8.3"
+  },
+  "resolutions": {
+    "@types/react-native": "link:./.tmp-empty-package"
   },
   "husky": {
     "hooks": {
-      "pre-commit": "yarn format-staged && yarn lint-staged"
+      "pre-commit": "yarn format-staged && tsc --noEmit && yarn lint-staged"
     }
   },
   "lint-staged": {
-    "*.{js,json}": "eslint"
+    "*.{js,json,ts,tsx}": "eslint --quiet"
   }
 }
diff --git a/src/components/Documentation/Markdown/lang/dvc.js b/src/components/Documentation/Markdown/lang/dvc.js
@@ -1,17 +1,16 @@
 /* global exports:readonly */
-
 'use strict'
 
 Object.defineProperty(exports, '__esModule', {
   value: true
 })
 
-let _javascript = function(hljs) {
-  let VAR = {
+const lang = function(hljs) {
+  const VAR = {
     className: 'variable',
     variants: [{ begin: /\$[\w\d#@][\w\d_]*/ }, { begin: /\$\{(.*?)}/ }]
   }
-  let QUOTE_STRING = {
+  const QUOTE_STRING = {
     className: 'string',
     begin: /"/,
     end: /"/,
@@ -26,7 +25,7 @@ let _javascript = function(hljs) {
       }
     ]
   }
-  let APOS_STRING = {
+  const APOS_STRING = {
     className: 'string',
     begin: /'/,
     end: /'/
@@ -66,6 +65,7 @@ let _javascript = function(hljs) {
                 begin: /dvc [a-z-]+/,
                 lexemes: '[a-z-]+',
                 keywords: {
+                  // eslint-disable-next-line @typescript-eslint/camelcase
                   built_in:
                     'help dvc init add import-url checkout run pull push ' +
                     'fetch status repro remove move gc config remote metrics ' +
@@ -100,10 +100,8 @@ let _javascript = function(hljs) {
   }
 }
 
-let _javascript2 = _interopRequireDefault(_javascript)
-
-function _interopRequireDefault(obj) {
+function interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : { default: obj }
 }
 
-exports.default = _javascript2.default
+exports.default = interopRequireDefault(lang).default
diff --git a/src/components/Documentation/Markdown/lang/usage.js b/src/components/Documentation/Markdown/lang/usage.js
@@ -6,8 +6,8 @@ Object.defineProperty(exports, '__esModule', {
   value: true
 })
 
-var _javascript = function(hljs) {
-  var QUOTE_STRING = {
+const lang = function(hljs) {
+  const QUOTE_STRING = {
     className: 'string',
     begin: /"/,
     end: /"/,
@@ -37,6 +37,7 @@ var _javascript = function(hljs) {
             begin: / dvc [a-z-]+/,
             lexemes: '[a-z-]+',
             keywords: {
+              // eslint-disable-next-line @typescript-eslint/camelcase
               built_in:
                 'help dvc init add checkout run pull push fetch status repro ' +
                 'remove move gc config remote metrics install root lock ' +
@@ -54,10 +55,8 @@ var _javascript = function(hljs) {
   }
 }
 
-var _javascript2 = _interopRequireDefault(_javascript)
-
-function _interopRequireDefault(obj) {
+function interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : { default: obj }
 }
 
-exports.default = _javascript2.default
+exports.default = interopRequireDefault(lang).default
diff --git a/src/components/GithubLine/index.js b/src/components/GithubLine/index.js
@@ -11,7 +11,7 @@ export default function GithubLine() {
 
   useEffect(() => {
     fetch(api).then(res => {
-      res.json().then(({ stargazers_count }) => setCount(stargazers_count))
+      res.json().then(data => setCount(data.stargazers_count))
     })
   }, [count, setCount])
 

diff --git a/src/components/LearnMore/styles.js b/src/components/LearnMore/styles.js
@@ -24,7 +24,7 @@ export const bounce = keyframes`
   }
 `
 
-export const bounce_mobile = keyframes`
+export const bounceMobile = keyframes`
   0%, 30%, 50%, 70%, 100% {
     transform: translateY(0);
   }
@@ -44,8 +44,8 @@ export const Icon = styled.div`
   will-change: transform;
   animation: ${bounce} 3s infinite;
 
-  ${media.phone`animation: ${bounce_mobile} 3s infinite;`};
-  ${media.phablet`animation: ${bounce_mobile} 3s infinite;`};
+  ${media.phone`animation: ${bounceMobile} 3s infinite;`};
+  ${media.phablet`animation: ${bounceMobile} 3s infinite;`};
 `
 
 export const Caption = styled.p`

diff --git a/src/components/Video/index.js b/src/components/Video/index.js
@@ -52,11 +52,8 @@ export default class Video extends Component {
   watch = () => {
     logEvent('button', 'video')
     this.setState({ watching: true })
-    this.play()
   }
 
-  play = () => {}
-
   onPause = () => {
     this.setState({ watching: false })
   }

diff --git a/src/typings.ts b/src/typings.ts
@@ -0,0 +1,23 @@
+declare module '*.png' {
+  type IPNG = string
+
+  const png: IPNG
+  export = png
+}
+
+declare module '*.css' {
+  interface IClassNames {
+    [className: string]: string
+  }
+  const classNames: IClassNames
+  export = classNames
+}
+
+declare module '*.svg' {
+  interface IReactSVGR {
+    default: string
+    ReactComponent: React.StatelessComponent<React.SVGAttributes<SVGElement>>
+  }
+  const svg: IReactSVGR
+  export = svg
+}
diff --git a/src/utils/redirects.js b/src/utils/redirects.js
@@ -3,15 +3,15 @@
 let redirects = require('../../redirects-list.json')
 
 const processRedirectString = redirectString => {
-  let [regex, replace, code = 301] = redirectString.split(/\s+/g)
-  const matchPathname = /^\^?\//.test(regex)
-  regex = new RegExp(regex)
-  code = Number(code)
+  const redirectParts = redirectString.split(/\s+/g)
+  const matchPathname = /^\^?\//.test(redirectParts[0])
+  const regex = new RegExp(redirectParts[0])
+
   return {
     regex,
     matchPathname,
-    replace,
-    code
+    replace: redirectParts[1],
+    code: Number(redirectParts[2] || 301)
   }
 }
 

diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "lib": ["dom", "es2015", "es2017"],
+    "jsx": "react",
+    "sourceMap": true,
+    "strict": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "allowSyntheticDefaultImports": true,
+    "allowJs": true
+  },
+  "include": ["./src/**/*", "./middleware/**/*", "./*.js"]
+}