fix: create assignable_proxy utils to prevent declaring an external const

Author: paoloricciuti

packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js

@@ -125,24 +125,11 @@ export function ClassBody(node, context) {
 
 					let proxied = should_proxy(init, context.state.scope);
 
-					if (field.kind === 'state' && proxied && options != null) {
-						let generated = 'state_options';
-						let i = 0;
-						while (private_ids.includes(generated)) {
-							generated = `state_options_${i++}`;
-						}
-						private_ids.push(generated);
-						body.push(b.prop_def(b.private_id(generated), options));
-						options = b.member(b.this, `#${generated}`);
-					}
-
 					value =
 						field.kind === 'state'
-							? b.call(
-									'$.state',
-									should_proxy(init, context.state.scope) ? b.call('$.proxy', init, options) : init,
-									options
-								)
+							? should_proxy(init, context.state.scope)
+								? b.call('$.assignable_proxy', init, options)
+								: b.call('$.state', init, options)
 							: field.kind === 'raw_state'
 								? b.call('$.state', init)
 								: field.kind === 'derived_by'

packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js

@@ -127,15 +127,12 @@ export function VariableDeclaration(node, context) {
 						context.state.scope.get(id.name)
 					);
 					const proxied = rune === '$state' && should_proxy(value, context.state.scope);
-					if (proxied) {
-						if (options != null) {
-							const generated = context.state.scope.generate('state_options');
-							declarations.push(b.declarator(generated, options));
-							options = b.id(generated);
-						}
+					const is_state = is_state_source(binding, context.state.analysis);
+					if (proxied && is_state) {
+						value = b.call('$.assignable_proxy', value, options);
+					} else if (proxied) {
 						value = b.call('$.proxy', value, options);
-					}
-					if (is_state_source(binding, context.state.analysis)) {
+					} else if (is_state) {
 						value = b.call('$.state', value, options);
 					}
 					return value;

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

@@ -152,7 +152,7 @@ export {
 } from './runtime.js';
 export { validate_binding, validate_each_keys } from './validate.js';
 export { raf } from './timing.js';
-export { proxy } from './proxy.js';
+export { proxy, assignable_proxy } from './proxy.js';
 export { create_custom_element } from './dom/elements/custom-element.js';
 export {
 	child,

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

@@ -9,7 +9,7 @@ import {
 	object_prototype
 } from '../shared/utils.js';
 import { check_ownership, widen_ownership } from './dev/ownership.js';
-import { source, set } from './reactivity/sources.js';
+import { source, set, state } from './reactivity/sources.js';
 import { STATE_SYMBOL, STATE_SYMBOL_METADATA } from './constants.js';
 import { UNINITIALIZED } from '../../constants.js';
 import * as e from './errors.js';
@@ -318,6 +318,17 @@ export function proxy(value, options, parent = null, prev) {
 	});
 }
 
+/**
+ * @template T
+ * @param {T} value
+ * @param {ValueOptions} [options]
+ * @returns {Source<T>}
+ */
+
+export function assignable_proxy(value, options) {
+	return state(proxy(value, options), options);
+}
+
 /**
  * @param {Source<number>} signal
  * @param {1 | -1} [d]