(feat) add svelte2tsx for better ts support

packages/language-server/package.json

@@ -54,6 +54,7 @@
         "prettier-plugin-svelte": "1.1.0",
         "source-map": "^0.7.3",
         "svelte": "3.19.2",
+        "svelte2tsx": "~0.1.4",
         "typescript": "*",
         "vscode-css-languageservice": "4.1.0",
         "vscode-emmet-helper": "1.2.17",

packages/language-server/src/lib/documents/utils.ts

@@ -1,6 +1,16 @@
 import { clamp } from '../../utils';
 import { Position } from 'vscode-languageserver';
 
+export interface TagInformation {
+    content: string;
+    attributes: Record<string, string>;
+    start: number;
+    end: number;
+    startPos: Position;
+    endPos: Position;
+    container: { start: number; end: number };
+}
+
 function parseAttributeValue(value: string): string {
     return /^['"]/.test(value) ? value.slice(1, -1) : value;
 }
@@ -9,7 +19,7 @@ function parseAttributes(str: string): Record<string, string> {
     const attrs: Record<string, string> = {};
     str.split(/\s+/)
         .filter(Boolean)
-        .forEach(attr => {
+        .forEach((attr) => {
             const [name, value] = attr.split('=');
             attrs[name] = value ? parseAttributeValue(value) : name;
         });
@@ -23,7 +33,7 @@ function parseAttributes(str: string): Record<string, string> {
  * @param source text content to extract tag from
  * @param tag the tag to extract
  */
-export function extractTag(source: string, tag: 'script' | 'style') {
+export function extractTag(source: string, tag: 'script' | 'style'): TagInformation | null {
     const exp = new RegExp(`(<!--.*-->)|(<${tag}(\\s[\\S\\s]*?)?>)([\\S\\s]*?)<\\/${tag}>`, 'igs');
     let match = exp.exec(source);
 
@@ -39,12 +49,16 @@ export function extractTag(source: string, tag: 'script' | 'style') {
     const content = match[4];
     const start = match.index + match[2].length;
     const end = start + content.length;
+    const startPos = positionAt(start, source);
+    const endPos = positionAt(end, source);
 
     return {
         content,
         attributes,
         start,
         end,
+        startPos,
+        endPos,
         container: { start: match.index, end: match.index + match[0].length },
     };
 }

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

@@ -0,0 +1,93 @@
+import { Position } from 'vscode-languageserver';
+import { SourceMapConsumer } from 'source-map';
+import { TagInformation, offsetAt, positionAt } from '../../lib/documents';
+
+export interface DocumentMapper {
+    getOriginalPosition(generatedPosition: Position): Position;
+    getGeneratedPosition(originalPosition: Position): Position;
+}
+
+export class IdentityMapper implements DocumentMapper {
+    getOriginalPosition(generatedPosition: Position): Position {
+        return generatedPosition;
+    }
+
+    getGeneratedPosition(originalPosition: Position): Position {
+        return originalPosition;
+    }
+}
+
+export class FragmentMapper implements DocumentMapper {
+    constructor(private originalText: string, private tagInfo: TagInformation) {}
+
+    getOriginalPosition(generatedPosition: Position): Position {
+        const parentOffset = this.offsetInParent(offsetAt(generatedPosition, this.tagInfo.content));
+        return positionAt(parentOffset, this.originalText);
+    }
+
+    private offsetInParent(offset: number): number {
+        return this.tagInfo.start + offset;
+    }
+
+    getGeneratedPosition(originalPosition: Position): Position {
+        const fragmentOffset = offsetAt(originalPosition, this.originalText) - this.tagInfo.start;
+        return positionAt(fragmentOffset, this.originalText);
+    }
+}
+
+export class ConsumerDocumentMapper implements DocumentMapper {
+    constructor(
+        private consumer: SourceMapConsumer,
+        private sourceUri: string,
+        private nrPrependesLines: number,
+    ) {}
+
+    getOriginalPosition(generatedPosition: Position): Position {
+        generatedPosition = Position.create(
+            generatedPosition.line - this.nrPrependesLines,
+            generatedPosition.character,
+        );
+
+        const mapped = this.consumer.originalPositionFor({
+            line: generatedPosition.line + 1,
+            column: generatedPosition.character,
+        });
+
+        if (!mapped) {
+            return { line: -1, character: -1 };
+        }
+
+        if (mapped.line === 0) {
+            console.warn('Got 0 mapped line from', generatedPosition, 'col was', mapped.column);
+        }
+
+        return {
+            line: (mapped.line || 0) - 1,
+            character: mapped.column || 0,
+        };
+    }
+
+    getGeneratedPosition(originalPosition: Position): Position {
+        const mapped = this.consumer.generatedPositionFor({
+            line: originalPosition.line + 1,
+            column: originalPosition.character,
+            source: this.sourceUri,
+        });
+
+        if (!mapped) {
+            return { line: -1, character: -1 };
+        }
+
+        const result = {
+            line: (mapped.line || 0) - 1,
+            character: mapped.column || 0,
+        };
+
+        if (result.line < 0) {
+            return result;
+        }
+
+        result.line += this.nrPrependesLines;
+        return result;
+    }
+}

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

@@ -1,24 +1,224 @@
 import ts from 'typescript';
-import { getScriptKindFromAttributes } from './utils';
-import { TypescriptDocument } from './TypescriptDocument';
+import { getScriptKindFromAttributes, isSvelteFilePath, getScriptKindFromFileName } from './utils';
+import {
+    Fragment,
+    positionAt,
+    offsetAt,
+    Document,
+    extractTag,
+    TagInformation,
+} from '../../lib/documents';
+import {
+    DocumentMapper,
+    IdentityMapper,
+    ConsumerDocumentMapper,
+    FragmentMapper,
+} from './DocumentMapper';
+import { Position, Range } from 'vscode-languageserver';
+import { SourceMapConsumer, RawSourceMap } from 'source-map';
+import { pathToUrl, isInRange } from '../../utils';
+import svelte2tsx from 'svelte2tsx';
 
-export interface DocumentSnapshot extends ts.IScriptSnapshot {
-    version: number;
-    scriptKind: ts.ScriptKind;
+export interface ParserError {
+    message: string;
+    range: Range;
+    code: number;
 }
 
 export const INITIAL_VERSION = 0;
 
-export namespace DocumentSnapshot {
-    export function fromDocument(document: TypescriptDocument): DocumentSnapshot {
-        const text = document.getText();
-        const length = document.getTextLength();
-        return {
-            version: document.version,
-            scriptKind: getScriptKindFromAttributes(document.getAttributes()),
-            getText: (start, end) => text.substring(start, end),
-            getLength: () => length,
-            getChangeRange: () => undefined,
-        };
+export class DocumentSnapshot implements ts.IScriptSnapshot {
+    private fragment?: SnapshotFragment;
+
+    static fromDocument(document: Document) {
+        const {
+            tsxMap,
+            text,
+            scriptInfo,
+            styleInfo,
+            parserError,
+            nrPrependedLines,
+        } = DocumentSnapshot.preprocessIfIsSvelteFile(document.uri, document.getText());
+
+        return new DocumentSnapshot(
+            document.version,
+            getScriptKindFromAttributes(extractTag(document.getText(), 'script')?.attributes ?? {}),
+            document.getFilePath() || '',
+            parserError,
+            scriptInfo,
+            styleInfo,
+            text,
+            document.getText(),
+            nrPrependedLines,
+            tsxMap,
+        );
+    }
+
+    static fromFilePath(filePath: string) {
+        const originalText = ts.sys.readFile(filePath) ?? '';
+        const {
+            text,
+            tsxMap,
+            scriptInfo,
+            styleInfo,
+            parserError,
+            nrPrependedLines,
+        } = DocumentSnapshot.preprocessIfIsSvelteFile(pathToUrl(filePath), originalText);
+
+        return new DocumentSnapshot(
+            INITIAL_VERSION + 1, // ensure it's greater than initial build
+            getScriptKindFromFileName(filePath),
+            filePath,
+            parserError,
+            scriptInfo,
+            styleInfo,
+            text,
+            originalText,
+            nrPrependedLines,
+            tsxMap,
+        );
+    }
+
+    private static preprocessIfIsSvelteFile(uri: string, text: string) {
+        let tsxMap: RawSourceMap | undefined;
+        let parserError: ParserError | null = null;
+        const scriptInfo = extractTag(text, 'script');
+        const styleInfo = extractTag(text, 'style');
+        let nrPrependedLines = 0;
+
+        if (isSvelteFilePath(uri)) {
+            try {
+                const tsx = svelte2tsx(text);
+                text = tsx.code;
+                tsxMap = tsx.map;
+                if (tsxMap) {
+                    tsxMap.sources = [uri];
+
+                    const tsCheck = scriptInfo?.content.match(tsCheckRegex);
+                    if (tsCheck) {
+                        // second-last entry is the capturing group with the exact ts-check wording
+                        text = `//${tsCheck[tsCheck.length - 3]}${ts.sys.newLine}` + text;
+                        nrPrependedLines = 1;
+                    }
+                }
+            } catch (e) {
+                // Error start/end logic is different and has different offsets for line, so we need to convert that
+                const start: Position = {
+                    line: e.start?.line - 1 ?? 0,
+                    character: e.start?.column ?? 0,
+                };
+                const end: Position = e.end
+                    ? { line: e.end.line - 1, character: e.end.column }
+                    : start;
+                parserError = {
+                    range: { start, end },
+                    message: e.message,
+                    code: -1,
+                };
+                // fall back to extracted script, if any
+                text = scriptInfo ? scriptInfo.content : '';
+            }
+        }
+
+        return { tsxMap, text, scriptInfo, styleInfo, parserError, nrPrependedLines };
+    }
+
+    private constructor(
+        public version: number,
+        public readonly scriptKind: ts.ScriptKind,
+        public readonly filePath: string,
+        public readonly parserError: ParserError | null,
+        public readonly scriptInfo: TagInformation | null,
+        public readonly styleInfo: TagInformation | null,
+        private readonly text: string,
+        private readonly originalText: string,
+        private readonly nrPrependedLines: number,
+        private readonly tsxMap?: RawSourceMap,
+    ) {}
+
+    getText(start: number, end: number) {
+        return this.text.substring(start, end);
+    }
+
+    getLength() {
+        return this.text.length;
+    }
+
+    getChangeRange() {
+        return undefined;
+    }
+
+    positionAt(offset: number) {
+        return positionAt(offset, this.text);
+    }
+
+    async getFragment() {
+        if (!this.fragment) {
+            const uri = pathToUrl(this.filePath);
+            const mapper = !this.scriptInfo
+                ? new IdentityMapper()
+                : !this.tsxMap
+                ? new FragmentMapper(this.originalText, this.scriptInfo)
+                : new ConsumerDocumentMapper(
+                      await new SourceMapConsumer(this.tsxMap),
+                      uri,
+                      this.nrPrependedLines,
+                  );
+            this.fragment = new SnapshotFragment(
+                mapper,
+                this.text,
+                this.scriptInfo,
+                this.styleInfo,
+                uri,
+            );
+        }
+        return this.fragment;
+    }
+}
+
+export class SnapshotFragment implements Fragment {
+    constructor(
+        private readonly mapper: DocumentMapper,
+        public readonly text: string,
+        public readonly scriptInfo: TagInformation | null,
+        public readonly styleInfo: TagInformation | null,
+        private readonly url: string,
+    ) {}
+
+    positionInParent(pos: Position): Position {
+        return this.mapper.getOriginalPosition(pos);
+    }
+
+    positionInFragment(pos: Position): Position {
+        return this.mapper.getGeneratedPosition(pos);
+    }
+
+    isInFragment(pos: Position): boolean {
+        return (
+            !this.styleInfo ||
+            !isInRange(Range.create(this.styleInfo.startPos, this.styleInfo.endPos), pos)
+        );
+    }
+
+    getURL(): string {
+        return this.url;
+    }
+
+    positionAt(offset: number) {
+        return positionAt(offset, this.text);
+    }
+
+    offsetAt(position: Position) {
+        return offsetAt(position, this.text);
     }
 }
+
+// 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))/;