Skip to content

Commit dd9ade7

Browse files
authored
fix: ensure bind:this happens before transitions and animations (#12497)
* fix: ensure `bind:this` happens before transitions and animations * test
1 parent 919e7ad commit dd9ade7

File tree

3 files changed

+32
-2
lines changed

3 files changed

+32
-2
lines changed

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1890,7 +1890,8 @@ export const template_visitors = {
18901890
? b.literal(null)
18911891
: b.thunk(/** @type {Expression} */ (visit(node.expression)));
18921892

1893-
state.init.push(
1893+
// in after_update to ensure it always happens after bind:this
1894+
state.after_update.push(
18941895
b.stmt(
18951896
b.call(
18961897
'$.animation',
@@ -1922,7 +1923,8 @@ export const template_visitors = {
19221923
args.push(b.thunk(/** @type {Expression} */ (visit(node.expression))));
19231924
}
19241925

1925-
state.init.push(b.stmt(b.call('$.transition', ...args)));
1926+
// in after_update to ensure it always happens after bind:this
1927+
state.after_update.push(b.stmt(b.call('$.transition', ...args)));
19261928
},
19271929
RegularElement(node, context) {
19281930
/** @type {import('#shared').SourceLocation} */
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { flushSync } from 'svelte';
2+
import { test } from '../../test';
3+
4+
export default test({
5+
mode: ['client'],
6+
async test({ assert, target }) {
7+
const btn = target.querySelector('button');
8+
9+
btn?.click();
10+
flushSync();
11+
assert.htmlEqual(target.innerHTML, `<button>toggle</button> <nav>hello</nav>`);
12+
}
13+
});
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script>
2+
function fly(node, params) {
3+
return {};
4+
}
5+
6+
let show = $state(false);
7+
let sidebar = $state();
8+
</script>
9+
10+
<button onclick={() => (show = !show)}>toggle</button>
11+
12+
{#if show}
13+
<!-- bind:this should be applied before any of the directives -->
14+
<nav transition:fly={{ x: sidebar.offsetWidth }} bind:this={sidebar}>hello</nav>
15+
{/if}

0 commit comments

Comments
 (0)