- d.ts is replaced in favor of native TypeScript implementation

- Additional useMemo optimizations
- Few tests here and there to be sure that nothing got broken

.babelrc

@@ -1,9 +1,15 @@
 {
   "presets": [
-    ["env", {
-      "modules": false
-    }],
-    "stage-0",
-    "react"
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "targets": {
+          "node": "10"
+        }
+      }
+    ],
+    "@babel/preset-react",
+    "@babel/preset-typescript"
   ]
 }

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["revolut-react"]
+}

.travis.yml

@@ -1,5 +1,8 @@
 language: node_js
 node_js:
-  - 'node'
-  - '10'
-  - '8'
+  - "10"
+install:
+  - yarn install
+script:
+  - yarn test
+  - yarn build

README.md

@@ -1,6 +1,7 @@
-### 🙋‍♂️ Made by [@thekitze](https://twitter.com/thekitze)  
+### 🙋‍♂️ Made by [@thekitze](https://twitter.com/thekitze)
 
 ### Other projects:
+
 - 🏫 [React Academy](https://reactacademy.io) - Interactive React and GraphQL workshops
 - 💌 [Twizzy](https://twizzy.app) - A standalone app for Twitter DM
 - 💻 [Sizzy](https://sizzy.co) - A tool for testing responsive design on multiple devices at once
@@ -9,7 +10,7 @@
 ---
 
 # react-hanger
-
+[![npm version](https://badge.fury.io/js/react-hanger.svg)](https://badge.fury.io/js/react-hanger)
 
 <img width="450" src="https://i.imgur.com/JoBWJxS.png"/>
 
@@ -56,11 +57,7 @@ const App = () => {
       {showCounter.value && <span> {counter.value} </span>}
       <button onClick={counter.decrease}> decrease </button>
       <button onClick={todos.clear}> clear todos </button>
-      <input
-        type="text"
-        value={newTodo.value}
-        onChange={newTodo.onChange}
-      />
+      <input type="text" value={newTodo.value} onChange={newTodo.onChange} />
     </div>
   );
 };

example/src/App.js

@@ -1,82 +1,107 @@
-import React, { useEffect } from "react";
+import React from 'react'
 
-import {
-  useInput,
-  useBoolean,
-  useNumber,
-  useArray,
-  useSetState
-} from "react-hanger";
+import { useInput, useBoolean, useNumber, useArray, useSetState } from 'react-hanger'
 
+// eslint-disable-next-line react/prop-types
 const Counter = ({ counter }) => {
   return (
     <div>
-      <button onClick={counter.increase}> increase</button>
+      <button type="button" onClick={counter.increase}>
+        {' '}
+        increase
+      </button>
       <div> {counter.value} </div>
-      <button onClick={counter.decrease}> decrease </button>
+      <button type="button" onClick={counter.decrease}>
+        {' '}
+        decrease{' '}
+      </button>
     </div>
-  );
-};
+  )
+}
 
 const App = () => {
-  const newTodo = useInput("");
-  const showCounter = useBoolean(true);
-  const limitedNumber = useNumber(3, { lowerLimit: 0, upperLimit: 5 });
+  const newTodo = useInput('')
+  const showCounter = useBoolean(true)
+  const limitedNumber = useNumber(3, { lowerLimit: 0, upperLimit: 5 })
   const rotatingNumber = useNumber(0, {
     lowerLimit: 0,
     upperLimit: 4,
-    loop: true
-  });
-  const counter = useNumber(0);
-  const todos = useArray(["hi there", "sup", "world"]);
-  const { state, setState } = useSetState({ loading: false, data: true });
+    loop: true,
+  })
+  const counter = useNumber(0)
+  const todos = useArray(['hi there', 'sup', 'world'])
+  const { state, setState } = useSetState({ loading: false, data: true })
 
   return (
     <div style={{ padding: 20 }}>
       <h3>Counter</h3>
-      <button onClick={showCounter.toggle}> toggle counter </button>
+      <button type="button" onClick={showCounter.toggle}>
+        {' '}
+        toggle counter{' '}
+      </button>
       {showCounter.value && <Counter counter={counter} />}
       <h3>Limited number</h3>
       <div>
-        This number will stop increasing/decreasing when it reaches the
-        "lowerLimit" or the "upperLimit"
+        {
+          'This number will stop increasing/decreasing when it reaches the "lowerLimit" or the "upperLimit"'
+        }
       </div>
       <br />
-      <button onClick={limitedNumber.increase}> increase </button>
+      <button type="button" onClick={limitedNumber.increase}>
+        {' '}
+        increase{' '}
+      </button>
       <div> {limitedNumber.value} </div>
-      <button onClick={limitedNumber.decrease}> decrease </button>
+      <button type="button" onClick={limitedNumber.decrease}>
+        {' '}
+        decrease{' '}
+      </button>
       <h3>Rotating number</h3>
       <div>
-        This number will loop back to the "lowerLimit" if it reaches the
-        "upperLimit" and vice-versa
+        {
+          'This number will loop back to the "lowerLimit" if it reaches the "upperLimit" and vice-versa'
+        }
       </div>
       <br />
-      <button onClick={rotatingNumber.increase}> increase </button>
+      <button type="button" onClick={rotatingNumber.increase}>
+        {' '}
+        increase{' '}
+      </button>
       <div> {rotatingNumber.value} </div>
-      <button onClick={rotatingNumber.decrease}> decrease </button>
+      <button type="button" onClick={rotatingNumber.decrease}>
+        {' '}
+        decrease{' '}
+      </button>
       <h3>Todos</h3>
       <br /> <br />
       <input type="text" {...newTodo.bindToInput} placeholder="new todo" />
       <button
+        type="button"
         disabled={!newTodo.hasValue}
         onClick={() => {
-          todos.add(newTodo.value);
-          newTodo.clear();
+          todos.add(newTodo.value)
+          newTodo.clear()
         }}
       >
         add
       </button>
       <ul>
         {todos.value.map((todo, i) => (
+          // eslint-disable-next-line react/no-array-index-key
           <li key={i}>
             {todo}
-            <button onClick={() => todos.removeIndex(i)}>delete</button>
+            <button type="button" onClick={() => todos.removeIndex(i)}>
+              delete
+            </button>
           </li>
         ))}
       </ul>
-      <button onClick={todos.clear}> clear todos </button>
+      <button type="button" onClick={todos.clear}>
+        {' '}
+        clear todos{' '}
+      </button>
     </div>
-  );
-};
+  )
+}
 
-export default App;
+export default App

package.json

@@ -5,6 +5,13 @@
   "author": "kitze",
   "license": "MIT",
   "repository": "kitze/react-hanger",
+  "contributors": [
+    {
+      "name": "Andrii Los",
+      "email": "[email protected]",
+      "url": "https://github.com/RIP21"
+    }
+  ],
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "jsnext:main": "dist/index.es.js",
@@ -16,8 +23,9 @@
   "scripts": {
     "test": "cross-env CI=1 react-scripts test --env=jsdom",
     "test:watch": "react-scripts test --env=jsdom",
-    "build": "rollup -c",
-    "postbuild": "cp src/index.d.ts dist/index.d.ts",
+    "generate-dts": "tsc -p tsconfig-dts.json",
+    "prebuild": "rimraf dist",
+    "build": "npm run generate-dts && rollup -c",
     "start": "rollup -c -w",
     "example": "cd ./example && yarn start",
     "prepare": "yarn run build",
@@ -29,32 +37,33 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^8.2.5",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
-    "cross-env": "^5.1.4",
-    "eslint": "^5.0.1",
-    "eslint-config-standard": "^11.0.0",
-    "eslint-config-standard-react": "^6.0.0",
-    "eslint-plugin-import": "^2.13.0",
-    "eslint-plugin-node": "^7.0.1",
-    "eslint-plugin-promise": "^4.0.0",
-    "eslint-plugin-react": "^7.10.0",
-    "eslint-plugin-standard": "^3.1.0",
+    "@babel/core": "^7.4.3",
+    "@babel/plugin-syntax-typescript": "^7.3.3",
+    "@babel/preset-env": "^7.4.3",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.3.3",
+    "@types/jest": "^24.0.11",
+    "@types/react": "^16.8.13",
+    "cross-env": "^5.2.0",
     "gh-pages": "^1.2.0",
-    "react": "^16.8.3",
-    "react-dom": "^16.8.3",
-    "react-scripts": "^1.1.4",
-    "rollup": "^0.64.1",
-    "rollup-plugin-babel": "^3.0.7",
-    "rollup-plugin-commonjs": "^9.1.3",
-    "rollup-plugin-node-resolve": "^3.3.0",
+    "prettier": "1.16.4",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-hooks-testing-library": "^0.4.0",
+    "react-testing-library": "^6.1.2",
+    "revolut-react-scripts": "^2.1.8-2",
+    "rimraf": "^2.6.3",
+    "rollup": "^1.9.0",
+    "rollup-plugin-babel": "^4.3.2",
+    "rollup-plugin-commonjs": "^9.3.4",
+    "rollup-plugin-node-resolve": "^4.2.1",
     "rollup-plugin-peer-deps-external": "^2.2.0",
-    "rollup-plugin-postcss": "^1.6.2",
-    "rollup-plugin-url": "^1.4.0"
+    "rollup-plugin-postcss": "^2.0.3",
+    "rollup-plugin-url": "^2.2.0",
+    "typescript": "^3.4.2"
+  },
+  "resolutions": {
+    "babel-jest": "24.5.0"
   },
   "files": [
     "dist"

rollup.config.js

@@ -8,30 +8,30 @@ import url from 'rollup-plugin-url'
 import pkg from './package.json'
 
 export default {
-  input: 'src/index.js',
+  input: 'src/index.ts',
   output: [
     {
       file: pkg.main,
       format: 'cjs',
-      sourcemap: true
+      sourcemap: true,
     },
     {
       file: pkg.module,
       format: 'es',
-      sourcemap: true
-    }
+      sourcemap: true,
+    },
   ],
   plugins: [
     external(),
     postcss({
-      modules: true
+      modules: true,
     }),
     url(),
     babel({
       exclude: 'node_modules/**',
-      plugins: [ 'external-helpers' ]
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
     }),
     resolve(),
-    commonjs()
-  ]
+    commonjs(),
+  ],
 }