Creating a svelte store of a document's flags
Is this wise, if even possible?
Like I want to create a writable store of a message's flags, so that I can freely edit it without having to worry about Foundry's
update functions.11 Replies
Checking Custom Stores, I suppose an easier way would be to create a custom store with an
update function embedded into it.
https://svelte.dev/tutorial/custom-storesThis will be addressed in the near future with the 2nd half of TJSDocument support where it will be possible to create automatic stores from document field paths including flags. They'll update the backing document correctly behind the scene and update when new data arrives.
I'll be investigating a potential fork of this Svelte add on store library to provide some implementation aspects to the process. Just note that this library itself is not the solution as it needs to be modified according to the Foundry document model process.
https://github.com/bryanmylee/svelte-keyed
Upcoming major features I'll be working on:
- Implement the drag and drop / automatic sorting of reactive embedded collections.
- 2nd half of TJSDocument overhaul for individual store / property creation.
With any luck I'll have both of these completed later this month.
oh that will be lovely
especially with me failing to make such a custom store, at least for now
It can be tricky. There are several examples and even really involved custom stores in TRL. For example the customized Position system that replaces the core Foundry handling of positional aspects for apps is super involved and has a lot of code.
Position.js, but a lot of code in this folder.
https://github.com/typhonjs-fvtt-lib/svelte/tree/main/src/application/position
I imagine that the code involved for custom document stores via TJSDocument will look similar to svelte-keyed, but certainly be different enough.Got it working 😄
even works with auto-subscribe
$ key which is lovelyVery nice. It shouldn't be too bad. Got a link to check out what you came up with?
GitHub
PF2e-Target-Damage/flagStores.js at svelte-dev · MrVauxs/PF2e-Targe...
Contribute to MrVauxs/PF2e-Target-Damage development by creating an account on GitHub.
Probably haphazard for what it's worth
Already experiencing that haphazardness, as usual.
It is a bit haphazard.
get targets and updateMessage looks suspect. Anytime you run subscribe it returns an unsubscribe function and I see usage of subscribe for access to the data stored in the writable. There is a get function from svelte/store that can be handy, but probably what makes most sense is storing the target array in a local private variable so that you can always have access to it.
It also looks like this is a one way store insofar that there is no hookup to the _message / document to receive changes from the server.Definitely not counting on anything coming from the other side. It's just for the flag for my module only.
It could be worth looking at TJSDocument for ideas particularly around subscribing to the Foundry document by "faking" the close / render method of an Application.
close gets called when a document is deleted. Render is invoked with a context object that gives some idea on what CRUD operation is occurring.
https://github.com/typhonjs-fvtt-lib/svelte/blob/main/src/store/document/TJSDocument.js
Another general improvement is just implementing the store contract directly and not using writable. A good article on that:
https://monad.fi/en/blog/svelte-custom-stores/
Most of the custom stores I create don't involve writable. This gives you a bit of extra flexibility in having direct access to the data vs less elegant ways of accessing it like you are doing presently.