Develop Reference

How does the browser know I'm targeting ES6?

I'm using Typescript and I recently changed the transpilation options to target ES6 instead of ES5.
I was using a certain syntax that had always worked fine under ES5, but after the target change, I started getting this error in the (Firefox) browser console:
Javascript ES6 TypeError: Class constructor Client cannot be invoked without 'new'
I changed the code to a suitable syntax for ES6, and this fixed the issue, but I don't understand how the browser would know to throw this error in the first place, because the exact same code worked before.
Does the javascript parser in browser scan other parts of the code base and see they they're using ES6, and then reject this line because it doesn't match the ES6 code elsewhere?

Javascript doesn't enter any particular "mode".
Likely what really happened is that you were declaring a class Client. That is ES6 syntax, and it comes with the special caveat that you must use new Client to instantiate it. Now, your compiler compiled this into a backwards-compatible function Client() .... Obviously, you can call a function without new. And that's what you were doing somewhere.
So, the compilation from class to function masked the error. But when leaving the class as class (because ES6 target mode does not need to dumb it down to a function), the browser was actually dealing with a class and raised that error.

Using multiple js files generated by flatbuffers in electron/webpack

I have a question regarding using code generated for javascript with flatbuffers.
Now I have item.fbs and itemManager.fbs which contains a table including a vector of item.fbs. And it generated 2 js files. When using the itemManager in js, it would throw error of not finding item constructor events.js:163 Uncaught TypeError: my.namespace.Item is not a constructor. I didn' t find any code regarding importing item_generated.js in item_manager_generated.js. I' m wondering how to use it properly in ES6 (with the template of https://github.com/SimulatedGREG/electron-vue) ? Declaring both item and itemManager in a single flatbuffers file and import this file works well.

I workaround this by using the --gen-all flag when using flatc to compile the schema files for now.

Transpiling class based web components with babel

I've a simple web component following the latest web components v1 class syntax, it works great in Chrome and Firefox/Edge (with a polyfill) but I'd like it to run in IE11 so I need to transpile the class. However running it through babel produces code that no longer works in any browser.
Is there any way to generate backwardly compatible web components with the class syntax or is there a preferred way to write web components for maximum compatibility?
Example code -
class TestElement extends HTMLElement {
connectedCallback(){
this.innerHTML = "<div>Testing</div>"
}
}
customElements.define('test-element', TestElement)
Error message when using transpiled code is -
Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

To compile Custom Element classes with Babel, you can use this plugin from Github.
It will use Reflect.construct() instead of new, which is not permitted with HTMLElement objects.

One solution is to use the native-shim available with this polyfill
https://github.com/webcomponents/custom-elements
It's not perfect though, would like to find a cleaner solution.

Prevent calling a TypeScript class as a function - _classCallCheck

I'm writing a library in TypeScript that will be consumed by all flavours of JS. When I write a class and try and calling it in TS without new, it rightly won't compile.
In ES6/Babel, when I create a class, it automatically adds the _classCallCheck function to check that it's been called with new at runtime.
Is there a similar flag in TypeScript to add such a check? Obviously it won't be used when I use the library in TypeScript, but will when it's written in JS

Is there a similar flag in TypeScript to add such a check?
No. You have to write it manually.
I've added a feature request : https://github.com/Microsoft/TypeScript/issues/6569

Will Dart support the use of existing JavaScript libraries?

I understand Dart compiles to JavaScript, and I read the Dart Language Spec on Libraries, although I didn't see an answer there. Also a search on their discussion form for the word 'existing' turns up 3 results that are not related.
Does anyone know if Dart will support the use of existing JavaScript libraries such as jQuery or Raphael?

The answer is now Yes! Dart now ships a JS-interop library to use existing JavaScript code with your Dart app. Learn more here: https://www.dartlang.org/articles/js-dart-interop/

You will not be able to call javascript directly from dart code. The native directive is reserved for the core libraries of dartc (dart:core, dart:dom, dart:html, dart:json, etc), which itself compiles to javascript.

There is now a new simpler way https://pub.dartlang.org/packages/js (currently version 0.6.0-beta.6)
Make JS classes and functions available to Dart like:
#JS("JSON.stringify")
external String stringify(obj);
#JS('google.maps')
library maps;
// Invokes the JavaScript getter `google.maps.map`.
external Map get map;
// `new Map` invokes JavaScript `new google.maps.Map(location)`
#JS()
class Map {
external Map(Location location);
external Location getLocation();
}
// `new Location(...)` invokes JavaScript `new google.maps.LatLng(...)`
//
// We recommend against using custom JavaScript names whenever
// possible. It is easier for users if the JavaScript names and Dart names
// are consistent.
#JS("LatLng")
class Location {
external Location(num lat, num lng);
}
for more see the readme of the package

There is also a dart:js library. And here is an article explaining how to use this library for interoperating with JavaScript.