Skip to content

Commit 48507fc

Browse files
dummdidummdummdidumm
authored
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
1 parent 4bd1424 commit 48507fc

File tree

20 files changed

+48
-48
lines changed

20 files changed

+48
-48
lines changed

‎packages/language-server/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
"svelte": "^3.57.0",
5858
"svelte-preprocess": "^5.1.3",
5959
"svelte2tsx": "workspace:~",
60-
"typescript": "^5.3.2",
60+
"typescript": "~5.3.2",
6161
"typescript-auto-import-cache": "^0.3.2",
6262
"vscode-css-languageservice": "~6.2.10",
6363
"vscode-html-languageservice": "~5.1.1",

‎packages/svelte-vscode/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -719,7 +719,7 @@
719719
"@types/vscode": "^1.67",
720720
"js-yaml": "^3.14.0",
721721
"tslib": "^2.4.0",
722-
"typescript": "^5.3.2",
722+
"typescript": "~5.3.2",
723723
"vscode-tmgrammar-test": "^0.0.11"
724724
},
725725
"dependencies": {

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ export class ExportedNames {
168168
} else {
169169
// Create a virtual type alias for the unnamed generic and reuse it for the props return type
170170
// so that rename, find references etc works seamlessly across components
171-
this.$props.generic = '$$_sveltets_Props';
171+
this.$props.generic = '$$ComponentProps';
172172
preprendStr(
173173
this.str,
174174
generic_arg.pos + this.astOffset,
@@ -212,11 +212,11 @@ export class ExportedNames {
212212
if (comment && /\/\*\*[^@]*?@type\s*{\s*{.*}\s*}\s*\*\//.test(comment)) {
213213
// Create a virtual type alias for the unnamed generic and reuse it for the props return type
214214
// so that rename, find references etc works seamlessly across components
215-
this.$props.comment = '/** @type {$$_sveltets_Props} */';
215+
this.$props.comment = '/** @type {$$ComponentProps} */';
216216
const type_start = this.str.original.indexOf('@type', start);
217217
this.str.overwrite(type_start, type_start + 5, '@typedef');
218218
const end = this.str.original.indexOf('*/', start);
219-
this.str.overwrite(end, end + 2, ' $$_sveltets_Props */' + this.$props.comment);
219+
this.str.overwrite(end, end + 2, ' $$ComponentProps */' + this.$props.comment);
220220
} else {
221221
// Complex comment or simple `@type {AType}` comment which we just use as-is.
222222
// For the former this means things like rename won't work properly across components.
@@ -302,26 +302,26 @@ export class ExportedNames {
302302
// Create a virtual type alias for the unnamed generic and reuse it for the props return type
303303
// so that rename, find references etc works seamlessly across components
304304
if (this.isTsFile) {
305-
this.$props.generic = '$$_sveltets_Props';
305+
this.$props.generic = '$$ComponentProps';
306306
if (props.length > 0 || withUnknown) {
307307
preprendStr(
308308
this.str,
309309
node.parent.pos + this.astOffset,
310-
surroundWithIgnoreComments(`;type $$_sveltets_Props = ${propsStr};`)
310+
surroundWithIgnoreComments(`;type $$ComponentProps = ${propsStr};`)
311311
);
312312
preprendStr(
313313
this.str,
314-
node.initializer.expression.end + this.astOffset,
315-
`<${this.$props.generic}>`
314+
node.name.end + this.astOffset,
315+
`: ${this.$props.generic}`
316316
);
317317
}
318318
} else {
319-
this.$props.comment = '/** @type {$$_sveltets_Props} */';
319+
this.$props.comment = '/** @type {$$ComponentProps} */';
320320
if (props.length > 0 || withUnknown) {
321321
preprendStr(
322322
this.str,
323323
node.pos + this.astOffset,
324-
`/** @typedef {${propsStr}} $$_sveltets_Props */${this.$props.comment}`
324+
`/** @typedef {${propsStr}} $$ComponentProps */${this.$props.comment}`
325325
);
326326
}
327327
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
///<reference types="svelte" />
22
;function render() {
33

4-
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();
4+
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();
55
;
66
async () => {};
7-
return { props: /** @type {$$_sveltets_Props} */({}), slots: {}, events: {} }}
7+
return { props: /** @type {$$ComponentProps} */({}), slots: {}, events: {} }}
88

99
export default class Input__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_partial(__sveltets_2_with_any_event(render()))) {
1010
}

‎packages/svelte2tsx/test/svelte2tsx/samples/runes-looking-like-stores/expectedv2.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
///<reference types="svelte" />
22
;function render() {
33

4-
let/** @typedef {{ props: unknown }} $$_sveltets_Props *//** @type {$$_sveltets_Props} */ { props } = $props();
4+
let/** @typedef {{ props: unknown }} $$ComponentProps *//** @type {$$ComponentProps} */ { props } = $props();
55
let state = $state(0);
66
let derived = $derived(state * 2);
77
;
88
async () => {
99

1010
state; derived;};
11-
return { props: /** @type {$$_sveltets_Props} */({}), slots: {}, events: {} }}
11+
return { props: /** @type {$$ComponentProps} */({}), slots: {}, events: {} }}
1212

1313
export default class Input__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_partial(__sveltets_2_with_any_event(render()))) {
1414
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
///<reference types="svelte" />
22
;function render() {
33

4-
/** @typedef {{a: number, b: string}} $$_sveltets_Props *//** @type {$$_sveltets_Props} */
4+
/** @typedef {{a: number, b: string}} $$ComponentProps *//** @type {$$ComponentProps} */
55
let { a, b } = $props();
66
let x = $state(0);
77
let y = $derived(x * 2);
88
;
99
async () => {};
10-
return { props: /** @type {$$_sveltets_Props} */({}), slots: {}, events: {} }}
10+
return { props: /** @type {$$ComponentProps} */({}), slots: {}, events: {} }}
1111

1212
export default class Input__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_partial(__sveltets_2_with_any_event(render()))) {
1313
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
///<reference types="svelte" />
22
;function render() {
33

4-
/** @typedef {{form: boolean, data: true }} $$_sveltets_Props *//** @type {$$_sveltets_Props} */
4+
/** @typedef {{form: boolean, data: true }} $$ComponentProps *//** @type {$$ComponentProps} */
55
let { form, data } = $props();
66
/** @type {any} */
77
const snapshot = {};
88
;
99
async () => {};
10-
return { props: /** @type {{snapshot?: typeof snapshot} & $$_sveltets_Props} */({}), slots: {}, events: {} }}
10+
return { props: /** @type {{snapshot?: typeof snapshot} & $$ComponentProps} */({}), slots: {}, events: {} }}
1111

1212
export default class Page__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_partial(['snapshot'], __sveltets_2_with_any_event(render()))) {
1313
get snapshot() { return __sveltets_2_nonNullable(this.$$prop_def.snapshot) }

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
///<reference types="svelte" />
22
;function render() {
33

4-
let/** @typedef {{ form: import('./$types.js').ActionData, data: import('./$types.js').PageData }} $$_sveltets_Props *//** @type {$$_sveltets_Props} */ { form, data } = $props();
4+
let/** @typedef {{ form: import('./$types.js').ActionData, data: import('./$types.js').PageData }} $$ComponentProps *//** @type {$$ComponentProps} */ { form, data } = $props();
55
const snapshot/*Ωignore_startΩ*/: import('./$types.js').Snapshot/*Ωignore_endΩ*/ = {};
66
;
77
async () => {};
8-
return { props: /** @type {{snapshot?: typeof snapshot} & $$_sveltets_Props} */({}), slots: {}, events: {} }}
8+
return { props: /** @type {{snapshot?: typeof snapshot} & $$ComponentProps} */({}), slots: {}, events: {} }}
99

1010
export default class Page__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_partial(['snapshot'], __sveltets_2_with_any_event(render()))) {
1111
get snapshot() { return __sveltets_2_nonNullable(this.$$prop_def.snapshot) }

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
///<reference types="svelte" />
22
;function render() {
3-
/*Ω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Ω*/
4-
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>();
3+
/*Ω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Ω*/
4+
let { a, b = true, c = 1, d = '', e = null, f = {}, g = foo, h = null as Bar, i = null as any as Baz }: $$ComponentProps = $props();
55
;
66
async () => {};
7-
return { props: {} as any as $$_sveltets_Props, slots: {}, events: {} }}
7+
return { props: {} as any as $$ComponentProps, slots: {}, events: {} }}
88

99
export default class Input__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_with_any_event(render())) {
1010
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
///<reference types="svelte" />
22
;function render<T>() {
3-
;type $$_sveltets_Props = { a: T, b: string };
4-
let { a, b } = $props<$$_sveltets_Props>();
3+
;type $$ComponentProps = { a: T, b: string };
4+
let { a, b }:$$ComponentProps = $props();
55
let x = $state<T>(0);
66
let y = $derived(x * 2);
77
;
88
async () => {};
9-
return { props: {} as any as $$_sveltets_Props, slots: {}, events: {} }}
9+
return { props: {} as any as $$ComponentProps, slots: {}, events: {} }}
1010
class __sveltets_Render<T> {
1111
props() {
1212
return render<T>().props;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts" generics="T">
2-
let { a, b } = $props<{ a: T, b: string }>();
2+
let { a, b }: { a: T, b: string } = $props();
33
let x = $state<T>(0);
44
let y = $derived(x * 2);
55
</script>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
///<reference types="svelte" />
22
;function render<T>() {
3-
;type $$_sveltets_Props = { a: T, b: string };
4-
let { a, b } = $props<$$_sveltets_Props>();
3+
;type $$ComponentProps = { a: T, b: string };
4+
let { a, b }:$$ComponentProps = $props();
55
let x = $state<T>(0);
66
let y = $derived(x * 2);
77

@@ -10,7 +10,7 @@ async () => {
1010

1111
{ __sveltets_createSlot("default", { x,y,});}};
1212
let $$implicit_children = __sveltets_2_snippet({x:x, y:y});
13-
return { props: {} as any as $$_sveltets_Props & { children?: typeof $$implicit_children }, slots: {'default': {x:x, y:y}}, events: {} }}
13+
return { props: {} as any as $$ComponentProps & { children?: typeof $$implicit_children }, slots: {'default': {x:x, y:y}}, events: {} }}
1414
class __sveltets_Render<T> {
1515
props() {
1616
return render<T>().props;

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
///<reference types="svelte" />
22
;function render<T>() {
3-
;type $$_sveltets_Props = { a: T, b: string };
4-
let { a, b } = $props<$$_sveltets_Props>();
3+
;type $$ComponentProps = { a: T, b: string };
4+
let { a, b }:$$ComponentProps = $props();
55
let x = $state<T>(0);
66
let y = $derived(x * 2);
77

88
/*Ωignore_startΩ*/;const __sveltets_createSlot = __sveltets_2_createCreateSlot();/*Ωignore_endΩ*/;
99
async () => {
1010

1111
{ __sveltets_createSlot("default", { x,y,});}};
12-
return { props: {} as any as $$_sveltets_Props, slots: {'default': {x:x, y:y}}, events: {} }}
12+
return { props: {} as any as $$ComponentProps, slots: {'default': {x:x, y:y}}, events: {} }}
1313
class __sveltets_Render<T> {
1414
props() {
1515
return render<T>().props;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts" generics="T">
2-
let { a, b } = $props<{ a: T, b: string }>();
2+
let { a, b }: { a: T, b: string } = $props();
33
let x = $state<T>(0);
44
let y = $derived(x * 2);
55
</script>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
///<reference types="svelte" />
22
;function render() {
3-
;type $$_sveltets_Props = { a: number, b: string };
4-
let { a, b } = $props<$$_sveltets_Props>();
3+
;type $$ComponentProps = { a: number, b: string };
4+
let { a, b }:$$ComponentProps = $props();
55
let x = $state(0);
66
let y = $derived(x * 2);
77
;
88
async () => {};
9-
return { props: {} as any as $$_sveltets_Props, slots: {}, events: {} }}
9+
return { props: {} as any as $$ComponentProps, slots: {}, events: {} }}
1010

1111
export default class Input__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_with_any_event(render())) {
1212
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
let { a, b } = $props<{ a: number, b: string }>();
2+
let { a, b }: { a: number, b: string } = $props();
33
let x = $state(0);
44
let y = $derived(x * 2);
55
</script>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
<script>
22
export const snapshot: any = {};
3-
let { form, data } = $props<{form: boolean, data: true }>();
3+
let { form, data }: {form: boolean, data: true } = $props();
44
</script>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
///<reference types="svelte" />
22
;function render() {
33

4-
const snapshot: any = {};;type $$_sveltets_Props = {form: boolean, data: true };
5-
let { form, data } = $props<$$_sveltets_Props>();
4+
const snapshot: any = {};;type $$ComponentProps = {form: boolean, data: true };
5+
let { form, data }:$$ComponentProps = $props();
66
;
77
async () => {};
8-
return { props: {} as any as $$_sveltets_Props & { snapshot?: any }, slots: {}, events: {} }}
8+
return { props: {} as any as $$ComponentProps & { snapshot?: any }, slots: {}, events: {} }}
99

1010
export default class Page__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_with_any_event(render())) {
1111
get snapshot() { return __sveltets_2_nonNullable(this.$$prop_def.snapshot) }

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
///<reference types="svelte" />
22
;function render() {
33

4-
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Ω*/
5-
let { form, data } = $props<$$_sveltets_Props>();
4+
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Ω*/
5+
let { form, data }: $$ComponentProps = $props();
66
;
77
async () => {};
8-
return { props: {} as any as $$_sveltets_Props & { snapshot?: typeof snapshot }, slots: {}, events: {} }}
8+
return { props: {} as any as $$ComponentProps & { snapshot?: typeof snapshot }, slots: {}, events: {} }}
99

1010
export default class Page__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_with_any_event(render())) {
1111
get snapshot() { return __sveltets_2_nonNullable(this.$$prop_def.snapshot) }

‎pnpm-lock.yaml

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)