Per-property super accessors in async functions.

TypeScript must hoist accessors for super properties when converting
async method bodies to the `__awaiter` pattern for targets before
ES2016.

Previously, TypeScript would reify all property accesses into element
accesses, i.e. convert the property name into a string parameter and
pass it to `super[...]`. That breaks optimizers like Closure Compiler or
Uglify in advanced mode, when property renaming is enabled, as it mixes
quoted and un-quoted property access (`super['x']` vs just `x` at the
declaration site).

This change creates a specific accessor for each property access on
super, which fixes the quoted/unquoted confusion. It keeps the generic
accessor for element access statements.

Fixes #21088.

Author: mprobst

src/compiler/checker.ts

@@ -15688,9 +15688,9 @@ namespace ts {
             //  // js
             //  ...
             //  asyncMethod() {
-            //      const _super = name => super[name];
+            //      const _super_asyncMethod = name => super.asyncMethod;
             //      return __awaiter(this, arguments, Promise, function *() {
-            //          let x = yield _super("asyncMethod").call(this);
+            //          let x = yield _super_asyncMethod.call(this);
             //          return x;
             //      });
             //  }
@@ -15709,19 +15709,19 @@ namespace ts {
             //  // js
             //  ...
             //  asyncMethod(ar) {
-            //      const _super = (function (geti, seti) {
-            //          const cache = Object.create(null);
-            //          return name => cache[name] || (cache[name] = { get value() { return geti(name); }, set value(v) { seti(name, v); } });
-            //      })(name => super[name], (name, value) => super[name] = value);
+            //      const _super_a = {get value() { return super.a; }, set value(v) { super.a = v; }};
+            //      const _super_b = {get value() { return super.b; }, set value(v) { super.b = v; }};
             //      return __awaiter(this, arguments, Promise, function *() {
-            //          [_super("a").value, _super("b").value] = yield ar;
+            //          [_super_a.value, _super_b.value] = yield ar;
             //      });
             //  }
             //  ...
             //
-            // This helper creates an object with a "value" property that wraps the `super` property or indexed access for both get and set.
-            // This is required for destructuring assignments, as a call expression cannot be used as the target of a destructuring assignment
-            // while a property access can.
+            // This helper creates an object with a "value" property that wraps the `super` property for both get and set. This is required for
+            // destructuring assignments, as a call expression cannot be used as the target of a destructuring assignment while a property
+            // access can.
+            //
+            // For element access expressions (`super[x]`), we emit a generic helper that forwards the element access in both situations.
             if (container.kind === SyntaxKind.MethodDeclaration && hasModifier(container, ModifierFlags.Async)) {
                 if (isSuperProperty(node.parent) && isAssignmentTarget(node.parent)) {
                     getNodeLinks(container).flags |= NodeCheckFlags.AsyncMethodWithSuperBinding;

src/compiler/transformers/es2017.ts

@@ -32,6 +32,15 @@ namespace ts {
 
         let enclosingFunctionParameterNames: UnderscoreEscapedMap<true>;
 
+        /**
+         * Keeps track of property names accessed on super (`super.x`) within async functions.
+         */
+        let capturedSuperProperties: UnderscoreEscapedMap<true>;
+        /** Whether the async function contains an element access on super (`super[x]`). */
+        let hasSuperElementAccess: boolean;
+        /** A set of node IDs for generated super accessors (variable statements). */
+        const substitutedSuperAccessors: boolean[] = [];
+
         // Save the previous transformation hooks.
         const previousOnEmitNode = context.onEmitNode;
         const previousOnSubstituteNode = context.onSubstituteNode;
@@ -53,10 +62,6 @@ namespace ts {
         }
 
         function visitor(node: Node): VisitResult<Node> {
-            if ((node.transformFlags & TransformFlags.ContainsES2017) === 0) {
-                return node;
-            }
-
             switch (node.kind) {
                 case SyntaxKind.AsyncKeyword:
                     // ES2017 async modifier should be elided for targets < ES2017
@@ -77,6 +82,18 @@ namespace ts {
                 case SyntaxKind.ArrowFunction:
                     return visitArrowFunction(<ArrowFunction>node);
 
+                case SyntaxKind.PropertyAccessExpression:
+                    if (capturedSuperProperties && isPropertyAccessExpression(node) && node.expression.kind === SyntaxKind.SuperKeyword) {
+                        capturedSuperProperties.set(node.name.escapedText, true);
+                    }
+                    return visitEachChild(node, visitor, context);
+
+                case SyntaxKind.ElementAccessExpression:
+                    if (capturedSuperProperties && (<ElementAccessExpression>node).expression.kind === SyntaxKind.SuperKeyword) {
+                        hasSuperElementAccess = true;
+                    }
+                    return visitEachChild(node, visitor, context);
+
                 default:
                     return visitEachChild(node, visitor, context);
             }
@@ -398,6 +415,11 @@ namespace ts {
                 recordDeclarationName(parameter, enclosingFunctionParameterNames);
             }
 
+            const savedCapturedSuperProperties = capturedSuperProperties;
+            const savedHasSuperElementAccess = hasSuperElementAccess;
+            capturedSuperProperties = createUnderscoreEscapedMap<true>();
+            hasSuperElementAccess = false;
+
             let result: ConciseBody;
             if (!isArrowFunction) {
                 const statements: Statement[] = [];
@@ -415,18 +437,29 @@ namespace ts {
 
                 addStatementsAfterPrologue(statements, endLexicalEnvironment());
 
+                // Minor optimization, emit `_super` helper to capture `super` access in an arrow.
+                // This step isn't needed if we eventually transform this to ES5.
+                const emitSuperHelpers = languageVersion >= ScriptTarget.ES2015 && resolver.getNodeCheckFlags(node) & (NodeCheckFlags.AsyncMethodWithSuperBinding | NodeCheckFlags.AsyncMethodWithSuper);
+
+                if (emitSuperHelpers) {
+                    enableSubstitutionForAsyncMethodsWithSuper();
+                    // For each super property access (`super.x`), emit a `_super_x` accessor arrow function.
+                    capturedSuperProperties.forEach((_, key) => {
+                        const variableStatement = createSuperAccessVariableStatement(resolver, node, key);
+                        substitutedSuperAccessors[getNodeId(variableStatement)] = true;
+                        addStatementsAfterPrologue(statements, [variableStatement]);
+                    });
+                }
+
                 const block = createBlock(statements, /*multiLine*/ true);
                 setTextRange(block, node.body);
 
-                // Minor optimization, emit `_super` helper to capture `super` access in an arrow.
-                // This step isn't needed if we eventually transform this to ES5.
-                if (languageVersion >= ScriptTarget.ES2015) {
+                if (emitSuperHelpers && hasSuperElementAccess) {
+                    // Emit helpers for super element access expressions (`super[x]`).
                     if (resolver.getNodeCheckFlags(node) & NodeCheckFlags.AsyncMethodWithSuperBinding) {
-                        enableSubstitutionForAsyncMethodsWithSuper();
                         addEmitHelper(block, advancedAsyncSuperHelper);
                     }
                     else if (resolver.getNodeCheckFlags(node) & NodeCheckFlags.AsyncMethodWithSuper) {
-                        enableSubstitutionForAsyncMethodsWithSuper();
                         addEmitHelper(block, asyncSuperHelper);
                     }
                 }
@@ -452,6 +485,8 @@ namespace ts {
             }
 
             enclosingFunctionParameterNames = savedEnclosingFunctionParameterNames;
+            capturedSuperProperties = savedCapturedSuperProperties;
+            hasSuperElementAccess = savedHasSuperElementAccess;
             return result;
         }
 
@@ -493,6 +528,8 @@ namespace ts {
                 context.enableEmitNotification(SyntaxKind.GetAccessor);
                 context.enableEmitNotification(SyntaxKind.SetAccessor);
                 context.enableEmitNotification(SyntaxKind.Constructor);
+                // We need to be notified when entering the generated accessor arrow functions.
+                context.enableEmitNotification(SyntaxKind.VariableStatement);
             }
         }
 
@@ -516,6 +553,14 @@ namespace ts {
                     return;
                 }
             }
+            // Disable substitution in the generated super accessor itself.
+            else if (enabledSubstitutions && substitutedSuperAccessors[getNodeId(node)]) {
+                const savedEnclosingSuperContainerFlags = enclosingSuperContainerFlags;
+                enclosingSuperContainerFlags = 0 as NodeCheckFlags;
+                previousOnEmitNode(hint, node, emitCallback);
+                enclosingSuperContainerFlags = savedEnclosingSuperContainerFlags;
+                return;
+            }
             previousOnEmitNode(hint, node, emitCallback);
         }
 
@@ -548,17 +593,33 @@ namespace ts {
 
         function substitutePropertyAccessExpression(node: PropertyAccessExpression) {
             if (node.expression.kind === SyntaxKind.SuperKeyword) {
-                return createSuperAccessInAsyncMethod(
-                    createLiteral(idText(node.name)),
-                    node
-                );
+                if (enclosingSuperContainerFlags & NodeCheckFlags.AsyncMethodWithSuperBinding) {
+                    return setTextRange(
+                        createPropertyAccess(
+                            createCall(
+                                createFileLevelUniqueName("_super_" + idText(node.name)),
+                                /* typeArguments */ undefined,
+                                /* argumentsArray */ undefined),
+                            "value"),
+                        node
+                    );
+                }
+                else {
+                    return setTextRange(
+                        createCall(
+                            createFileLevelUniqueName("_super_" + idText(node.name)),
+                            /* typeArguments */ undefined,
+                            /* argumentsArray */ undefined),
+                        node
+                    );
+                }
             }
             return node;
         }
 
         function substituteElementAccessExpression(node: ElementAccessExpression) {
             if (node.expression.kind === SyntaxKind.SuperKeyword) {
-                return createSuperAccessInAsyncMethod(
+                return createSuperElementAccessInAsyncMethod(
                     node.argumentExpression,
                     node
                 );
@@ -593,7 +654,7 @@ namespace ts {
                 || kind === SyntaxKind.SetAccessor;
         }
 
-        function createSuperAccessInAsyncMethod(argumentExpression: Expression, location: TextRange): LeftHandSideExpression {
+        function createSuperElementAccessInAsyncMethod(argumentExpression: Expression, location: TextRange): LeftHandSideExpression {
             if (enclosingSuperContainerFlags & NodeCheckFlags.AsyncMethodWithSuperBinding) {
                 return setTextRange(
                     createPropertyAccess(
@@ -620,6 +681,67 @@ namespace ts {
         }
     }
 
+    /** Creates a variable statement with an accessor function for the given super property name. */
+    export function createSuperAccessVariableStatement(resolver: EmitResolver, node: FunctionLikeDeclaration, name: __String) {
+        let accessor: Expression;
+        if (resolver.getNodeCheckFlags(node) & NodeCheckFlags.AsyncMethodWithSuperBinding) {
+            // For async methods assigning into a super property, emit an object literal containing a "value" getter and setter.
+            accessor = createObjectLiteral([
+                createGetAccessor(
+                    /* decorators */ undefined,
+                    /* modifiers */ undefined,
+                    "value",
+                    /* parameters */ [],
+                    /* type */ undefined,
+                    createBlock([
+                        createReturn(createPropertyAccess(
+                            createSuper(),
+                            unescapeLeadingUnderscores(name)))])),
+                createSetAccessor(
+                    /* decorators */ undefined,
+                    /* modifiers */ undefined,
+                    "value",
+                    /* parameters */ [
+                        createParameter(
+                            /* decorators */ undefined,
+                            /* modifiers */ undefined,
+                            /* dotDotDotToken */ undefined,
+                            "v")],
+                    createBlock([
+                        createExpressionStatement(
+                            createAssignment(
+                                createPropertyAccess(
+                                    createSuper(),
+                                    unescapeLeadingUnderscores(name)),
+                                createIdentifier("v")))])),
+            ]);
+        }
+        else if (resolver.getNodeCheckFlags(node) & NodeCheckFlags.AsyncMethodWithSuper) {
+            accessor = createArrowFunction(
+                /* modifiers */ undefined,
+                /* typeParameters */ undefined,
+                [],
+                /* type */ undefined,
+                /* equalsGreaterThanToken */ undefined,
+                createPropertyAccess(
+                    createSuper(),
+                    unescapeLeadingUnderscores(name)));
+        }
+        else {
+            return Debug.fail(`unexpected node check flags ${resolver.getNodeCheckFlags(node)}`);
+        }
+        return createVariableStatement(
+            /* modifiers */ undefined,
+            createVariableDeclarationList(
+                [
+                    createVariableDeclaration(
+                        createFileLevelUniqueName("_super_" + name),
+                        /* type */ undefined,
+                        accessor)
+                ],
+                NodeFlags.Const));
+    }
+
     const awaiterHelper: EmitHelper = {
         name: "typescript:awaiter",
         scoped: false,