validate components

src/validate/html/index.ts

@@ -1,3 +1,4 @@
+import validateComponent from './validateComponent';
 import validateElement from './validateElement';
 import validateWindow from './validateWindow';
 import validateHead from './validateHead';
@@ -35,14 +36,13 @@ export default function validateHtml(validator: Validator, html: Node) {
 		}
 
 		else if (node.type === 'Component' || node.name === 'svelte:self' || node.name === 'svelte:component') {
-			validateElement(
+			validateComponent(
 				validator,
 				node,
 				refs,
 				refCallees,
 				stack,
-				elementStack,
-				true
+				elementStack
 			);
 		}
 
@@ -53,8 +53,7 @@ export default function validateHtml(validator: Validator, html: Node) {
 				refs,
 				refCallees,
 				stack,
-				elementStack,
-				false
+				elementStack
 			);
 
 			a11y(validator, node, elementStack);

src/validate/html/validateComponent.ts

@@ -0,0 +1,44 @@
+import * as namespaces from '../../utils/namespaces';
+import validateEventHandler from './validateEventHandler';
+import validate, { Validator } from '../index';
+import { Node } from '../../interfaces';
+
+export default function validateComponent(
+	validator: Validator,
+	node: Node,
+	refs: Map<string, Node[]>,
+	refCallees: Node[],
+	stack: Node[],
+	elementStack: Node[]
+) {
+	if (!validator.components.has(node.name)) {
+		validator.error(node, {
+			code: `missing-component`,
+			message: `${node.name} component is not defined`
+		});
+	}
+
+	validator.used.components.add(node.name);
+
+	node.attributes.forEach((attribute: Node) => {
+		if (attribute.type === 'Ref') {
+			if (!refs.has(attribute.name)) refs.set(attribute.name, []);
+			refs.get(attribute.name).push(node);
+		}
+
+		if (attribute.type === 'EventHandler') {
+			validator.used.events.add(attribute.name);
+			validateEventHandler(validator, attribute, refCallees);
+		} else if (attribute.type === 'Transition') {
+			validator.error(attribute, {
+				code: `invalid-transition`,
+				message: `Transitions can only be applied to DOM elements, not components`
+			});
+		} else if (attribute.type === 'Action') {
+			validator.error(attribute, {
+				code: `invalid-action`,
+				message: `Actions can only be applied to DOM elements, not components`
+			});
+		}
+	});
+}

src/validate/html/validateElement.ts

@@ -11,20 +11,8 @@ export default function validateElement(
 	refs: Map<string, Node[]>,
 	refCallees: Node[],
 	stack: Node[],
-	elementStack: Node[],
-	isComponent: Boolean
+	elementStack: Node[]
 ) {
-	if (isComponent) {
-		validator.used.components.add(node.name);
-	}
-
-	if (!isComponent && /^[A-Z]/.test(node.name[0])) {
-		validator.error(node, {
-			code: `missing-component`,
-			message: `${node.name} component is not defined`
-		});
-	}
-
 	if (elementStack.length === 0 && validator.namespace !== namespaces.svg && svg.test(node.name)) {
 		validator.warn(node, {
 			code: `missing-namespace`,
@@ -95,7 +83,7 @@ export default function validateElement(
 			refs.get(attribute.name).push(node);
 		}
 
-		if (!isComponent && attribute.type === 'Binding') {
+		if (attribute.type === 'Binding') {
 			const { name } = attribute;
 
 			if (name === 'value') {
@@ -179,13 +167,6 @@ export default function validateElement(
 			validator.used.events.add(attribute.name);
 			validateEventHandler(validator, attribute, refCallees);
 		} else if (attribute.type === 'Transition') {
-			if (isComponent) {
-				validator.error(attribute, {
-					code: `invalid-transition`,
-					message: `Transitions can only be applied to DOM elements, not components`
-				});
-			}
-
 			validator.used.transitions.add(attribute.name);
 
 			const bidi = attribute.intro && attribute.outro;
@@ -238,17 +219,10 @@ export default function validateElement(
 				}
 			}
 
-			if (attribute.name === 'slot' && !isComponent) {
+			if (attribute.name === 'slot') {
 				checkSlotAttribute(validator, node, attribute, stack);
 			}
 		} else if (attribute.type === 'Action') {
-			if (isComponent) {
-				validator.error(attribute, {
-					code: `invalid-action`,
-					message: `Actions can only be applied to DOM elements, not components`
-				});
-			}
-
 			validator.used.actions.add(attribute.name);
 
 			if (!validator.actions.has(attribute.name)) {