cucumber / react-components

React components for Cucumber
MIT License
32 stars 10 forks source link

Replace search engine and improve UX #337

Closed davidjgoss closed 9 months ago

davidjgoss commented 9 months ago

šŸ¤” What's changed?

elasticlunr is removed in favour of Orama. This gets rid of bundling issues and allows us to do a production build of Ladle and deploy the preview with Netlify. It also reduces the dependency footprint (see lockfile diff).

The diff is bigger than you might expect for simply swapping out a library that does the same thing, because all Orama's interfaces (for creating indexes, and inserting, and searching) are async. This required a refactor of how and when we build the search to fit that async pattern. As such, lot of tests needed converting to be async and having assertions wrapped in await waitFor() etc.

Also, search plumbing is now extracted from the <FilteredResults/> component and done in a hook useFilteredDocuments().

Finally, applied the search query on change (with half-second debounce) so you don't have to hit enter each time - this often frustrates me as a user.

āš”ļø What's your motivation

elasticlunr is unmaintained, and also published in a format that is troublesome for some module bundlers e.g. Vite that is behind Ladle. We need to replace it with something more modern, and while we're at it move logic out of components and into hooks/functions where possible.

šŸ·ļø What kind of change is this?

šŸ“‹ Checklist:


This text was originally generated from a template, then edited by hand. You can modify the template here.

netlify[bot] commented 9 months ago

Deploy Preview for cucumber-react-components ready!

Name Link
Latest commit 0950c24ed3c11cbc0c84a47daa45eeae33c8d138
Latest deploy log https://app.netlify.com/sites/cucumber-react-components/deploys/656c8a3a1e526e00080c3e8e
Deploy Preview https://deploy-preview-337--cucumber-react-components.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.