[feat] Error handling API as discussed in #1096

src/compiler/compile/render_dom/Block.ts

@@ -316,7 +316,12 @@ export default class Block {
 
 				properties.update = x`function #update(${ctx}, ${dirty}) {
 					${this.maintain_context && b`#ctx = ${ctx};`}
-					${this.chunks.update}
+
+                    try {
+                        ${this.chunks.update}
+                    } catch (e) {
+                        @handle_error(@get_current_component(), e);
+                    }
 				}`;
 			}
 		}
@@ -370,6 +375,36 @@ export default class Block {
 			}
 		}
 
+        if (properties.create.type === 'FunctionExpression') {
+            properties.create.body.body = b`
+                try {
+                    ${properties.create.body.body}
+                } catch (e) {
+                    @handle_error(@get_current_component(), e);
+                }
+            `;
+        }
+
+        if (properties.mount.type === 'FunctionExpression') {
+            properties.mount.body.body = b`
+                try {
+                    ${properties.mount.body.body}
+                } catch (e) {
+                    @handle_error(@get_current_component(), e);
+                }
+            `;
+        }
+
+        if (properties.hydrate?.type === 'FunctionExpression') {
+            properties.hydrate.body.body = b`
+                try {
+                    ${properties.hydrate.body.body}
+                } catch (e) {
+                    @handle_error(@get_current_component(), e);
+                }
+            `;
+        }
+
 		const return_value: any = x`{
 			key: ${properties.key},
 			first: ${properties.first},
@@ -388,16 +423,55 @@ export default class Block {
 
 		const block = dev && this.get_unique_name('block');
 
+        const init_declarations = [];
+        const init_statements = [];
+        const init_functions = [];
+
+        Array.from(this.variables.values()).forEach(({ id, init }) => {
+            init_declarations.push(b`let ${id};`);
+
+            if (init) {
+                init_statements.push(b`${id} = ${init}`);
+            }
+        });
+
+        this.chunks.init.forEach(node => {
+            if (Array.isArray(node)) {
+                node.forEach((declaration: any) => { // TODO add type to this
+                    if (declaration.type === 'FunctionDeclaration') {
+                        init_declarations.push(b`let ${declaration.id};`);
+                        init_functions.push(b`${declaration.id} = ${declaration}`);
+                    } else if (declaration.type === 'VariableDeclaration') {
+                        declaration.declarations.forEach(({ id, init }) => {
+                            init_declarations.push(b`let ${id}`); // TODO declaration is not always `let`
+                            init_statements.push(b`${id} = ${init}`);
+                        });
+                    } else {
+                        init_statements.push(declaration);
+                    }
+                });
+            } else {
+                init_statements.push(node);
+            }
+        });
+
 		const body = b`
 			${this.chunks.declarations}
 
-			${Array.from(this.variables.values()).map(({ id, init }) => {
-				return init
-					? b`let ${id} = ${init}`
-					: b`let ${id}`;
-			})}
+			${init_declarations}
+
+            ${init_statements.length > 0 || init_functions.length > 0
+                ? b`
+                    try {
+                        ${init_functions}
 
-			${this.chunks.init}
+                        ${init_statements}
+                    } catch (e) {
+                        @handle_error(@get_current_component(), e);
+                        return;
+                    }`
+                : ''
+            }
 
 			${dev
 				? b`
@@ -452,7 +526,6 @@ export default class Block {
 	render_listeners(chunk: string = '') {
 		if (this.event_listeners.length > 0) {
 			this.add_variable({ type: 'Identifier', name: '#mounted' });
-			this.chunks.destroy.push(b`#mounted = false`);
 
 			const dispose: Identifier = {
 				type: 'Identifier',
@@ -472,7 +545,11 @@ export default class Block {
 				);
 
 				this.chunks.destroy.push(
-					b`${dispose}();`
+					b`
+                        if (#mounted) {
+                            ${dispose}();
+                        }
+                    `
 				);
 			} else {
 				this.chunks.mount.push(b`
@@ -488,6 +565,8 @@ export default class Block {
 					b`@run_all(${dispose});`
 				);
 			}
+
+            this.chunks.destroy.push(b`#mounted = false`);
 		}
 	}
 }

src/compiler/compile/render_dom/index.ts

@@ -442,57 +442,108 @@ export default function dom(
 			`;
 		}
 
-		const return_value = {
-			type: 'ArrayExpression',
-			elements: renderer.initial_context.map(member => ({
-				type: 'Identifier',
-				name: member.name
-			}) as Expression)
-		};
+        const return_value_reference = b`let #return_values = []`;
+
+        let instance_javascript_with_ctx = [];
+        const initializedIdentifiers = [];
+
+        const add_variable_to_ctx = id => {
+            const index = renderer.initial_context.findIndex(member => member.name === id.name);
+
+            if (index >= 0) {
+                instance_javascript_with_ctx.push(b`#return_values[${index}] = ${id};`[0]);
+                initializedIdentifiers.push(id.name);
+            }
+        };
+
+        const slot_definitions_present = component.slots.size || component.compile_options.dev || uses_slots;
+
+        if (slot_definitions_present) {
+            add_variable_to_ctx({ type: 'Identifier', name: '#slots' });
+            add_variable_to_ctx({ type: 'Identifier', name: '$$scope' });
+        }
+
+        if (instance_javascript === null) {
+            instance_javascript_with_ctx = instance_javascript;
+        } else {
+            instance_javascript.forEach(node => {
+                instance_javascript_with_ctx.push(node);
+
+                if (Array.isArray(node) && node[0].type === 'VariableDeclaration') {
+                    node[0].declarations.forEach(({ id }) => {
+                        if (id.type === 'ObjectPattern') {
+                            id.properties.forEach(property => add_variable_to_ctx(property.key));
+                        } else {
+                            add_variable_to_ctx(id);
+                        }
+                    });
+                }
+
+                if (node.type === 'FunctionDeclaration') {
+                    if (!initializedIdentifiers.includes(node.id.name)) {
+                        add_variable_to_ctx(node.id);
+                    }
+                }
+            });
+        }
+
+
+        const instance_try_block: any = b`
+            try {
+                ${reactive_store_declarations}
 
-		body.push(b`
-			function ${definition}(${args}) {
-				${injected.map(name => b`let ${name};`)}
+				${reactive_store_subscriptions}
 
-				${rest}
+				${resubscribable_reactive_store_unsubscribers}
 
-				${reactive_store_declarations}
+                ${instance_javascript_with_ctx}
 
-				${reactive_store_subscriptions}
+                ${unknown_props_check}
 
-				${resubscribable_reactive_store_unsubscribers}
+                ${renderer.binding_groups.size > 0 && b`const $$binding_groups = [${[...renderer.binding_groups.keys()].map(_ => x`[]`)}];`}
 
-				${component.slots.size || component.compile_options.dev || uses_slots ? b`let { $$slots: #slots = {}, $$scope } = $$props;` : null}
-				${component.compile_options.dev && b`@validate_slots('${component.tag}', #slots, [${[...component.slots.keys()].map(key => `'${key}'`).join(',')}]);`}
-				${compute_slots}
+                ${component.partly_hoisted}
 
-				${instance_javascript}
+                ${set && b`$$self.$$set = ${set};`}
 
-				${unknown_props_check}
+                ${capture_state && b`$$self.$capture_state = ${capture_state};`}
 
-				${renderer.binding_groups.size > 0 && b`const $$binding_groups = [${[...renderer.binding_groups.keys()].map(_ => x`[]`)}];`}
+                ${inject_state && b`$$self.$inject_state = ${inject_state};`}
 
-				${component.partly_hoisted}
+                ${/* before reactive declarations */ props_inject}
 
-				${set && b`$$self.$$set = ${set};`}
+                ${reactive_declarations.length > 0 && b`
+                $$self.$$.update = () => {
+                    ${reactive_declarations}
+                };
+                `}
 
-				${capture_state && b`$$self.$capture_state = ${capture_state};`}
+                ${fixed_reactive_declarations}
 
-				${inject_state && b`$$self.$inject_state = ${inject_state};`}
+                ${uses_props && b`$$props = @exclude_internal_props($$props);`}
 
-				${/* before reactive declarations */ props_inject}
+                return #return_values;
+            }
+            catch(e) {
+                $$self.$$.ctx = #return_values;
+                @handle_error($$self, e);
+                return #return_values;
+            }
+        `;
 
-				${reactive_declarations.length > 0 && b`
-				$$self.$$.update = () => {
-					${reactive_declarations}
-				};
-				`}
+		body.push(b`
+			function ${definition}(${args}) {
+				${injected.map(name => b`let ${name};`)}
 
-				${fixed_reactive_declarations}
+				${rest}
+
+				${slot_definitions_present ? b`let { $$slots: #slots = {}, $$scope } = $$props;` : null}
+				${component.compile_options.dev && b`@validate_slots('${component.tag}', #slots, [${[...component.slots.keys()].map(key => `'${key}'`).join(',')}]);`}
+				${compute_slots}
 
-				${uses_props && b`$$props = @exclude_internal_props($$props);`}
+                ${return_value_reference}
 
-				return ${return_value};
+				${instance_try_block}
 			}
 		`);
 	}

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

@@ -67,7 +67,7 @@ export default class EventHandlerWrapper {
 		}
 
 		block.event_listeners.push(
-			x`@listen(${target}, "${this.node.name}", ${snippet}, ${args})`
+            x`@listen(${target}, "${this.node.name}", @attach_error_handler(${target}, @get_current_component(), ${snippet}), ${args})`
 		);
 	}
 }

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

@@ -541,7 +541,7 @@ export default class ElementWrapper extends Wrapper {
 				);
 			} else {
 				block.event_listeners.push(
-					x`@listen(${this.var}, "${name}", ${callee})`
+                    x`@listen(${this.var}, "${name}", @attach_error_handler(${this.var}, @get_current_component(), ${callee}))`
 				);
 			}
 		});

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

@@ -192,6 +192,10 @@ export default class InlineComponentWrapper extends Wrapper {
 			component_opts.properties.push(p`$$inline: true`);
 		}
 
+        if (block.type === 'slot') {
+            component_opts.properties.push(p`$$in_slot: true`);
+        }
+
 		const fragment_dependencies = new Set(this.slots.size ? ['$$scope'] : []);
 		this.slots.forEach(slot => {
 			slot.block.dependencies.forEach(name => {

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

@@ -40,7 +40,7 @@ export function add_action(block: Block, target: string, action: Action) {
 		);
 	} else {
 		block.event_listeners.push(
-			x`@action_destroyer(${id} = ${fn}.call(null, ${target}, ${snippet}))`
+            x`@action_destroyer(${id} = @attach_error_handler(null, @get_current_component(), ${fn}).call(null, ${target}, ${snippet}))`
 		);
 	}
 

src/compiler/compile/render_ssr/index.ts

@@ -188,17 +188,19 @@ export default function ssr(
 
 			return ${literal};`;
 
-	const blocks = [
-		...injected.map(name => b`let ${name};`),
-		rest,
-		slots,
-		...reactive_store_declarations,
-		...reactive_store_subscriptions,
-		instance_javascript,
-		...parent_bindings,
-		css.code && b`$$result.css.add(#css);`,
-		main
-	].filter(Boolean);
+    const blocks = [
+        ...injected.map(name => b`let ${name};`),
+        rest,
+        slots,
+        ...reactive_store_declarations,
+        ...reactive_store_subscriptions,
+        instance_javascript,
+        ...parent_bindings,
+        css.code && b`$$result.css.add(#css);`,
+        main
+    ].filter(Boolean);
+
+
 
 	const js = b`
 		${css.code ? b`
@@ -212,7 +214,11 @@ export default function ssr(
 		${component.fully_hoisted}
 
 		const ${name} = @create_ssr_component(($$result, $$props, $$bindings, #slots) => {
-			${blocks}
+			try {
+                ${blocks}
+            } catch (e) {
+                @handle_error(@get_current_component(), e);
+            }
 		});
 	`;
 

src/runtime/index.ts

@@ -3,6 +3,7 @@ import './ambient';
 export {
 	onMount,
 	onDestroy,
+    onError,
 	beforeUpdate,
 	afterUpdate,
 	setContext,