Merge branch 'master' of https://github.com/samuelgozi/svelte into samuelgozi-master

site/content/tutorial/05-events/03-event-modifiers/text.md

@@ -23,5 +23,6 @@ The full list of modifiers:
 * `passive` — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so)
 * `capture` — fires the handler during the *capture* phase instead of the *bubbling* phase ([MDN docs](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture))
 * `once` — remove the handler after the first time it runs
+* `self` — only trigger handler if event.target is the element itself
 
 You can chain modifiers together, e.g. `on:click|once|capture={...}`.

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/runtime/samples/event-handler-modifier-self/_config.js

@@ -0,0 +1,16 @@
+export default {
+	html: `
+		<div>
+			<button>click me</button>
+		</div>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+
+		await button.dispatchEvent(event);
+
+		assert.ok(!component.inner_clicked);
+	},
+};

test/runtime/samples/event-handler-modifier-self/main.svelte

@@ -0,0 +1,11 @@
+<script>
+	export let inner_clicked;
+
+	function handle_click(event) {
+		inner_clicked = true;
+	}
+</script>
+
+<div on:click|self={handle_click}>
+	<button>click me</button>
+</div>

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,