`push` array is not proxied when array is optional

[gotenxds]

Describe the bug

Hi, I found an issue that might be expected behavior but it's odd as you can make it work by mutating unrelated state

When using the rune $state inside a class to expose a prop, myClass.prop it behaves as expected, it also behaves correctly when nesting it inside a sub property that is itself another class myClass.childClass.prop
But when that childClass is optional, that is myClass.childClass?.prop things get weird, primitives like string, boolean, numbers work fine, they are reactive all the way back to the ui, but when using an array method like push it is not reactive.

The odd thing about all of this is that if you have two or more $statess inside the class chain and modify any of them, the changes of the push do get propagated.

I created this simple repro in the svelte playground, it uses two classes,
TestClass and OptionalChild, the OptionalChild get initiated after one second using set Interval (but this works by any delayed initialization)

Inside we modify the array every second but it does not update in the UI, if you uncomment any of the lines that modify other props it will suddenly also update the array state in the UI

Reproduction

https://svelte.dev/playground/hello-world?version=5.38.6#H4sIAAAAAAAACn2STW_bMAyG_wohDLCNBU5yzUeHoaedeulOTQ-aQ89aZcmQmKRF4P8-Ss6HhaQ92IJIviRFPkdhZItiIbqdb4DQk5iIWmn0YvFyFPTRBWcwsP0U-rPrSr9HTcH2R3q8Z6-sITTEacTKV0519LAxG1JtZx3BEZ651KOW3kMPtbMtZOU0lD9lKP_5bBkEnMdTbAzWYPBwFeYF-zkifB7pF9dze6nzvID1Axyji1QNeUxrO1LWSP3YKL0tzu4N3TpL6VwZxpHPi-U57HxOp_DbVLZtDRJI8wG2BmrQI5CFVr4hKIKDdW8jwZ0Snhx8X0M2z65xMWxUe_D04egnMJ_NZmxaTS_DXG3Vng9gCc_zotZo_lIDfYgdIq6hT6cmBs1tXz9GGb5OEB5wNwE7EiWLwo-JIHwnsSC3w37yCVkpACldN74RYfgeqaoiT1ey4pLDU9fwzZMkzF9eh5UmTS8HjiJpbleRdfkFEAbrWbVod5RyxeA0yqePPwH6NLblZ4T6uE8eTVioSRpOBF80HWZ-MWZ8y4oAZp_O9pVvUumDMluxqKX22P8HmQvXjuUDAAA=

Logs

System Info

using firefox/chrome in svelte playground

Severity

annoyance

[mjadobson]

The optionalChild property of TestClass should be a $state(), otherwise assigning to it in the constructor won't be picked up by the reactivity system.

https://svelte.dev/playground/hello-world?version=5.38.6#H4sIAAAAAAAAE3WRTW_CMAyG_4oVTaKVqgLX8jFNnHbiwo1yyIq7ZkrTKnaBqcp_nxI-O7ZDEsmv_dp-0gsjaxSZaDuqgJFYJKJUGklk217wd-tFHxDJNfWtbVM6oGYf-5CEf8WLxjAaJpGJORVWtbzMTc6qbhvL0MMGiVdaEoGD0jY1jNKxb39xSL9oNPMFRWOIw2CwAIPHe2EUe90fQn43jPYgdRTFsFhCHyRWJUTBtGlZNUbqVaX0Pr7KOT-LqbQ29TCiaTw7pzn_uASmk8kkzs18fN_HzPfqsMwNrC8eIK2F_tn2NfhqNJ9cOe9xrssN-EskgvHEImPboUv-4T7EM2T_pD3wx1NgXgTad-4BwmBIWMALsWSMwupX-rYruLHRDRshb1SNTcdD2jlzpSj9bek_bf0Yi25gww-63HjCZjDmoODcwJO9DbjdeRM3BLdLBEulj8rsRVZKTeh-ANPeVfrgAgAA

[7nik]

Yes, the expression test.optionalChild doesn't contain anything reactive, and thus it doesn't rerun when optionalChild changes.
As was pointed out, optionalChild must be stateful.

Doing test.arr.push(1) makes it work because all those text expressions in the markup are updated together (you can check it out in the generated code).

[gotenxds]

Hi @7nik and @mjadobson Thanks for the explnation, I understand what you are saying but it does not (at least to me) explain why this DOES work if I change the value it self, for example changing the str inside the optionalChild does update even tho the optioanlChild is not a state, similarly if I change the arr and use arr = [...arr, newValue] instead of push it does work.

So it seems like values do update even tho you are saying it is not intended but just method calls that modify the internal value like push are not.

At the very least this is a confusing behavior even if intended and I did not see it explained in the docs, tho I might have missed it.

[7nik]

test.optionalChild?.arr is reactive, though arr should be read for this, but it cannot be because optionalChild is undefined at the beginning. But, as I said above, an "unrelated" template update (e.g. of test.arr.length) can cause re-rendering test.optionalChild?.arr and after that it is fully reactive.
Batched text updates is an implementation detail and can be changed on any day, so it cannot be documented.

[gotenxds]

@7nik I think you misunderstood me, I'm not talking about the batch update or the intermidiate values inside test like test.arr

I'm saying that it is uninutative that doing the optionalChild array property does update when you change it's value, that is

test.optionalChild.arr = [...test.optionalChild.arr, 1]
but dot not update when you call the push
test.optionalChild.arr.push(1)

These two statements differ in that a new array is created so the value it self changes but the svelte docs state that using push or any other state changing methods will be peroxided which is not true in this specific instance.

again, this entire example works fine when you dont use methods, I can also just create the same example with a primitive value in the optionalChild and it will work

You said Yes, the expression test.optionalChild doesn't contain anything reactive, and thus it doesn't rerun when optionalChild changes. As was pointed out, optionalChild must be stateful.

Well, ya, only if you use an array, if I use an number or string they will be reactive in the ui

[7nik]

That's because the component is not in runes mode but in semi-legacy (script in legacy and template in runes mode), where assignments mark the variable as reactive, because the component doesn't have exclusive features of either Svelte 3/4 (export let myvar, $:) or Svelte 5 (runes).

[gotenxds]

Wow, I did not expect this, thanks again for taking the time to explain this to me. I think I understand it better now.
I must say though that this is some really odd behavior, I think you would agree with me that uncommenting line 7 in this example that does absolutly nothing should not (from the user point of view) break an existing behavior

Example

Also, I'm currently using Svlete 5 in a brand new project, why are runes not "on by default" then to avoid these kind of things?

[7nik]

We cannot autodetect whether you want S3 or S5 behavior, plus a Svelte library can still be S3.
You can force mode via config.