Fix(52604): Provide Object member completions without comma; insert a comma

src/compiler/diagnosticMessages.json

@@ -7644,6 +7644,10 @@
         "category": "Message",
         "code": 95186
     },
+    "Add missing comma for object member completion '{0}'.": {
+        "category": "Message",
+        "code": 95187
+    },
 
     "No value exists in scope for the shorthand property '{0}'. Either declare one or provide an initializer.": {
         "category": "Error",

src/services/completions.ts

@@ -217,6 +217,7 @@ import {
     isPrivateIdentifier,
     isPrivateIdentifierClassElementDeclaration,
     isPropertyAccessExpression,
+    isPropertyAssignment,
     isPropertyDeclaration,
     isPropertyNameLiteral,
     isRegularExpressionLiteral,
@@ -443,6 +444,8 @@ export enum CompletionSource {
     ObjectLiteralMethodSnippet = "ObjectLiteralMethodSnippet/",
     /** Case completions for switch statements */
     SwitchCases = "SwitchCases/",
+    /** Completions for an Object literal expression */
+    ObjectLiteralMemberWithComma = "ObjectLiteralMemberWithComma/",
 }
 
 /** @internal */
@@ -1683,6 +1686,15 @@ function createCompletionEntry(
         hasAction = true;
     }
 
+    if (completionKind === CompletionKind.ObjectPropertyDeclaration && contextToken &&
+        findPrecedingToken(contextToken.pos, sourceFile, contextToken)?.kind !== SyntaxKind.CommaToken &&
+        (isMethodDeclaration(contextToken.parent.parent) || isSpreadAssignment(contextToken.parent) || findAncestor(contextToken.parent, (node: Node) => isPropertyAssignment(node))?.getLastToken() === contextToken ||
+        isShorthandPropertyAssignment(contextToken.parent) && getLineAndCharacterOfPosition(contextToken.getSourceFile(), contextToken.getEnd()).line !== getLineAndCharacterOfPosition(contextToken.getSourceFile(), position).line)) {
+
+        source = CompletionSource.ObjectLiteralMemberWithComma;
+        hasAction = true;
+    }
+
     if (preferences.includeCompletionsWithClassMemberSnippets &&
         preferences.includeCompletionsWithInsertText &&
         completionKind === CompletionKind.MemberLike &&
@@ -2664,7 +2676,8 @@ function getSymbolCompletionFromEntryId(
         return info && info.name === entryId.name && (
             entryId.source === CompletionSource.ClassMemberSnippet && symbol.flags & SymbolFlags.ClassMember
             || entryId.source === CompletionSource.ObjectLiteralMethodSnippet && symbol.flags & (SymbolFlags.Property | SymbolFlags.Method)
-            || getSourceFromOrigin(origin) === entryId.source)
+            || getSourceFromOrigin(origin) === entryId.source
+            || entryId.source === CompletionSource.ObjectLiteralMemberWithComma)
             ? { type: "symbol" as const, symbol, location, origin, contextToken, previousToken, isJsxInitializer, isTypeOnlyLocation }
             : undefined;
     }) || { type: "none" };
@@ -2860,6 +2873,21 @@ function getCompletionEntryCodeActionsAndSourceDisplay(
         return { codeActions: [codeAction], sourceDisplay: undefined };
     }
 
+    if (source === CompletionSource.ObjectLiteralMemberWithComma && contextToken) {
+        const changes = textChanges.ChangeTracker.with(
+            { host, formatContext, preferences },
+            tracker => tracker.insertText(sourceFile, contextToken.end,","));
+        if (changes) {
+            return {
+                sourceDisplay: undefined,
+                codeActions: [{
+                    changes,
+                    description: diagnosticToString([Diagnostics.Add_missing_comma_for_object_member_completion_0, name]),
+                }],
+            };
+        }
+    }
+
     if (!origin || !(originIsExport(origin) || originIsResolvedExport(origin))) {
         return { codeActions: undefined, sourceDisplay: undefined };
     }
@@ -4156,7 +4184,7 @@ function getCompletionData(
      */
     function tryGetObjectLikeCompletionSymbols(): GlobalsSearch | undefined {
         const symbolsStartIndex = symbols.length;
-        const objectLikeContainer = tryGetObjectLikeCompletionContainer(contextToken);
+        const objectLikeContainer = tryGetObjectLikeCompletionContainer(contextToken, position);
         if (!objectLikeContainer) return GlobalsSearch.Continue;
 
         // We're looking up possible property names from contextual/inferred/declared type.
@@ -4884,7 +4912,7 @@ function getCompletionData(
  * Returns the immediate owning object literal or binding pattern of a context token,
  * on the condition that one exists and that the context implies completion should be given.
  */
-function tryGetObjectLikeCompletionContainer(contextToken: Node | undefined): ObjectLiteralExpression | ObjectBindingPattern | undefined {
+function tryGetObjectLikeCompletionContainer(contextToken: Node | undefined, position: number): ObjectLiteralExpression | ObjectBindingPattern | undefined {
     if (contextToken) {
         const { parent } = contextToken;
         switch (contextToken.kind) {
@@ -4899,8 +4927,30 @@ function tryGetObjectLikeCompletionContainer(contextToken: Node | undefined): Ob
             case SyntaxKind.AsyncKeyword:
                 return tryCast(parent.parent, isObjectLiteralExpression);
             case SyntaxKind.Identifier:
-                return (contextToken as Identifier).text === "async" && isShorthandPropertyAssignment(contextToken.parent)
-                    ? contextToken.parent.parent : undefined;
+                if ((contextToken as Identifier).text === "async" && isShorthandPropertyAssignment(contextToken.parent)) {
+                    return contextToken.parent.parent;
+                }
+                else {
+                    if (isObjectLiteralExpression(contextToken.parent.parent) &&
+                        (isSpreadAssignment(contextToken.parent) || isShorthandPropertyAssignment(contextToken.parent) &&
+                        (getLineAndCharacterOfPosition(contextToken.getSourceFile(), contextToken.getEnd()).line !== getLineAndCharacterOfPosition(contextToken.getSourceFile(), position).line))) {
+                        return contextToken.parent.parent;
+                    }
+                    const ancestorNode = findAncestor(parent, (node: Node) => isPropertyAssignment(node));
+                    if (ancestorNode && ancestorNode.getLastToken() === contextToken && isObjectLiteralExpression(ancestorNode.parent)) {
+                        return ancestorNode.parent;
+                    }
+                }
+                break;
+            default:
+                if (parent.parent && parent.parent.parent && isMethodDeclaration(parent.parent) && isObjectLiteralExpression(parent.parent.parent)) {
+                    return parent.parent.parent;
+                }
+                const ancestorNode = findAncestor(parent, (node: Node) => isPropertyAssignment(node));
+                if (contextToken.kind !== SyntaxKind.ColonToken && ancestorNode && ancestorNode.getLastToken() === contextToken &&
+                    isObjectLiteralExpression(ancestorNode.parent)) {
+                    return ancestorNode.parent;
+                }
         }
     }
 

tests/cases/fourslash/completionsObjectLiteralExpressions1.ts

@@ -0,0 +1,43 @@
+/// <reference path="fourslash.ts" />
+//// interface ColorPalette {
+////     primary?: string;
+////     secondary?: string;
+//// }
+
+//// let colors: ColorPalette = {
+////     primary: "red"
+////     /**/
+//// };
+
+verify.completions({
+  marker: "",
+  includes: [{
+    name: "secondary",
+    sortText: completion.SortText.OptionalMember,
+    hasAction: true,
+    source: completion.CompletionSource.ObjectLiteralMemberWithComma,
+  }],
+  preferences: {
+    allowIncompleteCompletions: true,
+    includeInsertTextCompletions: true,
+  },
+});
+
+verify.applyCodeActionFromCompletion("", {
+  name: "secondary",
+  description: `Add missing comma for object member completion 'secondary'.`,
+  source: completion.CompletionSource.ObjectLiteralMemberWithComma,
+  newFileContent:
+  `interface ColorPalette {
+    primary?: string;
+    secondary?: string;
+}
+let colors: ColorPalette = {
+    primary: "red",
+
+};`,
+  preferences: {
+    allowIncompleteCompletions: true,
+    includeInsertTextCompletions: true,
+  },
+});

tests/cases/fourslash/completionsObjectLiteralExpressions2.ts

@@ -0,0 +1,48 @@
+/// <reference path="fourslash.ts" />
+//// interface ColorPalette {
+////   primary?: string;
+////   secondary?: string;
+//// }
+
+//// interface I {
+////  color: ColorPalette;
+//// }
+
+//// const a: I = {
+////   color: {primary: "red" /**/}
+//// }
+
+verify.completions({
+  marker: "",
+  includes: [{
+    name: "secondary",
+    sortText: completion.SortText.OptionalMember,
+    hasAction: true,
+    source: completion.CompletionSource.ObjectLiteralMemberWithComma,
+   }],
+  preferences: {
+    allowIncompleteCompletions: true,
+    includeInsertTextCompletions: true,
+  }
+});
+
+verify.applyCodeActionFromCompletion("", {
+  name: "secondary",
+  description: `Add missing comma for object member completion 'secondary'.`,
+  source: completion.CompletionSource.ObjectLiteralMemberWithComma,
+  newFileContent:
+`interface ColorPalette {
+  primary?: string;
+  secondary?: string;
+}
+interface I {
+ color: ColorPalette;
+}
+const a: I = {
+  color: {primary: "red", }
+}`,
+  preferences: {
+    allowIncompleteCompletions: true,
+    includeInsertTextCompletions: true,
+  },
+});

tests/cases/fourslash/completionsObjectLiteralExpressions3.ts

@@ -0,0 +1,45 @@
+/// <reference path="fourslash.ts" />
+////interface T {
+////     aaa?: string;
+////     foo(): void;
+//// }
+//// const obj: T = {
+////     foo() {
+//        
+////     }
+////     /**/
+//// }
+
+verify.completions({
+    marker: "",
+    includes: [{
+      name: "aaa",
+      sortText: completion.SortText.OptionalMember,
+      hasAction: true,
+      source: completion.CompletionSource.ObjectLiteralMemberWithComma,
+    }],
+    preferences: {
+      allowIncompleteCompletions: true,
+      includeInsertTextCompletions: true,
+    },
+});
+
+verify.applyCodeActionFromCompletion("", {
+    name: "aaa",
+    description: `Add missing comma for object member completion 'aaa'.`,
+    source: completion.CompletionSource.ObjectLiteralMemberWithComma,
+    newFileContent:
+    `interface T {
+     aaa?: string;
+     foo(): void;
+ }
+ const obj: T = {
+     foo() {
+     },
+
+ }`,
+    preferences: {
+      allowIncompleteCompletions: true,
+      includeInsertTextCompletions: true,
+    },
+  });

tests/cases/fourslash/completionsObjectLiteralExpressions4.ts

@@ -0,0 +1,42 @@
+/// <reference path="fourslash.ts" />
+////interface T {
+////     aaa: number;
+////     bbb?: number;
+//// }
+//// const obj: T = {
+////     aaa: 1 * (2 + 3)
+////     /**/
+//// }
+
+verify.completions({
+    marker: "",
+    includes: [{
+      name: "bbb",
+      sortText: completion.SortText.OptionalMember,
+      hasAction: true,
+      source: completion.CompletionSource.ObjectLiteralMemberWithComma,
+    }],
+    preferences: {
+      allowIncompleteCompletions: true,
+      includeInsertTextCompletions: true,
+    },
+});
+
+verify.applyCodeActionFromCompletion("", {
+    name: "bbb",
+    description: `Add missing comma for object member completion 'bbb'.`,
+    source: completion.CompletionSource.ObjectLiteralMemberWithComma,
+    newFileContent:
+    `interface T {
+     aaa: number;
+     bbb?: number;
+ }
+ const obj: T = {
+     aaa: 1 * (2 + 3),
+
+ }`,
+    preferences: {
+      allowIncompleteCompletions: true,
+      includeInsertTextCompletions: true,
+    },
+});

tests/cases/fourslash/completionsObjectLiteralExpressions5.ts

@@ -0,0 +1,39 @@
+/// <reference path="fourslash.ts" />
+
+//// type E = {}
+//// type F = string
+//// interface I { e: E, f?: F }
+//// const i: I = { e: {}
+////    /**/
+//// };
+
+verify.completions({
+    marker: "",
+    includes: [{
+      name: "f",
+      sortText: completion.SortText.OptionalMember,
+      hasAction: true,
+      source: completion.CompletionSource.ObjectLiteralMemberWithComma,
+    }],
+    preferences: {
+      allowIncompleteCompletions: true,
+      includeInsertTextCompletions: true,
+    },
+});
+
+verify.applyCodeActionFromCompletion("", {
+    name: "f",
+    description: `Add missing comma for object member completion 'f'.`,
+    source: completion.CompletionSource.ObjectLiteralMemberWithComma,
+    newFileContent:
+    `type E = {}
+type F = string
+interface I { e: E, f?: F }
+const i: I = { e: {},
+
+};`,
+    preferences: {
+      allowIncompleteCompletions: true,
+      includeInsertTextCompletions: true,
+    },
+});

tests/cases/fourslash/completionsObjectLiteralExpressions6.ts

@@ -0,0 +1,45 @@
+
+
+/// <reference path="fourslash.ts" />
+
+//// type E = {}
+//// type F = string
+//// const i= { e: {} };
+//// interface I { e: E, f?: F }
+//// const k: I = {
+////     ["e"]: i
+////     /**/
+//// }
+
+verify.completions({
+    marker: "",
+    includes: [{
+      name: "f",
+      sortText: completion.SortText.OptionalMember,
+      hasAction: true,
+      source: completion.CompletionSource.ObjectLiteralMemberWithComma,
+    }],
+    preferences: {
+      allowIncompleteCompletions: true,
+      includeInsertTextCompletions: true,
+    },
+});
+
+verify.applyCodeActionFromCompletion("", {
+    name: "f",
+    description: `Add missing comma for object member completion 'f'.`,
+    source: completion.CompletionSource.ObjectLiteralMemberWithComma,
+    newFileContent:
+    `type E = {}
+type F = string
+const i= { e: {} };
+interface I { e: E, f?: F }
+const k: I = {
+    ["e"]: i,
+
+}`,
+    preferences: {
+      allowIncompleteCompletions: true,
+      includeInsertTextCompletions: true,
+    },
+});