style: adopt ESM and ESLint Flat Config

Signed-off-by: Ryan Cao <70191398+ryanccn@users.noreply.github.com>
ryanccn · Feb 13, 2024 · 3dbb7fe · 3dbb7fe
1 parent ff007e7
commit 3dbb7fe
Show file tree

Hide file tree

Showing 36 changed files with 664 additions and 415 deletions.
diff --git a/.eslintrc b/.eslintrc
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,46 @@
+import js from "@eslint/js";
+import ts from "typescript-eslint";
+import unicorn from "eslint-plugin-unicorn";
+
+import globals from "globals";
+
+import { FlatCompat } from "@eslint/eslintrc";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({ baseDirectory: __dirname });
+
+export default ts.config(
+  js.configs.recommended,
+  ...ts.configs.recommendedTypeChecked,
+  unicorn.configs["flat/recommended"],
+  ...compat.extends("plugin:@next/next/recommended"),
+
+  {
+    languageOptions: {
+      parserOptions: {
+        project: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+  },
+
+  {
+    rules: {
+      "unicorn/prevent-abbreviations": "off",
+      "unicorn/no-null": "off",
+      "unicorn/filename-case": "off",
+      "unicorn/no-nested-ternary": "off",
+    },
+  },
+
+  {
+    files: ["**/*.js"],
+    ...ts.configs.disableTypeChecked,
+  },
+);
diff --git a/next.config.js b/next.config.js
@@ -1,9 +1,10 @@
 /* eslint-disable unicorn/prefer-module */
 /* eslint-disable @typescript-eslint/no-var-requires */
 
-const { withPlausibleProxy } = require("next-plausible");
+import { withPlausibleProxy } from "next-plausible";
+import makeBundleAnalyzer from "@next/bundle-analyzer";
 
-const withBundleAnalyzer = require("@next/bundle-analyzer")({
+const withBundleAnalyzer = makeBundleAnalyzer({
   enabled: process.env.ANALYZE === "true",
   openAnalyzer: false,
 });
@@ -118,4 +119,4 @@ const nextConfig = withPlausibleProxy()(
   }),
 );
 
-module.exports = nextConfig;
+export default nextConfig;
diff --git a/package.json b/package.json
@@ -2,13 +2,14 @@
   "name": "moddermore",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint .",
     "format": "prettier --write .",
-    "utils:minecraftVersions": "node scripts/updateVersions.mjs"
+    "utils:minecraftVersions": "node scripts/updateVersions.js"
   },
   "dependencies": {
     "@iarna/toml": "^2.2.5",
@@ -37,24 +38,26 @@
     "valibot": "^0.28.1"
   },
   "devDependencies": {
+    "@eslint/eslintrc": "^3.0.1",
+    "@eslint/js": "^8.56.0",
     "@headlessui/tailwindcss": "^0.2.0",
     "@microsoft/eslint-formatter-sarif": "^3.0.0",
     "@next/bundle-analyzer": "^14.1.0",
+    "@next/eslint-plugin-next": "^14.1.0",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
     "@types/file-saver": "^2.0.7",
     "@types/node": "20.11.17",
     "@types/react": "18.2.55",
     "@types/react-dom": "18.2.19",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
     "@upstash/ratelimit": "^1.0.1",
     "@vercel/kv": "^1.0.1",
     "autoprefixer": "^10.4.17",
     "discord-api-types": "^0.37.69",
     "eslint": "^8.56.0",
     "eslint-config-next": "14.1.0",
     "eslint-plugin-unicorn": "^51.0.1",
+    "globals": "^14.0.0",
     "gray-matter": "^4.0.3",
     "image-size": "^1.1.1",
     "kleur": "^4.1.5",
@@ -72,6 +75,7 @@
     "tailwindcss": "^3.4.1",
     "tsx": "^4.7.1",
     "typescript": "^5.3.3",
+    "typescript-eslint": "^7.0.1",
     "unified": "^11.0.4"
   },
   "pnpm": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/postcss.config.js → postcss.config.cjs b/postcss.config.js → postcss.config.cjs
diff --git a/scripts/updateVersions.mjs → scripts/updateVersions.js b/scripts/updateVersions.mjs → scripts/updateVersions.js
@@ -1,5 +1,3 @@
-import fetch from "node-fetch";
-
 import { writeFile } from "node:fs/promises";
 import { format } from "prettier";
 

diff --git a/scripts/vercelCheck.cjs → scripts/vercelCheck.js b/scripts/vercelCheck.cjs → scripts/vercelCheck.js
diff --git a/src/components/FullLoadingScreen.tsx b/src/components/FullLoadingScreen.tsx
@@ -14,7 +14,7 @@ export const FullLoadingScreen = ({ title, label }: { title?: string; label?: st
       )}
       <div className="flex flex-col items-center gap-y-6">
         <Spinner className="mb-4 block h-8 w-8 stroke-indigo-500 dark:stroke-indigo-400" />
-        <span className={!label ? "sr-only" : "text-neutral-700 dark:text-neutral-300"}>
+        <span className={label ? "text-neutral-700 dark:text-neutral-300" : "sr-only"}>
           {label ?? "Fetching data"}
         </span>
       </div>

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -71,34 +71,7 @@ const Header = () => {
         </div>
       </div>
 
-      {status !== "loading" ? (
-        data ? (
-          <div className="flex flex-row items-center gap-x-4">
-            <Link href="/new" className={buttonVariants()}>
-              <PlusIcon className="block h-5 w-5" />
-              <span>Create</span>
-            </Link>
-            <Link href="/lists" className="p-1">
-              <img
-                src={data.extraProfile.profilePicture ?? undefined}
-                width={32}
-                height={32}
-                alt="Lists"
-                className="rounded-full bg-neutral-100 dark:bg-neutral-800"
-              />
-            </Link>
-          </div>
-        ) : (
-          <Button
-            onClick={() => {
-              nextAuthSignIn();
-            }}
-          >
-            <UserIcon className="block h-5 w-5" />
-            <span>Sign in</span>
-          </Button>
-        )
-      ) : (
+      {status === "loading" ? (
         <div
           className={twMerge(
             buttonVariants({
@@ -108,6 +81,33 @@ const Header = () => {
         >
           &nbsp;
         </div>
+      ) : data ? (
+        <div className="flex flex-row items-center gap-x-4">
+          <Link href="/new" className={buttonVariants()}>
+            <PlusIcon className="block h-5 w-5" />
+            <span>Create</span>
+          </Link>
+          <Link href="/lists" className="p-1">
+            <img
+              src={data.extraProfile.profilePicture ?? undefined}
+              width={32}
+              height={32}
+              alt="Lists"
+              className="rounded-full bg-neutral-100 dark:bg-neutral-800"
+            />
+          </Link>
+        </div>
+      ) : (
+        <Button
+          onClick={() => {
+            nextAuthSignIn().catch((error) => {
+              console.error(error);
+            });
+          }}
+        >
+          <UserIcon className="block h-5 w-5" />
+          <span>Sign in</span>
+        </Button>
       )}
     </nav>
   );