(fix) Component auto Import when the import specifier config is js

packages/language-server/src/plugins/typescript/features/CodeActionsProvider.ts

@@ -328,6 +328,9 @@ export class CodeActionsProviderImpl implements CodeActionsProvider {
 
         const name = node.tagName.getText();
         const suffixedName = name + '__SvelteComponent_';
+        const errorPreventingUserPreferences =
+            this.completionProvider.fixUserPreferencesForSvelteComponentImport(userPreferences);
+
         const toFix = (c: ts.CompletionEntry) =>
             lang
                 .getCompletionEntryDetails(
@@ -336,7 +339,7 @@ export class CodeActionsProviderImpl implements CodeActionsProvider {
                     c.name,
                     {},
                     c.source,
-                    userPreferences,
+                    errorPreventingUserPreferences,
                     c.data
                 )
                 ?.codeActions?.map((a) => ({

packages/language-server/src/plugins/typescript/features/CompletionProvider.ts

@@ -392,6 +392,24 @@ export class CompletionsProviderImpl implements CompletionsProvider<CompletionEn
         return completionItem;
     }
 
+    /**
+     * TypeScript throws a debug assertion error if the importModuleSpecifierEnding config is
+     * 'js' and there's an unknown file extension - which is the case for `.svelte`. Therefore
+     * rewrite the importModuleSpecifierEnding for this case to silence the error.
+     */
+    fixUserPreferencesForSvelteComponentImport(
+        userPreferences: ts.UserPreferences
+    ): ts.UserPreferences {
+        if (userPreferences.importModuleSpecifierEnding === 'js') {
+            return {
+                ...userPreferences,
+                importModuleSpecifierEnding: 'index'
+            };
+        }
+
+        return userPreferences;
+    }
+
     async resolveCompletion(
         document: Document,
         completionItem: AppCompletionItem<CompletionEntryWithIdentifer>,
@@ -409,14 +427,17 @@ export class CompletionsProviderImpl implements CompletionsProvider<CompletionEn
         }
 
         const fragment = await tsDoc.getFragment();
+        const errorPreventingUserPreferences = comp.source?.endsWith('.svelte')
+            ? this.fixUserPreferencesForSvelteComponentImport(userPreferences)
+            : userPreferences;
 
         const detail = lang.getCompletionEntryDetails(
             filePath,
             fragment.offsetAt(fragment.getGeneratedPosition(comp.position)),
             comp.name,
             {},
             comp.source,
-            userPreferences,
+            errorPreventingUserPreferences,
             comp.data
         );
 

packages/language-server/test/plugins/typescript/features/preferences.test.ts

@@ -132,4 +132,80 @@ describe('ts user preferences', () => {
         const item = completions?.items.find((item) => item.label === 'definition');
         assert.strictEqual(item, undefined, 'Expected no auto import suggestions');
     });
+
+    const expectedComponentImportEdit = "import Imports from '~/imports.svelte';";
+
+    function setupImportModuleSpecifierEndingJs() {
+        const { docManager, document } = setup('module-specifier-js.svelte');
+        const lsAndTsDocResolver = createLSAndTSDocResolver(docManager, {
+            preferences: {
+                importModuleSpecifier: 'non-relative',
+                importModuleSpecifierEnding: 'js',
+                quoteStyle: 'single'
+            }
+        });
+
+        return { document, lsAndTsDocResolver };
+    }
+
+    it('provides auto import for svelte component when importModuleSpecifierEnding is js', async () => {
+        const { document, lsAndTsDocResolver } = setupImportModuleSpecifierEndingJs();
+
+        const completionProvider = new CompletionsProviderImpl(lsAndTsDocResolver);
+
+        const completions = await completionProvider.getCompletions(
+            document,
+            Position.create(4, 8)
+        );
+
+        const item = completions?.items.find((item) => item.label === 'Imports');
+        const { additionalTextEdits } = await completionProvider.resolveCompletion(document, item!);
+        assert.strictEqual(additionalTextEdits![0].newText.trim(), expectedComponentImportEdit);
+    });
+
+    it('provides auto import for context="module" export when importModuleSpecifierEnding is js', async () => {
+        const { document, lsAndTsDocResolver } = setupImportModuleSpecifierEndingJs();
+
+        const completionProvider = new CompletionsProviderImpl(lsAndTsDocResolver);
+
+        const completions = await completionProvider.getCompletions(
+            document,
+            Position.create(1, 6)
+        );
+
+        const item = completions?.items.find((item) => item.label === 'hi');
+        const { additionalTextEdits } = await completionProvider.resolveCompletion(document, item!);
+        assert.strictEqual(
+            additionalTextEdits![0].newText.trim(),
+            "import { hi } from '~/with-context-module.svelte';"
+        );
+    });
+
+    it('provides import code action for svelte component when importModuleSpecifierEnding is js', async () => {
+        const range = Range.create(Position.create(4, 1), Position.create(4, 8));
+        const { document, lsAndTsDocResolver } = setupImportModuleSpecifierEndingJs();
+
+        const completionProvider = new CompletionsProviderImpl(lsAndTsDocResolver);
+        const codeActionProvider = new CodeActionsProviderImpl(
+            lsAndTsDocResolver,
+            completionProvider
+        );
+
+        const codeAction = await codeActionProvider.getCodeActions(document, range, {
+            diagnostics: [
+                Diagnostic.create(
+                    range,
+                    "Cannot find name 'Imports'",
+                    DiagnosticSeverity.Error,
+                    2304,
+                    'ts'
+                )
+            ]
+        });
+
+        const documentChange = codeAction[0].edit?.documentChanges?.[0] as
+            | TextDocumentEdit
+            | undefined;
+        assert.strictEqual(documentChange?.edits[0].newText.trim(), expectedComponentImportEdit);
+    });
 });

packages/language-server/test/plugins/typescript/testfiles/preferences/module-specifier-js.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    hi
+</script>
+
+<Imports></Imports>

packages/language-server/test/plugins/typescript/testfiles/preferences/with-context-module.svelte

@@ -0,0 +1,3 @@
+<script lang="ts" context="module">
+    export function hi() {}
+</script>