TS refactor

Author: ZeeCoder

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": [["@babel/preset-env", { "loose": true} ]]
+  "presets": ["@babel/typescript", ["@babel/preset-env", { "loose": true }]]
 }

.gitignore

@@ -1,8 +1,9 @@
 .cache
 node_modules
 .idea
+.vscode
 yarn.lock
 yarn-error.log*
 dist
 /polyfilled.js
-
+/polyfilled.d.ts

.npmignore

@@ -11,3 +11,4 @@ browserslist
 .cache
 .travis.yml
 tests
+tsconfig.json

.size-limit.json

@@ -0,0 +1,32 @@
+[
+  {
+    "path": "dist/bundle.esm.js",
+    "limit": "323 B",
+    "gzip": true
+  },
+  {
+    "path": "dist/bundle.esm.js",
+    "limit": "243 B",
+    "brotli": true
+  },
+  {
+    "path": "dist/bundle.cjs.js",
+    "limit": "313 B",
+    "gzip": true
+  },
+  {
+    "path": "dist/bundle.cjs.js",
+    "limit": "233 B",
+    "brotli": true
+  },
+  {
+    "path": "polyfilled.js",
+    "limit": "2644 B",
+    "gzip": true
+  },
+  {
+    "path": "polyfilled.js",
+    "limit": "2353 B",
+    "brotli": true
+  }
+]

.travis.yml

@@ -1,19 +1,17 @@
 language: node_js
 node_js:
-  - 10
+  - 11.7.0
 env:
   global:
     - MOZ_HEADLESS=1
 addons:
   chrome: stable
   firefox: latest
 script:
-  - yarn build
-  - yarn test:chrome:headless
-  - yarn test:firefox:headless
+  - yarn test
 deploy:
   provider: npm
-  email: rpgmorpheus@gmail.com
+  email: contact@hubertviktor.com
   api_key:
     secure: AVhIhFozrf45OjXuFjpL734kSr3Ar/VGqaBzmggF0VWFqOa3stMt6t4gYLRJKrXfr9alMPhB4IdQ7fTjO0EIZh51pT7uRkjAJ8ZUXyDB6fohAFw2Q2mowufOMt2Pu0peC0SDWROosXk0asRAgWhjsMNcNiwgctjr0Pw2DHswq13QBcdL0/sTtTMRnawrjZJBbXtdDb0Q6nfygQjDav6NzpK1uT3elsNKlyf+MiOqNguwc1lgoIqfp2Twvj9a7TmbMf8TFiQjsXZgFZxPYwXZyi62gbcvySEZvEQnYGzUCGsgF+aM3GYsluFmOjMUaUnm9++48gDmKF9+aigowhu5vvVl8XdoI5RIjg/5ibwh04SlHhUab/0JqQy9HmfCkFXDHnzwDyRZMjNlXMfbX+XXSrY3R+WXIfeepdressTHJr3DoPdpkJmic5LN+i8zPjJH/+TU/MMzSot7lTQLD5q5hmxpZi1fCPxAzdVwn7s3uKDtJiUU0i0s864wu7VzRLNBxTLi5uR4mToFNtfQAzuOqOvhK7mGNqSYTIAeCnf67VLHWRLZcqR3bbRCJVt3PT+LKg51nDor/jBnuZTrph1DNo7vGfxIydyQ4EbY3QqDt1gcZoB5imGUc2+4pSzXA0xX9ijwCrNPuh7Vtyg+rV2/R6e9ecdWE5CSz6FzvG5k5TQ=
   on:

CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## 6.1.0-alpha1
+
+- Rewrote the source in TypeScript. (Feedback is welcome.)
+- Rewrote tests in TypeScript as well. (Ensures the types make sense.)
+- Added checks to ensure reasonable bundle size.
+
 ## 6.0.0
 
 - **[BREAKING]** Default width and height can now be set by declaring defaults

README.md

@@ -5,6 +5,17 @@ A React hook that allows you to use a ResizeObserver to measure an element's siz
 [![npm version](https://badge.fury.io/js/use-resize-observer.svg)](https://npmjs.com/package/use-resize-observer)
 [![build](https://travis-ci.org/ZeeCoder/use-resize-observer.svg?branch=master)](https://travis-ci.org/ZeeCoder/use-resize-observer)
 
+## Highlights
+
+- Written in **TypeScript**.
+- **Tiny**: 323 B (minified, gzipped) Monitored by [size-limit](https://github.com/ai/size-limit).
+- Exposes an **onResize callback** if you need more control.
+- [Throttle / Debounce](#throttle--debounce)
+- Works with **SSR**.
+- Works with **CSS-in-JS**.
+- **Supports custom refs** in case you [had one already](#passing-in-your-own-ref).
+- **Tested** in real browsers. (Headless Chrome and Firefox).
+
 ## In Action
 
 [CodeSandbox Demo](https://codesandbox.io/s/nrp0w2r5z0)
@@ -69,7 +80,7 @@ const App = () => {
   const { ref } = useResizeObserver({
     onResize: ({ width, height }) => {
       // do something here.
-    }
+    },
   });
 
   return <div ref={ref} />;

package.json

@@ -1,21 +1,24 @@
 {
   "name": "use-resize-observer",
-  "version": "6.0.0",
+  "version": "6.1.0-alpha.1",
   "main": "dist/bundle.cjs.js",
   "module": "dist/bundle.esm.js",
+  "types": "dist/index.d.ts",
   "sideEffects": false,
   "repository": "[email protected]:ZeeCoder/use-resize-observer.git",
   "description": "A React hook that allows you to use a ResizeObserver to measure an element's size.",
-  "author": "Viktor Hubert <rpgmorpheus@gmail.com>",
+  "author": "Viktor Hubert <contact@hubertviktor.com>",
   "license": "MIT",
   "scripts": {
     "build": "run-s src:build test:build",
     "watch": "KARMA_BROWSERS=Chrome run-p src:watch test:watch karma:watch",
-    "src:build": "rollup -c",
+    "src:build": "rollup -c && tsc && cp dist/index.d.ts polyfilled.d.ts",
     "src:watch": "rollup -c -w",
-    "test": "run-s build karma:run",
-    "test:build": "parcel build tests/index.js --out-dir tests/dist",
-    "test:watch": "parcel watch tests/index.js --out-dir tests/dist",
+    "tsc": "tsc",
+    "size-limit": "size-limit",
+    "test": "run-s 'build' 'size-limit' 'tsc -p tests' 'test:chrome:headless' 'test:firefox:headless'",
+    "test:build": "parcel build tests/index.tsx --out-dir tests/dist",
+    "test:watch": "parcel watch tests/index.ts --out-dir tests/dist",
     "test:chrome": "KARMA_BROWSERS=Chrome yarn karma:run",
     "test:chrome:headless": "KARMA_BROWSERS=ChromeHeadless yarn karma:run",
     "test:firefox": "KARMA_BROWSERS=Firefox yarn karma:run",
@@ -30,9 +33,8 @@
     }
   },
   "lint-staged": {
-    "*.{js,md}": [
-      "prettier --write",
-      "git add"
+    "*.{js,ts,md}": [
+      "prettier --write"
     ]
   },
   "peerDependencies": {
@@ -42,23 +44,31 @@
   "devDependencies": {
     "@babel/core": "^7.7.7",
     "@babel/preset-env": "^7.7.7",
+    "@babel/preset-typescript": "^7.9.0",
+    "@rollup/plugin-inject": "^4.0.1",
+    "@size-limit/preset-small-lib": "^4.4.5",
+    "@types/karma": "^5.0.0",
+    "@types/karma-jasmine": "^3.1.0",
+    "@types/react": "^16.9.34",
+    "@types/react-dom": "^16.9.6",
     "babel-regenerator-runtime": "^6.5.0",
     "delay": "^4.1.0",
-    "husky": "^3.0.4",
-    "karma": "^4.2.0",
+    "husky": "^4.2.5",
+    "karma": "^5.0.1",
     "karma-chrome-launcher": "^3.0.0",
-    "karma-firefox-launcher": "^1.2.0",
-    "karma-jasmine": "^2.0.1",
+    "karma-firefox-launcher": "^1.3.0",
+    "karma-jasmine": "^3.1.1",
     "karma-spec-reporter": "^0.0.32",
-    "lint-staged": "^9.5.0",
+    "lint-staged": "^10.1.3",
     "npm-run-all": "^4.1.5",
     "parcel-bundler": "^1.10.3",
-    "prettier": "^1.14.3",
+    "prettier": "^2.0.4",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "rollup": "^1.27.14",
-    "rollup-plugin-babel": "^4.3.3",
-    "rollup-plugin-inject": "^3.0.2"
+    "rollup": "^2.6.1",
+    "rollup-plugin-babel": "^4.4.0",
+    "size-limit": "^4.4.5",
+    "typescript": "^3.8.3"
   },
   "dependencies": {
     "resize-observer-polyfill": "^1.5.1"

rollup.config.js

@@ -1,41 +1,41 @@
 import babel from "rollup-plugin-babel";
-import inject from "rollup-plugin-inject";
+import inject from "@rollup/plugin-inject";
 
-const getConfig = polyfill => {
+const getConfig = ({ polyfill = false } = {}) => {
   const config = {
-    input: "src/index.js",
+    input: "src/index.ts",
     output: [],
-    plugins: [babel()],
-    external: ["react"]
+    plugins: [babel({ extensions: ["ts"] })],
+    external: ["react"],
   };
 
   if (polyfill) {
     config.output = [
       {
         file: "polyfilled.js",
-        format: "cjs"
-      }
+        format: "cjs",
+      },
     ];
     config.external.push("resize-observer-polyfill");
     config.plugins.push(
       inject({
-        ResizeObserver: "resize-observer-polyfill"
+        ResizeObserver: "resize-observer-polyfill",
       })
     );
   } else {
     config.output = [
       {
         file: "dist/bundle.cjs.js",
-        format: "cjs"
+        format: "cjs",
       },
       {
         file: "dist/bundle.esm.js",
-        format: "esm"
-      }
+        format: "esm",
+      },
     ];
   }
 
   return config;
 };
 
-export default [getConfig(), getConfig(true)];
+export default [getConfig(), getConfig({ polyfill: true })];