mirror of https://github.com/sveltejs/svelte
fix: preserve component function context (#12089)
We need to pass the SFC component function to the snippet dev time function or else nested snippets result in the wrong context being set fixes #12040pull/12082/head
parent
2ca2979a46
commit
fcf81b1e1d
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: preserve component function context for nested components
|
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
{@render children()}
|
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
{@render children()}
|
@ -0,0 +1,5 @@
|
||||
<script lang="ts">
|
||||
let { count = $bindable() } = $props();
|
||||
</script>
|
||||
|
||||
<button onclick={() => count.value++}>{count.value}</button>
|
@ -0,0 +1,23 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
// Tests that nested snippets preserve correct component function context so we don't get false positive warnings
|
||||
export default test({
|
||||
html: `<button>0</button>`,
|
||||
|
||||
compileOptions: {
|
||||
dev: true
|
||||
},
|
||||
|
||||
test({ assert, target, warnings }) {
|
||||
const button = target.querySelector('button');
|
||||
|
||||
button?.click();
|
||||
flushSync();
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `<button>1</button>`);
|
||||
assert.deepEqual(warnings, []);
|
||||
},
|
||||
|
||||
warnings: []
|
||||
});
|
@ -0,0 +1,13 @@
|
||||
<script>
|
||||
import Component1 from './Component1.svelte';
|
||||
import Component2 from './Component2.svelte';
|
||||
import Component3 from './Component3.svelte';
|
||||
|
||||
let count = $state({ value: 0 });
|
||||
</script>
|
||||
|
||||
<Component1>
|
||||
<Component2>
|
||||
<Component3 bind:count></Component3>
|
||||
</Component2>
|
||||
</Component1>
|
Loading…
Reference in new issue