eslint-plugin-mobx 0.0.4 → 0.0.5

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # eslint-plugin-mobx
 
+## 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

package/README.md

@@ -21,9 +21,11 @@ module.exports = {
     // ...or specify and customize individual rules:
     rules: {
       // these values are the same as recommended
-      'mobx/exhaustive-make-observable': 'warn',      
+      'mobx/exhaustive-make-observable': 'warn',
+      'mobx/unconditional-make-observable': 'error',
       'mobx/missing-make-observable': 'error',
-      'mobx/unconditional-make-observable': 'error',      
+      'mobx/no-missing-observer': 'warn',
+      'mobx/no-anonymous-observer': 'warn',     
     },
 };
 ```
@@ -33,7 +35,7 @@ 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...).
@@ -41,8 +43,46 @@ Does not warn about annotated non-existing fields (there is a runtime check, but
 ### 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.
+**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

@@ -101,7 +101,7 @@ var findAncestor$2 = utils.findAncestor,
     isMobxDecorator$1 = utils.isMobxDecorator; // TODO support this.foo = 5; in constructor
 // TODO? report on field as well
 
-function create$2(context) {
+function create$4(context) {
   var sourceCode = context.getSourceCode();
 
   function fieldToKey(field) {
@@ -225,12 +225,12 @@ var exhaustiveMakeObservable$1 = {
       'missingAnnotation': 'Missing annotation for {{ keyList }}. To exclude a field, use `false` as annotation.'
     }
   },
-  create: create$2
+  create: create$4
 };
 
 var findAncestor$1 = utils.findAncestor;
 
-function create$1(context) {
+function create$3(context) {
   return {
     'CallExpression[callee.name=/(makeObservable|makeAutoObservable)/]': function CallExpressionCalleeNameMakeObservableMakeAutoObservable(makeObservable) {
       var _closestFunction$pare;
@@ -275,13 +275,13 @@ var unconditionalMakeObservable$1 = {
       mustCallUnconditionally: '`{{ name }}` must be called unconditionally inside constructor.'
     }
   },
-  create: create$1
+  create: create$3
 };
 
 var findAncestor = utils.findAncestor,
     isMobxDecorator = utils.isMobxDecorator;
 
-function create(context) {
+function create$2(context) {
   var sourceCode = context.getSourceCode();
   return {
     'Decorator': function Decorator(decorator) {
@@ -357,12 +357,129 @@ var missingMakeObservable$1 = {
       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: {
@@ -370,14 +487,18 @@ var src = {
       rules: {
         'mobx/exhaustive-make-observable': 'warn',
         'mobx/unconditional-make-observable': 'error',
-        'mobx/missing-make-observable': 'error'
+        'mobx/missing-make-observable': 'error',
+        'mobx/no-missing-observer': 'warn',
+        'mobx/no-anonymous-observer': 'warn'
       }
     }
   },
   rules: {
     'exhaustive-make-observable': exhaustiveMakeObservable,
     'unconditional-make-observable': unconditionalMakeObservable,
-    'missing-make-observable': missingMakeObservable
+    'missing-make-observable': missingMakeObservable,
+    'missing-observer': missingObserver,
+    'no-anonymous-observer': noAnonymousObserver
   }
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "eslint-plugin-mobx",
-    "version": "0.0.4",
+    "version": "0.0.5",
     "description": "ESLint rules for MobX",
     "main": "dist/index.js",
     "repository": {

package/src/index.js

@@ -3,6 +3,8 @@
 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: {
@@ -12,6 +14,8 @@ module.exports = {
         'mobx/exhaustive-make-observable': 'warn',
         'mobx/unconditional-make-observable': 'error',
         'mobx/missing-make-observable': 'error',
+        'mobx/no-missing-observer': 'warn',
+        'mobx/no-anonymous-observer': 'warn',
       },
     },
   },
@@ -19,5 +23,7 @@ module.exports = {
     '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,
+};