eslint-plugin-mobx 0.0.0 → 0.0.5

package/package.json

@@ -1,34 +1,52 @@
 {
-  "name": "eslint-plugin-mobx",
-  "version": "0.0.0",
-  "description": "ESLint rules for MobX",
-  "keywords": [
-    "eslint",
-    "eslintplugin",
-    "eslint-plugin",
-    "mobx"
-  ],
-  "author": "Andrey Osiyuk <osiyuk@protonmail.com> (https://twitter.com/osiyuk)",
-  "main": "lib/index.js",
-  "scripts": {
-    "test": "mocha tests --recursive",
-    "test:watch": "mocha --watch tests --recursive"
-  },
-  "dependencies": {},
-  "devDependencies": {
-    "eslint": "^4.0.0 | ^5.0.0 | ^6.0.0",
-    "eslint-config-prettier": "^6.10.1",
-    "eslint-plugin-prettier": "^3.1.3",
-    "husky": "^4.2.5",
-    "lint-staged": "^10.1.3",
-    "mocha": "^3.1.2",
-    "prettier": "^2.0.4"
-  },
-  "peerDependencies": {
-    "eslint": "^4.0.0 | ^5.0.0 | ^6.0.0"
-  },
-  "engines": {
-    "node": ">=10"
-  },
-  "license": "MIT"
+    "name": "eslint-plugin-mobx",
+    "version": "0.0.5",
+    "description": "ESLint rules for MobX",
+    "main": "dist/index.js",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/mobxjs/mobx.git",
+        "directory": "packages/eslint-plugin-mobx"
+    },
+    "license": "MIT",
+    "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mobx"
+    },
+    "bugs": {
+        "url": "https://github.com/mobxjs/mobx/issues"
+    },
+    "files": [
+        "src",
+        "dist",
+        "LICENSE",
+        "CHANGELOG.md",
+        "README.md"
+    ],
+    "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"
+    },
+    "devDependencies": {
+        "@typescript-eslint/eslint-plugin": "^4.29.3",
+        "@typescript-eslint/parser": "^4.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"
+    },
+    "keywords": [
+        "eslint",
+        "eslint-plugin",
+        "eslintplugin",
+        "mobx"
+    ],
+    "scripts": {
+        "test": "jest",
+        "build": "yarn rollup --config",
+        "prepublish": "yarn build"
+    }
 }

package/src/exhaustive-make-observable.js

@@ -0,0 +1,111 @@
+'use strict';
+
+const { findAncestor, isMobxDecorator } = require('./utils.js');
+
+// TODO support this.foo = 5; in constructor
+// TODO? report on field as well
+function create(context) {
+  const sourceCode = context.getSourceCode();
+
+  function fieldToKey(field) {
+    // TODO cache on field?
+    const key = sourceCode.getText(field.key);
+    return field.computed ? `[${key}]` : key;
+  }
+
+  return {
+    'CallExpression[callee.name="makeObservable"]': makeObservable => {
+      // Only interested about makeObservable(this, ...) in constructor or makeObservable({}, ...)
+      // ClassDeclaration 
+      //   ClassBody
+      //     MethodDefinition[kind="constructor"]
+      //       FunctionExpression
+      //         BlockStatement
+      //           ExpressionStatement
+      //             CallExpression[callee.name="makeObservable"]        
+      const [firstArg, secondArg] = makeObservable.arguments;
+      if (!firstArg) return;
+      let members;
+      if (firstArg.type === 'ThisExpression') {
+        const closestFunction = findAncestor(makeObservable, node => node.type === 'FunctionExpression' || node.type === 'FunctionDeclaration')
+        if (closestFunction?.parent?.kind !== 'constructor') return;
+        members = closestFunction.parent.parent.parent.body.body;
+      } else if (firstArg.type === 'ObjectExpression') {
+        members = firstArg.properties;
+      } else {
+        return;
+      }
+
+      const annotationProps = secondArg?.properties || [];
+      const nonAnnotatedMembers = [];
+      let hasAnyDecorator = false;
+
+      members.forEach(member => {
+        if (member.static) return;
+        if (member.kind === "constructor") return;
+        //if (member.type !== 'MethodDefinition' && member.type !== 'ClassProperty') return;                    
+        hasAnyDecorator = hasAnyDecorator || member.decorators?.some(isMobxDecorator) || false;
+        if (!annotationProps.some(prop => fieldToKey(prop) === fieldToKey(member))) { // TODO optimize?
+          nonAnnotatedMembers.push(member);
+        }
+      })
+      /*
+      // 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
+        const keys = [...new Set(nonAnnotatedMembers.map(fieldToKey))];
+        const keyList = keys.map(key => `\`${key}\``).join(', ');
+
+        const fix = fixer => {
+          const annotationList = keys.map(key => `${key}: true`).join(', ') + ',';
+          if (!secondArg) {
+            return fixer.insertTextAfter(firstArg, `, { ${annotationList} }`);
+          } else if (secondArg.type !== 'ObjectExpression') {
+            return fixer.replaceText(secondArg, `{ ${annotationList} }`);
+          } else {
+            const openingBracket = sourceCode.getFirstToken(secondArg)
+            return fixer.insertTextAfter(openingBracket, ` ${annotationList} `);
+          }
+        };
+
+        context.report({
+          node: makeObservable,
+          messageId: 'missingAnnotation',
+          data: { keyList },
+          fix,
+        })
+      }
+    },
+  };
+}
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    fixable: 'code',
+    docs: {
+      description: 'enforce all fields being listen in `makeObservable`',
+      recommended: true,
+      suggestion: false,
+    },
+    messages: {
+      'missingAnnotation': 'Missing annotation for {{ keyList }}. To exclude a field, use `false` as annotation.',
+    },
+  },
+  create,
+};

package/src/index.js

@@ -0,0 +1,29 @@
+'use strict';
+
+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/no-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,
+  }
+}

package/src/missing-make-observable.js

@@ -0,0 +1,70 @@
+'use strict';
+
+const { findAncestor, isMobxDecorator } = require('./utils.js');
+
+function create(context) {
+  const sourceCode = context.getSourceCode();
+
+  return {
+    'Decorator': decorator => {
+      if (!isMobxDecorator(decorator)) return;
+      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');
+      // 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;
+
+      if (makeObservable) {
+        // make sure second arg is nullish
+        const secondArg = makeObservable.arguments[1];
+        if (secondArg && secondArg.value !== null && secondArg.name !== 'undefined') {
+          context.report({
+            node: makeObservable,
+            messageId: 'secondArgMustBeNullish',
+          })
+        }
+      } else {
+        const fix = fixer => {
+          if (constructor?.value.type === 'TSEmptyBodyFunctionExpression') {
+            // constructor() - yes this a thing
+            const closingBracket = sourceCode.getLastToken(constructor.value);
+            return fixer.insertTextAfter(closingBracket, ' { makeObservable(this); }')
+          } else if (constructor) {
+            // constructor() {}
+            const closingBracket = sourceCode.getLastToken(constructor.value.body);
+            return fixer.insertTextBefore(closingBracket, ';makeObservable(this);')
+          } else {
+            // class C {}
+            const openingBracket = sourceCode.getFirstToken(clazz.body);
+            return fixer.insertTextAfter(openingBracket, '\nconstructor() { makeObservable(this); }')
+          }
+        };
+
+        context.report({
+          node: clazz,
+          messageId: 'missingMakeObservable',
+          fix,
+        })
+      }
+    },
+  };
+}
+
+module.exports = {
+  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,
+};

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

@@ -0,0 +1,44 @@
+'use strict';
+
+const { findAncestor } = require('./utils.js');
+
+function create(context) {
+  return {
+    'CallExpression[callee.name=/(makeObservable|makeAutoObservable)/]': makeObservable => {
+      // Only iterested about makeObservable(this, ...) inside constructor and not inside nested bindable function
+      const [firstArg] = makeObservable.arguments;
+      if (!firstArg) return;
+      if (firstArg.type !== 'ThisExpression') return;
+      //     MethodDefinition[key.name="constructor"][kind="constructor"]
+      //       FunctionExpression
+      //         BlockStatement
+      //           ExpressionStatement
+      //             CallExpression[callee.name="makeObservable"]
+      const closestFunction = findAncestor(makeObservable, node => node.type === 'FunctionExpression' || node.type === 'FunctionDeclaration');
+      if (closestFunction?.parent?.kind !== 'constructor') return;
+      if (makeObservable.parent.parent.parent !== closestFunction) {
+        context.report({
+          node: makeObservable,
+          messageId: 'mustCallUnconditionally',
+          data: {
+            name: makeObservable.callee.name,
+          }
+        });
+      }
+    },
+  };
+}
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'disallows calling `makeObservable(this)` conditionally inside constructors',
+      recommended: true,
+    },
+    messages: {
+      mustCallUnconditionally: '`{{ name }}` must be called unconditionally inside constructor.',
+    }
+  },
+  create,
+}

package/src/utils.js

@@ -0,0 +1,29 @@
+'use strict';
+
+const mobxDecorators = new Set(['observable', 'computed', 'action', 'flow', 'override']);
+
+function isMobxDecorator(decorator) {
+  return mobxDecorators.has(decorator.expression.name) // @foo
+    || mobxDecorators.has(decorator.expression.callee?.name) // @foo()
+    || mobxDecorators.has(decorator.expression.object?.name) // @foo.bar
+}
+
+function findAncestor(node, match) {
+  const { parent } = node;
+  if (!parent) return;
+  if (match(parent)) return parent;
+  return findAncestor(parent, match);
+}
+
+function assert(expr, error) {
+  if (!expr) {
+    error ??= 'Assertion failed';
+    error = error instanceof Error ? error : new Error(error)
+    throw error;
+  }
+}
+
+module.exports = {
+  findAncestor,
+  isMobxDecorator,
+}

package/.editorconfig

@@ -1,15 +0,0 @@
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-max_line_length = 80
-
-[*.md]
-trim_trailing_whitespace = false
-
-[{*.json,*.yml}]
-indent_size = 2

package/.eslintrc.js

@@ -1,35 +0,0 @@
-module.exports = {
-  root: true,
-  parserOptions: {
-    ecmaVersion: '2020',
-    sourceType: 'module',
-  },
-  extends: ['eslint:recommended', 'plugin:prettier/recommended'],
-  env: {
-    es6: true,
-    node: true,
-  },
-  // 0 - off, 1 - warn, 2 - error
-  rules: {
-    'prefer-template': 1,
-    'no-param-reassign': 2,
-    'no-new-wrappers': 2,
-    'no-shadow': [1, { hoist: 'functions' }],
-    'eol-last': [1, 'always'],
-    'lines-between-class-members': [
-      2,
-      'always',
-      {
-        exceptAfterSingleLine: true,
-      },
-    ],
-    'no-lonely-if': 2,
-    'no-console': [
-      1,
-      {
-        allow: ['error'],
-      },
-    ],
-    'object-shorthand': 2,
-  },
-}

package/husky.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  hooks: {
-    'pre-commit': 'lint-staged',
-  },
-}

package/lint-staged.config.js

@@ -1,4 +0,0 @@
-module.exports = {
-  '*.{md,yaml,json}': 'prettier --write',
-  '**/*.{js,jsx}': 'eslint --fix',
-}