yyx990803 / buble Goto Github PK
View Code? Open in Web Editor NEWa fork of buble with some vue-specific hacks, used in vue-template-es2015-compiler
License: MIT License
a fork of buble with some vue-specific hacks, used in vue-template-es2015-compiler
License: MIT License
babel-plugin-transform-vue-jsx 好像不支持啊
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!
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.
I'm not sure but it seems the following issue is related to my issue on Vue.
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
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.
Is it worth syncing the latest changes from https://github.com/Rich-Harris/buble/?
There are only minor merge conflicts
Line 3 in 368bf86
不应该在解除with
的编译过程中,把这些直接作为特例排除、编译成全局变量,因为它们很有可能是实例属性。比较好的做法可能是统统编译为this.xxx
,然后在Vue.prototype.xxx
中添加它们兜底。
(目前Vue需要记忆的隐秘特例实在有些多了,比如组件名与原生元素同名,会直接跳过组件是否存在的检测,而直接当作原生元素对待。哪怕用大写模式回避,但SVG类元素是无视这一点的(所以<LiNe />
作为template是不行的),而SVG元素的清单又特别难记而且长。但由于官网建议用包含-
的字段作为组件名,所以只是刻意回避好名字有些麻烦,而且毕竟还有编译警告。)
而这次的实例属性特例问题,可能就突出一些了。这个清单不看源码不知道,而且文档没写意味着它可能是随时可变的。特别是Intl
,我用了十年JS,刚知道还有这个东西。而且没有编译警告,所以不知道的人出错了要排查是非常困难的,排查出来以后也会有些影响Vue的口碑。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.