From 02afdb03fa950ac6aad663a3837179476b3e6d4d Mon Sep 17 00:00:00 2001
From: asweingarten <asweingarten@gmail.com>
Date: Thu, 11 Jan 2018 17:35:44 -0800
Subject: [PATCH] [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    |  2 ++
 .../js/utils/checkForValidIdentifiers.ts      | 21 +++++++++++++++++++
 .../errors.json                               |  8 +++++++
 .../input.html                                | 17 +++++++++++++++
 4 files changed, 48 insertions(+)
 create mode 100644 src/validate/js/utils/checkForValidIdentifiers.ts
 create mode 100644 test/validator/samples/properties-computed-must-be-valid-function-names/errors.json
 create mode 100644 test/validator/samples/properties-computed-must-be-valid-function-names/input.html

diff --git a/src/validate/js/propValidators/computed.ts b/src/validate/js/propValidators/computed.ts
index 644043ddb1..1bf3144c31 100644
--- a/src/validate/js/propValidators/computed.ts
+++ b/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)) {
diff --git a/src/validate/js/utils/checkForValidIdentifiers.ts b/src/validate/js/utils/checkForValidIdentifiers.ts
new file mode 100644
index 0000000000..2e5bdd08d6
--- /dev/null
+++ b/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);
+    }
+
+	});
+}
diff --git a/test/validator/samples/properties-computed-must-be-valid-function-names/errors.json b/test/validator/samples/properties-computed-must-be-valid-function-names/errors.json
new file mode 100644
index 0000000000..c5ad38b51d
--- /dev/null
+++ b/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
+}]
diff --git a/test/validator/samples/properties-computed-must-be-valid-function-names/input.html b/test/validator/samples/properties-computed-must-be-valid-function-names/input.html
new file mode 100644
index 0000000000..74ddb45b96
--- /dev/null
+++ b/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>