fix: use husky v8 properly

Author: debater-coder

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run validate

.huskyrc

@@ -13,7 +13,8 @@
     "check-format": "npm run prettier -- --list-different",
     "lint": "eslint --ignore-path .gitignore .",
     "check-types": "tsc --pretty",
-    "validate": "npm run check-types && npm run lint && npm run check-format"
+    "validate": "npm run check-types && npm run lint && npm run check-format",
+    "prepare": "husky install"
   },
   "repository": {
     "type": "git",
@@ -82,8 +83,8 @@
     "eslint-plugin-no-loops": "^0.3.0",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "husky": "^8.0.2",
     "prettier": "2.6.2",
-    "vite": "^3.0.2"
+    "vite": "^3.0.2",
+    "husky": "^8.0.0"
   }
 }

package-lock.json

@@ -1,42 +1,42 @@
-import { CLSMetric } from "web-vitals";
-
-const vitalsUrl = "https://vitals.vercel-analytics.com/v1/vitals";
-
-function getConnectionSpeed() {
-  // This line makes all of my tools angry, and I can't find any type definitions for this, so I just got them to ignore it.
-  // prettier-ignore
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  return "connection" in navigator && "effectiveType" in navigator["connection"] ? navigator["connection"]["effectiveType"] : "";
-}
-
-export function sendToVercelAnalytics(metric: CLSMetric) {
-  const analyticsId = import.meta.env.VITE_VERCEL_ANALYTICS_ID;
-  if (!analyticsId) {
-    return;
-  }
-
-  const body = {
-    dsn: analyticsId,
-    id: metric.id,
-    page: window.location.pathname,
-    href: window.location.href,
-    event_name: metric.name,
-    value: metric.value.toString(),
-    speed: getConnectionSpeed(),
-  };
-
-  const blob = new Blob([new URLSearchParams(body).toString()], {
-    // This content type is necessary for `sendBeacon`
-    type: "application/x-www-form-urlencoded",
-  });
-  if (navigator.sendBeacon) {
-    navigator.sendBeacon(vitalsUrl, blob);
-  } else
-    fetch(vitalsUrl, {
-      body: blob,
-      method: "POST",
-      credentials: "omit",
-      keepalive: true,
-    });
-}
+import { CLSMetric } from "web-vitals";
+
+const vitalsUrl = "https://vitals.vercel-analytics.com/v1/vitals";
+
+function getConnectionSpeed() {
+  // This line makes all of my tools angry, and I can't find any type definitions for this, so I just got them to ignore it.
+  // prettier-ignore
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  return "connection" in navigator && "effectiveType" in navigator["connection"] ? navigator["connection"]["effectiveType"] : "";
+}
+
+export function sendToVercelAnalytics(metric: CLSMetric) {
+  const analyticsId = import.meta.env.VITE_VERCEL_ANALYTICS_ID;
+  if (!analyticsId) {
+    return;
+  }
+
+  const body = {
+    dsn: analyticsId,
+    id: metric.id,
+    page: window.location.pathname,
+    href: window.location.href,
+    event_name: metric.name,
+    value: metric.value.toString(),
+    speed: getConnectionSpeed(),
+  };
+
+  const blob = new Blob([new URLSearchParams(body).toString()], {
+    // This content type is necessary for `sendBeacon`
+    type: "application/x-www-form-urlencoded",
+  });
+  if (navigator.sendBeacon) {
+    navigator.sendBeacon(vitalsUrl, blob);
+  } else
+    fetch(vitalsUrl, {
+      body: blob,
+      method: "POST",
+      credentials: "omit",
+      keepalive: true,
+    });
+}