use babel-plugin-transform-async-to-promises #579
Conversation
so we can test the compilation
apaleslimghost
requested review from
magsallen and
i-like-robots
as code owners
|
I've added a "do not merge" label to this in case we do need to release any 0.2.0 patches (because I don't know if we really need to implement a branching model right now) |
|
I gave this a quick test and the results are good! Before: After: So in this case we were able to remove the entire Babel runtime/regenerator chunk \0/ The output also looks much better... Before: var main =
/*#__PURE__*/
function () {
var _ref = asyncToGenerator_default()(
/*#__PURE__*/
regenerator_default.a.mark(function _callee() {
var response, result;
return regenerator_default.a.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return fetch('https://www.ft.com/world?format=json');
case 2:
response = _context.sent;
if (!response.ok) {
_context.next = 7;
break;
}
_context.next = 6;
return response.json();
case 6:
result = _context.sent;
case 7:
console.log(result);
case 8:
case "end":
return _context.stop();
}
}
}, _callee);
}));
return function main() {
return _ref.apply(this, arguments);
};
}();After: var main = _async(function () {
return _await(fetch('https://www.ft.com/world?format=json'), function (response) {
var result;
return _invoke(function () {
if (response.ok) {
return _await(response.json(), function (_response$json) {
result = _response$json;
});
}
}, function () {
console.log(result);
});
});
});There are some options to disable the plugin's helpers and use "raw" |
|
I was demonstrating this plugin to Adam on Tuesday and we tried out the different output options. We noticed that the helper functions are injected into each module which needs them which can lead to repetition. There is an option to extract these into a separate runtime but this is almost as big as Regenerator! Setting |
|
I grok not, but perhaps this might be worth looking at: https://github.com/MatAtBread/fast-async Latest commit was last year, so since then babel-plugin-transform-async-to-promises is better maintained. I just thought I'd mention it. |
|
In the original issue (#23) we considered implementing As it turns out the package Bren has implemented is probably closest to what we want as it produces reasonable output by using native promises rather than an approximation of generators. |
|
Thanks for explaining, Matt. 👍 |
|
I've added a Q&A label to this, I will check this out and try building a real app with along with #574 🔎 |
|
Unfortunately this plugin seems to stumble with some of our code. I think it's a bug with the plugin rather than our code, for example this input: // https://github.com/Financial-Times/n-syndication/blob/master/src/js/get-user-status.js
export default async function getUserStatus () {
const url = '/syndication/user-status';
const options = {
credentials: 'include'
};
try {
const response = await fetch(url, options);
if (response.ok) {
return response.json();
} else {
...
}
} catch (err) {
...
}
}Is output as: var getUserStatus = function getUserStatus() {
try {
url = '/syndication/user-status'; // undeclared variable
var options = {
credentials: 'include'
};
return Promise.resolve(_catch(function () {
return fetch(url, options).then(function (_fetch) {
var _exit = false;
response = _fetch; // undeclared variable
...
});
}, function(err) {
...
});
} catch (e) {
return Promise.reject(e);
}
}🤔 |
|
I've created a minimum test case for this issue here: https://github.com/i-like-robots/broken-babel-async-await-transform-test-case and reported it here: rpetrich/babel-plugin-transform-async-to-promises#45 |
|
From the plugin author:
|
|
I just ran your reduced test case and it looks like the newer version outputs correctly: var getStatus = function getStatus() {
try {
var response;
var url = "/path/to/status";
return Promise.resolve(_catch(function () {
return Promise.resolve(fetch(url)).then(function (_fetch) {
response = _fetch;
if (response.ok) {
return response.json();
} else {
throw Error("".concat(url, " responded with ").concat(response.status));
}
});
}, function (error) {
console.error(error);
}));
} catch (e) {
return Promise.reject(e);
}
};Does this mean this can continue and is no longer blocked? |
|
closing this as we've clearly been fine without it for three years and also i'm pretty sure |
fixes #23