diff --git a/.changeset/happy-moles-live.md b/.changeset/happy-moles-live.md new file mode 100644 index 0000000000..c73be815b0 --- /dev/null +++ b/.changeset/happy-moles-live.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: ensure hmr block effects are transparent for transitions diff --git a/packages/svelte/src/internal/client/dev/hmr.js b/packages/svelte/src/internal/client/dev/hmr.js index 0d0edd4ddc..050901cd7c 100644 --- a/packages/svelte/src/internal/client/dev/hmr.js +++ b/packages/svelte/src/internal/client/dev/hmr.js @@ -1,4 +1,5 @@ /** @import { Source, Effect } from '#client' */ +import { EFFECT_TRANSPARENT } from '../constants.js'; import { block, branch, destroy_effect } from '../reactivity/effects.js'; import { set_should_intro } from '../render.js'; import { get } from '../runtime.js'; @@ -44,7 +45,7 @@ export function hmr(source) { if (ran) set_should_intro(true); }); - }); + }, EFFECT_TRANSPARENT); ran = true; diff --git a/packages/svelte/tests/runtime-runes/samples/component-transition-hmr/Blue.svelte b/packages/svelte/tests/runtime-runes/samples/component-transition-hmr/Blue.svelte new file mode 100644 index 0000000000..7c89b545c5 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/component-transition-hmr/Blue.svelte @@ -0,0 +1 @@ +
diff --git a/packages/svelte/tests/runtime-runes/samples/component-transition-hmr/Red.svelte b/packages/svelte/tests/runtime-runes/samples/component-transition-hmr/Red.svelte new file mode 100644 index 0000000000..e28b4d689c --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/component-transition-hmr/Red.svelte @@ -0,0 +1,10 @@ + + +
diff --git a/packages/svelte/tests/runtime-runes/samples/component-transition-hmr/_config.js b/packages/svelte/tests/runtime-runes/samples/component-transition-hmr/_config.js new file mode 100644 index 0000000000..74195ed077 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/component-transition-hmr/_config.js @@ -0,0 +1,27 @@ +import { flushSync } from 'svelte'; +import { test } from '../../test'; + +export default test({ + compileOptions: { + dev: true, + hmr: true + }, + + async test({ assert, target, raf }) { + const [b1] = target.querySelectorAll('button'); + + b1.click(); + + flushSync(); + + b1.click(); + + flushSync(); + + raf.tick(0); + + raf.tick(250); + const div = /** @type {HTMLDivElement} */ (target.querySelector('.red')); + assert.equal(div.style.opacity, '0.5'); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/component-transition-hmr/main.svelte b/packages/svelte/tests/runtime-runes/samples/component-transition-hmr/main.svelte new file mode 100644 index 0000000000..cf83bde7bd --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/component-transition-hmr/main.svelte @@ -0,0 +1,14 @@ + + +
+ + +