[1083] Svelte should throw a compile time error when illegal characte…

src/validate/js/propValidators/computed.ts

@@ -1,5 +1,6 @@
 import checkForDupes from '../utils/checkForDupes';
 import checkForComputedKeys from '../utils/checkForComputedKeys';
+import checkForValidIdentifiers from '../utils/checkForValidIdentifiers';
 import { Validator } from '../../';
 import { Node } from '../../../interfaces';
 import walkThroughTopFunctionScope from '../../../utils/walkThroughTopFunctionScope';
@@ -20,6 +21,7 @@ export default function computed(validator: Validator, prop: Node) {
 
 	checkForDupes(validator, prop.value.properties);
 	checkForComputedKeys(validator, prop.value.properties);
+  checkForValidIdentifiers(validator, prop.value.properties);
 
 	prop.value.properties.forEach((computation: Node) => {
 		if (!isFunctionExpression.has(computation.value.type)) {

src/validate/js/utils/checkForValidIdentifiers.ts

@@ -0,0 +1,21 @@
+import { Validator } from '../../';
+import { Node } from '../../../interfaces';
+import getName from '../../../utils/getName';
+import { parse } from 'acorn';
+
+export default function checkForValidIdentifiers(
+	validator: Validator,
+	properties: Node[]
+) {
+	properties.forEach(prop => {
+    const name = getName(prop.key);
+    const functionDefinitionString = `function ${name}() {}`;
+    try {
+      parse(functionDefinitionString);
+    } catch(exception) {
+      const invalidCharacter = functionDefinitionString[exception.pos]
+      validator.error(`Computed property name "${name}" is invalid. Character '${invalidCharacter}' at position ${exception.pos} is illegal in function identifiers`, prop.start);
+    }
+
+	});
+}

test/validator/samples/properties-computed-must-be-valid-function-names/errors.json

@@ -0,0 +1,8 @@
+[{
+	"message": "Computed property name \"hours-hyphen\" is invalid. Character '-' at position 14 is illegal in function identifiers",
+	"loc": {
+		"line": 14,
+		"column": 6
+	},
+	"pos": 172
+}]

test/validator/samples/properties-computed-must-be-valid-function-names/input.html

@@ -0,0 +1,17 @@
+<p>
+  The hour is
+  <strong>{{hours}}</strong>
+</p>
+
+<script>
+  export default {
+    data() {
+      return {
+        time: new Date()
+      };
+    },
+    computed: {
+      "hours-hyphen": time => time.getHours()
+    }
+  };
+</script>