importModuleSpecifierEnding changes .ts string completions to .js

src/compiler/moduleSpecifiers.ts

@@ -694,7 +694,11 @@ namespace ts.moduleSpecifiers {
     }
 
     function getJSExtensionForFile(fileName: string, options: CompilerOptions): Extension {
-        const ext = extensionFromPath(fileName);
+        return tryGetJSExtensionForFile(fileName, options) ?? Debug.fail(`Extension ${extensionFromPath(fileName)} is unsupported:: FileName:: ${fileName}`);
+    }
+
+    export function tryGetJSExtensionForFile(fileName: string, options: CompilerOptions): Extension | undefined {
+        const ext = tryGetExtensionFromPath(fileName);
         switch (ext) {
             case Extension.Ts:
             case Extension.Dts:
@@ -705,10 +709,8 @@ namespace ts.moduleSpecifiers {
             case Extension.Jsx:
             case Extension.Json:
                 return ext;
-            case Extension.TsBuildInfo:
-                return Debug.fail(`Extension ${Extension.TsBuildInfo} is unsupported:: FileName:: ${fileName}`);
             default:
-                return Debug.assertNever(ext);
+                return undefined;
         }
     }
 

src/services/stringCompletions.ts

@@ -321,13 +321,14 @@ namespace ts.Completions.StringCompletions {
 
     interface ExtensionOptions {
         readonly extensions: readonly Extension[];
-        readonly includeExtensions: boolean;
+        readonly includeExtensionsOption: IncludeExtensionsOption;
     }
-    function getExtensionOptions(compilerOptions: CompilerOptions, includeExtensions = false): ExtensionOptions {
-        return { extensions: getSupportedExtensionsForModuleResolution(compilerOptions), includeExtensions };
+    function getExtensionOptions(compilerOptions: CompilerOptions, includeExtensionsOption = IncludeExtensionsOption.Exclude): ExtensionOptions {
+        return { extensions: getSupportedExtensionsForModuleResolution(compilerOptions), includeExtensionsOption };
     }
     function getCompletionEntriesForRelativeModules(literalValue: string, scriptDirectory: string, compilerOptions: CompilerOptions, host: LanguageServiceHost, scriptPath: Path, preferences: UserPreferences) {
-        const extensionOptions = getExtensionOptions(compilerOptions, preferences.importModuleSpecifierEnding === "js");
+        const includeExtensions = preferences.importModuleSpecifierEnding === "js" ? IncludeExtensionsOption.ModuleSpecifierCompletion : IncludeExtensionsOption.Exclude;
+        const extensionOptions = getExtensionOptions(compilerOptions, includeExtensions);
         if (compilerOptions.rootDirs) {
             return getCompletionEntriesForDirectoryFragmentWithRootDirs(
                 compilerOptions.rootDirs, literalValue, scriptDirectory, extensionOptions, compilerOptions, host, scriptPath);
@@ -370,10 +371,15 @@ namespace ts.Completions.StringCompletions {
         return flatMap(baseDirectories, baseDirectory => getCompletionEntriesForDirectoryFragment(fragment, baseDirectory, extensionOptions, host, exclude));
     }
 
+    const enum IncludeExtensionsOption {
+        Exclude,
+        Include,
+        ModuleSpecifierCompletion,
+    }
     /**
      * Given a path ending at a directory, gets the completions for the path, and filters for those entries containing the basename.
      */
-    function getCompletionEntriesForDirectoryFragment(fragment: string, scriptPath: string, { extensions, includeExtensions }: ExtensionOptions, host: LanguageServiceHost, exclude?: string, result: NameAndKind[] = []): NameAndKind[] {
+    function getCompletionEntriesForDirectoryFragment(fragment: string, scriptPath: string, { extensions, includeExtensionsOption }: ExtensionOptions, host: LanguageServiceHost, exclude?: string, result: NameAndKind[] = []): NameAndKind[] {
         if (fragment === undefined) {
             fragment = "";
         }
@@ -407,7 +413,7 @@ namespace ts.Completions.StringCompletions {
         if (files) {
             /**
              * Multiple file entries might map to the same truncated name once we remove extensions
-             * (happens iff includeExtensions === false)so we use a set-like data structure. Eg:
+             * (happens iff includeExtensionsOption === includeExtensionsOption.Exclude) so we use a set-like data structure. Eg:
              *
              * both foo.ts and foo.tsx become foo
              */
@@ -418,8 +424,20 @@ namespace ts.Completions.StringCompletions {
                     continue;
                 }
 
-                const foundFileName = includeExtensions || fileExtensionIs(filePath, Extension.Json) ? getBaseFileName(filePath) : removeFileExtension(getBaseFileName(filePath));
-                foundFiles.set(foundFileName, tryGetExtensionFromPath(filePath));
+                let foundFileName: string;
+                const outputExtension = moduleSpecifiers.tryGetJSExtensionForFile(filePath, host.getCompilationSettings());
+                if (includeExtensionsOption === IncludeExtensionsOption.Exclude && !fileExtensionIs(filePath, Extension.Json)) {
+                    foundFileName = removeFileExtension(getBaseFileName(filePath));
+                    foundFiles.set(foundFileName, tryGetExtensionFromPath(filePath));
+                }
+                else if (includeExtensionsOption === IncludeExtensionsOption.ModuleSpecifierCompletion && outputExtension) {
+                    foundFileName = changeExtension(getBaseFileName(filePath), outputExtension);
+                    foundFiles.set(foundFileName, outputExtension);
+                }
+                else {
+                    foundFileName = getBaseFileName(filePath);
+                    foundFiles.set(foundFileName, tryGetExtensionFromPath(filePath));
+                }
             }
 
             foundFiles.forEach((ext, foundFile) => {
@@ -635,7 +653,7 @@ namespace ts.Completions.StringCompletions {
 
         const [, prefix, kind, toComplete] = match;
         const scriptPath = getDirectoryPath(sourceFile.path);
-        const names = kind === "path" ? getCompletionEntriesForDirectoryFragment(toComplete, scriptPath, getExtensionOptions(compilerOptions, /*includeExtensions*/ true), host, sourceFile.path)
+        const names = kind === "path" ? getCompletionEntriesForDirectoryFragment(toComplete, scriptPath, getExtensionOptions(compilerOptions, IncludeExtensionsOption.Include), host, sourceFile.path)
             : kind === "types" ? getCompletionEntriesFromTypings(host, compilerOptions, scriptPath, getFragmentDirectory(toComplete), getExtensionOptions(compilerOptions))
             : Debug.fail();
         return addReplacementSpans(toComplete, range.pos + prefix.length, names);

tests/cases/fourslash/completionImportModuleSpecifierEndingDts.ts

@@ -0,0 +1,9 @@
+/// <reference path='fourslash.ts'/>
+//@Filename:test.d.ts
+//// export declare class Test {}
+
+//@Filename:module.ts
+////import { Test } from ".//**/"
+
+verify.completions({ marker: "", includes:{name:"test.js"}, preferences: {importModuleSpecifierEnding: "js" }, isNewIdentifierLocation: true});
+verify.completions({ marker: "", includes:{name:"test"}, preferences: {importModuleSpecifierEnding: "index" }, isNewIdentifierLocation: true});

tests/cases/fourslash/completionImportModuleSpecifierEnding.ts → tests/cases/fourslash/completionImportModuleSpecifierEndingJs.ts

@@ -8,5 +8,5 @@
 //@Filename:module.js
 ////import { f } from ".//**/"
 
-
-verify.completions({ marker: "", includes:{name:"test.js"}, preferences: {importModuleSpecifierEnding: "js" }, isNewIdentifierLocation: true})
+verify.completions({ marker: "", includes:{name:"test.js"}, preferences: {importModuleSpecifierEnding: "js" }, isNewIdentifierLocation: true});
+verify.completions({ marker: "", includes:{name:"test"}, preferences: {importModuleSpecifierEnding: "index" }, isNewIdentifierLocation: true});

tests/cases/fourslash/completionImportModuleSpecifierEndingJsx.ts

@@ -0,0 +1,11 @@
+/// <reference path='fourslash.ts'/>
+//@allowJs: true
+//@jsx:preserve
+//@Filename:test.jsx
+//// export class Test { }
+
+//@Filename:module.jsx
+////import { Test } from ".//**/"
+
+verify.completions({ marker: "", includes:{name:"test.jsx"}, preferences: {importModuleSpecifierEnding: "js"}, isNewIdentifierLocation: true});
+verify.completions({ marker: "", includes:{name:"test"}, preferences: {importModuleSpecifierEnding: "index" }, isNewIdentifierLocation: true});

tests/cases/fourslash/completionImportModuleSpecifierEndingTs.ts

@@ -0,0 +1,11 @@
+/// <reference path='fourslash.ts'/>
+//@Filename:test.ts
+////export function f(){
+////    return 1
+////}
+
+//@Filename:module.ts
+////import { f } from ".//**/"
+
+verify.completions({ marker: "", includes:{name:"test.js"}, preferences: {importModuleSpecifierEnding: "js" }, isNewIdentifierLocation: true});
+verify.completions({ marker: "", includes:{name:"test"}, preferences: {importModuleSpecifierEnding: "index" }, isNewIdentifierLocation: true});

tests/cases/fourslash/completionImportModuleSpecifierEndingTsxPreserve.ts

@@ -0,0 +1,10 @@
+/// <reference path='fourslash.ts'/>
+//@jsx:preserve
+//@Filename:test.tsx
+//// export class Test { }
+
+//@Filename:module.tsx
+////import { Test } from ".//**/"
+
+verify.completions({ marker: "", includes:{name:"test.jsx"}, preferences: {importModuleSpecifierEnding: "js"}, isNewIdentifierLocation: true});
+verify.completions({ marker: "", includes:{name:"test"}, preferences: {importModuleSpecifierEnding: "index" }, isNewIdentifierLocation: true});

tests/cases/fourslash/completionImportModuleSpecifierEndingTsxReact.ts

@@ -0,0 +1,10 @@
+/// <reference path='fourslash.ts'/>
+//@jsx:react
+//@Filename:test.tsx
+//// export class Test { }
+
+//@Filename:module.tsx
+////import { Test } from ".//**/"
+
+verify.completions({ marker: "", includes:{name:"test.js"}, preferences: {importModuleSpecifierEnding: "js"}, isNewIdentifierLocation: true});
+verify.completions({ marker: "", includes:{name:"test"}, preferences: {importModuleSpecifierEnding: "index" }, isNewIdentifierLocation: true});

tests/cases/fourslash/completionImportModuleSpecifierEndingUnsupportedExtension.ts

@@ -0,0 +1,9 @@
+/// <reference path='fourslash.ts'/>
+//@Filename:index.css
+//// body {}
+
+//@Filename:module.ts
+////import ".//**/"
+
+verify.completions({ marker: "", excludes:"index.css", preferences: {importModuleSpecifierEnding: "js" }, isNewIdentifierLocation: true});
+verify.completions({ marker: "", excludes:"index", preferences: {importModuleSpecifierEnding: "index" }, isNewIdentifierLocation: true});