A rare bind value bug sets the value to null when it is not bind in parent

zommerberg commented 4 months ago

Describe the bug

I found a rare bug with multiple conditions that sets a variable that always exists to null when the parent of the children doesn't specify a bind: on that variable when passed to a child.

Look at the repo (and the console), it has a list of nested children and depended variables that cause this to happen, if one of the conditions is missing the value does not get set to null even if the bind: is missing.

Reproduction

https://stackblitz.com/~/github.com/zommerberg/sveltekit-bind-bug

https://github.com/zommerberg/sveltekit-bind-bug

I've reproduced it as closely as possible to my real project.

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 5700G with Radeon Graphics
    Memory: 17.99 GB / 29.85 GB
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.2.0 
    @sveltejs/kit: ^2.0.0 => 2.5.7 
    @sveltejs/vite-plugin-svelte: ^3.0.0 => 3.1.0 
    svelte: ^4.2.7 => 4.2.15 
    vite: ^5.0.3 => 5.2.11

Severity

serious, but I can work around it

Additional Information

No response

eltigerchino commented 4 months ago

The value of myObjectItem in <ComponentBody> is currently set to the prop fallback value of <ComponentChild> because of the binding. Hence, the value passed from the page to <ComponentBody> is overwritten by that binding.

zommerberg commented 4 months ago

@eltigerchino The fallback should not be used at all since the object is defined at all time. Its weird that it uses a fallback and sets it to null.

Also I've tried removing the LayoutManager and replacing it with and if statement and suddenly it worked as expected without setting the bind property to null.

In the following repo I've removed the layout manager and repalced it with an if statement:

REPO: https://github.com/zommerberg/sveltekit-bind-bug-without-layout BLITZ: https://stackblitz.com/~/github.com/zommerberg/sveltekit-bind-bug-without-layout

Here the funciton does not get executed (as it should) and it behaves without the bug but the bind: is still not present yet svelte handles it correctly.

rChaoz commented 4 months ago

Simplified REPL.

Also, bug is not present when using Svelte 5.

sveltejs / svelte