Deep composition breaks page reactivity

[bleucitron]

Describe the bug

Having the following route hierarchy and files breaks the reactivity ~~for $page~~.

/routes
  /main
    +layout.svelte
    +page.svelte
    /about
      +page.svelte

<!-- +layout.svelte -->
<A>
  <div>{$page.url.pathname}</div>
  <slot />
</A>

<!-- A.svelte -->
<script>
  import B from './B.svelte';
</script>

<B>
  <slot />
</B>

<!-- B.svelte -->
<slot />

It does not happen

• if you remove the main route layer and have the same structure
• if you comment out the <B>layer in A.svelte
• if you nest both A and B directly inside +layout.svelte

Reproduction

https://stackblitz.com/edit/stackblitz-starters-mevijc?file=src%2Froutes%2F%2Bpage.svelte

Logs

No response

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.1.0 
    @sveltejs/kit: ^1.20.2 => 1.20.2 
    svelte: ^3.59.1 => 3.59.1 
    vite: ^4.3.0 => 4.3.9

Severity

serious, but I can work around it

Additional Information

No response

[dimfeld]

Possibly related to https://github.com/sveltejs/svelte/issues/7913 ? Hard to tell though

[oscarhermoso]

Interesting that reactivity works if you comment out the slot in layout

[paoloricciuti]

As @ghostdevv pointed out in my issue, it was a duplicate so I'm copying over my exploration and findings here from my issue

It all started with a discord user asking a simple question https://discord.com/channels/457912077277855764/1119224594910412862/1119224594910412862

This user had a problem with stores so we helped him to create a derived store. But than we went back again with another problem...it didn't seemed to work as intended (https://discord.com/channels/457912077277855764/1119224594910412862/1119289050013118625)

Poking around that example i wasn't able to understand why it didn't worked and i kinda got nerdsniped. My first toguht was that it was a problem with konsta but it didn't seemed like they were doing anything fancy. Modifing the konsta components to make them as barebone as possible inside the node modules i went ahead and deleted everything leaving just the slots...the problem still occured.

So apparently if you have a situation like this where the slot for the layout is nested inside a component that has a slot inside another component with a slot $page stop being considered dirty (i also checked that this is the case with a step by step debugger in chrome).

Reproduction

1. Go to https://www.sveltelab.dev/hndxsmadcbwegdj
2. Navigate to /auth/login
3. Observe that the $path.url.pathname outside <SlotSlot /> is in sync with the one inside
4. Click the link to Forgot
5. Observe that the $path.url.pathname outside <SlotSlot /> is out of sync with the one inside

Additional Information

I also checked for navigating to see if that was a problem of all sveltekit stores and it didn't seem like that was the case

[dummdidumm]

This is likely a bug within Svelte itself

[paoloricciuti]

This is likely a bug within Svelte itself

I actually tried to reproduce with a store and some deep nested slots but I wasn't able to do it...moreover I tried with the navigating store and it worked...that's why I think the bug is within the page store itself but I might be wrong