change behaviour of tick() to be requestAnimationFrame-based

Author: Rich-Harris

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

@@ -744,6 +744,10 @@ export function flushSync(fn) {
  * @returns {Promise<void>}
  */
 export async function tick() {
+	if (async_mode_flag) {
+		return new Promise((f) => requestAnimationFrame(() => f()));
+	}
+
 	await Promise.resolve();
 	// By calling flushSync we guarantee that any pending state changes are applied after one tick.
 	// TODO look into whether we can make flushing subsequent updates synchronously in the future.

packages/svelte/src/reactivity/create-subscriber.js

@@ -69,7 +69,7 @@ export function createSubscriber(start) {
 				subscribers += 1;
 
 				return () => {
-					tick().then(() => {
+					queueMicrotask(() => {
 						// Only count down after timeout, else we would reach 0 before our own render effect reruns,
 						// but reach 1 again when the tick callback of the prior teardown runs. That would mean we
 						// re-subcribe unnecessarily and create a memory leak because the old subscription is never cleaned up.

packages/svelte/tests/runtime-runes/samples/async-attribute/_config.js

@@ -9,7 +9,7 @@ export default test({
 		<p>pending</p>
 	`,
 
-	async test({ assert, target, component }) {
+	async test({ assert, target }) {
 		const [cool, neat, reset] = target.querySelectorAll('button');
 
 		flushSync(() => cool.click());