Support async/await

[kaihendry]

The following code doesn't work unless babel is massaged.

<template>
  <div id="app">
    <h1>{{ items }}</h1>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return { 
      items: {},
    }
  },
  created: function() {
    this.goGet()
  },
  methods: {
    async goGet () {
      var response = await fetch("https://jsonplaceholder.typicode.com/photos");
      this.items = await response.json();
    }
  }
}
</script>

Easiest way to support it, appears to be updating .babelrc

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 Chrome versions"]
      }
    }]
  ]
}

[kaihendry]

Oh, another problem is that npm run build webpack.optimize fails with

ERROR in build.js from UglifyJs
Unexpected token: operator (>) [./src/main.js:6,10][build.js:119,13]

[LinusBorg]

Your change to .babelrc essentially deactivated transpilation for this feature because it's avaailable in the last 2 chrome versions.

But since Uglify can't deal with anything beyond ES5, minification breaks.

[kaihendry]

Oh, so why did I need to change babel for it not to complain?

Any ideas how to keep the bundle size low but using features like await?

[LinusBorg]

Oh, so why did I need to change babel for it not to complain?

Probably because transpiling async requires a polyfill, not just transpilation. And you didn't provide said polyfill.

After you told babel not to transpile, it had no problem.

[kaihendry]

What about minimising the bundle since async/await isn't liked by UglifyJS?

[LinusBorg]

you can switch to babel-minify-webpack-plugin.

However, I don't think we will switch this template to support all of this, load polyfills etc. - it's meant to be a simple, basic template.

[kaihendry]

But, if you use uglifyJS as you do for creating the production bundle, and someone uses async/await, it won't simply work?

[LinusBorg]

No. If they don't transpile and polyfill aync /await, then ES6/7 code will be passed to Uglify, which it can't handle.

If you properly setup babel to transpile to Es5 and also polyfill missing features for this transpilation (namely generators), then Uglify only receives ES5 code and is happy.

[kaihendry]

Still struggling to understand why there is a need to transpile by default with leading browsers such as Safari & Chrome support this stuff?

And surely you can't expect people using this project to know how to easily use polyfill?

[LinusBorg]

Well, that choice is not that easy. This template aims to work on all browsers that Vue supports, which includes IE11 (or even 9).

This requires transpilation to ES5. So we would have to include a polyfill by default for generators to make transpilation to ES5 possible for async/await- and that polyfill is quite heavy.

So we either

1. support async/await for all browsers at the cost of bigger bundles for everyone
2. support it only for evergreen browsers at the cost of beginners trying to use asyc/await struggling over errors in one browser specifically
3. not supporting it at all - consistent behaviours across browsers, but no async/await.

If we choose option 2, we should ...

1. provide a babel config that *only allows async/await but transpiles everthing else so projects without async work in IE
2. Provide instructions to add async transpilation for those wanting to support IE.

So this can be done and considered, but is not as easy as the babel config you showed.

[kaihendry]

Option 2 and 2 gets my vote.

[martianmartian]

why bother