refactor: add typescript support

Author: boschni

.babelrc

@@ -8,6 +8,7 @@
         "exclude": ["@babel/plugin-transform-regenerator"]
       }
     ],
+    "@babel/preset-typescript",
     "@babel/react"
   ],
   "plugins": ["babel-plugin-transform-async-to-promises"],

.eslintrc

@@ -1,10 +1,19 @@
 {
-  "parser": "babel-eslint",
-  "extends": ["react-app", "prettier"],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "extends": [
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "react-app",
+    "prettier"
+  ],
   "env": {
     "es6": true
   },
   "parserOptions": {
     "sourceType": "module"
+  },
+  "rules": {
+    "@typescript-eslint/explicit-module-boundary-types": "off"
   }
 }

package.json

@@ -19,6 +19,9 @@
     "test:dev": "jest --watch",
     "test:ci": "jest && yarn dtslint",
     "test:coverage": "yarn test:ci; open coverage/lcov-report/index.html",
+    "test:types": "tsc",
+    "test:eslint": "eslint --ext .ts,.tsx ./src",
+    "gen:types": "tsc --project ./tsconfig.types.json",
     "build": "NODE_ENV=production rollup -c",
     "now-build": "yarn && cd www && yarn && yarn build",
     "start": "rollup -c -w",
@@ -56,10 +59,14 @@
     "@babel/core": "^7.10.2",
     "@babel/preset-env": "^7.10.2",
     "@babel/preset-react": "^7.10.1",
+    "@babel/preset-typescript": "^7.10.4",
     "@rollup/plugin-replace": "^2.3.3",
     "@svgr/rollup": "^5.4.0",
     "@testing-library/react": "^10.2.1",
+    "@types/jest": "^26.0.4",
     "@types/react": "^16.9.41",
+    "@typescript-eslint/eslint-plugin": "^3.6.1",
+    "@typescript-eslint/parser": "^3.6.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.0.1",
     "babel-plugin-transform-async-to-promises": "^0.8.15",

rollup.config.js

@@ -13,7 +13,11 @@ const globals = {
   react: 'React',
 }
 
-const inputSrc = 'src/react/index.js'
+const inputSrc = 'src/index.ts'
+
+const extensions = ['.js', '.jsx', '.es6', '.es', '.mjs', '.ts', '.tsx']
+const babelConfig = { extensions }
+const resolveConfig = { extensions }
 
 export default [
   {
@@ -24,7 +28,12 @@ export default [
       sourcemap: true,
     },
     external,
-    plugins: [resolve(), babel(), commonJS(), externalDeps()],
+    plugins: [
+      resolve(resolveConfig),
+      babel(babelConfig),
+      commonJS(),
+      externalDeps(),
+    ],
   },
   {
     input: inputSrc,
@@ -34,7 +43,13 @@ export default [
       sourcemap: true,
     },
     external,
-    plugins: [resolve(), babel(), commonJS(), externalDeps(), terser()],
+    plugins: [
+      resolve(resolveConfig),
+      babel(babelConfig),
+      commonJS(),
+      externalDeps(),
+      terser(),
+    ],
   },
   {
     input: inputSrc,
@@ -46,7 +61,12 @@ export default [
       globals,
     },
     external,
-    plugins: [resolve(), babel(), commonJS(), externalDeps()],
+    plugins: [
+      resolve(resolveConfig),
+      babel(babelConfig),
+      commonJS(),
+      externalDeps(),
+    ],
   },
   {
     input: inputSrc,
@@ -60,8 +80,8 @@ export default [
     external,
     plugins: [
       replace({ 'process.env.NODE_ENV': `"production"`, delimiters: ['', ''] }),
-      resolve(),
-      babel(),
+      resolve(resolveConfig),
+      babel(babelConfig),
       commonJS(),
       externalDeps(),
       terser(),

src/core/config.js renamed to src/core/config.ts

@@ -13,6 +13,18 @@ import {
 } from './utils'
 import { makeQueryInstance } from './queryInstance'
 
+export interface QueryState<T, TError = Error> {
+  data?: T
+  error?: TError | null
+  failureCount: number
+  isFetching: boolean
+  canFetchMore?: boolean
+  isStale: boolean
+  status: 'idle' | 'loading' | 'error' | 'success'
+  updatedAt: number
+  markedForGarbageCollection: boolean
+}
+
 const actionInit = 'Init'
 const actionFailed = 'Failed'
 const actionMarkStale = 'MarkStale'
@@ -405,13 +417,13 @@ export function makeQuery({
   return query
 }
 
-export function queryReducer(state, action) {
+export function queryReducer<T>(state: QueryState<T>, action) {
   const newState = switchActions(state, action)
 
   return Object.assign(newState, getStatusBools(newState.status))
 }
 
-function switchActions(state, action) {
+function switchActions<T>(state: QueryState<T>, action): QueryState<T> {
   switch (action.type) {
     case actionInit:
       return {

src/core/index.js renamed to src/core/index.ts

@@ -0,0 +1 @@
+export * from './react/index'

src/core/query.js renamed to src/core/query.ts

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "jsx": "react",
+    "lib": ["es6", "dom"],
+    "module": "es6",
+    "noEmit": true,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "strict": true
+  },
+  "include": ["./src/**/*"]
+}

src/core/queryCache.js renamed to src/core/queryCache.ts

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationDir": "./types",
+    "emitDeclarationOnly": true,
+    "noEmit": false
+  },
+  "files": ["./src/index.ts"],
+  "exclude": ["./src/**/*"]
+}