S
SolidJS

support

Help integrating microfuzz search library with solid

Nnikivi7/27/2023
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
Nnikivi7/27/2023
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
Nnikivi7/27/2023
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
Nnikivi7/27/2023
im basically trying to search over an array of strings that i pass
Nnikivi7/27/2023
so props.items is array like this
Nnikivi7/27/2023
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.
Nnikivi7/27/2023
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
Nnikivi7/27/2023
then fuzzySearch is created from props.items i tried with unwrap() too
Nnikivi7/27/2023
then onInput of the input box it should show matches
Nnikivi7/27/2023
but its 0 matches, not sure what im doing wrong on solid side
Nnikivi7/27/2023
thought above would work i also tried making fuzzySearch into a signal
Nnikivi7/27/2023
library does work, just my solid integration is broken
OOtonashi7/27/2023
you don't seem to be calling searchResults nor setSearchResults anywhere
Nnikivi7/27/2023
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 []
OOtonashi7/27/2023
is props.items an empty array at the time you call createFuzzySearch?
Nnikivi7/27/2023
oh yea
Nnikivi7/27/2023
strange though ok i think its because store gets filled in async way
Nnikivi7/27/2023
ok yea
Nnikivi7/27/2023
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
Nnikivi7/27/2023
Nnikivi7/27/2023
i.e. it works with above
Nnikivi7/27/2023
but if I do
Nnikivi7/27/2023
Nnikivi7/27/2023
this will take like 100ms to complete but by the time the comopnent already rendered
Nnikivi7/27/2023
i need to put it in effect and make fuzzysearch signal?
Nnikivi7/27/2023
Nnikivi7/27/2023
Nnikivi7/27/2023
this runs twice for example first empty then with values
Nnikivi7/27/2023
Nnikivi7/27/2023
i thought maybe this
OOtonashi7/27/2023
i would probably put fuzzySearch in a memo, and the search term in a signal and the results in a memo as well
Nnikivi7/27/2023
const fuzzySearch = createMemo(() => {
return createFuzzySearch(props.items)
})
const fuzzySearch = createMemo(() => {
return createFuzzySearch(props.items)
})
this?
OOtonashi7/27/2023
yeah
Nnikivi7/27/2023
search term in a signal results in a memo as well
this i dont fully get
Nnikivi7/27/2023
OOtonashi7/27/2023
create a signal for the search term and update it on input
Nnikivi7/27/2023
onInput={(e) => {
setSearchQuery(e.target.value)
onInput={(e) => {
setSearchQuery(e.target.value)
OOtonashi7/27/2023
then create a memo for the search results that uses fuzzySearch
Nnikivi7/27/2023
ok done
OOtonashi7/27/2023
const searchResults = createMemo(() => fuzzySearch()(searchQuery()));
Nnikivi7/27/2023
Nnikivi7/27/2023
doesnt like that oh wow yours it likes oh probably missing return
OOtonashi7/27/2023
fuzzySearch is a function that returns the search function so you need to call it before calling it
Nnikivi7/27/2023
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
OOtonashi7/27/2023
that's basically what searchResults is i guess
Nnikivi7/27/2023
like it should loop over filteredResults i think which on default are props.items
Nnikivi7/27/2023
Nnikivi7/27/2023
its empty though on mount
OOtonashi7/27/2023
so if the query is empty it should return the whole array?
Nnikivi7/27/2023
yes
OOtonashi7/27/2023
then just change the memo to return props.items if the search query is empty
Nnikivi7/27/2023
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()}>
OOtonashi7/27/2023
well you wouldn't be searching
Nnikivi7/27/2023
and this
OOtonashi7/27/2023
you'd just check searchQuery() so like if (!searchQuery()) { return props.items } else { ... }
Nnikivi7/27/2023
ok i have this as solution
Nnikivi7/27/2023
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 🤔
OOtonashi7/27/2023
why not access item.item in For?
Nnikivi7/27/2023
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
OOtonashi7/27/2023
yeah
Nnikivi7/27/2023
<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
OOtonashi7/27/2023
just item.item
Nnikivi7/27/2023
Nnikivi7/27/2023
also getting this now for some reason
Nnikivi7/27/2023
OOtonashi7/27/2023
oh right because it can be either an array of strings or an array of results
Nnikivi7/27/2023
yes
Nnikivi7/27/2023
Nnikivi7/27/2023
this is result from that fuzzy lib thus i do the map but that seems expensive
OOtonashi7/27/2023
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}
Nnikivi7/27/2023
sick that works i guess thats less expensive than map
OOtonashi7/27/2023
or actually you could also just wait nah
Ppeerreynders7/28/2023
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.

Looking for more? Join the community!

Want results from more Discord servers?
Add your server
Recommended Posts
createResource doesn't rerun when passed store changesAm I using this correctly? Ryan said it should work when wrapped in a function: https://github.com/React Icons ErrorReact icons is not rendering on the UI please i need helpsolid-eslint warning about event handlersSo, I get the `eslintsolid/reactivity` warning when I use reactive props in event handlers: > This fScroll & Drag Solid DNDHi, do you know the best way to manage scroll (auto) when using solid dnd? Especially as I have theHow can this incredibly simple piece of code lead to "Maximum call stack size exceeded" ?The entire code for this demo is here: https://playground.solidjs.com/anonymous/7ec72a47-1bb4-4e9f-bHow to protect all routes other than sign-inHi there, I am making an app where I only want signed-in users to see the content, I want all routesTypeError: Cannot read properties of undefined (reading 'remove') at reconcileArraysI get this during a `refetch()` call of a resource. Pretty hard to debug and see what actually getsValidating a field based on promise values min and max with yup and react form handlerconst schemaReference = (res) => { console.log(res); return yup.object({ unit: yup.strReaching into nested properties and keeping them reactive?Coming from React I really like that I can destruct nested props into single variables, in this examTesting difficulties in solid-startI'm running into some perplexing errors with Vitest in my SSR-enabled Solid Start app. In the importReactSVG like component in SolidHey, I recently was remaking my portfolio website in astro with some solid.js. I wanted to make an iSuspense not updating when navigating to Route directlyHey folks, I am currently having a weird issue I can't quite solve: We have a route which receivesHow do you do logging errors etc. In solid start?Like how do you get logs you can browse for instance in a web interface when solid start app is runnwarnings when passing onClick as propI get a warning in the child component when I pass an event handler from the parent. In the parenRoutes are being duplicated when HMR is onIt seems whenever the file updates the route is not actually refreshed and it just adds the updated Solidstart Astro or ViteCreated a SolidStart project and saw that it was using Astro. Looking at the docs it says the projecsibling componentsI've read the docs, and I just can't wrap my head around how to trigger a function in a sibling comptesting createRouteAction$ using vitestHi all! How do I go about testing createServerAction$ in vitest? I'm basically writing ``` export fucreateResource returns undefinedHello, goodnight everyone. Im having a problem using createResource. This function returns me undefiSuspense doesn't seem to work with ContextProviderhey, so recently I noticed, If I use `createResource(fetch)` and then put `<Suspense fallback={<Pl