# The `__generator` helper The `__generator` helper is a function designed to support TypeScript's down-level emit for async functions when targeting ES5 and earlier. But how, exactly, does it work? Here's the body of the `__generator` helper: ```js __generator = function (thisArg, body) { var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t; return { next: verb(0), "throw": verb(1), "return": verb(2) }; function verb(n) { return function (v) { return step([n, v]); }; } function step(op) { if (f) throw new TypeError("Generator is already executing."); while (_) try { if (f = 1, y && (t = y[op[0] & 2 ? "return" : op[0] ? "throw" : "next"]) && !(t = t.call(y, op[1])).done) return t; if (y = 0, t) op = [0, t.value]; switch (op[0]) { case 0: case 1: t = op; break; case 4: _.label++; return { value: op[1], done: false }; case 5: _.label++; y = op[1]; op = [0]; continue; case 7: op = _.ops.pop(); _.trys.pop(); continue; default: if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } if (t[2]) _.ops.pop(); _.trys.pop(); continue; } op = body.call(thisArg, _); } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; } }; ``` And here's an example of it in use: ```ts // source async function func(x) { try { await x; } catch (e) { console.error(e); } finally { console.log("finally"); } } // generated function func(x) { return __awaiter(this, void 0, void 0, function () { var e_1; return __generator(this, function (_a) { switch (_a.label) { case 0: _a.trys.push([0, 1, 3, 4]); return [4 /*yield*/, x]; case 1: _a.sent(); return [3 /*break*/, 4]; case 2: e_1 = _a.sent(); console.error(e_1); return [3 /*break*/, 4]; case 3: console.log("finally"); return [7 /*endfinally*/]; case 4: return [2 /*return*/]; } }); }); } ``` There is a lot going on in this function, so the following will break down what each part of the `__generator` helper does and how it works. # Opcodes The `__generator` helper uses opcodes which represent various operations that are interpreted by the helper to affect its internal state. The following table lists the various opcodes, their arguments, and their purpose: | Opcode | Arguments | Purpose | |----------------|-----------|--------------------------------------------------------------------------------------------------------------------------------| | 0 (next) | *value* | Starts the generator, or resumes the generator with *value* as the result of the `AwaitExpression` where execution was paused. | | 1 (throw) | *value* | Resumes the generator, throwing *value* at `AwaitExpression` where execution was paused. | | 2 (return) | *value* | Exits the generator, executing any `finally` blocks starting at the `AwaitExpression` where execution was paused. | | 3 (break) | *label* | Performs an unconditional jump to the specified label, executing any `finally` between the current instruction and the label. | | 4 (yield) | *value* | Suspends the generator, setting the resume point at the next label and yielding the value. | | 5 (yieldstar) | *value* | Suspends the generator, setting the resume point at the next label and delegating operations to the supplied value. | | 6 (catch) | *error* | An internal instruction used to indicate an exception that was thrown from the body of the generator. | | 7 (endfinally) | | Exits a finally block, resuming any previous operation (such as a break, return, throw, etc.) | # State The `_`, `f`, `y`, and `t` variables make up the persistent state of the `__generator` function. Each variable has a specific purpose, as described in the following sections: ## The `_` variable The `__generator` helper must share state between its internal `step` orchestration function and the `body` function passed to the helper. ```ts var _ = { label: 0, sent: function() { if (t[0] & 1) // NOTE: true for `throw`, but not `next` or `catch` throw t[1]; return sent[1]; }, trys: [], ops: [] }; ``` The following table describes the members of the `_` state object and their purpose: | Name | Description | |---------|---------------------------------------------------------------------------------------------------------------------------| | `label` | Specifies the next switch case to execute in the `body` function. | | `sent` | Handles the completion result passed to the generator. | | `trys` | A stack of **Protected Regions**, which are 4-tuples that describe the labels that make up a `try..catch..finally` block. | | `ops` | A stack of pending operations used for `try..finally` blocks. | The `__generator` helper passes this state object to the `body` function for use with switching between switch cases in the body, handling completions from `AwaitExpression`, etc. ## The `f` variable The `f` variable indicates whether the generator is currently executing, to prevent re-entry of the same generator during its execution. ## The `y` variable The `y` variable stores the iterator passed to a `yieldstar` instruction to which operations should be delegated. ## The `t` variable The `t` variable is a temporary variable that stores one of the following values: - The completion value when resuming from a `yield` or `yield*`. - The error value for a catch block. - The current **Protected Region**. - The verb (`next`, `throw`, or `return` method) to delegate to the expression of a `yield*`. - The result of evaluating the verb delegated to the expression of a `yield*`. > NOTE: None of the above cases overlap. # Protected Regions A **Protected Region** is a region within the `body` function that indicates a `try..catch..finally` statement. It consists of a 4-tuple that contains 4 labels: | Offset | Description | |--------|-----------------------------------------------------------------------------------------| | 0 | *Required* The label that indicates the beginning of a `try..catch..finally` statement. | | 1 | *Optional* The label that indicates the beginning of a `catch` clause. | | 2 | *Optional* The label that indicates the beginning of a `finally` clause. | | 3 | *Required* The label that indicates the end of the `try..catch..finally` statement. | # The generator object The final step of the `__generator` helper is the allocation of an object that implements the `Generator` protocol, to be used by the `__awaiter` helper: ```ts return { next: verb(0), "throw": verb(1), "return": verb(2) }; function verb(n) { return function (v) { return step([n, v]); }; } ``` This object translates calls to `next`, `throw`, and `return` to the appropriate Opcodes and invokes the `step` orchestration function to continue execution. The `throw` and `return` method names are quoted to better support ES3. # Orchestration The `step` function is the main orechestration mechanism for the `__generator` helper. It interprets opcodes, handles **protected regions**, and communicates results back to the caller. Here's a closer look at the `step` function: ```ts function step(op) { if (f) throw new TypeError("Generator is already executing."); while (_) try { if (f = 1, y && (t = y[op[0] & 2 ? "return" : op[0] ? "throw" : "next"]) && !(t = t.call(y, op[1])).done) return t; if (y = 0, t) op = [0, t.value]; switch (op[0]) { case 0: case 1: t = op; break; case 4: _.label++; return { value: op[1], done: false }; case 5: _.label++; y = op[1]; op = [0]; continue; case 7: op = _.ops.pop(); _.trys.pop(); continue; default: if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } if (t[2]) _.ops.pop(); _.trys.pop(); continue; } op = body.call(thisArg, _); } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; } ``` The main body of `step` exists in a `while` loop. This allows us to continually interpret operations until we have reached some completion value, be it a `return`, `await`, or `throw`. ## Preventing re-entry The first part of the `step` function is used as a check to prevent re-entry into a currently executing generator: ```ts if (f) throw new TypeError("Generator is already executing."); ``` ## Running the generator The main body of the `step` function consists of a `while` loop which continues to evaluate instructions until the generator exits or is suspended: ```ts while (_) try ... ``` When the generator has run to completion, the `_` state variable will be cleared, forcing the loop to exit. ## Evaluating the generator body. ```ts try { ... op = body.call(thisArg, _); } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } ``` Depending on the current operation, we re-enter the generator body to start or continue execution. Here we invoke `body` with `thisArg` as the `this` binding and the `_` state object as the only argument. The result is a tuple that contains the next Opcode and argument. If evaluation of the body resulted in an exception, we convert this into an Opcode 6 ("catch") operation to be handled in the next spin of the `while` loop. We also clear the `y` variable in case it is set to ensure we are no longer delegating operations as the exception occurred in user code *outside* of, or at the function boundary of, the delegated iterator (otherwise the iterator would have handled the exception itself). After executing user code, we clear the `f` flag that indicates we are executing the generator, as well as the `t` temporary value so that we don't hold onto values sent to the generator for longer than necessary. Inside of the `try..finally` statement are a series of statements that are used to evaluate the operations of the transformed generator body. The first thing we do is mark the generator as executing: ```ts if (f = 1, ...) ``` Despite the fact this expression is part of the head of an `if` statement, the comma operator causes it to be evaluated and the result thrown out. This is a minification added purely to reduce the overall footprint of the helper. ## Delegating `yield*` The first two statements of the `try..finally` statement handle delegation for `yield*`: ```ts if (f = 1, y && (t = y[op[0] & 2 ? "return" : op[0] ? "throw" : "next"]) && !(t = t.call(y, op[1])).done) return t; if (y = 0, t) op = [0, t.value]; ``` If the `y` variable is set, and `y` has a `next`, `throw`, or `return` method (depending on the current operation), we invoke this method and store the return value (an IteratorResult) in `t`. If `t` indicates it is a yielded value (e.g. `t.done === false`), we return `t` to the caller. If `t` indicates it is a returned value (e.g. `t.done === true`), we mark the operation with the `next` Opcode, and the returned value. If `y` did not have the appropriate method, or `t` was a returned value, we reset `y` to a falsey value and continue processing the operation. ## Handling operations The various Opcodes are handled in the following switch statement: ```ts switch (op[0]) { case 0: case 1: t = op; break; case 4: _.label++; return { value: op[1], done: false }; case 5: _.label++; y = op[1]; op = [0]; continue; case 7: op = _.ops.pop(); _.trys.pop(); continue; default: if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } if (t[2]) _.ops.pop(); _.trys.pop(); continue; } ``` The following sections describe the various Opcodes: ### Opcode 0 ("next") and Opcode 1 ("throw") ```ts case 0: // next case 1: // throw t = op; break; ``` Both Opcode 0 ("next") and Opcode 1 ("throw") have the same behavior. The current operation is stored in the `t` variable and the `body` function is invoked. The `body` function should call `_.sent()` which will evaluate the appropriate completion result. ### Opcode 4 ("yield") ```ts case 4: // yield _.label++; return { value: op[1], done: false }; ``` When we encounter Opcode 4 ("yield"), we increment the label by one to indicate the point at which the generator will resume execution. We then return an `IteratorResult` whose `value` is the yielded value, and `done` is `false`. ### Opcode 5 ("yieldstar") ```ts case 5: // yieldstar _.label++; y = op[1]; op = [0]; continue; ``` When we receive Opcode 5 ("yieldstar"), we increment the label by one to indicate the point at which the generator will resume execution. We then store the iterator in `op[1]` in the `y` variable, and set the operation to delegate to Opcode 0 ("next") with no value. Finally, we continue execution at the top of the loop to start delegation. ### Opcode 7 ("endfinally") ```ts case 7: op = _.ops.pop(); _.trys.pop(); continue; ``` Opcode 7 ("endfinally") indicates that we have hit the end of a `finally` clause, and that the last operation recorded before entering the `finally` block should be evaluated. ### Opcode 2 ("return"), Opcode 3 ("break"), and Opcode 6 ("catch") ```ts default: if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } if (t[2]) _.ops.pop(); _.trys.pop(); continue; } ``` The handling for Opcode 2 ("return"), Opcode 3 ("break") and Opcode 6 ("catch") is more complicated, as we must obey the specified runtime semantics of generators. The first line in this clause gets the current **Protected Region** if found and stores it in the `t` temp variable: ```ts if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && ...) ... ``` The remainder of this statement, as well as the following by several `if` statements test for more complex conditions. The first of these is the following: ```ts if (!(t = ...) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } ``` If we encounter an Opcode 6 ("catch") or Opcode 2 ("return"), and we are not in a protected region, then this operation completes the generator by setting the `_` variable to a falsey value. The `continue` statement resumes execution at the top of the `while` statement, which will exit the loop so that we continue execution at the statement following the loop. ```ts if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } ``` The `if` statement above handles Opcode 3 ("break") when we are either not in a **protected region**, or are performing an unconditional jump to a label inside of the current **protected region**. In this case we can unconditionally jump to the specified label. ```ts if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } ``` The `if` statement above handles Opcode 6 ("catch") when inside the `try` block of a **protected region**. In this case we jump to the `catch` block, if present. We replace the value of `t` with the operation so that the exception can be read as the first statement of the transformed `catch` clause of the transformed generator body. ```ts if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } ``` This `if` statement handles all Opcodes when in a **protected region** with a `finally` clause. As long as we are not already inside the `finally` clause, we jump to the `finally` clause and push the pending operation onto the `_.ops` stack. This allows us to resume execution of the pending operation once we have completed execution of the `finally` clause, as long as it does not supersede this operation with its own completion value. ```ts if (t[2]) _.ops.pop(); ``` Any other completion value inside of a `finally` clause will supersede the pending completion value from the `try` or `catch` clauses. The above `if` statement pops the pending completion from the stack. ```ts _.trys.pop(); continue; ``` The remaining statements handle the point at which we exit a **protected region**. Here we pop the current **protected region** from the stack and spin the `while` statement to evaluate the current operation again in the next **protected region** or at the function boundary. ## Handling a completed generator Once the generator has completed, the `_` state variable will be falsey. As a result, the `while` loop will terminate and hand control off to the final statement of the orchestration function, which deals with how a completed generator is evaluated: ```ts if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; ``` If the caller calls `throw` on the generator it will send Opcode 1 ("throw"). If an exception is uncaught within the body of the generator, it will send Opcode 6 ("catch"). As the generator has completed, it throws the exception. Both of these cases are caught by the bitmask `5`, which does not collide with the only two other valid completion Opcodes. If the caller calls `next` on the generator, it will send Opcode 0 ("next"). As the generator has completed, it returns an `IteratorResult` where `value` is `undefined` and `done` is true. If the caller calls `return` on the generator, it will send Opcode 2 ("return"). As the generator has completed, it returns an `IteratorResult` where `value` is the value provided to `return`, and `done` is true.