error if method is an arrow function expression and uses this or `a…

…rguments` (#179)

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 );
+			}
+		}
 	});
 }

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;
+}

test/validator/method-arrow-no-this/errors.json

@@ -0,0 +1 @@
+[]

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>

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
+	}
+}]

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>