[feat] dispatch cancelable custom events

src/runtime/internal/dev.ts

@@ -2,7 +2,7 @@ import { custom_event, append, append_hydration, insert, insert_hydration, detac
 import { SvelteComponent } from './Component';
 
 export function dispatch_dev<T=any>(type: string, detail?: T) {
-	document.dispatchEvent(custom_event(type, { version: '__VERSION__', ...detail }, true));
+	document.dispatchEvent(custom_event(type, { version: '__VERSION__', ...detail }, { bubbles: true }));
 }
 
 export function append_dev(target: Node, node: Node) {

src/runtime/internal/dom.ts

@@ -630,9 +630,14 @@ export function toggle_class(element, name, toggle) {
 	element.classList[toggle ? 'add' : 'remove'](name);
 }
 
-export function custom_event<T=any>(type: string, detail?: T, bubbles: boolean = false) {
+export interface CustomEventOpts {
+	bubbles?: boolean;
+	cancelable?: boolean;
+}
+
+export function custom_event<T=any>(type: string, detail?: T, opts?: CustomEventOpts) {
 	const e: CustomEvent<T> = document.createEvent('CustomEvent');
-	e.initCustomEvent(type, bubbles, false, detail);
+	e.initCustomEvent(type, opts.bubbles, opts.cancelable, detail);
 	return e;
 }
 

src/runtime/internal/lifecycle.ts

@@ -1,4 +1,4 @@
-import { custom_event } from './dom';
+import { custom_event, CustomEventOpts } from './dom';
 
 export let current_component;
 
@@ -32,13 +32,13 @@ export function createEventDispatcher<
 >(): <EventKey extends Extract<keyof EventMap, string>>(type: EventKey, detail?: EventMap[EventKey]) => void {
 	const component = get_current_component();
 
-	return (type: string, detail?: any) => {
+	return (type: string, detail?: any, opts?: CustomEventOpts) => {
 		const callbacks = component.$$.callbacks[type];
 
 		if (callbacks) {
 			// TODO are there situations where events could be dispatched
 			// in a server (non-DOM) environment?
-			const event = custom_event(type, detail);
+			const event = custom_event(type, detail, opts);
 			callbacks.slice().forEach(fn => {
 				fn.call(component, event);
 			});