gkz / LiveScript

LiveScript is a language which compiles to JavaScript. It has a straightforward mapping to JavaScript and allows you to write expressive code devoid of repetitive boilerplate. While LiveScript adds many features to assist in functional style programming, it also has many improvements for object oriented and imperative programming.
http://livescript.net
MIT License
2.31k stars 155 forks source link

How to write this babel code in LiveScript #955

Open askucher opened 7 years ago

askucher commented 7 years ago

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;
summivox commented 7 years ago

Decorators are still under development in ECMAScript proper.

osv commented 7 years ago

just don't use such framework?

tcrowe commented 6 years ago

@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?

askucher commented 6 years ago

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.