Can't create asynchronous Svelte action

Question

I'm trying to create a asynchronous action on Svelte (use:action directive), it works fine when i try the following "non-async" function

export default function typewriter(node, options) {
    for (const letter of elementsText[elIndex]) {
        if (!reverse && el.textContent === elementsText[elIndex].join('')) return
        if (reverse && el.textContent === '') return
        if (Array.isArray(interval)) {
            const randomInterval = Math.floor(Math.random() * interval.length)
            // this function needs an `await`
            await sleep(interval[randomInterval])
        } else if (typeof interval == 'number') {
            // this function requires an `await`
            sleep(interval)
        }
        !reverse ? (el.textContent += letter) : (el.textContent = el.textContent.slice(0, -1))
    }
}

But when i try to transform the code above into a asynchronous function, i get the following error (probably, thrown by babeljs)

Uncaught (in promise) ReferenceError: regeneratorRuntime is not defined

Answer 1

Adapted from johnny answer on Babel 6 regeneratorRuntime is not defined

I use @babel/plugin-transform-runtime. The plugin is described as:

Externalize references to helpers and builtins, automatically polyfilling your code without polluting globals. What does this actually mean though? Basically, you can use built-ins such as Promise, Set, Symbol etc as well use all the Babel features that require a polyfill seamlessly, without global pollution, making it extremely suitable for libraries.

It also includes support for async/await along with other built-ins of ES 6.

yarn:

$ yarn add -D @babel/plugin-transform-runtime

npm:

$ npm i -D @babel/plugin-transform-runtime

In .babelrc, add the runtime plugin

{
  "plugins": [
    ["@babel/transform-runtime", { "regenerator": true }]
  ]
}