Fix ES6 support using Babel::Transpiler #5

felixbuenemann · 2017-07-08T16:37:12Z

Tested on sprockets 3.7.1 with sprockets-es6 0.9.2, but should also work on sprockets 4 which also uses the babel-transpiler gem for es6 support.

Tested on sprockets 3.7.1 with sprockets-es6 0.9.2, but should also work on sprockets 4.x with babel-transpiler gem. This also allows to use ES6 `export default` for defining components.

felixbuenemann · 2017-07-08T23:01:39Z

2a9dbdf adds support for export default { } when defining components using <script lang="es6">.

felixbuenemann · 2017-07-08T23:03:54Z

lib/sprockets/vue/script.rb

@@ -30,7 +39,7 @@ def call(input)
            map = result['sourceMap']

            output << "'object' != typeof VComponents && (this.VComponents = {});
-              var module = { exports: null };
+              var module = { exports: null }, exports = {};


Babel uses the exports object to store exports and then assigns exports['default'] to module.exports.

felixbuenemann · 2017-07-09T00:45:15Z

There's a problem with <script lang="es6">:

While it works fine for detecting ES6 in sprockets, it breaks tooling like Vetur in VSCode, which only support javascript, coffee and ts for the langattribute.

How about autodetecting if Babel::Transpiler is defined and if it is always use the ES6 parser unless lang="coffee" is specified?

Sending non-ES6 code through babel is pretty much a No-OP, so it doesn't really hurt.

kikyous · 2017-07-10T06:23:05Z

Thanks for your pr

kikyous · 2017-07-10T06:51:22Z

I think we can still use module.exports= in es6,

It is not unnecessary to support es6 export default

we just need a var to assign object to it

felixbuenemann · 2017-07-10T06:57:54Z

Your are right, module.exports still works in es6, but with the change it also works with export default which makes sense to use if you are writing es6. We only need the exports object because babel assumes it exists when using the export default syntax.

What do you think about auto-detection of es6 support?

I have already implemented it in my autodetect-es6 branch.

kikyous · 2017-07-10T06:59:20Z

I think auto-detection is not a good way.
how about

<script lang="javascript" es6>
module.exports = {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

felixbuenemann · 2017-07-10T07:02:08Z

That could work, I'll have to try it out.

It could also be a implemented as a configuration setting.

kikyous · 2017-07-10T07:05:54Z

export default is ok.
but I think wo should split lang transpiler in to different files,
ex. coffee.rb, es6.rb ...

In this way, we can define export={} only when needed

felixbuenemann · 2017-07-10T07:14:11Z

I thought about doing it, but I didn't see the point because it's only one extra object defined in the scope of the IIFE.

kikyous · 2017-07-10T07:21:52Z

we can do it later.

Split transpiler in to different files so we can have more clear code, and no extra object

Fix ES6 support using Babel::Transpiler

2a9dbdf

Tested on sprockets 3.7.1 with sprockets-es6 0.9.2, but should also work on sprockets 4.x with babel-transpiler gem. This also allows to use ES6 `export default` for defining components.

felixbuenemann force-pushed the fix-es6-support branch from 453e7e3 to 2a9dbdf Compare July 8, 2017 22:58

felixbuenemann commented Jul 8, 2017

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix ES6 support using Babel::Transpiler #5

Fix ES6 support using Babel::Transpiler #5

Fix ES6 support using Babel::Transpiler #5

Are you sure you want to change the base?

Fix ES6 support using Babel::Transpiler #5

Conversation

Choose a reason for hiding this comment