bower-import.md

Bower Import

Goal

To be able to install a package from bower and require it into your application with AMD (or ES6 module syntax if using and ES6 to AMD transpiler). For now it is a separate library to be used as a bower postintall script but the hope is to get it into bower by default.

Why AMD?

1. AMD maps semantically to ES6 modules better than node-style CJS modules.
2. It has to work without a dependency on an application-level build task.

Why Bower?

1. Bower has over 4,000 modules already in its registry.
2. The bower developers are sympathetic to browser application development.
3. Bower has no opinions on module loading yet, giving us the freedom to make something that maps as closely as possible to the future when ES6 modules and loaders are available.

Requirements

1. Support packages that support AMD already or are authored with ES6 modules.
   1. Need to be able to require single module dependencies, like jQuery.
   2. Need to be able to require multiple module dependencies, like a pretend underscore: define(['underscore/each'], ...);
2. Support packages that export a single global with no module support.

Implementation

1. The module's main file is parsed (with esprima, or whatever)
2. If ES6 is detected, transpile to AMD.
3. Detect AMD support
   1. If supported, find any dependencies to internal modules
      1. If none, copy the file into bower_components/<module-name>.js.
      2. If found, create an adapter module at bower_components/<module-name>.js that looks like:

         define(['<module-main.js>'], function(module) { return module; });
         

   2. If not supported, create an adapter file at bower_components/<module-name>.js that looks like:

      define(['<module-main.js>', module.deps...], function() {
        return <module-global>;
      });
      

      Can prompt the user for the global exported or try to find it on the AST.
4. Use it and wet pants.