Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[feat] Error handling API as discussed in #1096 #6585

Closed
wants to merge 21 commits into from
Closed

[feat] Error handling API as discussed in #1096 #6585

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
38c3dab
Initial draft for error handling using `onError`
rster2002 Jul 27, 2021
4ffe983
Comply with lint errors
rster2002 Jul 27, 2021
0699f90
Errors can now bubble to parent component
rster2002 Jul 27, 2021
40cce0d
Fixed TS errors
rster2002 Jul 28, 2021
6728df8
Fixed variables scoping in component try catch block
rster2002 Jul 28, 2021
444359b
Fixed props not being scoped correctly
rster2002 Jul 28, 2021
0684051
Fixed issue caused by if statements
rster2002 Jul 29, 2021
e71ca48
Template errors are now catched (within {})
rster2002 Jul 29, 2021
81e8ff5
Errors from slots bubble to the provider component
rster2002 Jul 29, 2021
faea31a
Fixed lint errors
rster2002 Jul 29, 2021
e14d3a6
Add initial tests
rster2002 Jul 30, 2021
967e14e
Fixed initial tests
rster2002 Jul 31, 2021
648c627
Added more specific tests
rster2002 Jul 31, 2021
ad2aba8
Fixed added error handling tests
rster2002 Aug 3, 2021
5343883
Add more test cases
rster2002 Aug 6, 2021
c8736dd
Fixed a lot of runtime issues
rster2002 Aug 7, 2021
e0568fd
Prevent one error being handled multiple times
rster2002 Aug 8, 2021
90c8f97
Add keyed each tests
rster2002 Aug 10, 2021
ba7c38f
Remove unnecessary assignment
rster2002 Aug 11, 2021
fb33f45
Fixed slots and props not being added to ctx
rster2002 Aug 12, 2021
2dcee1f
Actually fix lint errors
rster2002 Aug 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 88 additions & 9 deletions src/compiler/compile/render_dom/Block.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}`;
}
}
Expand Down Expand Up @@ -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},
Expand All @@ -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`
Expand Down Expand Up @@ -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',
Expand All @@ -472,7 +545,11 @@ export default class Block {
);

this.chunks.destroy.push(
b`${dispose}();`
b`
if (#mounted) {
${dispose}();
}
`
);
} else {
this.chunks.mount.push(b`
Expand All @@ -488,6 +565,8 @@ export default class Block {
b`@run_all(${dispose});`
);
}

this.chunks.destroy.push(b`#mounted = false`);
}
}
}
117 changes: 84 additions & 33 deletions src/compiler/compile/render_dom/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
}
`);
}
Expand Down
2 changes: 1 addition & 1 deletion src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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})`
);
}
}
2 changes: 1 addition & 1 deletion src/compiler/compile/render_dom/wrappers/Element/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}))`
);
}
});
Expand Down
4 changes: 4 additions & 0 deletions src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down
2 changes: 1 addition & 1 deletion src/compiler/compile/render_dom/wrappers/shared/add_actions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}))`
);
}

Expand Down
30 changes: 18 additions & 12 deletions src/compiler/compile/render_ssr/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand All @@ -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);
}
});
`;

Expand Down
1 change: 1 addition & 0 deletions src/runtime/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import './ambient';
export {
onMount,
onDestroy,
onError,
beforeUpdate,
afterUpdate,
setContext,
Expand Down
Loading