Nativescript: ECMAScript 6

Created on 22 Feb 2016 · 23Comments · Source: NativeScript/NativeScript

I know it's a little rushed to talk about this. But if it's an excellent question! When we can see NativeScript ECMAScript 6?

Source

alejonext

Most helpful comment

As @PanayotCankov says async/await is now compiled down to ES5 by TypeScript.

NativeScript breaks if we don't enable noEmitHelpers in tsconfig.json, so we can't out-of-the-box use async/await.
The same goes if we install tslib and enable importHelpers in tsconfig.json

BUT if we just copy the two functions ( __awaiter and __generator) that is needed from tslib and assign them to global we can use async/await in our {N}-app.

Just copy these two functions from here:
https://github.com/Microsoft/tslib/blob/90b4e189558c86cd8779d396c69a8254ce913874/tslib.js#L90-L125

Our tsconfig.json looks like this:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": false,
    "removeComments": true,
    "noLib": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2016"
    ],
    "sourceMap": true,
    "pretty": true,
    "noEmitHelpers": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "noImplicitAny": false,
    "noImplicitReturns": true,
    "noImplicitUseStrict": false,
    "noFallthroughCasesInSwitch": true,
    "noUnusedParameters": true,
    "noUnusedLocals": true,
    "skipLibCheck": true,
    "typeRoots": [
      "node_modules/@types",
      "node_modules"
    ],
    "types": [
      "jasmine"
    ]
  },
  "exclude": [
    "node_modules",
    "platforms",
    "src",
    "**/*.aot.ts"
  ],
  "compileOnSave": false
}

m-abs on 25 Apr 2017

👍3 😕2

All 23 comments

We use quite latest versions of JavaScriptCore and V8. We won't lag behind the browsers in terms of language features. However most of the APIs that are DOM specific will not be introduced in {N} since we are focused at delivering native UI and prefer to keep our UI framework close to the way the native mobile frameworks work.

PanayotCankov on 23 Feb 2016

These dev plugins may also be helpful. They would integrate Babel or TypeScript compilers that will allow you to develop apps using new language features:

PanayotCankov on 23 Feb 2016

@PanayotCankov @alejonext We are actually using a slightly older version of v8 on Android. We are currently on 4.7; And the engine has had a 4.8 (Stable), 4.9 (Beta), 4.10 (Dev) and now 5.0 (Canary)
Eventually we will be on 5.0 which exposes many es6 by default. Right now you can use quite a few es6 features if you are willing to pass feature enabling flags to the v8 engine in your app package.json file. However, the reason they are behind flags is because they may not be complete or maybe buggy.

NathanaelA on 23 Feb 2016

@NathanaelA @PanayotCankov If as you know is that no browser fully supports ECS 6, however I was really straining to show that if there is an interest to support it. If it is interesting to do from a code translator, however I think happen to be looking to the future!

alejonext on 23 Feb 2016

Trying to follow this tutorial https://www.nativescript.org/blog/details/using-babel-in-nativescript-apps, but when i change target to es6 y get a lot of these in tns-core-modules:

error TS2314: Generic type 'Promise<T, R>' requires 2 type argument(s).

I am using typescript and want to do some async/await.

alexrainman on 31 Jul 2016

Empty app with typescript, change target to es2015, same errors on tns-core-modules. How can i do async/await?

alexrainman on 31 Jul 2016

@alexrainman

I think the problem is related to this one. Typescript do not transpile down to es5 on async/await. Seems like it is planed in 2.0.
http://stackoverflow.com/questions/32401741/async-await-simple-example-typescript
https://github.com/Microsoft/TypeScript/issues/1564

Using babel:
Code under worked in my test project.: (have copied it and removed some code so it is not tested)
The babel transpiler will convert the async/await to a promise. It was not what i needed. If you need to do a real "wait" you can try out the yield command. (same code in the .babelrc file).
I get error when i use yield in interfaces i override. So if you solve that please let me know. (else it seems like yield is working as expected). This is a road i would prefer to avoid if you can.

In the file .babelrc

{
  "presets": ["es2015"],
  "plugins": ["transform-async-to-generator"]
}

Code

require("babel-polyfill");
async function testAwait() {

   //NEED TO SET THE URL. 
    const url = "";
    const response = await fetch(url);
    const result = await response.json();
    //var latlngArray = result.geojson;
    console.log(result.toString());
    //return latlngArray;
}