chore: use biome as formatter

.github/workflows/pr.yml

@@ -21,6 +21,12 @@ jobs:
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
+      - name: Setup Biome
+        uses: biomejs/setup-biome@v2
+        with:
+          version: latest
+      - name: Run Biome
+        run: biome ci .
       - name: Setup pnpm
         uses: pnpm/action-setup@v2
         with:

.lintstagedrc

@@ -1,3 +1,3 @@
 {
-  "*": ["prettier --write"]
+  "*": ["biome check --apply --no-errors-on-unmatched"]
 }

biome.json

@@ -0,0 +1,51 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
+  "files": {
+    "ignore": [
+      "**/.next",
+      "**/.nx/cache",
+      "**/.svelte-kit",
+      "**/.output",
+      "**/.vinxi",
+      "**/build",
+      "**/coverage",
+      "**/dist",
+      "**/query-codemods/**/__testfixtures__",
+      "**/pnpm-lock.yaml",
+      "packages/**/tsup.config.bundled*.mjs",
+      "packages/**/vite.config.ts.*.mjs",
+      "**/tsconfig.vitest-temp.json"
+    ],
+    "ignoreUnknown": true
+  },
+  "formatter": {
+    "enabled": true,
+    "formatWithErrors": false,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineEnding": "lf",
+    "lineWidth": 80,
+    "attributePosition": "auto"
+  },
+  "organizeImports": { "enabled": false },
+  "linter": { "enabled": false },
+  "javascript": {
+    "formatter": {
+      "jsxQuoteStyle": "double",
+      "quoteProperties": "asNeeded",
+      "trailingComma": "all",
+      "semicolons": "asNeeded",
+      "arrowParentheses": "always",
+      "bracketSpacing": true,
+      "bracketSameLine": false,
+      "quoteStyle": "single",
+      "attributePosition": "auto"
+    }
+  },
+  "json": {
+    "parser": {
+      "allowComments": true
+    }
+  },
+  "overrides": [{ "include": ["*.svelte"] }]
+}

examples/react/algolia/package.json

@@ -26,11 +26,7 @@
     "vite": "^5.1.1"
   },
   "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
+    "production": [">0.2%", "not dead", "not op_mini all"],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",

examples/react/basic-graphql-request/package.json

@@ -20,11 +20,7 @@
     "vite": "^5.1.1"
   },
   "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
+    "production": [">0.2%", "not dead", "not op_mini all"],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",

examples/react/basic-typescript/package.json

@@ -28,11 +28,7 @@
     "vite": "^5.1.1"
   },
   "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
+    "production": [">0.2%", "not dead", "not op_mini all"],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",

examples/react/basic/package.json

@@ -20,11 +20,7 @@
     "vite": "^5.1.1"
   },
   "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
+    "production": [">0.2%", "not dead", "not op_mini all"],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",

examples/react/default-query-function/package.json

@@ -19,11 +19,7 @@
     "vite": "^5.1.1"
   },
   "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
+    "production": [">0.2%", "not dead", "not op_mini all"],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",

examples/react/offline/package.json

@@ -24,20 +24,14 @@
     "vite": "^5.1.1"
   },
   "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
+    "production": [">0.2%", "not dead", "not op_mini all"],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",
       "last 1 safari version"
     ]
   },
   "msw": {
-    "workerDirectory": [
-      "public"
-    ]
+    "workerDirectory": ["public"]
   }
 }

examples/react/playground/package.json

@@ -18,11 +18,7 @@
     "vite": "^5.1.1"
   },
   "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
+    "production": [">0.2%", "not dead", "not op_mini all"],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",

examples/react/react-router/package.json

@@ -29,11 +29,7 @@
     "vite": "^5.1.1"
   },
   "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
+    "production": [">0.2%", "not dead", "not op_mini all"],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",

examples/react/react-router/src/routes/index.tsx

@@ -4,9 +4,7 @@ export default function Index() {
       This is a demo for integrating React Router with React Query.
       <br />
       Check out{' '}
-      <a href="https://reactrouter.com/">
-        the docs at reactrouter.com
-      </a> and{' '}
+      <a href="https://reactrouter.com/">the docs at reactrouter.com</a> and{' '}
       <a href="https://tanstack.com/query/v5/docs/">the docs at tanstack.com</a>
       .
     </p>

examples/react/rick-morty/package.json

@@ -24,11 +24,7 @@
     "vite": "^5.1.1"
   },
   "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
+    "production": [">0.2%", "not dead", "not op_mini all"],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",

examples/react/simple/package.json

@@ -19,11 +19,7 @@
     "vite": "^5.1.1"
   },
   "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
+    "production": [">0.2%", "not dead", "not op_mini all"],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",

examples/react/star-wars/package.json

@@ -24,11 +24,7 @@
     "vite": "^5.1.1"
   },
   "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
+    "production": [">0.2%", "not dead", "not op_mini all"],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",

examples/react/suspense/package.json

@@ -20,10 +20,5 @@
     "build": "vite build",
     "preview": "vite preview"
   },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ]
+  "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
 }

examples/solid/astro/src/layouts/MainLayout.astro

@@ -1,7 +1,6 @@
 ---
-import { SolidApp } from "../components/SolidApp";
-const { id } = Astro.props;
-
+import { SolidApp } from '../components/SolidApp'
+const { id } = Astro.props
 ---
 
 <html lang="en">

examples/solid/astro/src/pages/index.astro

@@ -1,7 +1,7 @@
 ---
-import MainLayout from '../layouts/MainLayout.astro';
+import MainLayout from '../layouts/MainLayout.astro'
 
-const id = Astro.url.searchParams.get('id') || '';
+const id = Astro.url.searchParams.get('id') || ''
 ---
 
 <MainLayout id={id} />

examples/svelte/auto-refetching/src/routes/+layout.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-  import '../app.css'
-  import { browser } from '$app/environment'
-  import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
-  import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
+import '../app.css'
+import { browser } from '$app/environment'
+import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
+import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
 
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: {
-        enabled: browser,
-      },
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      enabled: browser,
     },
-  })
+  },
+})
 </script>
 
 <QueryClientProvider client={queryClient}>

examples/svelte/auto-refetching/src/routes/+page.svelte

@@ -1,34 +1,34 @@
 <script lang="ts">
-  import {
-    useQueryClient,
-    createQuery,
-    createMutation,
-  } from '@tanstack/svelte-query'
+import {
+  useQueryClient,
+  createQuery,
+  createMutation,
+} from '@tanstack/svelte-query'
 
-  let intervalMs = 1000
-  let value: string
+let intervalMs = 1000
+let value: string
 
-  const client = useQueryClient()
+const client = useQueryClient()
 
-  const endpoint = 'http://localhost:5173/api/data'
+const endpoint = 'http://localhost:5173/api/data'
 
-  $: todos = createQuery<{ items: string[] }>({
-    queryKey: ['refetch'],
-    queryFn: async () => await fetch(endpoint).then((r) => r.json()),
-    // Refetch the data every second
-    refetchInterval: intervalMs,
-  })
+$: todos = createQuery<{ items: string[] }>({
+  queryKey: ['refetch'],
+  queryFn: async () => await fetch(endpoint).then((r) => r.json()),
+  // Refetch the data every second
+  refetchInterval: intervalMs,
+})
 
-  const addMutation = createMutation({
-    mutationFn: (value: string) =>
-      fetch(`${endpoint}?add=${value}`).then((r) => r.json()),
-    onSuccess: () => client.invalidateQueries({ queryKey: ['refetch'] }),
-  })
+const addMutation = createMutation({
+  mutationFn: (value: string) =>
+    fetch(`${endpoint}?add=${value}`).then((r) => r.json()),
+  onSuccess: () => client.invalidateQueries({ queryKey: ['refetch'] }),
+})
 
-  const clearMutation = createMutation({
-    mutationFn: () => fetch(`${endpoint}?clear=1`).then((r) => r.json()),
-    onSuccess: () => client.invalidateQueries({ queryKey: ['refetch'] }),
-  })
+const clearMutation = createMutation({
+  mutationFn: () => fetch(`${endpoint}?clear=1`).then((r) => r.json()),
+  onSuccess: () => client.invalidateQueries({ queryKey: ['refetch'] }),
+})
 </script>
 
 <h1>Auto Refetch with stale-time set to 1s</h1>

examples/svelte/basic/src/lib/Post.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-  import { createQuery } from '@tanstack/svelte-query'
-  import { getPostById } from './data'
-  import type { Post } from './types'
+import { createQuery } from '@tanstack/svelte-query'
+import { getPostById } from './data'
+import type { Post } from './types'
 
-  export let postId: number
+export let postId: number
 
-  const post = createQuery<Post>({
-    queryKey: ['post', postId],
-    queryFn: () => getPostById(postId),
-  })
+const post = createQuery<Post>({
+  queryKey: ['post', postId],
+  queryFn: () => getPostById(postId),
+})
 </script>
 
 <div>