-
-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Description
Describe the bug
Hello!
According to documentation components with both 4 and 5 syntax can be used together seamlessly. However, I'm running into an issue, that bounded variable update is not reactive, if it has been created in a component with syntax 4, but updated in a component of syntax 5. It is important to mention that it does not work, only if update happens in deeply nested component, not direct child component. (Otherwise, if update happens in a direct child component, the reactivity works fine. And, reactivity works fine if top-most component also uses runes.)
Reproduction
https://svelte.dev/playground/00a7870247734f5a935d93429f1841ab?version=latest
I have the following set of components:
TestInput.svelte
<script lang="ts">
interface Props {
value?: string
entity: {value?: string}
}
let {
value = $bindable(),
entity = $bindable()
}: Props = $props()
$effect(() => {
entity.value = value
})
</script>
<input bind:value/>My text
TestInputWrapper.svelte
<script lang="ts">
import TestInput from 'src/TestInput.svelte'
interface Props {
value?: string
entity: {value?: string}
}
let {
value = $bindable(),
entity = $bindable()
}: Props = $props()
</script>
<div>
<TestInput bind:value bind:entity/>
</div>
And App.svelte
(!!! where App.svelte
defines variables using old syntax)
<script lang="ts">
import TestInputWrapper from 'src/TestInputWrapper.svelte'
let value = ''
let entity = {value: undefined}
</script>
<TestInputWrapper bind:value bind:entity={entity}/>
<span>Output: {entity.value}</span>
When I type in my input, the "Output" span does not change its content.
System Info
Svelte: 5.38.7
Severity
blocking an upgrade