From 750008437c9c192ecbe0730966f4bce23bf7a5dd Mon Sep 17 00:00:00 2001 From: Nguyen Tran Date: Fri, 26 May 2023 09:00:25 -0400 Subject: [PATCH 1/5] Add error message saying animation can't be on component --- src/compiler/compile/compiler_errors.js | 4 ++++ src/compiler/compile/nodes/InlineComponent.js | 4 +++- src/compiler/interfaces.d.ts | 2 +- 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/compiler/compile/compiler_errors.js b/src/compiler/compile/compiler_errors.js index 02b0f7120a0d..b3b2f1c4bd4a 100644 --- a/src/compiler/compile/compiler_errors.js +++ b/src/compiler/compile/compiler_errors.js @@ -138,6 +138,10 @@ export default { code: 'invalid-action', message: 'Actions can only be applied to DOM elements, not components' }, + invalid_animation: { + code: 'invalid-animation', + message: 'Animations can only be applied to DOM elements, not components' + }, invalid_class: { code: 'invalid-class', message: 'Classes can only be applied to DOM elements, not components' diff --git a/src/compiler/compile/nodes/InlineComponent.js b/src/compiler/compile/nodes/InlineComponent.js index 558ab1e78e95..bd8fcf9a32d1 100644 --- a/src/compiler/compile/nodes/InlineComponent.js +++ b/src/compiler/compile/nodes/InlineComponent.js @@ -59,7 +59,7 @@ export default class InlineComponent extends Node { ? new Expression(component, this, scope, info.expression) : null; info.attributes.forEach( - /** @param {any} node */ (node) => { + /** @param {import('../../interfaces.js').BaseDirective | import('../../interfaces.js').Attribute | import('../../interfaces.js').SpreadAttribute} node */ (node) => { /* eslint-disable no-fallthrough */ switch (node.type) { case 'Action': @@ -88,6 +88,8 @@ export default class InlineComponent extends Node { return component.error(node, compiler_errors.invalid_transition); case 'StyleDirective': return component.error(node, compiler_errors.invalid_component_style_directive); + case 'Animation': + return component.error(node, compiler_errors.invalid_animation); default: throw new Error(`Not implemented: ${node.type}`); } diff --git a/src/compiler/interfaces.d.ts b/src/compiler/interfaces.d.ts index 52fd7231701e..43e5ece4fdfd 100644 --- a/src/compiler/interfaces.d.ts +++ b/src/compiler/interfaces.d.ts @@ -51,7 +51,7 @@ export type DirectiveType = | 'Ref' | 'Transition'; -interface BaseDirective extends BaseNode { +export interface BaseDirective extends BaseNode { type: DirectiveType; name: string; } From 18cdec0c04a26a76297c3a4a40b64ba56711a70d Mon Sep 17 00:00:00 2001 From: Nguyen Tran Date: Fri, 26 May 2023 09:00:43 -0400 Subject: [PATCH 2/5] Add tests checking animation on component --- .../samples/animation-on-component/errors.json | 14 ++++++++++++++ .../samples/animation-on-component/input.svelte | 7 +++++++ 2 files changed, 21 insertions(+) create mode 100644 test/validator/samples/animation-on-component/errors.json create mode 100644 test/validator/samples/animation-on-component/input.svelte diff --git a/test/validator/samples/animation-on-component/errors.json b/test/validator/samples/animation-on-component/errors.json new file mode 100644 index 000000000000..5ba47f9b88b2 --- /dev/null +++ b/test/validator/samples/animation-on-component/errors.json @@ -0,0 +1,14 @@ +[ + { + "code": "invalid-action", + "message": "Animations can only be applied to DOM elements, not components", + "start": { + "line": 7, + "column": 8 + }, + "end": { + "line": 7, + "column": 18 + } + } +] diff --git a/test/validator/samples/animation-on-component/input.svelte b/test/validator/samples/animation-on-component/input.svelte new file mode 100644 index 000000000000..cb8a986586fb --- /dev/null +++ b/test/validator/samples/animation-on-component/input.svelte @@ -0,0 +1,7 @@ + + + \ No newline at end of file From 96b523b248997f6d49c2ac860b6e0982ab2aebfb Mon Sep 17 00:00:00 2001 From: Nguyen Tran Date: Fri, 26 May 2023 09:37:15 -0400 Subject: [PATCH 3/5] Fix tests --- test/validator/samples/animation-on-component/errors.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/validator/samples/animation-on-component/errors.json b/test/validator/samples/animation-on-component/errors.json index 5ba47f9b88b2..b6e5ade74f03 100644 --- a/test/validator/samples/animation-on-component/errors.json +++ b/test/validator/samples/animation-on-component/errors.json @@ -1,6 +1,6 @@ [ { - "code": "invalid-action", + "code": "invalid-animation", "message": "Animations can only be applied to DOM elements, not components", "start": { "line": 7, @@ -8,7 +8,7 @@ }, "end": { "line": 7, - "column": 18 + "column": 19 } } ] From 0b241658a99ae1a07affc6c7c1075944b12f7db9 Mon Sep 17 00:00:00 2001 From: Nguyen Tran Date: Fri, 26 May 2023 09:39:51 -0400 Subject: [PATCH 4/5] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index cbafadc80703..eee762200e5e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -27,6 +27,7 @@ * Treat slots as if they don't exist when using CSS adjacent and general sibling combinators ([#8284](https://github.com/sveltejs/svelte/issues/8284)) * Fix transitions so that they don't require a `style-src 'unsafe-inline'` Content Security Policy (CSP) ([#6662](https://github.com/sveltejs/svelte/issues/6662)). * Explicitly disallow `var` declarations extending the reactive statement scope ([#6800](https://github.com/sveltejs/svelte/pull/6800)) +* Improve error message when trying to use `animate:` directives on inline components ([#8641](https://github.com/sveltejs/svelte/issues/8641)) ## 3.59.1 From f93fd1a191383fc780678f5e4a80f74915dc841f Mon Sep 17 00:00:00 2001 From: Nguyen Tran Date: Fri, 26 May 2023 09:47:54 -0400 Subject: [PATCH 5/5] Prettier formatting --- src/compiler/compile/nodes/InlineComponent.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/compiler/compile/nodes/InlineComponent.js b/src/compiler/compile/nodes/InlineComponent.js index bd8fcf9a32d1..792b931656af 100644 --- a/src/compiler/compile/nodes/InlineComponent.js +++ b/src/compiler/compile/nodes/InlineComponent.js @@ -59,7 +59,9 @@ export default class InlineComponent extends Node { ? new Expression(component, this, scope, info.expression) : null; info.attributes.forEach( - /** @param {import('../../interfaces.js').BaseDirective | import('../../interfaces.js').Attribute | import('../../interfaces.js').SpreadAttribute} node */ (node) => { + /** @param {import('../../interfaces.js').BaseDirective | import('../../interfaces.js').Attribute | import('../../interfaces.js').SpreadAttribute} node */ ( + node + ) => { /* eslint-disable no-fallthrough */ switch (node.type) { case 'Action': @@ -89,7 +91,7 @@ export default class InlineComponent extends Node { case 'StyleDirective': return component.error(node, compiler_errors.invalid_component_style_directive); case 'Animation': - return component.error(node, compiler_errors.invalid_animation); + return component.error(node, compiler_errors.invalid_animation); default: throw new Error(`Not implemented: ${node.type}`); }