Fuzzy: cerca en TypeScript sense dependències

@polgubau/fuzzy és una llibreria de cerca difusa optimitzada, dissenyada amb TypeScript des de la base. Només cal escriure una comanda i cridar una funció per tenir un cercador difús al teu projecte.

Què i per què

Els filtres en JavaScript solen ser coneguts per ser lents i feixucs. El mètode natiu Array.prototype.filter no està optimitzat per al rendiment, especialment quan es treballa amb grans conjunts de dades. Aquesta llibreria ofereix una manera senzilla i eficient de realitzar cerques difuses en matrius de cadenes de text.

Et permet crear una funció de cerca difusa que es pot reutilitzar a tota l’aplicació, facilitant el filtratge de llistes basat en l’entrada de l’usuari.

Què NO és això ⚠️

Una llibreria per a tot que resol tots els problemes.
Un substitut de Lodash o Underscore.
Un paquet que inflarà innecessàriament la mida del teu paquet.

Què ÉS això ✅

Una col·lecció de petites funcions d’utilitat focalitzades.
Modular, “tree-shakable” i lleuger tant per a CJS com per a ESM.
Dissenyat per ser senzill, eficient i fàcil d’utilitzar.
Totalment tipat, amb definicions de TypeScript incloses.

Instal·lació

Instal·la la llibreria utilitzant el teu gestor de paquets preferit:

pnpm add @polgubau/fuzzy

Ús

import fuzzy from '@polgubau/fuzzy';

const list = ["volvo", "seat", "mercedes", "audi", "bmw"];
const queryText = "volv"; // El terme de cerca
const fuzzySearch = fuzzy(list);

// Executa això quan el terme de cerca canviï
const fuzzedList = fuzzySearch(queryText);
console.log(fuzzedList);

Adaptadors per a frameworks

El nucli de la llibreria està disponible com un paquet independent, però també oferim adaptadors per a frameworks populars com React i Vue.

Tingues en compte que la importació del nucli és @polgubau/fuzzy, mentre que els adaptadors de React i Vue s’importen des de @polgubau/fuzzy/react i @polgubau/fuzzy/vue respectivament.

L’ús d’aquesta importació et permetrà utilitzar la llibreria d’una manera independent del framework, mentre que les importacions específiques del framework proporcionaran funcionalitats addicionals adaptades a aquest framework. Així no importes els paquets de Vue o React si no els necessites.

Fas servir React?

Per simplificar la integració de la cerca difusa a les teves aplicacions React, oferim un hook personalitzat anomenat useFuzzy.

import { useFuzzy, Highlight } from '@polgubau/fuzzy/react' // Nota: ara important des de /react

const filteredList = useFuzzy({
  list: ["volvo", "seat", "mercedes", "audi", "bmw"],
  query: "volv"
})

filteredList.map(({ item, matches: [range] }) => (
  <div key={item}>
    <Highlight text={item} ranges={range} />
  </div>
))

Fas servir Vue?

El mateix enfocament està disponible per a aplicacions Vue. Oferim un “composable” anomenat useFuzzy per simplificar la integració de la cerca difusa a les teves aplicacions Vue.

<template>
  <div>
    <input v-model="query" placeholder="Cerca..." />
    <ul>
      <li v-for="(result, index) in fuzzySearch.results" :key="index">
        {{ result }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { ref } from "vue";
import { useFuzzy } from "@polgubau/fuzzy/vue";

export default {
  setup() {
    // Llista de cadenes per a la cerca
    const items = ref<string[]>(["Apple", "Banana", "Cherry", "Grape", "Pineapple"]);
    const query = ref("");

    // Utilitzant el composable
    const fuzzySearch = useFuzzy({ list: items, query });

    return {
      query,
      fuzzySearch,
    };
  },
};
</script>

Documentació

La pàgina de documentació està disponible a fuzzy.polgubau.com.

La documentació està construïda amb Fumadocs amb algunes personalitzacions.

Suport i18n

La documentació està disponible en diversos idiomes. Pots canviar entre ells utilitzant el selector d’idioma a la part superior dreta de la pàgina. Actualment, es donen suport als següents idiomes:

Idioma	Suportat
Anglès	✅
Castellà	✅
Català	✅
Alemany	✅

🛠 Desenvolupament

Construcció del projecte

La manera més fàcil de treballar amb el monorepo del projecte és executar

pnpm dev

al directori arrel. Això iniciarà una compilació en mode watch per al paquet i iniciarà un servidor local per previsualitzar la pàgina de documentació.

Execució de tests

Els tests estan escrits en TypeScript i utilitzen Vitest com a framework de proves. Executa la comanda dins del directori packages/fuzzy per executar els tests.