Migrate to biome

.github/workflows/ci.yml

@@ -19,16 +19,14 @@ jobs:
     permissions:
       contents: read
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           persist-credentials: false
 
-      - name: Use Node.js
-        uses: actions/setup-node@v3
-
-      - uses: rome/[email protected]
+      - name: Setup Biome
+        uses: biomejs/setup-biome@v2
         with:
           version: latest
 
       - name: Lint
-        run: rome ci .
+        run: biome ci .

app/docs/layout.tsx

@@ -1,7 +1,7 @@
 import { DocsSidebarNav } from '@/components/sidebar-nav'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { docsConfig } from '@/config/docs'
-import { PropsWithChildren } from 'react'
+import type { PropsWithChildren } from 'react'
 
 export default function DocsLayout({ children }: PropsWithChildren) {
   return (

app/page.tsx

@@ -3,7 +3,7 @@ import { Icons } from '@/components/icons'
 import { buttonVariants } from '@/components/ui/button'
 import { siteConfig } from '@/config/site'
 import { cn } from '@/lib/utils'
-import { Metadata } from 'next'
+import type { Metadata } from 'next'
 import Link from 'next/link'
 
 export const metadata: Metadata = {

app/playground/form.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import ParsingResult, { WASMResponse } from './result'
 import { PageHeader, PageHeaderDescription, PageHeaderHeading } from '@/components/page-header'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -10,6 +9,7 @@ import { Loader2 } from 'lucide-react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useForm } from 'react-hook-form'
+import ParsingResult, { type WASMResponse } from './result'
 
 let wasm: {
   parse: (url: string) => WASMResponse & { delete: VoidFunction }

app/playground/page.tsx

@@ -1,6 +1,6 @@
-import PlaygroundForm from './form'
-import { Metadata } from 'next'
+import type { Metadata } from 'next'
 import { Suspense } from 'react'
+import PlaygroundForm from './form'
 
 const title = 'URL Parser Playground'
 const description =

app/playground/twitter-image.tsx

@@ -1,5 +1,5 @@
-import Image from './opengraph-image'
 import { imageSize } from '@/components/social-image'
+import Image from './opengraph-image'
 
 export const runtime = 'edge'
 export const contentType = 'image/png'

app/sitemap.ts

@@ -2,7 +2,7 @@ import { siteConfig } from '@/config/site'
 import { absoluteUrl } from '@/lib/utils'
 import { allDocuments } from 'contentlayer/generated'
 import { format } from 'date-fns'
-import { MetadataRoute } from 'next'
+import type { MetadataRoute } from 'next'
 
 export default function sitemap(): MetadataRoute.Sitemap {
   const lastModified = format(new Date(), 'yyyy-MM-dd')

app/twitter-image.tsx

@@ -1,5 +1,5 @@
-import Image from './opengraph-image'
 import { imageSize } from '@/components/social-image'
+import Image from './opengraph-image'
 
 export const runtime = 'edge'
 export const contentType = 'image/png'

rome.json → biome.jsonc

@@ -1,5 +1,5 @@
 {
-  "$schema": "./node_modules/rome/configuration_schema.json",
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
   "organizeImports": {
     "enabled": true
   },
@@ -15,12 +15,18 @@
       },
       "suspicious": {
         "noExplicitAny": "off"
+      },
+      "complexity": {
+        "noForEach": "off"
+      },
+      "correctness": {
+        "useExhaustiveDependencies": "warn"
       }
     }
   },
   "formatter": {
     "enabled": true,
-    "indentSize": 2,
+    "indentWidth": 2,
     "indentStyle": "space",
     "lineWidth": 100
   },
@@ -31,7 +37,8 @@
     "formatter": {
       "quoteStyle": "single",
       "quoteProperties": "asNeeded",
-      "trailingComma": "all",
+      "jsxQuoteStyle": "single",
+      "trailingCommas": "all",
       "semicolons": "asNeeded"
     }
   }

components/copy-button.tsx

@@ -13,6 +13,7 @@ interface CopyButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
 export function CopyButton({ value, className, src, ...props }: CopyButtonProps) {
   const [hasCopied, setHasCopied] = React.useState(false)
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   React.useEffect(() => {
     setTimeout(() => {
       setHasCopied(false)

components/icons.tsx

@@ -14,7 +14,7 @@ import {
   Laptop,
   Link,
   Loader2,
-  LucideProps,
+  type LucideProps,
   Moon,
   MoreVertical,
   Pizza,
@@ -54,7 +54,7 @@ export const Icons = {
   laptop: Laptop,
   link: Link,
   gitHub: (props: LucideProps) => (
-    // rome-ignore lint/a11y/noSvgWithoutTitle: Unnecessary.
+    // biome-ignore lint/a11y/noSvgWithoutTitle: Unnecessary.
     <svg viewBox='0 0 438.549 438.549' {...props}>
       <path
         fill='currentColor'
@@ -63,7 +63,7 @@ export const Icons = {
     </svg>
   ),
   logo: (props: LucideProps) => (
-    // rome-ignore lint/a11y/noSvgWithoutTitle: Unnecessary.
+    // biome-ignore lint/a11y/noSvgWithoutTitle: Unnecessary.
     <svg viewBox='0 0 660 728' xmlns='http://www.w3.org/2000/svg' {...props}>
       <path
         className='fill-black dark:fill-white'

components/mdx-components.tsx

@@ -2,7 +2,7 @@
 
 import { useMDXComponent } from 'next-contentlayer/hooks'
 import Image from 'next/image'
-import * as React from 'react'
+import type * as React from 'react'
 
 import { Callout } from '@/components/callout'
 import { CodeBlockWrapper } from '@/components/code-block-wrapper'
@@ -85,7 +85,7 @@ const components = {
     <blockquote className={cn('mt-6 border-l-2 pl-6 italic', className)} {...props} />
   ),
   img: ({ className, alt, ...props }: React.ImgHTMLAttributes<HTMLImageElement>) => (
-    // rome-ignore lint/a11y/useAltText: False positive
+    // biome-ignore lint/a11y/useAltText: False positive
     <img className={cn('rounded-md', className)} alt={alt} {...props} />
   ),
   hr: ({ ...props }: React.HTMLAttributes<HTMLHRElement>) => (

components/mobile-nav.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { PanelRightClose } from 'lucide-react'
-import Link, { LinkProps } from 'next/link'
+import Link, { type LinkProps } from 'next/link'
 import { useRouter } from 'next/navigation'
 import * as React from 'react'
 

components/pager.tsx

@@ -1,5 +1,5 @@
-import { NavItem, NavItemWithChildren } from '@/types/nav'
-import { Doc } from 'contentlayer/generated'
+import type { NavItem, NavItemWithChildren } from '@/types/nav'
+import type { Doc } from 'contentlayer/generated'
 import Link from 'next/link'
 
 import { Icons } from '@/components/icons'

components/sidebar-nav.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { SidebarNavItem } from '@/types/nav'
+import type { SidebarNavItem } from '@/types/nav'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 

components/theme-provider.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { ThemeProvider as NextThemesProvider } from 'next-themes'
-import { ThemeProviderProps } from 'next-themes/dist/types'
+import type { ThemeProviderProps } from 'next-themes/dist/types'
 import * as React from 'react'
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {

components/toc.tsx

@@ -4,7 +4,7 @@
 import * as React from 'react'
 
 import { useMounted } from '@/lib/hooks/use-mounted'
-import { TableOfContents } from '@/lib/toc'
+import type { TableOfContents } from '@/lib/toc'
 import { cn } from '@/lib/utils'
 
 interface TocProps {

components/ui/badge.tsx

@@ -1,5 +1,5 @@
 import { type VariantProps, cva } from 'class-variance-authority'
-import * as React from 'react'
+import type * as React from 'react'
 
 import { cn } from '@/lib/utils'
 

components/ui/toaster.tsx

@@ -15,18 +15,16 @@ export function Toaster() {
 
   return (
     <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className='grid gap-1'>
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && <ToastDescription>{description}</ToastDescription>}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        )
-      })}
+      {toasts.map(({ id, title, description, action, ...props }) => (
+        <Toast key={id} {...props}>
+          <div className='grid gap-1'>
+            {title && <ToastTitle>{title}</ToastTitle>}
+            {description && <ToastDescription>{description}</ToastDescription>}
+          </div>
+          {action}
+          <ToastClose />
+        </Toast>
+      ))}
       <ToastViewport />
     </ToastProvider>
   )

config/docs.ts

@@ -1,4 +1,4 @@
-import { MainNavItem, SidebarNavItem } from '@/types/nav'
+import type { MainNavItem, SidebarNavItem } from '@/types/nav'
 
 interface DocsConfig {
   mainNav: MainNavItem[]

contentlayer.config.js

@@ -1,6 +1,6 @@
-import { defineDocumentType, defineNestedType, makeSource } from 'contentlayer/source-files'
 import fs from 'node:fs'
 import path from 'node:path'
+import { defineDocumentType, defineNestedType, makeSource } from 'contentlayer/source-files'
 import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import rehypePrettyCode from 'rehype-pretty-code'
 import rehypeSlug from 'rehype-slug'
@@ -135,15 +135,15 @@ export default makeSource({
               return
             }
 
-            preElement.properties['__withMeta__'] = node.children.at(0).tagName === 'div'
-            preElement.properties['__rawString__'] = node.__rawString__
+            preElement.properties.__withMeta__ = node.children.at(0).tagName === 'div'
+            preElement.properties.__rawString__ = node.__rawString__
 
             if (node.__src__) {
-              preElement.properties['__src__'] = node.__src__
+              preElement.properties.__src__ = node.__src__
             }
 
             if (node.__event__) {
-              preElement.properties['__event__'] = node.__event__
+              preElement.properties.__event__ = node.__event__
             }
           }
         })

lib/rehype-component.ts

@@ -1,6 +1,6 @@
-import { UnistNode, UnistTree } from '@/types/unist'
 import fs from 'node:fs'
 import path from 'node:path'
+import type { UnistNode, UnistTree } from '@/types/unist'
 import { u } from 'unist-builder'
 import { visit } from 'unist-util-visit'
 

lib/toc.ts

@@ -50,7 +50,8 @@ function getItems(node, current): Items {
     current.items = node.children.map((i) => getItems(i, {}))
 
     return current
-  } else if (node.type === 'listItem') {
+  }
+  if (node.type === 'listItem') {
     const heading = getItems(node.children[0], {})
 
     if (node.children.length > 1) {

lib/utils.ts

@@ -1,5 +1,5 @@
 import { siteConfig } from '@/config/site'
-import { ClassValue, clsx } from 'clsx'
+import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs: ClassValue[]) {

package.json

@@ -6,8 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "rome check . && rome format .",
-    "lint-fix": "rome check . --apply-unsafe && rome format . --write"
+    "lint": "biome check . && biome format .",
+    "lint-fix": "biome check . --write --unsafe && biome format . --write"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.1.2",
@@ -46,6 +46,7 @@
     "typescript": "5.2.2"
   },
   "devDependencies": {
+    "@biomejs/biome": "^1.8.0",
     "@types/unist": "^3.0.0",
     "markdown-wasm": "^1.2.0",
     "mdast-util-toc": "^7.0.0",
@@ -55,7 +56,6 @@
     "remark": "^14.0.3",
     "remark-code-import": "^1.2.0",
     "remark-gfm": "^3.0.1",
-    "rome": "^12.1.3",
     "unist-builder": "^4.0.0",
     "unist-util-visit": "^5.0.0"
   },
@@ -68,4 +68,4 @@
     "minimumChangeThreshold": 0,
     "showDetails": true
   }
-}
+}