Merge pull request reduxjs#3536 from reduxjs/ts-conversion

[Meta PR] Convert to TypeScript

Co-authored-by: Gregory Beaver <[email protected]>
Co-authored-by: Nick McCurdy <[email protected]>
Co-authored-by: Jed Mao <[email protected]>
Former-commit-id: 3b4f495

Author: 4 people

.babelrc.js

@@ -2,6 +2,7 @@ const { NODE_ENV } = process.env
 
 module.exports = {
   presets: [
+    '@babel/typescript',
     [
       '@babel/env',
       {

.eslintignore

@@ -3,3 +3,5 @@
 **/server.js
 **/webpack.config*.js
 **/flow-typed/**
+# TODO: figure out a way to lint this using flow instead of typescript
+examples/todos-flow

.eslintrc.js

@@ -1,22 +1,34 @@
 module.exports = {
   extends: 'react-app',
 
+  parser: '@typescript-eslint/parser',
+
+  plugins: ['@typescript-eslint'],
+
   settings: {
     react: {
       version: '16.8'
+    },
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx']
+    },
+    'import/resolver': {
+      // use <root>/tsconfig.json
+      typescript: {}
     }
   },
 
   rules: {
-    'jsx-a11y/href-no-hash': 'off'
-  },
-
-  overrides: [
-    {
-      files: 'test/**/*.js',
-      env: {
-        jest: true,
-      },
-    },
-  ],
+    'jsx-a11y/href-no-hash': 'off',
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        vars: 'all',
+        args: 'after-used',
+        ignoreRestSiblings: true,
+        argsIgnorePattern: '^_' // ignore unused variables whose name is '_'
+      }
+    ]
+  }
 }

.gitignore

@@ -1,10 +1,11 @@
-.DS_Store
-*.log
 node_modules
+
+coverage
+
 dist
 lib
 es
-coverage
+types
 
 website/translated_docs
 website/build/

examples/todomvc/src/components/App.spec.js

@@ -4,8 +4,7 @@ import App from './App'
 import Header from '../containers/Header'
 import MainSection from '../containers/MainSection'
 
-
-const setup = propOverrides => {
+const setup = _propOverrides => {
   const renderer = createRenderer()
   renderer.render(<App />)
   const output = renderer.getRenderOutput()
@@ -16,16 +15,16 @@ describe('components', () => {
   describe('Header', () => {
     it('should render', () => {
       const output = setup()
-      const [ header ] = output.props.children
+      const [header] = output.props.children
       expect(header.type).toBe(Header)
     })
   })
-  
+
   describe('Mainsection', () => {
     it('should render', () => {
       const output = setup()
-      const [ , mainSection ] = output.props.children
+      const [, mainSection] = output.props.children
       expect(mainSection.type).toBe(MainSection)
     })
   })
-})
+})

index.d.ts.REMOVED.git-id

@@ -1 +1 @@
-50e8d018faee8887ed82337fcd1993ad07df0968
+aa8ec2ad318f2542aaf407c9112143f8669dba4e

package-lock.json.REMOVED.git-id

@@ -26,26 +26,27 @@
   "main": "lib/redux.js",
   "unpkg": "dist/redux.js",
   "module": "es/redux.js",
-  "typings": "./index.d.ts",
+  "types": "types/index.d.ts",
   "files": [
     "dist",
     "lib",
     "es",
     "src",
-    "index.d.ts"
+    "types"
   ],
   "scripts": {
-    "clean": "rimraf lib dist es coverage",
+    "clean": "rimraf lib dist es coverage types",
     "format": "prettier --write \"{src,test}/**/*.{js,ts}\" index.d.ts \"**/*.md\"",
     "format:check": "prettier --list-different \"{src,test}/**/*.{js,ts}\" index.d.ts \"**/*.md\"",
-    "lint": "eslint src test",
+    "lint": "eslint --ext js,ts src test",
+    "check-types": "tsc --noEmit",
     "pretest": "npm run build",
     "test": "jest",
     "test:watch": "npm test -- --watch",
     "test:cov": "npm test -- --coverage",
     "build": "rollup -c",
-    "prepare": "npm run clean && npm run format:check && npm run lint && npm test",
-    "examples:lint": "eslint examples",
+    "prepare": "npm run clean && npm run check-types && npm run format:check && npm run lint && npm test",
+    "examples:lint": "eslint --ext js,ts examples",
     "examples:test": "cross-env CI=true babel-node examples/testAll.js"
   },
   "dependencies": {
@@ -60,15 +61,18 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.5.4",
     "@babel/preset-env": "^7.5.4",
     "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-typescript": "^7.3.3",
     "@babel/register": "^7.4.4",
-    "@typescript-eslint/eslint-plugin": "^1.11.0",
-    "@typescript-eslint/parser": "^1.11.0",
+    "@types/jest": "^24.0.17",
+    "@typescript-eslint/eslint-plugin": "^1.13.0",
+    "@typescript-eslint/parser": "^1.13.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.2",
     "babel-jest": "^24.8.0",
     "cross-env": "^5.2.0",
     "eslint": "^5.16.0",
     "eslint-config-react-app": "^4.0.1",
+    "eslint-import-resolver-typescript": "^1.1.1",
     "eslint-plugin-flowtype": "^2.50.3",
     "eslint-plugin-import": "^2.18.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
@@ -83,6 +87,7 @@
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-terser": "^5.1.1",
+    "rollup-plugin-typescript2": "^0.24.0",
     "rxjs": "^6.5.2",
     "typescript": "^3.5.3",
     "typings-tester": "^0.3.2"
@@ -102,7 +107,7 @@
     ]
   },
   "jest": {
-    "testRegex": "(/test/.*\\.spec\\.js)$"
+    "testRegex": "(/test/.*\\.spec\\.[tj]s)$"
   },
   "sideEffects": false
 }

package.json

@@ -1,42 +1,63 @@
 import nodeResolve from 'rollup-plugin-node-resolve'
 import babel from 'rollup-plugin-babel'
 import replace from 'rollup-plugin-replace'
+import typescript from 'rollup-plugin-typescript2'
 import { terser } from 'rollup-plugin-terser'
 
 import pkg from './package.json'
 
+const noDeclarationFiles = { compilerOptions: { declaration: false } };
+
 export default [
   // CommonJS
   {
-    input: 'src/index.js',
+    input: 'src/index.ts',
     output: { file: 'lib/redux.js', format: 'cjs', indent: false },
     external: [
       ...Object.keys(pkg.dependencies || {}),
       ...Object.keys(pkg.peerDependencies || {})
     ],
-    plugins: [babel()]
+    plugins: [
+      nodeResolve({
+        extensions: ['.ts']
+      }),
+      typescript({ useTsconfigDeclarationDir: true }),
+      babel()
+    ]
   },
 
   // ES
   {
-    input: 'src/index.js',
+    input: 'src/index.ts',
     output: { file: 'es/redux.js', format: 'es', indent: false },
     external: [
       ...Object.keys(pkg.dependencies || {}),
       ...Object.keys(pkg.peerDependencies || {})
     ],
-    plugins: [babel()]
+    plugins: [
+      nodeResolve({
+        extensions: ['.ts']
+      }),
+      typescript({ tsconfigOverride: noDeclarationFiles }),
+      babel()
+    ]
   },
 
   // ES for Browsers
   {
-    input: 'src/index.js',
+    input: 'src/index.ts',
     output: { file: 'es/redux.mjs', format: 'es', indent: false },
     plugins: [
-      nodeResolve(),
+      nodeResolve({
+        extensions: ['.ts']
+      }),
       replace({
         'process.env.NODE_ENV': JSON.stringify('production')
       }),
+      typescript({ tsconfigOverride: noDeclarationFiles }),
+      babel({
+        exclude: 'node_modules/**'
+      }),
       terser({
         compress: {
           pure_getters: true,
@@ -50,15 +71,18 @@ export default [
 
   // UMD Development
   {
-    input: 'src/index.js',
+    input: 'src/index.ts',
     output: {
       file: 'dist/redux.js',
       format: 'umd',
       name: 'Redux',
       indent: false
     },
     plugins: [
-      nodeResolve(),
+      nodeResolve({
+        extensions: ['.ts']
+      }),
+      typescript({ tsconfigOverride: noDeclarationFiles }),
       babel({
         exclude: 'node_modules/**'
       }),
@@ -70,15 +94,18 @@ export default [
 
   // UMD Production
   {
-    input: 'src/index.js',
+    input: 'src/index.ts',
     output: {
       file: 'dist/redux.min.js',
       format: 'umd',
       name: 'Redux',
       indent: false
     },
     plugins: [
-      nodeResolve(),
+      nodeResolve({
+        extensions: ['.ts']
+      }),
+      typescript({ tsconfigOverride: noDeclarationFiles }),
       babel({
         exclude: 'node_modules/**'
       }),