fix: load user's Svelte version in TS plugin (#2351)

Necessary for Svelte 5 which contains syntax our current built-in compiler version can't handle
#2297

Author: dummdidumm

packages/typescript-plugin/src/index.ts

@@ -6,7 +6,12 @@ import { SvelteSnapshotManager } from './svelte-snapshots';
 import type ts from 'typescript/lib/tsserverlibrary';
 import { ConfigManager, Configuration } from './config-manager';
 import { ProjectSvelteFilesManager } from './project-svelte-files';
-import { getConfigPathForProject, isSvelteProject } from './utils';
+import {
+    getConfigPathForProject,
+    getProjectDirectory,
+    importSvelteCompiler,
+    isSvelteProject
+} from './utils';
 
 function init(modules: { typescript: typeof ts }): ts.server.PluginModule {
     const configManager = new ConfigManager();
@@ -112,7 +117,8 @@ function init(modules: { typescript: typeof ts }): ts.server.PluginModule {
             info.project.projectService,
             svelteOptions,
             logger,
-            configManager
+            configManager,
+            importSvelteCompiler(getProjectDirectory(info.project))
         );
 
         const projectSvelteFilesManager = parsedCommandLine
@@ -171,12 +177,10 @@ function init(modules: { typescript: typeof ts }): ts.server.PluginModule {
             return [];
         }
 
-        const configFilePath = project.getCompilerOptions().configFilePath;
+        const configFilePath = getProjectDirectory(project);
 
         // Needed so the ambient definitions are known inside the tsx files
-        const svelteTsxFiles = resolveSvelteTsxFiles(
-            typeof configFilePath === 'string' ? configFilePath : undefined
-        );
+        const svelteTsxFiles = resolveSvelteTsxFiles(configFilePath);
 
         if (!configFilePath) {
             svelteTsxFiles.forEach((file) => {

packages/typescript-plugin/src/svelte-snapshots.ts

@@ -276,7 +276,9 @@ export class SvelteSnapshotManager {
         private projectService: ts.server.ProjectService,
         private svelteOptions: { namespace: string },
         private logger: Logger,
-        private configManager: ConfigManager
+        private configManager: ConfigManager,
+        /** undefined if no node_modules with Svelte next to tsconfig.json */
+        private svelteCompiler: typeof import('svelte/compiler') | undefined
     ) {
         this.patchProjectServiceReadFile();
     }
@@ -373,7 +375,10 @@ export class SvelteSnapshotManager {
                             filename: path.split('/').pop(),
                             isTsFile,
                             mode: 'ts',
-                            typingsNamespace: this.svelteOptions.namespace
+                            typingsNamespace: this.svelteOptions.namespace,
+                            // Don't search for compiler from current path - could be a different one from which we have loaded the svelte2tsx globals
+                            parse: this.svelteCompiler?.parse,
+                            version: this.svelteCompiler?.VERSION
                         });
                         code = result.code;
                         mapper = new SourceMapper(result.map.mappings);

packages/typescript-plugin/src/utils.ts

@@ -279,3 +279,23 @@ function hasConfigInConjunction(packageJsonPath: string, project: ts.server.Proj
         project.fileExists(join(dir, 'jsconfig.json'))
     );
 }
+
+export function importSvelteCompiler(
+    fromPath: string | undefined
+): typeof import('svelte/compiler') | undefined {
+    if (!fromPath) return undefined;
+
+    try {
+        const sveltePath = require.resolve('svelte/compiler', { paths: [fromPath] });
+        const compiler = require(sveltePath);
+
+        if (compiler.VERSION.split('.')[0] === '3') {
+            // use built-in version for Svelte 3
+            return undefined;
+        }
+
+        return compiler;
+    } catch (e) {
+        // ignore
+    }
+}