UI not re-rendering when rune is updated

[peterreeves]

Describe the bug

So I'm not 100% sure if this is a bug with runes, but it sure feels like one.

In the example below I have a $state rune in a Svelte component, and a $state rune in a JS file. Both are arrays, and I'm pushing values into the array and doing the old list = list trick to trigger an update. This works in the component, but not in the one imported from the JS file. The problem goes away if I uses a spread operator (list = [...list]), but I'd rather reuse the same array to reduce GC pressure (And I also have a considerable amount of code that mutates arrays rather than reallocating. It would be a pain to change it all).

Additionally, is my other export from the JS file 'idiomatic' for global state using runes? Is there a more rune-idiomatic way of writing what I have?

Reproduction

Edit: updated other.js -> other.svelte.js

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACp2SsW7bMBCGX-XAFrAMGNLuyCqCdMmQMehgeVCks8WY4gkkFTcQNOYNOhbo0ifrE-QRehQVx0DcBsgiisf_7n4ev15spUIrlute6KJBsRSXbSsWwj22fmMfUDnkvaXOlD6S2tLI1mW5zp1sWjIOeiBXo4EBtoYayEWcjIE4ZMf3NhcXrOcMhQ6UtA5W8Nm6wmG0zkUtc7GZT4qSNB-3na1ZE81hlUHv45zLebE_iELKmDHFWeuXKeJrkMJY0S7y4aAc-Jsmr_Z1etc5RxpIL0sly_2q99WH7LKqYFbLGTiCkviOGvVkO7ryQrjBeZqEbK6U2rbQ2Tcyewt_fj5xD7_nOKlxTP0nLMo6FCgsr0OwmSqZ9bxLE_7hgJcmXjp4oyH5jMkw21OrqBSNbsM7vOf0K6HVMwcHdvzl-dfvH_9yHDp9xDcT01AltxIrsXSmw2FxBOyUjVfS7u0pZec58fc8ooLfR_gCL-Hiq4DK7iWZ8enBoOuMDnjAsPCCEaL5Wa5CiwAMwFu0kgRuNUPRMBJS74D7wh0qOrBII3RtxWbtGL69XgBPHq550J2qWLBH_0gV8bG0cJCuJj4vFemXUoUxxeOx09R-HcfjI2z-S3euPeBvB78Z_gJmEFQX5QMAAA==

Logs

No response

System Info

N/A

Severity

blocking an upgrade

[peterreeves]

A kind user on the Svelte discord did some quick analysis of the compiler output:
https://discord.com/channels/457912077277855764/1153350350158450758/1160801864414150676

[RubenPX]

@peterreeves

Try this: https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACq1UzY7TMBB-lZFBaipFidRjSYNWcOmB4y6Hpods4jbeunZkOy2rKEfegCMSF56MJ-ARGP-0W2i7iJ-T7fn9ZuYb92TFONVkuuiJKLeUTMlN25KYmMfWPvSOckPxrWWnKivJdKVYa_JCFIZtW6kM9CBNQ1Xsj7sJDLBScgsFSVInSh50QV6hB_pwaoAzbWAGL7UpDY0WBWlYQZbjYFFJgeq20w3aRGOY5dBbOfqiX2IVkXdxHkGOtvYIEhtDcppwuY6s2FsOJxh2E_QIgCOrztKnykR23xkjBUgxrTirNrPeph3ym7qGUcNGYCRUEssXVIR6ojfWEN7RcZZ6b4yU6bYU-XupNhq-ff6IOewb5ZK7DvYvaFk1PkCp8Rw8_oyzvMdXluIFBdY0taaDBeqdL4D03T6FSjmXDq1T_RbpW0m1GBnYI-LX3798_XQNsc_0v3DvJv8Cem5cg69BxeB_gxNJv5U1WzFak6lRHR3i4444XE9b8qBPN-Qyw21NR5LTD25xPNN9kTNP8vXBGYnfg6KmU8ITG4bYGjj6jy9uhE_hqQ5wvhRpCrcCWbtFzjKxBswL95TLPRoJCl1bI1jtxLfzGLDLMEcmdLxGgw21A6klqpmGPTONRH3FpTiEKpUqH4-ZQvpFkrjuL5_dy0KE1bzQmbvJz9_A8-39oy8kNOzsE7mCNUD1dAmjCWEPY_t1amFofmyHUs-ZtRx-AEAj-2WJBQAA

[peterreeves]

That's neat, and I'm surprised that works? (makes it definitely feel like current behaviour is a bug). But I need shared exported app-wide state so that doesn't work for me.

[RubenPX]

Seems to be a bug? maybe in future will be fixed

[7nik]

It was slightly mentioned in another issue that runes are bound to component lifecycle. So the problem isn't that the list is global but rather that list is created before the component. If you switch to singleton, it starts to work https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAA51Ty27bMBD8lQVbwBJgSHdHlhG015xziHJQZNqiQ3MFcpUHBB3zBz0W6KVf1i_oJ3RJSnHSJCjQE7XDmeUsORrETmnpxOpqEKY-SrES510nloIeO1-4O6lJcu2wt41HCtdY1VFZmYrUsUNLMABSKy2MsLN4hEpkeQCyg6vEGROZqiWBVo5gDZ8d1SSTq0q0qhLX6cRo0PB217uWOUkK6xIGj7OWdZnfSKIkKCacuX6ZEN8Dtcw07hMPR-b46gS8ObAoGEz8fpGfJjLFTU-EBtCsGq2a2_Xgzx3L8-0WFq1aACE0yGMbaaaBki-eCBcyLfKo5k6F62pTXqK9dfDr-xOf4WvGUYebGz7Jumljg9rxOsYBCq3Kgasi5w8GPDX31NEbjeJ3TPJM2UujUmsMXuPD_MvnV5TOLAju2e_m94-f3z7y68_5H88coCNu1U7JrViR7eW4fM5bsHhK3MG9TFt8sl3dENrH17l4P1F-8jlUZCX11swx2s8CbjLAtBfCA-MyUkLI0lnwV_Ji6zl8AG_j91EAOYJzDmMWvXenzJ5XNIzIh_AjTQENbzbP-kyDzQaSU7WebyVJ07O393s9_gEOrYRR2wMAAA==

Something should be done about this, otherwise this small nuance will drive people crazy.

[RubenPX]

That's awesome i will take this as note for future to manage global states

@7nik i don't think this is a problem. It makes people investigate some coding patterns... I imagine more later it will exist a video, issue or forum that mentionate it, Svelte has extensive docs and a lovely community

[Thiagolino8]

So the problem isn't that the list is global but rather that list is created before the component

If that were the problem, wouldn't this example also break?

[7nik]

let's investigate deeper: as was mentioned on discord, runes use different methods of comparing the new and old values, which are set once at their creation:

    const context = current_component_context;
    if (context && !context.immutable) {
      return safe_equal;
    }
    return default_equals;

Where safe_equal uses Svelte3/4 value change logic (objects always get marked as mutated) and default_equals is just ===. Global variables are initialized before components, so current_component_context is null and thus default_equals is used.

Numbers are primitive, and their change gets detected correctly by both methods. But mutation of object/array isn't detected at all. Instead, there is still gets added a trigger on assignment, and if safe_equal is used, the object always gets marked as mutated.

So, the issue narrows down to the reactivity of mutation on a global object created not during a component initialization. (and probably some other lifecycle events).

[peterreeves]

So I definitely understand that default_equals is probably the right default for most use cases. I'm wondering if it would be possible to have a markMutated function (or equivalent) that could be used to mark a specific object as having been changed? I'd happily write code where I mark out all the places I'm mutating state. I do it all the time anyway with obj = obj; in component bodies, and myStore.update((s) => s); for global stores.

[intrnl]

ideally $state should allow passing an equality function, or at least false or true to indicate opting-in and out of the strict equality comparison (with undefined as a way to opt-in to whatever the component is currently set up as)

[stalkerg]

@7nik maybe we should back to the idea with equalentors? heh #1657 (comment)

[7nik]

But the issue is with the value mutation: a comparator (equalentor) will receive in a and b the same object instance.

The logic of choosing between safe_equal and default_equals should be improved (maybe analyze the used types, though it can be a too complicated approach) or provide the user with the ability to select the comparator.

[intrnl]

given that the actual function used to create these runes accepts an equality function as the second argument I would've expected $state to allow it, but I suppose they're not certain on the API just yet.

[Thiagolino8]

A new comparison method is definitely needed
Recreating objects and arrays to achieve reactivity can be quite unpleasant
But having to do this with sets and maps completely defeats the point of using these objects
And having to manually add an equalization function every time you need to use one of these objects is also not ideal

[ryoppippi]

@Thiagolino8
I fixed your example for svelte@next here
However it does not work
If it is not a Map but an array, it works fine

[Thiagolino8]

@ryoppippi

If it is not a Map but an array, it works fine

It doesn't work

[ryoppippi]

@Thiagolino8
Sorry array does not work either haha
I said a wrong things

[ryoppippi]

@Thiagolino8
When we use class, it works (looks like singleton by @7nik )
https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE5VTsW7bMBD9lYNaQFJhSMlqyyqCdskQdCiCDlEGRTpbjClSICm7gaBs_YOOBbr0y_IF_YQeScVxYRdBB4Hi3Xt378jHIVgxjjqY3wyBKFsM5sFF1wWzwDx0dqO3yA3SXsteVTaS6UqxzuSFKAxrO6kMDPDJNKhghJWSLRRBkkobSDw7uddFsCA8MTga4EwbWMJbbUqD0c35bTwlKyko0_W6oXQUwzKHwcaJRpTEJqLHx-iqNE2iSlHLlkDv4PzsLI4tDp5L22Xhmbam5JhwuY5s2PUy418dnViiCdz5SSIql6Uvg4rsrjdGCpCi4qzaLAerZcwv6hrChoVgJFSSDkOgmOaLPlggXGGcpZ5MhTLdlSL_ItVGw9OPb9TC7ikuuTvP4Q2WVeMLlJrW0Q-RcZYPtMtS-qGAhaYWOlqdnnys0d_BoVLkXDqxfuLXhH6UqEVoYEeC3__--ev7vwT7Tpz9r2jyVStrtmJYB3OjehxnexseOujFj_f60Iv41fmv4qXWkwedYU47zElYOwNadw2g0PRKgGmYThzFKdcTYnsSsoSth9nvlFUPDRdaANZh7FP7Kq9b-QBMDfb_k6nTFK4FGa4luzGxpjzCHXK5I-ECoe9qmlu78PXlDOha4ZJusec1ATZoHVBLVxV2zDSyt2coxXOpUqnyYd9p0mAfx2c0_hEdj7qXOD2wQoyL4-u9Hf8AR-i9ZnEEAAA=

[Thiagolino8]

@ryoppippi

When we use class, it works (looks like singleton by @7nik )

Not really, his version is a singleton because it always returns the same instance, your version always creates a new instance
And even his solution is not very practical

[ryoppippi]

@Thiagolino8

Not really, his version is a singleton because it always returns the same instance, your version always creates a new instance
And even his solution is not very practical

Oh yeah so we cannot share the instances btw components when we just import the other.svelte.js scripts
So we need to pass the class instance by Components' props for now.

like this

[peterreeves]

This is fixed now as a result of #9739 being merged! 🎉