update

Author: trueadm

.changeset/gorgeous-jokes-sit.md

@@ -2,4 +2,4 @@
 'svelte': patch
 ---
 
-breaking: array proxy toPrimitive is no longer reactive
+breaking: array proxy coercion is no longer reactive in template

packages/svelte/src/internal/client/constants.js

@@ -3,22 +3,23 @@ export const EFFECT = 1 << 2;
 export const RENDER_EFFECT = 1 << 3;
 export const BLOCK_EFFECT = 1 << 4;
 export const BRANCH_EFFECT = 1 << 5;
-export const ROOT_EFFECT = 1 << 6;
-export const UNOWNED = 1 << 7;
-export const DISCONNECTED = 1 << 8;
-export const CLEAN = 1 << 9;
-export const DIRTY = 1 << 10;
-export const MAYBE_DIRTY = 1 << 11;
-export const INERT = 1 << 12;
-export const DESTROYED = 1 << 13;
-export const EFFECT_RAN = 1 << 14;
+export const TEMPLATE_EFFECT = 1 << 6;
+export const ROOT_EFFECT = 1 << 7;
+export const UNOWNED = 1 << 8;
+export const DISCONNECTED = 1 << 9;
+export const CLEAN = 1 << 10;
+export const DIRTY = 1 << 11;
+export const MAYBE_DIRTY = 1 << 12;
+export const INERT = 1 << 13;
+export const DESTROYED = 1 << 14;
+export const EFFECT_RAN = 1 << 15;
 /** 'Transparent' effects do not create a transition boundary */
-export const EFFECT_TRANSPARENT = 1 << 15;
+export const EFFECT_TRANSPARENT = 1 << 16;
 /** Svelte 4 legacy mode props need to be handled with deriveds and be recognized elsewhere, hence the dedicated flag */
-export const LEGACY_DERIVED_PROP = 1 << 16;
-export const INSPECT_EFFECT = 1 << 17;
-export const HEAD_EFFECT = 1 << 18;
-export const EFFECT_HAS_DERIVED = 1 << 19;
+export const LEGACY_DERIVED_PROP = 1 << 17;
+export const INSPECT_EFFECT = 1 << 18;
+export const HEAD_EFFECT = 1 << 19;
+export const EFFECT_HAS_DERIVED = 1 << 20;
 
 export const STATE_SYMBOL = Symbol('$state');
 export const STATE_SYMBOL_METADATA = Symbol('$state metadata');

packages/svelte/src/internal/client/proxy.js

@@ -10,7 +10,7 @@ import {
 } from '../shared/utils.js';
 import { check_ownership, widen_ownership } from './dev/ownership.js';
 import { source, set } from './reactivity/sources.js';
-import { STATE_SYMBOL, STATE_SYMBOL_METADATA } from './constants.js';
+import { STATE_SYMBOL, STATE_SYMBOL_METADATA, TEMPLATE_EFFECT } from './constants.js';
 import { UNINITIALIZED } from '../../constants.js';
 import * as e from './errors.js';
 
@@ -115,9 +115,14 @@ export function proxy(value, parent = null, prev) {
 			if (DEV && prop === STATE_SYMBOL_METADATA) {
 				return metadata;
 			}
-			// We untrack Symbol.toPrimitive cases. If people want explicit reactivity, they should
-			// use toString() or some other coercion method instead
-			if (is_proxied_array && prop === Symbol.toPrimitive) {
+			// We untrack Symbol.toPrimitive when used within a template effect. If people want explicit reactivity,
+			// they should use toString() or some other coercion method instead
+			if (
+				is_proxied_array &&
+				prop === Symbol.toPrimitive &&
+				active_effect !== null &&
+				(active_effect.f & TEMPLATE_EFFECT) !== 0
+			) {
 				return (/** @type {'string' | 'number' | 'default'} */ hint) =>
 					untrack(() => (hint === 'number' ? Number(target) : String(target)));
 			}

packages/svelte/src/internal/client/reactivity/effects.js

@@ -35,7 +35,8 @@ import {
 	INSPECT_EFFECT,
 	HEAD_EFFECT,
 	MAYBE_DIRTY,
-	EFFECT_HAS_DERIVED
+	EFFECT_HAS_DERIVED,
+	TEMPLATE_EFFECT
 } from '../constants.js';
 import { set } from './sources.js';
 import * as e from '../errors.js';
@@ -324,7 +325,7 @@ export function template_effect(fn) {
 			value: '{expression}'
 		});
 	}
-	return render_effect(fn);
+	return create_effect(RENDER_EFFECT | TEMPLATE_EFFECT, fn, true);
 }
 
 /**