fix: various snippet fixes (#2449)

#2444 #2417 #2425 #2385 (comment)

The snippet is now transformed into a function with the return type so that The default parameter type can be inferred:

`const foo = (a: string, b = 1): ReturnType<import('svelte').Snippet> => {}`

Author: jasonlyu123

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

@@ -93,6 +93,7 @@ import {
     convertToLocationForReferenceOrDefinition,
     convertToLocationRange,
     isInScript,
+    isSvelte2tsxShimFile,
     isSvelteFilePath,
     symbolKindFromString
 } from './utils';
@@ -387,7 +388,7 @@ export class TypeScriptPlugin
 
         const result = await Promise.all(
             defs.definitions.map(async (def) => {
-                if (def.fileName.endsWith('svelte-shims.d.ts')) {
+                if (isSvelte2tsxShimFile(def.fileName)) {
                     return;
                 }
 

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

@@ -17,10 +17,10 @@ import {
     isInGeneratedCode,
     findChildOfKind,
     findRenderFunction,
-    findClosestContainingNode,
-    SnapshotMap
+    SnapshotMap,
+    startsWithIgnoredPosition
 } from './utils';
-import { convertRange } from '../utils';
+import { convertRange, isSvelte2tsxShimFile } from '../utils';
 
 export class InlayHintProviderImpl implements InlayHintProvider {
     constructor(private readonly lsAndTsDocResolver: LSAndTSDocResolver) {}
@@ -195,10 +195,19 @@ export class InlayHintProviderImpl implements InlayHintProvider {
             return false;
         }
 
-        const node = findClosestContainingNode(
+        if (inlayHint.displayParts?.some((v) => isSvelte2tsxShimFile(v.file))) {
+            return true;
+        }
+
+        const hasParameterWithSamePosition = (node: ts.CallExpression | ts.NewExpression) =>
+            node.arguments !== undefined &&
+            node.arguments.some((arg) => arg.getStart() === inlayHint.position);
+
+        const node = findContainingNode(
             sourceFile,
             { start: inlayHint.position, length: 0 },
-            ts.isCallOrNewExpression
+            (node): node is ts.CallExpression | ts.NewExpression =>
+                ts.isCallOrNewExpression(node) && hasParameterWithSamePosition(node)
         );
 
         if (!node) {
@@ -224,6 +233,10 @@ export class InlayHintProviderImpl implements InlayHintProvider {
             return false;
         }
 
+        if (startsWithIgnoredPosition(sourceFile.text, inlayHint.position)) {
+            return true;
+        }
+
         const declaration = findContainingNode(
             sourceFile,
             { start: inlayHint.position, length: 0 },

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

@@ -83,6 +83,7 @@ export function isComponentAtPosition(
 
 export const IGNORE_START_COMMENT = '/*Ωignore_startΩ*/';
 export const IGNORE_END_COMMENT = '/*Ωignore_endΩ*/';
+export const IGNORE_POSITION_COMMENT = '/*Ωignore_positionΩ*/';
 
 /**
  * Surrounds given string with a start/end comment which marks it
@@ -105,6 +106,10 @@ export function isInGeneratedCode(text: string, start: number, end: number = sta
     return (lastStart > lastEnd || lastEnd === nextEnd) && lastStart < nextEnd;
 }
 
+export function startsWithIgnoredPosition(text: string, offset: number) {
+    return text.slice(offset).startsWith(IGNORE_POSITION_COMMENT);
+}
+
 /**
  * Checks if this is a text span that is inside svelte2tsx-generated code
  * (has no mapping to the original)

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

@@ -371,3 +371,7 @@ export function hasTsExtensions(fileName: string) {
         fileName.endsWith(ts.Extension.Ts)
     );
 }
+
+export function isSvelte2tsxShimFile(fileName: string | undefined) {
+    return fileName?.endsWith('svelte-shims.d.ts') || fileName?.endsWith('svelte-shims-v4.d.ts');
+}

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/implicit-snippet.v5/SnippetParent.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+    let { foo }: {
+        foo: import('svelte').Snippet<[a: '']>
+        children?: import('svelte').Snippet
+        required: import('svelte').Snippet
+    } = $props();
+</script>

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/implicit-snippet.v5/expectedv2.json

@@ -0,0 +1,18 @@
+[
+    {
+        "range": { "start": { "line": 4, "character": 1 }, "end": { "line": 4, "character": 14 } },
+        "severity": 1,
+        "source": "ts",
+        "message": "Property 'required' is missing in type '{ children: () => any; foo: (this: void, a: \"\") => any; }' but required in type '$$ComponentProps'.",
+        "code": 2741,
+        "tags": []
+    },
+    {
+        "range": { "start": { "line": 6, "character": 9 }, "end": { "line": 6, "character": 18 } },
+        "severity": 1,
+        "source": "ts",
+        "message": "This comparison appears to be unintentional because the types '\"\"' and '\"b\"' have no overlap.",
+        "code": 2367,
+        "tags": []
+    }
+]

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/implicit-snippet.v5/input.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import SnippetParent from "./SnippetParent.svelte";
+</script>
+
+<SnippetParent>
+    {#snippet foo(a)}
+        {a === 'b'}
+    {/snippet}
+
+    {@render foo('')}
+</SnippetParent>

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/snippet-js.v5/expectedv2.json

@@ -0,0 +1,24 @@
+[
+    {
+        "range": {
+            "start": { "line": 10, "character": 9 },
+            "end": { "line": 10, "character": 18 }
+        },
+        "severity": 1,
+        "source": "js",
+        "message": "This comparison appears to be unintentional because the types 'number' and 'string' have no overlap.",
+        "code": 2367,
+        "tags": []
+    },
+    {
+        "range": {
+            "start": { "line": 16, "character": 12 },
+            "end": { "line": 16, "character": 15 }
+        },
+        "severity": 1,
+        "source": "js",
+        "message": "Argument of type '\"c\"' is not assignable to parameter of type 'TypeA'.",
+        "code": 2345,
+        "tags": []
+    }
+]

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/snippet-js.v5/input.svelte

@@ -0,0 +1,17 @@
+<script>
+    // @ts-check
+    /**
+     * @typedef {'a' | 'b'} TypeA
+    */
+</script>
+
+<!--no error-->
+{#snippet hi(/**@type {TypeA}*/a, b = 2)}
+    {a}
+    {#if b === 'a'}
+        {b}
+    {/if}
+{/snippet}
+
+<!--error-->
+{@render hi('c', 'd')}

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/snippet-scope.v5/expectedv2.json

@@ -0,0 +1,13 @@
+[
+    {
+        "range": {
+            "start": { "line": 15, "character": 9 },
+            "end": { "line": 15, "character": 16 }
+        },
+        "severity": 1,
+        "source": "ts",
+        "message": "Cannot find name 'nested1'.",
+        "code": 2304,
+        "tags": []
+    }
+]