Skip to content

Commit 125156d

Browse files
authored
fix: ensure hmr block effects are transparent for transitions (#12384)
* fix: ensure hmr block effects are transparent for transitions * add test
1 parent ce66998 commit 125156d

File tree

6 files changed

+59
-1
lines changed

6 files changed

+59
-1
lines changed

.changeset/happy-moles-live.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'svelte': patch
3+
---
4+
5+
fix: ensure hmr block effects are transparent for transitions

packages/svelte/src/internal/client/dev/hmr.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
/** @import { Source, Effect } from '#client' */
2+
import { EFFECT_TRANSPARENT } from '../constants.js';
23
import { block, branch, destroy_effect } from '../reactivity/effects.js';
34
import { set_should_intro } from '../render.js';
45
import { get } from '../runtime.js';
@@ -44,7 +45,7 @@ export function hmr(source) {
4445

4546
if (ran) set_should_intro(true);
4647
});
47-
});
48+
}, EFFECT_TRANSPARENT);
4849

4950
ran = true;
5051

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<div></div>
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<script>
2+
function show(node) {
3+
return {
4+
duration: 500,
5+
css: (t) => `opacity: ${t}`,
6+
}
7+
}
8+
</script>
9+
10+
<div class="red" in:show></div>
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { flushSync } from 'svelte';
2+
import { test } from '../../test';
3+
4+
export default test({
5+
compileOptions: {
6+
dev: true,
7+
hmr: true
8+
},
9+
10+
async test({ assert, target, raf }) {
11+
const [b1] = target.querySelectorAll('button');
12+
13+
b1.click();
14+
15+
flushSync();
16+
17+
b1.click();
18+
19+
flushSync();
20+
21+
raf.tick(0);
22+
23+
raf.tick(250);
24+
const div = /** @type {HTMLDivElement} */ (target.querySelector('.red'));
25+
assert.equal(div.style.opacity, '0.5');
26+
}
27+
});
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script>
2+
import Red from "./Red.svelte"
3+
import Blue from "./Blue.svelte"
4+
const comps = {
5+
Red,
6+
Blue
7+
};
8+
let activeComp = $state("Red")
9+
</script>
10+
11+
<main>
12+
<button onclick={() => activeComp = activeComp === "Red" ? "Blue" : "Red"}>toggle</button>
13+
<svelte:component this={comps[activeComp]} />
14+
</main>

0 commit comments

Comments
 (0)