LiveScript
LiveScript copied to clipboard
How to write this babel code in LiveScript
Namely decorators
const {observable, computed} = mobx;
const {observer} = mobxReact;
const {Component} = React;
class Todo {
id = Math.random();
@observable title;
@observable finished = false;
constructor(title) {
this.title = title;
}
}
class TodoList {
@observable todos = [];
@computed get unfinishedTodoCount() {
return this.todos.filter(todo => !todo.finished).length;
}
}
@observer
class TodoListView extends Component {
render() {
return <div>
<ul>
{this.props.todoList.todos.map(todo =>
<TodoView todo={todo} key={todo.id} />
)}
</ul>
Tasks left: {this.props.todoList.unfinishedTodoCount}
<mobxDevtools.default />
</div>
}
}
const TodoView = observer(({todo}) =>
<li>
<input
type="checkbox"
checked={todo.finished}
onClick={() => todo.finished = !todo.finished}
/>{todo.title}
</li>
);
const store = new TodoList();
ReactDOM.render(<TodoListView todoList={store} />, document.getElementById('mount'));
store.todos.push(
new Todo("Get Coffee"),
new Todo("Write simpler code")
);
store.todos[0].finished = true;
// For Eval button
window.store = store;
Decorators are still under development in ECMAScript proper.
just don't use such framework?
@askucher I know this is older but the last time I convered some TS and ES6 to ES5 I think I ended up using the decorators as a higher order function or calling it on the prototype. What did you end up with?
Yeah! please ignore this question. actually high order function can solve this issue.
observed = (obj)->
...
obj = { prop: observed 1 }
P.S I have already done what I wanted here https://github.com/askucher/lsxc We did not wait for you and implemented custom compiler. And actually already implemented the one web application based on it.