Use TypeScript and other improvements on feature/apollo-pure (#1723)

* update apollo packages

* bye apollo-link-state

* fix: jest error by updating jest

* mod: Make `yarn codegen` always executable

* mod: Take care non-js import in flowconfig

* suppress 'sequelize deprecated String based operators' error

* suppress 'Please use `require("history").PathUtils' error

* refac: make all components functional

* Flow to Typescript  (#13)

* get available port on codegen (#14)

* improve tyeps (#15)

* refactor typings

* remove unnecessary babel plugin

* Type models

* pass `eslint --ext .ts --ext .tsx`

* mod: clear old type defs before codegen

improve eslint defs

* ignore Node12 build

* Sqlite3 is still working on supporting Node12 TryGhost/node-sqlite3#1151

* Fix Node 12 build failure

Author: piglovesyou

.eslintrc.js

@@ -10,18 +10,21 @@
 // ESLint configuration
 // http://eslint.org/docs/user-guide/configuring
 module.exports = {
-  parser: 'babel-eslint',
+  parser: '@typescript-eslint/parser',
 
   extends: [
     'airbnb',
-    'plugin:flowtype/recommended',
     'plugin:css-modules/recommended',
     'prettier',
-    'prettier/flowtype',
     'prettier/react',
   ],
 
-  plugins: ['flowtype', 'css-modules', 'prettier'],
+  plugins: ['@typescript-eslint/eslint-plugin', 'css-modules', 'prettier'],
+
+  parserOptions: {
+    sourceType: 'module',
+    project: './tsconfig.json',
+  },
 
   globals: {
     __DEV__: true,
@@ -51,7 +54,7 @@ module.exports = {
     'no-underscore-dangle': [
       'error',
       {
-        allow: ['__typename'],
+        allow: ['__typename', '__DEV__'],
       },
     ],
 
@@ -87,7 +90,7 @@ module.exports = {
 
     // Allow .js files to use JSX syntax
     // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md
-    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
+    'react/jsx-filename-extension': [1, { extensions: ['.ts', '.tsx'] }],
 
     // Functional and class components are equivalent from React’s point of view
     // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md
@@ -99,8 +102,29 @@ module.exports = {
 
     'react/forbid-prop-types': 'off',
     'react/destructuring-assignment': 'off',
+    // TypeScript types checks prop-types
+    'react/prop-types': 'off',
 
     // PropTypes and states are typed by Flow basically, but Flow cannot type defaultProps.
     'react/require-default-props': 'off',
+
+    // Cannot config .ts, .tsx resolution
+    'import/no-unresolved': 'off',
+
+    'import/no-webpack-loader-syntax': 'off',
+
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        vars: 'local',
+        args: 'after-used',
+        ignoreRestSiblings: false,
+        argsIgnorePattern: '^_',
+      },
+    ],
+
+    // Type variables by Codegen can not be camelcase.
+    camelcase: 'off',
   },
 };

.flowconfig

@@ -14,4 +14,7 @@ module.file_ext=.json
 module.file_ext=.css
 module.file_ext=.scss
 module.file_ext=.graphql
-module.name_mapper='^.*\.graphql$' -> 'empty/object'
+module.name_mapper.extension='json' -> 'empty/object'
+module.name_mapper.extension='css' -> 'empty/object'
+module.name_mapper.extension='scss' -> 'empty/object'
+module.name_mapper.extension='graphql' -> 'empty/object'

.travis.yml

@@ -13,7 +13,6 @@ addons:
       - g++-4.8
 cache: yarn
 script:
-  - yarn codegen
   - yarn lint
   - yarn test
   - yarn build --release

apollo.config.js

@@ -1,14 +1,3 @@
-/**
- * React Starter Kit (https://www.reactstarterkit.com/)
- *
- * Copyright © 2014-present Kriasoft, LLC. All rights reserved.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.txt file in the root directory of this source tree.
- */
-
-// Babel configuration
-// https://babeljs.io/docs/usage/api/
 module.exports = {
   presets: [
     [
@@ -19,8 +8,8 @@ module.exports = {
         },
       },
     ],
-    '@babel/preset-flow',
     '@babel/preset-react',
+    '@babel/preset-typescript',
   ],
   plugins: [
     '@babel/plugin-proposal-class-properties',

babel.config.js

@@ -125,14 +125,13 @@ Navigation.propTypes = { items: PropTypes.array.isRequired };
 
 ```jsx
 // Navigation.js
-// @flow
 import React from 'react';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './Navigation.scss';
 
-type PropTypes = {|
+type PropTypes = {
   className: string,
-|};
+};
 
 function Navigation(props: PropTypes) {
   return (

docs/react-style-guide.md

@@ -5,7 +5,6 @@ https://disqus.com/admin/create/
 #### `DisqusThread.js`
 
 ```js
-// @flow
 import React from 'react';
 
 const SHORTNAME = 'example';
@@ -22,11 +21,11 @@ function renderDisqus() {
   }
 }
 
-class DisqusThread extends React.Component<{|
+class DisqusThread extends React.Component<{
   id: string,
   title: string,
   path: string,
-|}> {
+}> {
   shouldComponentUpdate(nextProps) {
     return (
       this.props.id !== nextProps.id ||