Saving data to a store that has a getter?
i have an issue in that i need to figure out how to add to the scenes[selectedSceneId].sounds array
that 2nd line was an idea but not a good one, im guessing i need to use a setter but am not quite sure how.
This is my setter:
162 Replies
I feel like this is really close
@Atila if you are around today and have a chance to help me out again that would be most appreciated
i have also tried this
i use
mergeProps sometimes for merging objects with getters, not sure if it's applicable in this situation.i might be able to do that, i feel like i would have to make a copy of the scenes array and then modify the scenes[selectedScene],sounds array and then do the mergeProps to get the scenes back into the store
that sounds complicated
if u could make a minimal repro of what u wanna do in a playground i can have a look w u
maybe that's a long shot, but looking at your screenshot, I'd stopped unwrapping/cloning.
something like..
produce will receive a function where the current store is the param. Then, you can mutate it as you see fit and it will efficiently merge to the current store.
It's perfect for these granular mutations/appends.
@Atila that unwrap clone is just to get the base object to create a new one as there will not be any sounds in the array at startup. so im not sure i follow that set store and how it helps me
in reality those probably need moved out of the store as they should never get changed
ill see if i can get a simple version up on the playground
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
So yea i was really close a couple times
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
thats adjusted to make a copy of the default sound
truee forgot about
({ id }) => id === store.selectedSceneId
and yes structuredClone is definitely also possible, mb smarter if you want to add nesting later on.yea what does that do
why does need the {}
structuredClone is not the fastest, but if you don't have to do it a lot it's perfectly fine
it's a filter function, you could also write it like
so is the {} just short hand for the object at this spot?
yes, it's destructuring š
ok i had setStore("scenes", (scene) => scene.id == store.selectedSceneId
which seems to match what you said was an alternative
yes exactly
so close all i needed was (sounds) => [...sounds, newSound]
does that trigger all the sounds to react?
im assuming it would because of the spread
you could also do it without the spread tbh
just doing => newSound?
you could use produce: https://playground.solidjs.com/anonymous/c1c57684-8b77-4efd-893c-0b45c14ce63a
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
or insert it at the array.length: https://playground.solidjs.com/anonymous/5c0f7294-d0d8-48aa-b035-910dcfafb329
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
produce is a way of how to take mutations and then turn them into fine-grained updates. the
sounds it passes to the callback is a proxy.
a forgot to answer: no, it wouldn't cause the other sounds to react. their internal signals will be set, but because it will be set to the identical same value it does not trigger any updates.
but it would mean that the reference to store.selectedScene.sounds would changeahh ok
not sure that matters in my case but perhaps ill use the array.length method
if you go for that pattern i would advice to
untrack store.selectedScene.sounds.length: otherwise if you would call addSound in an effect it would currently loop forever. (you would update the array in an effect š array length changes š effect runs š update the array š...)Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
that's why mb the produce-pattern is safer
interesting and good to know
hope i m not overwhelming you with the options!
nope
its good to know all the ways
i do need to fix some code as i think i have that loop condition
if u are planning to use it in an effect that is something to be careful for, yes
im not right now
but i may in the future and forget about this
exactly
š¦¶ š«
so i swapped them to spreads and made a mental note not to use the .length way of doing things
so lets say i need to send an unwrapped version to an api end point
ye, always keep in mind that property access on a store is like accessing a signal
how would one watch the whole store for changes and react?
a yes, classic q
there is a
solid-primitive for that
but imo cleanest way of doing it is just proxying the store-setter
something like
nice ok
ill need that to send this store back to electron to save to the local filesystem
typing of that is a bit of a pain tho, u will need to do some casting to make it work
does the solid primitive do that for me?
o there are some nice localstorage primitives!
honestly: https://primitives.solidjs.community/
the unsung hero of solidjs
im already using one some place lol
oh man
this just wraps a store and lets you save it to disk without thinking about it
i knooow
createPersisted is amazingim assuming it also loads it from disk as well
yup
man this is going to make finishing this so much easier
ye really worth just scrolling through all the primitives
so they are somewhere in ur subconscious
ahh here we go im using createContextProvider
which is also magic
im sure i will have questions aon createPersisted as im running inside electron so not sure how that all plays together
should be perfectly fine since electron is just chrome in the end
lol, just by looking for u in the primitives i found something that could be really handy for a project i m working on rn
nice
so they provide an example at https://primitives.solidjs.community/playground/storage/
Solid Primitives
A library of high-quality primitives that extend SolidJS reactivity
but dont show the source code... or am i missing something
ok i found the sources on github
humm well its as simple as makePersisted but it dosnt seem to work with electron
unless i needed to kill the window after the npm install rather that just use the hot reload
nope no dice
mm strange
yea ill have to dig in some more, im guessing maybe when running as dev it has issues
maybe, but i wouldn't know how
it just accesses
localStorage
but mb i m missing somethingyea i think it may flush local storage on start if your in dev
also there are people saying it works some times and then randomly breaks at other times
so who knows i might need to send the json back to electron to write out, still dosnt seem that complex
some kind of warning so thats probably it
as it dosnt seem to like that i have no setter maybe
i feel like i keep shooting myself in the foot her e
after adding the primitive storage it dosnt like this
Store.selectedScene.sounds.forEach
even though im not changing anything inside the foreach
o i see it has some problems w serialising the getter
that does make a lot of sense
the serialized version of selectScene should probably just be null
undocumented, but powerful feature: you can compose stores.
so you could make a simpler version for makePersisted
then add the getter in the createStore
the opposite also works btw:
exactly
ill have to give that a go as i dont care about having any scene selected when the app loads
my larger issue now is getting my sounds playable/stopable again
i tried removing the makePersisted and that didnt do it so it wasnt that change
bugs be bugging
does this look valid for looping and creating audio players>
the error i get is
its complaining about this line
yea its really weird
code looks good from my pov
it does seem to update the store as other objects respond to those props
ye not sure!
@bigmistqke ok what am i doing wrong
createInitialStoreValue
something with the
this resolution, maybe return store.scenes.find(...)?
tbh never tried this pattern with makePersisted so i could be wrong!https://playground.solidjs.com/anonymous/64e8ddd3-501f-424a-9db0-890192d99c7c i can not seem to reproduce it. what i did find out tho is that you do need to use the setter from
makePersisted if u want to actually persist the dataSolid Playground
Quickly discover what the solid compiler will generate from your JSX template
a
const getCurrentScene = () => store.scenes[store.currentSceneId] instead of a getter in the store could simplify things tooill take a look at that playground
ok so setStore needs swapped to setPersisted
@bigmistqke got the local storage working without changes
just need to specify the name option for makePersisted
wellllll maybe
it worked once
truee
there is a name option
hum well one issue i found it it seems to trim off properties with empty arrays š¦
debugging now to see if its due to something im doing
that does the trick
even loads up the scene that i last had selected when i closed the app
well close lol
notice how it saved selectedScene
which breaks the getter
i can probably just remove it on bootr
ye that's what i was thinking already, that it would serialize those getters/setters to actual values
i remember when i started w solid i was doing a lot of this type of derived values in stores and stuff too
I wasn't able to get it to work by clearing it out on startup
So I'm thinking I'll send a signal from electron when the app is closed and then solid can send a signal back to electron with the json string to save
Or modify the set store method like you showed earlier
I just need to see what unwrap gives me on that store
Worst case I'll make a new object to return that only has what I want in it
ye think that's a good idea, then u have full control over what u serialize and what not
Yup
i would personally probably go for not having any derived state in the store and only having stuff i want serialised and do
const getCurrentScene = () => store.scenes[store.currentSceneId] instead of doing the getter, but that would work tooThe only reason I haven't looked at that was I have some things that are using store.slectedScene I guess those would just change to getCurrentascene()
exactly
@bigmistqke that seems to have worked better than expected
i have one issue im tracking down after that switch to getSelectedScene()
im not sure this is cool
how does that work?
it probably does not lol
but then you would use the
selectedScene as a key of the store?the key is selectedSceneId
yes, but
setStore(selectedScene, 'sounds', ...) this is not valid code
because then it's doing store[selectedScene].sounds...it did work with the selectedScene
but not with getSelectedScene()
setStore("scenes", 'selectedScene', 'sounds', index, produce((thisSound) => {
i had that
yes, it did work with selectedScene because
store.selectedScene would return the scene object
sois that not what getSelectedScene is doing ?
i thought find returned obj
eum yes, but
store.selectedScene is accessing a getter
store[selectedSceneObject] is trying to use an object as a keyook yea i figured it would not like that
but i think the question is: how to set current scene
yea and that i can just use the filter again
yup that's a good way
and you can always abstract it into a
setCurrentScene-function if you don't want that code littered over your codebasetrue
i guess that not the same
as CurrentScene is the id
no indeed
I was thinking more like
ohh nice i always think its going to be more complex but that spread opperator is nice
very useful!
now i need a name for it though as that would only use used to set values on the selected scene
and i have a setSelectedSene which updates the id and a few other cleanups
setSelectedSceneId?yup thats what i just did lol
is that vscode lying to me or real ?
a ye typing that stuff is painful
you can use
SetStoreFunction to type the function
so that the consumer's of this function get good types
and just cast to any / ignore inside setSelectedScenewhats the syntax for tying a function again?
u can do something like https://playground.solidjs.com/anonymous/649a0773-5a64-47de-8b84-f3d22338dc9a
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
humm this is some weird behavior now
not from that but i think from getSelectedScene
its stopped reacting
that no longer updates when the selectedScene is changed
ahh i got it
yes, that is expected behavior
const vs let
a no
nopw=
it's because you accessed the signal in the component's body
solid is the opposite of react: only when you are in effects then it is reactive
effects include memo and jsx
ok so how would this be resolved
i have interfaces that use that all over
{selectedScene().description}
call the function in the templateok
isnt this going to find for ever y instance i use in the jsx?
i m not sure i understand that question
like how many times is selectedScene() having to find the scene by id?
everyTime i call selectedScene() right?
yes, but that was the same as u did before
but then u had it wrapped in a getter
true
ok
u could memoize it
but i wouldn't tbh
except if you have like a million of those scenes
this for sure is not a heavy app
ye in solid the philosophy is: derived first, if it's really expensive then mb memo
@hcker2000 - it looks like this thread is pretty massive. are you finding the docs insufficient with what youāre doing?
i fear i may have jumped in the deep end on this and am back learning TS and what not as i learn this
the docs are clear but very granular
i cant seem to get the info to piece the bits in the docs together
@bigmistqke
still dosnt react did i mess up?
this is how the nav updates things
ignore
stupid hot reload killing me again
understandable! it can be daunting. our goal is to have the docs be sufficient for people looking into solid. so if you feel like thereās anything we can do to improve them, feel free to put in some issues.
i do worry that this might become a bit much for some of our ecosystem members so if you need some help with parts of this hopping into a voice chat / open sourcing your code may help people find the root of your troubles quicker, just as a suggestion
yea its publicly available on git hub
i might put in a request for more functional examples of complex things like this
@bigmistqke i think its good
now lets see if the primitive for the localStorageworks
it does
GitHub
GitHub - hcker2000/ttrpg-sounds: A soundboard for creating scenes (...
A soundboard for creating scenes (tavern, cave, epic battle) with multiple tracks - hcker2000/ttrpg-sounds
@bigmistqke thanks a ton for helping me understand this
ur super welcome!
project looks a lot of fun š
it was a good intro to solidjs
its also only my second time using electron
the fist required a lot more electron level stuff happening as i need to talk between windows
coding is always learning, s one of my favorite things about it
never ends
yup im 14 years in doing php so programming is not new to me but figured learning something new while solving a problem i have would be a good way to do it
@bigmistqke ok one more weird thing
soundIndex() gives me int 0
which is wher that test sound is in the array
mm sorry man, this i won't be able to help u
i would advice to do some logging
code looks good afaict
working on some logs now to see whats going on
@bigmistqke found the issue it is how im exporting that function for the contectprovider
it wasnt taking any of the args in