Typescript

Thanks to the amazing work of  @lodmfjord 

* feat: typescript

* fix tests

* tsx fix

* Fixes

* fix: tsconfig for test and build

* Fixed build input

Was taking tests too

* Removed ternary op. for Emoji label

It's better if it's required (like in the type def.), because of accessibility reasons

* Map index fix

Used the index as key and removed incremental operator

* fix: types

* fix: tests

* fix: smaller output size

* fix: sort

Co-authored-by: Alessio Franceschi <[email protected]>

.eslintrc

@@ -1,11 +1,16 @@
 {
-  "parser": "babel-eslint",
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "@typescript-eslint"
+  ],
   "extends": [
     "standard",
     "standard-react",
     "plugin:prettier/recommended",
     "prettier/standard",
     "prettier/react",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
   ],
   "env": {
     "node": true
@@ -23,11 +28,15 @@
     }
   },
   "rules": {
+    "@typescript-eslint/consistent-type-imports": 2,
     "space-before-function-paren": 0,
     "react/prop-types": 0,
     "react/jsx-handler-names": 0,
     "react/jsx-fragments": 0,
+    "no-undef": 0,
     "react/no-unused-prop-types": 0,
-    "import/export": 0
+    "import/export": 0,
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": ["error"]
   }
 }

example/.eslintcache

@@ -1 +1 @@
-[{"D:\\Code\\lepre\\example\\src\\index.js":"1","D:\\Code\\lepre\\example\\src\\App.js":"2","D:\\Code\\lepre\\example\\src\\CustomReactions.js":"3","D:\\Code\\lepre\\example\\src\\DefaultReactions.js":"4","D:\\Code\\lepre\\example\\src\\CustomReactionsV2.js":"5"},{"size":238,"mtime":1611057324260,"results":"6","hashOfConfig":"7"},{"size":839,"mtime":1611140039410,"results":"8","hashOfConfig":"7"},{"size":2609,"mtime":1611302424870,"results":"9","hashOfConfig":"7"},{"size":745,"mtime":1611300517806,"results":"10","hashOfConfig":"7"},{"size":1031,"mtime":1611217869980,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"95zszt",{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"D:\\Code\\lepre\\example\\src\\index.js",[],["23","24"],"D:\\Code\\lepre\\example\\src\\App.js",[],"D:\\Code\\lepre\\example\\src\\CustomReactions.js",[],"D:\\Code\\lepre\\example\\src\\DefaultReactions.js",[],"D:\\Code\\lepre\\example\\src\\CustomReactionsV2.js",[],{"ruleId":"25","replacedBy":"26"},{"ruleId":"27","replacedBy":"28"},"no-native-reassign",["29"],"no-negated-in-lhs",["30"],"no-global-assign","no-unsafe-negation"]
+[{"/home/lommi/Projects/lepre/example/src/index.js":"1","/home/lommi/Projects/lepre/example/src/App.js":"2","/home/lommi/Projects/lepre/example/src/DefaultReactions.tsx":"3","/home/lommi/Projects/lepre/example/src/CustomReactions.tsx":"4","/home/lommi/Projects/lepre/example/src/CustomReactionsV2.tsx":"5"},{"size":229,"mtime":1611320530613,"results":"6","hashOfConfig":"7"},{"size":806,"mtime":1611320530611,"results":"8","hashOfConfig":"7"},{"size":721,"mtime":1611330034041,"results":"9","hashOfConfig":"7"},{"size":2526,"mtime":1611329369107,"results":"10","hashOfConfig":"7"},{"size":991,"mtime":1611329658960,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1vcf47z",{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/lommi/Projects/lepre/example/src/index.js",[],"/home/lommi/Projects/lepre/example/src/App.js",[],"/home/lommi/Projects/lepre/example/src/DefaultReactions.tsx",[],"/home/lommi/Projects/lepre/example/src/CustomReactions.tsx",[],"/home/lommi/Projects/lepre/example/src/CustomReactionsV2.tsx",[]]

example/package.json

@@ -4,16 +4,16 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "start": "node ../node_modules/react-scripts/bin/react-scripts.js start",
-    "build": "node ../node_modules/react-scripts/bin/react-scripts.js build",
-    "test": "node ../node_modules/react-scripts/bin/react-scripts.js test",
-    "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject"
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
   },
   "dependencies": {
+    "lepre": "file:..",
     "react": "file:../node_modules/react",
     "react-dom": "file:../node_modules/react-dom",
-    "react-scripts": "file:../node_modules/react-scripts",
-    "lepre": "file:.."
+    "react-scripts": "^4.0.1"
   },
   "devDependencies": {
     "@babel/plugin-syntax-object-rest-spread": "^7.8.3"

example/src/CustomReactions.js → example/src/CustomReactions.tsx

@@ -13,12 +13,11 @@ export default function CustomReactions() {
     { emoji: '🐼', label: 'panda', counter: 10 },
   ]);
 
-  let i = 0;
   const selected = emojis
     .sort((a, b) => (a.emoji < b.emoji ? 1 : -1))
-    .map((emoji) => (
+    .map((emoji, i) => (
       <EmojiCounter
-        key={i++}
+        key={i}
         emoji={emoji}
         initialValue={emoji.counter}
         onClick={increment}

example/src/CustomReactionsV2.js → example/src/CustomReactionsV2.tsx

@@ -11,12 +11,11 @@ const DEFAULT_EMOJI_OPTIONS = [
 export default function CustomReactions() {
   const [emojis, increment] = useEmojis(DEFAULT_EMOJI_OPTIONS);
 
-  let i = 0;
   const selected = emojis
     .sort((a, b) => (a.emoji < b.emoji ? 1 : -1))
-    .map((emoji) => (
+    .map((emoji, i) => (
       <EmojiCounter
-        key={i++}
+        key={i}
         emoji={emoji}
         initialValue={emoji.counter}
         onClick={increment}

example/src/DefaultReactions.js → example/src/DefaultReactions.tsx

@@ -9,7 +9,7 @@ const DEFAULT_EMOJI_OPTIONS = [
 ];
 
 export default function DefaultReactions() {
-  function onUpdateExample(state) {
+  function onUpdateExample(state: any) {
     console.log('State Updated');
     console.log(state);
   }

example/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

example/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": [
+    "src"
+  ]
+}

package.json

@@ -12,21 +12,22 @@
   "repository": "PandaSekh/lepre",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
-  "source": "src/index.js",
+  "source": "src/index.ts",
+  "types": "./dist/index.d.ts",
   "engines": {
     "node": ">=10"
   },
   "jest": {
     "collectCoverageFrom": [
-      "src/*.js",
-      "src/lib/*.js"
+      "src/*.{ts,tsx}",
+      "src/lib/*.{ts,tsx}"
     ]
   },
   "scripts": {
-    "build": "microbundle-crl --format modern,cjs",
-    "start": "microbundle-crl watch --format modern,cjs",
+    "build": "microbundle-crl --format modern,cjs --tsconfig ./tsconfig.build.json",
+    "start": "microbundle-crl watch --format modern,cjs --tsconfig ./tsconfig.build.json",
     "prepare": "run-s build",
-    "test": "run-s test:unit test:lint test:build && codecov --token=e97a8278-183a-4536-97b6-f9873e00df64",
+    "test": "run-s test:unit test:lint test:build && codecov",
     "test:build": "run-s build",
     "test:lint": "eslint .",
     "test:unit": "cross-env CI=1 react-scripts test --env=jsdom --coverage --watchAll=false",
@@ -41,24 +42,32 @@
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.3",
     "@testing-library/react-hooks": "^5.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.14.0",
+    "@typescript-eslint/parser": "^4.14.0",
     "babel-eslint": "^10.0.3",
     "cross-env": "^7.0.2",
+    "eslint": "^7.18.0",
     "eslint-config-prettier": "^6.7.0",
+    "eslint-config-react-app": "^6.0.0",
     "eslint-config-standard": "^14.1.0",
     "eslint-config-standard-react": "^9.2.0",
+    "eslint-plugin-flowtype": "^5.2.0",
     "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-node": "^11.0.0",
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-react": "^7.17.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-standard": "^5.0.0",
     "gh-pages": "^3.1.0",
     "microbundle-crl": "^0.13.10",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.4",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "^4.0.1"
+    "react-scripts": "^4.0.1",
+    "typescript": "^4.1.3"
   },
   "files": [
     "dist"