breaking: send in/out to transition fn (#8318)

Instead of "both", which doesn't make sense at that point.

Author: tivac

src/runtime/internal/transitions.ts

@@ -376,8 +376,10 @@ export function create_bidirectional_transition(node: Element & ElementCSSInline
 		run(b: INTRO | OUTRO) {
 			if (is_function(config)) {
 				wait().then(() => {
+					const opts: TransitionOptions = { direction: b ? 'in' : 'out' };
+					
 					// @ts-ignore
-					config = config(options);
+					config = config(opts);
 					go(b);
 				});
 			} else {

test/runtime/samples/transition-js-deferred-option-direction/_config.js

@@ -4,16 +4,19 @@ export default {
 
 		const div_in = target.querySelector('#in');
 		const div_out = target.querySelector('#out');
-		const div_both = target.querySelector('#both');
+		const div_bothin = target.querySelector('#both-in');
+		const div_bothout = target.querySelector('#both-out');
 
-		assert.equal(div_in.initial, 'in');
-		assert.equal(div_out.initial, 'out');
-		assert.equal(div_both.initial, 'both');
+		assert.equal(div_in.directions, 'in,in');
+		assert.equal(div_out.directions, 'out');
+		assert.equal(div_bothin.directions, 'both');
+		assert.equal(div_bothout.directions, 'both');
 
 		return Promise.resolve().then(() => {
-			assert.equal(div_in.later, 'in');
-			assert.equal(div_out.later, 'out');
-			assert.equal(div_both.later, 'both');
+			assert.equal(div_in.directions, 'in,in');
+			assert.equal(div_out.directions, 'out,out');
+			assert.equal(div_bothin.directions, 'both,in');
+			assert.equal(div_bothout.directions, 'both,out');
 		});
 	}
 };

test/runtime/samples/transition-js-deferred-option-direction/main.svelte

@@ -2,10 +2,10 @@
 	export let visible;
 
 	function foo(node, _params, options) {
-		node.initial = options.direction;
+		node.directions = options.direction;
 
 		return (opts) => {
-			node.later = opts.direction;
+			node.directions += "," + opts.direction;
 
 			return {
 				duration: 10
@@ -15,10 +15,11 @@
 </script>
 
 {#if visible}
-	<div id="both" transition:foo></div>
-	<div id="in" in:foo></div>
+	<div id="both-in" transition:foo />
+	<div id="in" in:foo />
 {/if}
 
 {#if !visible}
-	<div id="out" out:foo></div>
+	<div id="out" out:foo />
+	<div id="both-out" transition:foo={{ duration: 500 }} />
 {/if}