Mobx + React simple todolist

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/lom_atom@1/dist/lom_atom.umd.js"></script>
<script src="https://unpkg.com/reactive-di@4/dist/reactive-di.umd.js"></script>
<script src="https://unpkg.com/jss@8/dist/jss.min.js"></script>
<body>
  <div id="mount">
    </div>
</body>

Babel + JSX

// @flow
const {mem, action, force} = lom_atom
const {createReactWrapper, createCreateElement, Injector} = window['reactive-di']
const {render} = ReactDOM
const {createElement, Component} = React
const {create: createJss} = jss

/** @jsx lom_h */

// setup
function ErrorableView({error}: {error: Error}) {
    return <div>
        {error instanceof mem.Wait
            ? <div>
                Loading...
            </div>
            : <div>
                <h3>Fatal error !</h3>
                <div>{error.message}</div>
                <pre>
                    {error.stack.toString()}
                </pre>
            </div>
        }
    </div>
}

  const lomCreateElement = createCreateElement(
      createReactWrapper(
          Component,
          ErrorableView,
          new Injector([], createJss())
      ),
      createElement
  )
  window['lom_h'] = lomCreateElement

// main

class Store {
  @mem red = 140
}

function HelloTheme(store) {
  return {
    wrapper: {
      background: `rgb(${store.red}, 0, 0)`
    }
  }
}
HelloTheme.theme = true
HelloTheme.deps = [Store]

function HelloView(
  _,
  {store, theme}: {
    store: Store,
    theme: NameOf<typeof HelloTheme>
  }
) {
  return <div className={theme.wrapper}>
    color via css {store.red}: <input
      type="range"
      min="0"
      max="255"
      value={store.red}
      onInput={({target}) => { store.red = Number(target.value) }}
    />
  </div>
}

HelloView.deps = [{store: Store, theme: HelloTheme}]

ReactDOM.render(<HelloView />, document.getElementById('mount'));