(fix) fixes around SvelteKit imports (#1663)

- don't update ./$types in TS files (plugin)
- handle special root dir case when modifying source during completions
- handle leading whitespace in import text

Author: dummdidumm

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

@@ -284,8 +284,14 @@ export class CompletionsProviderImpl implements CompletionsProvider<CompletionEn
                 // resolve path from filePath to svelte-kit/types
                 // src/routes/foo/+page.svelte -> .svelte-kit/types/foo/$types.d.ts
                 const routesFolder = document.config?.kit?.files?.routes || 'src/routes';
-                const relativeFilePath = filePath.split(routesFolder)[1]?.slice(1);
-                if (relativeFilePath) {
+                const relativeFileName = filePath.split(routesFolder)[1]?.slice(1);
+                if (relativeFileName) {
+                    const relativePath =
+                        dirname(relativeFileName) === '.' ? '' : `${dirname(relativeFileName)}/`;
+                    const modifiedSource =
+                        $typeImport.data.source.split('.svelte-kit/types')[0] +
+                        // note the missing .d.ts at the end - TS wants it that way for some reason
+                        `.svelte-kit/types/${routesFolder}/${relativePath}$types`;
                     completionItems.push({
                         ...$typeImport,
                         // Ensure it's sorted above the other imports
@@ -295,12 +301,7 @@ export class CompletionsProviderImpl implements CompletionsProvider<CompletionEn
                         data: {
                             ...$typeImport.data,
                             __is_sveltekit$typeImport: true,
-                            source:
-                                $typeImport.data.source.split('.svelte-kit/types')[0] +
-                                // note the missing .d.ts at the end - TS wants it that way for some reason
-                                `.svelte-kit/types/${routesFolder}/${dirname(
-                                    relativeFilePath
-                                )}/$types`,
+                            source: modifiedSource,
                             data: undefined
                         }
                     });
@@ -773,7 +774,7 @@ export class CompletionsProviderImpl implements CompletionsProvider<CompletionEn
         actionTriggeredInScript: boolean,
         is$typeImport?: boolean
     ) {
-        if (is$typeImport && importText.startsWith('import ')) {
+        if (is$typeImport && importText.trim().startsWith('import ')) {
             // Take into account Node16 moduleResolution
             return importText.replace(
                 /(['"])(.+?)['"]/,

packages/typescript-plugin/src/language-service/completions.ts

@@ -28,10 +28,12 @@ export function decorateCompletions(ls: ts.LanguageService, logger: Logger): voi
                 const relativeFileName = fileName.split(routesFolder)[1]?.slice(1);
 
                 if (relativeFileName) {
+                    const relativePath =
+                        dirname(relativeFileName) === '.' ? '' : `${dirname(relativeFileName)}/`;
                     const modifiedSource =
                         $typeImport.source!.split('.svelte-kit/types')[0] +
                         // note the missing .d.ts at the end - TS wants it that way for some reason
-                        `.svelte-kit/types/${routesFolder}/${dirname(relativeFileName)}/$types`;
+                        `.svelte-kit/types/${routesFolder}/${relativePath}$types`;
                     completions.entries.push({
                         ...$typeImport,
                         // Ensure it's sorted above the other imports

packages/typescript-plugin/src/language-service/update-imports.ts

@@ -1,3 +1,4 @@
+import path from 'path';
 import type ts from 'typescript/lib/tsserverlibrary';
 import { Logger } from '../logger';
 import { SvelteSnapshotManager } from '../svelte-snapshots';
@@ -16,17 +17,28 @@ export function decorateUpdateImports(
             formatOptions,
             preferences
         );
-        // If a file move/rename of a TS/JS file results a Svelte file change,
-        // the Svelte extension will notice that, too, and adjusts the same imports.
-        // This results in duplicate adjustments or race conditions with conflicting text spans
-        // which can break imports in some cases.
-        // Therefore don't do any updates of Svelte files and and also no updates of mixed TS files
-        // and let the Svelte extension handle that.
-        return renameLocations?.filter((renameLocation) => {
-            return (
-                !isSvelteFilePath(renameLocation.fileName) &&
-                !renameLocation.textChanges.some((change) => change.newText.endsWith('.svelte'))
-            );
-        });
+        return renameLocations
+            ?.filter((renameLocation) => {
+                // If a file move/rename of a TS/JS file results a Svelte file change,
+                // the Svelte extension will notice that, too, and adjusts the same imports.
+                // This results in duplicate adjustments or race conditions with conflicting text spans
+                // which can break imports in some cases.
+                // Therefore don't do any updates of Svelte files and and also no updates of mixed TS files
+                // and let the Svelte extension handle that.
+                return (
+                    !isSvelteFilePath(renameLocation.fileName) &&
+                    !renameLocation.textChanges.some((change) => change.newText.endsWith('.svelte'))
+                );
+            })
+            .map((renameLocation) => {
+                if (path.basename(renameLocation.fileName).startsWith('+')) {
+                    // Filter out changes to './$type' imports for Kit route files,
+                    // you'll likely want these to stay as-is
+                    renameLocation.textChanges = renameLocation.textChanges.filter((change) => {
+                        return !change.newText.includes('.svelte-kit/types/');
+                    });
+                }
+                return renameLocation;
+            });
     };
 }