[RFC] Track nested changes with full path

examples/simple-todo/index.js

@@ -19,7 +19,7 @@ var todoFactory = function (title) {
       finished: false
     }
   );
-  return remotedev(todo, { name: `Todo: ${title}` });
+  return todo;
 };
 
 var todoListFactory = function () {
@@ -41,7 +41,7 @@ var todoListFactory = function () {
     }
   });
 
-  return remotedev(todoList, { name: 'Todo list' });
+  return remotedev(todoList, { name: 'Todo list', onlyActions: true });
 };
 
 var TodoListView = mobxReact.observer(function TodoListView() {

src/spy.js

@@ -9,6 +9,7 @@ const onlyActions = {};
 const filters = {};
 const monitors = {};
 const scheduled = [];
+const children = {};
 
 function configure(name, config) {
   if (!config) return;
@@ -26,6 +27,22 @@ function init(store, config) {
   monitors[name] = devTools;
 }
 
+function track(change) {
+  if (change.type === 'splice') {
+    const path = mobx.extras.getDebugName(change.object).split('.');
+    const parent = path.shift();
+    const { added } = change;
+    if (Array.isArray(added)) {
+      added.forEach((el, i) => {
+        children[mobx.extras.getDebugName(el)] = {
+          parent,
+          path: [...path, i].join('.')
+        };
+      });
+    }
+  }
+}
+
 function schedule(name, action) {
   let toSend;
   if (action && !isFiltered(action, filters[name])) {
@@ -46,6 +63,7 @@ export default function spy(store, config) {
   if (isSpyEnabled) return;
   isSpyEnabled = true;
   let objName;
+  let objPath;
 
   mobx.spy((change) => {
     if (change.spyReportStart) {
@@ -55,12 +73,16 @@ export default function spy(store, config) {
         schedule(objName);
         return;
       }
+      if (!stores[objName] && children[objName]) {
+        objPath = children[objName].path;
+        objName = children[objName].parent;
+      }
       if (!stores[objName] || stores[objName].__isRemotedevAction) {
         schedule(objName);
         return;
       }
       if (change.type === 'action') {
-        const action = createAction(change.name);
+        const action = createAction(change.name, objPath);
         if (change.arguments && change.arguments.length) action.arguments = change.arguments;
         if (!onlyActions[objName]) {
           schedule(objName, { ...action, type: `┏ ${action.type}` });
@@ -70,7 +92,8 @@ export default function spy(store, config) {
           schedule(objName, action);
         }
       } else if (change.type && mobx.isObservable(change.object)) {
-        schedule(objName, !onlyActions[objName] && createAction(change.type, change));
+        track(change);
+        schedule(objName, !onlyActions[objName] && createAction(change.type, objPath, change));
       }
     } else if (change.spyReportEnd) {
       send();

src/utils.js

@@ -11,7 +11,11 @@ const getPayload = (change) => {
   };
 };
 
-export function createAction(name, change) {
+export function createAction(objName, objPath, change) {
+  let name;
+  if (objPath) name = `${objPath}.${objName}`;
+  else name = objName;
+
   if (!change) { // is action
     return { type: name };
   }