Adds validation check to checkComponent function and removes console.logs.

src/validate/html/validateComponent.ts

@@ -2,6 +2,7 @@ import * as namespaces from '../../utils/namespaces';
 import validateEventHandler from './validateEventHandler';
 import validate, { Validator } from '../index';
 import { Node } from '../../interfaces';
+import isValidIdentifier from '../../utils/isValidIdentifier';
 
 export default function validateComponent(
 	validator: Validator,
@@ -22,11 +23,23 @@ export default function validateComponent(
 
 	node.attributes.forEach((attribute: Node) => {
 		if (attribute.type === 'Ref') {
-			if (attribute.name.includes('-'))
+			if (!isValidIdentifier(attribute.name)) {
-				console.dir(attribute);
+				const suggestion = attribute.name.replace(/[^_$a-z0-9]/ig, '_').replace(/^\d/, '_$&');
+				
+				const key = {
+					start: attribute.start,
+					end: attribute.end
+				};
+				
+				validator.error(key, {
+					code: `invalid-reference-name`,
+					message: `Reference name '${attribute.name}' is invalid — must be a valid identifier such as ${suggestion}`
+				});	
+			} else {
 				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);

src/validate/html/validateElement.ts

@@ -83,7 +83,6 @@ export default function validateElement(
 
 	node.attributes.forEach((attribute: Node) => {
 		if (attribute.type === 'Ref') {
-			// console.dir(isValidIdentifier(attribute.name));
 			if (!isValidIdentifier(attribute.name)) {
 				const suggestion = attribute.name.replace(/[^_$a-z0-9]/ig, '_').replace(/^\d/, '_$&');