From f3a088038872fe6ee53711bb18d4cdb0bcf1b50b Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Sun, 11 Dec 2016 10:31:23 -0500
Subject: [PATCH] error if method is an arrow function expression and uses
 `this` or `arguments` (#179)

---
 src/validate/js/propValidators/methods.js     |  7 ++++++
 src/validate/js/utils/usesThisOrArguments.js  | 24 +++++++++++++++++++
 .../method-arrow-no-this/errors.json          |  1 +
 .../validator/method-arrow-no-this/input.html |  9 +++++++
 test/validator/method-arrow-this/errors.json  |  8 +++++++
 test/validator/method-arrow-this/input.html   | 11 +++++++++
 6 files changed, 60 insertions(+)
 create mode 100644 src/validate/js/utils/usesThisOrArguments.js
 create mode 100644 test/validator/method-arrow-no-this/errors.json
 create mode 100644 test/validator/method-arrow-no-this/input.html
 create mode 100644 test/validator/method-arrow-this/errors.json
 create mode 100644 test/validator/method-arrow-this/input.html

diff --git a/src/validate/js/propValidators/methods.js b/src/validate/js/propValidators/methods.js
index daa5bd662a..1a5ba5314b 100644
--- a/src/validate/js/propValidators/methods.js
+++ b/src/validate/js/propValidators/methods.js
@@ -1,5 +1,6 @@
 import checkForDupes from '../utils/checkForDupes.js';
 import checkForComputedKeys from '../utils/checkForComputedKeys.js';
+import usesThisOrArguments from '../utils/usesThisOrArguments.js';
 
 const builtin = {
 	set: true,
@@ -23,5 +24,11 @@ export default function methods ( validator, prop ) {
 		if ( builtin[ prop.key.name ] ) {
 			validator.error( `Cannot overwrite built-in method '${prop.key.name}'` );
 		}
+
+		if ( prop.value.type === 'ArrowFunctionExpression' ) {
+			if ( usesThisOrArguments( prop.value.body ) ) {
+				validator.error( `Method '${prop.key.name}' should be a function expression, not an arrow function expression`, prop.start );
+			}
+		}
 	});
 }
diff --git a/src/validate/js/utils/usesThisOrArguments.js b/src/validate/js/utils/usesThisOrArguments.js
new file mode 100644
index 0000000000..40fffc0a5c
--- /dev/null
+++ b/src/validate/js/utils/usesThisOrArguments.js
@@ -0,0 +1,24 @@
+import { walk } from 'estree-walker';
+import isReference from '../../../utils/isReference.js';
+
+export default function usesThisOrArguments ( node ) {
+	let result = false;
+
+	walk( node, {
+		enter ( node ) {
+			if ( result || node.type === 'FunctionExpression' || node.type === 'FunctionDeclaration' ) {
+				return this.skip();
+			}
+
+			if ( node.type === 'ThisExpression' ) {
+				result = true;
+			}
+
+			if ( node.type === 'Identifier' && isReference( node ) && node.name === 'arguments' ) {
+				result = true;
+			}
+		}
+	});
+
+	return result;
+}
diff --git a/test/validator/method-arrow-no-this/errors.json b/test/validator/method-arrow-no-this/errors.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/test/validator/method-arrow-no-this/errors.json
@@ -0,0 +1 @@
+[]
diff --git a/test/validator/method-arrow-no-this/input.html b/test/validator/method-arrow-no-this/input.html
new file mode 100644
index 0000000000..73349597f8
--- /dev/null
+++ b/test/validator/method-arrow-no-this/input.html
@@ -0,0 +1,9 @@
+<button on:click='foo()'></button>
+
+<script>
+	export default {
+		methods: {
+			foo: () => console.log( 'foo' )
+		}
+	};
+</script>
diff --git a/test/validator/method-arrow-this/errors.json b/test/validator/method-arrow-this/errors.json
new file mode 100644
index 0000000000..b6fa271105
--- /dev/null
+++ b/test/validator/method-arrow-this/errors.json
@@ -0,0 +1,8 @@
+[{
+	"message": "Method 'foo' should be a function expression, not an arrow function expression",
+	"pos": 79,
+	"loc": {
+		"line": 6,
+		"column": 3
+	}
+}]
diff --git a/test/validator/method-arrow-this/input.html b/test/validator/method-arrow-this/input.html
new file mode 100644
index 0000000000..2febe624f6
--- /dev/null
+++ b/test/validator/method-arrow-this/input.html
@@ -0,0 +1,11 @@
+<button on:click='foo()'></button>
+
+<script>
+	export default {
+		methods: {
+			foo: () => {
+				this.set({ a: 1 });
+			}
+		}
+	};
+</script>