(feat) rewrite svelte2tsx

.eslintignore

@@ -4,3 +4,4 @@ packages/svelte2tsx/test/**/*
 packages/svelte2tsx/index.*
 declare module '*.svelte'
 packages/svelte2tsx/svelte-shims.d.ts
+packages/svelte2tsx/svelte-jsx.d.ts

.prettierignore

@@ -1,6 +1,6 @@
 packages/svelte2tsx/*.d.ts
-packages/svelte2tsx/test/*/samples/*/*sx
-packages/svelte2tsx/test/*/samples/*/*.svelte
+packages/svelte2tsx/repl/*
+packages/svelte2tsx/test/*/samples/**/*
 packages/svelte2tsx/test/sourcemaps/samples/*
 packages/svelte2tsx/test/emitDts/samples/*/expected/**
 packages/language-server/test/**/*.svelte

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

@@ -344,6 +344,19 @@ export function getNodeIfIsInStartTag(html: HTMLDocument, offset: number): Node
     }
 }
 
+/**
+ * Returns `true` if `offset` is a html tag and within the name of the start tag or end tag
+ */
+export function isInHTMLTagRange(html: HTMLDocument, offset: number): boolean {
+    const node = html.findNodeAt(offset);
+    return (
+        !!node.tag &&
+        node.tag[0] === node.tag[0].toLowerCase() &&
+        (node.start + node.tag.length + 1 >= offset ||
+            (!!node.endTagStart && node.endTagStart <= offset))
+    );
+}
+
 /**
  * Gets word range at position.
  * Delimiter is by default a whitespace, but can be adjusted.

packages/language-server/src/ls-config.ts

@@ -45,6 +45,7 @@ const defaultLSConfig: LSConfig = {
     },
     svelte: {
         enable: true,
+        useNewTransformation: false,
         compilerWarnings: {},
         diagnostics: { enable: true },
         rename: { enable: true },
@@ -176,6 +177,7 @@ export type CompilerWarningsSettings = Record<string, 'ignore' | 'error'>;
 
 export interface LSSvelteConfig {
     enable: boolean;
+    useNewTransformation: boolean;
     compilerWarnings: CompilerWarningsSettings;
     diagnostics: {
         enable: boolean;

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

@@ -78,6 +78,7 @@ export interface SnapshotFragment extends DocumentMapper {
  */
 export interface SvelteSnapshotOptions {
     transformOnTemplateError: boolean;
+    useNewTransformation: boolean;
 }
 
 export namespace DocumentSnapshot {
@@ -159,13 +160,20 @@ function preprocessSvelteFile(document: Document, options: SvelteSnapshotOptions
         getScriptKindFromAttributes(document.scriptInfo?.attributes ?? {}),
         getScriptKindFromAttributes(document.moduleScriptInfo?.attributes ?? {})
     ].includes(ts.ScriptKind.TSX)
-        ? ts.ScriptKind.TSX
+        ? options.useNewTransformation
+            ? ts.ScriptKind.TS
+            : ts.ScriptKind.TSX
+        : options.useNewTransformation
+        ? ts.ScriptKind.JS
         : ts.ScriptKind.JSX;
 
     try {
         const tsx = svelte2tsx(text, {
             filename: document.getFilePath() ?? undefined,
-            isTsFile: scriptKind === ts.ScriptKind.TSX,
+            isTsFile: options.useNewTransformation
+                ? scriptKind === ts.ScriptKind.TS
+                : scriptKind === ts.ScriptKind.TSX,
+            mode: options.useNewTransformation ? 'ts' : 'tsx',
             emitOnTemplateError: options.transformOnTemplateError,
             namespace: document.config?.compilerOptions?.namespace,
             accessors:
@@ -388,7 +396,7 @@ export class SvelteSnapshotFragment implements SnapshotFragment {
     constructor(
         private readonly mapper: DocumentMapper,
         public readonly text: string,
-        private readonly parent: Document,
+        public readonly parent: Document,
         private readonly url: string
     ) {}
 

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

@@ -70,6 +70,7 @@ export class LSAndTSDocResolver {
         return {
             ambientTypesSource: this.isSvelteCheck ? 'svelte-check' : 'svelte2tsx',
             createDocument: this.createDocument,
+            useNewTransformation: this.configManager.getConfig().svelte.useNewTransformation,
             transformOnTemplateError: !this.isSvelteCheck,
             globalSnapshotsManager: this.globalSnapshotsManager,
             notifyExceedSizeLimit: this.notifyExceedSizeLimit

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

@@ -115,8 +115,11 @@ export class TypeScriptPlugin
             configManager
         );
         this.updateImportsProvider = new UpdateImportsProviderImpl(this.lsAndTsDocResolver);
-        this.diagnosticsProvider = new DiagnosticsProviderImpl(this.lsAndTsDocResolver);
-        this.renameProvider = new RenameProviderImpl(this.lsAndTsDocResolver);
+        this.diagnosticsProvider = new DiagnosticsProviderImpl(
+            this.lsAndTsDocResolver,
+            configManager
+        );
+        this.renameProvider = new RenameProviderImpl(this.lsAndTsDocResolver, configManager);
         this.hoverProvider = new HoverProviderImpl(this.lsAndTsDocResolver);
         this.findReferencesProvider = new FindReferencesProviderImpl(this.lsAndTsDocResolver);
         this.selectionRangeProvider = new SelectionRangeProviderImpl(this.lsAndTsDocResolver);
@@ -300,7 +303,10 @@ export class TypeScriptPlugin
             defs.definitions.map(async (def) => {
                 const { fragment, snapshot } = await docs.retrieve(def.fileName);
 
-                if (isNoTextSpanInGeneratedCode(snapshot.getFullText(), def.textSpan)) {
+                if (
+                    !def.fileName.endsWith('svelte-shims.d.ts') &&
+                    isNoTextSpanInGeneratedCode(snapshot.getFullText(), def.textSpan)
+                ) {
                     return LocationLink.create(
                         pathToUrl(def.fileName),
                         convertToLocationRange(fragment, def.textSpan),

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

@@ -324,25 +324,28 @@ export class CodeActionsProviderImpl implements CodeActionsProvider {
                 start,
                 length: end - start
             },
-            (node): node is ts.JsxOpeningLikeElement | ts.JsxClosingElement =>
-                ts.isJsxClosingElement(node) || ts.isJsxOpeningLikeElement(node)
+            (node): node is ts.JsxOpeningLikeElement | ts.JsxClosingElement | ts.Identifier =>
+                this.configManager.getConfig().svelte.useNewTransformation
+                    ? ts.isNewExpression(node.parent) && ts.isIdentifier(node)
+                    : ts.isJsxClosingElement(node) || ts.isJsxOpeningLikeElement(node)
         );
 
         if (!node) {
             return;
         }
 
+        const tagName = ts.isIdentifier(node) ? node : node.tagName;
         const completion = lang.getCompletionsAtPosition(
             filePath,
-            node.tagName.getEnd(),
+            tagName.getEnd(),
             userPreferences
         );
 
         if (!completion) {
             return;
         }
 
-        const name = node.tagName.getText();
+        const name = tagName.getText();
         const suffixedName = name + '__SvelteComponent_';
         const errorPreventingUserPreferences =
             this.completionProvider.fixUserPreferencesForSvelteComponentImport(userPreferences);

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

@@ -666,6 +666,10 @@ function isValidCompletion(
     if (!isCompletionInHTMLStartTag) {
         return isNoSvelte2tsxCompletion;
     }
+    // TODO with the new transformation this is ts.ScriptElementKind.memberVariableElement
+    // which is also true for all properties of any other object -> how reliably filter this out?
+    // ---> another /*ignore*/ pragma?
+    // ---> OR: make these lower priority if we find out they are inside a html start tag
     return (value) =>
         // Remove jsx attributes on html tags because they are doubled by the HTML
         // attribute suggestions, and for events they are wrong (onX instead of on:X).

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

@@ -1,19 +1,27 @@
 import ts from 'typescript';
 import { CancellationToken, Diagnostic, DiagnosticSeverity } from 'vscode-languageserver';
-import { Document, getTextInRange, isRangeInTag, mapRangeToOriginal } from '../../../lib/documents';
+import {
+    Document,
+    getNodeIfIsInStartTag,
+    getTextInRange,
+    isRangeInTag,
+    mapRangeToOriginal
+} from '../../../lib/documents';
 import { DiagnosticsProvider } from '../../interfaces';
 import { LSAndTSDocResolver } from '../LSAndTSDocResolver';
-import { convertRange, getDiagnosticTag, mapSeverity } from '../utils';
+import { convertRange, getDiagnosticTag, hasNonZeroRange, mapSeverity } from '../utils';
 import { SvelteDocumentSnapshot, SvelteSnapshotFragment } from '../DocumentSnapshot';
 import {
     isInGeneratedCode,
     isAfterSvelte2TsxPropsReturn,
     findNodeAtSpan,
     isReactiveStatement,
     isInReactiveStatement,
-    gatherIdentifiers
+    gatherIdentifiers,
+    isHTMLAttributeName
 } from './utils';
 import { not, flatten, passMap, regexIndexOf, swapRangeStartEndIfNecessary } from '../../../utils';
+import { LSConfigManager } from '../../../ls-config';
 
 enum DiagnosticCode {
     MODIFIERS_CANNOT_APPEAR_HERE = 1184, // "Modifiers cannot appear here."
@@ -24,11 +32,19 @@ enum DiagnosticCode {
     NEVER_READ = 6133, // "'{0}' is declared but its value is never read."
     ALL_IMPORTS_UNUSED = 6192, // "All imports in import declaration are unused."
     UNUSED_LABEL = 7028, // "Unused label."
-    DUPLICATED_JSX_ATTRIBUTES = 17001 // "JSX elements cannot have multiple attributes with the same name."
+    DUPLICATED_JSX_ATTRIBUTES = 17001, // "JSX elements cannot have multiple attributes with the same name."
+    DUPLICATE_IDENTIFIER = 2300, // "Duplicate identifier 'xxx'"
+    MULTIPLE_PROPS_SAME_NAME = 1117, // "An object literal cannot have multiple properties with the same name in strict mode."
+    TYPE_X_NOT_ASSIGNABLE_TO_TYPE_Y = 2345, // "Argument of type '..' is not assignable to parameter of type '..'."
+    MISSING_PROPS = 2739, // "Type '...' is missing the following properties from type '..': ..."
+    MISSING_PROP = 2741 // "Property '..' is missing in type '..' but required in type '..'."
 }
 
 export class DiagnosticsProviderImpl implements DiagnosticsProvider {
-    constructor(private readonly lsAndTsDocResolver: LSAndTSDocResolver) {}
+    constructor(
+        private readonly lsAndTsDocResolver: LSAndTSDocResolver,
+        private configManager: LSConfigManager
+    ) {}
 
     async getDiagnostics(
         document: Document,
@@ -43,7 +59,8 @@ export class DiagnosticsProviderImpl implements DiagnosticsProvider {
             return [];
         }
 
-        const isTypescript = tsDoc.scriptKind === ts.ScriptKind.TSX;
+        const isTypescript =
+            tsDoc.scriptKind === ts.ScriptKind.TSX || tsDoc.scriptKind === ts.ScriptKind.TS;
 
         // Document preprocessing failed, show parser error instead
         if (tsDoc.parserError) {
@@ -67,7 +84,8 @@ export class DiagnosticsProviderImpl implements DiagnosticsProvider {
         ];
         diagnostics = diagnostics
             .filter(isNotGenerated(tsDoc.getText(0, tsDoc.getLength())))
-            .filter(not(isUnusedReactiveStatementLabel));
+            .filter(not(isUnusedReactiveStatementLabel))
+            .filter(isNoFalsePositive1(this.configManager.getConfig().svelte.useNewTransformation));
         diagnostics = resolveNoopsInReactiveStatements(lang, diagnostics);
 
         return diagnostics
@@ -79,9 +97,15 @@ export class DiagnosticsProviderImpl implements DiagnosticsProvider {
                 code: diagnostic.code,
                 tags: getDiagnosticTag(diagnostic)
             }))
-            .map(mapRange(fragment, document))
+            .map(
+                mapRange(
+                    fragment,
+                    document,
+                    this.configManager.getConfig().svelte.useNewTransformation
+                )
+            )
             .filter(hasNoNegativeLines)
-            .filter(isNoFalsePositive(document, tsDoc))
+            .filter(isNoFalsePositive2(document, tsDoc))
             .map(enhanceIfNecessary)
             .map(swapDiagRangeStartEndIfNecessary);
     }
@@ -93,7 +117,8 @@ export class DiagnosticsProviderImpl implements DiagnosticsProvider {
 
 function mapRange(
     fragment: SvelteSnapshotFragment,
-    document: Document
+    document: Document,
+    useNewTransformation: boolean
 ): (value: Diagnostic) => Diagnostic {
     return (diagnostic) => {
         let range = mapRangeToOriginal(fragment, diagnostic.range);
@@ -123,6 +148,21 @@ function mapRange(
             }
         }
 
+        if (
+            useNewTransformation &&
+            [DiagnosticCode.MISSING_PROP, DiagnosticCode.MISSING_PROPS].includes(
+                diagnostic.code as number
+            ) &&
+            !hasNonZeroRange({ range })
+        ) {
+            const node = getNodeIfIsInStartTag(document.html, document.offsetAt(range.start));
+            if (node) {
+                // This is a "some prop missing" error on a component -> remap
+                range.start = document.positionAt(node.start + 1);
+                range.end = document.positionAt(node.start + 1 + (node.tag?.length || 1));
+            }
+        }
+
         return { ...diagnostic, range };
     };
 }
@@ -144,6 +184,26 @@ function copyDiagnosticAndChangeNode(diagnostic: ts.Diagnostic) {
     });
 }
 
+function isNoFalsePositive1(useNewTransformation: boolean) {
+    if (!useNewTransformation) {
+        return () => true;
+    }
+
+    return (diagnostic: ts.Diagnostic) => {
+        if (
+            ![
+                DiagnosticCode.MULTIPLE_PROPS_SAME_NAME,
+                DiagnosticCode.DUPLICATE_IDENTIFIER
+            ].includes(diagnostic.code)
+        ) {
+            return true;
+        }
+
+        const node = findDiagnosticNode(diagnostic);
+        return !node || !isHTMLAttributeName(node);
+    };
+}
+
 /**
  * In some rare cases mapping of diagnostics does not work and produces negative lines.
  * We filter out these diagnostics with negative lines because else the LSP
@@ -153,7 +213,7 @@ function hasNoNegativeLines(diagnostic: Diagnostic): boolean {
     return diagnostic.range.start.line >= 0 && diagnostic.range.end.line >= 0;
 }
 
-function isNoFalsePositive(document: Document, tsDoc: SvelteDocumentSnapshot) {
+function isNoFalsePositive2(document: Document, tsDoc: SvelteDocumentSnapshot) {
     const text = document.getText();
     const usesPug = document.getLanguageAttribute('template') === 'pug';