yyx990803 / buble

a fork of buble with some vue-specific hacks, used in vue-template-es2015-compiler

Bublé

The blazing fast, batteries-included ES2015 compiler

• Try it out at buble.surge.sh
• Read the docs at buble.surge.sh/guide

Quickstart

Via the command line...

npm install -g buble
buble input.js > output.js

...or via the JavaScript API:

var buble = require( 'buble' );
var result = buble.transform( source ); // { code: ..., map: ... }

License

MIT

buble's Issues

Failed to parse function with trailing comma

I'm not sure but it seems the following issue is related to my issue on Vue.

tl;dr

This fork cannot parse the following code but similar code is written in my Vue template.

(d, f) =>
  updateNotificationSetting(
    notificationSetting.notificationSettingId,
    d,
  ).finally(f);

Btw, the original one can because of bublejs/buble#54

Detail

I'm using @vue/cli-plugin-eslint, eslint-config-prettier, and prettier and after I updates those today, vue-cli-service lint conver the following HTML

<notification-setting-viewer
 v-else
 :key="`viewer-${notificationSetting.notificationSettingId}`"
 :notification-setting="notificationSetting"
 @delete:notificationSetting="(f) => deleteNotificationSetting(notificationSetting.notificationSettingId).finally(f)"
 @update:notificationSettingDisabled="(b, f) => updateNotificationSettingDisabled(notificationSetting.notificationSettingId, b).finally(f)"
 @update:mode="(m, f) => updateMode(notificationSetting.notificationSettingId, m).finally(f)"/>

To

<notification-setting-viewer
  v-else
  :key="`viewer-${ns.notificationSettingId}`"
  :notification-setting="ns"
  @delete:notificationSetting="
    f =>
      deleteNotificationSetting(ns.notificationSettingId).finally(f)
  "
  @update:notificationSettingDisabled="
    (b, f) =>
      updateNotificationSettingDisabled(
        ns.notificationSettingId,
        b,
      ).finally(f)
  "
  @update:mode="
    (m, f) => updateMode(ns.notificationSettingId, m).finally(f)
  "
/>

With previous HTML, vue-cli-service build produce a production code as ES5 compatible but with the new HTML, the production code is not ES5 compatible like

   notificationSetting.notificationSettingId,
  d,
).finally(f); },"update:mode":function (m, f) { return _vm.updateMode(
  notificationSetting.notificationSettingId,
  m,
).finally(f); },"test:mail":_vm.sendTestMail}}):_c('notification-setting-viewer',{key:("viewer-" + (notificationSetting.notificationSettingId)),attrs:{"notification-setting":notificationSetting},on:{"delete:notificationSetting":function (f) { return _vm.deleteNotificationSetting(
  notificationSetting.notificationSettingId,
).finally(f); },"update:notificationSettingDisabled":function (b, f) { return _vm.updateNotificationSettingDisabled(
  notificationSetting.notificationSettingId,
  b,
).finally(f); },"update:mode":function (m, f) { return _vm.updateMode(
  notificationSetting.notificationSettingId,
  m,
).finally(f); }}})]})],2)],1),(_vm.loading)?_c('float-loader'):_vm._e()],1)}

Note that somehow the trailing comma remains.

And I found that this buble is used in vue-template-compiler and this buble cannot handle trailing comma in function so I wonder if it's related to my issue.

Transpiling issue in string-keyed properties with whitespaces before colons

There's a transpilation problem in buble version 0.19.7 and under, which it incorrectly transpiles an object that has string-keyed properties with whitespaces before colons after a computed property.

<!-- Without whitespaces, no errors -->
<div :class="{['computed']: 1, 'some-class': 2}"></div>

<!-- With a whitespace, a syntax error occurs -->
<div :class="{['computed']: 1, 'some-class' : 2}"></div>

Could you update the fork to 0.19.8?

FYI, this is the issue from buble: bublejs/buble#200

Thank you.

去除with时，不应把与一些全局方法同名的标识符，直接跳过实例属性检测

buble/src/utils/globals.js

Line 3 in 368bf86

const names = 'Infinity,undefined,NaN,isFinite,isNaN,' +

不应该在解除with的编译过程中，把这些直接作为特例排除、编译成全局变量，因为它们很有可能是实例属性。比较好的做法可能是统统编译为this.xxx，然后在Vue.prototype.xxx中添加它们兜底。

（目前Vue需要记忆的隐秘特例实在有些多了，比如组件名与原生元素同名，会直接跳过组件是否存在的检测，而直接当作原生元素对待。哪怕用大写模式回避，但SVG类元素是无视这一点的（所以<LiNe />作为template是不行的），而SVG元素的清单又特别难记而且长。但由于官网建议用包含-的字段作为组件名，所以只是刻意回避好名字有些麻烦，而且毕竟还有编译警告。）

而这次的实例属性特例问题，可能就突出一些了。这个清单不看源码不知道，而且文档没写意味着它可能是随时可变的。特别是Intl，我用了十年JS，刚知道还有这个东西。而且没有编译警告，所以不知道的人出错了要排查是非常困难的，排查出来以后也会有些影响Vue的口碑。

#marketing missing CTA: star on github

This project is awesome, finally a KISS version of babel which doesn't choke my CPU.

I'm afraid the website ranks pretty good in google, but it's missing something essential: a star-button in the header or footer. (goto: https://buttons.github.io )

This is really essential to onboard new users imho, and rank higher in the github search.
(Kind of a 'watch later'-button like in youtube)

hope this helps!

Sync with latest from Rich-Harris/buble (now on github)

Is it worth syncing the latest changes from https://github.com/Rich-Harris/buble/?

There are only minor merge conflicts

babel-plugin-transform-vue-jsx

babel-plugin-transform-vue-jsx 好像不支持啊