TypeScript: toolchain (#2043)

* initial TS support

* install some @types, local typings / overrides

* use polyfill.io for all polyfilling needs

* ditch obsolete scripts and generators

* ditch babel

.circleci/config.yml

@@ -171,7 +171,7 @@ jobs:
   test-catalog:
     executor:
       name: node/default
-      tag: "15.4"
+      tag: "current"
     steps:
       - checkout
       - node/install-packages:

catalog/.eslintrc.js

@@ -1,36 +1,33 @@
-const prettierOptions = require('./.prettierrc')
-
 module.exports = {
-  parser: 'babel-eslint',
-  extends: ['airbnb', 'prettier', 'prettier/react'],
-  plugins: ['prettier', 'redux-saga', 'react', 'react-hooks', 'jsx-a11y'],
+  parser: '@typescript-eslint/parser',
+  extends: [
+    'airbnb-typescript',
+    'prettier',
+    'prettier/react',
+    'prettier/@typescript-eslint',
+  ],
+  plugins: ['@typescript-eslint', 'redux-saga', 'react', 'react-hooks', 'jsx-a11y'],
   env: {
     jest: true,
     browser: true,
     node: true,
     es6: true,
   },
   parserOptions: {
-    ecmaVersion: 6,
-    sourceType: 'module',
-    ecmaFeatures: {
-      jsx: true,
-    },
+    project: './tsconfig.json',
   },
   rules: {
-    'prettier/prettier': [2, prettierOptions],
+    '@typescript-eslint/no-use-before-define': 0,
+    // TODO: try removing this after ts migration
+    '@typescript-eslint/no-throw-literal': 0,
     'arrow-body-style': [2, 'as-needed'],
     'class-methods-use-this': 0,
-    'import/imports-first': 0,
-    'import/newline-after-import': 0,
-    'import/no-dynamic-require': 0,
     'import/no-extraneous-dependencies': 0,
     'import/no-named-as-default': 0,
     'import/no-unresolved': 2,
     'import/no-webpack-loader-syntax': 0,
     'import/prefer-default-export': 0,
     'jsx-a11y/aria-props': 2,
-    'jsx-a11y/heading-has-content': 0,
     'jsx-a11y/label-has-associated-control': [
       2,
       {
@@ -40,46 +37,35 @@ module.exports = {
         controlComponents: ['Input'],
       },
     ],
-    'jsx-a11y/label-has-for': 0,
     'jsx-a11y/mouse-events-have-key-events': 2,
     'jsx-a11y/role-has-required-aria-props': 2,
     'jsx-a11y/role-supports-aria-props': 2,
     'max-classes-per-file': 0,
-    'max-len': 0,
-    'newline-per-chained-call': 0,
-    'no-confusing-arrow': 0,
     'no-console': 2,
     'no-nested-ternary': 1,
     'no-underscore-dangle': [2, { allow: ['_', '__'] }],
-    'no-unused-vars': 2,
-    'no-use-before-define': 0,
     'prefer-arrow-callback': [2, { allowNamedFunctions: true }],
     'prefer-template': 2,
     'react-hooks/exhaustive-deps': 2,
     'react-hooks/rules-of-hooks': 2,
     'react/destructuring-assignment': 0,
-    'react/forbid-prop-types': 0,
-    'react/jsx-closing-tag-location': 0,
-    'react/jsx-curly-brace-presence': 0,
+    // TODO: rm after migrating to ts
     'react/jsx-filename-extension': 0,
     'react/jsx-first-prop-new-line': [2, 'multiline'],
-    'react/jsx-no-target-blank': 0,
     'react/jsx-props-no-spreading': 0,
     'react/jsx-uses-vars': 2,
+    // TODO: rm after migrating to ts
     'react/prop-types': 0,
+    // TODO: rm after migrating to ts
     'react/require-default-props': 0,
-    'react/require-extension': 0,
-    'react/self-closing-comp': 0,
-    'react/sort-comp': 0,
     'react/static-property-placement': [2, 'static public field'],
     'redux-saga/no-yield-in-race': 2,
     'redux-saga/yield-effects': 2,
-    'require-yield': 0,
   },
   settings: {
     'import/resolver': {
       webpack: {
-        config: './internals/webpack/webpack.prod.babel.js',
+        config: './internals/webpack/webpack.prod.js',
       },
     },
   },

catalog/app/@types/index.d.ts

@@ -0,0 +1,6 @@
+declare module '*.png' {
+  const value: string
+  export default value
+}
+
+declare module 'intl/locale-data/jsonp/*'

catalog/app/@types/mui.d.ts

@@ -0,0 +1,9 @@
+import '@material-ui/core'
+
+declare module '@material-ui/core' {
+  // workaround for MUI@4 not having ref in BoxProps
+  // https://github.com/mui-org/material-ui/issues/17010
+  interface BoxProps {
+    ref?: React.Ref<any>
+  }
+}

catalog/app/app.js

@@ -1,7 +1,4 @@
 /* app.js - application entry point */
-// Needed for redux-saga es6 generator support
-import '@babel/polyfill'
-
 /* eslint-disable import/first */
 
 // Import all the third party stuff
@@ -169,19 +166,4 @@ if (module.hot) {
 }
 */
 
-const polyfills = []
-
-// Chunked polyfill for browsers without Intl support
-if (!window.Intl)
-  polyfills.push(
-    import('intl').then(() => Promise.all([import('intl/locale-data/jsonp/en.js')])),
-  )
-
-if (!window.ResizeObserver)
-  polyfills.push(
-    import('resize-observer-polyfill').then(({ default: RO }) => {
-      window.ResizeObserver = RO
-    }),
-  )
-
-Promise.all(polyfills).then(() => render(translationMessages))
+render(translationMessages)

catalog/app/components/JsonEditor/State.js

@@ -146,7 +146,7 @@ function objToDict(obj, parentPath, memo) {
       memo[serializeAddress(address)] = obj[key]
 
       // weird eslint bug?
-      // eslint-disable-next-line no-unused-vars
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       objToDict(obj[key], address, memo)
     })
     return memo

catalog/app/components/Preview/renderers/Vega.js

@@ -3,8 +3,10 @@ import PT from 'prop-types'
 import * as React from 'react'
 import embed from 'vega-embed'
 
+// TODO: refactor to use hooks
 class Vega extends React.Component {
   static propTypes = {
+    // eslint-disable-next-line react/forbid-prop-types
     spec: PT.object.isRequired,
   }
 

catalog/app/containers/Search/Search.js

@@ -162,9 +162,7 @@ function BucketSelectDropdown({ buckets, onChange, short = false }) {
   return (
     <>
       <button type="button" onClick={state.edit} className={classes.btn} ref={anchorRef}>
-        <span>
-          {short ? <>{'s3://'}&hellip;</> : displaySelectedBuckets(state.value)}
-        </span>
+        <span>{short ? <>s3://&hellip;</> : displaySelectedBuckets(state.value)}</span>
         <M.Icon fontSize="inherit">expand_more</M.Icon>
       </button>
       <M.Menu

catalog/app/embed/debug-harness.js

@@ -1,7 +1,4 @@
 /* embed/debug-harness.js - debug tool for embedded browser */
-// Needed for redux-saga es6 generator support
-import '@babel/polyfill'
-
 import * as React from 'react'
 import ReactDOM from 'react-dom'
 import * as M from '@material-ui/core'
@@ -205,21 +202,4 @@ function App({ messages }) {
   )
 }
 
-const polyfills = []
-
-// Chunked polyfill for browsers without Intl support
-if (!window.Intl)
-  polyfills.push(
-    import('intl').then(() => Promise.all([import('intl/locale-data/jsonp/en.js')])),
-  )
-
-if (!window.ResizeObserver)
-  polyfills.push(
-    import('resize-observer-polyfill').then(({ default: RO }) => {
-      window.ResizeObserver = RO
-    }),
-  )
-
-Promise.all(polyfills).then(() => {
-  ReactDOM.render(<App messages={translationMessages} />, document.getElementById('app'))
-})
+ReactDOM.render(<App messages={translationMessages} />, document.getElementById('app'))

catalog/app/embed/index.js

@@ -1,32 +1,9 @@
 /* embed/index.js - embedded browser entry point */
-// Needed for redux-saga es6 generator support
-import '@babel/polyfill'
-
 import * as React from 'react'
 import ReactDOM from 'react-dom'
 
 import { translationMessages } from '../i18n'
 
 import Embed from './Embed'
 
-const polyfills = []
-
-// Chunked polyfill for browsers without Intl support
-if (!window.Intl)
-  polyfills.push(
-    import('intl').then(() => Promise.all([import('intl/locale-data/jsonp/en.js')])),
-  )
-
-if (!window.ResizeObserver)
-  polyfills.push(
-    import('resize-observer-polyfill').then(({ default: RO }) => {
-      window.ResizeObserver = RO
-    }),
-  )
-
-Promise.all(polyfills).then(() => {
-  ReactDOM.render(
-    <Embed messages={translationMessages} />,
-    document.getElementById('app'),
-  )
-})
+ReactDOM.render(<Embed messages={translationMessages} />, document.getElementById('app'))

catalog/app/index.html

@@ -26,6 +26,7 @@
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <!-- styles for Jupyter Notebooks -->
     <link href="/ipynb.css" rel="stylesheet">
+    <script src="https://polyfill.io/v3/polyfill.min.js?features=Intl%2Cdefault%2CResizeObserver%2CBlob%2Cfetch%2Ces2016%2Ces2017%2Ces2018%2Ces2019%2Ces2015"></script>
   </head>
   <body>
     <!--[if lte IE 10]>