Function useGlobalSearch

app/composables/useGlobalSearch.ts:9–117

(place: 'header' | 'content' = 'content')

const SEARCH_DEBOUNCE_MS = 100

export function useGlobalSearch(place: 'header' | 'content' = 'content') {
  const { settings } = useSettings()
  const { searchProvider } = useSearchProvider()
  const searchProviderValue = computed(() => {
    const p = normalizeSearchParam(route.query.p)
    if (p === 'npm' || searchProvider.value === 'npm') return 'npm'
    return 'algolia'
  })

  const router = useRouter()
  const route = useRoute()
  // Internally used searchQuery state
  const searchQuery = useState<string>('search-query', () => {
    if (pagesWithLocalFilter.has(route.name as string)) {
      return ''
    }
    return normalizeSearchParam(route.query.q)
  })

  // Committed search query: last value submitted by user
  // Syncs instantly when instantSearch is on, but only on Enter press when off
  const committedSearchQuery = useState<string>('committed-search-query', () => searchQuery.value)

  const commitSearchQuery = debounce((val: string) => {
    committedSearchQuery.value = val
  }, SEARCH_DEBOUNCE_MS)

  // This is basically doing instant search as user types
  watch(searchQuery, val => {
    if (settings.value.instantSearch) {
      commitSearchQuery(val)
    }
  })

  // clean search input when navigating away from search page
  watch(
    () => route.query.q,
    urlQuery => {
      const value = normalizeSearchParam(urlQuery)
      if (!value) searchQuery.value = ''
      if (!searchQuery.value) searchQuery.value = value
    },
  )

  // Updates URL when search query changes (immediately for instantSearch or after Enter hit otherwise)
  const updateUrlQueryImpl = (value: string, provider: 'npm' | 'algolia') => {
    const isSameQuery = route.query.q === value && route.query.p === provider
    // Don't navigate away from pages that use ?q for local filtering
    if ((pagesWithLocalFilter.has(route.name as string) && place === 'content') || isSameQuery) {
      return
    }

    if (route.name === 'search') {
      router.replace({
        query: {
          ...route.query,
          q: value || undefined,
          p: provider === 'npm' ? 'npm' : undefined,