fix: error when animation directive is on component (#8641)

Fixes #8639
pull/8654/head
Nguyen Tran 1 year ago committed by GitHub
parent d9698551fb
commit a3f52f9348
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -32,6 +32,7 @@
* Explicitly disallow `var` declarations extending the reactive statement scope ([#6800](https://github.com/sveltejs/svelte/pull/6800)) * Explicitly disallow `var` declarations extending the reactive statement scope ([#6800](https://github.com/sveltejs/svelte/pull/6800))
* Allow `#each` to iterate over iterables like `Set`, `Map` etc ([#7425](https://github.com/sveltejs/svelte/issues/7425)) * Allow `#each` to iterate over iterables like `Set`, `Map` etc ([#7425](https://github.com/sveltejs/svelte/issues/7425))
* Warn about `:` in attributes and props to prevent ambiguity with Svelte directives ([#6823](https://github.com/sveltejs/svelte/issues/6823)) * Warn about `:` in attributes and props to prevent ambiguity with Svelte directives ([#6823](https://github.com/sveltejs/svelte/issues/6823))
* Improve error message when trying to use `animate:` directives on inline components ([#8641](https://github.com/sveltejs/svelte/issues/8641))
## 3.59.1 ## 3.59.1

@ -138,6 +138,10 @@ export default {
code: 'invalid-action', code: 'invalid-action',
message: 'Actions can only be applied to DOM elements, not components' 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: { invalid_class: {
code: 'invalid-class', code: 'invalid-class',
message: 'Classes can only be applied to DOM elements, not components' message: 'Classes can only be applied to DOM elements, not components'

@ -59,7 +59,9 @@ export default class InlineComponent extends Node {
? new Expression(component, this, scope, info.expression) ? new Expression(component, this, scope, info.expression)
: null; : null;
info.attributes.forEach( 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 */ /* eslint-disable no-fallthrough */
switch (node.type) { switch (node.type) {
case 'Action': case 'Action':
@ -88,6 +90,8 @@ export default class InlineComponent extends Node {
return component.error(node, compiler_errors.invalid_transition); return component.error(node, compiler_errors.invalid_transition);
case 'StyleDirective': case 'StyleDirective':
return component.error(node, compiler_errors.invalid_component_style_directive); return component.error(node, compiler_errors.invalid_component_style_directive);
case 'Animation':
return component.error(node, compiler_errors.invalid_animation);
default: default:
throw new Error(`Not implemented: ${node.type}`); throw new Error(`Not implemented: ${node.type}`);
} }

@ -51,7 +51,7 @@ export type DirectiveType =
| 'Ref' | 'Ref'
| 'Transition'; | 'Transition';
interface BaseDirective extends BaseNode { export interface BaseDirective extends BaseNode {
type: DirectiveType; type: DirectiveType;
name: string; name: string;
} }

@ -0,0 +1,14 @@
[
{
"code": "invalid-animation",
"message": "Animations can only be applied to DOM elements, not components",
"start": {
"line": 7,
"column": 8
},
"end": {
"line": 7,
"column": 19
}
}
]

@ -0,0 +1,7 @@
<script>
import Widget from './Widget.svelte';
function foo() {}
</script>
<Widget animate:foo />
Loading…
Cancel
Save