feat: #3372 added a new self event modifier

Author: samuelgozi

src/compiler/compile/nodes/Element.ts

@@ -63,7 +63,8 @@ const valid_modifiers = new Set([
 	'stopPropagation',
 	'capture',
 	'once',
-	'passive'
+	'passive',
+	'self'
 ]);
 
 const passive_events = new Set([

src/compiler/compile/render_dom/wrappers/shared/add_event_handlers.ts

@@ -10,6 +10,7 @@ export default function add_event_handlers(
 		let snippet = handler.render(block);
 		if (handler.modifiers.has('preventDefault')) snippet = `@prevent_default(${snippet})`;
 		if (handler.modifiers.has('stopPropagation')) snippet = `@stop_propagation(${snippet})`;
+		if (handler.modifiers.has('self')) snippet = `@self(${snippet}, ${target})`;
 
 		const opts = ['passive', 'once', 'capture'].filter(mod => handler.modifiers.has(mod));
 

src/runtime/internal/dom.ts

@@ -73,6 +73,14 @@ export function stop_propagation(fn) {
 	};
 }
 
+export function self(fn, el) {
+	return function(event) {
+		if(event.target !== el) return;
+		// @ts-ignore
+		return fn.call(this, event);
+	};
+}
+
 export function attr(node: Element, attribute: string, value?: string) {
 	if (value == null) node.removeAttribute(attribute);
 	else node.setAttribute(attribute, value);

test/validator/samples/event-modifiers-invalid/errors.json

@@ -1,5 +1,5 @@
 [{
-	"message": "Valid event modifiers are preventDefault, stopPropagation, capture, once or passive",
+	"message": "Valid event modifiers are preventDefault, stopPropagation, capture, once, passive or self",
 	"code": "invalid-event-modifier",
 	"start": {
 		"line": 1,