diff --git a/src/compiler/compile/render_dom/Block.ts b/src/compiler/compile/render_dom/Block.ts index d7986e167b..07d2b0a929 100644 --- a/src/compiler/compile/render_dom/Block.ts +++ b/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 { - ${properties} - }; - `.replace(/(#+)(\w*)/g, (_match: string, sigil: string, name: string) => { - return sigil === '#' ? this.alias(name) : sigil.slice(1) + name; + ${dev + ? deindent` + const block = { + ${properties} + }; + @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 */ } diff --git a/src/compiler/compile/render_dom/Renderer.ts b/src/compiler/compile/render_dom/Renderer.ts index 4c61594aa8..727841dbc6 100644 --- a/src/compiler/compile/render_dom/Renderer.ts +++ b/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(), diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts index 9fdaa0cbaa..c1c2ebae56 100644 --- a/src/compiler/compile/render_dom/index.ts +++ b/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} } diff --git a/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts b/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts index 321f7fd9ff..6953326fac 100644 --- a/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts +++ b/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( diff --git a/src/compiler/compile/render_dom/wrappers/EachBlock.ts b/src/compiler/compile/render_dom/wrappers/EachBlock.ts index 242d14b793..8212042544 100644 --- a/src/compiler/compile/render_dom/wrappers/EachBlock.ts +++ b/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, diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index 9b14d1cd6c..95ed189f95 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/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; diff --git a/src/compiler/compile/render_dom/wrappers/IfBlock.ts b/src/compiler/compile/render_dom/wrappers/IfBlock.ts index a783364d03..edf1992c07 100644 --- a/src/compiler/compile/render_dom/wrappers/IfBlock.ts +++ b/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); diff --git a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts index 9cff40ecbb..a68a174d94 100644 --- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts +++ b/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); diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index f65d07117c..896d847a0d 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -256,3 +256,7 @@ export function custom_event(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)) +}