Await member expr (#337)

Lets you await parts of a member expression.

Author: bterlson

.chronus/changes/await-member-expr-2025-10-18-16-35-24.md

@@ -0,0 +1,7 @@
+---
+changeKind: feature
+packages:
+  - "@alloy-js/typescript"
+---
+
+Add `await` prop to MemberExpression.Part to allow awaiting the value of that part.

packages/typescript/src/components/MemberExpression.tsx

@@ -35,6 +35,10 @@ interface PartDescriptorBase {
   nullish: boolean;
   type: boolean;
   args?: Children[];
+  /**
+   * Whether to await the value that results from this part of the member expression.
+   */
+  await?: boolean;
 }
 
 type PartDescriptor = PartDescriptorWithId | PartDescriptorWithIndex;
@@ -47,7 +51,8 @@ type PartDescriptor = PartDescriptorWithId | PartDescriptorWithIndex;
  * * **refkey**: a refkey for a symbol whose name becomes the identifier
  * * **symbol**: a symbol whose name becomes the identifier part
  * * **args**: create a method call with the given args
- * * **children**: arbitrary contents for the identifier part.
+ * * **children**: arbitrary contents for the identifier part
+ * * **await**: whether to await the value that results from this part of the member expression
  *
  * Each part can have a nullish prop, which indicates that the part may be null
  * or undefined.
@@ -88,6 +93,10 @@ export function MemberExpression(props: MemberExpressionProps): Children {
   }
 
   const isCallChain = computed(() => {
+    for (const part of parts) {
+      if (part.await) return false;
+    }
+
     let callCount = 0;
     for (const part of parts) {
       if (part.args !== undefined) callCount++;
@@ -247,6 +256,7 @@ function createPartDescriptorFromProps(
         (symbolSource.value as TSOutputSymbol).isTypeSymbol
       );
     }),
+    await: computed(() => partProps.await),
   };
 
   return reactive(part);
@@ -389,27 +399,47 @@ function formatCallChain(parts: PartDescriptor[]): Children {
 
 function formatNonCallChain(parts: PartDescriptor[]): Children {
   return computed(() => {
-    const expression: Children[] = [];
+    let expression: Children = [];
 
     for (let i = 0; i < parts.length; i++) {
       const part = parts[i];
       const base = isIdPartDescriptor(part) ? part.id : part.index;
       if (i === 0) {
-        expression.push(base);
+        (expression as Children[]).push(base);
       } else {
         // Determine if we should use nullish operator from previous part
         const prevPart = parts[i - 1];
+        let partExpr;
 
         if (prevPart.type) {
-          expression.push(formatArrayAccess(prevPart, part));
+          partExpr = formatArrayAccess(prevPart, part);
         } else if (part.args !== undefined) {
           // For parts with only args (no name), append function call directly with appropriate nullish operator
-          expression.push(formatCallExpr(prevPart, part));
+          partExpr = formatCallExpr(prevPart, part);
         } else if (part.accessStyle === "dot") {
-          expression.push(formatDotAccess(prevPart, part));
+          partExpr = formatDotAccess(prevPart, part);
         } else {
           // bracket notation - don't include the dot
-          expression.push(formatArrayAccess(prevPart, part));
+          partExpr = formatArrayAccess(prevPart, part);
+        }
+
+        if (Array.isArray(expression)) {
+          expression.push(partExpr);
+        } else {
+          expression = (
+            <>
+              {expression}
+              {partExpr}
+            </>
+          );
+        }
+      }
+
+      if (part.await) {
+        if (i < parts.length - 1) {
+          expression = <>(await {expression})</>;
+        } else {
+          expression = <>await {expression}</>;
         }
       }
     }
@@ -524,6 +554,11 @@ export interface MemberExpressionPartProps {
    */
   args?: Children[] | boolean;
 
+  /**
+   * Whether to await the value that results from this part of the member expression.
+   */
+  await?: boolean;
+
   /**
    * This part is nullish. Subsequent parts use conditional access operators.
    */
@@ -543,7 +578,8 @@ export interface MemberExpressionPartProps {
  * * **refkey**: A refkey for a symbol whose name becomes the identifier
  * * **symbol**: a symbol whose name becomes the identifier part
  * * **args**: create a method call with the given args
- * * **children**: arbitrary contents for the identifier part.
+ * * **children**: arbitrary contents for the identifier part
+ * * **await**: whether to await the value that results from this part of the member expression
  *
  * Each part can have a nullish prop, which indicates that the part may be null
  * or undefined.

packages/typescript/test/member-expression.test.tsx

@@ -760,3 +760,81 @@ describe("formatting", () => {
     });
   });
 });
+
+describe("with await", () => {
+  it("renders member expression with await", () => {
+    expect(
+      toSourceText(
+        <MemberExpression>
+          <MemberExpression.Part id="foo" />
+          <MemberExpression.Part id="bar" />
+          <MemberExpression.Part args await />
+          <MemberExpression.Part id="baz" />
+        </MemberExpression>,
+      ),
+    ).toBe(d`
+      (await foo.bar()).baz
+    `);
+  });
+
+  it("renders member expression with await at the end", () => {
+    expect(
+      toSourceText(
+        <MemberExpression>
+          <MemberExpression.Part id="foo" />
+          <MemberExpression.Part id="bar" />
+          <MemberExpression.Part args await />
+        </MemberExpression>,
+      ),
+    ).toBe(d`
+      await foo.bar()
+    `);
+  });
+
+  it("renders member expression with await in the middle of property access", () => {
+    expect(
+      toSourceText(
+        <MemberExpression>
+          <MemberExpression.Part id="foo" />
+          <MemberExpression.Part id="bar" await />
+          <MemberExpression.Part id="baz" />
+        </MemberExpression>,
+      ),
+    ).toBe(d`
+      (await foo.bar).baz
+    `);
+  });
+
+  it("renders member expression with multiple awaits", () => {
+    expect(
+      toSourceText(
+        <MemberExpression>
+          <MemberExpression.Part id="foo" />
+          <MemberExpression.Part id="bar" await />
+          <MemberExpression.Part id="baz" await />
+          <MemberExpression.Part id="qux" />
+        </MemberExpression>,
+      ),
+    ).toBe(d`
+      (await (await foo.bar).baz).qux
+    `);
+  });
+
+  it("renders member expression with await and call chain (disables formatting)", () => {
+    expect(
+      toSourceText(
+        <MemberExpression>
+          <MemberExpression.Part id="foo" />
+          <MemberExpression.Part id="bar" />
+          <MemberExpression.Part args />
+          <MemberExpression.Part id="baz" />
+          <MemberExpression.Part args await />
+          <MemberExpression.Part id="qux" />
+          <MemberExpression.Part args />
+        </MemberExpression>,
+      ),
+    ).toBe(d`
+      (await foo.bar().baz()).qux()
+    `);
+  });
+});