chore: simplify legacy props (#12353)

* chore: simplify legacy props

* add test

Author: Rich-Harris

packages/svelte/src/legacy/legacy-client.js

@@ -71,50 +71,37 @@ class Svelte4Component {
 	 */
 	constructor(options) {
 		var sources = new Map();
-		var add_source = (/** @type {string | symbol} */ key) => {
-			var s = mutable_source(0);
+
+		/**
+		 * @param {string | symbol} key
+		 * @param {unknown} value
+		 */
+		var add_source = (key, value) => {
+			var s = mutable_source(value);
 			sources.set(key, s);
 			return s;
 		};
+
 		// Replicate coarse-grained props through a proxy that has a version source for
 		// each property, which is increment on updates to the property itself. Do not
 		// use our $state proxy because that one has fine-grained reactivity.
 		const props = new Proxy(
 			{ ...(options.props || {}), $$events: {} },
 			{
-				get(target, prop, receiver) {
-					var value = Reflect.get(target, prop, receiver);
-					var s = sources.get(prop);
-					if (s === undefined) {
-						s = add_source(prop);
-					}
-					get(s);
-					return value;
+				get(target, prop) {
+					return get(sources.get(prop) ?? add_source(prop, Reflect.get(target, prop)));
 				},
 				has(target, prop) {
-					var value = Reflect.has(target, prop);
-					var s = sources.get(prop);
-					if (s !== undefined) {
-						get(s);
-					}
-					return value;
+					get(sources.get(prop) ?? add_source(prop, Reflect.get(target, prop)));
+					return Reflect.has(target, prop);
 				},
 				set(target, prop, value) {
-					var s = sources.get(prop);
-					// @ts-ignore
-					var prev_value = target[prop];
-					if (s === undefined) {
-						s = add_source(prop);
-					} else if (safe_not_equal(prev_value, value)) {
-						// Increment version
-						set(s, s.v + 1);
-					}
-					// @ts-ignore
-					target[prop] = value;
-					return true;
+					set(sources.get(prop) ?? add_source(prop, value), value);
+					return Reflect.set(target, prop, value);
 				}
 			}
 		);
+
 		this.#instance = (options.hydrate ? hydrate : mount)(options.component, {
 			target: options.target,
 			props,
@@ -142,6 +129,7 @@ class Svelte4Component {
 		this.#instance.$set = /** @param {Record<string, any>} next */ (next) => {
 			Object.assign(props, next);
 		};
+
 		this.#instance.$destroy = () => {
 			unmount(this.#instance);
 		};

packages/svelte/tests/runtime-legacy/samples/component-props-added/_config.js

@@ -0,0 +1,15 @@
+import { test } from '../../test';
+
+export default test({
+	get props() {
+		return {};
+	},
+
+	html: '',
+
+	async test({ assert, component, target }) {
+		await component.$set({ message: 'goodbye' });
+
+		assert.htmlEqual(target.innerHTML, '<p>goodbye</p>');
+	}
+});

packages/svelte/tests/runtime-legacy/samples/component-props-added/main.svelte

@@ -0,0 +1,3 @@
+{#if 'message' in $$props}
+	<p>{$$props.message}</p>
+{/if}