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

Related to #1187
TypeScript throws a debug assertion error if the importModuleSpecifierEnding config is 'js' and there's an unknown file extension (like '.svelte').

Although it's probably better to fix this on the TypeScript side, that it would probably take a while. So this is a workaround for now. Not all cases are fixed, but at least it's less likely to happen.

Author: jasonlyu123

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>