chore: replace addEventListener with on from svelte/events

Author: vnphanquang

.changeset/silly-pants-know.md

@@ -0,0 +1,10 @@
+---
+'@svelte-put/clickoutside': patch
+'@svelte-put/dragscroll': patch
+'@svelte-put/shortcut': patch
+'@svelte-put/movable': patch
+'@svelte-put/copy': patch
+'@svelte-put/toc': patch
+---
+
+defer events to Svelte internal delegation system where applicable

packages/avatar/package.json

@@ -81,7 +81,7 @@
 		"extends": "../../package.json"
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0-next.1"
+		"svelte": "^5.0.0-next.152"
 	},
 	"dependencies": {
 		"md5": "^2.3.0"

packages/clickoutside/package.json

@@ -54,7 +54,7 @@
 		"@internals/tsconfig": "workspace:*"
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0-next.1"
+		"svelte": "^5.0.0-next.152"
 	},
 	"volta": {
 		"extends": "../../package.json"

packages/clickoutside/src/clickoutside.js

@@ -1,3 +1,4 @@
+import { on } from 'svelte/events';
 /**
  * Dispatch a `clickoutside` {@link https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent | CustomEvent } on click outside of node
  * @example
@@ -51,7 +52,7 @@
  * @returns {import('./public').ClickOutsideActionReturn}
  */
 export function clickoutside(node, param = { enabled: true }) {
-	let { enabled, eventType, nodeForEvent, options, capture } = resolveConfig(param);
+	let { enabled, eventType, nodeForEvent, options } = resolveConfig(param);
 
 	/**
 	 * @param {Event} event
@@ -63,18 +64,20 @@ export function clickoutside(node, param = { enabled: true }) {
 		}
 	}
 
+	/** @type {undefined | (() => void)} */
+	let off;
 	if (param.enabled !== false) {
-		nodeForEvent.addEventListener(eventType, handle, options);
+		off = on(/** @type {Element} */(nodeForEvent), eventType, handle, options);
 	}
 
 	return {
 		update(update) {
-			nodeForEvent.removeEventListener(eventType, handle, capture);
-			({ enabled, eventType, nodeForEvent, options, capture } = resolveConfig(update));
-			if (enabled) nodeForEvent.addEventListener(eventType, handle, options);
+			off?.();
+			({ enabled, eventType, nodeForEvent, options } = resolveConfig(update));
+			if (enabled) off = on(/** @type {Element} */(nodeForEvent), eventType, handle, options);
 		},
 		destroy() {
-			nodeForEvent.removeEventListener(eventType, handle, capture);
+			off?.();
 		},
 	};
 }
@@ -86,17 +89,17 @@ export function clickoutside(node, param = { enabled: true }) {
  * 	enabled: boolean;
  * 	nodeForEvent: Element | Document;
  * 	eventType: string;
- * 	options: boolean | AddEventListenerOptions | undefined;
- * 	capture: boolean | undefined;
+ * 	options?: AddEventListenerOptions;
  * }}
  */
 export function resolveConfig(param = {}) {
 	return {
 		enabled: param.enabled ?? true,
 		nodeForEvent: param.limit?.parent ?? document,
 		eventType: param.event ?? 'click',
-		options: param.options,
-		capture: typeof param.options === 'object' ? param.options?.capture : param.options,
+		options: typeof param.options === 'boolean'
+			? { capture: param.options }
+			: param.options,
 	};
 }
 

packages/cloudflare-turnstile/package.json

@@ -51,7 +51,7 @@
 		"@internals/tsconfig": "workspace:*"
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0-next.1"
+		"svelte": "^5.0.0-next.152"
 	},
 	"volta": {
 		"extends": "../../package.json"

packages/copy/package.json

@@ -51,7 +51,7 @@
 		"@internals/tsconfig": "workspace:*"
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0-next.1"
+		"svelte": "^5.0.0-next.152"
 	},
 	"volta": {
 		"extends": "../../package.json"

packages/copy/src/copy.action.js

@@ -1,3 +1,5 @@
+import { on } from 'svelte/events';
+
 import { copyToClipboard } from './copy.helpers.js';
 
 /**
@@ -32,20 +34,18 @@ export function copy(node, parameter = {}) {
 		}
 	}
 
-
+	/** @type {Array<() => void>} */
+	let offs = [];
 	function addEvents() {
 		if (trigger) {
-			for (const event of events) {
-				trigger.addEventListener(/** @type {K} */ (event), handler);
-			}
+			offs = events.map((event) => on(trigger, event, handler));
 		}
 	}
 
 	function removeEvents() {
 		if (trigger) {
-			for (const event of events) {
-				trigger.removeEventListener(/** @type {K} */ (event), handler);
-			}
+			offs.forEach(unsub => unsub());
+			offs = [];
 		}
 	}
 

packages/dragscroll/package.json

@@ -53,7 +53,7 @@
 		"@internals/tsconfig": "workspace:*"
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0-next.1"
+		"svelte": "^5.0.0-next.152"
 	},
 	"volta": {
 		"extends": "../../package.json"

packages/dragscroll/src/dragscroll.action.js

@@ -1,3 +1,5 @@
+import { on } from 'svelte/events';
+
 /**
  * @package
  * @param {import('./public').DragScrollParameter} param
@@ -97,20 +99,20 @@ export function dragscroll(node, param = {}) {
 		}
 	}
 
+	/** @type {Array<() => void>} */
+	let offs = [];
 	function addEvents() {
 		if (!node) return;
-		node.addEventListener(events.down, handlePointerDown);
-		node.addEventListener(events.leave, handlePointerUpAndLeave);
-		node.addEventListener(events.up, handlePointerUpAndLeave);
-		node.addEventListener(events.move, handlePointerMove);
+		offs.push(on(node, events.down, handlePointerDown));
+		offs.push(on(node, events.leave, handlePointerUpAndLeave));
+		offs.push(on(node, events.up, handlePointerUpAndLeave));
+		offs.push(on(node, events.move, handlePointerMove));
 	}
 
 	function removeEvents() {
 		if (!node) return;
-		node.removeEventListener(events.down, handlePointerDown);
-		node.removeEventListener(events.leave, handlePointerUpAndLeave);
-		node.removeEventListener(events.up, handlePointerUpAndLeave);
-		node.removeEventListener(events.move, handlePointerMove);
+		offs.forEach(unsub => unsub());
+		offs = [];
 	}
 
 	function changeCursor(active = false) {

packages/inline-svg/package.json

@@ -54,7 +54,7 @@
 		"@internals/tsconfig": "workspace:*"
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0-next.1"
+		"svelte": "^5.0.0-next.152"
 	},
 	"volta": {
 		"extends": "../../package.json"