chore: Add Biome as a formatter and linter (#104)

Author: 7nohe

.github/workflows/test.yml

@@ -45,6 +45,10 @@ jobs:
       - name: Run tsc
         run: pnpm --filter @7nohe/react-app test:generated
 
+      - name: Run biome
+        run: pnpm biome check .
+        if: ${{ matrix.os == 'ubuntu-latest' }}
+
       - name: Run test
         run: pnpm test
 

biome.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.7.2/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "files": {
+    "ignore": ["dist", "examples/react-app/openapi", "coverage"]
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2
+  }
+}

examples/react-app/package.json

@@ -9,18 +9,18 @@
     "dev:mock": "prism mock ./petstore.yaml --dynamic",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "generate:api": "rimraf ./openapi && node ../../dist/cli.mjs -i ./petstore.yaml -c axios --request ./request.ts",
+    "generate:api": "rimraf ./openapi && node ../../dist/cli.mjs -i ./petstore.yaml -c axios --request ./request.ts --format=biome --lint=biome",
     "test:generated": "tsc -p ./tsconfig.openapi.json --noEmit"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.18.1",
     "axios": "^1.6.7",
     "form-data": "~4.0.0",
-    "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@biomejs/biome": "1.7.2",
     "@stoplight/prism-cli": "^5.5.2",
     "@types/react": "^18.2.52",
     "@types/react-dom": "^18.2.18",

examples/react-app/request.ts

@@ -18,45 +18,48 @@ const axiosInstance = axios.create({
 
 // Add a request interceptor
 axiosInstance.interceptors.request.use(
-    function (config) {
-        // Do something before request is sent
-        if (!config.url || !config.params) {
-            return config;
-        }
-
-        Object.entries<any>(config.params).forEach(([key, value]) => {
-            const stringToSearch = `{${key}}`;
-            if(config.url !== undefined && config.url.search(stringToSearch) !== -1) {
-                config.url = config.url.replace(`{${key}}`, encodeURIComponent(value));
-                delete config.params[key];
-            }
-        });
+  (config) => {
+    // Do something before request is sent
+    if (!config.url || !config.params) {
+      return config;
+    }
 
-        return  config;
-    },
-    function (error) {
-        // Do something with request error
-        return Promise.reject(error);
+    for (const [key, value] of Object.entries<string>(config.params)) {
+      const stringToSearch = `{${key}}`;
+      if (
+        config.url !== undefined &&
+        config.url.search(stringToSearch) !== -1
+      ) {
+        config.url = config.url.replace(`{${key}}`, encodeURIComponent(value));
+        delete config.params[key];
+      }
     }
+
+    return config;
+  },
+  (error) => {
+    // Do something with request error
+    return Promise.reject(error);
+  },
 );
 
 // Add a response interceptor
 axiosInstance.interceptors.response.use(
-  function (response) {
+  (response) => {
     // Any status code that lie within the range of 2xx cause this function to trigger
     // Do something with response data
     return response;
   },
-  function (error) {
+  (error) => {
     // Any status codes that falls outside the range of 2xx cause this function to trigger
     // Do something with response error
     return Promise.reject(error);
-  }
+  },
 );
 
 export const request = <T>(
   config: OpenAPIConfig,
-  options: ApiRequestOptions
+  options: ApiRequestOptions,
 ): CancelablePromise<T> => {
   return new CancelablePromise((resolve, reject, onCancel) => {
     onCancel(() => source.cancel("The user aborted a request."));

examples/react-app/src/App.tsx

@@ -1,14 +1,14 @@
 import "./App.css";
+import { useState } from "react";
 import {
+  UseDefaultServiceFindPetsKeyFn,
   useDefaultServiceAddPet,
   useDefaultServiceFindPets,
-  UseDefaultServiceFindPetsKeyFn,
   useDefaultServiceGetNotDefined,
   useDefaultServicePostNotDefined,
 } from "../openapi/queries";
-import { useState } from "react";
-import { queryClient } from "./queryClient";
 import { SuspenseParent } from "./components/SuspenseParent";
+import { queryClient } from "./queryClient";
 
 function App() {
   const [tags, _setTags] = useState<string[]>([]);
@@ -17,7 +17,7 @@ function App() {
   const { data, error, refetch } = useDefaultServiceFindPets({ tags, limit });
   // This is an example of using a hook that has all parameters optional;
   // Here we do not have to pass in an object
-  const {} = useDefaultServiceFindPets();
+  const { data: _ } = useDefaultServiceFindPets();
 
   // This is an example of a query that is not defined in the OpenAPI spec
   // this defaults to any - here we are showing how to override the type
@@ -32,20 +32,23 @@ function App() {
     return (
       <div>
         <p>Failed to fetch pets</p>
-        <button onClick={() => refetch()}>Retry</button>
+        <button type="button" onClick={() => refetch()}>
+          Retry
+        </button>
       </div>
     );
 
   return (
     <div className="App">
       <h1>Pet List</h1>
       <ul>
-        {data instanceof Array &&
+        {Array.isArray(data) &&
           data?.map((pet, index) => (
-            <li key={pet.id + "-" + index}>{pet.name}</li>
+            <li key={`${pet.id}-${index}`}>{pet.name}</li>
           ))}
       </ul>
       <button
+        type="button"
         onClick={() => {
           addPet(
             {
@@ -59,7 +62,7 @@ function App() {
                 console.log("success");
               },
               onError: (error) => console.error(error),
-            }
+            },
           );
         }}
       >

examples/react-app/src/main.tsx

@@ -3,8 +3,8 @@ import ReactDOM from "react-dom/client";
 import App from "./App";
 import "./index.css";
 import { QueryClientProvider } from "@tanstack/react-query";
-import { queryClient } from "./queryClient";
 import { prefetchUseDefaultServiceFindPets } from "../openapi/queries/prefetch";
+import { queryClient } from "./queryClient";
 
 async function PrefetchData() {
   await prefetchUseDefaultServiceFindPets(queryClient);
@@ -16,6 +16,6 @@ PrefetchData().then(() => {
       <QueryClientProvider client={queryClient}>
         <App />
       </QueryClientProvider>
-    </React.StrictMode>
+    </React.StrictMode>,
   );
 });

examples/react-app/src/queryClient.tsx

@@ -1,3 +1,3 @@
-import { QueryClient } from '@tanstack/react-query';
+import { QueryClient } from "@tanstack/react-query";
 
 export const queryClient = new QueryClient();

examples/react-app/vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()]
-})
+  plugins: [react()],
+});

lefthook.yml

@@ -0,0 +1,8 @@
+pre-commit:
+  commands:
+    check:
+      glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
+      run: npx biome check --apply --no-errors-on-unmatched --files-ignore-unknown=true ./ && git update-index --again
+    test:
+      glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
+      run: npx vitest run

package.json

@@ -6,9 +6,7 @@
     "openapi-rq": "dist/cli.mjs"
   },
   "type": "module",
-  "workspaces": [
-    "examples/*"
-  ],
+  "workspaces": ["examples/*"],
   "scripts": {
     "build": "rimraf dist && tsc -p tsconfig.json",
     "preview": "npm run build && npm -C examples/react-app run generate:api",
@@ -22,9 +20,7 @@
   },
   "homepage": "https://github.com/7nohe/openapi-react-query-codegen",
   "bugs": "https://github.com/7nohe/openapi-react-query-codegen/issues",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "keywords": [
     "codegen",
     "react-query",
@@ -38,11 +34,13 @@
   "author": "Daiki Urata (@7nohe)",
   "license": "MIT",
   "devDependencies": {
+    "@biomejs/biome": "1.7.2",
     "@hey-api/openapi-ts": "0.42.1",
     "@types/node": "^20.10.6",
     "@vitest/coverage-v8": "^1.5.0",
     "commander": "^12.0.0",
     "glob": "^10.3.10",
+    "lefthook": "^1.6.10",
     "rimraf": "^5.0.5",
     "ts-morph": "^22.0.0",
     "typescript": "^5.3.3",