Please update the version of Babel Standalone used by Stack Snippets (and update the available versions of other scripts in the drop-down lists; ideally, update that list automatically). It's currently 6.10.3, which doesn't understand async
functions. The current version is 7.10.13 (https://unpkg.com/@babel/standalone@7.10.3/babel.min.js
). Or you can link to the latest via https://unpkg.com/@babel/standalone/babel.min.js
.
Here's an example of a snippet that should work, but fails because the old version doesn't transpile async
functions:
function delay(ms, ...args) {
return new Promise(resolve => setTimeout(resolve, ms, ...args));
}
async function foo() {
await delay(20);
return "Hi";
}
foo()
.then(msg => {
console.log(msg);
})
.catch(error => {
console.error(error);
});
Here it is using the current version of Babel Standalone:
<script type="text/babel" data-presets="es2017,react,stage-3">
function delay(ms, ...args) {
return new Promise(resolve => setTimeout(resolve, ms, ...args));
}
async function foo() {
await delay(20);
return "Hi";
}
foo()
.then(msg => {
console.log(msg);
})
.catch(error => {
console.error(error);
});
</script>
<script src="https://unpkg.com/regenerator-runtime@0.13.2/runtime.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.10.3/babel.min.js"></script>
Note that this will also mean providing data-*
attributes on the generated type="text/babel"
script element so Babel knows what to do. It's probably best to allow the user to pick those. Also, note it will need to have the option to include regenerator-runtime
(core-js
probably would make sense as well) in case the transpiled code needs polyfills.
Aside from Babel...
Similarly the versions of React and other tools are well out of date. React tops out at 16.6.3 in the list, but the current version is 16.13.1 and there's a major feature (hooks) that isn't in the old version.
Some kind of regular review of versions, or just automatically drawing a feed from cdnjs.com
, would make sense rather than the community having to drive this process.
async
wasn't working in their snippet. – T.J. Crowder Jun 15 '19 at 8:47<script>
(with asourceMappingURL
) at the bottom of the<head>
. Theasync function foo
is still there - but, at least in the new version, it doesn't refuse to transpile due to theasync
keyword, which is more than can be said for the old version. Transpilingasync
functions requires a whole lot of extra code – CertainPerformance Jun 15 '19 at 9:10async
functions but not rest... Hmmm... – T.J. Crowder Jun 15 '19 at 9:12async
(to ES5, at least) is hard and buggy, so they want you to explicitly specify if you want to do so – CertainPerformance Jun 15 '19 at 9:21data-
attributes on thescript
tag. I've added the ones jsFiddle uses. – T.J. Crowder Jun 15 '19 at 9:21const
). Changing it to ES2015 requires loading the regenerator runtime...blech. – T.J. Crowder Jun 15 '19 at 9:25async
, it was just lack of configuration. – T.J. Crowder Jun 15 '19 at 9:40