Events for Blocks and Components

src/compiler/compile/render_dom/Block.ts

@@ -6,6 +6,7 @@ import Wrapper from './wrappers/shared/Wrapper';
 export interface BlockOptions {
 	parent?: Block;
 	name: string;
+	type: string;
 	renderer?: Renderer;
 	comment?: string;
 	key?: string;
@@ -17,6 +18,7 @@ export default class Block {
 	parent?: Block;
 	renderer: Renderer;
 	name: string;
+	type: string;
 	comment?: string;
 
 	wrappers: Wrapper[];
@@ -64,6 +66,7 @@ export default class Block {
 		this.parent = options.parent;
 		this.renderer = options.renderer;
 		this.name = options.name;
+		this.type = options.type;
 		this.comment = options.comment;
 
 		this.wrappers = [];
@@ -369,11 +372,20 @@ export default class Block {
 
 			${!this.builders.init.is_empty() && this.builders.init}
 
-			return {
+			${dev
+				? deindent`
+					const block = {
 						${properties}
 					};
-		`.replace(/(#+)(\w*)/g, (_match: string, sigil: string, name: string) => {
-			return sigil === '#' ? this.alias(name) : sigil.slice(1) + name;
+					@dispatch_dev("SvelteRegisterBlock", { block, id: ${this.name || 'create_fragment'}.name, type: "${this.type}", source: "${this.comment ? this.comment.replace(/"/g, '\\"') : ''}", ctx });
+					return block;`
+				: deindent`
+					return {
+						${properties}
+					};`
+			}
+		`.replace(/([^{])(#+)(\w*)/g, (_match: string, pre: string, sigil: string, name: string) => {
+			return pre + (sigil === '#' ? this.alias(name) : sigil.slice(1) + name);
 		});
 		/* eslint-enable @typescript-eslint/indent,indent */
 	}

src/compiler/compile/render_dom/Renderer.ts

@@ -30,6 +30,7 @@ export default class Renderer {
 		this.block = new Block({
 			renderer: this,
 			name: null,
+			type: 'component',
 			key: null,
 
 			bindings: new Map(),

src/compiler/compile/render_dom/index.ts

@@ -495,6 +495,7 @@ export default function dom(
 					super(${options.dev && `options`});
 					${should_add_css && `if (!@_document.getElementById("${component.stylesheet.id}-style")) ${add_css}();`}
 					@init(this, options, ${definition}, create_fragment, ${not_equal}, ${prop_names});
+					${options.dev && `@dispatch_dev("SvelteRegisterComponent", { component: this, tagName: "${name}", id: create_fragment.name });`}
 
 					${dev_props_check}
 				}

src/compiler/compile/render_dom/wrappers/AwaitBlock.ts

@@ -30,7 +30,8 @@ class AwaitBlockBranch extends Wrapper {
 
 		this.block = block.child({
 			comment: create_debugging_comment(node, this.renderer.component),
-			name: this.renderer.component.get_unique_name(`create_${status}_block`)
+			name: this.renderer.component.get_unique_name(`create_${status}_block`),
+			type: status
 		});
 
 		this.fragment = new FragmentWrapper(

src/compiler/compile/render_dom/wrappers/EachBlock.ts

@@ -28,7 +28,8 @@ export class ElseBlockWrapper extends Wrapper {
 
 		this.block = block.child({
 			comment: create_debugging_comment(node, this.renderer.component),
-			name: this.renderer.component.get_unique_name(`create_else_block`)
+			name: this.renderer.component.get_unique_name(`create_else_block`),
+			type: 'else'
 		});
 
 		this.fragment = new FragmentWrapper(
@@ -82,6 +83,7 @@ export default class EachBlockWrapper extends Wrapper {
 		this.block = block.child({
 			comment: create_debugging_comment(this.node, this.renderer.component),
 			name: renderer.component.get_unique_name('create_each_block'),
+			type: 'each',
 			// @ts-ignore todo: probably error
 			key: node.key as string,
 

src/compiler/compile/render_dom/wrappers/Element/index.ts

@@ -151,7 +151,8 @@ export default class ElementWrapper extends Wrapper {
 					if (!(owner as InlineComponentWrapper).slots.has(name)) {
 						const child_block = block.child({
 							comment: create_debugging_comment(node, this.renderer.component),
-							name: this.renderer.component.get_unique_name(`create_${sanitize(name)}_slot`)
+							name: this.renderer.component.get_unique_name(`create_${sanitize(name)}_slot`),
+							type: 'slot'
 						});
 
 						const lets = this.node.lets;

src/compiler/compile/render_dom/wrappers/IfBlock.ts

@@ -38,7 +38,8 @@ class IfBlockBranch extends Wrapper {
 			comment: create_debugging_comment(node, parent.renderer.component),
 			name: parent.renderer.component.get_unique_name(
 				(node as IfBlock).expression ? `create_if_block` : `create_else_block`
-			)
+			),
+			type: (node as IfBlock).expression ? 'if' : 'else'
 		});
 
 		this.fragment = new FragmentWrapper(renderer, this.block, node.children, parent, strip_whitespace, next_sibling);

src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts

@@ -70,7 +70,8 @@ export default class InlineComponentWrapper extends Wrapper {
 		if (this.node.children.length) {
 			const default_slot = block.child({
 				comment: create_debugging_comment(node, renderer.component),
-				name: renderer.component.get_unique_name(`create_default_slot`)
+				name: renderer.component.get_unique_name(`create_default_slot`),
+				type: 'slot'
 			});
 
 			this.renderer.blocks.push(default_slot);

src/runtime/internal/dom.ts

@@ -256,3 +256,7 @@ export function custom_event<T=any>(type: string, detail?: T) {
 	e.initCustomEvent(type, false, false, detail);
 	return e;
 }
+
+export function dispatch_dev(type: string, detail?: T) {
+	document.dispatchEvent(custom_event(type, detail))
+}