eslint-plugin-mobx 0.0.9 → 0.0.11

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # eslint-plugin-mobx
 
+## 0.0.11
+
+### Patch Changes
+
+-   [`638533e592f4fda7663fa351447380f9d0917d14`](https://github.com/mobxjs/mobx/commit/638533e592f4fda7663fa351447380f9d0917d14) [#3909](https://github.com/mobxjs/mobx/pull/3909) Thanks [@urugator](https://github.com/urugator)! - mobx/missing-observer rule false positive with forwardRef #3908
+
+## 0.0.10
+
+### Patch Changes
+
+-   [`44a5fe07`](https://github.com/mobxjs/mobx/commit/44a5fe07fb95c2ba24d8df19f18b57ee92abb1a9) [#3881](https://github.com/mobxjs/mobx/pull/3881) Thanks [@kade-robertson](https://github.com/kade-robertson)! - Adds an option for the `mobx/exhaustive-make-observable` eslint rule to configure whether fields are annotated with `true` or `false` with the autofixer.
+
+    This option defaults to `true` if not present or an invalid value is received to maintain existing behavior.
+
 ## 0.0.9
 
 ### Patch Changes

package/README.md

@@ -35,10 +35,22 @@ module.exports = {
 ### mobx/exhaustive-make-observable
 
 Makes sure that `makeObservable` annotates all fields defined on class or object literal.<br>
-**Autofix** adds `field: true` for each missing field.<br>
 To exclude a field, annotate it using `field: false`.<br>
 Does not support fields introduced by constructor (`this.foo = 5`).<br>
-Does not warn about annotated non-existing fields (there is a runtime check, but the autofix removing the field could be handy...).
+Does not warn about annotated non-existing fields (there is a runtime check, but the autofix removing the field could be handy...).<br>
+**Autofix** adds `field: true` for each missing field by default. You can change this behaviour by specifying options in your eslint config:
+
+```json
+{
+    "rules": {
+        "mobx/exhaustive-make-observable": ["error", { "autofixAnnotation": false }]
+    }
+}
+```
+
+This is a boolean value that controls if the field is annotated with `true` or `false`.
+If you are migrating an existing project using `makeObservable` and do not want this rule to override
+your current usage (even if it may be wrong), you should run the autofix with the annotation set to `false` to maintain existing behaviour: `eslint --no-eslintrc --fix --rule='mobx/exhaustive-make-observable: [2, { "autofixAnnotation": false }]' .`
 
 ### mobx/missing-make-observable
 
@@ -85,6 +97,7 @@ It's a bit opinionated and can lead to a lot of false positives depending on you
 ### mobx/no-anonymous-observer (deprecated)
 
 _Deprecated in favor of [react/display-name](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/display-name.md) + [componentWrapperFunctions](https://github.com/jsx-eslint/eslint-plugin-react). Example of **.eslintrc**:_
+
 ```
 {
   "rules": {
@@ -97,9 +110,10 @@ _Deprecated in favor of [react/display-name](https://github.com/jsx-eslint/eslin
   }
 }
 ```
+
 ---
 
 Forbids anonymous functions or classes as `observer` components.
 Improves debugging experience and [avoids problem with inability to customize `displayName`](https://github.com/mobxjs/mobx/issues/2721).
-Plays nice with `eslint-plugin-react-hooks` and `mobx/missing-observer` as both of these don't not recognize anonymous function as component.
+Plays nice with `eslint-plugin-react-hooks` and `mobx/missing-observer` as both of these don't recognize anonymous function as component.
 **Autofix** infers the name from variable if possible.

package/dist/index.js

@@ -1,157 +1,134 @@
 'use strict';
 
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
 }
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
 }
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
 }
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
 }
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-
-function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-
-  var _s, _e;
-
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
     try {
-      if (!_n && _i["return"] != null) _i["return"]();
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
     } finally {
-      if (_d) throw _e;
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
     }
+    return a;
   }
-
-  return _arr;
 }
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-
 function _nonIterableSpread() {
   throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
 }
 
 var mobxDecorators = new Set(['observable', 'computed', 'action', 'flow', 'override']);
-
 function isMobxDecorator$2(decorator) {
   var _decorator$expression, _decorator$expression2;
-
   return mobxDecorators.has(decorator.expression.name) // @foo
   || mobxDecorators.has((_decorator$expression = decorator.expression.callee) === null || _decorator$expression === void 0 ? void 0 : _decorator$expression.name) // @foo()
   || mobxDecorators.has((_decorator$expression2 = decorator.expression.object) === null || _decorator$expression2 === void 0 ? void 0 : _decorator$expression2.name); // @foo.bar
 }
-
 function findAncestor$3(node, match) {
   var parent = node.parent;
   if (!parent) return;
   if (match(parent)) return parent;
   return findAncestor$3(parent, match);
 }
-
 var utils = {
   findAncestor: findAncestor$3,
   isMobxDecorator: isMobxDecorator$2
 };
 
 var findAncestor$2 = utils.findAncestor,
-    isMobxDecorator$1 = utils.isMobxDecorator; // TODO support this.foo = 5; in constructor
-// TODO? report on field as well
+  isMobxDecorator$1 = utils.isMobxDecorator;
 
+// TODO support this.foo = 5; in constructor
+// TODO? report on field as well
 function create$4(context) {
+  var _context$options$0$au, _context$options$;
   var sourceCode = context.getSourceCode();
-
+  var autofixAnnotation = (_context$options$0$au = (_context$options$ = context.options[0]) === null || _context$options$ === void 0 ? void 0 : _context$options$.autofixAnnotation) !== null && _context$options$0$au !== void 0 ? _context$options$0$au : true;
   function fieldToKey(field) {
     // TODO cache on field?
     var key = sourceCode.getText(field.key);
     return field.computed ? "[".concat(key, "]") : key;
   }
-
   return {
     'CallExpression[callee.name="makeObservable"]': function CallExpressionCalleeNameMakeObservable(makeObservable) {
       // Only interested about makeObservable(this, ...) in constructor or makeObservable({}, ...)
-      // ClassDeclaration 
+      // ClassDeclaration
       //   ClassBody
       //     MethodDefinition[kind="constructor"]
       //       FunctionExpression
       //         BlockStatement
       //           ExpressionStatement
-      //             CallExpression[callee.name="makeObservable"]        
+      //             CallExpression[callee.name="makeObservable"]
       var _makeObservable$argum = _slicedToArray(makeObservable.arguments, 2),
-          firstArg = _makeObservable$argum[0],
-          secondArg = _makeObservable$argum[1];
-
+        firstArg = _makeObservable$argum[0],
+        secondArg = _makeObservable$argum[1];
       if (!firstArg) return;
       var members;
-
-      if (firstArg.type === 'ThisExpression') {
+      if (firstArg.type === "ThisExpression") {
         var _closestFunction$pare;
-
         var closestFunction = findAncestor$2(makeObservable, function (node) {
-          return node.type === 'FunctionExpression' || node.type === 'FunctionDeclaration';
+          return node.type === "FunctionExpression" || node.type === "FunctionDeclaration";
         });
-        if ((closestFunction === null || closestFunction === void 0 ? void 0 : (_closestFunction$pare = closestFunction.parent) === null || _closestFunction$pare === void 0 ? void 0 : _closestFunction$pare.kind) !== 'constructor') return;
+        if ((closestFunction === null || closestFunction === void 0 || (_closestFunction$pare = closestFunction.parent) === null || _closestFunction$pare === void 0 ? void 0 : _closestFunction$pare.kind) !== "constructor") return;
         members = closestFunction.parent.parent.parent.body.body;
-      } else if (firstArg.type === 'ObjectExpression') {
+      } else if (firstArg.type === "ObjectExpression") {
         members = firstArg.properties;
       } else {
         return;
       }
-
       var annotationProps = (secondArg === null || secondArg === void 0 ? void 0 : secondArg.properties) || [];
       var nonAnnotatedMembers = [];
       var hasAnyDecorator = false;
       members.forEach(function (member) {
         var _member$decorators;
-
         if (member["static"]) return;
-        if (member.kind === "constructor") return; //if (member.type !== 'MethodDefinition' && member.type !== 'ClassProperty') return;                    
-
+        if (member.kind === "constructor") return;
+        //if (member.type !== 'MethodDefinition' && member.type !== 'ClassProperty') return;
         hasAnyDecorator = hasAnyDecorator || ((_member$decorators = member.decorators) === null || _member$decorators === void 0 ? void 0 : _member$decorators.some(isMobxDecorator$1)) || false;
-
         if (!annotationProps.some(function (prop) {
           return fieldToKey(prop) === fieldToKey(member);
         })) {
@@ -162,46 +139,42 @@ function create$4(context) {
       /*
       // With decorators, second arg must be null/undefined or not provided
       if (hasAnyDecorator && secondArg && secondArg.name !== "undefined" && secondArg.value !== null) {
-        context.report({
-          node: makeObservable,
-          message: 'When using decorators, second arg must be `null`, `undefined` or not provided.',
-        })
+      context.report({
+      node: makeObservable,
+      message: 'When using decorators, second arg must be `null`, `undefined` or not provided.',
+      })
       }
       // Without decorators, in constructor, second arg must be object literal
       if (!hasAnyDecorator && firstArg.type === 'ThisExpression' && (!secondArg || secondArg.type !== 'ObjectExpression')) {
-        context.report({
-          node: makeObservable,
-          message: 'Second argument must be object in form of `{ key: annotation }`.',
-        })
+      context.report({
+      node: makeObservable,
+      message: 'Second argument must be object in form of `{ key: annotation }`.',
+      })
       }
       */
 
       if (!hasAnyDecorator && nonAnnotatedMembers.length) {
         // Set avoids reporting twice for setter+getter pair or actual duplicates
         var keys = _toConsumableArray(new Set(nonAnnotatedMembers.map(fieldToKey)));
-
         var keyList = keys.map(function (key) {
           return "`".concat(key, "`");
-        }).join(', ');
-
+        }).join(", ");
         var fix = function fix(fixer) {
           var annotationList = keys.map(function (key) {
-            return "".concat(key, ": true");
-          }).join(', ') + ',';
-
+            return "".concat(key, ": ").concat(autofixAnnotation);
+          }).join(", ") + ",";
           if (!secondArg) {
             return fixer.insertTextAfter(firstArg, ", { ".concat(annotationList, " }"));
-          } else if (secondArg.type !== 'ObjectExpression') {
+          } else if (secondArg.type !== "ObjectExpression") {
             return fixer.replaceText(secondArg, "{ ".concat(annotationList, " }"));
           } else {
             var openingBracket = sourceCode.getFirstToken(secondArg);
             return fixer.insertTextAfter(openingBracket, " ".concat(annotationList, " "));
           }
         };
-
         context.report({
           node: makeObservable,
-          messageId: 'missingAnnotation',
+          messageId: "missingAnnotation",
           data: {
             keyList: keyList
           },
@@ -211,46 +184,50 @@ function create$4(context) {
     }
   };
 }
-
 var exhaustiveMakeObservable$1 = {
   meta: {
-    type: 'suggestion',
-    fixable: 'code',
+    type: "suggestion",
+    fixable: "code",
+    schema: [{
+      type: "object",
+      properties: {
+        autofixAnnotation: {
+          type: "boolean"
+        }
+      },
+      additionalProperties: false
+    }],
     docs: {
-      description: 'enforce all fields being listen in `makeObservable`',
+      description: "enforce all fields being listen in `makeObservable`",
       recommended: true,
       suggestion: false
     },
     messages: {
-      'missingAnnotation': 'Missing annotation for {{ keyList }}. To exclude a field, use `false` as annotation.'
+      missingAnnotation: "Missing annotation for {{ keyList }}. To exclude a field, use `false` as annotation."
     }
   },
   create: create$4
 };
 
 var findAncestor$1 = utils.findAncestor;
-
 function create$3(context) {
   return {
     'CallExpression[callee.name=/(makeObservable|makeAutoObservable)/]': function CallExpressionCalleeNameMakeObservableMakeAutoObservable(makeObservable) {
       var _closestFunction$pare;
-
       // Only iterested about makeObservable(this, ...) inside constructor and not inside nested bindable function
       var _makeObservable$argum = _slicedToArray(makeObservable.arguments, 1),
-          firstArg = _makeObservable$argum[0];
-
+        firstArg = _makeObservable$argum[0];
       if (!firstArg) return;
-      if (firstArg.type !== 'ThisExpression') return; //     MethodDefinition[key.name="constructor"][kind="constructor"]
+      if (firstArg.type !== 'ThisExpression') return;
+      //     MethodDefinition[key.name="constructor"][kind="constructor"]
       //       FunctionExpression
       //         BlockStatement
       //           ExpressionStatement
       //             CallExpression[callee.name="makeObservable"]
-
       var closestFunction = findAncestor$1(makeObservable, function (node) {
         return node.type === 'FunctionExpression' || node.type === 'FunctionDeclaration';
       });
-      if ((closestFunction === null || closestFunction === void 0 ? void 0 : (_closestFunction$pare = closestFunction.parent) === null || _closestFunction$pare === void 0 ? void 0 : _closestFunction$pare.kind) !== 'constructor') return;
-
+      if ((closestFunction === null || closestFunction === void 0 || (_closestFunction$pare = closestFunction.parent) === null || _closestFunction$pare === void 0 ? void 0 : _closestFunction$pare.kind) !== 'constructor') return;
       if (makeObservable.parent.parent.parent !== closestFunction) {
         context.report({
           node: makeObservable,
@@ -263,7 +240,6 @@ function create$3(context) {
     }
   };
 }
-
 var unconditionalMakeObservable$1 = {
   meta: {
     type: 'problem',
@@ -279,38 +255,32 @@ var unconditionalMakeObservable$1 = {
 };
 
 var findAncestor = utils.findAncestor,
-    isMobxDecorator = utils.isMobxDecorator;
-
+  isMobxDecorator = utils.isMobxDecorator;
 function create$2(context) {
   var sourceCode = context.getSourceCode();
   return {
     'Decorator': function Decorator(decorator) {
-      var _clazz$body$body$find, _constructor$value$bo, _constructor$value$bo2;
-
+      var _clazz$body$body$find, _constructor$value$bo;
       if (!isMobxDecorator(decorator)) return;
       var clazz = findAncestor(decorator, function (node) {
         return node.type === 'ClassDeclaration' || node.type === 'ClassExpression';
       });
-      if (!clazz) return; // ClassDeclaration > ClassBody > []
-
+      if (!clazz) return;
+      // ClassDeclaration > ClassBody > []
       var constructor = (_clazz$body$body$find = clazz.body.body.find(function (node) {
         return node.kind === 'constructor' && node.value.type === 'FunctionExpression';
       })) !== null && _clazz$body$body$find !== void 0 ? _clazz$body$body$find : clazz.body.body.find(function (node) {
         return node.kind === 'constructor';
-      }); // MethodDefinition > FunctionExpression > BlockStatement > []
-
+      });
+      // MethodDefinition > FunctionExpression > BlockStatement > []
       var isMakeObservable = function isMakeObservable(node) {
-        var _node$expression, _node$expression$call, _node$expression2, _node$expression2$arg;
-
-        return ((_node$expression = node.expression) === null || _node$expression === void 0 ? void 0 : (_node$expression$call = _node$expression.callee) === null || _node$expression$call === void 0 ? void 0 : _node$expression$call.name) === 'makeObservable' && ((_node$expression2 = node.expression) === null || _node$expression2 === void 0 ? void 0 : (_node$expression2$arg = _node$expression2.arguments[0]) === null || _node$expression2$arg === void 0 ? void 0 : _node$expression2$arg.type) === 'ThisExpression';
+        var _node$expression, _node$expression2;
+        return ((_node$expression = node.expression) === null || _node$expression === void 0 || (_node$expression = _node$expression.callee) === null || _node$expression === void 0 ? void 0 : _node$expression.name) === 'makeObservable' && ((_node$expression2 = node.expression) === null || _node$expression2 === void 0 || (_node$expression2 = _node$expression2.arguments[0]) === null || _node$expression2 === void 0 ? void 0 : _node$expression2.type) === 'ThisExpression';
       };
-
-      var makeObservable = constructor === null || constructor === void 0 ? void 0 : (_constructor$value$bo = constructor.value.body) === null || _constructor$value$bo === void 0 ? void 0 : (_constructor$value$bo2 = _constructor$value$bo.body.find(isMakeObservable)) === null || _constructor$value$bo2 === void 0 ? void 0 : _constructor$value$bo2.expression;
-
+      var makeObservable = constructor === null || constructor === void 0 || (_constructor$value$bo = constructor.value.body) === null || _constructor$value$bo === void 0 || (_constructor$value$bo = _constructor$value$bo.body.find(isMakeObservable)) === null || _constructor$value$bo === void 0 ? void 0 : _constructor$value$bo.expression;
       if (makeObservable) {
         // make sure second arg is nullish
         var secondArg = makeObservable.arguments[1];
-
         if (secondArg && secondArg.value !== null && secondArg.name !== 'undefined') {
           context.report({
             node: makeObservable,
@@ -326,7 +296,6 @@ function create$2(context) {
           } else if (constructor) {
             // constructor() {}
             var _closingBracket = sourceCode.getLastToken(constructor.value.body);
-
             return fixer.insertTextBefore(_closingBracket, ';makeObservable(this);');
           } else {
             // class C {}
@@ -334,7 +303,6 @@ function create$2(context) {
             return fixer.insertTextAfter(openingBracket, '\nconstructor() { makeObservable(this); }');
           }
         };
-
         context.report({
           node: clazz,
           messageId: 'missingMakeObservable',
@@ -344,7 +312,6 @@ function create$2(context) {
     }
   };
 }
-
 var missingMakeObservable$1 = {
   meta: {
     type: 'problem',
@@ -365,52 +332,63 @@ var missingMakeObservable$1 = {
 function create$1(context) {
   var sourceCode = context.getSourceCode();
   return {
-    'FunctionDeclaration,FunctionExpression,ArrowFunctionExpression,ClassDeclaration,ClassExpression': function FunctionDeclarationFunctionExpressionArrowFunctionExpressionClassDeclarationClassExpression(cmp) {
-      var _cmp$id, _cmp$parent;
-
-      // Already has observer
-      if (cmp.parent && cmp.parent.type === 'CallExpression' && cmp.parent.callee.name === 'observer') return;
-      var name = (_cmp$id = cmp.id) === null || _cmp$id === void 0 ? void 0 : _cmp$id.name; // If anonymous try to infer name from variable declaration      
-
-      if (!name && ((_cmp$parent = cmp.parent) === null || _cmp$parent === void 0 ? void 0 : _cmp$parent.type) === 'VariableDeclarator') {
-        name = cmp.parent.id.name;
+    "FunctionDeclaration,FunctionExpression,ArrowFunctionExpression,ClassDeclaration,ClassExpression": function FunctionDeclarationFunctionExpressionArrowFunctionExpressionClassDeclarationClassExpression(cmp) {
+      var _cmp$id, _cmpOrForwardRef$pare;
+      if (cmp.parent && cmp.parent.type === "CallExpression" && cmp.parent.callee.name === "observer") {
+        // observer(...)
+        return;
       }
-
-      if (cmp.type.startsWith('Class')) {
+      var forwardRef = cmp.parent && cmp.parent.type === "CallExpression" && cmp.parent.callee.name === "forwardRef" ? cmp.parent : undefined;
+      if (forwardRef && forwardRef.parent && forwardRef.parent.type === "CallExpression" && forwardRef.parent.callee.name === "observer") {
+        // forwardRef(observer(...))
+        return;
+      }
+      var cmpOrForwardRef = forwardRef || cmp;
+      var name = (_cmp$id = cmp.id) === null || _cmp$id === void 0 ? void 0 : _cmp$id.name;
+      // If anonymous try to infer name from variable declaration
+      if (!name && ((_cmpOrForwardRef$pare = cmpOrForwardRef.parent) === null || _cmpOrForwardRef$pare === void 0 ? void 0 : _cmpOrForwardRef$pare.type) === "VariableDeclarator") {
+        name = cmpOrForwardRef.parent.id.name;
+      }
+      if (cmp.type.startsWith("Class")) {
         // Must extend Component or React.Component
         var superClass = cmp.superClass;
-        if (!superClass) return;
+        if (!superClass) {
+          // not a component
+          return;
+        }
         var superClassText = sourceCode.getText(superClass);
-        if (superClassText !== 'Component' && superClassText !== 'React.Component') return;
+        if (superClassText !== "Component" && superClassText !== "React.Component") {
+          // not a component
+          return;
+        }
       } else {
         var _name;
-
         // Name must start with uppercase letter
-        if (!((_name = name) !== null && _name !== void 0 && _name.charAt(0).match(/^[A-Z]$/))) return;
+        if (!((_name = name) !== null && _name !== void 0 && _name.charAt(0).match(/^[A-Z]$/))) {
+          // not a component
+          return;
+        }
       }
-
       var fix = function fix(fixer) {
-        return [fixer.insertTextBefore(sourceCode.getFirstToken(cmp), (name && cmp.type.endsWith('Declaration') ? "const ".concat(name, " = ") : '') + 'observer('), fixer.insertTextAfter(sourceCode.getLastToken(cmp), ')')];
+        return [fixer.insertTextBefore(sourceCode.getFirstToken(cmpOrForwardRef), (name && cmp.type.endsWith("Declaration") ? "const ".concat(name, " = ") : "") + "observer("), fixer.insertTextAfter(sourceCode.getLastToken(cmpOrForwardRef), ")")];
       };
-
       context.report({
         node: cmp,
-        messageId: 'missingObserver',
+        messageId: "missingObserver",
         data: {
-          name: name || '<anonymous>'
+          name: name || "<anonymous>"
         },
         fix: fix
       });
     }
   };
 }
-
 var missingObserver$1 = {
   meta: {
-    type: 'problem',
-    fixable: 'code',
+    type: "problem",
+    fixable: "code",
     docs: {
-      description: 'prevents missing `observer` on react component',
+      description: "prevents missing `observer` on react component",
       recommended: true
     },
     messages: {
@@ -425,40 +403,31 @@ function create(context) {
   return {
     'CallExpression[callee.name="observer"]': function CallExpressionCalleeNameObserver(observer) {
       var _cmp$id;
-
       var cmp = observer.arguments[0];
       if (!cmp) return;
       if (cmp !== null && cmp !== void 0 && (_cmp$id = cmp.id) !== null && _cmp$id !== void 0 && _cmp$id.name) return;
-
       var fix = function fix(fixer) {
         var _observer$parent;
-
         // Use name from variable for autofix
         var name = ((_observer$parent = observer.parent) === null || _observer$parent === void 0 ? void 0 : _observer$parent.type) === "VariableDeclarator" ? observer.parent.id.name : undefined;
         if (!name) return;
-
         if (cmp.type === "ArrowFunctionExpression") {
           var arrowToken = sourceCode.getTokenBefore(cmp.body);
           var fixes = [fixer.replaceText(arrowToken, ""), fixer.insertTextBefore(cmp, "function ".concat(name))];
-
           if (cmp.body.type !== "BlockStatement") {
             fixes.push(fixer.insertTextBefore(cmp.body, "{ return "), fixer.insertTextAfter(cmp.body, " }"));
           }
-
           return fixes;
         }
-
         if (cmp.type === "FunctionExpression") {
           var functionToken = sourceCode.getFirstToken(cmp);
           return fixer.replaceText(functionToken, "function ".concat(name));
         }
-
         if (cmp.type === "ClassExpression") {
           var classToken = sourceCode.getFirstToken(cmp);
           return fixer.replaceText(classToken, "class ".concat(name));
         }
       };
-
       context.report({
         node: cmp,
         messageId: "observerComponentMustHaveName",
@@ -467,7 +436,6 @@ function create(context) {
     }
   };
 }
-
 var noAnonymousObserver$1 = {
   meta: {
     type: "problem",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "eslint-plugin-mobx",
-    "version": "0.0.9",
+    "version": "0.0.11",
     "description": "ESLint rules for MobX",
     "main": "dist/index.js",
     "repository": {
@@ -28,8 +28,8 @@
         "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
     },
     "devDependencies": {
-        "@typescript-eslint/eslint-plugin": "^4.29.3",
-        "@typescript-eslint/parser": "^4.0.0",
+        "@typescript-eslint/eslint-plugin": "^5.0.0",
+        "@typescript-eslint/parser": "^5.0.0",
         "eslint": "^7.0.0",
         "@babel/core": "^7.16.0",
         "@babel/preset-env": "^7.16.4",
@@ -47,6 +47,6 @@
     "scripts": {
         "test": "jest",
         "build": "yarn rollup --config",
-        "prepublish": "yarn build"
+        "prepublishOnly": "yarn build"
     }
 }

package/src/exhaustive-make-observable.js

@@ -1,55 +1,62 @@
-'use strict';
+"use strict"
 
-const { findAncestor, isMobxDecorator } = require('./utils.js');
+const { findAncestor, isMobxDecorator } = require("./utils.js")
 
 // TODO support this.foo = 5; in constructor
 // TODO? report on field as well
 function create(context) {
-  const sourceCode = context.getSourceCode();
+    const sourceCode = context.getSourceCode()
+    const autofixAnnotation = context.options[0]?.autofixAnnotation ?? true
 
-  function fieldToKey(field) {
-    // TODO cache on field?
-    const key = sourceCode.getText(field.key);
-    return field.computed ? `[${key}]` : key;
-  }
+    function fieldToKey(field) {
+        // TODO cache on field?
+        const key = sourceCode.getText(field.key)
+        return field.computed ? `[${key}]` : key
+    }
 
-  return {
-    'CallExpression[callee.name="makeObservable"]': makeObservable => {
-      // Only interested about makeObservable(this, ...) in constructor or makeObservable({}, ...)
-      // ClassDeclaration 
-      //   ClassBody
-      //     MethodDefinition[kind="constructor"]
-      //       FunctionExpression
-      //         BlockStatement
-      //           ExpressionStatement
-      //             CallExpression[callee.name="makeObservable"]        
-      const [firstArg, secondArg] = makeObservable.arguments;
-      if (!firstArg) return;
-      let members;
-      if (firstArg.type === 'ThisExpression') {
-        const closestFunction = findAncestor(makeObservable, node => node.type === 'FunctionExpression' || node.type === 'FunctionDeclaration')
-        if (closestFunction?.parent?.kind !== 'constructor') return;
-        members = closestFunction.parent.parent.parent.body.body;
-      } else if (firstArg.type === 'ObjectExpression') {
-        members = firstArg.properties;
-      } else {
-        return;
-      }
+    return {
+        'CallExpression[callee.name="makeObservable"]': makeObservable => {
+            // Only interested about makeObservable(this, ...) in constructor or makeObservable({}, ...)
+            // ClassDeclaration
+            //   ClassBody
+            //     MethodDefinition[kind="constructor"]
+            //       FunctionExpression
+            //         BlockStatement
+            //           ExpressionStatement
+            //             CallExpression[callee.name="makeObservable"]
+            const [firstArg, secondArg] = makeObservable.arguments
+            if (!firstArg) return
+            let members
+            if (firstArg.type === "ThisExpression") {
+                const closestFunction = findAncestor(
+                    makeObservable,
+                    node =>
+                        node.type === "FunctionExpression" || node.type === "FunctionDeclaration"
+                )
+                if (closestFunction?.parent?.kind !== "constructor") return
+                members = closestFunction.parent.parent.parent.body.body
+            } else if (firstArg.type === "ObjectExpression") {
+                members = firstArg.properties
+            } else {
+                return
+            }
 
-      const annotationProps = secondArg?.properties || [];
-      const nonAnnotatedMembers = [];
-      let hasAnyDecorator = false;
+            const annotationProps = secondArg?.properties || []
+            const nonAnnotatedMembers = []
+            let hasAnyDecorator = false
 
-      members.forEach(member => {
-        if (member.static) return;
-        if (member.kind === "constructor") return;
-        //if (member.type !== 'MethodDefinition' && member.type !== 'ClassProperty') return;                    
-        hasAnyDecorator = hasAnyDecorator || member.decorators?.some(isMobxDecorator) || false;
-        if (!annotationProps.some(prop => fieldToKey(prop) === fieldToKey(member))) { // TODO optimize?
-          nonAnnotatedMembers.push(member);
-        }
-      })
-      /*
+            members.forEach(member => {
+                if (member.static) return
+                if (member.kind === "constructor") return
+                //if (member.type !== 'MethodDefinition' && member.type !== 'ClassProperty') return;
+                hasAnyDecorator =
+                    hasAnyDecorator || member.decorators?.some(isMobxDecorator) || false
+                if (!annotationProps.some(prop => fieldToKey(prop) === fieldToKey(member))) {
+                    // TODO optimize?
+                    nonAnnotatedMembers.push(member)
+                }
+            })
+            /*
       // With decorators, second arg must be null/undefined or not provided
       if (hasAnyDecorator && secondArg && secondArg.name !== "undefined" && secondArg.value !== null) {
         context.report({
@@ -66,46 +73,59 @@ function create(context) {
       }
       */
 
-      if (!hasAnyDecorator && nonAnnotatedMembers.length) {
-        // Set avoids reporting twice for setter+getter pair or actual duplicates
-        const keys = [...new Set(nonAnnotatedMembers.map(fieldToKey))];
-        const keyList = keys.map(key => `\`${key}\``).join(', ');
+            if (!hasAnyDecorator && nonAnnotatedMembers.length) {
+                // Set avoids reporting twice for setter+getter pair or actual duplicates
+                const keys = [...new Set(nonAnnotatedMembers.map(fieldToKey))]
+                const keyList = keys.map(key => `\`${key}\``).join(", ")
 
-        const fix = fixer => {
-          const annotationList = keys.map(key => `${key}: true`).join(', ') + ',';
-          if (!secondArg) {
-            return fixer.insertTextAfter(firstArg, `, { ${annotationList} }`);
-          } else if (secondArg.type !== 'ObjectExpression') {
-            return fixer.replaceText(secondArg, `{ ${annotationList} }`);
-          } else {
-            const openingBracket = sourceCode.getFirstToken(secondArg)
-            return fixer.insertTextAfter(openingBracket, ` ${annotationList} `);
-          }
-        };
+                const fix = fixer => {
+                    const annotationList =
+                        keys.map(key => `${key}: ${autofixAnnotation}`).join(", ") + ","
+                    if (!secondArg) {
+                        return fixer.insertTextAfter(firstArg, `, { ${annotationList} }`)
+                    } else if (secondArg.type !== "ObjectExpression") {
+                        return fixer.replaceText(secondArg, `{ ${annotationList} }`)
+                    } else {
+                        const openingBracket = sourceCode.getFirstToken(secondArg)
+                        return fixer.insertTextAfter(openingBracket, ` ${annotationList} `)
+                    }
+                }
 
-        context.report({
-          node: makeObservable,
-          messageId: 'missingAnnotation',
-          data: { keyList },
-          fix,
-        })
-      }
-    },
-  };
+                context.report({
+                    node: makeObservable,
+                    messageId: "missingAnnotation",
+                    data: { keyList },
+                    fix
+                })
+            }
+        }
+    }
 }
 
 module.exports = {
-  meta: {
-    type: 'suggestion',
-    fixable: 'code',
-    docs: {
-      description: 'enforce all fields being listen in `makeObservable`',
-      recommended: true,
-      suggestion: false,
-    },
-    messages: {
-      'missingAnnotation': 'Missing annotation for {{ keyList }}. To exclude a field, use `false` as annotation.',
+    meta: {
+        type: "suggestion",
+        fixable: "code",
+        schema: [
+            {
+                type: "object",
+                properties: {
+                    autofixAnnotation: {
+                        type: "boolean"
+                    }
+                },
+                additionalProperties: false
+            }
+        ],
+        docs: {
+            description: "enforce all fields being listen in `makeObservable`",
+            recommended: true,
+            suggestion: false
+        },
+        messages: {
+            missingAnnotation:
+                "Missing annotation for {{ keyList }}. To exclude a field, use `false` as annotation."
+        }
     },
-  },
-  create,
-};
+    create
+}

package/src/missing-observer.js

@@ -1,63 +1,94 @@
-'use strict';
+"use strict"
 
 function create(context) {
-  const sourceCode = context.getSourceCode();
+    const sourceCode = context.getSourceCode()
 
-  return {
-    'FunctionDeclaration,FunctionExpression,ArrowFunctionExpression,ClassDeclaration,ClassExpression': cmp => {
-      // Already has observer
-      if (cmp.parent && cmp.parent.type === 'CallExpression' && cmp.parent.callee.name === 'observer') return;
-      let name = cmp.id?.name;
-      // If anonymous try to infer name from variable declaration      
-      if (!name && cmp.parent?.type === 'VariableDeclarator') {
-        name = cmp.parent.id.name;
-      }
-      if (cmp.type.startsWith('Class')) {
-        // Must extend Component or React.Component
-        const { superClass } = cmp;
-        if (!superClass) return;
-        const superClassText = sourceCode.getText(superClass);
-        if (superClassText !== 'Component' && superClassText !== 'React.Component') return;
-      } else {
-        // Name must start with uppercase letter
-        if (!name?.charAt(0).match(/^[A-Z]$/)) return;
-      }
+    return {
+        "FunctionDeclaration,FunctionExpression,ArrowFunctionExpression,ClassDeclaration,ClassExpression":
+            cmp => {
+                if (
+                    cmp.parent &&
+                    cmp.parent.type === "CallExpression" &&
+                    cmp.parent.callee.name === "observer"
+                ) {
+                    // observer(...)
+                    return
+                }
+                let forwardRef =
+                    cmp.parent &&
+                    cmp.parent.type === "CallExpression" &&
+                    cmp.parent.callee.name === "forwardRef"
+                        ? cmp.parent
+                        : undefined
+                if (
+                    forwardRef &&
+                    forwardRef.parent &&
+                    forwardRef.parent.type === "CallExpression" &&
+                    forwardRef.parent.callee.name === "observer"
+                ) {
+                    // forwardRef(observer(...))
+                    return
+                }
 
-      const fix = fixer => {
-        return [
-          fixer.insertTextBefore(
-            sourceCode.getFirstToken(cmp),
-            (name && cmp.type.endsWith('Declaration') ? `const ${name} = ` : '') + 'observer(',
-          ),
-          fixer.insertTextAfter(
-            sourceCode.getLastToken(cmp),
-            ')',
-          ),
-        ]
-      }
-      context.report({
-        node: cmp,
-        messageId: 'missingObserver',
-        data: {
-          name: name || '<anonymous>',
-        },
-        fix,
-      })
-    },
-  };
+                const cmpOrForwardRef = forwardRef || cmp
+                let name = cmp.id?.name
+                // If anonymous try to infer name from variable declaration
+                if (!name && cmpOrForwardRef.parent?.type === "VariableDeclarator") {
+                    name = cmpOrForwardRef.parent.id.name
+                }
+                if (cmp.type.startsWith("Class")) {
+                    // Must extend Component or React.Component
+                    const { superClass } = cmp
+                    if (!superClass) {
+                        // not a component
+                        return
+                    }
+                    const superClassText = sourceCode.getText(superClass)
+                    if (superClassText !== "Component" && superClassText !== "React.Component") {
+                        // not a component
+                        return
+                    }
+                } else {
+                    // Name must start with uppercase letter
+                    if (!name?.charAt(0).match(/^[A-Z]$/)) {
+                        // not a component
+                        return
+                    }
+                }
+
+                const fix = fixer => {
+                    return [
+                        fixer.insertTextBefore(
+                            sourceCode.getFirstToken(cmpOrForwardRef),
+                            (name && cmp.type.endsWith("Declaration") ? `const ${name} = ` : "") +
+                                "observer("
+                        ),
+                        fixer.insertTextAfter(sourceCode.getLastToken(cmpOrForwardRef), ")")
+                    ]
+                }
+                context.report({
+                    node: cmp,
+                    messageId: "missingObserver",
+                    data: {
+                        name: name || "<anonymous>"
+                    },
+                    fix
+                })
+            }
+    }
 }
 
 module.exports = {
-  meta: {
-    type: 'problem',
-    fixable: 'code',
-    docs: {
-      description: 'prevents missing `observer` on react component',
-      recommended: true,
-    },
-    messages: {
-      missingObserver: "Component `{{ name }}` is missing `observer`.",
+    meta: {
+        type: "problem",
+        fixable: "code",
+        docs: {
+            description: "prevents missing `observer` on react component",
+            recommended: true
+        },
+        messages: {
+            missingObserver: "Component `{{ name }}` is missing `observer`."
+        }
     },
-  },
-  create,
-};
+    create
+}