chore: Use Biome as a formatter and linter (#131)

* chore: use biome as a formatter

* chore: apply biome formatter

* chore: remove eslint and prettier from deps

* chore: use biome at swr-devtools

* chore: apply biome check

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "[javascript][typescript][json]": {
+		"editor.defaultFormatter": "biomejs.biome",
+    "editor.formatOnSave": true
+	}
+}

biome.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.3.3/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "correctness": {
+        "useExhaustiveDependencies": "off"
+      },
+      "complexity": {
+        "noForEach": "off",
+        "noStaticOnlyClass": "off"
+      },
+      "suspicious": {
+        "noExplicitAny": "off"
+      },
+      "performance": {
+        "noAccumulatingSpread": "off"
+      },
+      "security": {
+        "noDangerouslySetInnerHtml": "off"
+      },
+      "style": {
+        "noNonNullAssertion": "off"
+      },
+      "a11y": {
+        "noSvgWithoutTitle": "off",
+        "useButtonType": "off"
+      }
+    }
+  }
+}

examples/swr-devtools-demo/.babelrc

@@ -1,4 +1,4 @@
 {
-    "presets": ["next/babel"],
-    "plugins": [["styled-components", { "ssr": true }]]
-  }
+  "presets": ["next/babel"],
+  "plugins": [["styled-components", { "ssr": true }]]
+}

examples/swr-devtools-demo/.vscode/settings.json

@@ -1,4 +1,4 @@
 {
   "typescript.tsdk": "../../node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true
-}
+}

examples/swr-devtools-demo/app/debug/SWREntry.tsx

@@ -3,8 +3,7 @@ import useSWR from "swr";
 const sleep = (ms: number) =>
   new Promise((resolve) => setTimeout(resolve, Math.random() * 1000));
 
-const randomNumber = (len: number) =>
-  Math.floor(Math.random() * Math.pow(10, len));
+const randomNumber = (len: number) => Math.floor(Math.random() * 10 ** len);
 
 const fetcher = async () => {
   await sleep(Math.random() * 2000);
@@ -19,9 +18,9 @@ export const SWREntry = ({
   options: any;
 }) => {
   const { data, isLoading, isValidating } = useSWR(
-    "/api/debug?key=" + swrKey,
+    `/api/debug?key=${swrKey}`,
     fetcher,
-    options
+    options,
   );
   if (isLoading) return <p>Loading...</p>;
   if (isValidating) return <p>Validating...</p>;

examples/swr-devtools-demo/app/debug/infinite/page.tsx

@@ -87,7 +87,7 @@ const fetcher = async (url) => {
 export default function Home() {
   const { data, setSize, isValidating } = useSWRInfinite(
     (index) => `/api/list?page=${index + 1}`,
-    fetcher
+    fetcher,
   );
 
   const pages = data ? data.reduce((acc, page) => acc.concat(page), []) : [];

examples/swr-devtools-demo/app/debug/page.tsx

@@ -4,8 +4,8 @@ import Link from "next/link";
 import { useCallback, useState } from "react";
 import { SWRConfiguration, useSWRConfig } from "swr";
 
-import styles from "./debug.module.css";
 import { SWREntry } from "./SWREntry";
+import styles from "./debug.module.css";
 
 type Settings = {
   gridCount: number;
@@ -102,7 +102,7 @@ export default function Home() {
           <h2 className={styles.subtitle}>Data</h2>
           <div className={styles.grid}>
             {Array.from({ length: settings.gridCount }).map((_, i) => {
-              const key = "test" + i;
+              const key = `test${i}`;
               return <SWREntry key={key} swrKey={key} options={options} />;
             })}
           </div>

examples/swr-devtools-demo/biome.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.3.3/schema.json",
+  "extends": ["../../biome.json"],
+  "files": {
+    "ignore": [".next"]
+  }
+}

examples/swr-devtools-demo/components/DevToolsView.tsx

@@ -1,7 +1,7 @@
 import { useContext } from "react";
 import { useSWRConfig } from "swr";
-import { SWRDevToolPanel } from "swr-devtools-panel";
 import { SWRDevToolsContext } from "swr-devtools";
+import { SWRDevToolPanel } from "swr-devtools-panel";
 
 // The way to use SWR DevTools as a React Component
 export const DevToolsView = () => {

examples/swr-devtools-demo/package.json

@@ -6,7 +6,11 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "tsc --noEmit"
+    "format": "biome format --write .",
+    "fix:biome": "biome check --apply-unsafe .",
+    "lint": "run-p lint:*",
+    "lint:biome": "biome check .",
+    "lint:tsc": "tsc --noEmit"
   },
   "dependencies": {
     "@vercel/analytics": "^0.1.11",

examples/swr-devtools-demo/pages/_app.tsx

@@ -1,6 +1,6 @@
-import "../styles/globals.css";
-import { SWRDevTools } from "swr-devtools";
 import { Analytics } from "@vercel/analytics/react";
+import { SWRDevTools } from "swr-devtools";
+import "../styles/globals.css";
 
 function MyApp({ Component, pageProps }) {
   return (

examples/swr-devtools-demo/pages/index.tsx

@@ -1,10 +1,10 @@
 import Head from "next/head";
-import Link from "next/link";
 import Image from "next/image";
-import styles from "../styles/Home.module.css";
-import useSWR from "swr";
+import Link from "next/link";
 import { useEffect } from "react";
+import useSWR from "swr";
 import { DevToolsView } from "../components/DevToolsView";
+import styles from "../styles/Home.module.css";
 
 import cachePanelImage from "../public/img/cache-view.png";
 import historyPanelImage from "../public/img/history-view.png";
@@ -33,7 +33,7 @@ export default function Home() {
   });
   const { data, mutate, error } = useSWR(
     `/api/hello${typeof window !== "undefined" ? location.search : ""}`,
-    fetcher
+    fetcher,
   );
 
   useEffect(() => {
@@ -101,9 +101,9 @@ export default function Home() {
             SWRDevTools extension on your application!
           </p>
           <p>
-            ⚠️ If you use SWR v1, Install <code>swr-devtools</code> and wrap
-            your application with the <code>SWRDevTools</code> component. Please
-            see the more details in{" "}
+            ⚠️ If you use SWR v1, Install <code>swr-devtools</code> and wrap your
+            application with the <code>SWRDevTools</code> component. Please see
+            the more details in{" "}
             <a
               href="https://github.com/koba04/swr-devtools/#how-to-use"
               target="_blank"

examples/swr-devtools-demo/pages/infinite.tsx

@@ -87,7 +87,7 @@ const fetcher = async (url) => {
 export default function Home() {
   const { data, setSize, isValidating } = useSWRInfinite(
     (index) => `/api/list?page=${index + 1}`,
-    fetcher
+    fetcher,
   );
 
   const pages = data ? data.reduce((acc, page) => acc.concat(page), []) : [];

examples/swr-v1-devtools-demo/.babelrc

@@ -1,4 +1,4 @@
 {
-    "presets": ["next/babel"],
-    "plugins": [["styled-components", { "ssr": true }]]
-  }
+  "presets": ["next/babel"],
+  "plugins": [["styled-components", { "ssr": true }]]
+}

examples/swr-v1-devtools-demo/biome.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.3.3/schema.json",
+  "extends": ["../../biome.json"],
+  "files": {
+    "ignore": [".next"]
+  }
+}

examples/swr-v1-devtools-demo/package.json

@@ -6,7 +6,11 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "tsc --noEmit"
+    "format": "biome format --write .",
+    "fix:biome": "biome check --apply-unsafe .",
+    "lint": "run-p lint:*",
+    "lint:biome": "biome check .",
+    "lint:tsc": "tsc --noEmit"
   },
   "dependencies": {
     "next": "^12.3.1",

examples/swr-v1-devtools-demo/pages/_app.tsx

@@ -1,6 +1,6 @@
-import "../styles/globals.css";
 import { SWRConfig } from "swr";
 import { SWRDevTools } from "swr-devtools";
+import "../styles/globals.css";
 
 const fetcher = async (url) => {
   const res = await fetch(url);

examples/swr-v1-devtools-demo/pages/index.tsx

@@ -1,15 +1,15 @@
 import Head from "next/head";
 import Link from "next/link";
+import { useEffect } from "react";
 import { highlight } from "sugar-high";
-import styles from "../styles/Home.module.css";
 import useSWR from "swr";
-import { useEffect } from "react";
 import { DevToolsView } from "../components/DevToolsView";
+import styles from "../styles/Home.module.css";
 
 export default function Home() {
   // const { data, mutate } = useSWR("/api/hello?error=true");
   const { data, mutate, error } = useSWR(
-    `/api/hello${typeof window !== "undefined" ? location.search : ""}`
+    `/api/hello${typeof window !== "undefined" ? location.search : ""}`,
   );
   const { data: data2 } = useSWR("/api/hello?foo");
 

examples/swr-v1-devtools-demo/pages/infinite.tsx

@@ -7,7 +7,7 @@ import styles from "../styles/infinite.module.css";
 
 export default function Home() {
   const { data, setSize } = useSWRInfinite(
-    (index) => `/api/list?page=${index + 1}`
+    (index) => `/api/list?page=${index + 1}`,
   );
 
   const pages = data ? data.reduce((acc, page) => acc.concat(page), []) : [];

examples/swr-v1-legacy-devtools-demo/.babelrc

@@ -1,4 +1,4 @@
 {
-    "presets": ["next/babel"],
-    "plugins": [["styled-components", { "ssr": true }]]
-  }
+  "presets": ["next/babel"],
+  "plugins": [["styled-components", { "ssr": true }]]
+}

examples/swr-v1-legacy-devtools-demo/biome.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.3.3/schema.json",
+  "extends": ["../../biome.json"],
+  "files": {
+    "ignore": [".next"]
+  }
+}

examples/swr-v1-legacy-devtools-demo/package.json

@@ -6,7 +6,11 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "tsc --noEmit"
+    "format": "biome format --write .",
+    "fix:biome": "biome check --apply-unsafe .",
+    "lint": "run-p lint:*",
+    "lint:biome": "biome check .",
+    "lint:tsc": "tsc --noEmit"
   },
   "dependencies": {
     "next": "^12.3.1",

examples/swr-v1-legacy-devtools-demo/pages/_app.tsx

@@ -1,6 +1,6 @@
-import "../styles/globals.css";
 import { SWRConfig } from "swr";
 import { SWRDevTools } from "swr-devtools";
+import "../styles/globals.css";
 
 const fetcher = async (url) => {
   const res = await fetch(url);

examples/swr-v1-legacy-devtools-demo/pages/index.tsx

@@ -1,15 +1,15 @@
 import Head from "next/head";
 import Link from "next/link";
+import { useEffect } from "react";
 import { highlight } from "sugar-high";
-import styles from "../styles/Home.module.css";
 import useSWR from "swr";
-import { useEffect } from "react";
 import { DevToolsView } from "../components/DevToolsView";
+import styles from "../styles/Home.module.css";
 
 export default function Home() {
   // const { data, mutate } = useSWR("/api/hello?error=true");
   const { data, mutate, error } = useSWR(
-    `/api/hello${typeof window !== "undefined" ? location.search : ""}`
+    `/api/hello${typeof window !== "undefined" ? location.search : ""}`,
   );
   const { data: data2 } = useSWR("/api/hello?foo");
 

examples/swr-v1-legacy-devtools-demo/pages/infinite.tsx

@@ -7,7 +7,7 @@ import styles from "../styles/infinite.module.css";
 
 export default function Home() {
   const { data, setSize } = useSWRInfinite(
-    (index) => `/api/list?page=${index + 1}`
+    (index) => `/api/list?page=${index + 1}`,
   );
 
   const pages = data ? data.reduce((acc, page) => acc.concat(page), []) : [];

package.json

@@ -2,17 +2,15 @@
   "name": "swr-devtools",
   "version": "0.0.1",
   "private": true,
-  "workspaces": [
-    "packages/*",
-    "examples/*"
-  ],
+  "workspaces": ["packages/*", "examples/*"],
   "scripts": {
     "build": "run-s build:devtools build:panel build:extensions",
     "build:devtools": "pnpm --filter \"swr-devtools\" build",
     "build:demo": "pnpm --filter \"swr-devtools-demo\" build",
     "build:extensions": "pnpm --filter \"swr-devtools-extensions\" build",
     "build:panel": "pnpm --filter \"swr-devtools-panel\" build",
     "deploy:demo": "run-s build:devtools build:panel build:demo",
+    "format": "pnpm -r format",
     "prerelease": "run-s build lint",
     "release": "lerna publish --conventional-commits",
     "start:demo": "pnpm --filter swr-devtools-demo dev",
@@ -21,9 +19,8 @@
     "start": "run-p -l start:*",
     "v1": "pnpm --filter swr-v1-devtools-demo dev",
     "v1-legacy": "pnpm --filter swr-v1-legacy-devtools-demo dev",
-    "lint:eslint": "eslint '**/pages/**/*' '**/src/**/*'",
-    "lint:tsc": "pnpm -r lint",
-    "lint": "run-p -l lint:*",
+    "fix:biome": "pnpm -r fix:biome",
+    "lint": "pnpm -r lint",
     "test": "run-p -l test:*",
     "test:panel": "pnpm --filter swr-devtools-panel test",
     "test:devtools": "pnpm --filter swr-devtools test"
@@ -33,11 +30,9 @@
   "license": "MIT",
   "packageManager": "[email protected]",
   "devDependencies": {
-    "@cybozu/eslint-config": "^17.0.3",
-    "eslint": "^8.23.1",
+    "@biomejs/biome": "1.3.3",
     "lerna": "^5.5.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.7.1",
     "rimraf": "^3.0.2"
   }
 }