Merge pull request #963 from sveltejs/gh-962

allow parameterised transitions
sveltejs · Nov 27, 2017 · b26be1c · b26be1c
2 parents a717c82 + faf5ca8
commit b26be1c
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 58 deletions.
diff --git a/src/generators/Generator.ts b/src/generators/Generator.ts
@@ -755,6 +755,11 @@ export default class Generator {
 					});
 					this.skip();
 				}
+
+				if (node.type === 'Transition' && node.expression) {
+					node.metadata = contextualise(node.expression, contextDependencies, indexes);
+					this.skip();
+				}
 			},
 
 			leave(node: Node, parent: Node) {

diff --git a/src/generators/dom/visitors/Element/addTransitions.ts b/src/generators/dom/visitors/Element/addTransitions.ts
@@ -21,7 +21,7 @@ export default function addTransitions(
 	if (intro === outro) {
 		const name = block.getUniqueName(`${node.var}_transition`);
 		const snippet = intro.expression
-			? intro.expression.metadata.snippet
+			? intro.metadata.snippet
 			: '{}';
 
 		block.addVariable(name);
@@ -51,7 +51,7 @@ export default function addTransitions(
 		if (intro) {
 			block.addVariable(introName);
 			const snippet = intro.expression
-				? intro.expression.metadata.snippet
+				? intro.metadata.snippet
 				: '{}';
 
 			const fn = `%transitions-${intro.name}`; // TODO add built-in transitions?
@@ -76,7 +76,7 @@ export default function addTransitions(
 		if (outro) {
 			block.addVariable(outroName);
 			const snippet = outro.expression
-				? intro.expression.metadata.snippet
+				? outro.metadata.snippet
 				: '{}';
 
 			const fn = `%transitions-${outro.name}`;

diff --git a/test/runtime/samples/binding-input-checkbox-group-outside-each/_config.js b/test/runtime/samples/binding-input-checkbox-group-outside-each/_config.js
@@ -10,19 +10,17 @@ export default {
 		selected: [ values[1] ]
 	},
 
-	'skip-ssr': true, // values are rendered as [object Object]
-
 	html: `
 		<label>
-			<input type="checkbox"> Alpha
+			<input type="checkbox" value="[object Object]"> Alpha
 		</label>
 
 		<label>
-			<input type="checkbox"> Beta
+			<input type="checkbox" value="[object Object]"> Beta
 		</label>
 
 		<label>
-			<input type="checkbox"> Gamma
+			<input type="checkbox" value="[object Object]"> Gamma
 		</label>
 
 		<p>Beta</p>`,
@@ -40,15 +38,15 @@ export default {
 
 		assert.htmlEqual( target.innerHTML, `
 			<label>
-				<input type="checkbox"> Alpha
+				<input type="checkbox" value="[object Object]"> Alpha
 			</label>
 
 			<label>
-				<input type="checkbox"> Beta
+				<input type="checkbox" value="[object Object]"> Beta
 			</label>
 
 			<label>
-				<input type="checkbox"> Gamma
+				<input type="checkbox" value="[object Object]"> Gamma
 			</label>
 
 			<p>Alpha, Beta</p>
@@ -61,15 +59,15 @@ export default {
 
 		assert.htmlEqual( target.innerHTML, `
 			<label>
-				<input type="checkbox"> Alpha
+				<input type="checkbox" value="[object Object]"> Alpha
 			</label>
 
 			<label>
-				<input type="checkbox"> Beta
+				<input type="checkbox" value="[object Object]"> Beta
 			</label>
 
 			<label>
-				<input type="checkbox"> Gamma
+				<input type="checkbox" value="[object Object]"> Gamma
 			</label>
 
 			<p>Beta, Gamma</p>

diff --git a/test/runtime/samples/binding-input-checkbox-group/_config.js b/test/runtime/samples/binding-input-checkbox-group/_config.js
@@ -10,19 +10,17 @@ export default {
 		selected: [ values[1] ]
 	},
 
-	'skip-ssr': true, // values are rendered as [object Object]
-
 	html: `
 		<label>
-			<input type="checkbox"> Alpha
+			<input type="checkbox" value="[object Object]"> Alpha
 		</label>
 
 		<label>
-			<input type="checkbox"> Beta
+			<input type="checkbox" value="[object Object]"> Beta
 		</label>
 
 		<label>
-			<input type="checkbox"> Gamma
+			<input type="checkbox" value="[object Object]"> Gamma
 		</label>
 
 		<p>Beta</p>`,
@@ -40,15 +38,15 @@ export default {
 
 		assert.htmlEqual( target.innerHTML, `
 			<label>
-				<input type="checkbox"> Alpha
+				<input type="checkbox" value="[object Object]"> Alpha
 			</label>
 
 			<label>
-				<input type="checkbox"> Beta
+				<input type="checkbox" value="[object Object]"> Beta
 			</label>
 
 			<label>
-				<input type="checkbox"> Gamma
+				<input type="checkbox" value="[object Object]"> Gamma
 			</label>
 
 			<p>Alpha, Beta</p>
@@ -61,15 +59,15 @@ export default {
 
 		assert.htmlEqual( target.innerHTML, `
 			<label>
-				<input type="checkbox"> Alpha
+				<input type="checkbox" value="[object Object]"> Alpha
 			</label>
 
 			<label>
-				<input type="checkbox"> Beta
+				<input type="checkbox" value="[object Object]"> Beta
 			</label>
 
 			<label>
-				<input type="checkbox"> Gamma
+				<input type="checkbox" value="[object Object]"> Gamma
 			</label>
 
 			<p>Beta, Gamma</p>

diff --git a/test/runtime/samples/binding-input-radio-group/_config.js b/test/runtime/samples/binding-input-radio-group/_config.js
@@ -10,19 +10,17 @@ export default {
 		selected: values[1]
 	},
 
-	'skip-ssr': true, // values are rendered as [object Object]
-
 	html: `
 		<label>
-			<input type="radio"> Alpha
+			<input type="radio" value="[object Object]"> Alpha
 		</label>
 
 		<label>
-			<input type="radio"> Beta
+			<input type="radio" value="[object Object]"> Beta
 		</label>
 
 		<label>
-			<input type="radio"> Gamma
+			<input type="radio" value="[object Object]"> Gamma
 		</label>
 
 		<p>Beta</p>`,
@@ -40,15 +38,15 @@ export default {
 
 		assert.htmlEqual( target.innerHTML, `
 			<label>
-				<input type="radio"> Alpha
+				<input type="radio" value="[object Object]"> Alpha
 			</label>
 
 			<label>
-				<input type="radio"> Beta
+				<input type="radio" value="[object Object]"> Beta
 			</label>
 
 			<label>
-				<input type="radio"> Gamma
+				<input type="radio" value="[object Object]"> Gamma
 			</label>
 
 			<p>Alpha</p>
@@ -65,15 +63,15 @@ export default {
 
 		assert.htmlEqual( target.innerHTML, `
 			<label>
-				<input type="radio"> Alpha
+				<input type="radio" value="[object Object]"> Alpha
 			</label>
 
 			<label>
-				<input type="radio"> Beta
+				<input type="radio" value="[object Object]"> Beta
 			</label>
 
 			<label>
-				<input type="radio"> Gamma
+				<input type="radio" value="[object Object]"> Gamma
 			</label>
 
 			<p>Gamma</p>

diff --git a/test/runtime/samples/transition-js-parameterised/_config.js b/test/runtime/samples/transition-js-parameterised/_config.js
@@ -0,0 +1,17 @@
+export default {
+	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/main.html b/test/runtime/samples/transition-js-parameterised/main.html
@@ -0,0 +1,18 @@
+{{#if visible}}
+	<div in:foo='{k: 200}'>fades in</div>
+{{/if}}
+
+<script>
+	export default {
+		transitions: {
+			foo: function(node, params) {
+				return {
+					duration: 100,
+					tick: t => {
+						node.foo = t * params.k;
+					}
+				};
+			}
+		}
+	};
+</script>