fix: use type instead of generic for $props() (#2314)

generic argument will eventually be removed
also fixes TS to 5.3 until we resolve the issues with 5.4

packages/language-server/package.json

@@ -57,7 +57,7 @@
         "svelte": "^3.57.0",
         "svelte-preprocess": "^5.1.3",
         "svelte2tsx": "workspace:~",
-        "typescript": "^5.3.2",
+        "typescript": "~5.3.2",
         "typescript-auto-import-cache": "^0.3.2",
         "vscode-css-languageservice": "~6.2.10",
         "vscode-html-languageservice": "~5.1.1",

packages/svelte-vscode/package.json

@@ -719,7 +719,7 @@
         "@types/vscode": "^1.67",
         "js-yaml": "^3.14.0",
         "tslib": "^2.4.0",
-        "typescript": "^5.3.2",
+        "typescript": "~5.3.2",
         "vscode-tmgrammar-test": "^0.0.11"
     },
     "dependencies": {

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

@@ -168,7 +168,7 @@ export class ExportedNames {
             } 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 = '$$_sveltets_Props';
+                this.$props.generic = '$$ComponentProps';
                 preprendStr(
                     this.str,
                     generic_arg.pos + this.astOffset,
@@ -212,11 +212,11 @@ export class ExportedNames {
                 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 {$$_sveltets_Props} */';
+                    this.$props.comment = '/** @type {$$ComponentProps} */';
                     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, ' $$_sveltets_Props */' + this.$props.comment);
+                    this.str.overwrite(end, end + 2, ' $$ComponentProps */' + this.$props.comment);
                 } 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.
@@ -302,26 +302,26 @@ 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 = '$$_sveltets_Props';
+                this.$props.generic = '$$ComponentProps';
                 if (props.length > 0 || withUnknown) {
                     preprendStr(
                         this.str,
                         node.parent.pos + this.astOffset,
-                        surroundWithIgnoreComments(`;type $$_sveltets_Props = ${propsStr};`)
+                        surroundWithIgnoreComments(`;type $$ComponentProps = ${propsStr};`)
                     );
                     preprendStr(
                         this.str,
-                        node.initializer.expression.end + this.astOffset,
-                        `<${this.$props.generic}>`
+                        node.name.end + this.astOffset,
+                        `: ${this.$props.generic}`
                     );
                 }
             } else {
-                this.$props.comment = '/** @type {$$_sveltets_Props} */';
+                this.$props.comment = '/** @type {$$ComponentProps} */';
                 if (props.length > 0 || withUnknown) {
                     preprendStr(
                         this.str,
                         node.pos + this.astOffset,
-                        `/** @typedef {${propsStr}} $$_sveltets_Props */${this.$props.comment}`
+                        `/** @typedef {${propsStr}} $$ComponentProps */${this.$props.comment}`
                     );
                 }
             }

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

@@ -1,10 +1,10 @@
 ///<reference types="svelte" />
 ;function render() {
 
-    let/** @typedef {{ a: unknown, b?: boolean, c?: number, d?: string, e?: unknown, f?: unknown, g?: typeof foo }} $$_sveltets_Props *//** @type {$$_sveltets_Props} */ { a, b = true, c = 1, d = '', e = null, f = {}, g = foo } = $props(); 
+    let/** @typedef {{ a: unknown, b?: boolean, c?: number, d?: string, e?: unknown, f?: unknown, g?: typeof foo }} $$ComponentProps *//** @type {$$ComponentProps} */ { a, b = true, c = 1, d = '', e = null, f = {}, g = foo } = $props(); 
 ;
 async () => {};
-return { props: /** @type {$$_sveltets_Props} */({}), slots: {}, events: {} }}
+return { props: /** @type {$$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-looking-like-stores/expectedv2.ts

@@ -1,14 +1,14 @@
 ///<reference types="svelte" />
 ;function render() {
 
-    let/** @typedef {{ props: unknown }} $$_sveltets_Props *//** @type {$$_sveltets_Props} */ { props } = $props();
+    let/** @typedef {{ props: unknown }} $$ComponentProps *//** @type {$$ComponentProps} */ { props } = $props();
     let state = $state(0);
     let derived = $derived(state * 2);
 ;
 async () => {
 
 state; derived;};
-return { props: /** @type {$$_sveltets_Props} */({}), slots: {}, events: {} }}
+return { props: /** @type {$$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/expectedv2.ts

@@ -1,13 +1,13 @@
 ///<reference types="svelte" />
 ;function render() {
 
-    /** @typedef {{a: number, b: string}}  $$_sveltets_Props *//** @type {$$_sveltets_Props} */
+    /** @typedef {{a: number, b: string}}  $$ComponentProps *//** @type {$$ComponentProps} */
     let { a, b } = $props();
     let x = $state(0);
     let y = $derived(x * 2);
 ;
 async () => {};
-return { props: /** @type {$$_sveltets_Props} */({}), slots: {}, events: {} }}
+return { props: /** @type {$$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/sveltekit-autotypes-$props-rune-no-changes/expectedv2.ts

@@ -1,13 +1,13 @@
 ///<reference types="svelte" />
 ;function render() {
 
-    /** @typedef {{form: boolean, data: true }}  $$_sveltets_Props *//** @type {$$_sveltets_Props} */
+    /** @typedef {{form: boolean, data: true }}  $$ComponentProps *//** @type {$$ComponentProps} */
     let { form, data } = $props();
     /** @type {any} */
      const snapshot = {};
 ;
 async () => {};
-return { props: /** @type {{snapshot?: typeof snapshot} & $$_sveltets_Props} */({}), slots: {}, events: {} }}
+return { props: /** @type {{snapshot?: typeof snapshot} & $$ComponentProps} */({}), slots: {}, events: {} }}
 
 export default class Page__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_partial(['snapshot'], __sveltets_2_with_any_event(render()))) {
     get snapshot() { return __sveltets_2_nonNullable(this.$$prop_def.snapshot) }

packages/svelte2tsx/test/svelte2tsx/samples/sveltekit-autotypes-$props-rune/expectedv2.ts

@@ -1,11 +1,11 @@
 ///<reference types="svelte" />
 ;function render() {
 
-    let/** @typedef {{ form: import('./$types.js').ActionData, data: import('./$types.js').PageData }} $$_sveltets_Props *//** @type {$$_sveltets_Props} */ { form, data } = $props();
+    let/** @typedef {{ form: import('./$types.js').ActionData, data: import('./$types.js').PageData }} $$ComponentProps *//** @type {$$ComponentProps} */ { form, data } = $props();
      const snapshot/*Ωignore_startΩ*/: import('./$types.js').Snapshot/*Ωignore_endΩ*/ = {};
 ;
 async () => {};
-return { props: /** @type {{snapshot?: typeof snapshot} & $$_sveltets_Props} */({}), slots: {}, events: {} }}
+return { props: /** @type {{snapshot?: typeof snapshot} & $$ComponentProps} */({}), slots: {}, events: {} }}
 
 export default class Page__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_partial(['snapshot'], __sveltets_2_with_any_event(render()))) {
     get snapshot() { return __sveltets_2_nonNullable(this.$$prop_def.snapshot) }

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

@@ -1,10 +1,10 @@
 ///<reference types="svelte" />
 ;function render() {
-/*Ωignore_startΩ*/;type $$_sveltets_Props = { a: unknown, b?: boolean, c?: number, d?: string, e?: unknown, f?: unknown, g?: typeof foo, h?: Bar, i?: Baz };/*Ωignore_endΩ*/
-    let { a, b = true, c = 1, d = '', e = null, f = {}, g = foo, h = null as Bar, i = null as any as Baz } = $props<$$_sveltets_Props>(); 
+/*Ωignore_startΩ*/;type $$ComponentProps = { a: unknown, b?: boolean, c?: number, d?: string, e?: unknown, f?: unknown, g?: typeof foo, h?: Bar, i?: Baz };/*Ωignore_endΩ*/
+    let { a, b = true, c = 1, d = '', e = null, f = {}, g = foo, h = null as Bar, i = null as any as Baz }: $$ComponentProps = $props(); 
 ;
 async () => {};
-return { props: {} as any as $$_sveltets_Props, slots: {}, events: {} }}
+return { props: {} as any as $$ComponentProps, slots: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_with_any_event(render())) {
 }

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

@@ -1,12 +1,12 @@
 ///<reference types="svelte" />
 ;function render<T>() {
-;type $$_sveltets_Props = { a: T, b: string };
-    let { a, b } = $props<$$_sveltets_Props>();
+;type $$ComponentProps =  { a: T, b: string };
+    let { a, b }:$$ComponentProps = $props();
     let x = $state<T>(0);
     let y = $derived(x * 2);
 ;
 async () => {};
-return { props: {} as any as $$_sveltets_Props, slots: {}, events: {} }}
+return { props: {} as any as $$ComponentProps, slots: {}, events: {} }}
 class __sveltets_Render<T> {
     props() {
         return render<T>().props;

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

@@ -1,5 +1,5 @@
 <script lang="ts" generics="T">
-    let { a, b } = $props<{ a: T, b: string }>();
+    let { a, b }: { a: T, b: string } = $props();
     let x = $state<T>(0);
     let y = $derived(x * 2);
 </script>

packages/svelte2tsx/test/svelte2tsx/samples/ts-runes-with-slot/expected-svelte5.ts

@@ -1,7 +1,7 @@
 ///<reference types="svelte" />
 ;function render<T>() {
-;type $$_sveltets_Props = { a: T, b: string };
-    let { a, b } = $props<$$_sveltets_Props>();
+;type $$ComponentProps =  { a: T, b: string };
+    let { a, b }:$$ComponentProps = $props();
     let x = $state<T>(0);
     let y = $derived(x * 2);
 
@@ -10,7 +10,7 @@ async () => {
 
  { __sveltets_createSlot("default", {  x,y,});}};
 let $$implicit_children = __sveltets_2_snippet({x:x, y:y});
-return { props: {} as any as $$_sveltets_Props & { children?: typeof $$implicit_children }, slots: {'default': {x:x, y:y}}, events: {} }}
+return { props: {} as any as $$ComponentProps & { children?: typeof $$implicit_children }, slots: {'default': {x:x, y:y}}, events: {} }}
 class __sveltets_Render<T> {
     props() {
         return render<T>().props;

packages/svelte2tsx/test/svelte2tsx/samples/ts-runes-with-slot/expectedv2.ts

@@ -1,15 +1,15 @@
 ///<reference types="svelte" />
 ;function render<T>() {
-;type $$_sveltets_Props = { a: T, b: string };
-    let { a, b } = $props<$$_sveltets_Props>();
+;type $$ComponentProps =  { a: T, b: string };
+    let { a, b }:$$ComponentProps = $props();
     let x = $state<T>(0);
     let y = $derived(x * 2);
 
 /*Ωignore_startΩ*/;const __sveltets_createSlot = __sveltets_2_createCreateSlot();/*Ωignore_endΩ*/;
 async () => {
 
  { __sveltets_createSlot("default", {  x,y,});}};
-return { props: {} as any as $$_sveltets_Props, slots: {'default': {x:x, y:y}}, events: {} }}
+return { props: {} as any as $$ComponentProps, slots: {'default': {x:x, y:y}}, events: {} }}
 class __sveltets_Render<T> {
     props() {
         return render<T>().props;

packages/svelte2tsx/test/svelte2tsx/samples/ts-runes-with-slot/input.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="T">
-    let { a, b } = $props<{ a: T, b: string }>();
+    let { a, b }: { a: T, b: string } = $props();
     let x = $state<T>(0);
     let y = $derived(x * 2);
 </script>

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

@@ -1,12 +1,12 @@
 ///<reference types="svelte" />
 ;function render() {
-;type $$_sveltets_Props = { a: number, b: string };
-    let { a, b } = $props<$$_sveltets_Props>();
+;type $$ComponentProps =  { a: number, b: string };
+    let { a, b }:$$ComponentProps = $props();
     let x = $state(0);
     let y = $derived(x * 2);
 ;
 async () => {};
-return { props: {} as any as $$_sveltets_Props, slots: {}, events: {} }}
+return { props: {} as any as $$ComponentProps, slots: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_with_any_event(render())) {
 }

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-    let { a, b } = $props<{ a: number, b: string }>();
+    let { a, b }: { a: number, b: string } = $props();
     let x = $state(0);
     let y = $derived(x * 2);
 </script>

packages/svelte2tsx/test/svelte2tsx/samples/ts-sveltekit-autotypes-$props-rune-unchanged/+page.svelte

@@ -1,4 +1,4 @@
 <script>
     export const snapshot: any = {};
-    let { form, data } = $props<{form: boolean, data: true }>();
+    let { form, data }: {form: boolean, data: true } = $props();
 </script>

packages/svelte2tsx/test/svelte2tsx/samples/ts-sveltekit-autotypes-$props-rune-unchanged/expectedv2.ts

@@ -1,11 +1,11 @@
 ///<reference types="svelte" />
 ;function render() {
 
-     const snapshot: any = {};;type $$_sveltets_Props = {form: boolean, data: true };
-    let { form, data } = $props<$$_sveltets_Props>();
+     const snapshot: any = {};;type $$ComponentProps =  {form: boolean, data: true };
+    let { form, data }:$$ComponentProps = $props();
 ;
 async () => {};
-return { props: {} as any as $$_sveltets_Props & { snapshot?: any }, slots: {}, events: {} }}
+return { props: {} as any as $$ComponentProps & { snapshot?: any }, slots: {}, events: {} }}
 
 export default class Page__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_with_any_event(render())) {
     get snapshot() { return __sveltets_2_nonNullable(this.$$prop_def.snapshot) }

packages/svelte2tsx/test/svelte2tsx/samples/ts-sveltekit-autotypes-$props-rune/expectedv2.ts

@@ -1,11 +1,11 @@
 ///<reference types="svelte" />
 ;function render() {
 
-     const snapshot/*Ωignore_startΩ*/: import('./$types.js').Snapshot/*Ωignore_endΩ*/ = {};/*Ωignore_startΩ*/;type $$_sveltets_Props = { form: import('./$types.js').ActionData, data: import('./$types.js').PageData };/*Ωignore_endΩ*/
-    let { form, data } = $props<$$_sveltets_Props>();
+     const snapshot/*Ωignore_startΩ*/: import('./$types.js').Snapshot/*Ωignore_endΩ*/ = {};/*Ωignore_startΩ*/;type $$ComponentProps = { form: import('./$types.js').ActionData, data: import('./$types.js').PageData };/*Ωignore_endΩ*/
+    let { form, data }: $$ComponentProps = $props();
 ;
 async () => {};
-return { props: {} as any as $$_sveltets_Props & { snapshot?: typeof snapshot }, slots: {}, events: {} }}
+return { props: {} as any as $$ComponentProps & { snapshot?: typeof snapshot }, slots: {}, events: {} }}
 
 export default class Page__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_with_any_event(render())) {
     get snapshot() { return __sveltets_2_nonNullable(this.$$prop_def.snapshot) }