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.

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

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

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.

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.

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

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

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)} />

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)} />

How is it failing?

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)} />

How is it failing?

My change sees value as a local identifier and makes the call expression dynamic. The purity test is a snapshot test on the output so now it's changed.

My change sees value as a local identifier and makes the call expression dynamic.

So it seems we should just add a check to see if the identifier is also dynamic? Because if value was changed in this case we want to re-run it right?

My change sees value as a local identifier and makes the call expression dynamic.

So it seems we should just add a check to see if the identifier is also dynamic? Because if value was changed in this case we want to re-run it right?

We already have that, it's checked as part of state. However, that's not sufficient to fix the original issue:

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

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

obj here isn't marked as dynamic.

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

Honestly, I think I'm fine with that. If you care about the microscopic advantage that you get from not having a template effect there, just don't write it out in the template directly and instead put it in a const in the script tag. This feels like an edge case either way - why would you write static variables in the script tag but then write a computation using them into the template?