Convert to TypeScript (#30)

Author: wojtekmaj

.babelrc

@@ -1,8 +1,3 @@
 {
-  "presets": ["@babel/env"],
-  "env": {
-    "production-esm": {
-      "presets": [["@babel/env", { "modules": false }]]
-    }
-  }
+  "presets": ["@babel/typescript", "@babel/env"]
 }

.eslintrc.json

@@ -1,3 +1,9 @@
 {
-  "extends": "wojtekmaj/browser"
+  "extends": [
+    "wojtekmaj/browser",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"]
 }

package.json

@@ -4,18 +4,20 @@
   "description": "A function that tells you whether a given element is overflowing its container or not. Useful for creating dropdowns and tooltips.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
-  "source": "src/index.js",
+  "source": "src/index.ts",
+  "types": "src/index.ts",
   "sideEffects": false,
   "scripts": {
     "build": "yarn build-esm && yarn build-cjs",
-    "build-esm": "BABEL_ENV=production-esm babel src -d dist/esm --ignore \"**/*.spec.js\"",
-    "build-cjs": "BABEL_ENV=production-cjs babel src -d dist/cjs --ignore \"**/*.spec.js\"",
+    "build-esm": "tsc --project tsconfig.build.json --outDir dist/esm --module esnext",
+    "build-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs",
     "clean": "rimraf dist",
     "lint": "eslint src",
     "postinstall": "husky install",
     "prepack": "yarn clean && yarn build",
     "prettier": "prettier --check . --cache",
-    "test": "yarn lint && yarn prettier"
+    "test": "yarn lint && yarn tsc && yarn prettier",
+    "tsc": "tsc --noEmit"
   },
   "keywords": [
     "collision",
@@ -31,12 +33,16 @@
     "@babel/cli": "^7.15.0",
     "@babel/core": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
+    "@babel/preset-typescript": "^7.18.6",
+    "@typescript-eslint/eslint-plugin": "^5.41.0",
+    "@typescript-eslint/parser": "^5.44.0",
     "eslint": "^8.26.0",
     "eslint-config-wojtekmaj": "^0.7.1",
     "husky": "^8.0.0",
     "prettier": "^2.7.0",
     "pretty-quick": "^3.1.0",
-    "rimraf": "^3.0.0"
+    "rimraf": "^3.0.0",
+    "typescript": "^4.9.4"
   },
   "resolutions": {
     "[email protected]": "^7.0.0"

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

@@ -1,8 +1,8 @@
-function getRect(element) {
+function getRect(element: HTMLElement) {
   return element.getBoundingClientRect();
 }
 
-export default function detectElementOverflow(element, container) {
+export default function detectElementOverflow(element: HTMLElement, container: HTMLElement) {
   return {
     get collidedTop() {
       return getRect(element).top < getRect(container).top;

tsconfig.build.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["src/**/*.spec.ts"]
+}

tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "moduleResolution": "node",
+    "outDir": "dist",
+    "strict": true,
+    "target": "es5"
+  },
+  "include": ["src"]
+}