Context
Here's a simplified version of my context:
- fetches a collection of items from the server ->
bookmarks [{title, url}, ...] - in a reactive statement, populates a new collection from
bookmarksby adding a new property with the domain name of the url: `xbookmarks = [{title, url, domain}, ...] - makes it possible to filter bookmarks by domain, by displaying a list of checkboxes, one per domain:
- this is achieved by declaring a
filter: {domains: {domain:true|false, ...}}variable - the
filter.domainsmap is populated in a reactive statement by iterating overxbookmarksand setting all domains totrue - finally, a
filterdBookmarksvariable is computed in a reactive statement by filteringxbookmarksusingfilter
- this is achieved by declaring a
- displays the filtered bookmarks
What I have tried
Here's the flow in pseudo-javascript:
let bookmarks=[]
let xbookmarks=[]
$: xbookmarks = bookmarks.map(b=>{...b, domain: computeDomain(b)})
let filter = {domains: {}}
$: filter.domains=extractDomains(xbookmarks)
let filterdBookmarks=[]
$: filterBookmarks = xbookmarks.filter(using filter)
Here's a link to the svelte REPL with the complete code described above: https://svelte.dev/repl/d07ffc88e4a34cb797d2ceb6ba0ec6a4?version=3.49.0
Problem
When I try to uncheck one of the domains checkboxes:
Expected behaviour:
filter changed => trigger recomputation of depending variables, i.e. filterdBookmarks
Actual behaviour:
filter changed => Svelte recomputes xbookmarks, then filter.domains which resets it back to all domains being checked, then filterdBookmarks
I can't understand why Svelte considers that xbookmarks depends on filter
When I looked into the JS code generated by Svelte, this shouldn't be happening:
As can be seen in the screenshot above, the generated code matches my intuition about the dependencies:
xbookmarksis recomputed whenbookmarkschangesfilter.domainsis recomputed whenxbookmarkschangesfilteredBookmarksis recomputed when either offilterofxbookmarkschanges
P.S.: I have just started learning and playing with Svelte

