systemjs/docs/creating-plugins.md

## Creating a Plugin

### Compiler plugins

The hooks compiler plugins can override are `locate`, `fetch`, `translate` and `instantiate`.

The behaviors of the hooks are:

* Locate: Overrides the location of the plugin resource
* Fetch: Called with second argument representing default fetch function, has full control of fetch output.
* Translate: Returns the translated source from `load.source`, can also set `load.metadata.sourceMap` for full source maps support.
* Instantiate: Providing this hook as a promise or function allows the plugin to hook instantiate. Any return value becomes the defined custom module object for the plugin call.

#### Sample CoffeeScript Plugin

For example, we can write a CoffeeScript plugin with the following:

coffee.js:
```javascript
var CoffeeScript = require('coffeescript');

exports.translate = function (load) {
  // optionally also set the sourceMap to support both builds and in-browser transpilation
  // load.metadata.sourceMap = generatedSourceMap;
  return CoffeeScript.compile(load.source);
}
```

```javascript
  System.import('app/main.coffee!coffee.js').then(function(main) {
    // main is now loaded from CoffeeScript
  });
```

#### Sample CSS Plugin

A CSS loading plugin can be written:

css.js:
```javascript
export.fetch = function (url) {
  return new Promise(function (resolve, reject) {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = url;
    link.onload = resolve;

    document.head.appendChild(link);
  })
  .then(function () {
    return '';
  });
}
```