fix: migrating rest props type includes props types (#13632)

* fix: rest props type includes props types

* chore: remove extra line

* Update .changeset/spotty-kings-hug.md
pull/13651/head
Paolo Ricciuti 2 months ago committed by GitHub
parent d7cf76bbb6
commit b352f08e9d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: migrating rest props type includes props types

@ -198,26 +198,26 @@ export function migrate(source, { filename } = {}) {
const type_name = state.scope.root.unique('Props').name;
let type = '';
if (uses_ts) {
if (analysis.uses_props || analysis.uses_rest_props) {
type = `interface ${type_name} { [key: string]: any }`;
} else {
type = `interface ${type_name} {${newline_separator}${state.props
.map((prop) => {
const comment = prop.comment ? `${prop.comment}${newline_separator}` : '';
return `${comment}${prop.exported}${prop.optional ? '?' : ''}: ${prop.type};`;
})
.join(newline_separator)}\n${indent}}`;
}
} else {
.join(newline_separator)}`;
if (analysis.uses_props || analysis.uses_rest_props) {
type = `Record<string, any>`;
type += `${state.props.length > 0 ? newline_separator : ''}[key: string]: any`;
}
type += `\n${indent}}`;
} else {
type = `{${state.props
.map((prop) => {
return `${prop.exported}${prop.optional ? '?' : ''}: ${prop.type}`;
})
.join(`, `)}}`;
.join(`, `)}`;
if (analysis.uses_props || analysis.uses_rest_props) {
type += `${state.props.length > 0 ? ', ' : ''}[key: string]: any`;
}
type += '}';
}
let props_declaration = `let {${props_separator}${props}${has_many_props ? `\n${indent}` : ' '}}`;

@ -0,0 +1,5 @@
<script lang="ts">
export let foo: string;
</script>
<button {foo} {...$$restProps}>click me</button>

@ -0,0 +1,10 @@
<script lang="ts">
interface Props {
foo: string;
[key: string]: any
}
let { foo, ...rest }: Props = $props();
</script>
<button {foo} {...rest}>click me</button>

@ -1,5 +1,5 @@
<script>
/** @type {Record<string, any>} */
/** @type {{foo: any, [key: string]: any}} */
let { foo, ...rest } = $props();
</script>

@ -1,5 +1,5 @@
<script>
/** @type {Record<string, any>} */
/** @type {{children?: import('svelte').Snippet, foo_1?: import('svelte').Snippet<[any]>, bar?: import('svelte').Snippet, dashed_name?: import('svelte').Snippet, [key: string]: any}} */
let {
...props
} = $props();

@ -1,5 +1,5 @@
<script>
/** @type {Record<string, any>} */
/** @type {{[key: string]: any}} */
let { ...rest } = $props();
let Component;
let fallback;

@ -1,6 +1,6 @@
<script>
import Output_1 from './output.svelte';
/** @type {Record<string, any>} */
/** @type {{[key: string]: any}} */
let { ...props } = $props();
let Output;
</script>

@ -1,6 +1,6 @@
<script>
import Output from './output.svelte';
/** @type {Record<string, any>} */
/** @type {{[key: string]: any}} */
let { ...props } = $props();
</script>

Loading…
Cancel
Save