Repository: sveltejs/svelte (JavaScript)
Date: 2017-12-03 18:50:42+00:00
Task type: Bug Fix

Issue:
Transitions broken in version 1.43.0
Maybe it's related to the work on #956 

None of the transitions work anymore, and we get an error from rollup `Cannot read property 'snippet' of undefined`

[This](https://svelte.technology/repl?version=1.43.0&data=JTdCJTIyZ2lzdCUyMiUzQW51bGwlMkMlMjJjb21wb25lbnRzJTIyJTNBJTVCJTdCJTIybmFtZSUyMiUzQSUyMkFwcCUyMiUyQyUyMnNvdXJjZSUyMiUzQSUyMiUzQ2xhYmVsJTNFJTVDbiU1Q3QlM0NpbnB1dCUyMHR5cGUlM0QnY2hlY2tib3gnJTIwYmluZCUzQWNoZWNrZWQlM0QndmlzaWJsZSclM0UlMjB2aXNpYmxlJTVDbiUzQyUyRmxhYmVsJTNFJTVDbiU1Q24lN0IlN0IlMjNpZiUyMHZpc2libGUlN0QlN0QlNUNuJTVDdCUzQyEtLSUyMHVzZSUyMCU2MGluJTYwJTJDJTIwJTYwb3V0JTYwJTJDJTIwb3IlMjAlNjB0cmFuc2l0aW9uJTYwJTIwKGJpZGlyZWN0aW9uYWwpJTIwLS0lM0UlNUNuJTVDdCUzQ2RpdiUyMHRyYW5zaXRpb24lM0FmbHklM0QnJTdCeSUzQTIwJTdEJyUzRWhlbGxvISUzQyUyRmRpdiUzRSU1Q24lN0IlN0IlMkZpZiU3RCU3RCU1Q24lNUNuJTNDc2NyaXB0JTNFJTVDbiU1Q3RpbXBvcnQlMjAlN0IlMjBmbHklMjAlN0QlMjBmcm9tJTIwJ3N2ZWx0ZS10cmFuc2l0aW9ucyclM0IlNUNuJTVDbiU1Q3RleHBvcnQlMjBkZWZhdWx0JTIwJTdCJTVDbiU1Q3QlNUN0dHJhbnNpdGlvbnMlM0ElMjAlN0IlMjBmbHklMjAlN0QlNUNuJTVDdCU3RCUzQiU1Q24lM0MlMkZzY3JpcHQlM0UlNUNuJTIyJTdEJTVEJTJDJTIyZGF0YSUyMiUzQSU3QiUyMnZpc2libGUlMjIlM0F0cnVlJTdEJTdE) is a link directly from the [user guide examples for transitions](https://svelte.technology/guide#transitions)

You will see the error as soon as you open the example in the REPL.


Issue discussion:
**Addendum:**
Works perfectly in 1.42.0
but does not work in 1.42.1
@Rich-Harris I think this is not completely solved yet.

Compare [this (shows an error message)](https://svelte.technology/repl?version=1.43.1&gist=a3518200eec6390fe7503f542fb362b3) with [this (works perfectly)](https://svelte.technology/repl?version=1.42.0&gist=a3518200eec6390fe7503f542fb362b3)

To clarify, when transition parameters are sent from `data` it barfs in `1.43.1`. Whereas, it used to work perfectly fine in `1.42.0`
[This REPL](https://svelte.technology/repl?version=1.43.1&gist=d1dc5b89cadc2574fac02786aef04c0e) works. 

@Rich-Harris can this issue be reopened please?

It seems that it can evaluate scope variables inside `each` blocks, but cannot evaluate items from inside `data` itself.


Solution patch:
diff --git a/src/generators/dom/visitors/Element/addTransitions.ts b/src/generators/dom/visitors/Element/addTransitions.ts
--- a/src/generators/dom/visitors/Element/addTransitions.ts
+++ b/src/generators/dom/visitors/Element/addTransitions.ts
@@ -15,10 +15,9 @@ export default function addTransitions(
 
 	if (!intro && !outro) return;
 
-	if (intro) block.contextualise(intro.expression); // TODO remove all these
-	if (outro) block.contextualise(outro.expression);
-
 	if (intro === outro) {
+		block.contextualise(intro.expression); // TODO remove all these
+
 		const name = block.getUniqueName(`${node.var}_transition`);
 		const snippet = intro.expression
 			? intro.metadata.snippet
@@ -49,6 +48,8 @@ export default function addTransitions(
 		const outroName = outro && block.getUniqueName(`${node.var}_outro`);
 
 		if (intro) {
+			block.contextualise(intro.expression);
+
 			block.addVariable(introName);
 			const snippet = intro.expression
 				? intro.metadata.snippet
@@ -74,6 +75,8 @@ export default function addTransitions(
 		}
 
 		if (outro) {
+			block.contextualise(outro.expression);
+
 			block.addVariable(outroName);
 			const snippet = outro.expression
 				? outro.metadata.snippet


Test patch:
diff --git a/test/runtime/samples/transition-js-parameterised-with-state/_config.js b/test/runtime/samples/transition-js-parameterised-with-state/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/transition-js-parameterised-with-state/_config.js
@@ -0,0 +1,21 @@
+export default {
+	data: {
+		duration: 200
+	},
+
+	test(assert, component, target, window, raf) {
+		component.set({ visible: true });
+		const div = target.querySelector('div');
+		assert.equal(div.foo, 0);
+
+		raf.tick(50);
+		assert.equal(div.foo, 100);
+
+		raf.tick(100);
+		assert.equal(div.foo, 200);
+
+		raf.tick(101);
+
+		component.destroy();
+	},
+};
diff --git a/test/runtime/samples/transition-js-parameterised-with-state/main.html b/test/runtime/samples/transition-js-parameterised-with-state/main.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/transition-js-parameterised-with-state/main.html
@@ -0,0 +1,18 @@
+{{#if visible}}
+	<div transition:foo='{k: duration}'>fades in</div>
+{{/if}}
+
+<script>
+	export default {
+		transitions: {
+			foo(node, params) {
+				return {
+					duration: 100,
+					tick: t => {
+						node.foo = t * params.k;
+					}
+				};
+			}
+		}
+	};
+</script>
\ No newline at end of file