Merge pull request #1634 from GarrettGeorge/master

[WIP] Adds error for #1613

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,9 +23,18 @@ export default function validateComponent(
 
 	node.attributes.forEach((attribute: Node) => {
 		if (attribute.type === 'Ref') {
+			if (!isValidIdentifier(attribute.name)) {
+				const suggestion = attribute.name.replace(/[^_$a-z0-9]/ig, '_').replace(/^\d/, '_$&');
+				
+				validator.error(attribute, {
+					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

@@ -4,6 +4,7 @@ import validate, { Validator } from '../index';
 import { Node } from '../../interfaces';
 import { dimensions } from '../../utils/patterns';
 import isVoidElementName from '../../utils/isVoidElementName';
+import isValidIdentifier from '../../utils/isValidIdentifier';
 
 const svg = /^(?:altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform|circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|filter|font|font-face|font-face-format|font-face-name|font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern|image|line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata|missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor|stop|switch|symbol|text|textPath|tref|tspan|unknown|use|view|vkern)$/;
 
@@ -82,9 +83,18 @@ export default function validateElement(
 
 	node.attributes.forEach((attribute: Node) => {
 		if (attribute.type === 'Ref') {
+			if (!isValidIdentifier(attribute.name)) {
+				const suggestion = attribute.name.replace(/[^_$a-z0-9]/ig, '_').replace(/^\d/, '_$&');
+				
+				validator.error(attribute, {
+					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 === 'Binding') {
 			const { name } = attribute;

test/validator/samples/reference-must-be-valid-name/errors.json

@@ -0,0 +1,15 @@
+[{
+  "message": "Reference name 'foo-bar' is invalid — must be a valid identifier such as foo_bar",
+  "start": {
+    "line": 1,
+    "column": 5,
+    "character": 5 
+  },
+  "end": {
+    "line": 1,
+    "column": 16,
+    "character": 16
+  },
+  "pos": 5,
+  "code": "invalid-reference-name"
+}]

test/validator/samples/reference-must-be-valid-name/input.html

@@ -0,0 +1,8 @@
+<div ref:foo-bar>
+</div>
+
+<style>
+	ref:foo-bar {
+		display: flex;
+	}
+</style>