sveltesvelte-componentsvelte-storesvelte-4

Svelte TreeView not update when store data updates


I need to represent my data in a tree view and use as base the TreeView from svelte.

What I figured out is that if the TreeView data changed, the html will not rerender the tree. The data object is updated but not the html.

I create a new sample based on the original:
Playground

What I currently need to do is to clear the store and with a ms timeout set the new data:

const updateHacky = () => { 
    writableArray.set([])
    setTimeout(() => {
        writableArray.set([updateData])
    }, 1);
}

but what I expect is that on

writableArray.update(() => [updateData]);

the UI updates.


Solution

  • The problem is with this code in TreeView.svelte:

    export let tree
    const {label, children} = tree
    

    The second line is only executed once - when the component is created. This means that when the component receives a new tree value, label and children don't get updated.

    You can fix it by writing this instead:

    export let tree
    $: ({ label, children } = tree)