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>
<body>
  <div id="mount">
    </div>
</body>

Babel + JSX

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

/** @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
      ),
      createElement
  )
  window['lom_h'] = lomCreateElement

// todo

class AbstractHelloService {
    name: string
}

function HelloView(props: {greet: string}, service: AbstractHelloService) {
    return <div>
        {props.greet}, {service.name}
        <br/><input value={service.name} onChange={(e) => { service.name = e.target.value }} />
    </div>
}
HelloView.deps = [AbstractHelloService]

class AppHelloService {
    @mem name = 'Jonny'
}

function AppView() {
  return <HelloView greet="Hello"/>
}
AppView.aliases = [
    [AbstractHelloService, AppHelloService]
]

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