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
let tid = 0
class Todo {
id = ++tid;
@mem title;
@mem finished = false;
constructor(title) {
this.title = title;
}
}
function fetchSomeTodos() {
return new Promise(resolve => {
setTimeout(() => resolve([
new Todo('Get Coffee'),
new Todo('Write simpler code')
]), 500)
})
}
class Description {
id: number
title: string
constructor(title, id) {
this.title = title
this.id = id
}
}
function fetchTodoDescription(todoId: number): Promise<Description> {
return new Promise(resolve => {
setTimeout(() => resolve(new Description('description #' + todoId, todoId)), 500)
})
}
class TodoList {
@force forced: TodoList
@mem set todos(next: Todo[] | Error) {}
@mem get todos() {
fetchSomeTodos()
.then(todos => { this.todos = todos })
.catch(error => { this.todos = error })
throw new mem.Wait()
}
@memkey description(todoId: number, todoDescription?: Description | Error) {
if (todoDescription !== undefined) return todoDescription // set mode
...