perf: look up icon collections by hyphen-separated prefix (#561)

Author: danielroe

src/runtime/components/resolve-name.ts

@@ -1,22 +1,29 @@
 import { computed, reactive, toRaw } from 'vue'
 import type { NuxtIconRuntimeOptions } from '../../types'
 
-const HYPHEN = 45
+const collectionSetCache = new WeakMap<string[], { readonly value: Set<string> }>()
 
-const sortedCollectionsCache = new WeakMap<string[], { readonly value: string[] }>()
-
-export function getSortedCollections(collections: string[] | null | undefined): string[] {
+export function getCollectionSet(collections: string[] | null | undefined): Set<string> | undefined {
   if (!collections)
-    return []
+    return
   const key = toRaw(collections)
-  let sorted = sortedCollectionsCache.get(key)
-  if (!sorted) {
-    const sort = (source: string[]) => [...source].sort((a, b) => b.length - a.length)
+  let set = collectionSetCache.get(key)
+  if (!set) {
     // App config is cloned per request on the server, but reactive and updated in place on the client (HMR, `updateAppConfig`)
-    sorted = import.meta.client ? computed(() => sort(reactive(key))) : { value: sort(key) }
-    sortedCollectionsCache.set(key, sorted)
+    set = import.meta.client ? computed(() => new Set(reactive(key))) : { value: new Set(key) }
+    collectionSetCache.set(key, set)
+  }
+  return set.value
+}
+
+function findCollection(name: string, collections: Set<string>): string | undefined {
+  let index = name.lastIndexOf('-')
+  while (index > 0) {
+    const collection = name.slice(0, index)
+    if (collections.has(collection))
+      return collection
+    index = name.lastIndexOf('-', index - 1)
   }
-  return sorted.value
 }
 
 export function resolveName(name: string, options: Pick<NuxtIconRuntimeOptions, 'cssSelectorPrefix' | 'aliases' | 'collections'>): string {
@@ -28,8 +35,8 @@ export function resolveName(name: string, options: Pick<NuxtIconRuntimeOptions,
   // Disambiguate collection
   // e.g. `simple-icons-github` -> `simple-icons:github`
   if (!resolved.includes(':')) {
-    const collection = getSortedCollections(options.collections)
-      .find(c => resolved.charCodeAt(c.length) === HYPHEN && resolved.startsWith(c))
+    const collections = getCollectionSet(options.collections)
+    const collection = collections && findCollection(resolved, collections)
     return collection
       ? collection + ':' + resolved.slice(collection.length + 1)
       : resolved

test/resolve-name.test.ts

@@ -1,6 +1,6 @@
 import { computed, reactive } from 'vue'
 import { describe, expect, it } from 'vitest'
-import { getSortedCollections, resolveName } from '../src/runtime/components/resolve-name'
+import { getCollectionSet, resolveName } from '../src/runtime/components/resolve-name'
 
 function createOptions(collections: string[] | null, aliases: Record<string, string> = {}) {
   return { cssSelectorPrefix: 'i-', aliases, collections }
@@ -19,6 +19,14 @@ describe('resolveName', () => {
     expect(resolveName('i-si-foo', options)).toBe('si:foo')
   })
 
+  it('prefers the longest collection regardless of configured order', () => {
+    const options = createOptions(['a', 'a-b-c', 'a-b'])
+    expect(resolveName('i-a-b-c-d', options)).toBe('a-b-c:d')
+    expect(resolveName('i-a-b-x-d', options)).toBe('a-b:x-d')
+    expect(resolveName('i-a-x-c-d', options)).toBe('a:x-c-d')
+    expect(resolveName('i-a-b-c', options)).toBe('a-b:c')
+  })
+
   it('requires a hyphen after the collection name', () => {
     const options = createOptions(['simple', 'si'])
     expect(resolveName('i-simpleicons', options)).toBe('simpleicons')
@@ -74,9 +82,9 @@ describe('resolveName', () => {
   })
 })
 
-describe('getSortedCollections', () => {
-  it('sorts each collections array once', () => {
+describe('getCollectionSet', () => {
+  it('creates one set per collections array', () => {
     const collections = ['simple', 'simple-icons']
-    expect(getSortedCollections(collections)).toBe(getSortedCollections(collections))
+    expect(getCollectionSet(collections)).toBe(getCollectionSet(collections))
   })
 })