From 642b414c9cd9fecaf6623ec2ef8e49be5d833004 Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Thu, 4 May 2017 14:06:50 -0400
Subject: [PATCH] validate transition directives - closes #564

---
 src/validate/html/validateElement.js          | 28 ++++++++++++++++++-
 src/validate/index.js                         |  3 +-
 src/validate/js/index.js                      |  2 +-
 .../errors.json                               |  8 ++++++
 .../input.html                                | 10 +++++++
 .../transition-duplicate-in/errors.json       |  8 ++++++
 .../transition-duplicate-in/input.html        | 10 +++++++
 .../errors.json                               |  8 ++++++
 .../input.html                                | 10 +++++++
 .../transition-duplicate-out/errors.json      |  8 ++++++
 .../transition-duplicate-out/input.html       | 10 +++++++
 .../errors.json                               |  8 ++++++
 .../input.html                                | 10 +++++++
 .../errors.json                               |  8 ++++++
 .../input.html                                | 10 +++++++
 .../errors.json                               |  8 ++++++
 .../input.html                                | 10 +++++++
 .../samples/transition-missing/errors.json    |  8 ++++++
 .../samples/transition-missing/input.html     |  1 +
 19 files changed, 165 insertions(+), 3 deletions(-)
 create mode 100644 test/validator/samples/transition-duplicate-in-transition/errors.json
 create mode 100644 test/validator/samples/transition-duplicate-in-transition/input.html
 create mode 100644 test/validator/samples/transition-duplicate-in/errors.json
 create mode 100644 test/validator/samples/transition-duplicate-in/input.html
 create mode 100644 test/validator/samples/transition-duplicate-out-transition/errors.json
 create mode 100644 test/validator/samples/transition-duplicate-out-transition/input.html
 create mode 100644 test/validator/samples/transition-duplicate-out/errors.json
 create mode 100644 test/validator/samples/transition-duplicate-out/input.html
 create mode 100644 test/validator/samples/transition-duplicate-transition-in/errors.json
 create mode 100644 test/validator/samples/transition-duplicate-transition-in/input.html
 create mode 100644 test/validator/samples/transition-duplicate-transition-out/errors.json
 create mode 100644 test/validator/samples/transition-duplicate-transition-out/input.html
 create mode 100644 test/validator/samples/transition-duplicate-transition/errors.json
 create mode 100644 test/validator/samples/transition-duplicate-transition/input.html
 create mode 100644 test/validator/samples/transition-missing/errors.json
 create mode 100644 test/validator/samples/transition-missing/input.html

diff --git a/src/validate/html/validateElement.js b/src/validate/html/validateElement.js
index 42e4c75f30..74034ceb08 100644
--- a/src/validate/html/validateElement.js
+++ b/src/validate/html/validateElement.js
@@ -3,6 +3,10 @@ import validateEventHandler from './validateEventHandler.js';
 export default function validateElement ( validator, node ) {
 	const isComponent = node.name === ':Self' || validator.components.has( node.name );
 
+	let hasIntro;
+	let hasOutro;
+	let hasTransition;
+
 	node.attributes.forEach( attribute => {
 		if ( !isComponent && attribute.type === 'Binding' ) {
 			const { name } = attribute;
@@ -46,9 +50,31 @@ export default function validateElement ( validator, node ) {
 			}
 		}
 
-		if ( attribute.type === 'EventHandler' ) {
+		else if ( attribute.type === 'EventHandler' ) {
 			validateEventHandler( validator, attribute );
 		}
+
+		else if ( attribute.type === 'Transition' ) {
+			const bidi = attribute.intro && attribute.outro;
+
+			if ( hasTransition ) {
+				if ( bidi ) validator.error( `An element can only have one 'transition' directive`, attribute.start );
+				validator.error( `An element cannot have both a 'transition' directive and an '${attribute.intro ? 'in' : 'out'}' directive`, attribute.start );
+			}
+
+			if ( ( hasIntro && attribute.intro ) || ( hasOutro && attribute.outro ) ) {
+				if ( bidi ) validator.error( `An element cannot have both an '${hasIntro ? 'in' : 'out'}' directive and a 'transition' directive`, attribute.start );
+				validator.error( `An element can only have one '${hasIntro ? 'in' : 'out'}' directive`, attribute.start );
+			}
+
+			if ( attribute.intro ) hasIntro = true;
+			if ( attribute.outro ) hasOutro = true;
+			if ( bidi ) hasTransition = true;
+
+			if ( !validator.transitions.has( attribute.name ) ) {
+				validator.error( `Missing transition '${attribute.name}'`, attribute.start );
+			}
+		}
 	});
 }
 
diff --git a/src/validate/index.js b/src/validate/index.js
index 8040549e56..8991803ba5 100644
--- a/src/validate/index.js
+++ b/src/validate/index.js
@@ -43,7 +43,8 @@ export default function validate ( parsed, source, { onerror, onwarn, name, file
 		properties: {},
 		components: new Map(),
 		methods: new Map(),
-		helpers: new Map()
+		helpers: new Map(),
+		transitions: new Map()
 	};
 
 	try {
diff --git a/src/validate/js/index.js b/src/validate/js/index.js
index 4d237e9f01..5b101502ef 100644
--- a/src/validate/js/index.js
+++ b/src/validate/js/index.js
@@ -63,7 +63,7 @@ export default function validateJs ( validator, js ) {
 		}
 	});
 
-	[ 'components', 'methods', 'helpers' ].forEach( key => {
+	[ 'components', 'methods', 'helpers', 'transitions' ].forEach( key => {
 		if ( validator.properties[ key ] ) {
 			validator.properties[ key ].value.properties.forEach( prop => {
 				validator[ key ].set( prop.key.name, prop.value );
diff --git a/test/validator/samples/transition-duplicate-in-transition/errors.json b/test/validator/samples/transition-duplicate-in-transition/errors.json
new file mode 100644
index 0000000000..c48f56ede9
--- /dev/null
+++ b/test/validator/samples/transition-duplicate-in-transition/errors.json
@@ -0,0 +1,8 @@
+[{
+	"message": "An element cannot have both an 'in' directive and a 'transition' directive",
+	"loc": {
+		"line": 1,
+		"column": 12
+	},
+	"pos": 12
+}]
\ No newline at end of file
diff --git a/test/validator/samples/transition-duplicate-in-transition/input.html b/test/validator/samples/transition-duplicate-in-transition/input.html
new file mode 100644
index 0000000000..6f47e754f4
--- /dev/null
+++ b/test/validator/samples/transition-duplicate-in-transition/input.html
@@ -0,0 +1,10 @@
+<div in:foo transition:bar>...</div>
+
+<script>
+	export default {
+		transitions: {
+			foo,
+			bar
+		}
+	};
+</script>
\ No newline at end of file
diff --git a/test/validator/samples/transition-duplicate-in/errors.json b/test/validator/samples/transition-duplicate-in/errors.json
new file mode 100644
index 0000000000..a3cc8b0ec5
--- /dev/null
+++ b/test/validator/samples/transition-duplicate-in/errors.json
@@ -0,0 +1,8 @@
+[{
+	"message": "An element can only have one 'in' directive",
+	"loc": {
+		"line": 1,
+		"column": 12
+	},
+	"pos": 12
+}]
\ No newline at end of file
diff --git a/test/validator/samples/transition-duplicate-in/input.html b/test/validator/samples/transition-duplicate-in/input.html
new file mode 100644
index 0000000000..b9a9218f8e
--- /dev/null
+++ b/test/validator/samples/transition-duplicate-in/input.html
@@ -0,0 +1,10 @@
+<div in:foo in:bar>...</div>
+
+<script>
+	export default {
+		transitions: {
+			foo,
+			bar
+		}
+	};
+</script>
\ No newline at end of file
diff --git a/test/validator/samples/transition-duplicate-out-transition/errors.json b/test/validator/samples/transition-duplicate-out-transition/errors.json
new file mode 100644
index 0000000000..f4bfa61ef0
--- /dev/null
+++ b/test/validator/samples/transition-duplicate-out-transition/errors.json
@@ -0,0 +1,8 @@
+[{
+	"message": "An element cannot have both an 'out' directive and a 'transition' directive",
+	"loc": {
+		"line": 1,
+		"column": 13
+	},
+	"pos": 13
+}]
\ No newline at end of file
diff --git a/test/validator/samples/transition-duplicate-out-transition/input.html b/test/validator/samples/transition-duplicate-out-transition/input.html
new file mode 100644
index 0000000000..ae2582b942
--- /dev/null
+++ b/test/validator/samples/transition-duplicate-out-transition/input.html
@@ -0,0 +1,10 @@
+<div out:foo transition:bar>...</div>
+
+<script>
+	export default {
+		transitions: {
+			foo,
+			bar
+		}
+	};
+</script>
\ No newline at end of file
diff --git a/test/validator/samples/transition-duplicate-out/errors.json b/test/validator/samples/transition-duplicate-out/errors.json
new file mode 100644
index 0000000000..988dc02bbe
--- /dev/null
+++ b/test/validator/samples/transition-duplicate-out/errors.json
@@ -0,0 +1,8 @@
+[{
+	"message": "An element can only have one 'out' directive",
+	"loc": {
+		"line": 1,
+		"column": 13
+	},
+	"pos": 13
+}]
\ No newline at end of file
diff --git a/test/validator/samples/transition-duplicate-out/input.html b/test/validator/samples/transition-duplicate-out/input.html
new file mode 100644
index 0000000000..949dae8638
--- /dev/null
+++ b/test/validator/samples/transition-duplicate-out/input.html
@@ -0,0 +1,10 @@
+<div out:foo out:bar>...</div>
+
+<script>
+	export default {
+		transitions: {
+			foo,
+			bar
+		}
+	};
+</script>
\ No newline at end of file
diff --git a/test/validator/samples/transition-duplicate-transition-in/errors.json b/test/validator/samples/transition-duplicate-transition-in/errors.json
new file mode 100644
index 0000000000..678ad4dd38
--- /dev/null
+++ b/test/validator/samples/transition-duplicate-transition-in/errors.json
@@ -0,0 +1,8 @@
+[{
+	"message": "An element cannot have both a 'transition' directive and an 'in' directive",
+	"loc": {
+		"line": 1,
+		"column": 20
+	},
+	"pos": 20
+}]
\ No newline at end of file
diff --git a/test/validator/samples/transition-duplicate-transition-in/input.html b/test/validator/samples/transition-duplicate-transition-in/input.html
new file mode 100644
index 0000000000..bc105c2079
--- /dev/null
+++ b/test/validator/samples/transition-duplicate-transition-in/input.html
@@ -0,0 +1,10 @@
+<div transition:foo in:bar>...</div>
+
+<script>
+	export default {
+		transitions: {
+			foo,
+			bar
+		}
+	};
+</script>
\ No newline at end of file
diff --git a/test/validator/samples/transition-duplicate-transition-out/errors.json b/test/validator/samples/transition-duplicate-transition-out/errors.json
new file mode 100644
index 0000000000..31dc180b5a
--- /dev/null
+++ b/test/validator/samples/transition-duplicate-transition-out/errors.json
@@ -0,0 +1,8 @@
+[{
+	"message": "An element cannot have both a 'transition' directive and an 'out' directive",
+	"loc": {
+		"line": 1,
+		"column": 20
+	},
+	"pos": 20
+}]
\ No newline at end of file
diff --git a/test/validator/samples/transition-duplicate-transition-out/input.html b/test/validator/samples/transition-duplicate-transition-out/input.html
new file mode 100644
index 0000000000..ac82cb064e
--- /dev/null
+++ b/test/validator/samples/transition-duplicate-transition-out/input.html
@@ -0,0 +1,10 @@
+<div transition:foo out:bar>...</div>
+
+<script>
+	export default {
+		transitions: {
+			foo,
+			bar
+		}
+	};
+</script>
\ No newline at end of file
diff --git a/test/validator/samples/transition-duplicate-transition/errors.json b/test/validator/samples/transition-duplicate-transition/errors.json
new file mode 100644
index 0000000000..585ff37451
--- /dev/null
+++ b/test/validator/samples/transition-duplicate-transition/errors.json
@@ -0,0 +1,8 @@
+[{
+	"message": "An element can only have one 'transition' directive",
+	"loc": {
+		"line": 1,
+		"column": 20
+	},
+	"pos": 20
+}]
\ No newline at end of file
diff --git a/test/validator/samples/transition-duplicate-transition/input.html b/test/validator/samples/transition-duplicate-transition/input.html
new file mode 100644
index 0000000000..29af279564
--- /dev/null
+++ b/test/validator/samples/transition-duplicate-transition/input.html
@@ -0,0 +1,10 @@
+<div transition:foo transition:bar>...</div>
+
+<script>
+	export default {
+		transitions: {
+			foo,
+			bar
+		}
+	};
+</script>
\ No newline at end of file
diff --git a/test/validator/samples/transition-missing/errors.json b/test/validator/samples/transition-missing/errors.json
new file mode 100644
index 0000000000..4f2b88c2f6
--- /dev/null
+++ b/test/validator/samples/transition-missing/errors.json
@@ -0,0 +1,8 @@
+[{
+	"message": "Missing transition 'foo'",
+	"loc": {
+		"line": 1,
+		"column": 5
+	},
+	"pos": 5
+}]
\ No newline at end of file
diff --git a/test/validator/samples/transition-missing/input.html b/test/validator/samples/transition-missing/input.html
new file mode 100644
index 0000000000..5d0e1b7067
--- /dev/null
+++ b/test/validator/samples/transition-missing/input.html
@@ -0,0 +1 @@
+<div in:foo>...</div>
\ No newline at end of file