fix: prevent unused variable error for bindable (#2710)

#2268

Author: jasonlyu123

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/$bindable-reassign.v5/expectedv2.json

@@ -0,0 +1,10 @@
+[
+    {
+        "range": { "start": { "line": 3, "character": 8 }, "end": { "line": 3, "character": 12 } },
+        "severity": 4,
+        "source": "ts",
+        "message": "'foo2' is declared but its value is never read.",
+        "code": 6133,
+        "tags": [1]
+    }
+]

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/$bindable-reassign.v5/input.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    let { 
+        foo = $bindable(),
+        foo2
+    } = $props();
+
+    function onClick() {
+        foo = 42;
+    }
+</script>
+
+<button onclick={onClick}>Click me</button>

packages/svelte2tsx/src/svelte2tsx/nodes/ExportedNames.ts

@@ -177,6 +177,15 @@ export class ExportedNames {
             }
         }
 
+        if (this.$props.bindings.length > 0) {
+            this.str.appendLeft(
+                node.end + this.astOffset,
+                surroundWithIgnoreComments(
+                    ';' + this.$props.bindings.map((prop) => prop + ';').join('')
+                )
+            );
+        }
+
         // Easy mode: User uses TypeScript and typed the $props() rune
         if (node.initializer.typeArguments?.length > 0 || node.type) {
             this.hoistableInterfaces.analyze$propsRune(node);

packages/svelte2tsx/test/svelte2tsx/samples/runes-best-effort-types.v5/expectedv2.ts

@@ -1,7 +1,7 @@
 ///<reference types="svelte" />
 ;function $$render() {
 
-    let/** @typedef {{ a: any, b?: boolean, c?: number, d?: string, e?: any, f?: Record<string, any>, g?: typeof foo, h?: any[], i?: any, j?: any, k?: number, l?: Function }} $$ComponentProps *//** @type {$$ComponentProps} */ { a, b = true, c = 1, d = '', e = null, f = {}, g = foo, h = [], i = undefined, j = $bindable(), k = $bindable(1), l = () => {} } = $props(); 
+    let/** @typedef {{ a: any, b?: boolean, c?: number, d?: string, e?: any, f?: Record<string, any>, g?: typeof foo, h?: any[], i?: any, j?: any, k?: number, l?: Function }} $$ComponentProps *//** @type {$$ComponentProps} */ { a, b = true, c = 1, d = '', e = null, f = {}, g = foo, h = [], i = undefined, j = $bindable(), k = $bindable(1), l = () => {} } = $props()/*Ωignore_startΩ*/;j;k;/*Ωignore_endΩ*/; 
 ;
 async () => {};
 return { props: /** @type {$$ComponentProps} */({}), exports: {}, bindings: __sveltets_$$bindings('j', 'k'), slots: {}, events: {} }}

packages/svelte2tsx/test/svelte2tsx/samples/runes-bindable.v5/expectedv2.ts

@@ -1,7 +1,7 @@
 ///<reference types="svelte" />
 ;function $$render() {
 
-    let/** @typedef {{ a: any, b?: any }} $$ComponentProps *//** @type {$$ComponentProps} */ { a, b = $bindable() } = $props();
+    let/** @typedef {{ a: any, b?: any }} $$ComponentProps *//** @type {$$ComponentProps} */ { a, b = $bindable() } = $props()/*Ωignore_startΩ*/;b;/*Ωignore_endΩ*/;
 ;
 async () => {};
 return { props: /** @type {$$ComponentProps} */({}), exports: {}, bindings: __sveltets_$$bindings('b'), slots: {}, events: {} }}

packages/svelte2tsx/test/svelte2tsx/samples/ts-runes-best-effort-types.v5/expectedv2.ts

@@ -1,7 +1,7 @@
 ///<reference types="svelte" />
 ;function $$render() {
 /*Ωignore_startΩ*/;type $$ComponentProps = { a: any, b?: boolean, c?: number, d?: string, e?: any, f?: Record<string, any>, g?: typeof foo, h?: Bar, i?: Baz, j?: any[], k?: any, l?: any, m?: number, n?: Function };/*Ωignore_endΩ*/
-    let { a, b = true, c = 1, d = '', e = null, f = {}, g = foo, h = null as Bar, i = null as any as Baz, j = [], k = undefined, l = $bindable(), m = $bindable(1), n = () => {} }: $$ComponentProps = $props(); 
+    let { a, b = true, c = 1, d = '', e = null, f = {}, g = foo, h = null as Bar, i = null as any as Baz, j = [], k = undefined, l = $bindable(), m = $bindable(1), n = () => {} }: $$ComponentProps = $props()/*Ωignore_startΩ*/;l;m;/*Ωignore_endΩ*/; 
 ;
 async () => {};
 return { props: {} as any as $$ComponentProps, exports: {}, bindings: __sveltets_$$bindings('l', 'm'), slots: {}, events: {} }}

packages/svelte2tsx/test/svelte2tsx/samples/ts-runes-bindable.v5/expectedv2.ts

@@ -1,7 +1,7 @@
 ///<reference types="svelte" />
 ;function $$render() {
 /*Ωignore_startΩ*/;type $$ComponentProps = { a: any, b?: any, c?: number };/*Ωignore_endΩ*/
-    let { a, b = $bindable(), c = $bindable(0) as number }: $$ComponentProps = $props();
+    let { a, b = $bindable(), c = $bindable(0) as number }: $$ComponentProps = $props()/*Ωignore_startΩ*/;b;c;/*Ωignore_endΩ*/;
 ;
 async () => {};
 return { props: {} as any as $$ComponentProps, exports: {}, bindings: __sveltets_$$bindings('b', 'c'), slots: {}, events: {} }}