eslint-plugin-mobx 0.0.4 → 0.0.8

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # eslint-plugin-mobx
 
+## 0.0.8
+
+### Patch Changes
+
+-   [`aafda613`](https://github.com/mobxjs/mobx/commit/aafda6136afd107c6cbdd73d9bab57e45a2eb9f5) [#3256](https://github.com/mobxjs/mobx/pull/3256) Thanks [@urugator](https://github.com/urugator)! - fix `no-anonymous-observer` autofix for arrow functions without BlockStatement body
+
+## 0.0.7
+
+### Patch Changes
+
+-   [`0aaf1831`](https://github.com/mobxjs/mobx/commit/0aaf183131f3eadd40c05ccc94139282bd8d7d56) [#3231](https://github.com/mobxjs/mobx/pull/3231) Thanks [@ahoisl](https://github.com/ahoisl)! - fix(lint): fix 'missing-make-observable' rule with constructor overloads
+
+## 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

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

@@ -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,17 +275,17 @@ 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) {
-      var _constructor$value$bo, _constructor$value$bo2;
+      var _clazz$body$body$find, _constructor$value$bo, _constructor$value$bo2;
 
       if (!isMobxDecorator(decorator)) return;
       var clazz = findAncestor(decorator, function (node) {
@@ -293,7 +293,9 @@ function create(context) {
       });
       if (!clazz) return; // ClassDeclaration > ClassBody > []
 
-      var constructor = clazz.body.body.find(function (node) {
+      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 > []
 
@@ -357,27 +359,154 @@ 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);
+          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",
+        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'],
+      plugins: ["mobx"],
       rules: {
-        'mobx/exhaustive-make-observable': 'warn',
-        'mobx/unconditional-make-observable': 'error',
-        'mobx/missing-make-observable': 'error'
+        "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
+    "exhaustive-make-observable": exhaustiveMakeObservable,
+    "unconditional-make-observable": unconditionalMakeObservable,
+    "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.8",
     "description": "ESLint rules for MobX",
     "main": "dist/index.js",
     "repository": {

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-make-observable.js

@@ -11,7 +11,8 @@ function create(context) {
       const clazz = findAncestor(decorator, node => node.type === 'ClassDeclaration' || node.type === 'ClassExpression');
       if (!clazz) return;
       // ClassDeclaration > ClassBody > []
-      const constructor = clazz.body.body.find(node => node.kind === 'constructor');
+      const constructor = clazz.body.body.find(node => node.kind === 'constructor' && node.value.type === 'FunctionExpression') ??
+        clazz.body.body.find(node => node.kind === 'constructor');
       // MethodDefinition > FunctionExpression > BlockStatement > []
       const isMakeObservable = node => node.expression?.callee?.name === 'makeObservable' && node.expression?.arguments[0]?.type === 'ThisExpression';
       const makeObservable = constructor?.value.body?.body.find(isMakeObservable)?.expression;

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,65 @@
+"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)
+                    const fixes = [
+                        fixer.replaceText(arrowToken, ""),
+                        fixer.insertTextBefore(cmp, `function ${name}`)
+                    ]
+                    if (cmp.body.type !== "BlockStatement") {
+                        fixes.push(
+                            fixer.insertTextBefore(cmp.body, `{ return `),
+                            fixer.insertTextAfter(cmp.body, ` }`)
+                        )
+                    }
+                    return fixes
+                }
+                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
+}