feat: migrate app to Typescript

Also, apply minor optimisation on the custom hook and add ESLint

Author: SMAKSS

.eslintcache

@@ -0,0 +1 @@
+[{"/Users/smakss/Development/SMAKSS/react-scroll-direction/src/hooks/index.ts":"1","/Users/smakss/Development/SMAKSS/react-scroll-direction/src/hooks/useDetectScroll.ts":"2"},{"size":64,"mtime":1684533639135,"results":"3","hashOfConfig":"4"},{"size":1493,"mtime":1684534510896,"results":"5","hashOfConfig":"4"},{"filePath":"6","messages":"7","suppressedMessages":"8","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1v57251",{"filePath":"9","messages":"10","suppressedMessages":"11","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/smakss/Development/SMAKSS/react-scroll-direction/src/hooks/index.ts",[],[],"/Users/smakss/Development/SMAKSS/react-scroll-direction/src/hooks/useDetectScroll.ts",[],[]]

.eslintignore

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

.eslintrc.json

@@ -0,0 +1,55 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended"
+  ],
+  // Specifying Parser
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "tsconfigRootDir": ".",
+    "project": ["./tsconfig.json"]
+  },
+  // Configuring third-party plugins
+  "plugins": ["@typescript-eslint"],
+  // Resolve imports
+
+  "rules": {
+    "linebreak-style": "off",
+    // Configure prettier
+    "prettier/prettier": [
+      "error",
+      {
+        "printWidth": 80,
+        "endOfLine": "lf",
+        "singleQuote": false,
+        "tabWidth": 2,
+        "trailingComma": "es5"
+      }
+    ],
+    // Disallow the `any` type.
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/ban-types": [
+      "error",
+      {
+        "extendDefaults": true,
+        "types": {
+          "{}": false
+        }
+      }
+    ],
+    "react-hooks/exhaustive-deps": "off",
+    // Enforce the use of the shorthand syntax.
+    "object-shorthand": "error",
+    "no-console": "warn"
+  }
+}

.github/dependabot.yml

@@ -1,7 +1,13 @@
 version: 2
 updates:
-- package-ecosystem: npm
-  directory: "/"
-  schedule:
-    interval: daily
-  open-pull-requests-limit: 10
+  - package-ecosystem: npm
+    directory: "/"
+    schedule:
+      interval: daily
+    reviewers:
+      - "SMAKSS"
+    assignees:
+      - "SMAKSS"
+    labels:
+      - "dependencies"
+    open-pull-requests-limit: 10

package.json

@@ -4,14 +4,18 @@
     "url": "https://github.com/SMAKSS/react-scroll-direction/issues"
   },
   "description": "Detect scroll direction in react applications.",
-  "dependencies": {
-    "prop-types": "^15.8.1"
-  },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-typescript": "^11.1.1",
+    "@types/react": "^18.2.6",
+    "@typescript-eslint/eslint-plugin": "^5.59.6",
+    "@typescript-eslint/parser": "^5.59.6",
+    "eslint": "^8.41.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "prettier": "^2.8.8",
     "rollup": "^3.2.3",
-    "ts-migrate": "^0.1.35",
     "typescript": "^5.0.4"
   },
   "exports": {
@@ -47,8 +51,10 @@
     "url": "git+https://github.com/SMAKSS/react-scroll-direction.git"
   },
   "scripts": {
-    "generate": "rollup -c"
+    "generate": "rollup -c",
+    "lint": "tsc --noEmit && eslint src/**/*.ts --cache --max-warnings=0",
+    "lint:fix": "eslint src/**/*.ts --fix"
   },
   "type": "module",
-  "version": "1.0.5"
+  "version": "1.1.0-beta"
 }

rollup.config.js

@@ -1,10 +1,11 @@
 import resolve from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
+import typescript from "@rollup/plugin-typescript";
 import packageJson from "./package.json" assert { type: "json" };
 
 export default [
   {
-    input: "src/index.js",
+    input: "src/index.ts",
     output: [
       {
         file: packageJson.main,
@@ -17,7 +18,7 @@ export default [
         sourcemap: true,
       },
     ],
-    plugins: [resolve(), commonjs()],
+    plugins: [resolve(), commonjs(), typescript()],
     external: [
       ...Object.keys(packageJson.devDependencies || {}),
       ...Object.keys(packageJson.peerDependencies || {}),

src/hooks/useDetectScroll.ts

@@ -1,43 +1,52 @@
-// @ts-expect-error TS(2307): Cannot find module 'react' or its corresponding ty... Remove this comment to see the full error message
-import { useState, useEffect } from "react";
-// @ts-expect-error TS(7016): Could not find a declaration file for module 'prop... Remove this comment to see the full error message
-import PropTypes from "prop-types";
+import { useState, useEffect, useCallback } from "react";
 
-function useDetectScroll(props: any) {
+enum Axis {
+  X = "x",
+  Y = "y",
+}
+
+enum Direction {
+  Up = "up",
+  Down = "down",
+  Left = "left",
+  Right = "right",
+  Still = "still",
+}
+
+type ScrollProps = {
+  thr?: number;
+  axis?: Axis;
+  scrollUp?: string;
+  scrollDown?: string;
+  still?: string;
+};
+
+function useDetectScroll(props: ScrollProps) {
   const {
     thr = 0,
-    axis = "y",
-    scrollUp = axis === "y" ? "up" : "left",
-    scrollDown = axis === "y" ? "down" : "right",
-    still = "still",
+    axis = Axis.Y,
+    scrollUp = axis === Axis.Y ? Direction.Up : Direction.Left,
+    scrollDown = axis === Axis.Y ? Direction.Down : Direction.Right,
+    still = Direction.Still,
   } = props;
-  const [scrollDir, setScrollDir] = useState(still);
 
-  useEffect(() => {
-    const threshold = thr > 0 ? thr : 0;
-    let ticking = false;
-    let lastScroll: any = undefined;
-
-    axis === "y"
-      ? (lastScroll = window.pageYOffset)
-      : (lastScroll = window.pageXOffset);
+  const [scrollDir, setScrollDir] = useState(still);
 
-    const updateScrollDir = () => {
-      let scroll = undefined;
+  const threshold = Math.max(0, thr);
+  let ticking = false;
+  let lastScroll: number = axis === Axis.Y ? window.scrollY : window.scrollX;
 
-      axis === "y"
-        ? (scroll = window.pageYOffset)
-        : (scroll = window.pageXOffset);
+  const updateScrollDir = useCallback(() => {
+    const scroll = axis === Axis.Y ? window.scrollY : window.scrollX;
 
-      if (Math.abs(scroll - lastScroll) < threshold) {
-        ticking = false;
-        return;
-      }
+    if (Math.abs(scroll - lastScroll) >= threshold) {
       setScrollDir(scroll > lastScroll ? scrollDown : scrollUp);
-      lastScroll = scroll > 0 ? scrollY : 0;
-      ticking = false;
-    };
+      lastScroll = Math.max(0, scroll);
+    }
+    ticking = false;
+  }, [axis, threshold, scrollDown, scrollUp]);
 
+  useEffect(() => {
     const onScroll = () => {
       if (!ticking) {
         window.requestAnimationFrame(updateScrollDir);
@@ -48,17 +57,9 @@ function useDetectScroll(props: any) {
     window.addEventListener("scroll", onScroll);
 
     return () => window.removeEventListener("scroll", onScroll);
-  }, [scrollDir]);
+  }, [updateScrollDir]);
 
   return [scrollDir];
 }
 
 export default useDetectScroll;
-
-useDetectScroll.propTypes = {
-  thr: PropTypes.number,
-  axis: PropTypes.string,
-  scrollUp: PropTypes.string,
-  scrollDown: PropTypes.string,
-  still: PropTypes.string,
-};

src/tsconfig.json renamed to tsconfig.json

@@ -11,7 +11,7 @@
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
     /* Language and Environment */
-    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
@@ -25,9 +25,9 @@
     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
 
     /* Modules */
-    "module": "commonjs",                                /* Specify what module code is generated. */
+    "module": "esnext" /* Specify what module code is generated. */,
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
-    // "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
+    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
@@ -77,12 +77,12 @@
     // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
     // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
     // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
-    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
     // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
-    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
 
     /* Type Checking */
-    "strict": true,                                      /* Enable all strict type-checking options. */
+    "strict": true /* Enable all strict type-checking options. */,
     // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
     // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
     // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
@@ -104,6 +104,6 @@
 
     /* Completeness */
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
   }
 }