feat: support $props.bindable()

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

@@ -91,12 +91,14 @@ export class ExportedNames {
             for (const declaration of node.declarationList.declarations) {
                 if (
                     declaration.initializer !== undefined &&
-                    ts.isCallExpression(declaration.initializer) &&
-                    declaration.initializer.expression.getText() === '$props'
+                    ts.isCallExpression(declaration.initializer)
                 ) {
-                    // @ts-expect-error TS is too stupid to narrow this properly
-                    this.handle$propsRune(declaration);
-                    break;
+                    const text = declaration.initializer.expression.getText();
+                    if (text === '$props' || text === '$props.bindable') {
+                        // @ts-expect-error TS is too stupid to narrow this properly
+                        this.handle$propsRune(declaration, text === '$props.bindable');
+                        break;
+                    }
                 }
             }
         }
@@ -135,7 +137,8 @@ export class ExportedNames {
     private handle$propsRune(
         node: ts.VariableDeclaration & {
             initializer: ts.CallExpression & { expression: ts.Identifier };
-        }
+        },
+        bindable: boolean
     ): void {
         // Check if the $props() rune has a children prop
         if (ts.isObjectBindingPattern(node.name)) {
@@ -160,27 +163,50 @@ export class ExportedNames {
             this.$props.mayHaveChildrenProp = true;
         }
 
+        const generic_name = bindable ? '$$ComponentBindableProps' : '$$ComponentProps';
+        const construct_generic = (generic: string) => {
+            if (this.isTsFile) {
+                this.$props.generic =
+                    this.$props.generic === generic || !this.$props.generic
+                        ? generic
+                        : this.$props.generic + ' & ' + generic;
+            } else {
+                if (this.$props.comment) {
+                    if (generic !== this.$props.comment) {
+                        const pos =
+                            this.$props.comment.indexOf('{', this.$props.comment.indexOf('@type')) +
+                            1;
+                        const start = generic.indexOf('{', generic.indexOf('@type')) + 1;
+                        const end = generic.lastIndexOf('}');
+                        this.$props.comment =
+                            this.$props.comment.slice(0, pos) +
+                            generic.slice(start, end) +
+                            ' & ' +
+                            this.$props.comment.slice(pos);
+                    }
+                } else {
+                    this.$props.comment = generic;
+                }
+            }
+        };
+
         if (node.initializer.typeArguments?.length > 0 || node.type) {
             const generic_arg = node.initializer.typeArguments?.[0] || node.type;
             const generic = generic_arg.getText();
             if (!generic.includes('{')) {
-                this.$props.generic = generic;
+                construct_generic(generic);
             } else {
                 // Create a virtual type alias for the unnamed generic and reuse it for the props return type
                 // so that rename, find references etc works seamlessly across components
-                this.$props.generic = '$$ComponentProps';
-                preprendStr(
-                    this.str,
-                    generic_arg.pos + this.astOffset,
-                    `;type ${this.$props.generic} = `
-                );
+                construct_generic(generic_name);
+                preprendStr(this.str, generic_arg.pos + this.astOffset, `;type ${generic_name} = `);
                 this.str.appendLeft(generic_arg.end + this.astOffset, ';');
                 this.str.move(
                     generic_arg.pos + this.astOffset,
                     generic_arg.end + this.astOffset,
                     node.parent.pos + this.astOffset
                 );
-                this.str.appendRight(generic_arg.end + this.astOffset, this.$props.generic);
+                this.str.appendRight(generic_arg.end + this.astOffset, generic_name);
             }
         } else {
             if (!this.isTsFile) {
@@ -209,23 +235,26 @@ export class ExportedNames {
                     }
                 }
 
+                let jsdoc = '';
+
                 if (comment && /\/\*\*[^@]*?@type\s*{\s*{.*}\s*}\s*\*\//.test(comment)) {
                     // Create a virtual type alias for the unnamed generic and reuse it for the props return type
                     // so that rename, find references etc works seamlessly across components
-                    this.$props.comment = '/** @type {$$ComponentProps} */';
+                    jsdoc = `/** @type {${generic_name}} */`;
                     const type_start = this.str.original.indexOf('@type', start);
                     this.str.overwrite(type_start, type_start + 5, '@typedef');
                     const end = this.str.original.indexOf('*/', start);
-                    this.str.overwrite(end, end + 2, ' $$ComponentProps */' + this.$props.comment);
+                    this.str.overwrite(end, end + 2, ` ${generic_name} */` + jsdoc);
                 } else {
                     // Complex comment or simple `@type {AType}` comment which we just use as-is.
                     // For the former this means things like rename won't work properly across components.
-                    this.$props.comment = comment || '';
+                    jsdoc = comment || '';
                 }
-            }
 
-            if (this.$props.comment) {
-                return;
+                if (jsdoc) {
+                    construct_generic(jsdoc);
+                    return;
+                }
             }
 
             // Do a best-effort to extract the props from the object literal
@@ -302,26 +331,23 @@ export class ExportedNames {
             // Create a virtual type alias for the unnamed generic and reuse it for the props return type
             // so that rename, find references etc works seamlessly across components
             if (this.isTsFile) {
-                this.$props.generic = '$$ComponentProps';
+                construct_generic(generic_name);
                 if (props.length > 0 || withUnknown) {
                     preprendStr(
                         this.str,
                         node.parent.pos + this.astOffset,
-                        surroundWithIgnoreComments(`;type $$ComponentProps = ${propsStr};`)
-                    );
-                    preprendStr(
-                        this.str,
-                        node.name.end + this.astOffset,
-                        `: ${this.$props.generic}`
+                        surroundWithIgnoreComments(`;type ${generic_name} = ${propsStr};`)
                     );
+                    preprendStr(this.str, node.name.end + this.astOffset, `: ${generic_name}`);
                 }
             } else {
-                this.$props.comment = '/** @type {$$ComponentProps} */';
+                const jsdoc = `/** @type {${generic_name}} */`;
+                construct_generic(jsdoc);
                 if (props.length > 0 || withUnknown) {
                     preprendStr(
                         this.str,
                         node.pos + this.astOffset,
-                        `/** @typedef {${propsStr}} $$ComponentProps */${this.$props.comment}`
+                        `/** @typedef {${propsStr}} ${generic_name} */${jsdoc}`
                     );
                 }
             }

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

@@ -0,0 +1,10 @@
+///<reference types="svelte" />
+;function render() {
+
+    let/** @typedef {{ a: unknown, b?: number }} $$ComponentBindableProps *//** @type {$$ComponentBindableProps} */ { a, b = 1 } = $props.bindable();
+;
+async () => {};
+return { props: /** @type {$$ComponentBindableProps} */({}), slots: {}, events: {} }}
+
+export default class Input__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_partial(__sveltets_2_with_any_event(render()))) {
+}

packages/svelte2tsx/test/svelte2tsx/samples/runes-props-bindable-1/input.svelte

@@ -0,0 +1,3 @@
+<script>
+    let { a, b = 1 } = $props.bindable();
+</script>

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

@@ -0,0 +1,11 @@
+///<reference types="svelte" />
+;function render() {
+
+    /** @typedef {{ a: string; b?: number }}  $$ComponentBindableProps *//** @type {$$ComponentBindableProps} */
+    let { a, b = 1 } = $props.bindable();
+;
+async () => {};
+return { props: /** @type {$$ComponentBindableProps} */({}), slots: {}, events: {} }}
+
+export default class Input__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_partial(__sveltets_2_with_any_event(render()))) {
+}

packages/svelte2tsx/test/svelte2tsx/samples/runes-props-bindable-2/input.svelte

@@ -0,0 +1,4 @@
+<script>
+    /** @type {{ a: string; b?: number }} */
+    let { a, b = 1 } = $props.bindable();
+</script>

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

@@ -0,0 +1,13 @@
+///<reference types="svelte" />
+;function render() {
+
+    /** @typedef {{ a: string; b?: number }} Foo */
+
+    /** @type {Foo} */
+    let { a, b = 1 } = $props.bindable();
+;
+async () => {};
+return { props: /** @type {Foo} */({}), slots: {}, events: {} }}
+
+export default class Input__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_partial(__sveltets_2_with_any_event(render()))) {
+}

packages/svelte2tsx/test/svelte2tsx/samples/runes-props-bindable-3/input.svelte

@@ -0,0 +1,6 @@
+<script>
+    /** @typedef {{ a: string; b?: number }} Foo */
+
+    /** @type {Foo} */
+    let { a, b = 1 } = $props.bindable();
+</script>

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

@@ -0,0 +1,16 @@
+///<reference types="svelte" />
+;function render() {
+
+    /** @typedef {{ a: string; b?: number }} Foo */
+
+    /** @type {Foo} */
+    let { b = 1 } = $props();
+
+    /** @type {Foo} */
+    let { a } = $props.bindable();
+;
+async () => {};
+return { props: /** @type {Foo} */({}), slots: {}, events: {} }}
+
+export default class Input__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_partial(__sveltets_2_with_any_event(render()))) {
+}

packages/svelte2tsx/test/svelte2tsx/samples/runes-props-bindable-4/input.svelte

@@ -0,0 +1,9 @@
+<script>
+    /** @typedef {{ a: string; b?: number }} Foo */
+
+    /** @type {Foo} */
+    let { b = 1 } = $props();
+
+    /** @type {Foo} */
+    let { a } = $props.bindable();
+</script>

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

@@ -0,0 +1,14 @@
+///<reference types="svelte" />
+;function render() {
+
+    /** @typedef {{b?: number}}  $$ComponentProps *//** @type {$$ComponentProps} */
+    let { b = 1 } = $props();
+
+    /** @typedef {{a: string}}  $$ComponentBindableProps *//** @type {$$ComponentBindableProps} */
+    let { a } = $props.bindable();
+;
+async () => {};
+return { props: /** @type {$$ComponentBindableProps & $$ComponentProps} */({}), slots: {}, events: {} }}
+
+export default class Input__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_partial(__sveltets_2_with_any_event(render()))) {
+}

packages/svelte2tsx/test/svelte2tsx/samples/runes-props-bindable-5/input.svelte

@@ -0,0 +1,7 @@
+<script>
+    /** @type {{b?: number}} */
+    let { b = 1 } = $props();
+
+    /** @type {{a: string}} */
+    let { a } = $props.bindable();
+</script>

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

@@ -0,0 +1,11 @@
+///<reference types="svelte" />
+;function render() {
+
+    let/** @typedef {{ b?: number }} $$ComponentProps *//** @type {$$ComponentProps} */ { b = 1 } = $props();
+    let/** @typedef {{ a: unknown }} $$ComponentBindableProps *//** @type {$$ComponentBindableProps} */ { a } = $props.bindable();
+;
+async () => {};
+return { props: /** @type {$$ComponentBindableProps & $$ComponentProps} */({}), slots: {}, events: {} }}
+
+export default class Input__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_partial(__sveltets_2_with_any_event(render()))) {
+}

packages/svelte2tsx/test/svelte2tsx/samples/runes-props-bindable-6/input.svelte

@@ -0,0 +1,4 @@
+<script>
+    let { b = 1 } = $props();
+    let { a } = $props.bindable();
+</script>

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

@@ -0,0 +1,10 @@
+///<reference types="svelte" />
+;function render() {
+/*Ωignore_startΩ*/;type $$ComponentBindableProps = { a: unknown, b?: number };/*Ωignore_endΩ*/
+    let { a, b = 1 }: $$ComponentBindableProps = $props.bindable();
+;
+async () => {};
+return { props: {} as any as $$ComponentBindableProps, slots: {}, events: {} }}
+
+export default class Input__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_with_any_event(render())) {
+}

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

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

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

@@ -0,0 +1,10 @@
+///<reference types="svelte" />
+;function render() {
+;type $$ComponentBindableProps =  { a: string; b?: number };
+    let { a, b = 1 }:$$ComponentBindableProps = $props.bindable();
+;
+async () => {};
+return { props: {} as any as $$ComponentBindableProps, slots: {}, events: {} }}
+
+export default class Input__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_with_any_event(render())) {
+}

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

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

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

@@ -0,0 +1,12 @@
+///<reference types="svelte" />
+;function render() {
+
+    type Foo = { a: string; b?: number }
+
+    let { a, b = 1 }: Foo = $props.bindable();
+;
+async () => {};
+return { props: {} as any as Foo, slots: {}, events: {} }}
+
+export default class Input__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_with_any_event(render())) {
+}

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

@@ -0,0 +1,5 @@
+<script lang="ts">
+    type Foo = { a: string; b?: number }
+
+    let { a, b = 1 }: Foo = $props.bindable();
+</script>

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

@@ -0,0 +1,14 @@
+///<reference types="svelte" />
+;function render() {
+
+    type Foo = { a: string; b?: number }
+
+    let { b = 1 }: Foo = $props();
+
+    let { a }: Foo = $props.bindable();
+;
+async () => {};
+return { props: {} as any as Foo, slots: {}, events: {} }}
+
+export default class Input__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_with_any_event(render())) {
+}

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+    type Foo = { a: string; b?: number }
+
+    let { b = 1 }: Foo = $props();
+
+    let { a }: Foo = $props.bindable();
+</script>

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

@@ -0,0 +1,12 @@
+///<reference types="svelte" />
+;function render() {
+;type $$ComponentProps =  {b?: number};
+    let { b = 1 }:$$ComponentProps = $props();;type $$ComponentBindableProps =  {a: string};
+
+    let { a }:$$ComponentBindableProps = $props.bindable();
+;
+async () => {};
+return { props: {} as any as $$ComponentProps & $$ComponentBindableProps, slots: {}, events: {} }}
+
+export default class Input__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_with_any_event(render())) {
+}

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

@@ -0,0 +1,5 @@
+<script lang="ts">
+    let { b = 1 }: {b?: number} = $props();
+
+    let { a }: {a: string} = $props.bindable();
+</script>

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

@@ -0,0 +1,11 @@
+///<reference types="svelte" />
+;function render() {
+/*Ωignore_startΩ*/;type $$ComponentProps = { b?: number };/*Ωignore_endΩ*/
+    let { b = 1 }: $$ComponentProps = $props();/*Ωignore_startΩ*/;type $$ComponentBindableProps = { a: unknown };/*Ωignore_endΩ*/
+    let { a }: $$ComponentBindableProps = $props.bindable();
+;
+async () => {};
+return { props: {} as any as $$ComponentProps & $$ComponentBindableProps, slots: {}, events: {} }}
+
+export default class Input__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_with_any_event(render())) {
+}

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

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