Mobx: [question] Map does not make added items observable

[ggarek]

I have a question (which may become a bug report)

Question
Should not deeply observable maps behave like other deeply observables, say arrays?
Currently, items added to observable map are not wrapped in observables.

ENV
node v7.4.0
mobx v3.1.3

Code

import { observable, toJS, autorun  } from 'mobx';
import util from 'util';

class Store {
  @observable byCategory = new Map();
  @observable collection = [];
}

const store = new Store();

autorun(() => {
  const _ = toJS(store);
  console.log('[!] observed');
});

const header = (title) => console.log(`**${title.toUpperCase()}**`);
const dumpCollection = (tag) => console.log(`>${tag}\n[State]\n${util.inspect(toJS(store.collection), { depth: 5 })}\n\n`);
const dumpMap = tag => console.log(`>${tag}\n[State]\n${util.inspect(toJS(store.byCategory), { depth: 5 })}\n\n`);

// Test 01
header('Test 01 - deeply observable array');
dumpCollection('initial dump');

store.collection.push({ tags: ['shoe', 'leather'] });
dumpCollection('added item to the collection');

store.collection[0].tags.push('black');
dumpCollection('mutated collection nested in the item');


// Test 02
header('Test 02 - deeply observable map');
dumpMap('initial dump');

store.byCategory.set('shoes', []);
dumpMap('added array to observable map');

store.byCategory.get('shoes').push({ color: 'black' });
dumpMap('added element to the array');

store.byCategory.get('shoes')[0].color = 'red';
dumpMap('changed property of the item');

Output

*TEST 01 - DEEPLY OBSERVABLE ARRAY**
>initial dump
[]


[!] observed
>added item to the collection
[ { tags: [ 'shoe', 'leather' ] } ]


[!] observed
>mutated collection nested in the item
[ { tags: [ 'shoe', 'leather', 'black' ] } ]


**TEST 02 - DEEPLY OBSERVABLE MAP**
>initial dump
{}


[!] observed
>added array to observable map
{ shoes: [] }


>added element to the array
{ shoes: [ { color: 'black' } ] }


>changed property of the item
{ shoes: [ { color: 'red' } ] }

[urugator]

Bug. referenceEnhancer is used instead of deepEnhancer when the map is initialized via new Map()
Check it on fiddle

[mweststrate]

Confirmed, culprit is here: https://github.com/mobxjs/mobx/blob/eb5383c702dc4c73f4f5a501b8e2f04a881ee960/src/types/modifiers.ts#L38, should be map instead of shallowMap

[ggarek]

@mweststrate may i work on the PR?

[mweststrate]

Sure!

Op ma 6 mrt. 2017 13:40 schreef Igor Ovsiannikov [e-mail]:

@mweststrate https://github.com/mweststrate may i work on the PR?

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/mobxjs/mobx/issues/869#issuecomment-284385421, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABvGhM_vZYDadgOXwQQUvP30D7AivoR5ks5ri_6vgaJpZM4MTpSa
.

[mweststrate]

Released as 3.1.4