8. Creating a Plugin - rbarilani/systemjs GitHub Wiki

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:

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);
}

  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:

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 '';
  });
}