fix: Svelte module resolution tweaks (#2481)

Svelte files are now resolved by intercepting checks for .d.svelte.ts instead of .svelte.ts. As a consequence, we can handle sibling foo.svelte / foo.svelte.ts files and importing both. When doing import Foo from './foo.svelte this now resolves to the Svelte file (prio to #2463 it would resovle to the .svelte.ts file), and doing import Foo from './foo.svelte.js will resolve to the TS file.

Author: dummdidumm

packages/language-server/.gitignore

@@ -1,3 +1,4 @@
 dist/
 .vscode/
 node_modules/
+!test/plugins/typescript/features/diagnostics/fixtures/exports-map-svelte/node_modules/

packages/language-server/package.json

@@ -10,7 +10,7 @@
         "./bin/server.js": "./bin/server.js"
     },
     "scripts": {
-        "test": "cross-env TS_NODE_TRANSPILE_ONLY=true mocha --require ts-node/register \"test/**/*.ts\" --exclude \"test/**/*.d.ts\"",
+        "test": "cross-env TS_NODE_TRANSPILE_ONLY=true mocha --require ts-node/register \"test/**/*.test.ts\"",
         "build": "tsc",
         "prepublishOnly": "npm run build",
         "watch": "tsc -w"

packages/language-server/src/plugins/typescript/module-loader.ts

@@ -104,7 +104,7 @@ class ImpliedNodeFormatResolver {
             return undefined;
         }
 
-        let mode = undefined;
+        let mode: ReturnType<typeof ts.getModeForResolutionAtIndex> = undefined;
         if (sourceFile) {
             this.cacheImpliedNodeFormat(sourceFile, compilerOptions);
             mode = ts.getModeForResolutionAtIndex(sourceFile, importIdxInFile, compilerOptions);

packages/language-server/src/plugins/typescript/svelte-sys.ts

@@ -11,6 +11,17 @@ export function createSvelteSys(tsSystem: ts.System) {
     function svelteFileExists(path: string) {
         if (isVirtualSvelteFilePath(path)) {
             const sveltePath = toRealSvelteFilePath(path);
+
+            // First check if there's a `.svelte.d.ts` or `.d.svelte.ts` file, which should take precedence
+            const dtsPath = sveltePath.slice(0, -7) + '.svelte.d.ts';
+            const dtsPathExists = fileExistsCache.get(dtsPath) ?? tsSystem.fileExists(dtsPath);
+            fileExistsCache.set(dtsPath, dtsPathExists);
+            if (dtsPathExists) return false;
+
+            const svelteDtsPathExists = fileExistsCache.get(path) ?? tsSystem.fileExists(path);
+            fileExistsCache.set(path, svelteDtsPathExists);
+            if (svelteDtsPathExists) return false;
+
             const sveltePathExists =
                 fileExistsCache.get(sveltePath) ?? tsSystem.fileExists(sveltePath);
             fileExistsCache.set(sveltePath, sveltePathExists);
@@ -33,10 +44,11 @@ export function createSvelteSys(tsSystem: ts.System) {
         svelteFileExists,
         getRealSveltePathIfExists,
         fileExists(path: string) {
-            // We need to check both .svelte and .svelte.ts/js because that's how Svelte 5 will likely mark files with runes in them
+            // We need to check if this is a virtual svelte file
             const sveltePathExists = svelteFileExists(path);
-            const exists =
-                sveltePathExists || (fileExistsCache.get(path) ?? tsSystem.fileExists(path));
+            if (sveltePathExists) return true;
+
+            const exists = fileExistsCache.get(path) ?? tsSystem.fileExists(path);
             fileExistsCache.set(path, exists);
             return exists;
         },
@@ -66,7 +78,7 @@ export function createSvelteSys(tsSystem: ts.System) {
         const realpath = tsSystem.realpath;
         svelteSys.realpath = function (path) {
             if (svelteFileExists(path)) {
-                return realpath(toRealSvelteFilePath(path)) + '.ts';
+                return realpath(toRealSvelteFilePath(path));
             }
             return realpath(path);
         };

packages/language-server/src/plugins/typescript/utils.ts

@@ -70,15 +70,17 @@ export function isSvelteFilePath(filePath: string) {
 }
 
 export function isVirtualSvelteFilePath(filePath: string) {
-    return filePath.endsWith('.svelte.ts');
+    return filePath.endsWith('.d.svelte.ts');
 }
 
 export function toRealSvelteFilePath(filePath: string) {
-    return filePath.slice(0, -'.ts'.length);
+    return filePath.slice(0, -11 /* 'd.svelte.ts'.length */) + 'svelte';
 }
 
-export function toVirtualSvelteFilePath(filePath: string) {
-    return filePath.endsWith('.ts') ? filePath : filePath + '.ts';
+export function toVirtualSvelteFilePath(svelteFilePath: string) {
+    return isVirtualSvelteFilePath(svelteFilePath)
+        ? svelteFilePath
+        : svelteFilePath.slice(0, -6 /* 'svelte'.length */) + 'd.svelte.ts';
 }
 
 export function ensureRealSvelteFilePath(filePath: string) {

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/bindings-two-way-check/expectedv2.json

@@ -0,0 +1,18 @@
+[
+    {
+        "code": -1,
+        "message": "Unexpected token",
+        "range": {
+            "end": {
+                "character": 47,
+                "line": 12
+            },
+            "start": {
+                "character": 47,
+                "line": 12
+            }
+        },
+        "severity": 1,
+        "source": "ts"
+    }
+]

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/exports-map-svelte/expectedv2.json

@@ -0,0 +1,36 @@
+[
+    {
+        "code": 2307,
+        "message": "Cannot find module 'package' or its corresponding type declarations.",
+        "range": {
+            "end": {
+                "character": 45,
+                "line": 1
+            },
+            "start": {
+                "character": 36,
+                "line": 1
+            }
+        },
+        "severity": 1,
+        "source": "ts",
+        "tags": []
+    },
+    {
+        "code": 2307,
+        "message": "Cannot find module 'package/y' or its corresponding type declarations.",
+        "range": {
+            "start": {
+                "character": 38,
+                "line": 3
+            },
+            "end": {
+                "character": 49,
+                "line": 3
+            }
+        },
+        "severity": 1,
+        "source": "ts",
+        "tags": []
+    }
+]

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/exports-map-svelte/input.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+    import DefaultSvelteWithTS from 'package'; // with https://github.com/sveltejs/language-tools/pull/2478 this would work; needs decision if we want that
+    import SubWithDTS from 'package/x';
+    import SubWithoutDTSAndNotTS from 'package/y';
+</script>
+
+<DefaultSvelteWithTS />
+<SubWithDTS />
+<SubWithoutDTSAndNotTS />

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/exports-map-svelte/node_modules/package/foo.svelte

@@ -0,0 +1,7 @@
+{
+    "compilerOptions": {
+        "module": "esnext",
+        "target": "esnext",
+        "moduleResolution": "Bundler"
+    }
+}

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/exports-map-svelte/node_modules/package/package.json

@@ -0,0 +1,3 @@
+<script>
+    export let foo = true;
+</script>

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/exports-map-svelte/node_modules/package/x-types.d.ts

@@ -0,0 +1 @@
+export declare const a: boolean;

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/exports-map-svelte/node_modules/package/x.svelte

@@ -0,0 +1,3 @@
+<script>
+    export let foo = true;
+</script>

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/exports-map-svelte/node_modules/package/y.svelte

@@ -0,0 +1 @@
+export const b = true;

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/exports-map-svelte/tsconfig.json

@@ -0,0 +1 @@
+export declare const c: boolean;

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/import-precedence/a.svelte

@@ -0,0 +1,3 @@
+<script>
+    export let foo = true;
+</script>

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/import-precedence/a.svelte.d.ts

@@ -0,0 +1,3 @@
+<script>
+    export let foo = true;
+</script>

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/import-precedence/b.svelte

@@ -0,0 +1 @@
+export const d = true;

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/import-precedence/b.svelte.ts

@@ -0,0 +1 @@
+[]

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/import-precedence/c.d.svelte.ts

@@ -0,0 +1,15 @@
+<script lang="ts">
+    import { a } from './a.svelte';
+    import B from './b.svelte';
+    import { b } from './b.svelte.js';
+    import { c } from './c.svelte';
+    import D from './d.svelte';
+    import { d } from './d.svelte.js';
+    a;
+    b;
+    c;
+    d;
+</script>
+
+<B />
+<D />

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/import-precedence/c.svelte

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "strict": true,
+        "allowJs": true,
+        "target": "ESNext",
+        /**
+          This is actually not needed, but makes the tests faster
+          because TS does not look up other types.
+        */
+        "types": ["svelte"],
+        "allowArbitraryExtensions": true // else .d.svelte.ts will be an error
+    }
+}

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/import-precedence/d.svelte

@@ -59,12 +59,12 @@ describe('createSvelteModuleLoader', () => {
     it('uses svelte script kind if resolved module is svelte file', async () => {
         const resolvedModule: ts.ResolvedModuleFull = {
             extension: ts.Extension.Ts,
-            resolvedFileName: 'filename.svelte.ts'
+            resolvedFileName: 'filename.d.svelte.ts'
         };
         const { getSvelteSnapshotStub, moduleResolver, svelteSys } = setup(resolvedModule);
 
         svelteSys.getRealSveltePathIfExists = (filename: string) =>
-            filename === 'filename.svelte.ts' ? 'filename.svelte' : filename;
+            filename === 'filename.d.svelte.ts' ? 'filename.svelte' : filename;
 
         const result = moduleResolver.resolveModuleNames(
             ['./normal.ts'],

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/import-precedence/d.svelte.js

@@ -29,18 +29,24 @@ describe('Svelte Sys', () => {
     }
 
     describe('#fileExists', () => {
-        it('should leave files with no .svelte.ts-ending as is', async () => {
+        it('should leave files with no .d.svelte.ts-ending as is', async () => {
             const { loader, fileExistsStub } = setupLoader();
             loader.fileExists('../file.ts');
 
             assert.strictEqual(fileExistsStub.getCall(0).args[0], '../file.ts');
         });
 
-        it('should convert .svelte.ts-endings', async () => {
+        it('should convert .d.svelte.ts-endings', async () => {
             const { loader, fileExistsStub } = setupLoader();
-            loader.fileExists('../file.svelte.ts');
+            fileExistsStub.onCall(0).returns(false);
+            fileExistsStub.onCall(1).returns(false);
+            fileExistsStub.onCall(2).returns(true);
 
-            assert.strictEqual(fileExistsStub.getCall(0).args[0], '../file.svelte');
+            loader.fileExists('../file.d.svelte.ts');
+
+            assert.strictEqual(fileExistsStub.getCall(0).args[0], '../file.svelte.d.ts');
+            assert.strictEqual(fileExistsStub.getCall(1).args[0], '../file.d.svelte.ts');
+            assert.strictEqual(fileExistsStub.getCall(2).args[0], '../file.svelte');
         });
     });
 });

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/import-precedence/expectedv2.json

@@ -1,6 +1,6 @@
 {
     "name": "typescript-svelte-plugin",
-    "version": "0.2.0",
+    "version": "0.3.0",
     "description": "A TypeScript Plugin providing Svelte intellisense",
     "main": "dist/src/index.js",
     "scripts": {