Skip to content

⬅️ Back to Table of Contents

📄 useFuse

📊 Analysis Summary

Metric Count
🔧 Functions 2
📦 Imports 11
🟢 Vue Composition API 3
📐 Interfaces 2
📑 Type Aliases 1

📚 Table of Contents

🛠️ File Location:

📂 packages/integrations/useFuse/index.ts

📦 Imports

Name Source
FuseResult fuse.js
IFuseOptions fuse.js
ComputedRef vue
MaybeRefOrGetter vue
Ref vue
Fuse fuse.js
computed vue
shallowRef vue
toValue vue
triggerRef vue
watch vue

Vue Composition API

Name Type Reactive Variables Composables
watch watch none none
watch watch none none
computed computed none none

Functions

useFuse(search: MaybeRefOrGetter<string>, data: MaybeRefOrGetter<DataItem[]>, options: MaybeRefOrGetter<UseFuseOptions<DataIte…): UseFuseReturn<DataItem>

Parameters:

  • search MaybeRefOrGetter<string>
  • data MaybeRefOrGetter<DataItem[]>
  • options MaybeRefOrGetter<UseFuseOptions<DataItem>>

Returns: UseFuseReturn<DataItem>

Calls:

  • toValue (from vue)
  • shallowRef (from vue)
  • createFuse
  • watch (from vue)
  • fuse.value.setCollection
  • triggerRef (from vue)
  • computed (from vue)
  • toValue(data).map
  • fuse.value.search

Internal Comments: 

// This will also be recomputed when `data` changes, as it causes a change
// to the Fuse instance, which is tracked here.

Code 
export function useFuse<DataItem>(
  search: MaybeRefOrGetter<string>,
  data: MaybeRefOrGetter<DataItem[]>,
  options?: MaybeRefOrGetter<UseFuseOptions<DataItem>>,
): UseFuseReturn<DataItem> {
  const createFuse = () => {
    return new Fuse(
      toValue(data) ?? [],
      toValue(options)?.fuseOptions,
    )
  }

  const fuse = shallowRef(createFuse())

  watch(
    () => toValue(options)?.fuseOptions,
    () => { fuse.value = createFuse() },
    { deep: true },
  )

  watch(
    () => toValue(data),
    (newData) => {
      fuse.value.setCollection(newData)
      triggerRef(fuse)
    },
    { deep: true },
  )

  const results: ComputedRef<FuseResult<DataItem>[]> = computed(() => {
    const resolved = toValue(options)
    // This will also be recomputed when `data` changes, as it causes a change
    // to the Fuse instance, which is tracked here.
    if (resolved?.matchAllWhenSearchEmpty && !toValue(search))
      return toValue(data).map((item, index) => ({ item, refIndex: index }))

    const limit = resolved?.resultLimit
    return fuse.value.search(toValue(search), (limit ? { limit } : undefined))
  })

  return {
    fuse,
    results,
  }
}

Internal helpers

Declared inside another function in this file.

createFuse(): any

Returns: any

Calls:

  • toValue (from vue)
Code 
() => {
    return new Fuse(
      toValue(data) ?? [],
      toValue(options)?.fuseOptions,
    )
  }

Interfaces

UseFuseOptions<T>

Interface Code 
export interface UseFuseOptions<T> {
  fuseOptions?: FuseOptions<T>
  resultLimit?: number
  matchAllWhenSearchEmpty?: boolean
}

Properties

Name Type Optional Description
fuseOptions FuseOptions<T> ✓ not shown
resultLimit number ✓ not shown
matchAllWhenSearchEmpty boolean ✓ not shown

UseFuseReturn<DataItem>

Interface Code 
export interface UseFuseReturn<DataItem> {
  fuse: Ref<Fuse<DataItem>>
  results: ComputedRef<FuseResult<DataItem>[]>
}

Properties

Name Type Optional Description
fuse Ref<Fuse<DataItem>> ✗ not shown
results ComputedRef<FuseResult<DataItem>[]> ✗ not shown

Type Aliases

FuseOptions<T>

type FuseOptions<T> = IFuseOptions<T>;

Generated by Syntax Scribe