feat: better type checking for bindings in Svelte 5

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

@@ -463,8 +463,16 @@ export class RenameProviderImpl implements RenameProvider {
         const mappedLocations = await Promise.all(
             renameLocations.map(async (loc) => {
                 const snapshot = await snapshots.retrieve(loc.fileName);
+                const text = snapshot.getFullText();
+                const end = loc.textSpan.start + loc.textSpan.length;
 
-                if (!isTextSpanInGeneratedCode(snapshot.getFullText(), loc.textSpan)) {
+                if (
+                    !(snapshot instanceof SvelteDocumentSnapshot) ||
+                    (!isTextSpanInGeneratedCode(text, loc.textSpan) &&
+                        // prevent generated code for bindings from being renamed
+                        // (it's not inside a generate comment because diagnostics should show up)
+                        text.slice(end + 3, end + 27) !== '__sveltets_binding_value')
+                ) {
                     return {
                         ...loc,
                         range: this.mapRangeToOriginal(snapshot, loc.textSpan),

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/bindings-two-way-check/Legacy.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+    export let legacy1: string = '';
+    export let legacy2: number | string = '';
+</script>
+
+{legacy1}
+{legacy2}

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/bindings-two-way-check/Runes.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+    let { runes1 = $bindable(), runes2 = $bindable() }: { runes1: string, runes2: string | number } = $props();
+</script>
+
+{runes1}
+{runes2}

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/bindings-two-way-check/RunesGeneric.svelte

@@ -0,0 +1,6 @@
+<script lang="ts" generics="T">
+    let { foo, bar = $bindable() }: { foo: T, bar?: T } = $props();
+</script>
+
+{foo}
+{bar}

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/bindings-two-way-check/expected_svelte_5.json

@@ -0,0 +1,36 @@
+[
+    {
+        "code": 2322,
+        "message": "Type 'string | number' is not assignable to type 'string'.\n  Type 'number' is not assignable to type 'string'.",
+        "range": {
+            "end": {
+                "character": 28,
+                "line": 17
+            },
+            "start": {
+                "character": 28,
+                "line": 17
+            }
+        },
+        "severity": 1,
+        "source": "ts",
+        "tags": []
+    },
+    {
+        "code": 2322,
+        "message": "Type 'string | number' is not assignable to type 'string'.\n  Type 'number' is not assignable to type 'string'.",
+        "range": {
+            "end": {
+                "character": 45,
+                "line": 18
+            },
+            "start": {
+                "character": 45,
+                "line": 18
+            }
+        },
+        "severity": 1,
+        "source": "ts",
+        "tags": []
+    }
+]

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/bindings-two-way-check/input.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import Legacy from './Legacy.svelte';
+    import Runes from './Runes.svelte';
+    import RunesGeneric from './RunesGeneric.svelte';
+
+    let legacy = '';
+    let runes = '';
+    let foo: string | number;
+</script>
+
+<!-- ok -->
+<Legacy bind:legacy1={legacy} />
+<Runes bind:runes1={runes} bind:runes2={(runes as any)} />
+<!-- bail on generics -->
+<RunesGeneric {foo} bind:bar={runes} />
+
+<!-- error in Svelte 5 -->
+<Legacy bind:legacy2={legacy} />
+<Runes bind:runes1={runes} bind:runes2={runes} />

packages/svelte2tsx/repl/index.svelte

@@ -1,7 +1,7 @@
-<script>
-    export let value;
+<script lang="ts">
+	import MyComponent from './ComponentB.svelte'
+	let value: Date
+	$: console.log('value:', value)
 </script>
-
-{#if value}
-    <input bind:value on:change />
-{/if}
+
+<MyComponent bind:value />

packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Binding.ts

@@ -131,6 +131,12 @@ export function handleBinding(
     if (isSvelte5Plus && element instanceof InlineComponent) {
         // To check if property is actually bindable
         element.appendToStartEnd([`${element.name}.$$bindings = '${attr.name}';`]);
+        // To check if the binding is also assigned to the variable (only works when there's no assertion, we can't transform that)
+        if (!isTypescriptNode(attr.expression)) {
+            element.appendToStartEnd([
+                `${expressionStr} = __sveltets_binding_value(${element.originalName}, '${attr.name}');`
+            ]);
+        }
     }
 
     if (element instanceof Element) {

packages/svelte2tsx/src/htmlxtojsx_v2/nodes/InlineComponent.ts

@@ -39,6 +39,7 @@ export class InlineComponent {
     private startTagEnd: number;
     private isSelfclosing: boolean;
     public child?: any;
+    public originalName = this.node.name;
 
     // Add const $$xxx = ... only if the variable name is actually used
     // in order to prevent "$$xxx is defined but never used" TS hints

packages/svelte2tsx/svelte-shims-v4.d.ts

@@ -254,3 +254,16 @@ declare function __sveltets_2_isomorphic_component<
 declare function __sveltets_2_isomorphic_component_slots<
     Props extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>, Exports extends Record<string, any>, Bindings extends string
 >(klass: {props: Props, events: Events, slots: Slots, exports?: Exports, bindings?: Bindings }): __sveltets_2_IsomorphicComponent<__sveltets_2_PropsWithChildren<Props, Slots>, Events, Slots, Exports, Bindings>;
+
+type __sveltets_NonUndefined<T> = T extends undefined ? never : T;
+
+declare function __sveltets_binding_value<
+    // @ts-ignore this is only used for Svelte 5, which knows about the Component type
+    Comp extends typeof import('svelte').Component<any>,
+    Key extends string
+>(comp: Comp, key: Key): Key extends keyof import('svelte').ComponentProps<Comp> ?
+    // bail on unknown because it hints at a generic type which we can't properly resolve here
+    // remove undefined because optional properties have it, and would result in false positives
+    unknown extends import('svelte').ComponentProps<Comp>[Key] ? any : __sveltets_NonUndefined<import('svelte').ComponentProps<Comp>[Key]> : any;
+// Overload to ensure typings that only use old SvelteComponent class or something invalid are gracefully handled
+declare function __sveltets_binding_value(comp: any, key: string): any