JSFiddle - React, Tailwind, and code Playground

by dk49

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mobx/2.6.3/mobx.umd.min.js"></script>
<script src="https://rawgit.com/eu81273/jsfiddle-console/master/console.js"></script>

Babel + JSX

const {observable, asFlat, asReference, reaction} = mobx;

class Car {

	constructor() {
  	reaction(() => this.colors, () => console.log('colors changed: ',this.colors));
    reaction(() => this.colorsAsFlat, () => console.log('colorsAsFlat changed: ',this.colorsAsFlat));
    reaction(() => this.config, () => console.log('config changed: ',this.config));
    reaction(() => this.configAsReference, () => console.log('configAsReference changed: ',this.configAsReference));
  }
  
	@observable colors = [];
  @observable colorsAsFlat = asFlat([]);
  @observable config = {model : '7 Series'};
  @observable configAsReference = asReference({model : '7 Series'});
}

const bmw = new Car();

bmw.colors.push('Red');
bmw.colors[1] = 'Gray';
bmw.colors = ['Black'];
bmw.colors.push('Blue');

bmw.colorsAsFlat.push('Red');
bmw.colorsAsFlat[1] = 'Gray';
bmw.colorsAsFlat = ['Black'];
bmw.colorsAsFlat.push('Blue');

console.log("Initial Config: ", bmw.config);

bmw.config.model = '5 Series';
bmw.config.autopilot = 'true';
bmw.config = { sunroof : 'true'};

bmw.configAsReference.model = '5 Series';
bmw.configAsReference.autopilot = 'true';
bmw.configAsReference = { sunroof : 'true'};