[1083] Svelte should throw a compile time error when illegal characters are used in computed names

Approach:
  For each property name, construct a string that defines a function and see if parsing that string with Acorn throws an exception.
  If it does, assemble an informative error message that states which property is invalid, the first invalid character, and the location of that character within the name.

Changes to codebase:
- Added new validator test
"properties-computed-must-be-valid-function-names"
- Added new check into src/validate/js/propValidators/computed.ts,
"checkForValidIdentifiers"
  - this check was added to
  src/validate/js/utils/checkForValidIdentifiers.ts like the other
  checks in "computed.ts"

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>