eslint-plugin-mobx 0.0.10 → 0.0.12

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # eslint-plugin-mobx
 
+## 0.0.12
+
+### Patch Changes
+
+-   [`218ebde877712775054e027cfda812210d2aa7d6`](https://github.com/mobxjs/mobx/commit/218ebde877712775054e027cfda812210d2aa7d6) [#3942](https://github.com/mobxjs/mobx/pull/3942) Thanks [@dartess](https://github.com/dartess)! - add eslint@9 support and flat config
+
+## 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

package/README.md

@@ -10,6 +10,8 @@ npm install --save-dev eslint @typescript-eslint/parser eslint-plugin-mobx
 
 ## Configuration
 
+### Legacy Config
+
 ```javascript
 // .eslintrc.js
 module.exports = {
@@ -24,12 +26,37 @@ module.exports = {
         "mobx/exhaustive-make-observable": "warn",
         "mobx/unconditional-make-observable": "error",
         "mobx/missing-make-observable": "error",
-        "mobx/missing-observer": "warn",
-        "mobx/no-anonymous-observer": "warn"
+        "mobx/missing-observer": "warn"
     }
 }
 ```
 
+### Flat Config
+
+```javascript
+// eslint.config.js
+import pluginMobx from "eslint-plugin-mobx"
+
+export default [
+    // ...
+
+    // Either extend our recommended configuration:
+    pluginMobx.flatConfigs.recommended,
+
+    // ...or specify and customize individual rules:
+    {
+        plugins: { mobx: pluginMobx },
+        rules: {
+            // these values are the same as recommended
+            "mobx/exhaustive-make-observable": "warn",
+            "mobx/unconditional-make-observable": "error",
+            "mobx/missing-make-observable": "error",
+            "mobx/missing-observer": "warn"
+        }
+    }
+]
+```
+
 ## Rules
 
 ### mobx/exhaustive-make-observable

package/dist/index.js

@@ -1,65 +1,115 @@
 'use strict';
 
-function _iterableToArrayLimit(arr, i) {
-  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
-  if (null != _i) {
-    var _s,
-      _e,
-      _x,
-      _r,
-      _arr = [],
-      _n = !0,
-      _d = !1;
+var require$$0 = require('fs');
+var require$$1 = require('path');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var require$$0__default = /*#__PURE__*/_interopDefaultLegacy(require$$0);
+var require$$1__default = /*#__PURE__*/_interopDefaultLegacy(require$$1);
+
+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 _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = t, e;
+}
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
+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 (_x = (_i = _i.call(arr)).next, 0 === i) {
-        if (Object(_i) !== _i) return;
-        _n = !1;
-      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
-    } catch (err) {
-      _d = !0, _e = err;
+      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 {
       try {
-        if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
       } finally {
-        if (_d) throw _e;
+        if (o) throw n;
       }
     }
-    return _arr;
+    return a;
   }
 }
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+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 _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+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 _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
 }
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
 }
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
 }
-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 _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
 }
-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 _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
 }
-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 _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
 }
-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 _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']);
@@ -69,7 +119,6 @@ function isMobxDecorator$2(decorator) {
   || 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;
@@ -115,7 +164,7 @@ function create$4(context) {
         var closestFunction = findAncestor$2(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;
         members = closestFunction.parent.parent.parent.body.body;
       } else if (firstArg.type === "ObjectExpression") {
         members = firstArg.properties;
@@ -229,7 +278,7 @@ function create$3(context) {
       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,
@@ -262,7 +311,7 @@ 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';
@@ -276,10 +325,10 @@ function create$2(context) {
       });
       // 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];
@@ -334,34 +383,51 @@ 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;
+    "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;
+      }
+      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 && ((_cmp$parent = cmp.parent) === null || _cmp$parent === void 0 ? void 0 : _cmp$parent.type) === 'VariableDeclarator') {
-        name = cmp.parent.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')) {
+      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
       });
@@ -370,10 +436,10 @@ function create$1(context) {
 }
 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: {
@@ -436,22 +502,18 @@ var noAnonymousObserver$1 = {
   create: create
 };
 
+var fs = require$$0__default["default"];
+var path = require$$1__default["default"];
 var exhaustiveMakeObservable = exhaustiveMakeObservable$1;
 var unconditionalMakeObservable = unconditionalMakeObservable$1;
 var missingMakeObservable = missingMakeObservable$1;
 var missingObserver = missingObserver$1;
 var noAnonymousObserver = noAnonymousObserver$1;
-var src = {
-  configs: {
-    recommended: {
-      plugins: ["mobx"],
-      rules: {
-        "mobx/exhaustive-make-observable": "warn",
-        "mobx/unconditional-make-observable": "error",
-        "mobx/missing-make-observable": "error",
-        "mobx/missing-observer": "warn"
-      }
-    }
+var pkg = JSON.parse(fs.readFileSync(path.join(__dirname, "..", "package.json"), "utf8"));
+var pluginMobx = {
+  meta: {
+    name: pkg.name,
+    version: pkg.version
   },
   rules: {
     "exhaustive-make-observable": exhaustiveMakeObservable,
@@ -461,5 +523,28 @@ var src = {
     "no-anonymous-observer": noAnonymousObserver
   }
 };
+var recommendedRules = {
+  "mobx/exhaustive-make-observable": "warn",
+  "mobx/unconditional-make-observable": "error",
+  "mobx/missing-make-observable": "error",
+  "mobx/missing-observer": "warn"
+};
+var src = _objectSpread2(_objectSpread2({}, pluginMobx), {}, {
+  configs: {
+    recommended: {
+      plugins: ["mobx"],
+      rules: recommendedRules
+    }
+  },
+  flatConfigs: {
+    recommended: {
+      name: "react-hooks/recommended",
+      plugins: {
+        "mobx": pluginMobx
+      },
+      rules: recommendedRules
+    }
+  }
+});
 
 module.exports = src;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "eslint-plugin-mobx",
-    "version": "0.0.10",
+    "version": "0.0.12",
     "description": "ESLint rules for MobX",
     "main": "dist/index.js",
     "repository": {
@@ -25,18 +25,20 @@
     ],
     "homepage": "https://mobx.js.org/",
     "peerDependencies": {
-        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0"
     },
     "devDependencies": {
-        "@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",
-        "rollup": "^2.60.2",
         "@rollup/plugin-babel": "^5.3.0",
         "@rollup/plugin-commonjs": "^21.0.1",
-        "@rollup/plugin-node-resolve": "13.0.6"
+        "@rollup/plugin-node-resolve": "13.0.6",
+        "@typescript-eslint/eslint-plugin": "^5.0.0",
+        "@typescript-eslint/parser": "^5.0.0",
+        "eslint": "^7.0.0",
+        "eslint-7": "npm:eslint@^7.0.0",
+        "eslint-9": "npm:eslint@^9.0.0",
+        "rollup": "^2.60.2"
     },
     "keywords": [
         "eslint",
@@ -45,7 +47,9 @@
         "mobx"
     ],
     "scripts": {
-        "test": "jest",
+        "test:7": "jest --config jest.config-eslint-7.js",
+        "test:9": "jest --config jest.config-eslint-9.js",
+        "test": "npm run test:7 && npm run test:9",
         "build": "yarn rollup --config",
         "prepublishOnly": "yarn build"
     }

package/src/index.js

@@ -1,22 +1,20 @@
 "use strict"
 
+const fs = require("fs");
+const path = require("path");
+
 const exhaustiveMakeObservable = require("./exhaustive-make-observable.js")
 const unconditionalMakeObservable = require("./unconditional-make-observable.js")
 const missingMakeObservable = require("./missing-make-observable.js")
 const missingObserver = require("./missing-observer")
 const noAnonymousObserver = require("./no-anonymous-observer.js")
 
-module.exports = {
-    configs: {
-        recommended: {
-            plugins: ["mobx"],
-            rules: {
-                "mobx/exhaustive-make-observable": "warn",
-                "mobx/unconditional-make-observable": "error",
-                "mobx/missing-make-observable": "error",
-                "mobx/missing-observer": "warn"
-            }
-        }
+const pkg = JSON.parse(fs.readFileSync(path.join(__dirname, "..", "package.json"), "utf8"));
+
+const pluginMobx = {
+    meta: {
+        name: pkg.name,
+        version: pkg.version
     },
     rules: {
         "exhaustive-make-observable": exhaustiveMakeObservable,
@@ -25,4 +23,28 @@ module.exports = {
         "missing-observer": missingObserver,
         "no-anonymous-observer": noAnonymousObserver
     }
+};
+
+const recommendedRules = {
+    "mobx/exhaustive-make-observable": "warn",
+    "mobx/unconditional-make-observable": "error",
+    "mobx/missing-make-observable": "error",
+    "mobx/missing-observer": "warn"
+}
+
+module.exports = {
+    ...pluginMobx,
+    configs: {
+        recommended: {
+            plugins: ["mobx"],
+            rules: recommendedRules,
+        }
+    },
+    flatConfigs: {
+        recommended: {
+            name: "react-hooks/recommended",
+            plugins: { "mobx": pluginMobx },
+            rules: recommendedRules
+        }
+    }
 }

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