ci: add CodSpeed performance benchmarks

.github/workflows/codspeed.yml

@@ -0,0 +1,49 @@
+name: CodSpeed
+
+on:
+  push:
+    branches:
+      - v4
+  pull_request:
+    branches:
+      - v4
+  # `workflow_dispatch` allows CodSpeed to trigger backtest
+  # performance analysis in order to generate initial data.
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  id-token: write # for OpenID Connect authentication with CodSpeed
+
+jobs:
+  benchmarks:
+    name: Run benchmarks
+    runs-on: ubuntu-latest
+
+    env:
+      NUXT_GITHUB_TOKEN: ${{ secrets.NUXT_GITHUB_TOKEN }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v7
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v6
+
+      - name: Install node
+        uses: actions/setup-node@v6
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Prepare
+        run: pnpm run dev:prepare
+
+      - name: Run benchmarks
+        uses: CodSpeedHQ/action@v4
+        with:
+          mode: simulation
+          run: pnpm run bench

README.md

@@ -10,6 +10,7 @@
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
+[![CodSpeed](https://img.shields.io/endpoint?url=https://codspeed.io/badge.json)](https://app.codspeed.io/nuxt/ui?utm_source=badge)
 
 Nuxt UI harnesses the combined strengths of [Reka UI](https://reka-ui.com/), [Tailwind CSS](https://tailwindcss.com/), and [Tailwind Variants](https://www.tailwind-variants.org/) to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.
 

bench/content.bench.ts

@@ -0,0 +1,33 @@
+import { bench, describe } from 'vitest'
+import type { ContentNavigationItem } from '@nuxt/content'
+import { mapContentNavigation } from '../src/runtime/utils/content'
+
+function buildNavigation(breadth: number, depth: number): ContentNavigationItem[] {
+  return Array.from({ length: breadth }, (_, i) => {
+    const item: ContentNavigationItem = {
+      title: `Section ${depth}-${i}`,
+      path: `/section-${depth}-${i}`
+    }
+    if (depth > 0) {
+      item.children = buildNavigation(breadth, depth - 1)
+    }
+    return item
+  })
+}
+
+const flatNavigation = buildNavigation(50, 0)
+const deepNavigation = buildNavigation(4, 4)
+
+describe('mapContentNavigation', () => {
+  bench('flat navigation', () => {
+    mapContentNavigation(flatNavigation)
+  })
+
+  bench('deeply nested navigation', () => {
+    mapContentNavigation(deepNavigation)
+  })
+
+  bench('deeply nested navigation with depth limit', () => {
+    mapContentNavigation(deepNavigation, { deep: 2 })
+  })
+})

bench/search.bench.ts

@@ -0,0 +1,47 @@
+import { bench, describe } from 'vitest'
+import { sanitizeSnippet, highlight } from '../src/runtime/utils/search'
+
+const plainSnippet = 'The quick brown fox jumps over the lazy dog. '.repeat(10)
+const markedSnippet = 'The quick <mark>brown</mark> fox jumps over the <mark>lazy</mark> dog. '.repeat(10)
+const unsafeSnippet = '<script>alert(1)</script> 5 < 10 & "quoted" \'value\' '.repeat(10)
+
+describe('sanitizeSnippet', () => {
+  bench('plain text', () => {
+    sanitizeSnippet(plainSnippet)
+  })
+
+  bench('with mark highlights', () => {
+    sanitizeSnippet(markedSnippet)
+  })
+
+  bench('with unsafe html', () => {
+    sanitizeSnippet(unsafeSnippet)
+  })
+})
+
+const item = {
+  title: 'The quick brown fox jumps over the lazy dog',
+  description: 'A pangram containing every letter of the alphabet at least once, repeated for emphasis. '.repeat(5),
+  matches: [
+    {
+      key: 'title',
+      value: 'The quick brown fox jumps over the lazy dog',
+      indices: [[4, 8], [10, 14], [20, 24]] as [number, number][]
+    },
+    {
+      key: 'description',
+      value: 'A pangram containing every letter of the alphabet at least once, repeated for emphasis. '.repeat(5),
+      indices: [[2, 8], [40, 47], [100, 106]] as [number, number][]
+    }
+  ]
+}
+
+describe('highlight', () => {
+  bench('highlight matches', () => {
+    highlight(item, 'quick')
+  })
+
+  bench('highlight with token search', () => {
+    highlight(item, 'quick brown fox', undefined, undefined, true)
+  })
+})

bench/utils.bench.ts

@@ -0,0 +1,123 @@
+import { bench, describe } from 'vitest'
+import {
+  get,
+  set,
+  pick,
+  omit,
+  compare,
+  isEmpty,
+  getDisplayValue,
+  mergeClasses,
+  transformUI,
+  resolveBaseURL
+} from '../src/runtime/utils/index'
+
+const nestedObject = {
+  user: {
+    profile: {
+      name: 'John Doe',
+      address: {
+        city: 'Paris',
+        country: 'France',
+        zip: '75001'
+      }
+    },
+    roles: ['admin', 'editor', 'viewer']
+  }
+}
+
+const flatObject = Object.fromEntries(
+  Array.from({ length: 50 }, (_, i) => [`key${i}`, `value${i}`])
+)
+
+const items = Array.from({ length: 500 }, (_, i) => ({
+  id: i,
+  label: `Item ${i}`,
+  value: `value-${i}`
+}))
+
+describe('get', () => {
+  bench('nested string path', () => {
+    get(nestedObject, 'user.profile.address.city')
+  })
+
+  bench('array path', () => {
+    get(nestedObject, ['user', 'roles', 1])
+  })
+
+  bench('missing path with default', () => {
+    get(nestedObject, 'user.profile.nonexistent.deep', 'fallback')
+  })
+})
+
+describe('set', () => {
+  bench('nested string path', () => {
+    set({ user: { profile: {} } }, 'user.profile.address.city', 'Lyon')
+  })
+})
+
+describe('pick / omit', () => {
+  bench('pick keys', () => {
+    pick(flatObject, ['key0', 'key10', 'key20', 'key30', 'key40'])
+  })
+
+  bench('omit keys', () => {
+    omit(flatObject, ['key0', 'key10', 'key20', 'key30', 'key40'])
+  })
+})
+
+describe('compare', () => {
+  bench('primitive strings', () => {
+    compare('hello', 'hello')
+  })
+
+  bench('objects with comparator key', () => {
+    compare({ id: 1, label: 'a' }, { id: 1, label: 'b' }, 'id')
+  })
+
+  bench('deep equality', () => {
+    compare(nestedObject, nestedObject)
+  })
+})
+
+describe('isEmpty', () => {
+  bench('empty string', () => {
+    isEmpty('   ')
+  })
+
+  bench('populated object', () => {
+    isEmpty(flatObject)
+  })
+
+  bench('array', () => {
+    isEmpty(items)
+  })
+})
+
+describe('getDisplayValue', () => {
+  bench('find by value key in large list', () => {
+    getDisplayValue(items, 'value-250', { valueKey: 'value', labelKey: 'label' })
+  })
+})
+
+describe('mergeClasses', () => {
+  bench('array + prop class', () => {
+    mergeClasses(['bg-red-500', 'text-white', 'p-4'], 'rounded-lg shadow')
+  })
+})
+
+describe('transformUI', () => {
+  const ui = Object.fromEntries(
+    Array.from({ length: 20 }, (_, i) => [`slot${i}`, () => `class-${i}`])
+  )
+
+  bench('transform functional ui config', () => {
+    transformUI(ui, { slot0: 'override' })
+  })
+})
+
+describe('resolveBaseURL', () => {
+  bench('join base url', () => {
+    resolveBaseURL('/docs/getting-started', '/app')
+  })
+})

package.json

@@ -127,6 +127,7 @@
     "test": "vitest",
     "test:vue": "vitest --project vue",
     "test:nuxt": "vitest --project nuxt",
+    "bench": "vitest bench --run --config vitest.bench.config.ts",
     "release": "release-it"
   },
   "dependencies": {
@@ -197,6 +198,7 @@
     "vue-component-type-helpers": "^3.3.6"
   },
   "devDependencies": {
+    "@codspeed/vitest-plugin": "^5.7.1",
     "@nuxt/eslint-config": "^1.16.0",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/test-utils": "^4.0.2",