(fix) remove svelte from typings, add it to every svelte2tsx output instead (#441)

Less setup for people (`"types": ["svelte"]` now obsolete), makes TS search more of the other globals.
#430

Author: dummdidumm

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

@@ -300,7 +300,11 @@ export class CompletionsProviderImpl implements CompletionsProvider<CompletionEn
             });
         }
         // prevent newText from being placed like this: <script>import {} from ''
-        if (range.start.line === 0) {
+        if (
+            range.start.line === 0 &&
+            !change.newText.startsWith('\r\n') &&
+            !change.newText.startsWith('\n')
+        ) {
             change.newText = ts.sys.newLine + change.newText;
         }
 

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

@@ -66,9 +66,11 @@ export function createLanguageService(
     const svelteModuleLoader = createSvelteModuleLoader(getSnapshot, compilerOptions);
 
     const svelteTsPath = dirname(require.resolve('svelte2tsx'));
-    const svelteTsxFiles = ['./svelte-shims.d.ts', './svelte-jsx.d.ts', './svelte-native-jsx.d.ts'].map((f) =>
-        ts.sys.resolvePath(resolve(svelteTsPath, f)),
-    );
+    const svelteTsxFiles = [
+        './svelte-shims.d.ts',
+        './svelte-jsx.d.ts',
+        './svelte-native-jsx.d.ts',
+    ].map((f) => ts.sys.resolvePath(resolve(svelteTsPath, f)));
 
     const host: ts.LanguageServiceHost = {
         getCompilationSettings: () => compilerOptions,
@@ -162,7 +164,7 @@ export function createLanguageService(
             declaration: false,
             skipLibCheck: true,
             // these are needed to handle the results of svelte2tsx preprocessing:
-            jsx: ts.JsxEmit.Preserve
+            jsx: ts.JsxEmit.Preserve,
         };
 
         // always let ts parse config to get default compilerOption
@@ -191,28 +193,22 @@ export function createLanguageService(
         );
 
         const files = parsedConfig.fileNames;
-
-        const sveltePkgInfo = getPackageInfo('svelte', workspacePath || process.cwd());
-        const types = (parsedConfig.options?.types ?? []).concat(
-            resolve(sveltePkgInfo.path, 'types', 'runtime'),
-        );
         const compilerOptions: ts.CompilerOptions = {
             ...parsedConfig.options,
-            types,
             ...forcedCompilerOptions,
         };
 
         // detect which JSX namespace to use (svelte | svelteNative) if not specified or not compatible
-        if (!compilerOptions.jsxFactory || !compilerOptions.jsxFactory.startsWith("svelte")) {
+        if (!compilerOptions.jsxFactory || !compilerOptions.jsxFactory.startsWith('svelte')) {
             //default to regular svelte, this causes the usage of the "svelte.JSX" namespace
-            compilerOptions.jsxFactory = "svelte.createElement";
+            compilerOptions.jsxFactory = 'svelte.createElement';
 
             //override if we detect svelte-native
             if (workspacePath) {
                 try {
                     const svelteNativePkgInfo = getPackageInfo('svelte-native', workspacePath);
                     if (svelteNativePkgInfo.path) {
-                        compilerOptions.jsxFactory = "svelteNative.createElement";
+                        compilerOptions.jsxFactory = 'svelteNative.createElement';
                     }
                 } catch (e) {
                     //we stay regular svelte

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

@@ -193,8 +193,8 @@ describe('CodeActionsProvider', () => {
                             },
                         },
                         textRange: {
-                            pos: 130,
-                            end: 164,
+                            pos: 162,
+                            end: 196,
                         },
                     },
                 ],
@@ -283,8 +283,8 @@ describe('CodeActionsProvider', () => {
                             },
                         },
                         textRange: {
-                            pos: 130,
-                            end: 164,
+                            pos: 162,
+                            end: 196,
                         },
                     },
                 ],

packages/language-server/test/plugins/typescript/testfiles/svelte-native/tsconfig.json

@@ -1,5 +1,10 @@
 {
-    "compilerOptions": { 
-        "jsxFactory": "svelteNative"
-     }
+    "compilerOptions": {
+        "jsxFactory": "svelteNative",
+        /**
+          This is actually not needed, but makes the tests faster
+          because TS does not look up other types.
+        */
+        "types": ["svelte"]
+    }
 }

packages/language-server/test/plugins/typescript/testfiles/tsconfig.json

@@ -1,3 +1,10 @@
 {
-    "compilerOptions": { "strict": true }
+    "compilerOptions": {
+        "strict": true,
+        /**
+          This is actually not needed, but makes the tests faster
+          because TS does not look up other types.
+        */
+        "types": ["svelte"]
+    }
 }

packages/svelte2tsx/src/svelte2tsx.ts

@@ -220,7 +220,8 @@ function processSvelteTemplate(str: MagicString): TemplateProcessResult {
                 if (parent.type == 'Property' && prop == 'key') return;
                 scope.declared.add(node.name);
             } else {
-                if (parent.type == 'MemberExpression' && prop == 'property' && !parent.computed) return;
+                if (parent.type == 'MemberExpression' && prop == 'property' && !parent.computed)
+                    return;
                 if (parent.type == 'Property' && prop == 'key') return;
                 pendingStoreResolutions.push({ node, parent, scope });
             }
@@ -1039,6 +1040,8 @@ export function svelte2tsx(
         componentDocumentation,
     );
 
+    str.prepend('///<reference types="svelte" />\n');
+
     return {
         code: str.toString(),
         map: str.generateMap({ hires: true, source: options?.filename }),

packages/svelte2tsx/test/sourcemaps/event-binding.html

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 <><Component  />{__sveltets_instanceOf(Component).$on('click', __sveltets_store_get(check) ? method1 : method2)}
                                                                                     1====  2================== 

packages/svelte2tsx/test/sourcemaps/let.html

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 
     let  selected = __sveltets_invalidate(() => lookup.get(slug));

packages/svelte2tsx/test/sourcemaps/repl.html

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;
 	export async function preload({ params }) {
 		const res = await this.fetch(`tutorial/${params.slug}.json`);

packages/svelte2tsx/test/svelte2tsx/samples/$store-index/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 <>{someRecordOrArr[__sveltets_store_get(store)]}
 {someObject['$store']}