-- -## Node.js - -### CLI - -**Install** - -```sh -$ npm install --global 6to5 -``` - -**Usage** - -```sh -$ 6to5 script.js -``` - -Find your guide
-- It doesn't matter if you're using Node.js or Rails, Gulp or Grunt, there's likely a guide on - this page to help guide you. Go ahead and ⌘ + F - whatever you're looking for. If it doesn't happen to be on this page you might want to stop by - our support chat. -
-
-- -### Require Hook - -**Install** - -```sh -$ npm install 6to5 -``` - -**Usage** - -All subsequent files required by node with the extensions `.es6` and `.js` will -be transformed by 6to5. The polyfill specified in [Polyfill](polyfill.md) is -also required. - -```javascript -require('6to5/register'); -``` - -- For full documentation on the 6to5 CLI see the - usage docs. -
-
-- -## Rails - -### Sprockets - -- For full documentation on the 6to5 require hook see the - usage docs. -
-
-- -**Install** - -```sh -$ gem install sprockets-es6 -``` - -**Usage** - -```rb -# Gemfile -gem 'sprockets' -gem 'sprockets-es6' -``` - -```rb -require 'sprockets/es6' -``` - -## Build Systems - -### Brocolli - -- See sprockets-es6's - repo for more info. If - you find any bugs please - report them. -
-- Issues with the output should be reported on the 6to5 - issue tracker. -
-
-- -**Install** - -```sh -$ npm install --save-dev broccoli-6to5-transpiler -``` - -**Usage** - -```js -var to5Transpiler = require('broccoli-6to5-transpiler'); -var scriptTree = to5Transpiler(inputTree, options); -``` - -- See broccoli-6to5-transpiler's - repo for more - info. If you find any bugs please - report - them. -
-- Issues with the output should be reported on the 6to5 - issue tracker. -
-
-- -### Browserify - -Source maps
-- Currently this plugin only support inline source maps. If you need separate - source map feature, we welcome you to submit a pull request. -
-
-- -**Install** - -```sh -$ npm install --save-dev 6to5ify -``` - -**Usage via CLI** - -```sh -$ browserify script.js -t 6to5ify --outfile bundle.js -``` - -**Usage via Node.js** - -```js -browserify({ debug: true }) - .transform(to5ify); -``` - -Or a more complete example: - -```js -var fs = require('fs'); -var browserify = require('browserify'); -var to5ify = require('6to5ify'); - -browserify({ debug: true }) - .transform(to5ify) - .require('./script.js', { entry: true }) - .bundle() - .on('error', function (err) { console.log('Error: ' + err.message); }) - .pipe(fs.createWriteStream("bundle.js")); -``` -**Passing Options** - -```sh -$ browserify -d -e script.js -t [ 6to5ify --blacklist generators ] -``` - -```js -browserify().transform(to5ify.configure({ - blacklist: ['generators'] -})) -``` - -- See 6to5ify's - repo for more info. If you - find any bugs please - report them. -
-- Issues with the output should be reported on the 6to5 - issue tracker. -
-
-- -### Brunch - -More info
-- For more information see the - 6to5ify README -
-
-- -**Install** - -```sh -$ npm install --save-dev 6to5-brunch -``` - -**Configuring** - -Set 6to5 options in your brunch config (such as `brunch-config.coffee`) except -for `filename` and `sourceMap` which are handled internally. - -```coffee -plugins: - ES6to5: - whitelist: ['arrowFunctions'] - format: - semicolons: false -``` - -### Duo - -- See 6to5-brunch's - repo for more info. If you - find any bugs please - report them. -
-- Issues with the output should be reported on the 6to5 - issue tracker. -
-
-- -**Install** - -```sh -$ npm install --save-dev duo-6to5 -``` - -**Usage via CLI** - -```sh -$ duo --use duo-6to5 -``` - -**Usage via Node.js** - -```js -Duo(root) - .entry(entry) - .use(to5) - .run(fn); -``` - -### Gobble - -- See duo-6to5's - repo for more info. If you - find any bugs please - report them. -
-- Issues with the output should be reported on the 6to5 - issue tracker. -
-
-- -**Install** - -```sh -$ npm install --save-dev gobble-6to5 -``` - -**Usage** - -The `options` argument, if specified, is passed to 6to5. - -``` -var gobble = require('gobble'); -module.exports = gobble('src').transform('6to5', options); -``` - -**Source maps** - -Sourcemaps are created by default (all the relevant information is filled in by -Gobble, you don't need to specify `sourceMapName` options etc). If you don't -want that, pass `sourceMap: false`. - -### Grunt - -- See gobble-6to5's - repo for more info. If you - find any bugs please - report them. -
-- Issues with the output should be reported on the 6to5 - issue tracker. -
-
-- -**Install** - -```sh -$ npm install --save-dev grunt-6to5 -``` - -**Usage** - -```js -require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks - -grunt.initConfig({ - '6to5': { - options: { - sourceMap: true - }, - dist: { - files: { - 'dist/app.js': 'src/app.js' - } - } - } -}); - -grunt.registerTask('default', ['6to5']); -``` - -### Gulp - -- See grunt-6to5's - repo for more info. If you - find any bugs please - report them. -
-- Issues with the output should be reported on the 6to5 - issue tracker. -
-
-- -**Install** - -```sh -$ npm install --save-dev gulp-6to5 -``` - -**Usage** - -```js -var gulp = require('gulp'); -var to5 = require('gulp-6to5'); - -gulp.task('default', function () { - return gulp.src('src/app.js') - .pipe(to5()) - .pipe(gulp.dest('dist')); -}); -``` - -**Source maps** - -Use [gulp-sourcemaps](https://github.com/floridoo/gulp-sourcemaps) like this: - -```js -var gulp = require('gulp'); -var sourcemaps = require('gulp-sourcemaps'); -var to5 = require('gulp-6to5'); -var concat = require('gulp-concat'); - -gulp.task('default', function () { - return gulp.src('src/**/*.js') - .pipe(sourcemaps.init()) - .pipe(to5()) - .pipe(concat('all.js')) - .pipe(sourcemaps.write('.')) - .pipe(gulp.dest('dist')); -}); -``` - -### Webpack - -- See gulp-6to5's - repo for more info. If you - find any bugs please - report them. -
-- Issues with the output should be reported on the 6to5 - issue tracker. -
-
-- -**Install** - -```sh -$ npm install --save-dev 6to5-loader -``` - -**Usage via loader** - -```js -import Animal from '6to5!./Animal.js'; - -class Person extends Animal { - constructor(arg='default') { - this.eat = 'Happy Meal'; - } -} - -export default Person; -``` -```js -var Person = require('6to5!./Person.js').default; -new Person(); -``` - -**Usage via config** - -```js -module: { - loaders: [ - { test: /\.js$/, exclude: /node_modules/, loader: '6to5-loader'} - ] -} -``` - -and then import normally: - -```js -import Person from './Person.js'; -``` - -- See 6to5-loader's - repo for more info. If you - find any bugs please - report them. -
-- Issues with the output should be reported on the 6to5 - issue tracker. -
-
-- -## Misc - -### Connect - -Troubleshooting
-- For additional information on how to troubleshoot **6to5-loader** please - see the - README. -
-
-- -**Install** - -```js -$ npm install 6to5-connect -``` - -**Usage** - -```js -var to5Middleware = require('6to5-connect'); - -app.use(to5Middleware({ - options: { - // options to use when transforming files - }, - src: 'assets', - dest: 'cache' -})); - -app.use(connect.static('cache')); -``` - -### Jade - -- See 6to5-connect's - repo for more info. If - you find any bugs please - report them. -
-- Issues with the output should be reported on the 6to5 - issue tracker. -
-
-- -**Install** - -```js -$ npm install jade-6to5 -``` - -**Usage** - -```js -var jade = require('jade'); -var to5 = require('jade-6to5'); - -jade.filters.to5 = to5({}); -``` - -OR - -```js -var jade = require('jade'); -var to5 = require('jade-6to5'); - -jade = to5({}, jade); -``` - -Now you can use ES6 in your jade templates as following. - -```jade -script - :to5 - console.log('Hello World !!!'); - class Person { - constructor(name) { - this.name = name; - } - sayName(){ - console.log(`Hello, my name is ${this.name}`); - } - } - var person = new Person('Apoxx'); - person.sayName(); -``` - -### Jest - -- See jade-6to5's - repo for more info. If you - find any bugs please - report them. -
-- Issues with the output should be reported on the 6to5 - issue tracker. -
-
-- -**Install** - -```sh -$ npm install --save-dev 6to5-jest -``` - -**Usage** - -In your `package.json` file please make the following changes: - -``` -{ - "dependencies": { - "6to5-jest": "*", - "jest": "*" - }, - "scripts": { - "test": "jest" - }, - "jest": { - "scriptPreprocessor": "- See 6to5-jest's - repo for more info. If you - find any bugs please - report them. -
-- Issues with the output should be reported on the 6to5 - issue tracker. -
-
-- -**Install** - -```js -npm install --save-dev karma-6to5-preprocessor -``` - -**Usage** - -See 6to5 options for more details. - -Given `options` properties are passed to 6to5 with no change except: - -- `filename` -- `sourceMapName` -- `sourceFileName` - -Because they should differ from file to file, corresponding configuration -functions are available. - -For example, inline sourcemap configuration would look like the following. - -```js -module.exports = function(config) { - config.set({ - files: [ - 'src/**/*.js', - 'test/**/*.js' - ], - preprocessors: { - 'src/**/*.js': ['6to5'], - 'test/**/*.js': ['6to5'] - }, - '6to5Preprocessor': { - options: { - sourceMap: 'inline' - }, - filename: function(file) { - return file.originalPath.replace(/\.js$/, '.es5.js'); - }, - sourceFileName: function(file) { - return file.originalPath; - } - } - }); -}; -``` - -### Mocha - -- See karma-6to5-preprocessor's - repo for more - info. If you find any bugs please - report them. -
-- Issues with the output should be reported on the 6to5 - issue tracker. -
-
-- -**Install** - -```sh -$ npm install --save-dev 6to5 -``` - -**Usage** - -```js -{ - "scripts": { - "test": "mocha --require 6to5/register" - }, - "devDependencies": { - "6to5": "*", - "mocha": "*" - } -} -``` diff --git a/doc/tour.md b/doc/tour.md deleted file mode 100644 index ad406ba52e..0000000000 --- a/doc/tour.md +++ /dev/null @@ -1,771 +0,0 @@ ---- -layout: docs -title: Tour -description: A detailed overview of ECMAScript 6 features. -permalink: /docs/tour/ -redirect_from: /features.html ---- - -- See 6to5-mocha's - repo for more info. If you - find any bugs please - report them. -
-- Issues with the output should be reported on the 6to5 - issue tracker. -
-
-- -es6features
-- This document is taken from Luke Hoban's excellent - es6features repo. Go give it a star - on GitHub! -
-
-- -## Introduction - -> ECMAScript 6 is the upcoming version of the ECMAScript standard. This -standard is targeting ratification in June 2015. ES6 is a significant update to -the language, and the first update to the language since ES5 was standardized in -2009. Implementation of these features in major JavaScript engines is -[underway now](http://kangax.github.io/es5-compat-table/es6/). - -See the [draft ES6 standard](https://people.mozilla.org/~jorendorff/es6-draft.html) -for full specification of the ECMAScript 6 language. - -## ECMAScript 6 Features - -### Arrows - -Arrows are a function shorthand using the `=>` syntax. They are syntactically -similar to the related feature in C#, Java 8 and CoffeeScript. They support -both expression and statement bodies. Unlike functions, arrows share the same -lexical `this` as their surrounding code. - -```js -// Expression bodies -var odds = evens.map(v => v + 1); -var nums = evens.map((v, i) => v + i); - -// Statement bodies -nums.forEach(v => { - if (v % 5 === 0) - fives.push(v); -}); - -// Lexical this -var bob = { - _name: "Bob", - _friends: [], - printFriends() { - this._friends.forEach(f => - console.log(this._name + " knows " + f)); - } -} -``` - -### Classes - -ES6 classes are a simple sugar over the prototype-based OO pattern. Having a -single convenient declarative form makes class patterns easier to use, and -encourages interoperability. Classes support prototype-based inheritance, super -calls, instance and static methods and constructors. - -```js -class SkinnedMesh extends THREE.Mesh { - constructor(geometry, materials) { - super(geometry, materials); - - this.idMatrix = SkinnedMesh.defaultMatrix(); - this.bones = []; - this.boneMatrices = []; - //... - } - update(camera) { - //... - super.update(); - } - static defaultMatrix() { - return new THREE.Matrix4(); - } -} -``` - -### Enhanced Object Literals - -Object literals are extended to support setting the prototype at construction, -shorthand for `foo: foo` assignments, defining methods and making super calls. -Together, these also bring object literals and class declarations closer -together, and let object-based design benefit from some of the same -conveniences. - -```js -var obj = { - // __proto__ - __proto__: theProtoObj, - // Shorthand for ‘handler: handler’ - handler, - // Methods - toString() { - // Super calls - return "d " + super.toString(); - }, - // Computed (dynamic) property names - [ 'prop_' + (() => 42)() ]: 42 -}; -``` - -REPL
-- Be sure to try these features out in the online - REPL. -
-
-- -### Template Strings - -Template strings provide syntactic sugar for constructing strings. This is -similar to string interpolation features in Perl, Python and more. Optionally, a -tag can be added to allow the string construction to be customized, avoiding -injection attacks or constructing higher level data structures from string -contents. - -```js -// Basic literal string creation -`In JavaScript '\n' is a line-feed.` - -// Multiline strings -`In JavaScript this is - not legal.` - -// Construct a DOM query -var name = "Bob", time = "today"; -`Hello ${name}, how are you ${time}?` - -// Construct an HTTP request prefix is used to interpret the replacements and construction -GET`http://foo.org/bar?a=${a}&b=${b} - Content-Type: application/json - X-Credentials: ${credentials} - { "foo": ${foo}, - "bar": ${bar}}`(myOnReadyStateChangeHandler); -``` - -### Destructuring - -Destructuring allows binding using pattern matching, with support for matching -arrays and objects. Destructuring is fail-soft, similar to standard object -lookup `foo["bar"]`, producing `undefined` values when not found. - -```js -// list matching -var [a, , b] = [1,2,3]; - -// object matching -var { op: a, lhs: { op: b }, rhs: c } - = getASTNode() - -// object matching shorthand -// binds `op`, `lhs` and `rhs` in scope -var {op, lhs, rhs} = getASTNode() - -// Can be used in parameter position -function g({name: x}) { - console.log(x); -} -g({name: 5}) - -// Fail-soft destructuring -var [a] = []; -a === undefined; - -// Fail-soft destructuring with defaults -var [a = 1] = []; -a === 1; -``` - -### Default + Rest + Spread - -Callee-evaluated default parameter values. Turn an array into consecutive -arguments in a function call. Bind trailing parameters to an array. Rest -replaces the need for `arguments` and addresses common cases more directly. - -```js -function f(x, y=12) { - // y is 12 if not passed (or passed as undefined) - return x + y; -} -f(3) == 15 -``` -```js -function f(x, ...y) { - // y is an Array - return x * y.length; -} -f(3, "hello", true) == 6 -``` -```js -function f(x, y, z) { - return x + y + z; -} -// Pass each elem of array as argument -f(...[1,2,3]) == 6 -``` - -### Let + Const - -Block-scoped binding constructs. `let` is the new `var`. `const` is -single-assignment. Static restrictions prevent use before assignment. - - -```js -function f() { - { - let x; - { - // okay, block scoped name - const x = "sneaky"; - // error, const - x = "foo"; - } - // error, already declared in block - let x = "inner"; - } -} -``` - -### Iterators + For..Of - -Iterator objects enable custom iteration like CLR IEnumerable or Java -Iteratable. Generalize `for..in` to custom iterator-based iteration with -`for..of`. Don’t require realizing an array, enabling lazy design patterns like -LINQ. - -```js -let fibonacci = { - [Symbol.iterator]() { - let pre = 0, cur = 1; - return { - next() { - [pre, cur] = [cur, pre + cur]; - return { done: false, value: cur } - } - } - } -} - -for (var n of fibonacci) { - // truncate the sequence at 1000 - if (n > 1000) - break; - print(n); -} -``` - -Iteration is based on these duck-typed interfaces (using -[TypeScript](http://typescriptlang.org) type syntax for exposition only): - -```ts -interface IteratorResult { - done: boolean; - value: any; -} -interface Iterator { - next(): IteratorResult; -} -interface Iterable { - [Symbol.iterator](): Iterator -} -``` - -### Generators - -Generators simplify iterator-authoring using `function*` and `yield`. A function -declared as function* returns a Generator instance. Generators are subtypes of -iterators which include additional `next` and `throw`. These enable values to -flow back into the generator, so `yield` is an expression form which returns a -value (or throws). - -Note: Can also be used to enable ‘await’-like async programming, see also ES7 -`await` proposal. - -```js -var fibonacci = { - [Symbol.iterator]: function*() { - var pre = 0, cur = 1; - for (;;) { - var temp = pre; - pre = cur; - cur += temp; - yield cur; - } - } -} - -for (var n of fibonacci) { - // truncate the sequence at 1000 - if (n > 1000) - break; - print(n); -} -``` - -The generator interface is (using [TypeScript](http://typescriptlang.org) type -syntax for exposition only): - -```ts -interface Generator extends Iterator { - next(value?: any): IteratorResult; - throw(exception: any); -} -``` - -### Comprehensions - -Array and generator comprehensions provide simple declarative list processing -similar as used in many functional programming patterns. - -```js -// Array comprehensions -var results = [ - for(c of customers) - if (c.city == "Seattle") - { name: c.name, age: c.age } -] - -// Generator comprehensions -var results = ( - for(c of customers) - if (c.city == "Seattle") - { name: c.name, age: c.age } -) -``` - -### Unicode - -Non-breaking additions to support full Unicode, including new unicode literal -form in strings and new RegExp `u` mode to handle code points, as well as new -APIs to process strings at the 21bit code points level. These additions support -building global apps in JavaScript. - -```js -// same as ES5.1 -"𠮷".length == 2 - -// new RegExp behaviour, opt-in ‘u’ -"𠮷".match(/./u)[0].length == 2 - -// new form -"\u{20BB7}"=="𠮷" == "\uD842\uDFB7" - -// new String ops -"𠮷".codePointAt(0) == 0x20BB7 - -// for-of iterates code points -for(var c of "𠮷") { - console.log(c); -} -``` - -### Modules - -Language-level support for modules for component definition. Codifies patterns -from popular JavaScript module loaders (AMD, CommonJS). Runtime behaviour -defined by a host-defined default loader. Implicitly async model – no code -executes until requested modules are available and processed. - -```js -// lib/math.js -export function sum(x, y) { - return x + y; -} -export var pi = 3.141593; -``` -```js -// app.js -module math from "lib/math"; -alert("2π = " + math.sum(math.pi, math.pi)); -``` -```js -// otherApp.js -import {sum, pi} from "lib/math"; -alert("2π = " + sum(pi, pi)); -``` - -Some additional features include `export default` and `export *`: - -```js -// lib/mathplusplus.js -export * from "lib/math"; -export var e = 2.71828182846; -export default function(x) { - return Math.exp(x); -} -``` -```js -// app.js -module math from "lib/mathplusplus"; -import exp from "lib/mathplusplus"; -alert("2π = " + exp(math.pi, math.e)); -``` - --
-__proto__support comes from the JavaScript engine running - your program. Although most support the now standard property, - some do not. -
-- -### Module Loaders - -Module loaders support: -- Dynamic loading -- State isolation -- Global namespace isolation -- Compilation hooks -- Nested virtualization - -The default module loader can be configured, and new loaders can be constructed -to evaluated and load code in isolated or constrained contexts. - -```js -// Dynamic loading – ‘System’ is default loader -System.import('lib/math').then(function(m) { - alert("2π = " + m.sum(m.pi, m.pi)); -}); - -// Create execution sandboxes – new Loaders -var loader = new Loader({ - global: fixup(window) // replace ‘console.log’ -}); -loader.eval("console.log('hello world!');"); - -// Directly manipulate module cache -System.get('jquery'); -System.set('jquery', Module({$: $})); // WARNING: not yet finalized -``` - -Module Formatters
-- 6to5 can transpile ES6 Modules to several different formats including - Common.js, AMD, System, and UMD. You can even create your own. For more - details see the modules docs. -
-
-- -Additional polyfill needed
-- Since 6to5 defaults to using common.js modules, it does not include the - polyfill for the module loader api. Get it - here. -
-
-- - -### Map + Set + WeakMap + WeakSet - -Efficient data structures for common algorithms. WeakMaps provides leak-free -object-key’d side tables. - -```js -// Sets -var s = new Set(); -s.add("hello").add("goodbye").add("hello"); -s.size === 2; -s.has("hello") === true; - -// Maps -var m = new Map(); -m.set("hello", 42); -m.set(s, 34); -m.get(s) == 34; - -// Weak Maps -var wm = new WeakMap(); -wm.set(s, { extra: 42 }); -wm.size === undefined - -// Weak Sets -var ws = new WeakSet(); -ws.add({ data: 42 }); -// Because the added object has no other references, it will not be held in the set -``` - -Using Module Loader
-- In order to use this, you'll need to tell 6to5 to use the -
-systemmodule formatter. Also be sure to check out - System.js -
-- -### Proxies - -Proxies enable creation of objects with the full range of behaviors available to -host objects. Can be used for interception, object virtualization, -logging/profiling, etc. - -```js -// Proxying a normal object -var target = {}; -var handler = { - get: function (receiver, name) { - return `Hello, ${name}!`; - } -}; - -var p = new Proxy(target, handler); -p.world === 'Hello, world!'; -``` - -```js -// Proxying a function object -var target = function () { return 'I am the target'; }; -var handler = { - apply: function (receiver, ...args) { - return 'I am the proxy'; - } -}; - -var p = new Proxy(target, handler); -p() === 'I am the proxy'; -``` - -There are traps available for all of the runtime-level meta-operations: - -```js -var handler = -{ - get:..., - set:..., - has:..., - deleteProperty:..., - apply:..., - construct:..., - getOwnPropertyDescriptor:..., - defineProperty:..., - getPrototypeOf:..., - setPrototypeOf:..., - enumerate:..., - ownKeys:..., - preventExtensions:..., - isExtensible:... -} -``` - -Support via polyfill
-- In order to support Promises you must include the 6to5 Polyfill. -
-
-- -### Symbols - -Symbols enable access control for object state. Symbols allow properties to be -keyed by either `string` (as in ES5) or `symbol`. Symbols are a new primitive -type. Optional `name` parameter used in debugging - but is not part of identity. -Symbols are unique (like gensym), but not private since they are exposed via -reflection features like `Object.getOwnPropertySymbols`. - -```js -(function() { - - // module scoped symbol - var key = Symbol("key"); - - function MyClass(privateData) { - this[key] = privateData; - } - - MyClass.prototype = { - doStuff: function() { - ... this[key] ... - } - }; - -})(); - -var c = new MyClass("hello") -c["key"] === undefined -``` - -Unsupported feature
-- Due to the limitations of ES5, Proxies cannot be transpiled or polyfilled. - See support from various - JavaScript - engines. -
-
-- -### Subclassable Built-ins -In ES6, built-ins like `Array`, `Date` and DOM `Element`s can be subclassed. - -Object construction for a function named `Ctor` now uses two-phases (both -virtually dispatched): - -- Call `Ctor[@@create]` to allocate the object, installing any special behavior -- Invoke constructor on new instance to initialize - -The known `@@create` symbol is available via `Symbol.create`. Built-ins now -expose their `@@create` explicitly. - -```js -// Pseudo-code of Array -class Array { - constructor(...args) { /* ... */ } - static [Symbol.create]() { - // Install special [[DefineOwnProperty]] - // to magically update 'length' - } -} - -// User code of Array subclass -class MyArray extends Array { - constructor(...args) { super(...args); } -} - -// Two-phase 'new': -// 1) Call @@create to allocate object -// 2) Invoke constructor on new instance -var arr = new MyArray(); -arr[1] = 12; -arr.length == 2 -``` - -### Math + Number + String + Object APIs - -Many new library additions, including core Math libraries, Array conversion -helpers, and Object.assign for copying. - -```js -Number.EPSILON -Number.isInteger(Infinity) // false -Number.isNaN("NaN") // false - -Math.acosh(3) // 1.762747174039086 -Math.hypot(3, 4) // 5 -Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2 - -"abcde".contains("cd") // true -"abc".repeat(3) // "abcabcabc" - -Array.from(document.querySelectorAll('*')) // Returns a real Array -Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior -[0, 0, 0].fill(7, 1) // [0,7,7] -[1,2,3].findIndex(x => x == 2) // 1 -["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"] -["a", "b", "c"].keys() // iterator 0, 1, 2 -["a", "b", "c"].values() // iterator "a", "b", "c" - -Object.assign(Point, { origin: new Point(0,0) }) -``` - -Support via polyfill
-- In order to support Promises you must include the 6to5 Polyfill. -
-
-- -### Binary and Octal Literals -Two new numeric literal forms are added for binary (`b`) and octal (`o`). - -```js -0b111110111 === 503 // true -0o767 === 503 // true -``` - -Limited support from polyfill
-- Most of these APIs are supported by the 6to5 Polyfill. However, certain - features are omitted for various reasons (ie. -
-String.prototype.normalizeneeds a lot of additional code to - support). You can find more polyfills - here. -
-- - -### Promises - -Promises are a library for asynchronous programming. Promises are a first class -representation of a value that may be made available in the future. Promises are -used in many existing JavaScript libraries. - -```js -function timeout(duration = 0) { - return new Promise((resolve, reject) => { - setTimeout(resolve, duration); - }) -} - -var p = timeout(1000).then(() => { - return timeout(2000); -}).then(() => { - throw new Error("hmm"); -}).catch(err => { - return Promise.all([timeout(100), timeout(200)]); -}) -``` - -Only supports literal form
-- 6to5 is only able to transform
-0o767and not -Number('0o767'). -
-- -### Reflect API - -Full reflection API exposing the runtime-level meta-operations on objects. This -is effectively the inverse of the Proxy API, and allows making calls -corresponding to the same meta-operations as the proxy traps. Especially useful -for implementing proxies. - -```js -// No sample yet -``` - -Support via polyfill
-- In order to support Promises you must include the 6to5 Polyfill. -
-
-- -### Tail Calls - -Calls in tail-position are guaranteed to not grow the stack unboundedly. Makes -recursive algorithms safe in the face of unbounded inputs. - -```js -function factorial(n, acc = 1) { - 'use strict'; - if (n <= 1) return acc; - return factorial(n - 1, n * acc); -} - -// Stack overflow in most implementations today, -// but safe on arbitrary inputs in eS6 -factorial(100000) -``` - -Limited support from polyfill
-- Core.js only currently supports
-Reflect.ownKeys, if you would - like a much more complete Reflect API, include another polyfill such as - Harmony Reflect. -
-diff --git a/doc/usage/api.md b/doc/usage/api.md deleted file mode 100644 index 589ad688f9..0000000000 --- a/doc/usage/api.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -layout: docs -title: API -description: How to use the Node.js API. -permalink: /docs/usage/api/ ---- - - -```javascript -var to5 = require('6to5'); -``` - -## to5.transform - -Transforms the passed in `code`. - -``` -to5.transform(code, [options]) -``` - -**Example** - -```js -var result = to5.transform('code();', options); -result.code; -result.map; -result.ast; -``` - -## to5.transformFile - -Asynchronously transforms the entire contents of a file. - -```js -to5.transformFile(filename, [options], callback) -``` - -**Example** - -```js -to5.transformFile('filename.js', options, function (err, result) { - result.code; -}); -``` - -## to5.transformFileSync - -Synchronous version of `to5.transformFile`. Returns the transformed contents of -the `filename`. - -```js -to5.transformFileSync(filename, [options]) -``` - -**Example** - -```js -to5.transformFileSync('filename.js', options).code; -``` diff --git a/doc/usage/browser.md b/doc/usage/browser.md deleted file mode 100644 index 28dcfe2258..0000000000 --- a/doc/usage/browser.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -layout: docs -title: Browser -description: How to transpile in the browser. -permalink: /docs/usage/browser/ -redirect_from: /browser.html ---- - -Unsupported feature
-- Due to high complexity of transpiling Tail Calls, 6to5 does not currently - have them implemented. See - #256. -
-
- A browser version of 6to5 is available from `browser.js` inside the 6to5 - directory in an npm release. -
- --- -## Script tags - -When the `browser.js` file is included all scripts with the type -`text/ecmascript-6` and `text/6to5` are automatically compiled and ran. - -```html - - -``` - -## API - -Programmatically transpile and execute strings of ES6 code. - -See [options](#options) for additional documentation. - -### `to5.transform(code, [opts])` - -```js -to5.transform('class Test {}').code; -``` - -### `to5.run(code, [opts])` - -````js -to5.run('class Test {}'); -```` diff --git a/doc/usage/cli.md b/doc/usage/cli.md deleted file mode 100644 index 6e71a7c145..0000000000 --- a/doc/usage/cli.md +++ /dev/null @@ -1,99 +0,0 @@ ---- -layout: docs -title: CLI -description: How to use the CLI tools. -permalink: /docs/usage/cli/ -redirect_from: /usage.html ---- - -Not intended for serious use
-- Compiling in the browser has a fairly limited use case, so if you are - working on a production site you should be precompiling your scripts - server-side. See setup build systems - for more information. -
-
- 6to5 comes with a built-in CLI which can be used to compile files from the - command line. -
- -## Install - -Using [npm](https://www.npmjs.com/) you can install 6to5 globally, making it -available from the command line. - -```sh -$ npm install --global 6to5 -``` - -## 6to5 - -#### Compile Files - -Compile the file `script.js` and **output to stdout**. - -```sh -$ 6to5 script.js -# output... -``` - -If you would like to **output to a file** you may use `--out-file` or `-o`. - -```sh -$ 6to5 script.js --out-file script-compiled.js -``` - -### Compile with Source Maps - -If you would then like to add a **source map file** you can use -`--source-maps` or `-s`. [Learn more about source maps](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/). - -```sh -$ 6to5 script.js --out-file script-compiled.js --source-maps -``` - -If you would rather have **inline source maps**, you may use -`--source-maps-inline` or `-t`. - -```sh -$ 6to5 script.js --out-file script-compiled.js --source-maps-inline -``` - -### Compile Directories - -Compile the entire `src` directory and output it to the `lib` directory. - -```sh -$ 6to5 src --out-dir lib -``` - -Compile the entire `src` directory and output it to the one concatenated file. - -```sh -$ 6to5 src --out-file script-compiled.js -``` - -### Piping Files - -Pipe a file in via stdin and output it to `script-compiled.js` - -```sh -$ 6to5 --out-file script-compiled.js < script.js -``` - -## 6to5-node - -6to5 comes with a second CLI which works exactly the same as Node.js's CLI, only -it will compile ES6 code before running it. - -Launch a REPL (Read-Eval-Print-Loop). - -```sh -$ 6to5-node -``` - -Evaluate code. - -```sh -$ 6to5-node -e "class Test { }" -``` - -Compile and run `test.js`. - -```sh -$ 6to5-node test -``` diff --git a/doc/usage/experimental.md b/doc/usage/experimental.md deleted file mode 100644 index 4386404504..0000000000 --- a/doc/usage/experimental.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -layout: docs -title: Experimental -description: How to use experimental ES7 features. -permalink: /docs/usage/experimental/ -redirect_from: /experimental.html ---- - -> 6to5 also has experimental support for ES7 proposals. - --- -#### Usage - -```js -$ 6to5 --experimental -``` - -```js -to5.transform('code', { experimental: true }); -``` diff --git a/doc/usage/jsx.md b/doc/usage/jsx.md deleted file mode 100644 index 3a4283cabd..0000000000 --- a/doc/usage/jsx.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -layout: docs -title: JSX -description: How to use JSX. -permalink: /docs/usage/jsx/ ---- - -Subject to change
-- These proposals are subject to change so use with extreme - caution. 6to5 may update without warning in order to track spec - changes. Please do not use them in production applications. -
-
- 6to5 has built-in support for React v0.12. Tags are automatically transformed
- to their equivalent React.createElement(...) and
- displayName is automatically inferred and added to all
- React.createClass calls.
-
- 6to5 has the ability to transpile ES6 modules to the module system of your - choice. You can even easily create your own. -
- -## Usage - -```sh -$ 6to5 --modules common script.js -``` - -```js -to5.transform('import "foo";', { modules: "common" }); -``` - -## Formats - -### Common (Default) - -**Usage** - -```sh -$ 6to5 --modules common -``` - -**Example** - -```js -export default test; - -export {test}; -export var test = 5; - -import "foo"; - -import foo from "foo"; -import * as foo from "foo"; - -import {bar} from "foo"; -import {foo as bar} from "foo"; -``` - -```js -"use strict"; - -var _interopRequire = function (obj) { - return obj && (obj["default"] || obj); -}; - -exports = module.exports = test; - -exports.test = test; -var test = exports.test = 5; - -require("foo"); - -var foo = _interopRequire(require("foo")); - -var foo = require("foo"); - -var bar = require("foo").bar; -var bar = require("foo").foo; -``` - -### AMD - -**Usage** - -```sh -$ 6to5 --modules amd -``` - -**Example** - -```js -import foo from "foo"; - -export function bar() { - return foo("foobar"); -} -``` - -```js -define(["exports", "foo"], function (exports, _foo) { - "use strict"; - - var _interopRequire = function (obj) { - return obj && (obj["default"] || obj); - }; - - exports.bar = bar; - var foo = _interopRequire(_foo); - - function bar() { - return foo("foobar"); - } -}); -``` - -You can optionally specify to include the module id (using the `--amd-module-id` -argument): - -```js -define("filename", ["exports", "foo"], function (exports, _foo) {}) -``` - -### System - -**Usage** - -```sh -$ 6to5 --modules system -``` - -**Example** - -```js -import foo from "foo"; - -export function bar() { - return foo("foobar"); -} -``` - -```js -System.register("bar", ["foo"], function (_export) { - "use strict"; - - var __moduleName = "bar"; - - var foo; - function bar() { - return foo("foobar"); - } - return { - setters: [function (m) { - foo = m.default; - }], - execute: function () { - _export("bar", bar); - } - }; -}); -``` - -### UMD - -**Usage** - -```sh -$ 6to5 --modules umd -``` - -**Example** - -```js -import foo from "foo"; - -export function bar() { - return foo("foobar"); -} -``` - -```js -(function (factory) { - if (typeof define === "function" && define.amd) { - define(["exports", "foo"], factory); - } else if (typeof exports !== "undefined") { - factory(exports, require("foo")); - } -})(function (exports, _foo) { - "use strict"; - - var _interopRequire = function (obj) { - return obj && (obj["default"] || obj); - }; - - exports.bar = bar; - var foo = _interopRequire(_foo); - - function bar() { - return foo("foobar"); - } -}); -``` - -### Ignore - -**Usage** - -```sh -$ 6to5 --modules ignore -``` - -**Example** - -```js -import foo from "foo"; - -export function bar() { - return foo("foobar"); -} -``` - -```js -function bar() { - return foo("foobar"); -} -``` - -### Custom - -You can alternatively specify module names instead of one of the built-in types. - -**Usage** - -```js -$ 6to5 --modules custom-module-formatter -``` - -**Example** - -**`node_modules/custom-module-formatter/index.js`** - -```js -module.exports = ModuleFormatter; - -function ModuleFormatter() {} - -ModuleFormatter.prototype.transform = function (ast) { - // this is ran after all transformers have had their turn at modifying the ast - // feel free to modify this however -}; - -ModuleFormatter.prototype.importDeclaration = function (node, nodes) { - // node is an ImportDeclaration -}; - -ModuleFormatter.prototype.importSpecifier = function (specifier, node, nodes) { - // specifier is an ImportSpecifier - // node is an ImportDeclaration -}; - -ModuleFormatter.prototype.exportDeclaration = function (node, nodes) { - // node is an ExportDeclaration -}; - -ModuleFormatter.prototype.exportSpecifier = function (specifier, node, nodes) { - // specifier is an ExportSpecifier - // node is an ExportDeclaration -}; -``` diff --git a/doc/usage/options.md b/doc/usage/options.md deleted file mode 100644 index f6583f6945..0000000000 --- a/doc/usage/options.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -layout: docs -title: Options -description: Options for 6to5 transpiling. -permalink: /docs/usage/options/ ---- - -## Usage - -```js -to5.transform(code, options); -``` - -```sh -$ 6to5 --name=value -``` - -## Options - -| Option | Default | Description | -| ------------------ | -------------------- | ------------------------------- | -| `filename` | `"unknown"` | Filename for use in errors etc. | -| `fileNameRelative` | `(filename)` | Filename relative to `sourceRoot`. | -| `blacklist` | `[]` | Array of transformers to **exclude**. Run `6to5 --help` to see a full list of transformers. | -| `whitelist` | `[]` | Array of transformers to **only** use. Run `6to5 --help` to see a full list of transformers. | -| `optional` | `[]` | Array of transformers to [optionally](/docs/usage/transformers#optional-transformers) use. Run `6to5 --help` to see a full list of module formatters. | -| `modules` | `"common"` | Which module formatter to use. Run `6to5 --help` to see a full list of module formatters. | -| `sourceMap` | `false` | If truthy, adds a `map` property to returned output. If set to `"inline"`, a comment with a sourceMappingURL directive is added to the bottom of the returned code. | -| `sourceMapName` | `(filenameRelative)` | Set `file` on returned source map. | -| `sourceFileName` | `(filenameRelative)` | Set `sources[0]` on returned source map. | -| `sourceRoot` | `(moduleRoot)` | The root from which all sources are relative. | -| `moduleRoot` | `(sourceRoot)` | Optional prefix for the AMD module formatter that will be prepend to the filename on module definitions. | -| `moduleIds` | `false` | If truthy, insert an explicit id for modules. By default, all modules are anonymous. (Not available for `common` modules) | -| `runtime` | `false` | Optionally replace all 6to5 helper declarations with a referenece to this variable. If set to `true` then the default namespace is used `to5Runtime`. | -| `comments` | `true` | Output comments in generated output. | -| `experimental` | `false` | Enable support for experimental ES7 features. | diff --git a/doc/usage/playground.md b/doc/usage/playground.md deleted file mode 100644 index 23fdc23b3c..0000000000 --- a/doc/usage/playground.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -layout: docs -title: Playground -description: How to use the playground. -permalink: /docs/usage/playground/ -redirect_from: /playground.html ---- - -> Playground is a proving ground for language ideas. - --- -Unofficial
-- These features are in no way endorsed by Ecma International and are not a - part of any ECMAScript standard, nor are they necessarily on track to become - part of any standard. Use with extreme caution. -
-
-- -## Usage - -```js -$ 6to5 --playground -``` - -```js -to5.transform('code', { playground: true }); -``` - -Proposal Authors
-- If you are actively working on an - ECMAScript proposal, this is a - good place to get your ideas implemented with so that they may be tested - with all of the latest language and API features. -
-- Please feel free to open - an issue on the 6to5 repository with your WIP spec, and we can discuss - getting it implemented. Be sure to include as much information as possible. -
-
-- -## Features - -### Memoization assignment operator - -The memoization assignment operator allows you to lazily set an object property. -It checks whether there's a property defined on the object and if there isn't -then the right hand value is set. - -This means that `obj.x` in the following `var x = { x: undefined }; obj.x ?= 2;`` -will still be `undefined` because it's already been defined on the object. - -**Uses** - -```js -var obj = {}; -obj.x ?= 2; -obj.x; // 2 - -obj = { x: 1 }; -obj.x ?= 2; -obj.x; // 1 - -obj = { x: undefined } -obj.x ?= 2; -obj.x; // undefined -``` - -**Example** - -```js -var obj = {}; -obj.x ?= 2; -``` - -is equivalent to - -```js -var obj = {}; -if (!Object.prototype.hasOwnProperty.call(obj, 'x')) obj.x = 2; -``` - -### Method binding - -```javascript -var fn = obj#method; -var fn = obj#method("foob"); -``` - -is equivalent to - -```javascript -var fn = obj.method.bind(obj); -var fn = obj.method.bind(obj, "foob"); -``` - -### Method binding function shorthand - -```javascript -["foo", "bar"].map(#toUpperCase); // ["FOO", "BAR"] -[1.1234, 23.53245, 3].map(#toFixed(2)); // ["1.12", "23.53", "3.00"] -``` - -equivalent to - -```javascript -["foo", "bar"].map(function (val) { return val.toUpperCase(); }); -[1.1234, 23.53245, 3].map(function (val) { return val.toFixed(2); }); -``` - -### Object getter memoization - -```js -var foo = { - memo bar() { - return complex(); - } -}; - -class Foo { - memo bar() { - return complex(); - } -} -``` - -is equivalent to - -```js -var foo = { - get bar() { - return Object.defineProperty(this, "bar", { - value: complex(), - enumerable: true, - configurable: true, - writable: true - }).bar; - } -}; - -class Foo { - get bar() { - return Object.defineProperty(this, "bar", { - value: complex(), - enumerable: true, - configurable: true, - writable: true - }).bar; - } -} -``` diff --git a/doc/usage/polyfill.md b/doc/usage/polyfill.md deleted file mode 100644 index 137cde5fa2..0000000000 --- a/doc/usage/polyfill.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -layout: docs -title: Polyfill -description: How to use the Polyfill. -permalink: /docs/usage/polyfill/ ---- - -Enables experimental
-- Enabling playground also enables experimental support. -
-
- 6to5 includes a polyfill that includes a custom - regenerator runtime - and core.js. -
- -This will emulate a full ES6 environment. This polyfill is automatically loaded -when using `6to5-node` and `6to5/register`. - -## Usage in Node/Browserify - -You need to include the polyfill require at the top the **entry point** to -your application. - -```js -require('6to5/polyfill'); -``` - -Fortunately, this is automatically loaded when using: - -```js -require('6to5/register'); -``` - -## Usage in Browser - -Available from the `browser-polyfill.js` file within the 6to5 directory of an -npm release. This needs to be included **before** all your compiled 6to5 code. -You can either prepend it to your compiled code or include it in a `