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

Fixes #8639

Author: ngtr6788

CHANGELOG.md

@@ -32,6 +32,7 @@
 * 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))
 * 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
 

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'

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 {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 +90,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}`);
 				}

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;
 }

test/validator/samples/animation-on-component/errors.json

@@ -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
+		}
+	}
+]

test/validator/samples/animation-on-component/input.svelte

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