[Deprecated] Illusionist will make you believe ES6 is already available in browsers
JavaScript
Latest commit fc9b0f3 Mar 6, 2015 @remiprev remiprev Merge pull request #11 from mirego/feature/deprecation-notice
Add deprecation notice in README.md
Permalink
Failed to load latest commit information.
bin Add module type option Feb 10, 2014
lib
test Add module type option Feb 10, 2014
.gitignore Add tests and update README Feb 10, 2014
.jshintrc First commit Jan 22, 2014
.travis.yml Update and freeze dependencies Nov 27, 2014
LICENSE.md Update copyright year Jan 5, 2015
README.md Add deprecation notice in README.md Mar 5, 2015
package.json Update to the latest mocha, for real Nov 27, 2014

README.md

Illusionist

NPM version Build status Code Climate Dependency Status

Illusionist will make you believe ES6 is already available in browsers

Deprecation notice

⚠️ This repository is now deprecated in favor of babel which supports ECMAScript transpilation and module exporting.

Installation

$ npm install -g illusionist

Command-line

Usage: illusionist [options] [< in [> out]]
                   [file|dir ...]

  Options:

    -h, --help         Display help information
    -m, --module-name  Module name for stdin
    -M, --module-type  Module type [default: amd] (Options: amd, cjs, globals)
    -o, --out <dir>    Output to <dir> when passing files
    -v, --version      Display the version of Illusionist
    -w, --watch        Watch file(s) for changes and re-compile

STDIO Transpilation Example

Illusionist reads from stdin and outputs to stdout:

$ illusionist < es6-file.js > es5-file.js

You can also test transpilation right in the terminal. Type Ctrl-D for EOF.

$ illusionist
class Foo {
  constructor() {
    console.log('Foo');
  }
}

Compiling files and directories

Illusionist also accepts files and directories.

This would compile files in assets/javascripts to public/javascripts

illusionist assets/javascripts --out public/javascripts

You can also pass multiple paths:

illusionist foo-1.js foo-2.js some-folder/ --out public/

Compiling a directory tree

Say you have a structure like this:

/my-app/app/assets/javascripts
├── application.js
├── components
│   └── foo_component.js
├── controllers
│   └── foo_controller.js
└── models
    └── foo.js

You can keep this structure when outputing to the --out directory with:

illusionist --tree --out public/ app/assets/javascripts/

Node module

The module can take 3 options:

  • moduleName - defines the AMD module name.
    Passing this option will ignore fileName and basePath.
  • fileName - path to the file, used to define the AMD module name
  • basePath - when passing basePath and fileName, the AMD module name will be fileName relative to basePath
// Module will be named 'controllers/foo_controller'
illusionist(stringOfES6, {moduleName: 'controllers/foo_controller'}).render();

// Module will be named 'controllers/foo_controller'
illusionist(stringOfES6, {
  basePath: '/Volumes/mirego/MyApp/assets/js/',
  fileName: '/Volumes/mirego/MyApp/assets/js/controllers/foo_controller.js'
}).render();

// Module will be named 'foo_controller'
illusionist(stringOfES6, {
  fileName: '/Volumes/mirego/MyApp/assets/js/controllers/foo_controller.js'
}).render();

Async version

var illusionist = require('illusionist');
illusionist(stringOfES6, {fileName: 'outputFileName.js'}).render(function(err, stringOfES5) {
  // yay we have ES5 code!
});

Sync version

var illusionist = require('illusionist');
var es5Code = illusionist(stringOfES6, {fileName: 'outputFileName.js'}).render();

Supported ES6 features

Illusionist is really just a wrapper for jstransform and es6-module-transpiler.
So for now, the features are:

Arrow functions

$('#element').on('click', (e) => {
  // `this` refers to the parent scope
});

class, extends, super and short method definitions

class Triangle extends Polygon {
  constructor(sides) {
    this.sides = sides;
    super();
  }

  render() {
    // ...
    super.render();
  }
}

Object short notation

function foo(x, y) {
  return {x, y}; // => {x: x, y: y}
};

function init({port, ip, coords: {x, y}}) {}

Rest parameters

function myConsole(...args) {
  console.log.apply(console, args);
}

Templates

var foo = `
  <div>Hello ${this.name.toUpperCase()}!</div>
  <div>This is nice</div>
`;

import, export and module

Note that for the time being, all modules are transpiled to AMD.

Named Exports

You can export specific variables:

// foobar.js
var foo = "foo", bar = "bar";
export { foo, bar };

// OR

export var foo = "foo";
export var bar = "bar";

And import them like this:

import { foo, bar } from 'foobar';

Default Exports

You can export a default export:

// jquery.js
var jQuery = function() {};

jQuery.prototype = {
  // ...
};

export default = jQuery;

And import it like this:

import $ from 'jquery';

Other syntax

Whereas the import keyword imports specific identifiers from a module, the module keyword creates an object that contains all of a module’s exports:

module foobar from 'foobar';
console.log(foobar.foo);

Rails Asset Pipeline

If you wish to use Illusionist in your Ruby on Rails project, you can easily do so by using the sprockets-illusionist gem which will seamlessly compile .js.es6 files to .js files.

License

Illusionist is © 2014-2015 Mirego and may be freely distributed under the New BSD license.
See the LICENSE.md file.

About Mirego

Mirego is a team of passionate people who believe that work is a place where you can innovate and have fun. We’re a team of talented people who imagine and build beautiful Web and mobile applications. We come together to share ideas and change the world.

We also love open-source software and we try to give back to the community as much as we can.