eslint-plugin-mobx 0.0.2 → 0.0.6

package/CHANGELOG.md

@@ -1 +1,26 @@
 # eslint-plugin-mobx
+
+## 0.0.6
+
+### Patch Changes
+
+-   [`4b1337ec`](https://github.com/mobxjs/mobx/commit/4b1337ecd64c7bfc904a04063bd1b07e62e392f1) [#3228](https://github.com/mobxjs/mobx/pull/3228) Thanks [@ahoisl](https://github.com/ahoisl)! - fix name for missing-observer rule in recommended
+
+## 0.0.5
+
+### Patch Changes
+
+-   [`021f34ec`](https://github.com/mobxjs/mobx/commit/021f34ec81daed9e5b5ed8425b2f3e0fa85dfe5b) [#3219](https://github.com/mobxjs/mobx/pull/3219) Thanks [@urugator](https://github.com/urugator)! - Add [`mobx/missing-observer`](https://github.com/mobxjs/mobx/tree/main/packages/eslint-plugin-mobx#mobxmissing-observer),
+    [`mobx/no-anonymous-observer`](https://github.com/mobxjs/mobx/tree/main/packages/eslint-plugin-mobx#mobxno-anonymous-observer) rules,
+
+## 0.0.4
+
+### Patch Changes
+
+-   [`5b6f3001`](https://github.com/mobxjs/mobx/commit/5b6f30017939a2082f7d767a857e0189210a91a7) [#3204](https://github.com/mobxjs/mobx/pull/3204) Thanks [@urugator](https://github.com/urugator)! - changed build process
+
+## 0.0.3
+
+### Patch Changes
+
+-   [`cd6a6a68`](https://github.com/mobxjs/mobx/commit/cd6a6a68245f082bdc35a3109214a5449ef9818d) [#3200](https://github.com/mobxjs/mobx/pull/3200) Thanks [@urugator](https://github.com/urugator)! - fix package.json

package/README.md

@@ -5,7 +5,7 @@ Mobx specific linting rules for `eslint`.
 ## Installation
 
 ```
-npm install --save-dev eslint @typescript-eslint/parser eslint-plugin-mobx 
+npm install --save-dev eslint @typescript-eslint/parser eslint-plugin-mobx
 ```
 
 ## Configuration
@@ -15,17 +15,19 @@ npm install --save-dev eslint @typescript-eslint/parser eslint-plugin-mobx
 module.exports = {
     parser: "@typescript-eslint/parser",
     // Include "mobx" in plugins array:
-    plugins: ["mobx"],        
+    plugins: ["mobx"],
     // Either extend our recommended configuration:
     extends: "plugin:mobx/recommended",
     // ...or specify and customize individual rules:
     rules: {
-      // these values are the same as recommended
-      'mobx/exhaustive-make-observable': 'warn',      
-      'mobx/missing-make-observable': 'error',
-      'mobx/unconditional-make-observable': 'error',      
-    },
-};
+        // 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",
+        "mobx/no-anonymous-observer": "warn"
+    }
+}
 ```
 
 ## Rules
@@ -33,16 +35,56 @@ 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>
+**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...).
 
 ### mobx/missing-make-observable
 
-*When using decorators (eg `@observable foo = 5`)*, makes sure that `makeObservable(this)` is called in a constructor.<br>
-Autofix creates a constructor if necessary and adds `makeObservable(this)` at it's end.
+_When using decorators (eg `@observable foo = 5`)_, makes sure that `makeObservable(this)` is called in a constructor.<br>
+**Autofix** creates a constructor if necessary and adds `makeObservable(this)` at it's end.
 
 ### mobx/unconditional-make-observable
 
-Makes sure the `make(Auto)Observable(this)` is called unconditionally inside a constructor.
+Makes sure the `make(Auto)Observable(this)` is called unconditionally inside a constructor.
+
+### mobx/missing-observer
+
+Makes sure every React component is wrapped with `observer`. A React component is considered to be any _class_ extending from `Component` or `React.Component` and any _function_ which name has the first letter capitalized (for anonymous functions the name is inferred from variable). These are all considered components:
+
+```javascript
+class Cmp extends React.Component { }
+class Cmp extends Component { }
+const Cmp = class extends React.Component { }
+const Cmp = class extends Component { }
+class extends Component { }
+class extends React.Component { }
+
+function Named() { }
+const foo = function Named() { }
+const Anonym = function () { };
+const Arrow = () => { };
+```
+
+**Autofix** wraps the component with `observer` and if necessary declares a constant of the same name: `const Name = observer(function Name() {})`.
+It's a bit opinionated and can lead to a lot of false positives depending on your conventions. You will probably want to combine this rule with `overrides` option, eg:
+
+```javascript
+// .eslintrc.js
+"overrides": [
+  {
+    "files": ["*.jsx"],
+    "rules": {
+      "mobx/missing-observer": "error"
+    }
+  }
+]
+```
+
+### mobx/no-anonymous-observer
+
+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.
+**Autofix** infers the name from variable if possible.

package/dist/index.js

@@ -0,0 +1,505 @@
+'use strict';
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+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 {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  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 _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.");
+}
+
+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
+
+function create$4(context) {
+  var sourceCode = context.getSourceCode();
+
+  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 
+      //   ClassBody
+      //     MethodDefinition[kind="constructor"]
+      //       FunctionExpression
+      //         BlockStatement
+      //           ExpressionStatement
+      //             CallExpression[callee.name="makeObservable"]        
+      var _makeObservable$argum = _slicedToArray(makeObservable.arguments, 2),
+          firstArg = _makeObservable$argum[0],
+          secondArg = _makeObservable$argum[1];
+
+      if (!firstArg) return;
+      var members;
+
+      if (firstArg.type === 'ThisExpression') {
+        var _closestFunction$pare;
+
+        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;
+        members = closestFunction.parent.parent.parent.body.body;
+      } 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;                    
+
+        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);
+        })) {
+          // 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({
+          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 }`.',
+        })
+      }
+      */
+
+      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(', ');
+
+        var fix = function fix(fixer) {
+          var annotationList = keys.map(function (key) {
+            return "".concat(key, ": true");
+          }).join(', ') + ',';
+
+          if (!secondArg) {
+            return fixer.insertTextAfter(firstArg, ", { ".concat(annotationList, " }"));
+          } 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',
+          data: {
+            keyList: keyList
+          },
+          fix: fix
+        });
+      }
+    }
+  };
+}
+
+var exhaustiveMakeObservable$1 = {
+  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.'
+    }
+  },
+  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];
+
+      if (!firstArg) return;
+      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 (makeObservable.parent.parent.parent !== closestFunction) {
+        context.report({
+          node: makeObservable,
+          messageId: 'mustCallUnconditionally',
+          data: {
+            name: makeObservable.callee.name
+          }
+        });
+      }
+    }
+  };
+}
+
+var unconditionalMakeObservable$1 = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'disallows calling `makeObservable(this)` conditionally inside constructors',
+      recommended: true
+    },
+    messages: {
+      mustCallUnconditionally: '`{{ name }}` must be called unconditionally inside constructor.'
+    }
+  },
+  create: create$3
+};
+
+var findAncestor = utils.findAncestor,
+    isMobxDecorator = utils.isMobxDecorator;
+
+function create$2(context) {
+  var sourceCode = context.getSourceCode();
+  return {
+    'Decorator': function Decorator(decorator) {
+      var _constructor$value$bo, _constructor$value$bo2;
+
+      if (!isMobxDecorator(decorator)) return;
+      var clazz = findAncestor(decorator, function (node) {
+        return node.type === 'ClassDeclaration' || node.type === 'ClassExpression';
+      });
+      if (!clazz) return; // ClassDeclaration > ClassBody > []
+
+      var constructor = clazz.body.body.find(function (node) {
+        return node.kind === 'constructor';
+      }); // 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 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;
+
+      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,
+            messageId: 'secondArgMustBeNullish'
+          });
+        }
+      } else {
+        var fix = function fix(fixer) {
+          if ((constructor === null || constructor === void 0 ? void 0 : constructor.value.type) === 'TSEmptyBodyFunctionExpression') {
+            // constructor() - yes this a thing
+            var closingBracket = sourceCode.getLastToken(constructor.value);
+            return fixer.insertTextAfter(closingBracket, ' { makeObservable(this); }');
+          } else if (constructor) {
+            // constructor() {}
+            var _closingBracket = sourceCode.getLastToken(constructor.value.body);
+
+            return fixer.insertTextBefore(_closingBracket, ';makeObservable(this);');
+          } else {
+            // class C {}
+            var openingBracket = sourceCode.getFirstToken(clazz.body);
+            return fixer.insertTextAfter(openingBracket, '\nconstructor() { makeObservable(this); }');
+          }
+        };
+
+        context.report({
+          node: clazz,
+          messageId: 'missingMakeObservable',
+          fix: fix
+        });
+      }
+    }
+  };
+}
+
+var missingMakeObservable$1 = {
+  meta: {
+    type: 'problem',
+    fixable: 'code',
+    docs: {
+      description: 'prevents missing `makeObservable(this)` when using decorators',
+      recommended: true,
+      suggestion: false
+    },
+    messages: {
+      missingMakeObservable: "Constructor is missing `makeObservable(this)`.",
+      secondArgMustBeNullish: "`makeObservable`'s second argument must be nullish or not provided when using decorators."
+    }
+  },
+  create: create$2
+};
+
+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;
+      }
+
+      if (cmp.type.startsWith('Class')) {
+        // Must extend Component or React.Component
+        var superClass = cmp.superClass;
+        if (!superClass) return;
+        var superClassText = sourceCode.getText(superClass);
+        if (superClassText !== 'Component' && superClassText !== 'React.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;
+      }
+
+      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), ')')];
+      };
+
+      context.report({
+        node: cmp,
+        messageId: 'missingObserver',
+        data: {
+          name: name || '<anonymous>'
+        },
+        fix: fix
+      });
+    }
+  };
+}
+
+var missingObserver$1 = {
+  meta: {
+    type: 'problem',
+    fixable: 'code',
+    docs: {
+      description: 'prevents missing `observer` on react component',
+      recommended: true
+    },
+    messages: {
+      missingObserver: "Component `{{ name }}` is missing `observer`."
+    }
+  },
+  create: create$1
+};
+
+function create(context) {
+  var sourceCode = context.getSourceCode();
+  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);
+          return [fixer.replaceText(arrowToken, ''), fixer.insertTextBefore(cmp, "function ".concat(name))];
+        }
+
+        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',
+        fix: fix
+      });
+    }
+  };
+}
+
+var noAnonymousObserver$1 = {
+  meta: {
+    type: 'problem',
+    fixable: 'code',
+    docs: {
+      description: 'forbids anonymous functions or classes as `observer` components',
+      recommended: true
+    },
+    messages: {
+      observerComponentMustHaveName: "`observer` component must have a name."
+    }
+  },
+  create: create
+};
+
+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",
+        "mobx/no-anonymous-observer": "warn"
+      }
+    }
+  },
+  rules: {
+    "exhaustive-make-observable": exhaustiveMakeObservable,
+    "unconditional-make-observable": unconditionalMakeObservable,
+    "missing-make-observable": missingMakeObservable,
+    "missing-observer": missingObserver,
+    "no-anonymous-observer": noAnonymousObserver
+  }
+};
+
+module.exports = src;

package/package.json

@@ -1,7 +1,8 @@
 {
     "name": "eslint-plugin-mobx",
-    "version": "0.0.2",
+    "version": "0.0.6",
     "description": "ESLint rules for MobX",
+    "main": "dist/index.js",
     "repository": {
         "type": "git",
         "url": "https://github.com/mobxjs/mobx.git",
@@ -17,18 +18,25 @@
     },
     "files": [
         "src",
+        "dist",
         "LICENSE",
+        "CHANGELOG.md",
         "README.md"
     ],
     "homepage": "https://mobx.js.org/",
-    "dependencies": {},
     "peerDependencies": {
-        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
     },
     "devDependencies": {
-        "eslint": "^7.0.0",
+        "@typescript-eslint/eslint-plugin": "^4.29.3",
         "@typescript-eslint/parser": "^4.0.0",
-        "@typescript-eslint/eslint-plugin": "^4.29.3"
+        "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"
     },
     "keywords": [
         "eslint",
@@ -38,7 +46,7 @@
     ],
     "scripts": {
         "test": "jest",
-        "build": "node ../../scripts/build.js eslintPluginMobx",
-        "prepublish": "yarn build --target publish"
+        "build": "yarn rollup --config",
+        "prepublish": "yarn build"
     }
 }

package/src/index.js

@@ -1,23 +1,29 @@
-'use strict';
+"use strict"
 
-const exhaustiveMakeObservable = require('./exhaustive-make-observable.js');
-const unconditionalMakeObservable = require('./unconditional-make-observable.js');
-const missingMakeObservable = require('./missing-make-observable.js');
+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',
-      },
+    configs: {
+        recommended: {
+            plugins: ["mobx"],
+            rules: {
+                "mobx/exhaustive-make-observable": "warn",
+                "mobx/unconditional-make-observable": "error",
+                "mobx/missing-make-observable": "error",
+                "mobx/missing-observer": "warn",
+                "mobx/no-anonymous-observer": "warn"
+            }
+        }
     },
-  },
-  rules: {
-    'exhaustive-make-observable': exhaustiveMakeObservable,
-    'unconditional-make-observable': unconditionalMakeObservable,
-    'missing-make-observable': missingMakeObservable,
-  }
-}
+    rules: {
+        "exhaustive-make-observable": exhaustiveMakeObservable,
+        "unconditional-make-observable": unconditionalMakeObservable,
+        "missing-make-observable": missingMakeObservable,
+        "missing-observer": missingObserver,
+        "no-anonymous-observer": noAnonymousObserver
+    }
+}

package/src/missing-observer.js

@@ -0,0 +1,63 @@
+'use strict';
+
+function create(context) {
+  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;
+      }
+
+      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,
+      })
+    },
+  };
+}
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    fixable: 'code',
+    docs: {
+      description: 'prevents missing `observer` on react component',
+      recommended: true,
+    },
+    messages: {
+      missingObserver: "Component `{{ name }}` is missing `observer`.",
+    },
+  },
+  create,
+};

package/src/no-anonymous-observer.js

@@ -0,0 +1,57 @@
+'use strict';
+
+function create(context) {
+  const sourceCode = context.getSourceCode();
+
+  return {
+    'CallExpression[callee.name="observer"]': observer => {
+      const cmp = observer.arguments[0];
+      if (!cmp) return;
+      if (cmp?.id?.name) return;
+
+      const fix = fixer => {
+        // Use name from variable for autofix 
+        const name = observer.parent?.type === 'VariableDeclarator'
+          ? observer.parent.id.name
+          : undefined;
+
+        if (!name) return;
+        if (cmp.type === 'ArrowFunctionExpression') {
+          const arrowToken = sourceCode.getTokenBefore(cmp.body);
+          return [
+            fixer.replaceText(arrowToken, ''),
+            fixer.insertTextBefore(cmp, `function ${name}`),
+          ]
+        }
+        if (cmp.type === 'FunctionExpression') {
+          const functionToken = sourceCode.getFirstToken(cmp);
+          return fixer.replaceText(functionToken, `function ${name}`);
+        }
+        if (cmp.type === 'ClassExpression') {
+          const classToken = sourceCode.getFirstToken(cmp);
+          return fixer.replaceText(classToken, `class ${name}`);
+        }
+      }
+      context.report({
+        node: cmp,
+        messageId: 'observerComponentMustHaveName',
+        fix,
+      })
+    },
+  };
+}
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    fixable: 'code',
+    docs: {
+      description: 'forbids anonymous functions or classes as `observer` components',
+      recommended: true,
+    },
+    messages: {
+      observerComponentMustHaveName: "`observer` component must have a name.",
+    },
+  },
+  create,
+};

package/src/index.ts

@@ -1,3 +0,0 @@
-// This file exists only to get rid of a build error:
-// "config error TS18003: No inputs were found in config file"
-export * from './index.js'