fix: Small changes and chores

- Decreased bundle size
- Added eslint
- Improved testing tooling

.eslintrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+  root: true,
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint", "react-hooks"],
+  extends: [
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+  ],
+  rules: {
+    "@typescript-eslint/ban-ts-comment": "off",
+  },
+};

.github/workflows/testing.yml

@@ -22,8 +22,12 @@ jobs:
         run: yarn install --frozen-lockfile
       - name: Checking File Size
         run: yarn check:size
+      - name: Checking Linting Rules
+        run: yarn check:lint
       - name: Checking Types
         run: yarn check:types
+      - name: Running Unit Tests
+        run: yarn test:unit
       - name: Testing SSR
         run: yarn test:create:ssr
       - name: Testing in Modern Browsers (BrowserStack)

.size-limit.json

@@ -1,17 +1,17 @@
 [
   {
     "path": "dist/bundle.esm.js",
-    "limit": "661B",
+    "limit": "648B",
     "gzip": true
   },
   {
     "path": "dist/bundle.cjs.js",
-    "limit": "637B",
+    "limit": "625B",
     "gzip": true
   },
   {
     "path": "polyfilled.js",
-    "limit": "3.4kB",
+    "limit": "3384B",
     "gzip": true
   }
 ]

README.md

@@ -16,7 +16,7 @@ A React hook that allows you to use a ResizeObserver to measure an element's siz
 ## Highlights
 
 - Written in **TypeScript**.
-- **Tiny**: [661B](.size-limit.json) (minified, gzipped) Monitored by [size-limit](https://github.com/ai/size-limit).
+- **Tiny**: [648B](.size-limit.json) (minified, gzipped) Monitored by [size-limit](https://github.com/ai/size-limit).
 - Exposes an **onResize callback** if you need more control.
 - `box` [option](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe#syntax).
 - Works with **SSR**.

jest.config.js

@@ -0,0 +1,6 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+  preset: "ts-jest",
+  testEnvironment: "jsdom",
+  testPathIgnorePatterns: ["/node_modules/", "/tests/"],
+};

package.json

@@ -32,7 +32,9 @@
     "src:watch": "rollup -c -w",
     "check:size": "size-limit",
     "check:types": "tsc -p tests",
-    "test": "run-s 'build' 'check:size' 'check:types' 'test:create:ssr' 'test:headless:chrome'",
+    "check:lint": "eslint src/**",
+    "test": "run-s 'build' 'check:size' 'check:types' 'check:lint' 'test:unit' 'test:create:ssr' 'test:headless:chrome'",
+    "test:unit": "jest",
     "test:create:ssr": "node ./tests/ssr/create-ssr-test.js",
     "test:chrome": "KARMA_BROWSERS=Chrome yarn karma:run",
     "test:headless:chrome": "KARMA_BROWSERS=ChromeHeadless yarn karma:run",
@@ -90,18 +92,25 @@
     "@semantic-release/release-notes-generator": "^10.0.3",
     "@size-limit/preset-small-lib": "^5.0.1",
     "@testing-library/react": "^13.1.1",
+    "@types/jest": "^28.1.1",
     "@types/karma": "^6.3.1",
     "@types/karma-jasmine": "^4.0.1",
     "@types/react": "^18.0.8",
     "@types/react-dom": "^18.0.3",
+    "@typescript-eslint/eslint-plugin": "^5.27.1",
+    "@typescript-eslint/parser": "^5.27.1",
     "babel-loader": "^8.1.0",
     "delay": "^5.0.0",
+    "eslint": "^8.17.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
     "husky": "^8.0.1",
+    "jest": "^28.1.1",
+    "jest-environment-jsdom": "^28.1.1",
     "karma": "^6.3.4",
     "karma-browserstack-launcher": "^1.6.0",
     "karma-chrome-launcher": "^3.0.0",
     "karma-firefox-launcher": "^2.1.1",
-    "karma-jasmine": "^5.0.1",
+    "karma-jasmine": "^4.0.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "^0.0.34",
     "karma-webpack": "^5.0.0",
@@ -114,8 +123,9 @@
     "rollup": "^2.6.1",
     "semantic-release": "^19.0.3",
     "size-limit": "^5.0.1",
+    "ts-jest": "^28.0.4",
     "typescript": "^4.3.5",
-    "webpack": "^5.73.0"
+    "webpack": "^4.1"
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1"

src/index.ts

@@ -161,7 +161,7 @@ function useResizeObserver<T extends Element>(
       width: size.width,
       height: size.height,
     }),
-    [refCallback, size ? size.width : null, size ? size.height : null]
+    [refCallback, size.width, size.height]
   );
 }
 

tests/basic.tsx

@@ -341,7 +341,7 @@ describe("Basic tests", () => {
 
   it("should handle if the onResize handler changes, with the correct render counts", async () => {
     const controller = createController();
-    type OnResizeHandler = (size: ObservedSize) => {};
+    type OnResizeHandler = (size: ObservedSize) => void;
     let changeOnResizeHandler = (handler: OnResizeHandler) => {};
     const Test = () => {
       const [onResize, setOnResize] = useState<OnResizeHandler>(() => () => {});

tests/tsconfig.json

@@ -6,8 +6,15 @@
     "strict": true,
     "esModuleInterop": true,
     "outDir": "dist",
+    "declaration": false,
+    "emitDeclarationOnly": false,
     "jsx": "react",
-    "noEmit": true
+    "noEmit": true,
+    "typeRoots": [
+      "@types/karma", "../node_modules/@types"]
   },
-  "include": [".", "../src"]
+  "include": [".", "../src"],
+  "exclude": [
+    "../src/**/*.test.tsx"
+  ]
 }

tests/utils/useMergedCallbackRef.ts

@@ -13,7 +13,7 @@ const useMergedCallbackRef = (...callbacks: Function[]) => {
     callbacksRegistry.current = callbacks;
   }, [...callbacks]);
 
-  return useCallback((element) => {
+  return useCallback((element: any) => {
     callbacksRegistry.current.forEach((callback) => callback(element));
   }, []);
 };

tsconfig.json

@@ -8,7 +8,13 @@
     "outDir": "dist",
     "declaration": true,
     "emitDeclarationOnly": true,
-    "noImplicitAny": true
+    "noImplicitAny": true,
+    "jsx": "react",
+    "typeRoots": [
+      "tests/@types/jest", "node_modules/@types"]
   },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": [
+    "src/**/*.test.tsx"
+  ]
 }