feat: allow as expressions for bindable props (#2372)

* feat: allow `as` expressions for bindable props

* chore: add test to ts-runes-bindable

* chore: copy paste expected without formatting

* chore: test tabs vs spaces

* chore: fix expected for svelte 5

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/svelte-element-error/expected_svelte_5.json

@@ -3,7 +3,7 @@
         "range": { "start": { "line": 4, "character": 0 }, "end": { "line": 4, "character": 0 } },
         "severity": 1,
         "source": "ts",
-        "message": "`<svelte:element>` must have a 'this' attribute",
+        "message": "`<svelte:element>` must have a 'this' attribute with a value",
         "code": -1
     }
 ]

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

@@ -153,7 +153,12 @@ export class ExportedNames {
                         : element.name.text;
 
                     if (element.initializer) {
-                        const call = element.initializer;
+                        let call = element.initializer;
+                        // if it's an as expression we need to check wether the as
+                        // expression expression is a call
+                        if (ts.isAsExpression(call)) {
+                            call = call.expression;
+                        }
                         if (ts.isCallExpression(call) && ts.isIdentifier(call.expression)) {
                             if (call.expression.text === '$bindable') {
                                 this.$props.bindings.push(name);

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

@@ -1,12 +1,12 @@
 ///<reference types="svelte" />
 ;function render() {
-/*Ωignore_startΩ*/;type $$ComponentProps = { a: unknown, b?: unknown };/*Ωignore_endΩ*/
-    let { a, b = $bindable() }: $$ComponentProps = $props();
+/*Ωignore_startΩ*/;type $$ComponentProps = { a: unknown, b?: unknown, c?: number };/*Ωignore_endΩ*/
+    let { a, b = $bindable(), c = $bindable(0) as number }: $$ComponentProps = $props();
 ;
 async () => {};
 return { props: {} as any as $$ComponentProps, slots: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_with_any_event(render())) {
     constructor(options = __sveltets_2_runes_constructor(__sveltets_2_with_any_event(render()))) { super(options); }
-    $$bindings = __sveltets_$$bindings('b');
+    $$bindings = __sveltets_$$bindings('b', 'c');
 }

packages/svelte2tsx/test/svelte2tsx/samples/ts-runes-bindable/input.svelte

@@ -1,3 +1,3 @@
 <script lang="ts">
-    let { a, b = $bindable() } = $props();
+    let { a, b = $bindable(), c = $bindable(0) as number } = $props();
 </script>