return instance _and_ props in runes mode, move flushSync into shared code, don't set accessors in runes mode

Author: dummdidumm

packages/svelte/tests/runtime-legacy/shared.ts

@@ -131,7 +131,7 @@ async function common_setup(cwd: string, runes: boolean | undefined, config: Run
 		generate: 'client',
 		...config.compileOptions,
 		immutable: config.immutable,
-		accessors: 'accessors' in config ? config.accessors : true,
+		accessors: 'accessors' in config ? config.accessors : runes ? undefined : true,
 		runes
 	};
 
@@ -284,20 +284,35 @@ async function run_test_variant(
 			};
 
 			let instance: any;
-			let props: any;
+			let component: any;
 
 			if (runes) {
-				props = proxy({ ...(config.props || {}) });
-
+				const props: any = proxy({ ...(config.props || {}) });
 				const render = variant === 'hydrate' ? hydrate : mount;
+
 				instance = render(mod.default, {
 					target,
 					props,
 					intro: config.intro,
 					recover: config.recover ?? false
 				});
+
+				component = new Proxy(instance, {
+					get(target, key) {
+						if (key in target) return target[key];
+						return props[key];
+					},
+					set(target, key, value) {
+						if (key in target) {
+							target[key] = value;
+						} else {
+							flushSync(() => (props[key] = value));
+						}
+						return true;
+					}
+				});
 			} else {
-				instance = createClassComponent({
+				instance = component = createClassComponent({
 					component: mod.default,
 					props: config.props,
 					target,
@@ -336,7 +351,7 @@ async function run_test_variant(
 							htmlEqualWithOptions: assert_html_equal_with_options
 						},
 						variant,
-						component: runes ? props : instance,
+						component,
 						mod,
 						target,
 						snapshot,

packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-2/_config.js

@@ -1,4 +1,3 @@
-import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
@@ -28,7 +27,7 @@ export default test({
 
 		logs.length = 0;
 
-		flushSync(() => (component.n += 1));
+		component.n += 1;
 
 		assert.deepEqual(logs, [
 			'parent: $effect.pre 1',

packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-3/_config.js

@@ -1,4 +1,3 @@
-import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
@@ -23,7 +22,7 @@ export default test({
 
 		logs.length = 0;
 
-		flushSync(() => (component.n += 1));
+		component.n += 1;
 
 		assert.deepEqual(logs, [
 			'parent: render 1',

packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-4/_config.js

@@ -1,4 +1,3 @@
-import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
@@ -27,8 +26,7 @@ export default test({
 		]);
 
 		logs.length = 0;
-
-		flushSync(() => (component.n += 1));
+		component.n += 1;
 
 		assert.deepEqual(logs, [
 			'parent: $effect.pre 1',

packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-5/_config.js

@@ -1,4 +1,3 @@
-import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
@@ -10,7 +9,7 @@ export default test({
 		assert.deepEqual(logs, ['$effect.pre 0', 'another $effect.pre 1', 'render n0', 'render i1']);
 
 		logs.length = 0;
-		flushSync(() => (component.n += 1));
+		component.n += 1;
 
 		assert.deepEqual(logs, ['$effect.pre 1', 'another $effect.pre 2', 'render n1', 'render i2']);
 	}

packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children/_config.js

@@ -1,4 +1,3 @@
-import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
@@ -23,8 +22,7 @@ export default test({
 		]);
 
 		logs.length = 0;
-
-		flushSync(() => (component.n += 1));
+		component.n += 1;
 
 		assert.deepEqual(logs, [
 			'parent: $effect.pre 1',

packages/svelte/tests/runtime-runes/samples/props-default-value-lazy-accessors/_config.js

@@ -1,4 +1,3 @@
-import { flushSync } from '../../../../src/index-client.js';
 import { test } from '../../test';
 
 // Tests that default values only fire lazily when the prop is undefined, and every time
@@ -13,24 +12,20 @@ export default test({
 	html: `<p>props: 0 0 0 0 1 1 1 1</p><p>log: nested.fallback_value,fallback_fn`,
 
 	async test({ assert, target, component }) {
-		flushSync(() => {
-			component.p0 = undefined;
-			component.p1 = undefined;
-			component.p2 = undefined;
-			component.p3 = undefined;
-		});
+		component.p0 = undefined;
+		component.p1 = undefined;
+		component.p2 = undefined;
+		component.p3 = undefined;
 
 		assert.htmlEqual(
 			target.innerHTML,
 			`<p>props: 1 1 1 1 1 1 1 1</p><p>log: nested.fallback_value,fallback_fn,nested.fallback_value,fallback_fn`
 		);
 
-		flushSync(() => {
-			component.p4 = undefined;
-			component.p5 = undefined;
-			component.p6 = undefined;
-			component.p7 = undefined;
-		});
+		component.p4 = undefined;
+		component.p5 = undefined;
+		component.p6 = undefined;
+		component.p7 = undefined;
 
 		assert.htmlEqual(
 			target.innerHTML,

packages/svelte/tests/runtime-runes/samples/props-quoted/_config.js

@@ -1,4 +1,3 @@
-import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
@@ -9,7 +8,7 @@ export default test({
 	html: `hello`,
 
 	async test({ assert, target, component }) {
-		flushSync(() => (component['kebab-case'] = 'goodbye'));
+		component['kebab-case'] = 'goodbye';
 		assert.htmlEqual(target.innerHTML, `goodbye`);
 	}
 });

packages/svelte/tests/runtime-runes/samples/props/_config.js

@@ -1,4 +1,3 @@
-import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
@@ -14,10 +13,10 @@ export default test({
 	html: `x 1 2 3 z`,
 
 	async test({ assert, target, component }) {
-		flushSync(() => (component.foo = 'y'));
+		component.foo = 'y';
 		assert.htmlEqual(target.innerHTML, `y 1 2 3 z`);
 
-		flushSync(() => (component.bar = 'w'));
+		component.bar = 'w';
 		assert.htmlEqual(target.innerHTML, `y 1 2 3 w`);
 	}
 });

packages/svelte/tests/runtime-runes/samples/transition-evaluation/_config.js

@@ -1,15 +1,12 @@
-import { flushSync } from '../../../../src/index-client.js';
 import { test } from '../../test';
 
 export default test({
 	test({ assert, component, target }) {
 		const div = /** @type {HTMLDivElement & { foo?: number }} */ (target.querySelector('div'));
 
 		assert.equal(div.foo, undefined);
-		flushSync(() => {
-			component.foo = 2;
-			component.visible = false;
-		});
+		component.foo = 2;
+		component.visible = false;
 		assert.equal(div.foo, 2);
 	}
 });