LiveScript

LiveScript copied to clipboard

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.