Merge branch 'mobxjs:main' into main

.github/workflows/coveralls.yml

@@ -28,6 +28,6 @@ jobs:
         run: yarn coverage
 
       - name: Upload to coveralls
-        uses: coverallsapp/[email protected].1 
+        uses: coverallsapp/[email protected].4 
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}

docs/actions.md

@@ -443,12 +443,19 @@ However, TypeScript isn't aware of that transformation, so `flowResult` will mak
 `flow`, like `action`, can be used to wrap functions directly. The above example could also have been written as follows:
 
 ```typescript
-import { flow } from "mobx"
+import { flow, makeObservable, observable } from "mobx"
 
 class Store {
     githubProjects = []
     state = "pending"
 
+    constructor() {
+        makeObservable(this, {
+            githubProjects: observable,
+            state: observable,
+        })
+    }
+
     fetchProjects = flow(function* (this: Store) {
         this.githubProjects = []
         this.state = "pending"

package.json

@@ -6,7 +6,7 @@
     ],
     "resolutions": {
         "jest": "^29.5.0",
-        "typescript": "^5.5.2",
+        "typescript": "^5.6.2",
         "recast": "^0.23.1"
     },
     "repository": {
@@ -69,7 +69,7 @@
         "tape": "^5.0.1",
         "ts-jest": "^29.0.5",
         "tsdx": "^0.14.1",
-        "typescript": "^5.5.2"
+        "typescript": "^5.6.2"
     },
     "husky": {
         "hooks": {

packages/eslint-plugin-mobx/CHANGELOG.md

@@ -1,5 +1,17 @@
 # eslint-plugin-mobx
 
+## 0.0.13
+
+### Patch Changes
+
+-   [`88aa10828eabdf9edf2d0e523e0388c854c79dea`](https://github.com/mobxjs/mobx/commit/88aa10828eabdf9edf2d0e523e0388c854c79dea) [#3947](https://github.com/mobxjs/mobx/pull/3947) Thanks [@dartess](https://github.com/dartess)! - fix config name for recommended flat config
+
+## 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

packages/eslint-plugin-mobx/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

packages/eslint-plugin-mobx/__tests__/exhaustive-make-observable.js

@@ -1,11 +1,8 @@
-import { RuleTester } from "eslint";
+import { getRuleTester } from "./utils/get-rule-tester";
 
 import rule from "../src/exhaustive-make-observable.js";
 
-const tester = new RuleTester({
-  parser: require.resolve('@typescript-eslint/parser'),
-  parserOptions: {}
-});
+const tester = getRuleTester();
 
 const decoratedFields = [
   '@observable o = 5',

packages/eslint-plugin-mobx/__tests__/missing-make-observable.js

@@ -1,11 +1,8 @@
-import { RuleTester } from "eslint";
+import { getRuleTester } from "./utils/get-rule-tester";
 
 import rule from "../src/missing-make-observable.js";
 
-const tester = new RuleTester({
-  parser: require.resolve('@typescript-eslint/parser'),
-  parserOptions: {}
-});
+const tester = getRuleTester();
 
 const fields = [
   '@observable o = 5',

packages/eslint-plugin-mobx/__tests__/missing-observer.js

@@ -0,0 +1,54 @@
+import { getRuleTester } from "./utils/get-rule-tester";
+
+import rule from "../src/missing-observer.js"
+
+const tester = getRuleTester();
+
+const valids = [
+    "observer(function Named() { });",
+    "const foo = observer(function Named() { })",
+    "const Anonym = observer(function () { });",
+    "const Arrow = observer(() => { });",
+    "function notCmp() { }",
+    "const notCmp = function notCmp() { }",
+    "const notCmp = function () { }",
+    "const notCmp = () => { }",
+    "class NotCmp { }",
+    "class NotCmp extends Foo { }",
+    "class NotCmp extends React.Foo { }",
+    "const Cmp = observer(class Cmp extends React.Component { })",
+    "const Cmp = observer(class Cmp extends Component { })",
+    "const Cmp = observer(class extends React.Component { })",
+    "const Cmp = observer(class extends Component { })"
+]
+
+const invalids = [
+    ["function Named() { }", "const Named = observer(function Named() { })"],
+    ["const foo = function Named() { }", "const foo = observer(function Named() { })"],
+    ["const Anonym = function () { };", "const Anonym = observer(function () { });"],
+    ["const Arrow = () => { };", "const Arrow = observer(() => { });"],
+    [
+        "class Cmp extends React.Component { }",
+        "const Cmp = observer(class Cmp extends React.Component { })"
+    ],
+    ["class Cmp extends Component { }", "const Cmp = observer(class Cmp extends Component { })"],
+    [
+        "const Cmp = class extends React.Component { }",
+        "const Cmp = observer(class extends React.Component { })"
+    ],
+    [
+        "const Cmp = class extends Component { }",
+        "const Cmp = observer(class extends Component { })"
+    ],
+    ["class extends Component { }", "observer(class extends Component { })"],
+    ["class extends React.Component { }", "observer(class extends React.Component { })"]
+]
+
+tester.run("missing-observer", rule, {
+    valid: valids.map(code => ({ code })),
+    invalid: invalids.map(([code, output]) => ({
+        code,
+        output,
+        errors: [{ messageId: "missingObserver" }]
+    }))
+})

packages/eslint-plugin-mobx/__tests__/no-anonymous-observer.js

@@ -0,0 +1,39 @@
+import { getRuleTester } from "./utils/get-rule-tester";
+
+import rule from "../src/no-anonymous-observer.js"
+
+const tester = getRuleTester();
+
+const valids = ["observer(function Name() {})", "observer(class Name {})"]
+
+const invalidsNotFixed = ["observer(() => {})", "observer(function () {})", "observer(class {})"]
+
+const invalidsFixed = [
+    ["const Cmp = observer(() => {})", "const Cmp = observer(function Cmp()  {})"],
+    ['const Cmp = observer(() => "")', 'const Cmp = observer(function Cmp()  { return "" })'],
+    [
+        "const Cmp = observer(() => expr())",
+        "const Cmp = observer(function Cmp()  { return expr() })"
+    ],
+    [
+        "const Cmp = observer(() => literal)",
+        "const Cmp = observer(function Cmp()  { return literal })"
+    ],
+    ["const Cmp = observer(function () {})", "const Cmp = observer(function Cmp () {})"],
+    ["const Cmp = observer(class {})", "const Cmp = observer(class Cmp {})"]
+]
+
+tester.run("no-anonymous-observer", rule, {
+    valid: valids.map(code => ({ code })),
+    invalid: [
+        ...invalidsNotFixed.map(code => ({
+            code,
+            errors: [{ messageId: "observerComponentMustHaveName" }]
+        })),
+        ...invalidsFixed.map(([code, output]) => ({
+            code,
+            output,
+            errors: [{ messageId: "observerComponentMustHaveName" }]
+        }))
+    ]
+})

packages/eslint-plugin-mobx/__tests__/unconditional-make-observable.js

@@ -1,11 +1,8 @@
-import { RuleTester } from "eslint";
+import { getRuleTester } from "./utils/get-rule-tester";
 
 import rule from "../src/unconditional-make-observable.js";
 
-const tester = new RuleTester({
-  parser: require.resolve('@typescript-eslint/parser'),
-  parserOptions: {}
-});
+const tester = getRuleTester();
 
 const valid1 = {
   code: `

packages/eslint-plugin-mobx/__tests__/utils/get-rule-tester.js

@@ -0,0 +1,29 @@
+const version = global.ESLINT_V;
+
+const { RuleTester } = require(`eslint-${version}`);
+const typescriptEslintParser = require("@typescript-eslint/parser");
+
+function getRuleTesterConfig() {
+    switch (version) {
+        case 7:
+            return {
+                parser: require.resolve("@typescript-eslint/parser"),
+                parserOptions: {},
+            };
+        case 9:
+            return {
+                languageOptions: {
+                    parser: typescriptEslintParser,
+                    parserOptions: {},
+                },
+            };
+        default:
+            throw new Error(`Unknown or unspecified ESLINT_V (${String(version)})`);
+    }
+}
+
+function getRuleTester() {
+    return new RuleTester(getRuleTesterConfig());
+}
+
+export { getRuleTester }

packages/eslint-plugin-mobx/jest.config-eslint-7.js

@@ -0,0 +1,10 @@
+const buildConfig = require("../../jest.base.config")
+
+module.exports = buildConfig(__dirname, {
+    displayName: 'eslint-plugin-mobx with eslint@7',
+    setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+    testRegex: "__tests__/[^/]+\\.(t|j)sx?$",
+    globals: {
+        ESLINT_V: 7
+    }
+})

packages/eslint-plugin-mobx/jest.config-eslint-9.js

@@ -0,0 +1,10 @@
+const buildConfig = require("../../jest.base.config")
+
+module.exports = buildConfig(__dirname, {
+    displayName: 'eslint-plugin-mobx with eslint@9',
+    setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+    testRegex: "__tests__/[^/]+\\.(t|j)sx?$",
+    globals: {
+        ESLINT_V: 9
+    }
+})

packages/eslint-plugin-mobx/jest.setup.js

@@ -0,0 +1,4 @@
+/** @see https://github.com/jsdom/jsdom/issues/3363 */
+global.structuredClone = val => {
+    return JSON.parse(JSON.stringify(val))
+}

packages/eslint-plugin-mobx/package.json

@@ -1,6 +1,6 @@
 {
     "name": "eslint-plugin-mobx",
-    "version": "0.0.11",
+    "version": "0.0.13",
     "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"
     }