add types and update build

Author: chaance

.eslintignore

@@ -0,0 +1 @@
+dist

.eslintrc

@@ -2,4 +2,4 @@
 /node_modules
 npm-debug.log*
 yarn-error.log*
-
+.vscode

.gitignore

@@ -45,7 +45,7 @@
 
   </body>
   <script type="module">
-    import observeRect from './src/index.js'
+    import observeRect from './dist/observe-rect.esm.js'
     let observer = observeRect(demo, (rect) => {
       log.textContent = JSON.stringify(rect, null, 2)
     })

index.html

@@ -1,32 +1,55 @@
 {
   "name": "@reach/observe-rect",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Observe the Rect of a DOM element.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/reach/observe-rect",
+    "directory": "packages/auto-id"
+  },
   "scripts": {
-    "build": "microbundle",
-    "start": "microbundle watch",
+    "build": "cross-env NODE_ENV=production tsdx build --format=cjs,esm,umd",
+    "start": "cross-env NODE_ENV=production tsdx watch",
     "serve": "serve"
   },
   "files": [
-    "src",
     "dist",
     "README.md"
   ],
   "main": "dist/index.js",
-  "umd:main": "dist/index.umd.js",
-  "module": "dist/index.m.js",
-  "source": "src/index.js",
-  "repository": "https://github.com/reach/observe-rect",
-  "author": "Ryan Florence <@ryanflorence>",
+  "umd:main": "dist/observe-rect.umd.production.js",
+  "module": "dist/observe-rect.esm.js",
+  "typings": "dist/index.d.ts",
+  "author": "React Training <[email protected]>",
   "license": "MIT",
   "dependencies": {},
   "devDependencies": {
+    "@babel/core": "^7.7.7",
+    "@types/jest": "^24.0.25",
+    "babel-loader": "^8.0.6",
     "babel-preset-env": "^1.7.0",
-    "eslint": "^6.6.0",
-    "eslint-config-prettier": "^6.5.0",
-    "eslint-plugin-jest": "^23.0.2",
-    "microbundle": "^0.11.0",
-    "serve": "^11.2.0"
+    "cross-env": "^6.0.3",
+    "eslint-config-prettier": "^6.9.0",
+    "eslint-plugin-jest": "^23.3.0",
+    "eslint": "^6.8.0",
+    "husky": "^4.0.1",
+    "serve": "^11.2.0",
+    "ts-loader": "^6.2.1",
+    "tsdx": "^0.12.1",
+    "tslib": "^1.10.0",
+    "typescript": "^3.7.4"
   },
-  "prettier": {}
+  "eslintConfig": {
+    "extends": ["eslint:recommended", "prettier"],
+    "parserOptions": {
+      "sourceType": "module"
+    },
+    "env": {
+      "es6": true,
+      "browser": true
+    }
+  },  
+  "prettier": {
+    "singleQuote": true
+  }
 }

package.json

@@ -1,9 +1,17 @@
-let props = ["width", "height", "top", "right", "bottom", "left"];
+let props: (keyof Rect)[] = [
+  'bottom',
+  'height',
+  'left',
+  'right',
+  'top',
+  'width'
+];
 
-let rectChanged = (a = {}, b = {}) => props.some(prop => a[prop] !== b[prop]);
+let rectChanged = (a: PartialRect = {}, b: PartialRect = {}) =>
+  props.some(prop => a[prop] !== b[prop]);
 
-let observedNodes = new Map();
-let rafId;
+let observedNodes = new Map<HTMLElement, RectProps>();
+let rafId: number;
 
 let run = () => {
   observedNodes.forEach(state => {
@@ -26,12 +34,12 @@ let run = () => {
   rafId = requestAnimationFrame(run);
 };
 
-export default (node, cb) => {
+export default (node: HTMLElement, cb: Function) => {
   return {
     observe() {
       let wasEmpty = observedNodes.size === 0;
       if (observedNodes.has(node)) {
-        observedNodes.get(node).callbacks.push(cb);
+        observedNodes.get(node)!.callbacks.push(cb);
       } else {
         observedNodes.set(node, {
           rect: undefined,
@@ -58,3 +66,16 @@ export default (node, cb) => {
     }
   };
 };
+
+export type Rect = Pick<
+  DOMRect,
+  'width' | 'height' | 'top' | 'right' | 'bottom' | 'left'
+>;
+
+export type PartialRect = Partial<Rect>;
+
+export type RectProps = {
+  rect: Rect | undefined;
+  hasRectChanged: boolean;
+  callbacks: Function[];
+};

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

@@ -0,0 +1,31 @@
+{
+    "include": ["src", "types", "test"],
+    "compilerOptions": {
+      "target": "es5",
+      "module": "esnext",
+      "lib": ["dom", "esnext"],
+      "importHelpers": true,
+      "declaration": true,
+      "sourceMap": true,
+      "rootDir": "./",
+      "strict": true,
+      "noImplicitAny": true,
+      "strictNullChecks": true,
+      "strictFunctionTypes": true,
+      "strictPropertyInitialization": true,
+      "noImplicitThis": true,
+      "alwaysStrict": true,
+      "noUnusedLocals": true,
+      "noUnusedParameters": true,
+      "noImplicitReturns": true,
+      "noFallthroughCasesInSwitch": true,
+      "moduleResolution": "node",
+      "baseUrl": "./",
+      "paths": {
+        "@": ["./"],
+        "*": ["src/*", "node_modules/*"]
+      },
+      "esModuleInterop": true
+    }
+  }
+