(fix) remove svelte from typings, add it to every svelte2tsx output i…

…nstead (#441)

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

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']}

packages/svelte2tsx/test/svelte2tsx/samples/array-binding-export/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 
      let [a,b,c] = [1,2,3];

packages/svelte2tsx/test/svelte2tsx/samples/ast-offset-none/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 __sveltets_store_get(var);
 () => (<></>);

packages/svelte2tsx/test/svelte2tsx/samples/ast-offset-some/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
    __sveltets_store_get(var);
 () => (<></>);

packages/svelte2tsx/test/svelte2tsx/samples/await-with-$store/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;
 import { readable } from 'svelte/store';
 function render() {

packages/svelte2tsx/test/svelte2tsx/samples/binding-group-store/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 <><input id="dom-input" type="radio" {...__sveltets_empty(__sveltets_store_get(compile_options).generate)} value="dom"/></>
 return { props: {}, slots: {}, getters: {}, events: {} }}

packages/svelte2tsx/test/svelte2tsx/samples/circle-drawer-example/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 
 	let i = 0;

packages/svelte2tsx/test/svelte2tsx/samples/component-default-slot/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 
     let b = 7;

packages/svelte2tsx/test/svelte2tsx/samples/component-multiple-slots/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 
     let b = 7;

packages/svelte2tsx/test/svelte2tsx/samples/component-slot-crazy-attributes/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 
     let b = 7;

packages/svelte2tsx/test/svelte2tsx/samples/component-with-documentation/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 <>
 

packages/svelte2tsx/test/svelte2tsx/samples/component-with-indented-multiline-documentation/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 <>
 

packages/svelte2tsx/test/svelte2tsx/samples/component-with-multiline-documentation/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 <>
 

packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-component-multi/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 <><Button ></Button>
 <Radio ></Radio></>

packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-component/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 <><Button ></Button></>
 return { props: {}, slots: {}, getters: {}, events: {'click':__sveltets_bubbleEventDef(__sveltets_instanceOf(Button).$$events_def, 'click')} }}

packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-element/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 <><button onclick={undefined}></button></>
 return { props: {}, slots: {}, getters: {}, events: {'click':__sveltets_mapElementEvent('click')} }}

packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-svelte-element/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 <><sveltebody onclick={undefined}></sveltebody>
 <sveltewindow onresize={undefined}></sveltewindow></>

packages/svelte2tsx/test/svelte2tsx/samples/export-class/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 
      class Foo {};

packages/svelte2tsx/test/svelte2tsx/samples/export-js-strictMode/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 
      let a;

packages/svelte2tsx/test/svelte2tsx/samples/export-list/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 
     let name = "world"

packages/svelte2tsx/test/svelte2tsx/samples/export-references-local/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 
     let world = "world";

packages/svelte2tsx/test/svelte2tsx/samples/export-with-default-multi/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 
     /**@type { string | number }*/

packages/svelte2tsx/test/svelte2tsx/samples/import-single-quote/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;
 import Test from './Test.svelte';
 function render() {

packages/svelte2tsx/test/svelte2tsx/samples/imports/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;
 import { a as b } from "./test.svelte"
 import * as c from "b.ts"

packages/svelte2tsx/test/svelte2tsx/samples/module-script-and-script-in-line/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;let b = 5;;<></>;function render() {
  let world = "name";
 () => (<><h1>hello {world}</h1></>);

packages/svelte2tsx/test/svelte2tsx/samples/module-script-and-script-in-line2/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;let b = 5;;<></>;function render() {
  let world = "name";
 () => (<><h1>hello {world}</h1></>);

packages/svelte2tsx/test/svelte2tsx/samples/module-script-and-script/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;
     export function preload() {}
     let b = 5;

packages/svelte2tsx/test/svelte2tsx/samples/module-script-and-script2/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;
     export function preload() {}
     let b = 5;

packages/svelte2tsx/test/svelte2tsx/samples/nested-$-variables-script/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 
 let top1 = someStore()

packages/svelte2tsx/test/svelte2tsx/samples/nested-$-variables-template/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 <><h1 onclick={ () => {
 

packages/svelte2tsx/test/svelte2tsx/samples/object-binding-export/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 
      let { name: rename } = { name: "world" };

packages/svelte2tsx/test/svelte2tsx/samples/reactive-block/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 
 let a: 1 | 2 = 1;

packages/svelte2tsx/test/svelte2tsx/samples/reactive-declare-object/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 
 

packages/svelte2tsx/test/svelte2tsx/samples/reactive-declare/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 
 

packages/svelte2tsx/test/svelte2tsx/samples/reactive-store-set/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 
     $: store.set( __sveltets_invalidate(() => __sveltets_store_get(store) + 1));

packages/svelte2tsx/test/svelte2tsx/samples/renamed-exports/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 
     let name = "world"

packages/svelte2tsx/test/svelte2tsx/samples/script-and-module-script/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;
     export function preload() {}
     let b = 5;

packages/svelte2tsx/test/svelte2tsx/samples/script-inside-head-after-toplevel-script/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 
   let b = 'top level';

packages/svelte2tsx/test/svelte2tsx/samples/script-on-bottom/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 
      let world = "name"

packages/svelte2tsx/test/svelte2tsx/samples/script-style-like-component/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 
     let Script, Style;

packages/svelte2tsx/test/svelte2tsx/samples/self-closing-component/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;
 import Test from './Test.svelte';
 function render() {

packages/svelte2tsx/test/svelte2tsx/samples/single-element/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 <><h1>hello</h1></>
 return { props: {}, slots: {}, getters: {}, events: {} }}

packages/svelte2tsx/test/svelte2tsx/samples/single-export/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 
      let name = "world"

packages/svelte2tsx/test/svelte2tsx/samples/stores-mustache/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 <><Me f={`${__sveltets_store_get(s)} `}/></>
 return { props: {}, slots: {}, getters: {}, events: {} }}

packages/svelte2tsx/test/svelte2tsx/samples/style-attribute-bare/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 <>
 

packages/svelte2tsx/test/svelte2tsx/samples/style-attribute/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 <></>
 return { props: {}, slots: {}, getters: {}, events: {} }}

packages/svelte2tsx/test/svelte2tsx/samples/style/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 <></>
 return { props: {}, slots: {}, getters: {}, events: {} }}

packages/svelte2tsx/test/svelte2tsx/samples/ts-export-arrow-function/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 
      let f = (a: number, b: number) => {

packages/svelte2tsx/test/svelte2tsx/samples/ts-export-const/expected.tsx

@@ -1,3 +1,4 @@
+///<reference types="svelte" />
 <></>;function render() {
 
      const name: string = "world";