Merge branch 'master' of https://github.com/sveltejs/language-tools into event-type-check

Author: jasonlyu123

README.md

@@ -73,6 +73,8 @@ Pull requests are encouraged and always welcome. [Pick an issue](https://github.
 
 To install and work on these tools locally:
 
+> Make sure to uninstall the extension from the marketplace to not have it clash with the local one.
+
 ```bash
 git clone https://github.com/sveltejs/language-tools.git svelte-language-tools
 cd svelte-language-tools
@@ -102,7 +104,7 @@ To run the developer version of both the language server and the VSCode extensio
 -   Go to the debugging panel
 -   Make sure "Run VSCode Extension" is selected, and hit run
 
-This launches a new VSCode window and a watcher for your changes. In this dev window you can choose an existing Svelte project to work against. If you don't use pure Javascript and CSS, but languages like Typescript or SCSS, your project will need a [Svelte preprocessor setup](packages/svelte-vscode#using-with-preprocessors). When you make changes to the extension or language server you can use the command "Reload Window" in the VSCode command palette to see your changes.
+This launches a new VSCode window and a watcher for your changes. In this dev window you can choose an existing Svelte project to work against. If you don't use pure Javascript and CSS, but languages like Typescript or SCSS, your project will need a [Svelte preprocessor setup](packages/svelte-vscode#using-with-preprocessors). When you make changes to the extension or language server you can use the command "Reload Window" in the VSCode command palette to see your changes. When you make changes to `svelte2tsx`, you first need to run `yarn build` within its folder.
 
 ### Running Tests
 

docs/preprocessors/typescript.md

@@ -126,37 +126,3 @@ $: show = !!data.someKey; // <-- `show` now has type `boolean`
 ### Can I use TypeScript syntax inside the template/mustache tags?
 
 At the moment, you cannot. Only `script`/`style` tags are preprocessed/transpiled. See [this issue](https://github.com/sveltejs/svelte/issues/4701) for more info.
-
-### I get weird type errors on my html tags
-
-This may be due to some library you are using having installed typings for `react`. These are picked up by the TypeScript compiler. Because we internally transform svelte to jsx, there is a clash and said error occurs.
-
-![image](https://user-images.githubusercontent.com/374638/85633868-72697280-b67a-11ea-8f8c-7fe2b4702339.png)
-
-The underlying [issue in TypeScript](https://github.com/microsoft/TypeScript/issues/18588) is yet to be fixed but in the meantime, one way to work around it is as follows:
-
-1. Add a `sink.d.ts` with content `declare module 'react' {}`
-2. Go to your `tsconfig.json`
-3. If you do not have such a setting already, enhance `compilerOptions` with `"baseUrl": "."`
-4. Enhance `compilerOptions` with `"paths": { "react": ["<path to your sink.d.ts, relative to the baseUrl>"] }`
-
-`tsconfig.json`
-
-```json
-{
-    "compilerOptions": {
-        "baseUrl": ".",
-        "paths": {
-            "react": ["sink.d.ts"]
-        }
-    }
-}
-```
-
-`sink.d.ts:`
-
-```ts
-declare module 'react';
-```
-
-For more info see [this issue](https://github.com/sveltejs/language-tools/issues/228)

packages/language-server/src/plugins/svelte/features/getCompletions.ts

@@ -4,10 +4,10 @@ import {
     CompletionList,
     CompletionItemKind,
     CompletionItem,
+    InsertTextFormat,
 } from 'vscode-languageserver';
 import { SvelteTag, documentation, getLatestOpeningTag } from './SvelteTags';
 import { isInTag } from '../../../lib/documents';
-
 /**
  * Get completions for special svelte tags within moustache tags.
  */
@@ -54,9 +54,18 @@ function getCompletionsWithRegardToTriggerCharacter(
 
     if (triggerCharacter === '#') {
         return createCompletionItems([
-            { tag: 'if', label: 'if' },
-            { tag: 'each', label: 'each' },
-            { tag: 'await', label: 'await' },
+            { tag: 'if', label: 'if', insertText: 'if $1}\n\t$2\n{/if' },
+            { tag: 'each', label: 'each', insertText: 'each $1 as $2}\n\t$3\n{/each' },
+            {
+                tag: 'await',
+                label: 'await :then',
+                insertText: 'await $1}\n\t$2\n{:then $3} \n\t$4\n{/await',
+            },
+            {
+                tag: 'await',
+                label: 'await then',
+                insertText: 'await $1 then $2}\n\t$3\n{/await',
+            },
         ]);
     }
 
@@ -133,12 +142,16 @@ function showCompletionWithRegardsToOpenedTags(
 /**
  * Create the completion items for given labels and tags.
  */
-function createCompletionItems(items: { label: string; tag: SvelteTag }[]): CompletionList {
+function createCompletionItems(
+    items: { label: string; tag: SvelteTag; insertText?: string }[],
+): CompletionList {
     return CompletionList.create(
         // add sortText/preselect so it is ranked higher than other completions and selected first
         items.map(
             (item) =>
                 <CompletionItem>{
+                    insertTextFormat: InsertTextFormat.Snippet,
+                    insertText: item.insertText,
                     label: item.label,
                     sortText: '-1',
                     kind: CompletionItemKind.Keyword,

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

@@ -14,7 +14,12 @@ import {
 } from '../../lib/documents';
 import { pathToUrl } from '../../utils';
 import { ConsumerDocumentMapper } from './DocumentMapper';
-import { getScriptKindFromAttributes, getScriptKindFromFileName, isSvelteFilePath } from './utils';
+import {
+    getScriptKindFromAttributes,
+    getScriptKindFromFileName,
+    isSvelteFilePath,
+    getTsCheckComment,
+} from './utils';
 
 /**
  * An error which occured while trying to parse/preprocess the svelte file contents.
@@ -120,10 +125,9 @@ function preprocessSvelteFile(document: Document, options: SvelteSnapshotOptions
         if (tsxMap) {
             tsxMap.sources = [document.uri];
 
-            const tsCheck = document.scriptInfo?.content.match(tsCheckRegex);
+            const tsCheck = getTsCheckComment(document.scriptInfo?.content);
             if (tsCheck) {
-                // second-last entry is the capturing group with the exact ts-check wording
-                text = `//${tsCheck[tsCheck.length - 3]}${ts.sys.newLine}` + text;
+                text = tsCheck + text;
                 nrPrependedLines = 1;
             }
         }
@@ -330,13 +334,3 @@ export class SvelteSnapshotFragment implements SnapshotFragment {
         }
     }
 }
-
-// The following regex matches @ts-check or @ts-nocheck if:
-// - it is before the first line of code (so other lines with comments before it are ok)
-// - must be @ts-(no)check
-// - the comment which has @ts-(no)check can have any type of whitespace before it, but not other characters
-// - what's coming after @ts-(no)check is irrelevant as long there is any kind of whitespace or line break, so this would be picked up, too: // @ts-check asdasd
-// [ \t\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]
-// is just \s (a.k.a any whitespace character) without linebreak and vertical tab
-// eslint-disable-next-line
-const tsCheckRegex = /^(\s*(\/\/[ \t\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff\S]*)*\s*)*(\/\/[ \t\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]*(@ts-(no)?check)($|\s))/;

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

@@ -79,7 +79,10 @@ export class TypeScriptPlugin
         this.configManager = configManager;
         this.lsAndTsDocResolver = new LSAndTSDocResolver(docManager, workspacePath);
         this.completionProvider = new CompletionsProviderImpl(this.lsAndTsDocResolver);
-        this.codeActionsProvider = new CodeActionsProviderImpl(this.lsAndTsDocResolver);
+        this.codeActionsProvider = new CodeActionsProviderImpl(
+            this.lsAndTsDocResolver,
+            this.completionProvider,
+        );
         this.updateImportsProvider = new UpdateImportsProviderImpl(this.lsAndTsDocResolver);
         this.diagnosticsProvider = new DiagnosticsProviderImpl(this.lsAndTsDocResolver);
         this.renameProvider = new RenameProviderImpl(this.lsAndTsDocResolver);
@@ -108,9 +111,10 @@ export class TypeScriptPlugin
             return null;
         }
         const declaration = ts.displayPartsToString(info.displayParts);
-        const documentation = typeof info.documentation === 'string'
-            ? info.documentation
-            : ts.displayPartsToString(info.documentation);
+        const documentation =
+            typeof info.documentation === 'string'
+                ? info.documentation
+                : ts.displayPartsToString(info.documentation);
 
         // https://microsoft.github.io/language-server-protocol/specification#textDocument_hover
         const contents = ['```typescript', declaration, '```']

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

@@ -11,11 +11,12 @@ import {
 import { Document, mapRangeToOriginal, isRangeInTag } from '../../../lib/documents';
 import { pathToUrl } from '../../../utils';
 import { CodeActionsProvider } from '../../interfaces';
-import { SnapshotFragment } from '../DocumentSnapshot';
+import { SnapshotFragment, SvelteSnapshotFragment } from '../DocumentSnapshot';
 import { LSAndTSDocResolver } from '../LSAndTSDocResolver';
 import { convertRange } from '../utils';
 import { flatten } from '../../../utils';
 import ts from 'typescript';
+import { CompletionsProviderImpl } from './CompletionProvider';
 
 interface RefactorArgs {
     type: 'refactor';
@@ -25,7 +26,10 @@ interface RefactorArgs {
 }
 
 export class CodeActionsProviderImpl implements CodeActionsProvider {
-    constructor(private readonly lsAndTsDocResolver: LSAndTSDocResolver) {}
+    constructor(
+        private readonly lsAndTsDocResolver: LSAndTSDocResolver,
+        private readonly completionProvider: CompletionsProviderImpl,
+    ) {}
 
     async getCodeActions(
         document: Document,
@@ -122,6 +126,17 @@ export class CodeActionsProviderImpl implements CodeActionsProvider {
                                 null,
                             ),
                             change.textChanges.map((edit) => {
+                                if (
+                                    fix.fixName === 'import' &&
+                                    doc instanceof SvelteSnapshotFragment
+                                ) {
+                                    return this.completionProvider.codeActionChangeToTextEdit(
+                                        document,
+                                        doc,
+                                        edit,
+                                        true,
+                                    );
+                                }
                                 return TextEdit.replace(
                                     mapRangeToOriginal(doc!, convertRange(doc!, edit.span)),
                                     edit.newText,

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

@@ -210,12 +210,9 @@ export class CompletionsProviderImpl implements CompletionsProvider<CompletionEn
 
             for (const action of actions) {
                 for (const change of action.changes) {
-                    edit.push(...this.codeActionChangesToTextEdit(
-                        document,
-                        fragment,
-                        change,
-                        isImport
-                    ));
+                    edit.push(
+                        ...this.codeActionChangesToTextEdit(document, fragment, change, isImport),
+                    );
                 }
             }
 
@@ -255,7 +252,7 @@ export class CompletionsProviderImpl implements CompletionsProvider<CompletionEn
         );
     }
 
-    private codeActionChangeToTextEdit(
+    codeActionChangeToTextEdit(
         doc: Document,
         fragment: SvelteSnapshotFragment,
         change: ts.TextChange,
@@ -308,20 +305,16 @@ export class CompletionsProviderImpl implements CompletionsProvider<CompletionEn
         return TextEdit.replace(range, change.newText);
     }
 
-    private mapRangeForNewImport(
-        fragment: SvelteSnapshotFragment,
-        virtualRange: Range
-    ) {
+    private mapRangeForNewImport(fragment: SvelteSnapshotFragment, virtualRange: Range) {
         const sourceMapableRange = this.offsetLinesAndMovetoStartOfLine(virtualRange, -1);
-        const mappableRange = mapRangeToOriginal(
-            fragment, sourceMapableRange);
+        const mappableRange = mapRangeToOriginal(fragment, sourceMapableRange);
         return this.offsetLinesAndMovetoStartOfLine(mappableRange, 1);
     }
 
     private offsetLinesAndMovetoStartOfLine({ start, end }: Range, offsetLines: number) {
         return Range.create(
             Position.create(start.line + offsetLines, 0),
-            Position.create(end.line + offsetLines, 0)
+            Position.create(end.line + offsetLines, 0),
         );
     }
 

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

@@ -127,7 +127,7 @@ export class RenameProviderImpl implements RenameProvider {
         if (
             !renameInfo.canRename ||
             renameInfo.kind === ts.ScriptElementKind.jsxAttribute ||
-            renameInfo.fullDisplayName?.startsWith('JSX.')
+            renameInfo.fullDisplayName?.includes("JSX.IntrinsicElements")
         ) {
             return null;
         }

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

@@ -66,7 +66,7 @@ export function createLanguageService(
     const svelteModuleLoader = createSvelteModuleLoader(getSnapshot, compilerOptions);
 
     const svelteTsPath = dirname(require.resolve('svelte2tsx'));
-    const svelteTsxFiles = ['./svelte-shims.d.ts', './svelte-jsx.d.ts'].map((f) =>
+    const svelteTsxFiles = ['./svelte-shims.d.ts', './svelte-jsx.d.ts', './svelte-native-jsx.d.ts'].map((f) =>
         ts.sys.resolvePath(resolve(svelteTsPath, f)),
     );
 
@@ -162,8 +162,7 @@ export function createLanguageService(
             declaration: false,
             skipLibCheck: true,
             // these are needed to handle the results of svelte2tsx preprocessing:
-            jsx: ts.JsxEmit.Preserve,
-            jsxFactory: 'h',
+            jsx: ts.JsxEmit.Preserve
         };
 
         // always let ts parse config to get default compilerOption
@@ -203,6 +202,24 @@ export function createLanguageService(
             ...forcedCompilerOptions,
         };
 
+        // detect which JSX namespace to use (svelte | svelteNative) if not specified or not compatible
+        if (!compilerOptions.jsxFactory || !compilerOptions.jsxFactory.startsWith("svelte")) {
+            //default to regular svelte, this causes the usage of the "svelte.JSX" namespace
+            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";
+                    }
+                } catch (e) {
+                    //we stay regular svelte
+                }
+            }
+        }
+
         return { compilerOptions, files };
     }
 

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

@@ -260,3 +260,29 @@ export function mapSeverity(category: ts.DiagnosticCategory): DiagnosticSeverity
 
     return DiagnosticSeverity.Error;
 }
+
+// Matches comments that come before any non-comment content
+const commentsRegex = /^(\s*\/\/.*\s*)*/;
+// The following regex matches @ts-check or @ts-nocheck if:
+// - must be @ts-(no)check
+// - the comment which has @ts-(no)check can have any type of whitespace before it, but not other characters
+// - what's coming after @ts-(no)check is irrelevant as long there is any kind of whitespace or line break, so this would be picked up, too: // @ts-check asdasd
+// [ \t\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]
+// is just \s (a.k.a any whitespace character) without linebreak and vertical tab
+// eslint-disable-next-line max-len
+const tsCheckRegex = /\/\/[ \t\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]*(@ts-(no)?check)($|\s)/;
+
+/**
+ * Returns `// @ts-check` or `// @ts-nocheck` if content starts with comments and has one of these
+ * in its comments.
+ */
+export function getTsCheckComment(str = ''): string | undefined {
+    const comments = str.match(commentsRegex)?.[0];
+    if (comments) {
+        const tsCheck = comments.match(tsCheckRegex);
+        if (tsCheck) {
+            // second-last entry is the capturing group with the exact ts-check wording
+            return `// ${tsCheck[tsCheck.length - 3]}${ts.sys.newLine}`;
+        }
+    }
+}

packages/language-server/test/plugins/svelte/features/getCompletions.test.ts

@@ -49,7 +49,7 @@ describe('SveltePlugin#getCompletions', () => {
     });
 
     it('should return completions for #', () => {
-        expectCompletionsFor('{#').toEqual(['if', 'each', 'await']);
+        expectCompletionsFor('{#').toEqual(['if', 'each', 'await :then', 'await then']);
     });
 
     it('should return completions for @', () => {

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

@@ -6,6 +6,7 @@ import ts from 'typescript';
 import * as path from 'path';
 import * as assert from 'assert';
 import { Range, Position, CodeActionKind, TextDocumentEdit } from 'vscode-languageserver';
+import { CompletionsProviderImpl } from '../../../../src/plugins/typescript/features/CompletionProvider';
 
 const testDir = path.join(__dirname, '..');
 
@@ -27,7 +28,8 @@ describe('CodeActionsProvider', () => {
             (textDocument) => new Document(textDocument.uri, textDocument.text),
         );
         const lsAndTsDocResolver = new LSAndTSDocResolver(docManager, testDir);
-        const provider = new CodeActionsProviderImpl(lsAndTsDocResolver);
+        const completionProvider = new CompletionsProviderImpl(lsAndTsDocResolver);
+        const provider = new CodeActionsProviderImpl(lsAndTsDocResolver, completionProvider);
         const filePath = getFullPath(filename);
         const document = docManager.openDocument(<any>{
             uri: pathToUrl(filePath),