create teardown effect

Author: Rich-Harris

packages/svelte/src/internal/client/dom/elements/bindings/input.js

@@ -1,5 +1,5 @@
 import { DEV } from 'esm-env';
-import { render_effect, effect } from '../../../reactivity/effects.js';
+import { render_effect, effect, teardown } from '../../../reactivity/effects.js';
 import { stringify } from '../../../render.js';
 import { listen_to_event_and_reset_event } from './shared.js';
 import * as e from '../../../errors.js';
@@ -103,14 +103,12 @@ export function bind_group(inputs, group_index, input, get_value, update) {
 		}
 	});
 
-	render_effect(() => {
-		return () => {
-			var index = binding_group.indexOf(input);
+	teardown(() => {
+		var index = binding_group.indexOf(input);
 
-			if (index !== -1) {
-				binding_group.splice(index, 1);
-			}
-		};
+		if (index !== -1) {
+			binding_group.splice(index, 1);
+		}
 	});
 
 	effect(() => {
@@ -189,6 +187,7 @@ export function bind_files(input, get_value, update) {
 	listen_to_event_and_reset_event(input, 'change', () => {
 		update(input.files);
 	});
+
 	render_effect(() => {
 		input.files = get_value();
 	});

packages/svelte/src/internal/client/dom/elements/bindings/media.js

@@ -1,5 +1,5 @@
 import { hydrating } from '../../hydration.js';
-import { render_effect, effect } from '../../../reactivity/effects.js';
+import { render_effect, effect, teardown } from '../../../reactivity/effects.js';
 import { listen } from './shared.js';
 
 /** @param {TimeRanges} ranges */
@@ -52,7 +52,7 @@ export function bind_current_time(media, get_value, update) {
 		updating = false;
 	});
 
-	render_effect(() => () => cancelAnimationFrame(raf_id));
+	teardown(() => cancelAnimationFrame(raf_id));
 }
 
 /**

packages/svelte/src/internal/client/dom/elements/bindings/props.js

@@ -1,4 +1,4 @@
-import { render_effect } from '../../../reactivity/effects.js';
+import { teardown } from '../../../reactivity/effects.js';
 import { get_descriptor } from '../../../utils.js';
 
 /**
@@ -15,7 +15,7 @@ export function bind_prop(props, prop, value) {
 
 	if (desc && desc.set) {
 		props[prop] = value;
-		render_effect(() => () => {
+		teardown(() => {
 			props[prop] = null;
 		});
 	}

packages/svelte/src/internal/client/dom/elements/bindings/shared.js

@@ -1,4 +1,4 @@
-import { render_effect } from '../../../reactivity/effects.js';
+import { teardown } from '../../../reactivity/effects.js';
 import { add_form_reset_listener } from '../misc.js';
 
 /**
@@ -18,12 +18,10 @@ export function listen(target, events, handler, call_handler_immediately = true)
 		target.addEventListener(name, handler);
 	}
 
-	render_effect(() => {
-		return () => {
-			for (var name of events) {
-				target.removeEventListener(name, handler);
-			}
-		};
+	teardown(() => {
+		for (var name of events) {
+			target.removeEventListener(name, handler);
+		}
 	});
 }
 

packages/svelte/src/internal/client/dom/elements/bindings/size.js

@@ -1,5 +1,4 @@
-import { effect, render_effect } from '../../../reactivity/effects.js';
-import { untrack } from '../../../runtime.js';
+import { effect, teardown } from '../../../reactivity/effects.js';
 
 /**
  * Resize observer singleton.
@@ -89,7 +88,7 @@ export function bind_resize_observer(element, type, update) {
 				: resize_observer_device_pixel_content_box;
 
 	var unsub = observer.observe(element, /** @param {any} entry */ (entry) => update(entry[type]));
-	render_effect(() => unsub);
+	teardown(unsub);
 }
 
 /**

packages/svelte/src/internal/client/dom/elements/bindings/window.js

@@ -1,4 +1,4 @@
-import { effect, render_effect } from '../../../reactivity/effects.js';
+import { effect, render_effect, teardown } from '../../../reactivity/effects.js';
 import { listen } from './shared.js';
 
 /**
@@ -51,10 +51,8 @@ export function bind_window_scroll(type, get_value, update) {
 	// Browsers don't fire the scroll event for the initial scroll position when scroll style isn't set to smooth
 	effect(target_handler);
 
-	render_effect(() => {
-		return () => {
-			removeEventListener('scroll', target_handler);
-		};
+	teardown(() => {
+		removeEventListener('scroll', target_handler);
 	});
 }
 

packages/svelte/src/internal/client/dom/elements/events.js

@@ -1,4 +1,4 @@
-import { render_effect } from '../../reactivity/effects.js';
+import { render_effect, teardown } from '../../reactivity/effects.js';
 import { all_registered_events, root_event_handles } from '../../render.js';
 import { define_property, is_array } from '../../utils.js';
 import { hydrating } from '../hydration.js';
@@ -80,10 +80,8 @@ export function event(event_name, dom, handler, capture, passive) {
 
 	// @ts-ignore
 	if (dom === document.body || dom === window || dom === document) {
-		render_effect(() => {
-			return () => {
-				dom.removeEventListener(event_name, target_handler, options);
-			};
+		teardown(() => {
+			dom.removeEventListener(event_name, target_handler, options);
 		});
 	}
 }

packages/svelte/src/internal/client/reactivity/effects.js

@@ -144,6 +144,13 @@ export function effect_active() {
 	return false;
 }
 
+/**
+ * @param {() => void} fn
+ */
+export function teardown(fn) {
+	return render_effect(() => fn);
+}
+
 /**
  * Internal representation of `$effect(...)`
  * @param {() => void | (() => void)} fn