Transform viewer

The examples

Select an example. The left pane shows the input. The right pane shows the output of the preset. The build of this site makes the output with the real preset of the repository.

The function becomes a generator that coroutine operates. Each await becomes a yield, so the runtime can set the context before the function continues.

Input

async function handle(id) {
    const user = await load(id);
    log(requestId.getStore(), user);
}

Output of the preset

import { coroutine as _coroutine } from "async-browser-context/runtime";
function handle(_x) {
  return _handle.apply(this, arguments);
}
function _handle() {
  _handle = _coroutine(function* (id) {
    const user = yield load(id);
    log(requestId.getStore(), user);
  });
  return _handle.apply(this, arguments);
}

What to look for

Each async function becomes a generator function that coroutine() wraps. Each await becomes a yield.
The function keeps its name and its parameters. A declaration stays a declaration, so it stays hoisted.
A generator gives bindGenerator(...). The body moves into an inner generator.
The output imports coroutine and bindGenerator from async-browser-context/runtime.

The transform page tells what the runtime does at each step.