fix(CommandPalette/ContentSearch): improve performances and filtering logic (#5433)

Author: benjamincanac

docs/app/app.vue

@@ -9,7 +9,9 @@ const appConfig = useAppConfig()
 const colorMode = useColorMode()
 
 const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs', ['framework', 'category', 'description']))
-const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
+const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs', {
+  ignoredTags: ['style']
+}), {
   server: false
 })
 

docs/app/composables/useSearch.ts

@@ -101,16 +101,21 @@ export function useSearch() {
     id: 'ai',
     label: 'AI',
     ignoreFilter: true,
-    items: searchTerm.value
-      ? [{
-          label: `Ask AI for “${searchTerm.value}”`,
-          icon: 'i-lucide-bot',
-          ui: {
-            itemLeadingIcon: 'group-data-highlighted:not-group-data-disabled:text-primary'
-          },
-          onSelect
-        }]
-      : []
+    postFilter: (searchTerm: string, items: any[]) => {
+      if (!searchTerm) {
+        return []
+      }
+
+      return items
+    },
+    items: [{
+      label: 'Ask AI',
+      icon: 'i-lucide-bot',
+      ui: {
+        itemLeadingIcon: 'group-data-highlighted:not-group-data-disabled:text-primary'
+      },
+      onSelect
+    }]
   }, {
     id: 'framework',
     label: 'Framework',

docs/app/error.vue

@@ -11,7 +11,9 @@ const appConfig = useAppConfig()
 const colorMode = useColorMode()
 
 const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs', ['framework', 'category', 'description']))
-const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
+const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs', {
+  ignoredTags: ['style']
+}), {
   server: false
 })
 

package.json

@@ -162,7 +162,6 @@
     "vue-component-type-helpers": "^3.1.3"
   },
   "devDependencies": {
-    "@nuxt/content": "^3.8.0",
     "@nuxt/eslint-config": "^1.10.0",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/test-utils": "^3.20.1",
@@ -181,6 +180,7 @@
   },
   "peerDependencies": {
     "@inertiajs/vue3": "^2.0.7",
+    "@nuxt/content": "^3.0.0",
     "joi": "^18.0.0",
     "superstruct": "^2.0.0",
     "typescript": "^5.6.3",
@@ -193,6 +193,9 @@
     "@inertiajs/vue3": {
       "optional": true
     },
+    "@nuxt/content": {
+      "optional": true
+    },
     "joi": {
       "optional": true
     },

pnpm-lock.yaml

@@ -199,7 +199,7 @@ export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPalett
 import { computed, ref, useTemplateRef, toRef } from 'vue'
 import { ListboxRoot, ListboxFilter, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxVirtualizer, ListboxItem, ListboxItemIndicator, useForwardProps, useForwardPropsEmits } from 'reka-ui'
 import { defu } from 'defu'
-import { reactivePick, createReusableTemplate } from '@vueuse/core'
+import { reactivePick, createReusableTemplate, refThrottled } from '@vueuse/core'
 import { useFuse } from '@vueuse/integrations/useFuse'
 import { useAppConfig } from '#imports'
 import { useLocale } from '../composables/useLocale'
@@ -290,14 +290,18 @@ const items = computed(() => groups.value?.filter((group) => {
 
 const { results: fuseResults } = useFuse<typeof items.value[number]>(searchTerm, items, fuse)
 
-function getGroupWithItems(group: G, items: (T & { matches?: FuseResult<T>['matches'] })[]) {
+const throttledFuseResults = refThrottled(fuseResults, 16, true)
+
+function processGroupItems(group: G, items: (T & { matches?: FuseResult<T>['matches'] })[]) {
+  let processedItems = items
+
   if (group?.postFilter && typeof group.postFilter === 'function') {
-    items = group.postFilter(searchTerm.value, items)
+    processedItems = group.postFilter(searchTerm.value, processedItems)
   }
 
   return {
     ...group,
-    items: items.slice(0, fuse.value.resultLimit).map((item) => {
+    items: processedItems.slice(0, fuse.value.resultLimit).map((item) => {
       return {
         ...item,
         labelHtml: highlight<T>(item, searchTerm.value, props.labelKey),
@@ -308,7 +312,9 @@ function getGroupWithItems(group: G, items: (T & { matches?: FuseResult<T>['matc
 }
 
 const filteredGroups = computed(() => {
-  const groupsById = fuseResults.value.reduce((acc, result) => {
+  const currentGroups = groups.value
+
+  const groupsById = throttledFuseResults.value.reduce((acc, result) => {
     const { item, matches } = result
     if (!item.group) {
       return acc
@@ -321,38 +327,49 @@ const filteredGroups = computed(() => {
   }, {} as Record<string, (T & { matches?: FuseResult<T>['matches'] })[]>)
 
   if (props.preserveGroupOrder) {
-    const processedGroups: Array<ReturnType<typeof getGroupWithItems>> = []
+    const processedGroups: Array<ReturnType<typeof processGroupItems>> = []
 
-    for (const group of groups.value || []) {
+    for (const group of currentGroups || []) {
       if (!group.items?.length) {
         continue
       }
 
-      const items = group.ignoreFilter
-        ? group.items
-        : groupsById[group.id]
+      const items = group.ignoreFilter ? group.items : groupsById[group.id]
+      if (!items?.length) {
+        continue
+      }
+
+      const processedGroup = processGroupItems(group, items)
 
-      if (items?.length) {
-        processedGroups.push(getGroupWithItems(group, items))
+      // Filter out groups that become empty after postFilter
+      if (processedGroup.items?.length) {
+        processedGroups.push(processedGroup)
       }
     }
 
     return processedGroups
   }
 
   const fuseGroups = Object.entries(groupsById).map(([id, items]) => {
-    const group = groups.value?.find(group => group.id === id)
+    const group = currentGroups?.find(group => group.id === id)
     if (!group) {
       return
     }
 
-    return getGroupWithItems(group, items)
+    const processedGroup = processGroupItems(group, items)
+    // Filter out groups without items after postFilter
+    return processedGroup.items?.length ? processedGroup : undefined
   }).filter(group => !!group)
 
-  const nonFuseGroups = groups.value
+  const nonFuseGroups = currentGroups
     ?.map((group, index) => ({ ...group, index }))
     ?.filter(group => group.ignoreFilter && group.items?.length)
-    ?.map(group => ({ ...getGroupWithItems(group, group.items || []), index: group.index })) || []
+    ?.map((group) => {
+      const processedGroup = processGroupItems(group, group.items || [])
+      return { ...processedGroup, index: group.index }
+    })
+    // Filter out groups without items after postFilter
+    ?.filter(group => group.items?.length) || []
 
   return nonFuseGroups.reduce((acc, group) => {
     acc.splice(group.index, 0, group)
@@ -442,9 +459,11 @@ function onSelect(e: Event, item: T) {
                 <slot :name="((item.slot ? `${item.slot}-label` : group?.slot ? `${group.slot}-label` : `item-label`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index" :ui="ui">
                   <span v-if="item.prefix" :class="ui.itemLabelPrefix({ class: [props.ui?.itemLabelPrefix, item.ui?.itemLabelPrefix] })">{{ item.prefix }}</span>
 
-                  <span :class="ui.itemLabelBase({ class: [props.ui?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })" v-html="item.labelHtml || get(item, props.labelKey as string)" />
+                  <span v-if="item.labelHtml" :class="ui.itemLabelBase({ class: [props.ui?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })" v-html="item.labelHtml" />
+                  <span v-else :class="ui.itemLabelBase({ class: [props.ui?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })">{{ get(item, props.labelKey as string) }}</span>
 
-                  <span :class="ui.itemLabelSuffix({ class: [props.ui?.itemLabelSuffix, item.ui?.itemLabelSuffix], active: active || item.active })" v-html="item.suffixHtml || item.suffix" />
+                  <span v-if="item.suffixHtml" :class="ui.itemLabelSuffix({ class: [props.ui?.itemLabelSuffix, item.ui?.itemLabelSuffix], active: active || item.active })" v-html="item.suffixHtml" />
+                  <span v-else-if="item.suffix" :class="ui.itemLabelSuffix({ class: [props.ui?.itemLabelSuffix, item.ui?.itemLabelSuffix], active: active || item.active })">{{ item.suffix }}</span>
                 </slot>
               </span>