mobx dev tools

[ksjogo]

Currently everything is unnamed inside the mox dev tools. A patch like (sorry, npm forking is still annoyingly complicated in conjunction with typescript and just patching over the lib a lot easier to setup)

--- original.js 2018-08-17 20:04:22.000000000 +0100
+++ classy-mst.js   2018-08-17 20:06:06.000000000 +0100
@@ -81,9 +81,11 @@
     }).actions(function (self) {
         var result = {};
         var _loop_1 = function (name_3, value) {
-            result[name_3] = function () {
+             var func = function () {
                 return (value.apply(self, arguments));
             };
+            Object.defineProperty(func, 'name', {value: name + '.' + name_3, writable: false});
+            result[name_3] = func;
         };
         for (var _i = 0, actionList_1 = actionList; _i < actionList_1.length; _i++) {
             var _a = actionList_1[_i], name_3 = _a.name, value = _a.value;

Will show names for actions at least:

There still are a lot of undefined things though. I tried also naming the views and getters but it didn't result in any noticeable change. Do you maybe have some idea, where these async reactions etc. could be named/lose their name.

[jjrv]

Thanks for the report and fix!

Could you do git clone, git checkout develop, npm install and then copy dist/classy-mst.js into node_modules/classy-mst/dist inside your project? Then you could test the latest changes and maybe try to fix the missing names.

I made the change you suggested but haven't got the dev tools installed at the moment to figure out the views.

[jjrv]

The disappearing names are really confusing... Reactions are reported here:

spyReportStart({
  name: this.name,
  type: "reaction"
})

The devtools listen to the event here:

case 'reaction':
  // object, fn
  change.objectName = observableName(mobx, change.object);
  break;

Where does change.object come from? I can't see anything that would set it.

Similarly computed values are reported here:

spyReport({
  object: this.scope,
  type: "compute",
  name: this.name
})

Devtools expect the changes object to have a target property here:

case 'compute':
  // object, target, fn
  change.objectName = observableName(mobx, change.object);
  change.targetName = getNameForThis(mobx, change.target);
  break;

[ksjogo]

Works fine. I need to finish my thesis atm, will try to find the culprit from next week on.