sveltejs / svelte

Cybernetically enhanced web apps
https://svelte.dev
MIT License
78.53k stars 4.12k forks source link

SSR components not correctly updating bindings #4848

Open WHenderson opened 4 years ago

WHenderson commented 4 years ago

Describe the bug 1) When using bind:property within an SSR component, the parent component is not notified of reactive assignments. 2) The change notification also seems to be incorrect for simple property assignments. Notably, bindings are only updated where no initial value was supplied, even if the child component overrides it with a simple assignment.

Logs N/A

To Reproduce See the following repl for a contrived reproduction. (Note that since the REPL isn't running SSR, reading the code will have to suffice). https://svelte.dev/repl/07b8db939cce4fe8a032b221a9113707?version=3.22.2

1) See the below snippet from the Outer.svelte SSR code:

    do {
        $$settled = true;
        prop = innerProp;
                // Note that no call is made to $$bindings.prop(prop), and thus the parent is unaware of the updated value

        $$rendered = `${validate_component(Inner, "Inner").$$render(

2) See the below snippet from the Inner.svelte SSR code:

    let { prop } = $$props;

    prop = "from component";

    // Note that if the parent supplied a value in $$props, the binding will not be updated with the new value above
    if ($$props.prop === void 0 && $$bindings.prop && prop !== void 0) $$bindings.prop(prop);

Expected behavior Bindings should work correctly with SSR components. Specifically, changes to properties in a child component should update bindings in parent components.

Severity This issue is blocking our ability to use SSR as a solution, which is one of the big benefits of svelte/sapper.

aredridel commented 2 years ago

I think I'm being bitten by this too, with the result that one of my components renders an infinite loop during SSR

aredridel commented 2 years ago

I have three components, a root component and two child components, all binding the same variable. In the child components, that property is optional (has a default value of false)

aredridel commented 2 years ago

Notably, they're being bound to the value of a writable store in my case.

Tal500 commented 2 years ago

I want to say that this feature is important not only for props binding, but also for context communication between a parent to a child component.

For example, see @Rich-Harris answer in Stackoverlow, explaining how you can implement a tab list using the context API. The user should have code like this (a REPL refed in Stackoverflow's answer). Assume you want for example to display the number of tabs in the parent for example, you can't do this on SSR, unless you'd allow reactivity as demanded here.

I'd like to here what Svelte's main developers thinks about this issue.