Mobx Playground

by Tarun Lalwani

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
<script src="//npmcdn.com/[email protected]/lib/mobx.umd.js"></script>
<script src="//npmcdn.com/[email protected]/index.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/paper/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/deep-diff@1/dist/deep-diff.min.js"></script>
<button onclick="dump()">Dump</button>
<button onclick="merge()">Merge</button>
<div id="log"></div>

Babel + JSX

const {observable, autorun, toJSON, extendObservable, map} = mobx;
const {observableDiff, diff, applyChange} = DeepDiff;

class Store {
  
  @observable data = {
    foo: 'bar', bar: null
  }

replaceFromDump(newData) {
//  this.data.merge(newData)
      
//    if (diff(mobx.toJSON(this.data), newData)){
//    	this.data = newData;
//    } 
    
    //else { 
      //no changes neeeded
 //   }
    

//      console.log(toJSON(this.data), newData);
    observableDiff(toJSON(this.data), newData, d => {
        console.log(JSON.stringify(d))
     /*   if (d.kind == "N" && d.path.length == 1)
      {
        let new_data = {}
        new_data[d.path[0]] = d.rhs;
        console.log(new_data)
        extendObservable(this.data, new_data);
      } else { */
          applyChange(this.data, newData, d);
      //}
    })
  } 
}

const store = new Store()

variations = [
  {foo: 'bar'},
  {foo: 'bar'},
  {foo: 'bar2' },
  {foo: 'bar2' },
  {foo: 'bar2', bar: {name: "zoo"} },
  {foo: 'bar2', bar: {name: "zoo"} },
  {foo: 'bar2', bar: {name: "zoo2"} },
  {foo: 'bar2', bar: {name: "zoo2"} },
  {foo: 'barnew', bar: {name: "zoo2", new: "yes"} },
  {foo: 'barnew', bar: {name: "zoo2", new: "no"} },
  {foo: 'barnew', bar: {name: "zoo2", new: "no"} }
]

i=0;
autorun(() => {
	document.getElementById('log').innerHTML += `${JSON.stringify(toJSON(store.data))}<br>`
})

dump = () => {
  i++;
  i = i%variations.length;
  console.log("Changing data to ", variations[i]);
	store.replaceFromDump(variations[i])
}

merge = () => {
	store.data.foo = 'bar'
}