Mobx simple playground

by David Guan

HTML

<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/mobx@3/lib/mobx.umd.js"></script>
<script src="https://unpkg.com/mobx-react@4"></script>
<script src="https://unpkg.com/mobx-react-devtools@4"></script>
<div id='step'></div>
<div id='app'></div>

Babel + JSX

const { autorun, observable, computed } = mobx;

class Step {
    @observable value;
    
    constructor(value) {
        this.value = value;
    }
    
    renderable() {
        return this.value > 42;
    }
}

class App {
    constructor(steps) {
        this.steps = steps;
    }
    
    @computed
    get renderableSteps() {
    		console.log('called')
        return this.steps.filter(s => s.renderable());
    }
}

const stepA = new Step(40);
const stepB = new Step(50);
const app = new App([
	{ name: 'StepA', renderable: () => stepA.renderable() }, 
  { name: 'StepB', renderable: () => stepB.renderable() }
]);
autorun(() => {
	document.querySelector('#step').innerText = `
  	stepA Value: ${stepA.value}
    stepB Value: ${stepB.value}
  `;
});
autorun(() => {
  document.querySelector('#app').innerText = `
    Renderable steps: ${JSON.stringify(app.renderableSteps)}
  `;
});
setInterval(() => {
	stepA.value += 1;
}, 500)