minifier-friendly transpilation.js

// === Identifier rewriting for the ES6 module transpiler ===

// Proposal for minifier-friendly ES6 module transpiler output.
// This is for cases where we don't require any existing module
// format (AMD, CommonJS) and just want to emit a blackbox IIFE
// that uses modules internally. Those cases are Ember's normal
// global distribution (ember.min.js), as well as ES5 generated
// by the upcoming ember-cli ES6 stack.

// Do you all think this could work?

// Update: Having a massive IIFE scope (with all names that are
// imported/exported ever on it) causes performance issues:
// https://twitter.com/jo_liss/status/440552826054262784
// So this approach probably won't work. :(



// a.js
import { foo } from 'b'
console.log(foo)

// b.js
var foo = 42
export { foo }


// Transpiled:

(function() {
  var _module_b$$foo
  
  // a.js
  define('a', ['b'], function() { // note: this is not actual AMD anymore
    console.log(_module_b$$foo)
  })
  
  // b.js
  define('b', function() {
    _module_b$$foo = 42
  })
})()



// Cycles work:

// a.js
import { bar } from 'b'
function x() { console.log(bar) }
var foo = 1
export { foo }

// b.js
import { foo } from 'a'
function y() { console.log(foo) }
var bar = 2
export { bar }


// Transpiled:

(function() {
  var _module_a$$foo
  var _module_b$$bar
  
  // a.js
  define('a', ['b'], function() {
    function x() { console.log(_module_b$$bar) }
    _module_a$$foo = 1
  })
  
  // b.js
  define('b', ['a'], function() {
    function y() { console.log(_module_a$$foo) }
    _module_b$$bar = 2
  })
})()




// Note that to support re-exports we'd need to rewrite identifiers
// across module boundaries. As a result, the transpiler would have
// to look at the entire set of transpiled modules; it's no longer
// a dumb 1:1. Instead we'd need a transpiler that takes a bunch of
// modules and emits a single IIFE.


// We are not using real AMD here anymore, so we don't get to interoperate
// with AMD modules (unless we put more code in), but on the upside
// we get to do some further optimizations, like replacing AMD
// module name strings with minifiable var/function names.

// Using vars instead of object lookup probably helps performance as well.
// This can be important when we have imports/exports in hot paths, like
// import { get, set } from 'ember'

Discussion on Twitter please: https://twitter.com/jo_liss/status/440507514216382464