antonmedv / monkberry

Monkberry is a JavaScript library for building web user interfaces
https://monkberry.js.org
MIT License
1.49k stars 78 forks source link

Supports ES2015 modules #10

Closed alex-kinokon closed 7 years ago

alex-kinokon commented 8 years ago

This pull requests adds the cli option --ecma-version to support producing ES6 outputs for use of either modern browsers or for ES6 module aware transpilers, such as rollup and Webpack 2.

antonmedv commented 8 years ago

Hi,

Great PR, but what is purpose of compiling to es2015?

PS it's better call it es2015 =)

Mevrael commented 8 years ago

@elfet

what is purpose of compiling to es2015?

Because it is a current standard for a year. I don't know what AMD, commonJS and whatever else is, W3C has no connection to them.

JS = ES2015 and in 2016 you have to use it.

alex-kinokon commented 8 years ago

@elfet Most realistically, bundlers like rollup can aggressively analyze and remove unused codes and collapse all scopes into a single one, greatly improving its performance. With CommonJS bundlers can only play it safe and wrap everything up. For Tumblr, walking through the dependency tree takes a whopping 400ms. This is not a issue with bundled ES2015 modules because there is no tree to begin with.

ES2015 modules also supports circular dependencies and live binding for imported/exported variables, which is always a plus.

alex-kinokon commented 8 years ago

Some note: my browser (Chrome) isn’t very happy with --> because it is recognized as the end of comment.

antonmedv commented 8 years ago

I'm going to merge this PR, but i'd like to make a few changes before: like naming conventions and option param name (i'd like to see what other libraries like webpack or typescript using for same purpose).

Some note: my browser (Chrome) isn’t very happy with --> because it is recognized as the end of comment.

This is some kind of easter eggs do you have problems with it?

alex-kinokon commented 8 years ago

@elfet My test suites wouldn’t run, but that’s it.

antonmedv commented 8 years ago

@alexlur do you run test with testem command?

alex-kinokon commented 8 years ago

@elfet Yeah. Is it a bug with testem itself?

antonmedv commented 8 years ago

What king of bug you getting? Because it's work good for me.

antonmedv commented 8 years ago
Option Type Default Comment
--target, -t string "es5" Specify ECMAScript target version: 'es5', 'es6' or 'es2015'.
alex-kinokon commented 8 years ago

@elfet Looks good.

antonmedv commented 8 years ago

I'n going to implement it myself based if this pr.

Mevrael commented 8 years ago

I believe '-t' option is not yet in master?

Also could you please make a main monkberry.js itself with ES6 export so it would be possible to import it as ES6 with Rollup like there is lodash-es repo for example?

node build.js script:

var rollup = require('rollup');
var npm = require('rollup-plugin-node-resolve');

rollup.rollup({
    entry: 'app.js',
    plugins: [
        npm(),
    ]
}).then(function(bundle) {
    return bundle.write({
        dest: 'dist/app.js'
    });
}).then(function() {
    console.log('Rollup bundle created');
}).catch(function(e) {
    console.error(e);
});

I have manually added ES6 imports/exports to monkberry and compiled template. Everything worked fine.

app.js

import Monkberry from './monkberry';
import Template from './view';

const view = Monkberry.render(Template, document.body);

view.update({title: 'Test'});

template.monk compiled into view.js via monkberry template.monk -o view.js

<div>
    <h1>{{ title }}</h1>
</div>

It also would be very nice to have a JavaScript API to compile templates via build scripts and not only via CLI.