diff --git a/.changeset/eight-pans-worry.md b/.changeset/eight-pans-worry.md new file mode 100644 index 0000000000..61c970b97f --- /dev/null +++ b/.changeset/eight-pans-worry.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: transitions within dynamic components now function correctly diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-component.js b/packages/svelte/src/internal/client/dom/blocks/svelte-component.js index 1c7106bb7f..72157eaa40 100644 --- a/packages/svelte/src/internal/client/dom/blocks/svelte-component.js +++ b/packages/svelte/src/internal/client/dom/blocks/svelte-component.js @@ -1,4 +1,5 @@ /** @import { TemplateNode, Dom, Effect } from '#client' */ +import { EFFECT_TRANSPARENT } from '../../constants.js'; import { block, branch, pause_effect } from '../../reactivity/effects.js'; import { hydrate_next, hydrate_node, hydrating } from '../hydration.js'; @@ -34,7 +35,7 @@ export function component(node, get_component, render_fn) { if (component) { effect = branch(() => render_fn(anchor, component)); } - }); + }, EFFECT_TRANSPARENT); if (hydrating) { anchor = hydrate_node; diff --git a/packages/svelte/tests/runtime-runes/samples/transition-component/Foo.svelte b/packages/svelte/tests/runtime-runes/samples/transition-component/Foo.svelte new file mode 100644 index 0000000000..eef87a1ec5 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/transition-component/Foo.svelte @@ -0,0 +1,13 @@ + + +

foo

+ diff --git a/packages/svelte/tests/runtime-runes/samples/transition-component/_config.js b/packages/svelte/tests/runtime-runes/samples/transition-component/_config.js new file mode 100644 index 0000000000..414a8b0cc2 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/transition-component/_config.js @@ -0,0 +1,32 @@ +import { flushSync } from '../../../../src/index-client.js'; +import { test } from '../../test'; + +/** + * $.component() should not break transition + * https://github.com/sveltejs/svelte/issues/13645 + */ +export default test({ + test({ assert, raf, target }) { + const btn = target.querySelector('button'); + + // in + btn?.click(); + flushSync(); + assert.htmlEqual( + target.innerHTML, + '

foo

foo

' + ); + + raf.tick(50); + assert.htmlEqual( + target.innerHTML, + '

foo

foo

' + ); + + raf.tick(100); + assert.htmlEqual( + target.innerHTML, + '

foo

foo

' + ); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/transition-component/main.svelte b/packages/svelte/tests/runtime-runes/samples/transition-component/main.svelte new file mode 100644 index 0000000000..1dd29e767b --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/transition-component/main.svelte @@ -0,0 +1,13 @@ + + + + +{#if visible} + + +{/if} \ No newline at end of file