AsyncLocalStorage for the browser

How the library operates

1. 1

   The transform

   A native await does not tell JavaScript code when the function continues. Thus, the Vite plugin or the Babel preset changes each async function into a generator. Each await becomes a yield, and the runtime operates the generator.

   Look at more examples of the transform

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

   ↓ 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);
   }

2. 2

   The frames

   Each run() makes a frame below the current frame. Before each step of a function, the runtime makes the frame of the function current. After the step, it sets the previous frame again. get() searches from the current frame up to the root.

   Read about contexts and frames

3. 3

   The patches

   A callback gets the context of the code that registered it. The runtime patches the APIs that call callbacks later. The patches keep the names, the lengths and the source text of the native functions.

   Read the list of patched APIs

   • PromisesthencatchfinallyPromise.all
   • TimerssetTimeoutsetIntervalqueueMicrotaskrequestAnimationFramerequestIdleCallbackscheduler.postTask
   • EventsaddEventListeneron… propertiesMediaQueryList
   • ObserversMutationObserverResizeObserverIntersectionObserverPerformanceObserverFinalizationRegistry
   • StreamsReadableStreamWritableStreamTransformStream
   • Other callbacksnavigator.lockstoBlobgeolocationstartViewTransitionArray.fromAsync
4. 4

   The boundaries

   Code without the transform cannot get the context of a different operation. At most, it gets no context after its own native await. Where your code gives a callback to that code, one function keeps the context.

   Read about the boundaries

   • Gives a promise that your code awaitsNothing to do
   • Starts your callback from a patched APINothing to do
   • Starts your callback after its own awaitBind the callbackAsyncLocalStorage.bind(callback)
   • Keeps your callback in a list for laterBind the callbackAsyncLocalStorage.bind(callback)
   • Operates in a worker or an iframeSend the values, thenrun(value, fn)