Merge 08bd9d644a into 82f648157e

.changeset/tasty-kangaroos-greet.md

@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: add `onAnimationFrame` lifecycle function

packages/svelte/src/index-client.js

@@ -228,6 +228,32 @@ export function afterUpdate(fn) {
 	init_update_callbacks(component_context).a.push(fn);
 }
 
+/**
+ * The `onAnimationFrame` function schedules a callback to run on `requestAnimationFrame`. It must be called inside an effect (e.g. during component initialisation).
+ *
+ * `onAnimationFrame` does not run inside [server-side components](https://svelte.dev/docs/svelte/svelte-server#render).
+ *
+ * @template T
+ * @param {() => NotFunction<T> | Promise<NotFunction<T>> | (() => any)} fn
+ * @returns {void}
+ */
+export function onAnimationFrame(fn) {
+	if (component_context === null) {
+		lifecycle_outside_component('onAnimationFrame');
+	}
+
+	user_effect(() => {
+		let frame = requestAnimationFrame(function next() {
+			frame = requestAnimationFrame(next);
+			fn();
+		});
+
+		return () => {
+			cancelAnimationFrame(frame);
+		};
+	});
+}
+
 /**
  * Legacy-mode: Init callbacks object for onMount/beforeUpdate/afterUpdate
  * @param {ComponentContext} context

packages/svelte/src/index-server.js

@@ -12,6 +12,7 @@ export function onDestroy(fn) {
 export {
 	noop as beforeUpdate,
 	noop as afterUpdate,
+	noop as onAnimationFrame,
 	noop as onMount,
 	noop as flushSync,
 	run as untrack

packages/svelte/types/index.d.ts

@@ -434,6 +434,13 @@ declare module 'svelte' {
 	 * @deprecated Use [`$effect`](https://svelte.dev/docs/svelte/$effect) instead
 	 * */
 	export function afterUpdate(fn: () => void): void;
+	/**
+	 * The `onAnimationFrame` function schedules a callback to run on `requestAnimationFrame`. It must be called inside an effect (e.g. during component initialisation).
+	 *
+	 * `onAnimationFrame` does not run inside [server-side components](https://svelte.dev/docs/svelte/svelte-server#render).
+	 *
+	 * */
+	export function onAnimationFrame<T>(fn: () => NotFunction<T> | Promise<NotFunction<T>> | (() => any)): void;
 	/**
 	 * Create a snippet programmatically
 	 * */