SolidJS•17mo ago

Help integrating microfuzz search library with solid

I want to integrate this library into my component https://github.com/Nozbe/microfuzz I have this code for it: https://github.com/learn-anything/learn-anything/blob/main/app/packages/electron-web/src/components/SearchModal.tsx

GitHub

GitHub - Nozbe/microfuzz: A tiny, simple, fast JS fuzzy search library

A tiny, simple, fast JS fuzzy search library. Contribute to Nozbe/microfuzz development by creating an account on GitHub.

GitHub

learn-anything/app/packages/electron-web/src/components/SearchModal...

Organize world's knowledge, explore connections and curate learning paths - learn-anything/learn-anything

72 Replies

nikiviOP•17mo ago

component is being rendered here: https://github.com/learn-anything/learn-anything/blob/main/app/packages/electron-web/src/App.tsx#L96

GitHub

learn-anything/app/packages/electron-web/src/App.tsx at main · lear...

Organize world's knowledge, explore connections and curate learning paths - learn-anything/learn-anything

nikiviOP•17mo ago

https://github.com/learn-anything/learn-anything/blob/main/app/packages/electron-web/src/GlobalContext/user.ts#L24 it uses this store

GitHub

learn-anything/app/packages/electron-web/src/GlobalContext/user.ts ...

Organize world's knowledge, explore connections and curate learning paths - learn-anything/learn-anything

nikiviOP•17mo ago

im basically trying to search over an array of strings that i pass

nikiviOP•17mo ago

so props.items is array like this

nikiviOP•17mo ago

the problem is that i follow readme of this lib https://github.com/Nozbe/microfuzz#using-microfuzz-plain-js

GitHub

GitHub - Nozbe/microfuzz: A tiny, simple, fast JS fuzzy search library

A tiny, simple, fast JS fuzzy search library. Contribute to Nozbe/microfuzz development by creating an account on GitHub.

nikiviOP•17mo ago

and i thought i do it like this in solid i get items as prop so i create local searchResults signal that will show filtered results

nikiviOP•17mo ago

then fuzzySearch is created from props.items i tried with unwrap() too

nikiviOP•17mo ago

then onInput of the input box it should show matches

nikiviOP•17mo ago

but its 0 matches, not sure what im doing wrong on solid side

nikiviOP•17mo ago

thought above would work i also tried making fuzzySearch into a signal

nikiviOP•17mo ago

library does work, just my solid integration is broken

Otonashi•17mo ago

you don't seem to be calling searchResults nor setSearchResults anywhere

nikiviOP•17mo ago

yes but im not filtering anything im trying to do matches can't filter if i can't do matches filteredItems is more appropriate name actually results always shows []

Otonashi•17mo ago

is props.items an empty array at the time you call createFuzzySearch?

nikiviOP•17mo ago

oh yea

nikiviOP•17mo ago

strange though ok i think its because store gets filled in async way

nikiviOP•17mo ago

ok yea

nikiviOP•17mo ago

i was just opening this modal too fast as i was testing and store did not get filled with values how can i make it work though im curious if i render SearchModal instantly before my store value of topics gets filled

nikiviOP•17mo ago

nikiviOP•17mo ago

i.e. it works with above

nikiviOP•17mo ago

but if I do

nikiviOP•17mo ago

nikiviOP•17mo ago

this will take like 100ms to complete but by the time the comopnent already rendered

nikiviOP•17mo ago

i need to put it in effect and make fuzzysearch signal?

nikiviOP•17mo ago

nikiviOP•17mo ago

nikiviOP•17mo ago

this runs twice for example first empty then with values

nikiviOP•17mo ago

nikiviOP•17mo ago

i thought maybe this

Otonashi•17mo ago

i would probably put fuzzySearch in a memo, and the search term in a signal and the results in a memo as well

nikiviOP•17mo ago

  const fuzzySearch = createMemo(() => {
    return createFuzzySearch(props.items)
  })

  const fuzzySearch = createMemo(() => {
    return createFuzzySearch(props.items)
  })

this?

Otonashi•17mo ago

yeah

nikiviOP•17mo ago

search term in a signal results in a memo as well

this i dont fully get

nikiviOP•17mo ago

Otonashi•17mo ago

create a signal for the search term and update it on input

nikiviOP•17mo ago

              onInput={(e) => {
                setSearchQuery(e.target.value)

              onInput={(e) => {
                setSearchQuery(e.target.value)

Otonashi•17mo ago

then create a memo for the search results that uses fuzzySearch

nikiviOP•17mo ago

ok done

Otonashi•17mo ago

const searchResults = createMemo(() => fuzzySearch()(searchQuery()));

nikiviOP•17mo ago

nikiviOP•17mo ago

doesnt like that oh wow yours it likes oh probably missing return

Otonashi•17mo ago

fuzzySearch is a function that returns the search function so you need to call it before calling it

nikiviOP•17mo ago

export default function SearchModal(props: Props) {
  const [filteredItems, setFilteredItems] = createSignal(props.items)
  const [searchQuery, setSearchQuery] = createSignal("")

  const fuzzySearch = createMemo(() => {
    return createFuzzySearch(props.items)
  })

  const searchResults = createMemo(() => fuzzySearch()(searchQuery()))

  createEffect(() => {
    console.log(searchResults, "search results")
  })

export default function SearchModal(props: Props) {
  const [filteredItems, setFilteredItems] = createSignal(props.items)
  const [searchQuery, setSearchQuery] = createSignal("")

  const fuzzySearch = createMemo(() => {
    return createFuzzySearch(props.items)
  })

  const searchResults = createMemo(() => fuzzySearch()(searchQuery()))

  createEffect(() => {
    console.log(searchResults, "search results")
  })

i thought doing this effect

  createEffect(() => {
    console.log(searchResults(), "search results")
  })

  createEffect(() => {
    console.log(searchResults(), "search results")
  })

oh wow ok that does work thank you lots @otonashi9 ❤️

  const [filteredItems, setFilteredItems] = createSignal(props.items)

  const [filteredItems, setFilteredItems] = createSignal(props.items)

should this become a memo too?

                <For each={props.items}>
                  {(item) => {
                    return (
                      <div

                <For each={props.items}>
                  {(item) => {
                    return (
                      <div

im thinking about this loop

Otonashi•17mo ago

that's basically what searchResults is i guess

nikiviOP•17mo ago

like it should loop over filteredResults i think which on default are props.items

nikiviOP•17mo ago

nikiviOP•17mo ago

its empty though on mount

Otonashi•17mo ago

so if the query is empty it should return the whole array?

nikiviOP•17mo ago

yes

Otonashi•17mo ago

then just change the memo to return props.items if the search query is empty

nikiviOP•17mo ago

  const searchResults = createMemo(() => {
    if (fuzzySearch()(searchQuery).length === 0) {
      return props.items
    } else {
      return fuzzySearch()(searchQuery())
    }
  })

  const searchResults = createMemo(() => {
    if (fuzzySearch()(searchQuery).length === 0) {
      return props.items
    } else {
      return fuzzySearch()(searchQuery())
    }
  })

                <For each={searchResults()}>

                <For each={searchResults()}>

Otonashi•17mo ago

well you wouldn't be searching

nikiviOP•17mo ago

and this

Otonashi•17mo ago

you'd just check searchQuery() so like if (!searchQuery()) { return props.items } else { ... }

nikiviOP•17mo ago

ok i have this as solution

nikiviOP•17mo ago

it does work but i imagine that .map could be avoided potentially its just this fuzzysearch thing returns like an object with matches etc. and i need to turn it into array of strings so i thought i would map over it to create that array otherwise i had issues with <For as it would both be going over array of strings or array of objects and didn't know how to make it work for both there nicely memos are neat should really use more of it 🤔

Otonashi•17mo ago

why not access item.item in For?

nikiviOP•17mo ago

ok so

  const searchResults = createMemo(() => {
    if (!searchQuery()) {
      return props.items
    } else {
      return fuzzySearch()(searchQuery())

  const searchResults = createMemo(() => {
    if (!searchQuery()) {
      return props.items
    } else {
      return fuzzySearch()(searchQuery())

with this

Otonashi•17mo ago

yeah

nikiviOP•17mo ago

                <For each={searchResults()}>
                  {(item) => {
                    return (
                      <div
                        onClick={() => {}}
                        class="text-black dark:text-white px-6 rounded-lg py-3"
                      >
                        <div>{item}</div>

                <For each={searchResults()}>
                  {(item) => {
                    return (
                      <div
                        onClick={() => {}}
                        class="text-black dark:text-white px-6 rounded-lg py-3"
                      >
                        <div>{item}</div>

in that div it can either be item or item.item

Otonashi•17mo ago

just item.item

nikiviOP•17mo ago

nikiviOP•17mo ago

also getting this now for some reason

nikiviOP•17mo ago

Otonashi•17mo ago

oh right because it can be either an array of strings or an array of results

nikiviOP•17mo ago

yes

nikiviOP•17mo ago

nikiviOP•17mo ago

this is result from that fuzzy lib thus i do the map but that seems expensive

Otonashi•17mo ago

i guess either keep using .map or check if item is a string or not when accessing it in For {typeof item === "string" ? item : item.item}

nikiviOP•17mo ago

sick that works i guess thats less expensive than map

Otonashi•17mo ago

or actually you could also just wait nah

peerreynders•17mo ago

FYI: Now a Solid port of the @nozbe/microfuzz/demo is available on StackBlitz https://stackblitz.com/edit/solidjs-templates-vitmqw https://github.com/peerreynders/solid-microfuzz-demo

peerreynders

StackBlitz

Solid version of microfuzz demo - StackBlitz

A port of the @nozbe/microfuzz demo ported to SolidJS. https://github.com/peerreynders/solid-microfuzz-demo Original: nozbe.github.io/microfuzz/

GitHub

GitHub - peerreynders/solid-microfuzz-demo: A port of the @nozbe/mi...

A port of the @nozbe/microfuzz demo ported to SolidJS. - GitHub - peerreynders/solid-microfuzz-demo: A port of the @nozbe/microfuzz demo ported to SolidJS.

Gaming

Programming

Help integrating microfuzz search library with solid