+13 -4

app/components/Header/SearchBox.vue

reviewed

··· 15 15 16 16 const router = useRouter() 17 17 const route = useRoute() 18 18 + const { isAlgolia } = useSearchProvider() 18 19 19 20 const isSearchFocused = shallowRef(false) 20 21 ··· 28 29 // Pages that have their own local filter using ?q 29 30 const pagesWithLocalFilter = new Set(['~username', 'org']) 30 31 31 31 - // Debounced URL update for search query 32 32 - const updateUrlQuery = debounce((value: string) => { 32 32 + function updateUrlQueryImpl(value: string) { 33 33 // Don't navigate away from pages that use ?q for local filtering 34 34 if (pagesWithLocalFilter.has(route.name as string)) { 35 35 return ··· 48 48 q: value, 49 49 }, 50 50 }) 51 51 - }, 250) 51 51 + } 52 52 + 53 53 + const updateUrlQueryNpm = debounce(updateUrlQueryImpl, 250) 54 54 + const updateUrlQueryAlgolia = debounce(updateUrlQueryImpl, 80) 55 55 + 56 56 + const updateUrlQuery = Object.assign( 57 57 + (value: string) => (isAlgolia.value ? updateUrlQueryAlgolia : updateUrlQueryNpm)(value), 58 58 + { 59 59 + flush: () => (isAlgolia.value ? updateUrlQueryAlgolia : updateUrlQueryNpm).flush(), 60 60 + }, 61 61 + ) 52 62 53 53 - // Watch input and debounce URL updates 54 63 watch(searchQuery, value => { 55 64 updateUrlQuery(value) 56 65 })

+33 -3

app/composables/npm/search-utils.ts

reviewed

··· 1 1 import type { NpmSearchResponse, NpmSearchResult, PackageMetaResponse } from '#shared/types' 2 2 3 3 - /** 4 4 - * Convert a lightweight package-meta API response to a search result for display. 5 5 - */ 6 3 export function metaToSearchResult(meta: PackageMetaResponse): NpmSearchResult { 7 4 return { 8 5 package: { ··· 31 28 time: new Date().toISOString(), 32 29 } 33 30 } 31 31 + 32 32 + export interface SearchSuggestion { 33 33 + type: 'user' | 'org' 34 34 + name: string 35 35 + exists: boolean 36 36 + } 37 37 + 38 38 + export type SuggestionIntent = 'user' | 'org' | 'both' | null 39 39 + 40 40 + export function isValidNpmName(name: string): boolean { 41 41 + if (!name || name.length === 0 || name.length > 214) return false 42 42 + if (!/^[a-z0-9]/i.test(name)) return false 43 43 + return /^[\w-]+$/.test(name) 44 44 + } 45 45 + 46 46 + /** Parse a search query into a suggestion intent (`~user`, `@org`, or plain `both`). */ 47 47 + export function parseSuggestionIntent(query: string): { intent: SuggestionIntent; name: string } { 48 48 + const q = query.trim() 49 49 + if (!q) return { intent: null, name: '' } 50 50 + 51 51 + if (q.startsWith('~')) { 52 52 + const name = q.slice(1) 53 53 + return isValidNpmName(name) ? { intent: 'user', name } : { intent: null, name: '' } 54 54 + } 55 55 + 56 56 + if (q.startsWith('@')) { 57 57 + if (q.includes('/')) return { intent: null, name: '' } 58 58 + const name = q.slice(1) 59 59 + return isValidNpmName(name) ? { intent: 'org', name } : { intent: null, name: '' } 60 60 + } 61 61 + 62 62 + return isValidNpmName(q) ? { intent: 'both', name: q } : { intent: null, name: '' } 63 63 + }

+135 -51

app/composables/npm/useAlgoliaSearch.ts

reviewed

··· 2 2 import { 3 3 liteClient as algoliasearch, 4 4 type LiteClient, 5 5 + type SearchQuery, 5 6 type SearchResponse, 6 7 } from 'algoliasearch/lite' 7 8 8 8 - /** 9 9 - * Singleton Algolia client, keyed by appId to handle config changes. 10 10 - */ 11 9 let _searchClient: LiteClient | null = null 12 10 let _configuredAppId: string | null = null 13 11 ··· 36 34 branch?: string 37 35 } 38 36 39 39 - /** 40 40 - * Shape of a hit from the Algolia `npm-search` index. 41 41 - * Only includes fields we retrieve via `attributesToRetrieve`. 42 42 - */ 37 37 + /** Shape of a hit from the Algolia `npm-search` index. */ 43 38 interface AlgoliaHit { 44 39 objectID: string 45 40 name: string ··· 58 53 license: string | null 59 54 } 60 55 61 61 - /** Fields we always request from Algolia to keep payload small */ 62 56 const ATTRIBUTES_TO_RETRIEVE = [ 63 57 'name', 64 58 'version', ··· 75 69 'isDeprecated', 76 70 'license', 77 71 ] 72 72 + 73 73 + const EXISTENCE_CHECK_ATTRS = ['name'] 78 74 79 75 function hitToSearchResult(hit: AlgoliaHit): NpmSearchResult { 80 76 return { ··· 113 109 } 114 110 115 111 export interface AlgoliaSearchOptions { 116 116 - /** Number of results */ 117 112 size?: number 118 118 - /** Offset for pagination */ 119 113 from?: number 120 120 - /** Algolia filters expression (e.g. 'owner.name:username') */ 121 114 filters?: string 122 115 } 123 116 117 117 + /** Extra checks bundled into a single multi-search request. */ 118 118 + export interface AlgoliaMultiSearchChecks { 119 119 + name?: string 120 120 + checkOrg?: boolean 121 121 + checkUser?: boolean 122 122 + checkPackage?: string 123 123 + } 124 124 + 125 125 + export interface AlgoliaSearchWithSuggestionsResult { 126 126 + search: NpmSearchResponse 127 127 + orgExists: boolean 128 128 + userExists: boolean 129 129 + packageExists: boolean | null 130 130 + } 131 131 + 124 132 /** 125 125 - * Composable that provides Algolia search functions for npm packages. 126 126 - * 127 127 - * Must be called during component setup (or inside another composable) 128 128 - * because it reads from `useRuntimeConfig()`. The returned functions 129 129 - * are safe to call at any time (event handlers, async callbacks, etc.). 133 133 + * Composable providing Algolia search for npm packages. 134 134 + * Must be called during component setup. 130 135 */ 131 136 export function useAlgoliaSearch() { 132 137 const { algolia } = useRuntimeConfig().public 133 138 const client = getOrCreateClient(algolia.appId, algolia.apiKey) 134 139 const indexName = algolia.indexName 135 140 136 136 - /** 137 137 - * Search npm packages via Algolia. 138 138 - * Returns results in the same NpmSearchResponse format as the npm registry API. 139 139 - */ 140 141 async function search( 141 142 query: string, 142 143 options: AlgoliaSearchOptions = {}, 143 144 ): Promise<NpmSearchResponse> { 144 144 - const { results } = await client.search([ 145 145 - { 146 146 - indexName, 147 147 - params: { 145 145 + const { results } = await client.search({ 146 146 + requests: [ 147 147 + { 148 148 + indexName, 148 149 query, 149 150 offset: options.from, 150 151 length: options.size, ··· 152 153 analyticsTags: ['npmx.dev'], 153 154 attributesToRetrieve: ATTRIBUTES_TO_RETRIEVE, 154 155 attributesToHighlight: [], 155 155 - }, 156 156 - }, 157 157 - ]) 156 156 + } satisfies SearchQuery, 157 157 + ], 158 158 + }) 158 159 159 160 const response = results[0] as SearchResponse<AlgoliaHit> | undefined 160 161 if (!response) { ··· 169 170 } 170 171 } 171 172 172 172 - /** 173 173 - * Fetch all packages for an Algolia owner (org or user). 174 174 - * Uses `owner.name` filter for efficient server-side filtering. 175 175 - */ 173 173 + /** Fetch all packages for an owner using `owner.name` filter with pagination. */ 176 174 async function searchByOwner( 177 175 ownerName: string, 178 176 options: { maxResults?: number } = {}, ··· 184 182 let serverTotal = 0 185 183 const batchSize = 200 186 184 187 187 - // Algolia supports up to 1000 results per query with offset/length pagination 188 185 while (offset < max) { 189 189 - // Cap at both the configured max and the server's actual total (once known) 190 186 const remaining = serverTotal > 0 ? Math.min(max, serverTotal) - offset : max - offset 191 187 if (remaining <= 0) break 192 188 const length = Math.min(batchSize, remaining) 193 189 194 194 - const { results } = await client.search([ 195 195 - { 196 196 - indexName, 197 197 - params: { 190 190 + const { results } = await client.search({ 191 191 + requests: [ 192 192 + { 193 193 + indexName, 198 194 query: '', 199 195 offset, 200 196 length, ··· 202 198 analyticsTags: ['npmx.dev'], 203 199 attributesToRetrieve: ATTRIBUTES_TO_RETRIEVE, 204 200 attributesToHighlight: [], 205 205 - }, 206 206 - }, 207 207 - ]) 201 201 + } satisfies SearchQuery, 202 202 + ], 203 203 + }) 208 204 209 205 const response = results[0] as SearchResponse<AlgoliaHit> | undefined 210 206 if (!response) break ··· 212 208 serverTotal = response.nbHits ?? 0 213 209 allHits.push(...response.hits) 214 210 215 215 - // If we got fewer than requested, we've exhausted all results 216 211 if (response.hits.length < length || allHits.length >= serverTotal) { 217 212 break 218 213 } ··· 223 218 return { 224 219 isStale: false, 225 220 objects: allHits.map(hitToSearchResult), 226 226 - // Use server total so callers can detect truncation (allHits.length < total) 227 221 total: serverTotal, 228 222 time: new Date().toISOString(), 229 223 } 230 224 } 231 225 232 232 - /** 233 233 - * Fetch metadata for specific packages by exact name. 234 234 - * Uses Algolia's getObjects REST API to look up packages by objectID 235 235 - * (which equals the package name in the npm-search index). 236 236 - */ 226 226 + /** Fetch metadata for specific packages by exact name using Algolia's getObjects API. */ 237 227 async function getPackagesByName(packageNames: string[]): Promise<NpmSearchResponse> { 238 228 if (packageNames.length === 0) { 239 229 return { isStale: false, objects: [], total: 0, time: new Date().toISOString() } 240 230 } 241 231 242 242 - // Algolia getObjects REST API: fetch up to 1000 objects by ID in a single request 243 232 const response = await $fetch<{ results: (AlgoliaHit | null)[] }>( 244 233 `https://${algolia.appId}-dsn.algolia.net/1/indexes/*/objects`, 245 234 { ··· 267 256 } 268 257 } 269 258 259 259 + /** 260 260 + * Combined search + org/user/package existence checks in a single 261 261 + * Algolia multi-search request. 262 262 + */ 263 263 + async function searchWithSuggestions( 264 264 + query: string, 265 265 + options: AlgoliaSearchOptions = {}, 266 266 + checks?: AlgoliaMultiSearchChecks, 267 267 + ): Promise<AlgoliaSearchWithSuggestionsResult> { 268 268 + const requests: SearchQuery[] = [ 269 269 + { 270 270 + indexName, 271 271 + query, 272 272 + offset: options.from, 273 273 + length: options.size, 274 274 + filters: options.filters || '', 275 275 + analyticsTags: ['npmx.dev'], 276 276 + attributesToRetrieve: ATTRIBUTES_TO_RETRIEVE, 277 277 + attributesToHighlight: [], 278 278 + }, 279 279 + ] 280 280 + 281 281 + const orgQueryIndex = checks?.checkOrg && checks.name ? requests.length : -1 282 282 + if (checks?.checkOrg && checks.name) { 283 283 + requests.push({ 284 284 + indexName, 285 285 + query: `"@${checks.name}"`, 286 286 + length: 1, 287 287 + analyticsTags: ['npmx.dev'], 288 288 + attributesToRetrieve: EXISTENCE_CHECK_ATTRS, 289 289 + attributesToHighlight: [], 290 290 + }) 291 291 + } 292 292 + 293 293 + const userQueryIndex = checks?.checkUser && checks.name ? requests.length : -1 294 294 + if (checks?.checkUser && checks.name) { 295 295 + requests.push({ 296 296 + indexName, 297 297 + query: '', 298 298 + filters: `owner.name:${checks.name}`, 299 299 + length: 1, 300 300 + analyticsTags: ['npmx.dev'], 301 301 + attributesToRetrieve: EXISTENCE_CHECK_ATTRS, 302 302 + attributesToHighlight: [], 303 303 + }) 304 304 + } 305 305 + 306 306 + const packageQueryIndex = checks?.checkPackage ? requests.length : -1 307 307 + if (checks?.checkPackage) { 308 308 + requests.push({ 309 309 + indexName, 310 310 + query: '', 311 311 + filters: `objectID:${checks.checkPackage}`, 312 312 + length: 1, 313 313 + analyticsTags: ['npmx.dev'], 314 314 + attributesToRetrieve: EXISTENCE_CHECK_ATTRS, 315 315 + attributesToHighlight: [], 316 316 + }) 317 317 + } 318 318 + 319 319 + const { results } = await client.search({ requests }) 320 320 + 321 321 + const mainResponse = results[0] as SearchResponse<AlgoliaHit> | undefined 322 322 + if (!mainResponse) { 323 323 + throw new Error('Algolia returned an empty response') 324 324 + } 325 325 + 326 326 + const searchResult: NpmSearchResponse = { 327 327 + isStale: false, 328 328 + objects: mainResponse.hits.map(hitToSearchResult), 329 329 + total: mainResponse.nbHits ?? 0, 330 330 + time: new Date().toISOString(), 331 331 + } 332 332 + 333 333 + let orgExists = false 334 334 + if (orgQueryIndex >= 0 && checks?.name) { 335 335 + const orgResponse = results[orgQueryIndex] as SearchResponse<AlgoliaHit> | undefined 336 336 + const scopePrefix = `@${checks.name.toLowerCase()}/` 337 337 + orgExists = 338 338 + orgResponse?.hits?.some(h => h.name?.toLowerCase().startsWith(scopePrefix)) ?? false 339 339 + } 340 340 + 341 341 + let userExists = false 342 342 + if (userQueryIndex >= 0) { 343 343 + const userResponse = results[userQueryIndex] as SearchResponse<AlgoliaHit> | undefined 344 344 + userExists = (userResponse?.nbHits ?? 0) > 0 345 345 + } 346 346 + 347 347 + let packageExists: boolean | null = null 348 348 + if (packageQueryIndex >= 0) { 349 349 + const pkgResponse = results[packageQueryIndex] as SearchResponse<AlgoliaHit> | undefined 350 350 + packageExists = (pkgResponse?.nbHits ?? 0) > 0 351 351 + } 352 352 + 353 353 + return { search: searchResult, orgExists, userExists, packageExists } 354 354 + } 355 355 + 270 356 return { 271 271 - /** Search packages by text query */ 272 357 search, 273 273 - /** Fetch all packages for an owner (org or user) */ 358 358 + searchWithSuggestions, 274 359 searchByOwner, 275 275 - /** Fetch metadata for specific packages by exact name */ 276 360 getPackagesByName, 277 361 } 278 362 }

+30 -21

app/composables/npm/useNpmSearch.ts

reviewed

··· 2 2 import { emptySearchResponse, metaToSearchResult } from './search-utils' 3 3 4 4 export interface NpmSearchOptions { 5 5 - /** Number of results */ 6 5 size?: number 7 7 - /** Offset for pagination */ 8 6 from?: number 7 7 + } 8 8 + 9 9 + async function checkOrgExists(name: string): Promise<boolean> { 10 10 + try { 11 11 + const scopePrefix = `@${name.toLowerCase()}/` 12 12 + const response = await $fetch<{ 13 13 + total: number 14 14 + objects: Array<{ package: { name: string } }> 15 15 + }>(`${NPM_REGISTRY}/-/v1/search`, { query: { text: `@${name}`, size: 5 } }) 16 16 + return response.objects.some(obj => obj.package.name.toLowerCase().startsWith(scopePrefix)) 17 17 + } catch { 18 18 + return false 19 19 + } 20 20 + } 21 21 + 22 22 + async function checkUserExists(name: string): Promise<boolean> { 23 23 + try { 24 24 + const response = await $fetch<{ total: number }>(`${NPM_REGISTRY}/-/v1/search`, { 25 25 + query: { text: `maintainer:${name}`, size: 1 }, 26 26 + }) 27 27 + return response.total > 0 28 28 + } catch { 29 29 + return false 30 30 + } 9 31 } 10 32 11 33 /** 12 12 - * Composable that provides npm registry search functions. 13 13 - * 14 14 - * Mirrors the API shape of `useAlgoliaSearch` so that `useSearch` can 15 15 - * swap between providers without branching on implementation details. 16 16 - * 17 17 - * Must be called during component setup (or inside another composable) 18 18 - * because it reads from `useNuxtApp()`. The returned functions are safe 19 19 - * to call at any time (event handlers, async callbacks, etc.). 34 34 + * Composable providing npm registry search. 35 35 + * Must be called during component setup. 20 36 */ 21 37 export function useNpmSearch() { 22 38 const { $npmRegistry } = useNuxtApp() 23 39 24 40 /** 25 25 - * Search npm packages via the npm registry API. 26 26 - * Returns results in the same `NpmSearchResponse` format as `useAlgoliaSearch`. 27 27 - * 28 28 - * Single-character queries are handled specially: they fetch lightweight 29 29 - * metadata from a server-side proxy instead of a search, because the 30 30 - * search API returns poor results for single-char terms. The proxy 31 31 - * fetches the full packument + download counts server-side and returns 32 32 - * only the fields needed for package cards. 41 41 + * Search npm packages. Single-character queries fetch lightweight metadata 42 42 + * via a server proxy since the search API returns poor results for them. 33 43 */ 34 44 async function search( 35 45 query: string, 36 46 options: NpmSearchOptions = {}, 37 47 signal?: AbortSignal, 38 48 ): Promise<NpmSearchResponse> { 39 39 - // Single-character: fetch lightweight metadata via server proxy 40 49 if (query.length === 1) { 41 50 try { 42 51 const meta = await $fetch<PackageMetaResponse>( ··· 57 66 } 58 67 } 59 68 60 60 - // Standard search 61 69 const params = new URLSearchParams() 62 70 params.set('text', query) 63 71 params.set('size', String(options.size ?? 25)) ··· 75 83 } 76 84 77 85 return { 78 78 - /** Search packages by text query */ 79 86 search, 87 87 + checkOrgExists, 88 88 + checkUserExists, 80 89 } 81 90 }

+248 -24

app/composables/npm/useSearch.ts

reviewed

··· 1 1 import type { NpmSearchResponse, NpmSearchResult } from '#shared/types' 2 2 import type { SearchProvider } from '~/composables/useSettings' 3 3 - import { emptySearchResponse } from './search-utils' 3 3 + import type { AlgoliaMultiSearchChecks } from './useAlgoliaSearch' 4 4 + import { type SearchSuggestion, emptySearchResponse, parseSuggestionIntent } from './search-utils' 5 5 + import { isValidNewPackageName, checkPackageExists } from '~/utils/package-name' 4 6 5 7 export interface SearchOptions { 6 6 - /** Number of results to fetch */ 7 8 size?: number 8 9 } 9 10 11 11 + export interface UseSearchConfig { 12 12 + /** 13 13 + * Enable org/user suggestion and package-availability checks alongside search. 14 14 + * Algolia bundles these into the same multi-search request. 15 15 + * npm runs them as separate API calls in parallel. 16 16 + */ 17 17 + suggestions?: boolean 18 18 + } 19 19 + 10 20 export function useSearch( 11 21 query: MaybeRefOrGetter<string>, 12 22 options: MaybeRefOrGetter<SearchOptions> = {}, 23 23 + config: UseSearchConfig = {}, 13 24 ) { 14 25 const { searchProvider } = useSearchProvider() 15 15 - const { search: searchAlgolia } = useAlgoliaSearch() 16 16 - const { search: searchNpm } = useNpmSearch() 26 26 + const { search: searchAlgolia, searchWithSuggestions: algoliaMultiSearch } = useAlgoliaSearch() 27 27 + const { 28 28 + search: searchNpm, 29 29 + checkOrgExists: checkOrgNpm, 30 30 + checkUserExists: checkUserNpm, 31 31 + } = useNpmSearch() 17 32 18 33 const cache = shallowRef<{ 19 34 query: string ··· 23 38 } | null>(null) 24 39 25 40 const isLoadingMore = shallowRef(false) 41 41 + const isRateLimited = ref(false) 26 42 27 27 - const isRateLimited = ref(false) 43 43 + const suggestions = shallowRef<SearchSuggestion[]>([]) 44 44 + const suggestionsLoading = shallowRef(false) 45 45 + const packageAvailability = shallowRef<{ name: string; available: boolean } | null>(null) 46 46 + const existenceCache = shallowRef<Record<string, boolean>>({}) 47 47 + let suggestionRequestId = 0 48 48 + 49 49 + /** 50 50 + * Determine which extra checks to include in the Algolia multi-search. 51 51 + * Returns `undefined` when nothing uncached needs checking. 52 52 + */ 53 53 + function buildAlgoliaChecks(q: string): AlgoliaMultiSearchChecks | undefined { 54 54 + if (!config.suggestions) return undefined 55 55 + 56 56 + const { intent, name } = parseSuggestionIntent(q) 57 57 + const lowerName = name.toLowerCase() 58 58 + 59 59 + const checks: AlgoliaMultiSearchChecks = {} 60 60 + let hasChecks = false 61 61 + 62 62 + if (intent && name) { 63 63 + const wantOrg = intent === 'org' || intent === 'both' 64 64 + const wantUser = intent === 'user' || intent === 'both' 65 65 + 66 66 + if (wantOrg && existenceCache.value[`org:${lowerName}`] === undefined) { 67 67 + checks.name = name 68 68 + checks.checkOrg = true 69 69 + hasChecks = true 70 70 + } 71 71 + if (wantUser && existenceCache.value[`user:${lowerName}`] === undefined) { 72 72 + checks.name = name 73 73 + checks.checkUser = true 74 74 + hasChecks = true 75 75 + } 76 76 + } 77 77 + 78 78 + const trimmed = q.trim() 79 79 + if (isValidNewPackageName(trimmed)) { 80 80 + checks.checkPackage = trimmed 81 81 + hasChecks = true 82 82 + } 83 83 + 84 84 + return hasChecks ? checks : undefined 85 85 + } 86 86 + 87 87 + /** 88 88 + * Update suggestion and package-availability state from multi-search results. 89 89 + * Only writes to the cache for checks that were actually sent; reads from 90 90 + * existing cache for the rest. 91 91 + */ 92 92 + function processAlgoliaChecks( 93 93 + q: string, 94 94 + checks: AlgoliaMultiSearchChecks | undefined, 95 95 + result: { orgExists: boolean; userExists: boolean; packageExists: boolean | null }, 96 96 + ) { 97 97 + const { intent, name } = parseSuggestionIntent(q) 98 98 + 99 99 + if (intent && name) { 100 100 + const lowerName = name.toLowerCase() 101 101 + const wantOrg = intent === 'org' || intent === 'both' 102 102 + const wantUser = intent === 'user' || intent === 'both' 103 103 + 104 104 + const updates: Record<string, boolean> = {} 105 105 + if (checks?.checkOrg) updates[`org:${lowerName}`] = result.orgExists 106 106 + if (checks?.checkUser) updates[`user:${lowerName}`] = result.userExists 107 107 + if (Object.keys(updates).length > 0) { 108 108 + existenceCache.value = { ...existenceCache.value, ...updates } 109 109 + } 110 110 + 111 111 + // Prefer org over user when both match (orgs always match owner.name too) 112 112 + const isOrg = wantOrg && existenceCache.value[`org:${lowerName}`] 113 113 + const isUser = wantUser && existenceCache.value[`user:${lowerName}`] 114 114 + 115 115 + const newSuggestions: SearchSuggestion[] = [] 116 116 + if (isOrg) { 117 117 + newSuggestions.push({ type: 'org', name, exists: true }) 118 118 + } 119 119 + if (isUser && !isOrg) { 120 120 + newSuggestions.push({ type: 'user', name, exists: true }) 121 121 + } 122 122 + suggestions.value = newSuggestions 123 123 + } else { 124 124 + suggestions.value = [] 125 125 + } 126 126 + 127 127 + const trimmed = q.trim() 128 128 + if (result.packageExists !== null && isValidNewPackageName(trimmed)) { 129 129 + packageAvailability.value = { name: trimmed, available: !result.packageExists } 130 130 + } else if (!isValidNewPackageName(trimmed)) { 131 131 + packageAvailability.value = null 132 132 + } 133 133 + 134 134 + suggestionsLoading.value = false 135 135 + } 28 136 29 137 const asyncData = useLazyAsyncData( 30 138 () => `search:${searchProvider.value}:${toValue(query)}`, ··· 38 146 } 39 147 40 148 const opts = toValue(options) 41 41 - 42 149 cache.value = null 43 150 44 151 if (provider === 'algolia') { 45 45 - const response = await searchAlgolia(q, { 46 46 - size: opts.size ?? 25, 47 47 - }) 152 152 + const checks = config.suggestions ? buildAlgoliaChecks(q) : undefined 153 153 + 154 154 + if (config.suggestions) { 155 155 + suggestionsLoading.value = true 156 156 + const result = await algoliaMultiSearch(q, { size: opts.size ?? 25 }, checks) 157 157 + 158 158 + if (q !== toValue(query)) { 159 159 + return emptySearchResponse() 160 160 + } 48 161 49 49 - if (q !== toValue(query)) { 50 50 - return emptySearchResponse() 162 162 + isRateLimited.value = false 163 163 + processAlgoliaChecks(q, checks, result) 164 164 + return result.search 51 165 } 52 166 53 53 - isRateLimited.value = false 167 167 + const response = await searchAlgolia(q, { size: opts.size ?? 25 }) 54 168 55 55 - cache.value = { 56 56 - query: q, 57 57 - provider, 58 58 - objects: response.objects, 59 59 - total: response.total, 169 169 + if (q !== toValue(query)) { 170 170 + return emptySearchResponse() 60 171 } 61 172 173 173 + isRateLimited.value = false 62 174 return response 63 175 } 64 176 ··· 77 189 } 78 190 79 191 isRateLimited.value = false 80 80 - 81 192 return response 82 193 } catch (error: unknown) { 83 83 - // npm 429 responses lack CORS headers, so the browser reports "Failed to fetch" 84 194 const errorMessage = (error as { message?: string })?.message || String(error) 85 195 const isRateLimitError = 86 196 errorMessage.includes('Failed to fetch') || errorMessage.includes('429') ··· 110 220 return 111 221 } 112 222 223 223 + // Seed cache from asyncData for Algolia (which skips cache on initial fetch) 224 224 + if (!cache.value && asyncData.data.value) { 225 225 + const d = asyncData.data.value 226 226 + cache.value = { 227 227 + query: q, 228 228 + provider, 229 229 + objects: [...d.objects], 230 230 + total: d.total, 231 231 + } 232 232 + } 233 233 + 113 234 const currentCount = cache.value?.objects.length ?? 0 114 235 const total = cache.value?.total ?? Infinity 115 236 ··· 168 289 169 290 watch(searchProvider, async () => { 170 291 cache.value = null 292 292 + existenceCache.value = {} 171 293 await asyncData.refresh() 172 294 const targetSize = toValue(options).size 173 295 if (targetSize) { ··· 198 320 return cache.value.objects.length < cache.value.total 199 321 }) 200 322 323 323 + // npm suggestion checking (Algolia handles suggestions inside the search handler above) 324 324 + if (config.suggestions) { 325 325 + async function validateSuggestionsNpm(q: string) { 326 326 + const requestId = ++suggestionRequestId 327 327 + const { intent, name } = parseSuggestionIntent(q) 328 328 + 329 329 + const trimmed = q.trim() 330 330 + if (isValidNewPackageName(trimmed)) { 331 331 + checkPackageExists(trimmed) 332 332 + .then(exists => { 333 333 + if (trimmed === toValue(query).trim()) { 334 334 + packageAvailability.value = { name: trimmed, available: !exists } 335 335 + } 336 336 + }) 337 337 + .catch(() => { 338 338 + packageAvailability.value = null 339 339 + }) 340 340 + } else { 341 341 + packageAvailability.value = null 342 342 + } 343 343 + 344 344 + if (!intent || !name) { 345 345 + suggestions.value = [] 346 346 + suggestionsLoading.value = false 347 347 + return 348 348 + } 349 349 + 350 350 + suggestionsLoading.value = true 351 351 + const result: SearchSuggestion[] = [] 352 352 + const lowerName = name.toLowerCase() 353 353 + 354 354 + try { 355 355 + const wantOrg = intent === 'org' || intent === 'both' 356 356 + const wantUser = intent === 'user' || intent === 'both' 357 357 + 358 358 + const promises: Promise<void>[] = [] 359 359 + 360 360 + if (wantOrg && existenceCache.value[`org:${lowerName}`] === undefined) { 361 361 + promises.push( 362 362 + checkOrgNpm(name) 363 363 + .then(exists => { 364 364 + existenceCache.value = { ...existenceCache.value, [`org:${lowerName}`]: exists } 365 365 + }) 366 366 + .catch(() => { 367 367 + existenceCache.value = { ...existenceCache.value, [`org:${lowerName}`]: false } 368 368 + }), 369 369 + ) 370 370 + } 371 371 + 372 372 + if (wantUser && existenceCache.value[`user:${lowerName}`] === undefined) { 373 373 + promises.push( 374 374 + checkUserNpm(name) 375 375 + .then(exists => { 376 376 + existenceCache.value = { ...existenceCache.value, [`user:${lowerName}`]: exists } 377 377 + }) 378 378 + .catch(() => { 379 379 + existenceCache.value = { ...existenceCache.value, [`user:${lowerName}`]: false } 380 380 + }), 381 381 + ) 382 382 + } 383 383 + 384 384 + if (promises.length > 0) { 385 385 + await Promise.all(promises) 386 386 + } 387 387 + 388 388 + if (requestId !== suggestionRequestId) return 389 389 + 390 390 + const isOrg = wantOrg && existenceCache.value[`org:${lowerName}`] 391 391 + const isUser = wantUser && existenceCache.value[`user:${lowerName}`] 392 392 + 393 393 + if (isOrg) { 394 394 + result.push({ type: 'org', name, exists: true }) 395 395 + } 396 396 + if (isUser && !isOrg) { 397 397 + result.push({ type: 'user', name, exists: true }) 398 398 + } 399 399 + } finally { 400 400 + if (requestId === suggestionRequestId) { 401 401 + suggestionsLoading.value = false 402 402 + } 403 403 + } 404 404 + 405 405 + if (requestId === suggestionRequestId) { 406 406 + suggestions.value = result 407 407 + } 408 408 + } 409 409 + 410 410 + watch( 411 411 + () => toValue(query), 412 412 + q => { 413 413 + if (searchProvider.value !== 'algolia') { 414 414 + validateSuggestionsNpm(q) 415 415 + } 416 416 + }, 417 417 + { immediate: true }, 418 418 + ) 419 419 + 420 420 + watch(searchProvider, () => { 421 421 + if (searchProvider.value !== 'algolia') { 422 422 + validateSuggestionsNpm(toValue(query)) 423 423 + } 424 424 + }) 425 425 + } 426 426 + 201 427 return { 202 428 ...asyncData, 203 203 - /** Reactive search results (uses cache in incremental mode) */ 204 429 data, 205 205 - /** Whether currently loading more results */ 206 430 isLoadingMore, 207 207 - /** Whether there are more results available */ 208 431 hasMore, 209 209 - /** Manually fetch more results up to target size */ 210 432 fetchMore, 211 211 - /** Whether the search was rate limited by npm (429 error) */ 212 433 isRateLimited: readonly(isRateLimited), 434 434 + suggestions: readonly(suggestions), 435 435 + suggestionsLoading: readonly(suggestionsLoading), 436 436 + packageAvailability: readonly(packageAvailability), 213 437 } 214 438 }

+14 -3

app/pages/index.vue

reviewed

··· 2 2 import { debounce } from 'perfect-debounce' 3 3 import { SHOWCASED_FRAMEWORKS } from '~/utils/frameworks' 4 4 5 5 + const { isAlgolia } = useSearchProvider() 6 6 + 5 7 const searchQuery = shallowRef('') 6 8 const isSearchFocused = shallowRef(false) 7 9 ··· 18 20 } 19 21 } 20 22 21 21 - const handleInput = isTouchDevice() 22 22 - ? search 23 23 - : debounce(search, 250, { leading: true, trailing: true }) 23 23 + const handleInputNpm = debounce(search, 250, { leading: true, trailing: true }) 24 24 + const handleInputAlgolia = debounce(search, 80, { leading: true, trailing: true }) 25 25 + 26 26 + function handleInput() { 27 27 + if (isTouchDevice()) { 28 28 + search() 29 29 + } else if (isAlgolia.value) { 30 30 + handleInputAlgolia() 31 31 + } else { 32 32 + handleInputNpm() 33 33 + } 34 34 + } 24 35 25 36 useSeoMeta({ 26 37 title: () => $t('seo.home.title'),

+11 -262

app/pages/search.vue

reviewed

··· 3 3 import { parseSortOption, PROVIDER_SORT_KEYS } from '#shared/types/preferences' 4 4 import { onKeyDown } from '@vueuse/core' 5 5 import { debounce } from 'perfect-debounce' 6 6 - import { isValidNewPackageName, checkPackageExists } from '~/utils/package-name' 6 6 + import { isValidNewPackageName } from '~/utils/package-name' 7 7 import { isPlatformSpecificPackage } from '~/utils/platform-packages' 8 8 import { normalizeSearchParam } from '#shared/utils/url' 9 9 ··· 11 11 const router = useRouter() 12 12 13 13 // Search provider 14 14 - const { search: algoliaSearch } = useAlgoliaSearch() 15 14 const { isAlgolia } = useSearchProvider() 16 15 17 16 // Preferences (persisted to localStorage) ··· 184 183 } 185 184 }) 186 185 187 187 - // Use incremental search with client-side caching 186 186 + // Use incremental search with client-side caching + org/user suggestions 188 187 const { 189 188 data: results, 190 189 status, ··· 192 191 hasMore, 193 192 fetchMore, 194 193 isRateLimited, 195 195 - } = useSearch(query, () => ({ 196 196 - size: requestedSize.value, 197 197 - })) 194 194 + suggestions: validatedSuggestions, 195 195 + packageAvailability, 196 196 + } = useSearch( 197 197 + query, 198 198 + () => ({ 199 199 + size: requestedSize.value, 200 200 + }), 201 201 + { suggestions: true }, 202 202 + ) 198 203 199 204 // Client-side sorted results for display 200 205 // The search API already handles text filtering, so we only need to sort. ··· 280 285 // Check if current query could be a valid package name 281 286 const isValidPackageName = computed(() => isValidNewPackageName(query.value.trim())) 282 287 283 283 - // Check if package name is available (doesn't exist on npm) 284 284 - const packageAvailability = shallowRef<{ name: string; available: boolean } | null>(null) 285 285 - 286 286 - // Debounced check for package availability 287 287 - const checkAvailability = debounce(async (name: string) => { 288 288 - if (!isValidNewPackageName(name)) { 289 289 - packageAvailability.value = null 290 290 - return 291 291 - } 292 292 - 293 293 - try { 294 294 - const exists = await checkPackageExists(name) 295 295 - // Only update if this is still the current query 296 296 - if (name === query.value.trim()) { 297 297 - packageAvailability.value = { name, available: !exists } 298 298 - } 299 299 - } catch { 300 300 - packageAvailability.value = null 301 301 - } 302 302 - }, 300) 303 303 - 304 304 - // Trigger availability check when query changes 305 305 - watch( 306 306 - query, 307 307 - q => { 308 308 - const trimmed = q.trim() 309 309 - if (isValidNewPackageName(trimmed)) { 310 310 - checkAvailability(trimmed) 311 311 - } else { 312 312 - packageAvailability.value = null 313 313 - } 314 314 - }, 315 315 - { immediate: true }, 316 316 - ) 317 317 - 318 288 // Get connector state 319 289 const { isConnected, npmUser, listOrgUsers } = useConnector() 320 290 ··· 376 346 }) 377 347 378 348 const claimPackageModalRef = useTemplateRef('claimPackageModalRef') 379 379 - 380 380 - /** 381 381 - * Check if a string is a valid npm username/org name 382 382 - * npm usernames: 1-214 characters, lowercase, alphanumeric, hyphen, underscore 383 383 - * Must not start with hyphen or underscore 384 384 - */ 385 385 - function isValidNpmName(name: string): boolean { 386 386 - if (!name || name.length === 0 || name.length > 214) return false 387 387 - // Must start with alphanumeric 388 388 - if (!/^[a-z0-9]/i.test(name)) return false 389 389 - // Can contain alphanumeric, hyphen, underscore 390 390 - return /^[\w-]+$/.test(name) 391 391 - } 392 392 - 393 393 - /** Validated user/org suggestion */ 394 394 - interface ValidatedSuggestion { 395 395 - type: 'user' | 'org' 396 396 - name: string 397 397 - exists: boolean 398 398 - } 399 399 - 400 400 - /** Cache for existence checks to avoid repeated API calls */ 401 401 - const existenceCache = ref<Record<string, boolean | 'pending'>>({}) 402 402 - 403 403 - /** 404 404 - * Check if an org exists by searching for scoped packages (@orgname/...). 405 405 - * When Algolia is active, searches for `@name/` scoped packages via text query. 406 406 - * Falls back to npm registry search API otherwise. 407 407 - */ 408 408 - async function checkOrgExists(name: string): Promise<boolean> { 409 409 - const cacheKey = `org:${name.toLowerCase()}` 410 410 - if (cacheKey in existenceCache.value) { 411 411 - const cached = existenceCache.value[cacheKey] 412 412 - return cached === true 413 413 - } 414 414 - existenceCache.value[cacheKey] = 'pending' 415 415 - try { 416 416 - const scopePrefix = `@${name.toLowerCase()}/` 417 417 - 418 418 - if (isAlgolia.value) { 419 419 - // Algolia: search for scoped packages — use the scope as a text query 420 420 - // and verify a result actually starts with @name/ 421 421 - const response = await algoliaSearch(`@${name}`, { size: 5 }) 422 422 - const exists = response.objects.some(obj => 423 423 - obj.package.name.toLowerCase().startsWith(scopePrefix), 424 424 - ) 425 425 - existenceCache.value[cacheKey] = exists 426 426 - return exists 427 427 - } 428 428 - 429 429 - // npm registry: search for packages in the @org scope 430 430 - const response = await $fetch<{ total: number; objects: Array<{ package: { name: string } }> }>( 431 431 - `${NPM_REGISTRY}/-/v1/search`, 432 432 - { query: { text: `@${name}`, size: 5 } }, 433 433 - ) 434 434 - const exists = response.objects.some(obj => 435 435 - obj.package.name.toLowerCase().startsWith(scopePrefix), 436 436 - ) 437 437 - existenceCache.value[cacheKey] = exists 438 438 - return exists 439 439 - } catch { 440 440 - existenceCache.value[cacheKey] = false 441 441 - return false 442 442 - } 443 443 - } 444 444 - 445 445 - /** 446 446 - * Check if a user exists by searching for packages they maintain. 447 447 - * Always uses the npm registry `maintainer:` search because Algolia's 448 448 - * `owner.name` field represents the org/account, not individual maintainers, 449 449 - * and cannot reliably distinguish users from orgs. 450 450 - */ 451 451 - async function checkUserExists(name: string): Promise<boolean> { 452 452 - const cacheKey = `user:${name.toLowerCase()}` 453 453 - if (cacheKey in existenceCache.value) { 454 454 - const cached = existenceCache.value[cacheKey] 455 455 - return cached === true 456 456 - } 457 457 - existenceCache.value[cacheKey] = 'pending' 458 458 - try { 459 459 - const response = await $fetch<{ total: number }>(`${NPM_REGISTRY}/-/v1/search`, { 460 460 - query: { text: `maintainer:${name}`, size: 1 }, 461 461 - }) 462 462 - const exists = response.total > 0 463 463 - existenceCache.value[cacheKey] = exists 464 464 - return exists 465 465 - } catch { 466 466 - existenceCache.value[cacheKey] = false 467 467 - return false 468 468 - } 469 469 - } 470 470 - 471 471 - /** 472 472 - * Parse the search query to extract potential user/org name 473 473 - */ 474 474 - interface ParsedQuery { 475 475 - type: 'user' | 'org' | 'both' | null 476 476 - name: string 477 477 - } 478 478 - 479 479 - const parsedQuery = computed<ParsedQuery>(() => { 480 480 - const q = query.value.trim() 481 481 - if (!q) return { type: null, name: '' } 482 482 - 483 483 - // Query starts with ~ - explicit user search 484 484 - if (q.startsWith('~')) { 485 485 - const name = q.slice(1) 486 486 - if (isValidNpmName(name)) { 487 487 - return { type: 'user', name } 488 488 - } 489 489 - return { type: null, name: '' } 490 490 - } 491 491 - 492 492 - // Query starts with @ - org search (without slash) 493 493 - if (q.startsWith('@')) { 494 494 - // If it contains a slash, it's a scoped package search 495 495 - if (q.includes('/')) return { type: null, name: '' } 496 496 - const name = q.slice(1) 497 497 - if (isValidNpmName(name)) { 498 498 - return { type: 'org', name } 499 499 - } 500 500 - return { type: null, name: '' } 501 501 - } 502 502 - 503 503 - // Plain query - could be user, org, or package 504 504 - if (isValidNpmName(q)) { 505 505 - return { type: 'both', name: q } 506 506 - } 507 507 - 508 508 - return { type: null, name: '' } 509 509 - }) 510 510 - 511 511 - /** Validated suggestions (only those that exist) */ 512 512 - const validatedSuggestions = ref<ValidatedSuggestion[]>([]) 513 513 - const suggestionsLoading = shallowRef(false) 514 514 - 515 515 - /** Counter to discard stale async results when query changes rapidly */ 516 516 - let suggestionRequestId = 0 517 517 - 518 518 - /** Validate suggestions (check org/user existence) */ 519 519 - async function validateSuggestionsImpl(parsed: ParsedQuery) { 520 520 - const requestId = ++suggestionRequestId 521 521 - 522 522 - if (!parsed.type || !parsed.name) { 523 523 - validatedSuggestions.value = [] 524 524 - suggestionsLoading.value = false 525 525 - return 526 526 - } 527 527 - 528 528 - suggestionsLoading.value = true 529 529 - const suggestions: ValidatedSuggestion[] = [] 530 530 - 531 531 - try { 532 532 - if (parsed.type === 'user') { 533 533 - const exists = await checkUserExists(parsed.name) 534 534 - if (requestId !== suggestionRequestId) return 535 535 - if (exists) { 536 536 - suggestions.push({ type: 'user', name: parsed.name, exists: true }) 537 537 - } 538 538 - } else if (parsed.type === 'org') { 539 539 - const exists = await checkOrgExists(parsed.name) 540 540 - if (requestId !== suggestionRequestId) return 541 541 - if (exists) { 542 542 - suggestions.push({ type: 'org', name: parsed.name, exists: true }) 543 543 - } 544 544 - } else if (parsed.type === 'both') { 545 545 - // Check both in parallel 546 546 - const [orgExists, userExists] = await Promise.all([ 547 547 - checkOrgExists(parsed.name), 548 548 - checkUserExists(parsed.name), 549 549 - ]) 550 550 - if (requestId !== suggestionRequestId) return 551 551 - // Org first (more common) 552 552 - if (orgExists) { 553 553 - suggestions.push({ type: 'org', name: parsed.name, exists: true }) 554 554 - } 555 555 - if (userExists) { 556 556 - suggestions.push({ type: 'user', name: parsed.name, exists: true }) 557 557 - } 558 558 - } 559 559 - } finally { 560 560 - // Only clear loading if this is still the active request 561 561 - if (requestId === suggestionRequestId) { 562 562 - suggestionsLoading.value = false 563 563 - } 564 564 - } 565 565 - 566 566 - if (requestId === suggestionRequestId) { 567 567 - validatedSuggestions.value = suggestions 568 568 - } 569 569 - } 570 570 - 571 571 - // Debounce lightly for npm (extra API calls are slower), skip debounce for Algolia (fast) 572 572 - const validateSuggestionsDebounced = debounce(validateSuggestionsImpl, 100) 573 573 - 574 574 - // Validate suggestions when query changes 575 575 - watch( 576 576 - parsedQuery, 577 577 - parsed => { 578 578 - if (isAlgolia.value) { 579 579 - // Algolia existence checks are fast - fire immediately 580 580 - validateSuggestionsImpl(parsed) 581 581 - } else { 582 582 - validateSuggestionsDebounced(parsed) 583 583 - } 584 584 - }, 585 585 - { immediate: true }, 586 586 - ) 587 587 - 588 588 - // Re-validate suggestions and clear caches when provider changes 589 589 - watch(isAlgolia, () => { 590 590 - // Cancel any pending debounced validation from the previous provider 591 591 - validateSuggestionsDebounced.cancel?.() 592 592 - // Clear existence cache since results may differ between providers 593 593 - existenceCache.value = {} 594 594 - // Re-validate with current query 595 595 - const parsed = parsedQuery.value 596 596 - if (parsed.type) { 597 597 - validateSuggestionsImpl(parsed) 598 598 - } 599 599 - }) 600 349 601 350 /** Check if there's an exact package match in results */ 602 351 const hasExactPackageMatch = computed(() => {