add typescript support

Author: deeppatel234

babel.config.js

@@ -20,5 +20,6 @@ module.exports = {
       },
     ],
     '@babel/preset-react',
+    '@babel/preset-typescript',
   ],
 };

package.json

@@ -17,7 +17,11 @@
     "@babel/plugin-transform-runtime": "7.10.3",
     "@babel/preset-env": "7.10.3",
     "@babel/preset-react": "7.10.1",
+    "@babel/preset-typescript": "^7.12.7",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
     "babel-loader": "8.1.0",
-    "lerna": "^3.22.1"
+    "lerna": "^3.22.1",
+    "typescript": "^4.1.3"
   }
 }

packages/devtool-module/package.json

@@ -4,16 +4,19 @@
   "description": "Devtool for React Context and useReducer hook",
   "main": "dist/module/cjs/index.js",
   "module": "dist/module/esm/index.js",
+  "types": "dist/types/index.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
-    "compile": "babel src/index.js --config-file ../../babel.config.js --extensions '.js'",
+    "compile": "babel src/index.tsx --config-file ../../babel.config.js --extensions '.tsx'",
+    "postcompile": "npm run tsc",
     "clean": "rimraf dist/module",
     "build:esm": "BABEL_ENV=esm npm run compile -- --out-dir dist/module/esm",
     "build:cjs": "BABEL_ENV=cjs npm run compile -- --out-dir dist/module/cjs",
     "build": "npm run clean && npm run build:esm && npm run build:cjs",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "tsc": "tsc"
   },
   "repository": {
     "type": "git",

packages/devtool-module/src/index.js packages/devtool-module/src/index.tsxpackages/devtool-module/src/index.js renamed to packages/devtool-module/src/index.tsx

@@ -1,20 +1,44 @@
 import React from "react";
 
-let debugOptions = {
+declare global {
+  interface Window {
+    __REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK: any;
+    _REACT_CONTEXT_DEVTOOL: any;
+  }
+}
+
+interface DebugOptions {
+  debugReducer?: boolean;
+  debugContext?: boolean;
+  disable?: boolean;
+  disableAutoMode?: boolean;
+}
+
+interface ContextDevToolProps {
+  id: string | number;
+  context: any;
+  displayName: string;
+}
+
+let debugOptions: DebugOptions = {
   debugReducer: true,
   debugContext: true,
   disable: false,
   disableAutoMode: false,
 };
 
-export const ContextDevTool = ({ id, context: Context, displayName }) => {
+export const ContextDevTool = ({
+  id,
+  context: Context,
+  displayName,
+}: ContextDevToolProps) => {
   if (debugOptions.disable) {
     return null;
   }
 
   return (
     <Context.Consumer>
-      {(values) => {
+      {(values: any): null => {
         if (typeof window !== "undefined" && window._REACT_CONTEXT_DEVTOOL) {
           window._REACT_CONTEXT_DEVTOOL({ id, displayName, values });
         }
@@ -24,7 +48,10 @@ export const ContextDevTool = ({ id, context: Context, displayName }) => {
   );
 };
 
-export const debugContextDevtool = (container, options) => {
+export const debugContextDevtool = (
+  container: HTMLElement | null,
+  options?: DebugOptions
+) => {
   debugOptions = { ...debugOptions, ...options };
 
   if (

tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "module": "commonjs",
+    "noImplicitAny": true,
+    "esModuleInterop": true,
+    "outDir": "./packages/devtool-module/dist/types/",
+    "declaration": true,
+    "target": "es5"
+  },
+  "include": ["packages/devtool-module/src"]
+}