fix: Small changes and chores

ZeeCoder · ZeeCoder · commit 0cb680086199 · 2022-06-13T21:52:44.000+02:00
- Decreased bundle size
- Added eslint
- Improved testing tooling
diff --git a/.eslintrc.js b/.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",
+  },
+};
diff --git a/.github/workflows/testing.yml b/.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)
diff --git a/.size-limit.json b/.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
   }
 ]
diff --git a/README.md b/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**.
diff --git a/jest.config.js b/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/"],
+};
diff --git a/package.json b/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"
diff --git a/src/index.ts b/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]
   );
 }
 
diff --git a/tests/@types/jest/jasmine/index.d.ts b/tests/@types/jest/jasmine/index.d.ts
diff --git a/tests/@types/jest/karma-jasmine/index.d.ts b/tests/@types/jest/karma-jasmine/index.d.ts
diff --git a/tests/@types/karma/jest/index.d.ts b/tests/@types/karma/jest/index.d.ts
diff --git a/tests/basic.tsx b/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>(() => () => {});
diff --git a/tests/tsconfig.json b/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"
+  ]
 }
diff --git a/tests/utils/useMergedCallbackRef.ts b/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));
   }, []);
 };
diff --git a/tsconfig.json b/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"
+  ]
 }
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,17 +1,17 @@`
`1`	`1`	`[`
`2`	`2`	`{`
`3`	`3`	`"path": "dist/bundle.esm.js",`
`4`		`- "limit": "661B",`
	`4`	`+ "limit": "648B",`
`5`	`5`	`"gzip": true`
`6`	`6`	`},`
`7`	`7`	`{`
`8`	`8`	`"path": "dist/bundle.cjs.js",`
`9`		`- "limit": "637B",`
	`9`	`+ "limit": "625B",`
`10`	`10`	`"gzip": true`
`11`	`11`	`},`
`12`	`12`	`{`
`13`	`13`	`"path": "polyfilled.js",`
`14`		`- "limit": "3.4kB",`
	`14`	`+ "limit": "3384B",`
`15`	`15`	`"gzip": true`
`16`	`16`	`}`
`17`	`17`	`]`
Original file line number	Diff line number	Diff line change
`@@ -161,7 +161,7 @@ function useResizeObserver<T extends Element>(`
`161`	`161`	`width: size.width,`
`162`	`162`	`height: size.height,`
`163`	`163`	`}),`
`164`		`- [refCallback, size ? size.width : null, size ? size.height : null]`
	`164`	`+ [refCallback, size.width, size.height]`
`165`	`165`	`);`
`166`	`166`	`}`
`167`	`167`