es6-feature-detection.js

var str = 'class ಠ_ಠ extends Array {constructor(j = "a", ...c) {const q = (({u: e}) => {return { [`s${c}`]: Symbol(j) };})({});super(j, q, ...c);}}' + 
          'new Promise((f) => {const a = function* (){return "\u{20BB7}".match(/./u)[0].length === 2 || true;};for (let vre of a()) {' +
          'const [uw, as, he, re] = [new Set(), new WeakSet(), new Map(), new WeakMap()];break;}f(new Proxy({}, {get: (han, h) => h in han ? han[h] ' + 
          ': "42".repeat(0o10)}));}).then(bi => new ಠ_ಠ(bi.rd));';

try {
  eval(str);
} catch(e) {
  alert('Your browser does not support ES6!')
}

/* 
 * All credits to Netflix for providing this approach to ES6 feature detection. Although this could be written in many different ways
 * this proved to be the most direct and elegant approach for me.
 * License: MIT
*/

Supports detection of following features:

• Classes
• Enhanced object literals
• Template strings
• Destructuring
• Default + Rest + Spread
• let + const
• Iterators + for..of
• Generators (function* ())
• Unicode (ಠ_ಠ)
• Proxies
• Symbols
• Subclassable built-ins
• Promises
• Arrows
• New additions to APIs:
  Math
Number
String
Array
Object

EDIT: As reddit user /u/Matthisk point out, this is NOT a fully featured feature detector, however if you're using some of the more advanced features we got in ES2015 that this script doesn't detect for, you probably already know that from reading it.

Love it!

formatted:

class ಠ_ಠ extends Array {
	constructor(j = "a", ...c) {
		const q = (({u: e}) => {
			return { [`s${c}`]: Symbol(j) }
		})({})
		super(j, q, ...c)
	}
}

new Promise((f) => {
	const a = function* () {
		return "\u{20BB7}".match(/./u)[0].length === 2 || true
	}
	for (let vre of a()) {
		const [uw, as, he, re] = [new Set(), new WeakSet(), new Map(), new WeakMap()]
		break
	}
	f(new Proxy({}, {
		get: (han, h) => h in han ? han[h] : "42".repeat(0o10)
	}))
}).then(bi => new ಠ_ಠ(bi.rd))

Glad it's helping!

My slides are here: https://speakerdeck.com/betaorbust/progressive-transpilation-at-netflix-and-the-road-to-running-native-es2015-in-production

And a recording of the talk Jem and I gave is here: https://youtu.be/M1qm-AWWu-M

Made it into a package: sixflix. Note: I minified the code in the original gist's str a bit, but the improvement is almost negligible:

class ಠ extends Array{constructor(j=`a`,...c){const q=(({u: e})=>{return {[`${c}`]:Symbol(j)};})({});super(j,q,...c)}}new Promise(f=>{const a=function*(){return "\u{20BB7}".match(/./u)[0].length===2||!0};for (let z of a()){const [x,y,w,k]=[new Set(),new WeakSet(),new Map(), new WeakMap()];break}f(new Proxy({},{get:(h,i) =>i in h ?h[i]:"j".repeat(0o2)}))}).then(t => new ಠ(t.d))

Cool !

does anyone know why nothing but transpilers support import/export? It's not not even in this list yet mdn lists it as a feature...

@mgenev The how of implementing import/export has not been agreed upon.

@mgenev here's the short response from #node.js:

While ES6 provides syntax for import/export, it currently does nothing, anywhere, because the loader spec is not finished ( https://github.com/whatwg/loader ). ES6 Modules are not yet a thing; they do not yet exist. !babel simply transpiles import/export to require, which is not guaranteed to work once the loader is finished. Use CommonJS modules for now.

Actually, it works in Safari TP.

If you've got a decent CSP then eval() won't work. And unfortunately, eval() is the only way to safely test for syntax support. However, global APIs such as WeakMap can be safely tested without using eval().

There is another way also, using 2 script tags

Maybe useful

Here's something i put together for "good-enough" client-side feature detection using OP's pattern and comments in this gist.
This checks support for:

• ES6
• WebGL
• base64 btoa
• navigator.storage.estimate

.. (but wait there's more) :D

• does not use eval
• no extra script tag needed
• works well with CSP

function playsNice(cb)
{
   var x='(function(){class ಠ extends Array{constructor(j=`a`,...c){const q=(({u:e})=>{return {[`${c}`]:Symbol(j)};})({});'+
   'super(j,q,...c)}}new Promise(f=>{const a=function*(){return "\u{20BB7}".match(/./u)[0].length===2||!0};for (let z of a())'+
   '{const [x,y,w,k]=[new Set(),new WeakSet(),new Map(),new WeakMap()];break}f(new Proxy({},{get:(h,i)=>i in h ?h[i]:"j".repeat'+
   '(0o2)}))}).then(t=>new ಠ(t.d)); if(!navigator.storage||!navigator.storage.estimate){throw "!"}; let n=document.createElement'+
   '("canvas"); let g=(!!n.getContext?(n.getContext("webgl")||n.getContext("experimental-webgl")):null); if(!g||!(g instanceof '+
   'WebGLRenderingContext)){throw "!"}; if(btoa("jz\'")!=="anon"){throw "!"};})();';

   if(!window.addEventListener){cb(false)}; var n=document.createElement('script'); n.ondone=function(event,s)
   {
      s=this; if(s.done){window.removeEventListener('error',s.ondone,true); if(s.parentNode){s.parentNode.removeChild(s)}; return};
      this.done=1; cb(((event&&event.error)?false:true));
   };

   window.addEventListener('error',n.ondone,true); n.appendChild(document.createTextNode(x));
   document.head.appendChild(n); setTimeout(n.ondone,50);
};


playsNice(function(bool)
{
   console.log(bool);
});

How would https://gist.github.com/DaBs/89ccc2ffd1d435efdacff05248514f38#gistcomment-2626592 work unless CSP script-src 'unsafe-inline' is added?

Found an issue. Need to replace

\u{20BB7}

With

\\u{20BB7}

Otherwise that is parsed outside of the eval and it will cause failures with things like UglifyJS that expects ES5