From d0c0fbcef40d8998e55bac710e8c496be5150254 Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Wed, 26 Apr 2017 01:08:51 -0400
Subject: [PATCH] add transitions property to default export, track
 intros/outros in Block

---
 src/generators/dom/Block.js                     | 14 ++++++++++++++
 src/generators/dom/visitors/Element/Element.js  |  7 +++++--
 .../dom/visitors/Element/Transition.js          |  7 +++++++
 src/validate/js/propValidators/index.js         |  4 +++-
 src/validate/js/propValidators/transitions.js   | 17 +++++++++++++++++
 5 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 src/generators/dom/visitors/Element/Transition.js
 create mode 100644 src/validate/js/propValidators/transitions.js

diff --git a/src/generators/dom/Block.js b/src/generators/dom/Block.js
index 2e8d54f03c..c32cdba280 100644
--- a/src/generators/dom/Block.js
+++ b/src/generators/dom/Block.js
@@ -33,6 +33,9 @@ export default class Block {
 		this.variables = new Map();
 		this.getUniqueName = this.generator.getUniqueNameMaker( options.params );
 
+		this.intros = [];
+		this.outros = [];
+
 		// unique names
 		this.component = this.getUniqueName( 'component' );
 		this.target = this.getUniqueName( 'target' );
@@ -135,6 +138,17 @@ export default class Block {
 			properties.addBlock( `key: ${localKey},` );
 		}
 
+		if ( this.intros.length ) {
+			properties.addBlock( `intro: ${this.generator.helper( 'transition' )}([
+				// TODO
+			]),` );
+		}
+
+		if ( this.outros.length ) {
+			// TODO
+			properties.addLine( `outro: null,` );
+		}
+
 		if ( this.builders.mount.isEmpty() ) {
 			properties.addBlock( `mount: ${this.generator.helper( 'noop' )},` );
 		} else {
diff --git a/src/generators/dom/visitors/Element/Element.js b/src/generators/dom/visitors/Element/Element.js
index 5ce0f6ba5b..0643211645 100644
--- a/src/generators/dom/visitors/Element/Element.js
+++ b/src/generators/dom/visitors/Element/Element.js
@@ -6,6 +6,7 @@ import visitAttribute from './Attribute.js';
 import visitEventHandler from './EventHandler.js';
 import visitBinding from './Binding.js';
 import visitRef from './Ref.js';
+import visitTransition from './Transition.js';
 
 const meta = {
 	':Window': visitWindow
@@ -15,14 +16,16 @@ const order = {
 	Attribute: 1,
 	Binding: 2,
 	EventHandler: 3,
-	Ref: 4
+	Ref: 4,
+	Transition: 5
 };
 
 const visitors = {
 	Attribute: visitAttribute,
 	EventHandler: visitEventHandler,
 	Binding: visitBinding,
-	Ref: visitRef
+	Ref: visitRef,
+	Transition: visitTransition
 };
 
 export default function visitElement ( generator, block, state, node ) {
diff --git a/src/generators/dom/visitors/Element/Transition.js b/src/generators/dom/visitors/Element/Transition.js
new file mode 100644
index 0000000000..fca15c6b35
--- /dev/null
+++ b/src/generators/dom/visitors/Element/Transition.js
@@ -0,0 +1,7 @@
+export default function visitTransition ( generator, block, state, node, attribute ) {
+	( attribute.intro ? block.intros : block.outros ).push({
+		node: state.name,
+		transition: attribute.name,
+		params: block.contextualise( attribute.expression ).snippet
+	});
+}
\ No newline at end of file
diff --git a/src/validate/js/propValidators/index.js b/src/validate/js/propValidators/index.js
index 0d5f6d8ffc..36dea150fb 100644
--- a/src/validate/js/propValidators/index.js
+++ b/src/validate/js/propValidators/index.js
@@ -9,6 +9,7 @@ import methods from './methods.js';
 import components from './components.js';
 import events from './events.js';
 import namespace from './namespace.js';
+import transitions from './transitions.js';
 
 export default {
 	data,
@@ -21,5 +22,6 @@ export default {
 	methods,
 	components,
 	events,
-	namespace
+	namespace,
+	transitions
 };
diff --git a/src/validate/js/propValidators/transitions.js b/src/validate/js/propValidators/transitions.js
new file mode 100644
index 0000000000..a7580cc92a
--- /dev/null
+++ b/src/validate/js/propValidators/transitions.js
@@ -0,0 +1,17 @@
+import checkForDupes from '../utils/checkForDupes.js';
+import checkForComputedKeys from '../utils/checkForComputedKeys.js';
+
+export default function transitions ( validator, prop ) {
+	if ( prop.value.type !== 'ObjectExpression' ) {
+		validator.error( `The 'transitions' property must be an object literal`, prop.start );
+		return;
+	}
+
+	checkForDupes( validator, prop.value.properties );
+	checkForComputedKeys( validator, prop.value.properties );
+
+	prop.value.properties.forEach( () => {
+		// TODO probably some validation that can happen here...
+		// checking for use of `this` etc?
+	});
+}