You can use setStateinside componentDidUpdate. The problem is that somehow you are creating an infinite loop because there's no break condition. Based on the fact that you need values that are provided by the browser once the component is rendered, I think your approach about using componentDidUpdate is correct, it...

I'd use a Map so that your enum values can be any type, rather than having them coerced into strings. function Enum(obj){ const keysByValue = new Map(); const EnumLookup = value => keysByValue.get(value); for (const key of Object.keys(obj)){ EnumLookup[key] = obj[key]; keysByValue.set(EnumLookup[key], key); } // Return a function with all...

The other answer covers this, but not with valid ES6, so I'm adding my own. Make a central file to import your react components, in some central react.js file export {default as React} from 'react'; export {default as Reflux} from 'reflux'; export {default as reactMixin} from 'react-mixin'; Then in the...

let introduces block scoping and equivalent binding, much like functions create a scope with closure. I believe the relevant section of the spec is 13.2.1, where the note mentions that let declarations are part of a LexicalBinding and both live within a Lexical Environment. Section 13.2.2 states that var declarations...

The declared variable total is undefined which means it will create NaN (Not-a-Number) when a number is added to it. Also, Typed Array (ArrayBuffer/views) and Array are not the same, and converting a typed array to an ordinary Array is making iteration slower as typed arrays are actual byte-buffers while...

Can I use "a" variable in a global scope after module importing or is it available only in a module scope? It's only available inside the module it was declared in. Will ES6 modules have a similar working principle like this trick: [...] Basically yes. ES6 has these kinds...

As you can see in the spec you reference, in the case of yield* expression, expression needs to have a @@iterator property, which needs to be a method; otherwise an exception is thrown. Therefore, yield* undefined should throw an exception because undefined does not have the @@iterator property. In the...

My question is, how does this play into this? I don't get it. Are they are really evaluated at call time? Yes, the parameter initializers are evaluated at call time. It's complicated, but the steps are basically as follows: A new execution context is established on the stack, with...

'reflect-metadata' is a package that is a proposal for ES7. It allow for meta data to be included to a class or function; essentially it is syntax sugar. Example. Angular 2 ES6: @Component({selector: "thingy"}) @View({template: "<div><h1>Hello everyone</h1></div>"}) class Thingy{}; As you can see there are no semicolons after @Component and...

Why doesn't the error : function(data){ console.log(2, 'error',data.r); } function run, when I simulate error? As per the ECMA Script 6 Promise specifications, when you create a Promise with Promise constructor, the promise object created will have two internal slots, [[PromiseFulfillReactions]] and [[PromiseRejectReactions]], which are actually lists and they...

I would very much suggest against using this style of import in JavaScript code. While potentially workable, relative paths are the defacto standard in all NodeJS code, and that has spread to essentially all JS code that uses module systems. In current systems, any path starting with . is relative,...

Try: browserify src/es6/app.es6 -t babelify -o build/js/bundle.js \ --extension=.js --extension=.json --extension=.es6 Babelify should handle .es6 by default on its end. By the way, if you can you're often better off writing scripts against the browserify API rather than using the CLI. In this case it'd be something like: var browserify...

In ES6 you can also do it with Object.assign() like this: Object.assign(String.prototype, { something() { return this.split(' ').join(); } }); You can find more info to the method here. Or you could use defineProperty (I think that would be better here): Object.defineProperty(String.prototype, 'something', { value() { return this.split(' ').join(); }...

While I agree with the vulnerabilities raised in @Alfonso's answer, the situation is actually worse: All of your untrusted variables are vulnerable to an XSS attack here. For example, say untrustedURL contained the following text "><img src="http://example.com" onerror=alert(/xss/) data-x=" this would cause the following to be rendered: <a class="url" href=""><img...

No, this is not possible. ES6 modules need to be able to statically resolve their dependencies, without executing module code, so that import statements do work reliably. The module specifier must be a string literal. However, the module loader of your choice should support dynamic loading of modules with variable...

According to the only Q&A item in the section Common Questions support for user defined languages is not possible at the moment. So if the language is not supported out of the box, then it's not supported. But support for it may be near, and support for ES6 may be...

This can be done purely with a generator. Here's an example of one approach, in which we move the .next() into the timeout itself in order to ensure it doesn't occur early. Additionally, the generator now returns the function off the stack instead of executing it, because you can't call...

The grave character after raw denotes template strings, which is a feature in ES6 Harmony. You can invoke node with --harmony flag, but this feature is not yet implemented. This is the reason of the syntax error. Raw strings are unsupported too. If you want experimenting with this feature in...

Makefiles it is. I doubt this would work on anything but a Linux dev machine. Don't do it like this if you are publishing something for other people to use. What this does is build a standalone app from each design doc in the src tree. The show docs, which...

what are the practical benefits of allowing duplicate property-names in the initializers There are no practical benefits as such. Now that there are computed property keys in ECMA Script 6, the actual value of the keys will be determined only at the runtime. As it is, keys can be...

In short, extending using babel's transpiled code only works for classes built in a specific way, and a lot of native stuff doesn't appear to be built like that. Babel's docs warns that extending many native classes doesn't work properly. You could create a buffer class that creates the properties...

This is an issue for the package manager, jspm. When you have a module that exports a global, you need to configure a shim in your jspm configuration file where you specify the name of the exported global(s). In the case of linq.js, however, it seems that it does use...

When you call new timerClass(this.timeLeft); you pass your variable by value, i.e. the timer just gets 6 and there is no way to modify it there. The easiest way to fix this is indeed pass the callback function. I made it work with the following code. timer.js: export default class...

If you don't want your symbols to be available in GlobalSymbolRegistry, just don't use Symbol.for. Only use it if you want to allow other codes to use your symbol. In the following example, I create a symbol to store data in DOM elements. And I may want every other code...

That "under-the-hood view" from the ES5 perspective doesn't include those lines - it's hidden in the ... sections. The point of this code is to explain the differences from ES5 inheritance, which are all about this initialisation, new.target, super behaviour, and constructor functions inheriting from other constructor functions. The basic...

it's not being removed from the WeakSet. Why is that? Most likely because the garbage collector has not yet run. However, you say you are using Traceur, so it just might be that they're not properly supported. I wonder how the console can show the contents of a WeakSet...

Anything can be used as a key in a map. Maps are ordered, and that allows for iteration. Combining 1 and 2, when you iterate over a map, you'll get a useful array of key-value pairs! Check out the map.prototype.forEach() documentation. Source: Another good question/answer exchange. Worth marking this...

As es5 only has function scope for variables, presumably your transpiler is creating closures in order to mock the let keyword's functionality. That may have an effect on the resulting size of your code if you're declaring variables inside scopes that are not functions (e.g. loops, ifs etc). So that...

After a short investigation I found an answer. There is no ES6 module loader specification in final draft. It only describes how modules should be loaded. But there is WHATWG ES module loader spec, which is far better than nothing and for me it fits to stick with. Related links:...

You got it wrong. Postfix conditional won't be a part of ES6, that's a feature of CoffeeScript. In presentation they are mentioned in What's missing? [from ES6 that is present in CoffeeScript] section. Also there is no is operator in JavaScript, neither it is planned for ES6/ES7.

You are not importing the classes correctly. Since you are using a named export, you have to use a named import. As you can see through RBTree._NULL_SENTINEL, all the exports become properties of module. (why would _NULL_SENTINEL be a static property of the class RBTree? You are never assigning it...

The end function has to be bound to the response object. You can explicitly do that, with Function.prototype.bind like this Promise.resolve('foo\n').then(response.end.bind(response)) When you pass response.end to then function, you are actually passing the function object to the then function. The actual binding between the function and the response object is...

The global System object is not part of ES2015. The module loading API, which includes System, was removed from the ES2015 spec in Draft 28, October 2014. Module loading is now tracked by the separate WhatWG loader spec. There is an implementation of the module loader API as specified in...

You're right, there is no different between ' and " when it comes to strings, but in order to do string interpolation, you must use backticks around your template string, e.g.: ES2015 var forename = 'bob', surname = 'test'; alert(`hello ${forename} ${surname} - how are you?`); Resulting ES5 var forename...

The naïve solution, assuming you have control over the script itself, is to set some global within the script and check if it exists later. Iff it doesn't, replace this script element with one without the special MIME type so it can run on other browsers. The global can safely...

I'd probably do var set = new Set([1, 2, 3]); set = new Set(Array.from(set, val => val * val)); to just make a new set with the new values, and replace the old. Mutating the set as you iterate over it is a bad idea and seems like it's easy...

You should not use js keywords in function names (e.g. do) As developer.mozilla.org site says: If the last named argument of a function is prefixed with ..., it becomes an array whose elements from 0 to theArgs.length are supplied by the actual arguments passed to the function. Actually this...

This article - yield next vs. yield* next , from one of koa's team members, explains exactly what this is and why they use it. There are a few cases where one could use this yield *, as the articles shows, for avoiding extra co calls, or keeping the context...

forEach executes all functions at once No, it runs them one after another. forEach is not asynchronous. So let's look at an example iteration: // The first result is already resolved, so as to allow // the first 'then' to trigger var result = Promise.resolve(); promiseFactories.forEach(function (promiseFactory) { //...

Template literals cannot be used as key in an object literal. Use a computed property instead: db.collection('connect').update({_id: id}, {$push: {[str]: item}}); // ^^^^^ See also Using a variable for a key in a JavaScript object literal...

In ES5, we could wheck the existence of a class on the window object Only if the constructor function was a global, which is poor practice. In ES6, according to this article, globally-declared classes are globals, but not properties of the global object... That's very interesting. Alex Rauschmeyer is...

The validation works in all kinds of situations, but using the @ensure decorator can only be used to declare your rules on simple properties (like you found out). Hence... Option a: replace the ensure decorator with the fluent API 'ensure' method, this supports 'nested' or 'complex' binding paths such as:...

=== is called strict comparison operator in JavaScript. Object.is and strict comparison operator behave exactly the same except for NaN and +0/-0. From MDN: Object.is() method is not the same as being equal according to the === operator. The === operator (and the == operator as well) treats the number...

No, no existential operator has made it into ES6; it is still discussed however. You can use any of the existing methods, of course, like if ( ((nextProps||{}).filterObj||{}).area ) { // go ahead } Also you can try destructuring and default values: function componentWillReceiveProps({filterObj: {area} = {}} = {}) {...

There are two problems with your mixins: Object.assign only copies enumerable properties of an object. However, the methods and properties of a class are non-enumerable. The methods and properties of a class are not defined on the constructor. They are defined on the prototype of the constructor. This is how...

The Committee process should be articulated for anyone that is looking for this information regarding ES6 release, or ES7 and ES8 releases of JavaScript. This is the link: http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts#final_draft Here is part of the Specification Process. It states that ES6 is in Final Draft. It was submitted to General Assembly...

That is how Browserify transforms work, transforms only have an effect directly in the module that is being referenced. If you want a module in node_modules to have a transforms, you'd need to add a package.json to that module and add babelify as a transform for that module too. Having...

After opening the debug page you could see that angular was telling you that it was missing the reflect-metadata package. So I added a manual import statement, for it in app/todo/todo.js which solved the issue: import Reflect from 'reflect-metadata' import {ComponentAnnotation as Component, ViewAnnotation as View} from 'angular2/angular2'; import List...

The "Support encrypted payloads for push messages" bug tracks progress on getting payloads exposed in notifications. That bug is Chrome-specific, but other browser vendors are likely to follow the same approach. The service worker upgrade flow is very much tied to the idea of there being a specific JavaScript...

Node.js does not currently support ES6 modules natively. You'd need to use a separate package to implement this behavior. The de-facto standard would be es6-module-loader, which works in the browser as well as in a Node environment. Babel.js uses System.js, which uses es6-module-loader at it's core. If it didn't work...

In ES6, there is no "class" when code is running, you just have a constructor function, or an object. So you could do if (typeof Thingy === 'function'){ // It's a function, so it definitely can't be an instance. } else { // It could be anything other than a...

What's the problem? There is no problem. Maps simply don't have own enumerable properties. If your question is why you are seeing {} instead of Map {....}, that's because your environment doesn't have support for Maps yet, hence core-js (which is what Babel uses) polyfills them. It is not...

This is Firefox related issue as mentioned in here Firefox-specific notes The const declaration has been implemented in Firefox long before const appeared in the ECMAScript 6 specification. For const ES6 compliance see bug 950547 and bug 611388. Starting with Gecko 36 (Firefox 36 / Thunderbird 36 / SeaMonkey 2.33):...

The class keyword is es6. Currently, it is only available in stable browsers Chrome 42. Your code can work in Chrome 42 with two modifications: 1) The browser will ignore any script types it does not understand. Chrome doesn't appear to run any code inside of <script type="application/ecmascript;version=6"></script>. You should...

You do not, as you can see in the base class that you are extending, here, it has no componentDidUpdate, so calling a super method doesn't make sense. Instead of always having the method be present, and sometimes have it do nothing, React instead checks if the method exists. That...

You need to fix the following line of code: if (isValid === false) { setTimeout(this.setIsValid(isValid), 2000); } What you are doing here, you are basically calling this.setIsValid instantly and passing to setTimeout the result of it. So the state is changed instantly. What you WANT to do, you want to...

Answering my own question here. I did some digging and it looks like the best way of dealing with this issue at the moment is using jspm with the es6-module-loader. Gulpfile: var gulp = require('gulp'); var del = require('del'); var shell = require('gulp-shell'); gulp.task('clean', function(cb) { del('dist', cb); }); gulp.task('default',...

Looks like you are running tests in browser which doesn't support Function.prototype.bind. Babel needs this function. You can fix is by karma-phantomjs-shim, or try a new version of browser. Since version 2.0, PhantomJS has this function....

The new class stuff is mostly just syntactic sugar. (But, you know, the good kind of sugar.) Moreover, will class be a concept of OOP or it still be a 'javascript object concept'? It's the same prototypical inheritance we have now, just cleaner and more convenient syntax for it. Does...

Short answer: No. The @ syntax defines an annotation - this was introduced by Angular's AtScript, which later merged into TypeScript. From what I can see, they are similar to annotations in .NET languages. Annotations are not a part of standard ES6; they are simply a decoration provided by TypeScript....

It is part of the ECMA Script 2015 (or ECMA Script 6). You can create new properties in Objects in Object literals, just by specifying the identifiers. Quoting MDN's Object Initializer's Property Definitions section, With ECMAScript 6, there is a shorter notation available to achieve the same: var a =...

There is no specific syntax for this. You can keep doing: var subsetObj = {a: o.a, c: o.c}; If you have more properties or a variable number of properties, create a helper function. Related: Is it possible to destructure onto an existing object? (Javascript ES6)...

The only good upgrade route is to refactor the property hashes into proper classes. You can start that work and keep using your hash-based classes in the meantime, which will lighten the requirement to do it all at once. If you have a limited number of "class" name:config pairs --...

This code should run asynchronously Yes and no, it depends on what part of that code you're talking about. The code in your promise executor (the function you pass into new Promise) is not run asynchronously. From §25.4.3.1, step 10: Let completion be Call(executor, undefined, «resolvingFunctions.[[Resolve]], resolvingFunctions.[[Reject]]»). Note that...

Maps are iterable and ordered, but they are not arrays so they don't have any indexed access. Iterating to the final element is the best you can do. The simplest case being Array.from(map.values()).pop(); ...

If I am correct, this block is causing the issue: promise = promise.then(function() { createPromise(container, i); }); createPromise returns a promise but, inside then you are not returning that promise, so it would assume return undefined;(the default for all js functions) and hence none of the subsequent promises would wait...

Just got this olved by a helpful guy on the LinkedIn Node.JS group. The command line should be: node --harmony ./node_modules/istanbul-harmony/lib/cli.js cover --hook-run-in-context ./node_modules/mocha/bin/_mocha -- --R spec --U exports tests While this is quite cumbersome, you can just drop it in your package.json scripts section, and run npm run cover...

Alternatively, which is a good algorithm for me to try to implement? create a new promise with an executor function use a counter/result array in the scope of the executor register a then() callback with each parent promise saving the results in the array resolve/reject promise from step 1...

It's nothing complicated. It's always better to use const over let (and definitely var), since const makes it a bit easier for other coders, or you when you come back to the same code in the future, to understand what is going on, since you only have to look at...

String.prototype.includes is available in Node as String.prototype.contains. Check this out: http://kangax.github.io/compat-table/es6/. Look at the flag 26. I think, originally the name proposed in the standard was contains but then it has been changed due to compatibility issues. V8 Pull Request : https://codereview.chromium.org/742963002 You can check what options are supported by...