When passing an imported $state as Object.values() to an external component reactivity does not work

[mrh1997]

Describe the bug

When I import a $state({...}) and pass it via Object.values(...) as attribute to a sub-component reactivity does not work:

<script>
	import { obj } from "./Data.svelte.js";
       ...
</script>

...
<Component lst={Object.values(obj)}/>

The Problem does not occur when using Object.values(obj) locally or when creating a derived rune (let derivedObj = $derived(obj)) and pass this one to the sub-component.

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACq1SsU7DMBD9lZNhSKWooYiFkFZClJUiQCyEwU0dmjS1I_tSqCz_O-emNKFdGJiiuzy_9-7uWZYXlTAsfrNM8rVgMbutaxYy3Na-MBtRoaDaqEZnvpOYTBc1TlKZYrGulUa4U_SVQiLkWq0hZcPo0Bq2DCm76T2woOYluA4-5cj3yGFpWjDB80ZmWCgJWtQVz8SjVnUwAOv_pTiblyLDITem-JABMYZgeXwdwjweXYSQxaORG-xkXSqTqPMtk3mDSLRKZlWRrca2x-8IAU9tDa-8aoQBlZNLEkiZJ2oft0TLq4kWnExuCtz2cDCd3T_Dw-wFPpVexUlEQIJ3m6oMju1-gs1OxU8wcNERb37E6-nMD589I8wSTmmAG6DS-eGTRbGZtBuzh17UNm3kCRzdd60WpCUWLEbdCBce4nCw_NdQVMIfmOajA4_hvKadmsDf4dcJ9tY97P-89mLUuS1N36n42iXQm_QZJIMGOYqAkjPyybmkyJxKvLtvssT2IikDAAA=

Logs

No response

System Info

reproduced in Preview

Severity

annoyance

[dummdidumm]

On one hand this is similar to the expectation that objects with a custom toString method that is reactive should somehow be detected - we said we won't do this.

On the other hand, if we detect that the template calls a function that exists in scope, we create the correct code that makes the result reactive.

<script>
  import { obj } from './somewhere.svelte.js';
  import Component from './Component.svelte';

  function foo(o) { return o.length }
</script>

<!-- this will be reactive -->
<Component x={foo(obj)} />

Only in the case of not detecting the function we're making this a static property that is not updating.

I lean towards making any call-expression, even of things not in scope, reactive - but would like more input from other maintainers first.

[trueadm]

Yeah this is a bug, it's a call expression and should be treated as dynamic because of that.

[trueadm]

Okay well I thought it was a bug, as this used to work fine, but it was changed in this PR #12712

[dummdidumm]

Good find - I would be in favor of undoing part of that: If you pass a variable that is not a global to one of the global functions, bail out and generate a template effect instead. i.e. {location.href} and btoa('foo') are static, but btoa(foo) is not.

[trueadm]

Good find - I would be in favor of undoing part of that: If you pass a variable that is not a global to one of the global functions, bail out and generate a template effect instead. i.e. {location.href} and btoa('foo') are static, but btoa(foo) is not.

Yep, that sounds logical to me, or we could check to see if the call expression arguments contain an import? A bit like we have has_state, we could check has_import maybe.

[dummdidumm]

I'm not sure what other globals could theoretically do. If you have a global and it accesses a property of a value which happens to be reactive, do we want to rerun it? E.g.

let value = { a: state_in_here }
...
JSON.stringify(value); // does access value.a

[trueadm]

Yeah I guess it would have to be any local reference, so maybe has_identifier or has_local?

[trueadm]

So I tried this locally and have it working, unfortunately this test now fails:

<script>
	let min = 0;
	let max = 100;
	let number = 50;

	let value = 'hello';
</script>

<p>{Math.max(min, Math.min(max, number))}</p>
<p>{location.href}</p>

<Child prop={encodeURIComponent(value)} />