From dabedda7fd3ed8d1256ef90bfe027e0aaf30d4b9 Mon Sep 17 00:00:00 2001 From: sockmaster27 <61235930+sockmaster27@users.noreply.github.com> Date: Thu, 7 Dec 2023 12:15:38 +0100 Subject: [PATCH 1/4] test: add tests of transitions in new runtime --- .../samples/transition-evaluation/_config.js | 12 ++++++++++++ .../samples/transition-evaluation/main.svelte | 12 ++++++++++++ .../samples/transition-js-initial/_config.js | 14 ++++++++++++++ .../samples/transition-js-initial/main.svelte | 16 ++++++++++++++++ 4 files changed, 54 insertions(+) create mode 100644 packages/svelte/tests/runtime-runes/samples/transition-evaluation/_config.js create mode 100644 packages/svelte/tests/runtime-runes/samples/transition-evaluation/main.svelte create mode 100644 packages/svelte/tests/runtime-runes/samples/transition-js-initial/_config.js create mode 100644 packages/svelte/tests/runtime-runes/samples/transition-js-initial/main.svelte diff --git a/packages/svelte/tests/runtime-runes/samples/transition-evaluation/_config.js b/packages/svelte/tests/runtime-runes/samples/transition-evaluation/_config.js new file mode 100644 index 000000000000..79a5b50eb86b --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/transition-evaluation/_config.js @@ -0,0 +1,12 @@ +import { test } from '../../test'; + +export default test({ + test({ assert, component, target }) { + const div = /** @type {HTMLDivElement & { foo?: number }} */ (target.querySelector('div')); + + assert.equal(div.foo, undefined); + component.foo = 2; + component.visible = false; + assert.equal(div.foo, 2); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/transition-evaluation/main.svelte b/packages/svelte/tests/runtime-runes/samples/transition-evaluation/main.svelte new file mode 100644 index 000000000000..cf4f5b664ea8 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/transition-evaluation/main.svelte @@ -0,0 +1,12 @@ + + +{#if visible} +
+{/if} \ No newline at end of file diff --git a/packages/svelte/tests/runtime-runes/samples/transition-js-initial/_config.js b/packages/svelte/tests/runtime-runes/samples/transition-js-initial/_config.js new file mode 100644 index 000000000000..1b85124ce8cc --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/transition-js-initial/_config.js @@ -0,0 +1,14 @@ +import { test } from '../../test'; + +export default test({ + test({ assert, component, target, raf }) { + component.visible = true; + + const div = /** @type {HTMLDivElement & { foo: number }} */ (target.querySelector('div')); + raf.tick(0); + assert.equal(div.foo, 0); + + raf.tick(50); + assert.equal(div.foo, 0.5); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/transition-js-initial/main.svelte b/packages/svelte/tests/runtime-runes/samples/transition-js-initial/main.svelte new file mode 100644 index 000000000000..b5241688d4a4 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/transition-js-initial/main.svelte @@ -0,0 +1,16 @@ + + +{#if visible} +
+{/if} \ No newline at end of file From 6f8a94d2b1b0390b6f817b37faa1e91799dbc660 Mon Sep 17 00:00:00 2001 From: sockmaster27 <61235930+sockmaster27@users.noreply.github.com> Date: Fri, 8 Dec 2023 09:56:22 +0100 Subject: [PATCH 2/4] fix: move evaluation of props --- packages/svelte/src/internal/client/transitions.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/svelte/src/internal/client/transitions.js b/packages/svelte/src/internal/client/transitions.js index d55dbbba56ab..553b080404e1 100644 --- a/packages/svelte/src/internal/client/transitions.js +++ b/packages/svelte/src/internal/client/transitions.js @@ -418,7 +418,6 @@ function is_transition_block(block) { export function bind_transition(dom, transition_fn, props_fn, direction, global) { const transition_effect = /** @type {import('./types.js').EffectSignal} */ (current_effect); const block = current_block; - const props = props_fn === null ? {} : props_fn(); let can_show_intro_on_mount = true; let can_apply_lazy_transitions = false; @@ -458,8 +457,9 @@ export function bind_transition(dom, transition_fn, props_fn, direction, global) effect(() => { /** @param {DOMRect} [from] */ const init = (from) => - untrack(() => - direction === 'key' + untrack(() => { + const props = props_fn === null ? {} : props_fn(); + return direction === 'key' ? /** @type {import('./types.js').AnimateFn} */ (transition_fn)( dom, { from: /** @type {DOMRect} */ (from), to: dom.getBoundingClientRect() }, @@ -468,8 +468,8 @@ export function bind_transition(dom, transition_fn, props_fn, direction, global) ) : /** @type {import('./types.js').TransitionFn} */ (transition_fn)(dom, props, { direction - }) - ); + }); + }); transition = create_transition(dom, init, direction, transition_effect); const is_intro = direction === 'in'; From 00350fac2f2fca3babc5a88acadea2d7912d3c48 Mon Sep 17 00:00:00 2001 From: sockmaster27 <61235930+sockmaster27@users.noreply.github.com> Date: Fri, 8 Dec 2023 11:59:50 +0100 Subject: [PATCH 3/4] format --- packages/svelte/src/internal/client/transitions.js | 4 ++-- .../runtime-runes/samples/transition-evaluation/_config.js | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/svelte/src/internal/client/transitions.js b/packages/svelte/src/internal/client/transitions.js index 553b080404e1..ea81790fa66e 100644 --- a/packages/svelte/src/internal/client/transitions.js +++ b/packages/svelte/src/internal/client/transitions.js @@ -458,7 +458,7 @@ export function bind_transition(dom, transition_fn, props_fn, direction, global) /** @param {DOMRect} [from] */ const init = (from) => untrack(() => { - const props = props_fn === null ? {} : props_fn(); + const props = props_fn === null ? {} : props_fn(); return direction === 'key' ? /** @type {import('./types.js').AnimateFn} */ (transition_fn)( dom, @@ -469,7 +469,7 @@ export function bind_transition(dom, transition_fn, props_fn, direction, global) : /** @type {import('./types.js').TransitionFn} */ (transition_fn)(dom, props, { direction }); - }); + }); transition = create_transition(dom, init, direction, transition_effect); const is_intro = direction === 'in'; diff --git a/packages/svelte/tests/runtime-runes/samples/transition-evaluation/_config.js b/packages/svelte/tests/runtime-runes/samples/transition-evaluation/_config.js index 79a5b50eb86b..f07ed3e0a6e8 100644 --- a/packages/svelte/tests/runtime-runes/samples/transition-evaluation/_config.js +++ b/packages/svelte/tests/runtime-runes/samples/transition-evaluation/_config.js @@ -4,9 +4,9 @@ export default test({ test({ assert, component, target }) { const div = /** @type {HTMLDivElement & { foo?: number }} */ (target.querySelector('div')); - assert.equal(div.foo, undefined); - component.foo = 2; + assert.equal(div.foo, undefined); + component.foo = 2; component.visible = false; - assert.equal(div.foo, 2); + assert.equal(div.foo, 2); } }); From 84023e2c788e10a431ca5ddbf335a0d413b4de63 Mon Sep 17 00:00:00 2001 From: sockmaster27 <61235930+sockmaster27@users.noreply.github.com> Date: Wed, 27 Dec 2023 16:09:41 +0100 Subject: [PATCH 4/4] add changeset --- .changeset/bright-peas-juggle.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/bright-peas-juggle.md diff --git a/.changeset/bright-peas-juggle.md b/.changeset/bright-peas-juggle.md new file mode 100644 index 000000000000..8ef8beaeabae --- /dev/null +++ b/.changeset/bright-peas-juggle.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +A transition's parameters are now evaluated when the transition is initialized.