joliss / broccoli-es6-concatenator

Broccoli compiler to transpile and concatenate ES6 modules

broccoli-es6-concatenator

Transpile ES6 modules and concatenate them, recursively including modules referenced by import statements.

This plugin is deprecated and no longer maintained, as it uses an old version of es6-module-transpiler. It is recommended that you use the broccoli-es6modules plugin instead, which is based on the newer Esperanto transpiler.

Installation

npm install --save-dev broccoli-es6-concatenator

Usage

Note: The API will change in subsequent 0.x versions.

var compileES6 = require('broccoli-es6-concatenator');
var applicationJs = compileES6(sourceTree, {
  loaderFile: 'loader.js',
  ignoredModules: [
    'resolver'
  ],
  inputFiles: [
    'todomvc/**/*.js'
  ],
  legacyFilesToAppend: [
    'jquery.js',
    'handlebars.js',
    'ember.js',
  ],
  wrapInEval: true,
  outputFile: '/assets/application.js'
});

Options

• .wrapInEval (boolean): Enable or disable wrapping each module in an eval call with a //# sourceURL comment. Defaults to true, though this may change in the future.

• .loaderFile (string): When specified prepends the contents of loaderFile.

broccoli-es6-concatenator's Issues

should broccoli be a peer dependency?

Concat should add line breaks between files

I ran into an issue where files with a trailing single line comment would break subsequent files. One example of this in practice is JSS followed by ZeroClipboard:

    var exports = new Jss(document);
    exports.forDocument = function(doc) {
        return new Jss(doc);
    };
    return exports;
})();

typeof module !== 'undefined' && module.exports && (module.exports = jss); // CommonJS support/*!
 * zeroclipboard
 * The Zero Clipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie, and a JavaScript interface.
 * Copyright 2012 Jon Rohan, James M. Greene, .
 * Released under the MIT license
 * http://jonrohan.github.com/ZeroClipboard/
 * v1.1.7
 */(function() {
  "use strict";

As you can see, the opening block comment from ZeroClipboard is eaten by the trailing comment in JSS.

Changing the following line to join('\n') solves the problem: https://github.com/joliss/broccoli-es6-concatenator/blob/master/index.js#L69

loader path cannot have a folder with a period in it.

this is blocking: ember-cli/ember-cli#133

given:

var app = compileES6(app, {
  loaderFile: 'loader.js/loader.js'
});

we get:

Error: EPERM, operation not permitted 'tmp/merged_tree-tmp_dest_dir-BuIhKl1h.tmp/loader.js'
    at Object.fs.unlinkSync (fs.js:752:18)
    at linkAndOverwrite (/Users/stefan/src/ember-cli/node_modules/broccoli/node_modules/broccoli-kitchen-sink-helpers/index.js:134:8)
    at linkRecursivelySync (/Users/stefan/src/ember-cli/node_modules/broccoli/node_modules/broccoli-kitchen-sink-helpers/index.js:123:5)
    at Object.linkRecursivelySync (/Users/stefan/src/ember-cli/node_modules/broccoli/node_modules/broccoli-kitchen-sink-helpers/index.js:117:7)
    at /Users/stefan/src/ember-cli/node_modules/broccoli/lib/merged_tree.js:24:19
    at invokeCallback (/Users/stefan/src/ember-cli/node_modules/rsvp/dist/commonjs/rsvp/promise.js:228:21)
    at publish (/Users/stefan/src/ember-cli/node_modules/rsvp/dist/commonjs/rsvp/promise.js:176:9)
    at publishFulfillment (/Users/stefan/src/ember-cli/node_modules/rsvp/dist/commonjs/rsvp/promise.js:312:5)
    at flush (/Users/stefan/src/ember-cli/node_modules/rsvp/dist/commonjs/rsvp/asap.js:41:9)
    at process._tickCallback (node.js:664:11)

note: if the folder does not contain a . no problem exists.

Workaround for use with broccoli-traceur?

Is there some workaround to use this module with broccoli-traceur?

I get an Error: Invalid access to private name exception just requiring broccoli-es6-concatenator and broccoli-traceur in the same Brocfile.

Digging into it a little bit, it looks like the error is caused by a conflict between the traceur runtime bundled with es6-module-transpiler and the one required by broccoli-traceur.

It seems like there should be some fix for the node target of es6-module-transpiler, but I just wanted to check if there was a known way to hack around this issue.

Allow custom module path

Right now, the modules path is exactly its filename, e.g. app/templates/post. It would be nice to have a prefix or a custom module name, e.g. myapp-3.1/app/templates/post or even myapp-3.1/templates/post to make it easier for other projects to import this module (e.g. if used for a Bower package).

What do you think about that? I could also submit a PR.

Extract transpiler into a filter

Just a suggestion: If you made the transpiler a filter, using other module systems or more evolved es6 preprocessing would be possible in the future (like shiming the class system). Anyway, having a file concatenator would be nice.

Need better error message when an imported module cannot be found

See https://github.com/joliss/broccoli/issues/54.

Use same loader for multiple trees.

On ember-cli we want the ability to have different trees using the same loader, so we do things like ember-cli/ember-cli#220 (diff)

This will also be important when we expand to support lazy loading of application bundles.

The problem currently is that doing something like the following

         compileES6(applicationJs, {
             loaderFile: 'loader/loader.js',
             ignoredModules: [
               'ember/resolver'
             ],
             inputFiles: [
               prefix + '/**/*.js'
             ],
             legacyFilesToAppend: legacyFilesToAppend,
             wrapInEval: env !== 'production',
             outputFile: '/assets/app.js'
           });

         compileES6(testsJs, {
             loaderFile: 'loader/loader.js',
             ignoredModules: [
               'ember/resolver',
               'ember-qunit',
               prefix + '/app',
               prefix + '/router'
             ],
             inputFiles: [
               prefix + '/**/*.js'
             ],
             legacyFilesToAppend: legacyFilesToAppend,

             wrapInEval: true,
             outputFile: '/assets/tests.js'
          });

Throws away whatever get's defined on the first compileES6 because it overrides require.
This is a possible workaround https://github.com/emberjs/ember.js/blob/master/packages/loader/lib/main.js#L7 but the concatenator should support that without requiring any workaround.

Maybe we are missing something, but it would be great if we could have the loaderFile as an optional thing and if there is one previously defined it should use that.

files duplicated when using "/<app-name>/models/ticket" and "<app-name>/models/ticket"

This happens when you have two similar yet different (one uses a leading / one doesn't) in Ember CLI and leads to subtle zalgo when code gets loaded twice:

import Ticket from "myapp/models/ticket";

vs

import Ticket from "/myapp/models/ticket";

Two modules with the same code will be defined and loaded separately. This means you have twice as much code loading and also in execution when in the browser.

There should be a hook for normalizing this kind of stuff. I have to pack but I can fill you in later with more details tomorrow. @igorT, @hjdivad, and I ran into this while working on Ember Data.

ES5 set/get properties blown up during transpile?

I just ran into this while upgrading to the latest Ember-CLI, and I don't have time to dig much deeper, but I wanted to report it.

I have a basic JavaScript class with property declarations like:

function FooClass() {
}

FooClass.prototype = {
  get bar() {
     return this._bar;
  },

  set bar(value) {
    this._bar = value;
  },
};

After transpilation that becomes:

function FooClass() {
}

FooClass.prototype = {
  get bar() function() {
     return this._bar;
  },

  set bar(value) function(value) {
    this._bar = value;
  },
};

ic-ajax file is named main.js which makes for ambiguous legacyFilesToAppend

I'm adding ic-ajax into the build to allow it to be used from my code. The ember-app-kit wraps it but can't see it unless it's appended.

But, it's named main.js, so the only way for it to be seen by broccoli is by adding main.js to the legacyFilesToAppend array. That will clash with other files which are also named main.js, should they occur.

  , legacyFilesToAppend: [
      'jquery.js'
    , 'bootstrap.js'
    , 'handlebars.js'
    , 'ember.js'
    , 'ember-data.js'
    , 'ember-resolver.js'
    , 'main.js'
    ]

Not sure how to solve this. I guess the best way would be for ic-ajax to name it's file less ambiguously, but I would say that broccoli-es6-concatenator should support this, perhaps ic-ajax/main.js.

The same issue would exist on inputFiles too, I think?

Error: Invalid access to private name

There's an issue with es6-module-transpiler < 0.5.0 that prevents it being loaded into a VM more than once. I've created an example of this issue here: https://github.com/aexmachina/broccoli-es6-concatenator/tree/multi-module-issue. As soon as it's require()d more than once it throws an error Error: Invalid access to private name.

This issue has been encountered in various other places as well, and the solution seems to be to upgrade to 0.5.0, but there's no clear upgrade path at this stage.

Update to latest es6-module-transpiler

I just updated the transpiler to v0.5.0. The API is very different. Not all features are the same (some added, some removed). Let me know if you have any trouble!

File name in error message for syntax errors

Currently the error message for a syntax error is not very helpful. The line number is given but not the file name. So If you've made changes to a few files at once, it can be hard to track down the mistake. The stack trace of transpiler is also not very informative and I would suggest not displaying it.

Here is an example of the current output:

/usr/local/share/npm/lib/node_modules/ember-cli/lib/cli.js:13
  throw error;
        ^
Error: Line 6: Unexpected token {
    at throwError (/Users/baruch/Documents/Development/ember-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:2579:21)
    at throwUnexpected (/Users/baruch/Documents/Development/ember-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:2641:9)
    at expect (/Users/baruch/Documents/Development/ember-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:2650:13)
    at parseIfStatement (/Users/baruch/Documents/Development/ember-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:4007:9)
    at parseStatement (/Users/baruch/Documents/Development/ember-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:4505:24)
    at /Users/baruch/Documents/Development/ember-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:5661:38
    at parseSourceElement (/Users/baruch/Documents/Development/ember-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:5071:24)
    at parseFunctionSourceElements (/Users/baruch/Documents/Development/ember-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:4603:29)
    at /Users/baruch/Documents/Development/ember-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:5661:38
    at parseConciseBody (/Users/baruch/Documents/Development/ember-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:4551:20)