Mobx6 - Add action name in prod too (#2343)

* Add actionName in prod mode too

* Change script names in Contributing section to match existing ones

* Run build before 'perf' script

* Fix prettier script, ignore list and run on repo

* Add changes to changelog

.prettierignore

@@ -1,2 +1,4 @@
 /**/package.json
 website/**/*
+dist/
+docs/assets/

CHANGELOG.md

@@ -1,6 +1,9 @@
 # UNPUBLISHED (keep this here and add unpublished changes)
 
 -   Add error when computed value declared for unspecified getter [#1867](https://github.com/mobxjs/mobx/issues/1867) by [@berrunder](https://github.com/berrunder)
+-   Don't omit action name in production [#2263](https://github.com/mobxjs/mobx/issues/2263) by [@elektronik2k5](https://github.com/elektronik2k5)
+-   Update readme to reflect correct scripts by [@elektronik2k5](https://github.com/elektronik2k5)
+-   `prettier` related tweaks by [@elektronik2k5](https://github.com/elektronik2k5)
 
 # 5.15.4 / 4.15.4
 

README.md

@@ -344,8 +344,8 @@ And finally, kudos to all the people that believed in, tried, validated and even
 
 -   Feel free to send small pull requests. Please discuss new features or big changes in a GitHub issue first.
 -   Use `yarn test` to run the basic test suite.
--   Use `yarn test:ci` for the test suite with coverage.
--   and `yarn test:performance` for the performance tests.
+-   Use `yarn test:coverage` for the test suite with coverage.
+-   and `yarn perf` for the performance tests.
 -   Please note that if you want to backport a feature / fix to MobX 4 a second PR needs to be opened to the mobx4-master branch.
 
 ## Online one-click setup for contributing

docs/best/pitfalls.md

@@ -209,7 +209,9 @@ export const MyComponent = observer(props => <div>hi</div>)
 myComponent.displayName = "MyComponent"
 
 // 2 (MobX infers component name from function name)
-export const MyComponent = observer(function MyComponent(props) { return <div>hi</div> })
+export const MyComponent = observer(function MyComponent(props) {
+    return <div>hi</div>
+})
 
 // 3 (transpiler will infer component name from variable name)
 const _MyComponent = props => <div>hi</div>

package.json

@@ -15,16 +15,16 @@
     "test": "jest",
     "lint": "eslint src/**/*.ts",
     "watch": "jest --watch",
-    "perf": "yarn test:performance proxy && yarn test:performance legacy",
+    "perf": "yarn build && yarn test:performance proxy && yarn test:performance legacy",
     "test:mixed-versions": "jest --testRegex mixed-versions",
     "test:check": "yarn test:types && yarn lint",
     "test:types": "yarn tsc --noEmit && yarn test:flow",
-    "test:flow": "node_modules/.bin/flow check",
+    "test:flow": "flow check",
     "test:coverage": "yarn test -i --coverage",
     "test:performance": "PERSIST=true time node --expose-gc test/perf/index.js",
     "test:size": "yarn build && yarn import-size --report . observable computed autorun action enableDecorators",
     "test:codemod": "yarn jest --testRegex 'codemod/.*spec' codemod/undecorate.spec.ts",
-    "prettier": "prettier \"**/*.js\" \"**/*.ts\" \"docs/**/*.md\"",
+    "prettier": "prettier --write '**/*.{js,ts,md}'",
     "prebuild": "rimraf lib",
     "build": "tsdx build --name mobx --format esm,cjs,umd",
     "postbuild": "cp flow-typed/mobx.js dist/index.js.flow",

src/core/action.ts

@@ -18,24 +18,21 @@ import { allowStateReadsStart, allowStateReadsEnd } from "./derivation"
 let currentActionId = 0
 let nextActionId = 1
 const functionNameDescriptor = Object.getOwnPropertyDescriptor(() => {}, "name")
-const isFunctionNameConfigurable = functionNameDescriptor && functionNameDescriptor.configurable
+const isFunctionNameConfigurable = functionNameDescriptor?.configurable ?? false
 
 export function createAction(actionName: string, fn: Function, ref?: Object): Function {
     if (__DEV__) {
         invariant(typeof fn === "function", "`action` can only be invoked on functions")
         if (typeof actionName !== "string" || !actionName)
             fail(`actions should have valid names, got: '${actionName}'`)
     }
-    const res = function() {
+    function res() {
         return executeAction(actionName, fn, ref || this, arguments)
     }
-    ;(res as any).isMobxAction = true
-    if (__DEV__) {
-        if (isFunctionNameConfigurable) {
-            Object.defineProperty(res, "name", { value: actionName })
-        }
-    }
-    return res as any
+    return Object.defineProperties(res, {
+        ...(isFunctionNameConfigurable && { name: { value: actionName } }),
+        isMobxAction: { value: true }
+    })
 }
 
 export function executeAction(actionName: string, fn: Function, scope?: any, args?: IArguments) {

src/utils/eq.ts

@@ -83,7 +83,8 @@ function eq(a: any, b: any, depth: number, aStack?: any[], bStack?: any[]) {
                 typeof bCtor === "function" &&
                 bCtor instanceof bCtor
             ) &&
-            "constructor" in a && "constructor" in b
+            "constructor" in a &&
+            "constructor" in b
         ) {
             return false
         }