Skip to content

Commit

Permalink
fix: ensure migrate correctly handles named slots (#13676)
Browse files Browse the repository at this point in the history
* fix: ensure migrate correctly handles named slots

* tweak

* fix
  • Loading branch information
trueadm authored Oct 18, 2024
1 parent c9d85c2 commit 61391c8
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 1 deletion.
5 changes: 5 additions & 0 deletions .changeset/silver-beans-hear.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'svelte': patch
---

fix: ensure migrate correctly handles named slots
12 changes: 11 additions & 1 deletion packages/svelte/src/compiler/migrate/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -996,6 +996,10 @@ const template = {
if (attr.type === 'SpreadAttribute') {
slot_props += `...${state.str.original.substring(/** @type {number} */ (attr.expression.start), attr.expression.end)}, `;
} else if (attr.type === 'Attribute') {
if (attr.name === 'slot') {
continue;
}

if (attr.name === 'name') {
slot_name = /** @type {any} */ (attr.value)[0].data;
} else {
Expand Down Expand Up @@ -1200,7 +1204,13 @@ function migrate_slot_usage(node, path, state) {
[node.end, state.str.original.length]
]
});
state.str.appendLeft(node.end, `\n${state.indent.repeat(path.length - 2)}{/snippet}`);
const str = `\n${state.indent.repeat(path.length - 2)}{/snippet}`;

if (node.type === 'SlotElement') {
state.str.appendRight(node.end, str);
} else {
state.str.appendLeft(node.end, str);
}
}
}

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<script lang="ts">
import Component from './Component.svelte';
</script>

<Component>
<slot slot="msg"></slot>
</Component>
14 changes: 14 additions & 0 deletions packages/svelte/tests/migrate/samples/named-slots/output.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<script lang="ts">
import Component from './Component.svelte';
interface Props {
children?: import('svelte').Snippet;
}
let { children }: Props = $props();
</script>

<Component>
{#snippet msg()}
{@render children?.()}
{/snippet}
</Component>

0 comments on commit 61391c8

Please sign in to comment.