Svelte: Slot is not updated properly

Created on 25 Dec 2019  路  3Comments  路  Source: sveltejs/svelte

Describe the bug
create_default_slot is generated with newer assigned current variable.

To Reproduce
REPL:
https://svelte.dev/repl/c64a0a69c59544bda4a8a6dba3d0d13f?version=3.16.6

Select at least 2 times, span updates, img not.

        <span>img id:{ item.id }</span>
        <img src={ item.url } alt={ item.id }>

Investigation


Investigation

If current is undefined, img_src_value = and img_alt_value = are not assigned

// (2:0) <Nested items={ items.filter(item => item.author === value) } let:item>
function create_default_slot(ctx) {
...
    let current;

...
        p(ctx, dirty) {
            if ((!current || dirty & /*item*/ 128) && t2_value !== (t2_value = /*item*/ ctx[7].id + "")) set_data(t2, t2_value);

            if (!current || dirty & /*item*/ 128 && img.src !== (img_src_value = /*item*/ ctx[7].url)) {
                attr(img, "src", img_src_value);
            }

            if (!current || dirty & /*item*/ 128 && img_alt_value !== (img_alt_value = /*item*/ ctx[7].id)) {
                attr(img, "alt", img_alt_value);
            }
...
}

current condition generated in AttributeWrapper depends on block.has_outros
https://github.com/sveltejs/svelte/blob/cd21acfb3cae574b81f2f417331993374222a9de/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts#L150

current assignment depends on intro.length and outro.length
https://github.com/sveltejs/svelte/blob/a8b306f0a18775b31b57333d938090eb3934eb29/src/compiler/compile/render_dom/Block.ts#L236

Here block.has_outros is true, but intro.length and outro.length is zero.


<Title> is crucial, it creates an instance of InlineComponentWrapper that calls block.add_outro()
https://github.com/sveltejs/svelte/blob/2cd5c2934b03c9ac3e5e984b3f1ccd3ffd657ef9/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts#L106
where has_outros became true for parent node, this has_outros generate current condition and varibale but not assignment
https://github.com/sveltejs/svelte/blob/a8b306f0a18775b31b57333d938090eb3934eb29/src/compiler/compile/render_dom/Block.ts#L196

Thanks!

transitions bug

All 3 comments

If you use a keyed each block, it _seems_ to work:

{#each items as item (item.id)}

More info here: https://svelte.dev/tutorial/keyed-each-blocks

But that _does_ seem weird that it wouldn't just work otherwise. I'm running into a similar issue that I'm trying to boil down to simple REPL, but haven't been able to yet.

Fwiw, I also just noticed it seems to work if you get rid of the "title" slot. And similarly, works if you give the default slot a name.

Also works if you move the slot content to be the default slot content and then don't pass the component slot content.

Definitely some weirdness going on...

Something wrong with the has_outro logic in the compiler.

Was this page helpful?
0 / 5 - 0 ratings