mweststrate

export class ContactStore {
	@observable contacts = [];
	@observable pendingRequestCount = 0;

	@computed get isLoading() {
		return this.pendingRequestCount > 0;
	}

	@action	createRandomContact() {
		this.pendingRequestCount++;

mweststrate

const theme = observable({
	backgroundColor: "#ffffff"
})

intercept(theme, "backgroundColor", change => {
	if (!change.newValue) {
		// ignore attempts to unset the background color
		return null;   
	}
	if (change.newValue.length === 6) {

mweststrate

class Select extends React.Component {
  constructor(props, context) {
    super(props, context)
    this.state = {
      selection: props.values[0]
    };
  }
  
  render() {
    return (

mweststrate

var document = global.document = createDocument();
export default document;

function createDocument() {
	const NODE_TYPES = {
		ELEMENT_NODE: 1,
		ATTRIBUTE_NODE: 2,
		TEXT_NODE: 3,
		CDATA_SECTION_NODE: 4,
		ENTITY_REFERENCE_NODE: 5,

mweststrate

// JSBin: http://jsbin.com/kekoli/edit?js,console
import {observable, observe} from "mobx";

const person = observable({
	firstName: "Maarten",
	lastName: "Luther"
});

const disposer = observe(person, (change) => {
	console.log(`${change.type} '${change.name}' from '${change.oldValue}' to '${change.object[change.name]}'`);

mweststrate

    @action performLogin(username, password, callback) {
        this.fetch(`/json/${username}-${password}.json`)
            .then(user => {
                this.currentUser = user
                callback(true)
            })
            .catch(err => {
                callback(false)
            })
    }

mweststrate

// Pseudo code proposal to give more fine grained control and cleaning up the way in which observables are constructed in MobX

// Strategies
Strategy.Reference = "Reference"
Strategy.Deep = "Deep"
Strategy.Shallow = "Shallow"
Strategy.Structure = "AsStructure"


// The essen of MobX: trackable boxed values:

mweststrate

/**
 Shitty implementation of tracked compatible local component state library powered by MobX
 
 Demo: https://jsfiddle.net/mweststrate/Ltmhe3rh/
 
 @example
 
 class Example extends Component {
  // initialize state.count with a value:
  @tracked count = 1000;

mweststrate

import { types } from 'mobx-state-tree'

export const Todo = types.model(
  'Todo',
  {
    title: types.string,
    finished: false,
  },
  {
    toggle() {

mweststrate

import { getSnapshot } from 'mobx-state-tree' 

const task1 = Todo.create({ title: "Try MST!" })
task1.toggle()

console.dir(getSnapshot(task1))
// prints { title: "Try MST!" , finished: true }