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 variable `_superProps` that contains accessors for
each property accessed on super within the async method. This allows
accessing the properties by name (instead of quoted string), which fixes
the quoted/unquoted confusion. The change keeps the generic accessor for
element access statements to match quoting behaviour.

Fixes microsoft#21088.

Author: mprobst

src/compiler/checker.ts

@@ -16180,9 +16180,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;
             //      });
             //  }
@@ -16201,19 +16201,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,26 @@ 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();
+                    const variableStatement = createSuperAccessVariableStatement(resolver, node, capturedSuperProperties);
+                    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 +482,8 @@ namespace ts {
             }
 
             enclosingFunctionParameterNames = savedEnclosingFunctionParameterNames;
+            capturedSuperProperties = savedCapturedSuperProperties;
+            hasSuperElementAccess = savedHasSuperElementAccess;
             return result;
         }
 
@@ -493,6 +525,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 +550,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,8 +590,10 @@ namespace ts {
 
         function substitutePropertyAccessExpression(node: PropertyAccessExpression) {
             if (node.expression.kind === SyntaxKind.SuperKeyword) {
-                return createSuperAccessInAsyncMethod(
-                    createLiteral(idText(node.name)),
+                return setTextRange(
+                    createPropertyAccess(
+                        createFileLevelUniqueName("_superProps"),
+                        node.name),
                     node
                 );
             }
@@ -558,7 +602,7 @@ namespace ts {
 
         function substituteElementAccessExpression(node: ElementAccessExpression) {
             if (node.expression.kind === SyntaxKind.SuperKeyword) {
-                return createSuperAccessInAsyncMethod(
+                return createSuperElementAccessInAsyncMethod(
                     node.argumentExpression,
                     node
                 );
@@ -593,7 +637,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 +664,89 @@ namespace ts {
         }
     }
 
+    /** Creates a variable named `_superProps` with accessor properties for the given property names. */
+    export function createSuperAccessVariableStatement(resolver: EmitResolver, node: FunctionLikeDeclaration, names: UnderscoreEscapedMap<true>) {
+        // Create a variable declaration with a getter/setter (if binding) definition for each name:
+        //   const _superProps = Object.create(null, { x: { get: () => super.x, set: (v) => super.x = v }, ... });
+        const hasBinding = (resolver.getNodeCheckFlags(node) & NodeCheckFlags.AsyncMethodWithSuperBinding) !== 0;
+        const accessors: PropertyAssignment[] = [];
+        names.forEach((_, key) => {
+            const name = unescapeLeadingUnderscores(key);
+            const getterAndSetter: PropertyAssignment[] = [];
+            getterAndSetter.push(createPropertyAssignment(
+                "get",
+                createArrowFunction(
+                    /* modifiers */ undefined,
+                    /* typeParameters */ undefined,
+                    /* parameters */ [],
+                    /* type */ undefined,
+                    /* equalsGreaterThanToken */ undefined,
+                    createPropertyAccess(
+                        createSuper(),
+                        name
+                    )
+                )
+            ));
+            if (hasBinding) {
+                getterAndSetter.push(
+                    createPropertyAssignment(
+                        "set",
+                        createArrowFunction(
+                            /* modifiers */ undefined,
+                            /* typeParameters */ undefined,
+                            /* parameters */ [
+                                createParameter(
+                                    /* decorators */ undefined,
+                                    /* modifiers */ undefined,
+                                    /* dotDotDotToken */ undefined,
+                                    "v",
+                                    /* questionToken */ undefined,
+                                    /* type */ undefined,
+                                    /* initializer */ undefined
+                                )
+                            ],
+                            /* type */ undefined,
+                            /* equalsGreaterThanToken */ undefined,
+                            createAssignment(
+                                createPropertyAccess(
+                                    createSuper(),
+                                    name),
+                                createIdentifier("v")
+                            )
+                        )
+                    )
+                );
+            }
+            accessors.push(
+                createPropertyAssignment(
+                    name,
+                    createObjectLiteral(getterAndSetter),
+                )
+            );
+        });
+        return createVariableStatement(
+            /* modifiers */ undefined,
+            createVariableDeclarationList(
+                [
+                    createVariableDeclaration(
+                        createFileLevelUniqueName("_superProps"),
+                        /* type */ undefined,
+                        createCall(
+                            createPropertyAccess(
+                                createIdentifier("Object"),
+                                "create"
+                            ),
+                            /* typeArguments */ undefined,
+                            [
+                                createNull(),
+                                createObjectLiteral(accessors, /* multiline */ true)
+                            ]
+                        )
+                    )
+                ],
+                NodeFlags.Const));
+    }
+
     const awaiterHelper: EmitHelper = {
         name: "typescript:awaiter",
         scoped: false,