add transitions property to default export, track intros/outros in Block

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 {

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 ) {

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
+	});
+}

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
 };

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?
+	});
+}