fix: don't spread away `$$slots` from `$props` is it's used (#15849)

* fix: don't spread away `$$slots` from `$props` is it's used

* beef up test

* fix

* Update .changeset/ten-plants-carry.md

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
pull/15904/head
Paolo Ricciuti 4 months ago committed by GitHub
parent 2bc2ae0ddd
commit 944ef1dbce
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: don't redeclare `$$slots`

@ -1,6 +1,7 @@
/** @import { VariableDeclaration, VariableDeclarator, Expression, CallExpression, Pattern, Identifier } from 'estree' */
/** @import { Binding } from '#compiler' */
/** @import { Context } from '../types.js' */
/** @import { ComponentAnalysis } from '../../../types.js' */
/** @import { Scope } from '../../../scope.js' */
import { build_fallback, extract_paths } from '../../../../utils/ast.js';
import * as b from '#compiler/builders';
@ -50,20 +51,26 @@ export function VariableDeclaration(node, context) {
}
}
});
// if `$$slots` is declared separately, deconflict
const slots_name = /** @type {ComponentAnalysis} */ (context.state.analysis).uses_slots
? b.id('$$slots_')
: b.id('$$slots');
if (id.type === 'ObjectPattern' && has_rest) {
// If a rest pattern is used within an object pattern, we need to ensure we don't expose $$slots or $$events
id.properties.splice(
id.properties.length - 1,
0,
// @ts-ignore
b.prop('init', b.id('$$slots'), b.id('$$slots')),
b.prop('init', b.id('$$slots'), slots_name),
b.prop('init', b.id('$$events'), b.id('$$events'))
);
} else if (id.type === 'Identifier') {
// If $props is referenced as an identifier, we need to ensure we don't expose $$slots or $$events as properties
// on the identifier reference
id = b.object_pattern([
b.prop('init', b.id('$$slots'), b.id('$$slots')),
b.prop('init', b.id('$$slots'), slots_name),
b.prop('init', b.id('$$events'), b.id('$$events')),
b.rest(b.id(id.name))
]);

@ -0,0 +1,9 @@
<script>
const props = $props();
</script>
<p>{Object.keys(props)}</p>
{#if $$slots.foo}
<p>foo exists</p>
{/if}

@ -0,0 +1,8 @@
import { test } from '../../test';
export default test({
html: `
<p>a</p>
<p>foo exists</p>
`
});

@ -0,0 +1,7 @@
<script>
import Child from './Child.svelte';
</script>
<Child a="b">
<div slot="foo">foo</div>
</Child>
Loading…
Cancel
Save